:root {
  --tcc-primary: #0D4EA6;
  --tcc-secondary: #1F6FD1;
  --tcc-accent: #D72638;
  --tcc-bg: #F4F8FC;
  --tcc-card: #FFFFFF;
  --tcc-text: #16212E;
  --tcc-muted: #667085;
  --tcc-line: rgba(13, 78, 166, 0.13);
  --tcc-soft: rgba(31, 111, 209, 0.1);
  --tcc-shadow: 0 18px 42px rgba(13, 78, 166, 0.12);
  --tcc-radius: 22px;
  --tcc-surface: rgba(255, 255, 255, 0.96);
  --tcc-surface-strong: #FFFFFF;
  --tcc-space-1: 6px;
  --tcc-space-2: 10px;
  --tcc-space-3: 14px;
  --tcc-space-4: 16px;
  --tcc-space-5: 20px;
  --tcc-radius-sm: 14px;
  --tcc-radius-md: 18px;
  --tcc-radius-lg: 22px;
  --tcc-radius-xl: 28px;
  --tcc-shadow-card: 0 14px 34px rgba(13, 78, 166, 0.10);
  --tcc-shadow-strong: 0 22px 48px rgba(13, 78, 166, 0.16);
  --tcc-success: #0A7A45;
  --tcc-success-bg: rgba(22, 163, 74, 0.12);
  --tcc-danger: #D72638;
  --tcc-danger-bg: rgba(215, 38, 56, 0.10);
  --tcc-warning: #B7791F;
  --tcc-warning-bg: rgba(245, 158, 11, 0.14);
  --tcc-info: #0D4EA6;
  --tcc-info-bg: rgba(31, 111, 209, 0.10);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  min-height: 100%;
  background: var(--tcc-bg);
}

body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  color: var(--tcc-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.45;
  background:
    radial-gradient(circle at 12% -8%, rgba(31, 111, 209, 0.22), transparent 34%),
    radial-gradient(circle at 92% 5%, rgba(13, 78, 166, 0.13), transparent 30%),
    var(--tcc-bg);
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(120deg, rgba(13, 78, 166, 0.045) 0 1px, transparent 1px 24px),
    linear-gradient(30deg, rgba(31, 111, 209, 0.05) 0 1px, transparent 1px 28px);
  mask-image: linear-gradient(#000, transparent 64%);
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  min-height: 44px;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

button:active {
  transform: scale(0.98);
}

button:disabled {
  cursor: default;
  opacity: 0.62;
  transform: none;
}

h1,
h2,
h3,
p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

.app-shell {
  width: min(100%, 520px);
  min-height: 100vh;
  margin: 0 auto;
  padding: calc(18px + env(safe-area-inset-top)) 16px calc(108px + env(safe-area-inset-bottom));
}

.login-screen {
  display: grid;
  min-height: calc(100vh - 120px);
  align-content: center;
  gap: 18px;
}

.login-hero {
  display: flex;
  gap: 14px;
  align-items: center;
  color: #fff;
  padding: 22px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 42%),
    linear-gradient(135deg, var(--tcc-primary), var(--tcc-secondary));
  border-radius: 28px;
  box-shadow: var(--tcc-shadow);
}

.login-hero p,
.screen-title p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.94rem;
  font-weight: 650;
}

.login-hero h1 {
  margin-top: 3px;
  font-size: 2rem;
  line-height: 1.04;
  letter-spacing: 0;
}

.brand-logo,
.screen-logo {
  display: block;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 14px 30px rgba(22, 33, 46, 0.16);
}

.brand-logo {
  flex: 0 0 72px;
  width: 72px;
  height: 96px;
  padding: 6px;
  border-radius: 20px;
}

.login-form,
.install-card,
.feature-card,
.status-card,
.quick-card,
.profile-grid > div,
.logout-card,
.dashboard-setting-row,
.info-list > div,
.text-row {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--tcc-line);
  border-radius: var(--tcc-radius);
  box-shadow: var(--tcc-shadow);
}

.login-form {
  display: grid;
  gap: 15px;
  padding: 20px;
}

.form-title h2 {
  color: var(--tcc-primary);
  font-size: 1.35rem;
}

.form-title p,
.settings-copy,
.section-head p {
  color: var(--tcc-muted);
  font-size: 0.94rem;
}

label {
  display: grid;
  gap: 7px;
  color: var(--tcc-muted);
  font-size: 0.9rem;
  font-weight: 700;
}

input,
textarea,
select {
  width: 100%;
  min-height: 50px;
  padding: 0 15px;
  color: var(--tcc-text);
  background: #fff;
  border: 1px solid rgba(13, 78, 166, 0.16);
  border-radius: 15px;
  outline: none;
}

textarea {
  min-height: 116px;
  padding-top: 12px;
  resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--tcc-secondary);
  box-shadow: 0 0 0 4px rgba(31, 111, 209, 0.13);
}

.check-row {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 46px;
  padding: 10px 12px;
  color: var(--tcc-text);
  background: rgba(13, 78, 166, 0.06);
  border-radius: 14px;
}

.check-row input {
  width: 20px;
  min-height: 20px;
  padding: 0;
  accent-color: var(--tcc-primary);
}

.primary-button,
.small-action,
.secondary-action,
.link-button {
  border-radius: 16px;
  font-weight: 800;
}

.primary-button,
.small-action {
  color: #fff;
  background: linear-gradient(135deg, var(--tcc-primary), var(--tcc-secondary));
  box-shadow: 0 12px 28px rgba(13, 78, 166, 0.22);
}

.secondary-action {
  min-height: 46px;
  padding: 0 16px;
  color: var(--tcc-primary);
  background: #fff;
  border: 1px solid rgba(13, 78, 166, 0.18);
  box-shadow: 0 10px 24px rgba(13, 78, 166, 0.08);
}

.link-button {
  min-height: 42px;
  color: var(--tcc-primary);
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.primary-button {
  width: 100%;
}

.small-action {
  min-height: 40px;
  padding: 0 14px;
  white-space: nowrap;
}

.form-message {
  min-height: 1.3em;
  color: var(--tcc-accent);
  font-size: 0.92rem;
  font-weight: 650;
}

.push-message {
  grid-column: 1 / -1;
  min-height: 1.25em;
  color: var(--tcc-muted);
  font-size: 0.9rem;
  font-weight: 750;
}

.push-message.error {
  color: var(--tcc-accent);
}

.push-message.success {
  color: #08633C;
}

.push-logo {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  overflow: hidden;
  background: #E8EEF8;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.push-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.push-logo span {
  display: none;
  font-size: 11px;
  font-weight: 800;
  color: #0D4EA6;
}

.push-logo.fallback img {
  display: none;
}

.push-logo.fallback span {
  display: inline;
}

.push-prompt-modal {
  padding: 20px;
}

.push-prompt-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.push-prompt-head h3 {
  margin: 0;
}

.push-prompt-primary {
  width: 100%;
  min-height: 48px;
  font-size: 1rem;
}

.push-prompt-checkbox {
  margin-top: 10px;
  font-size: .88rem;
  color: var(--tcc-muted);
}

.push-prompt-later {
  align-self: flex-start;
  margin-top: 2px;
}

.install-card,
.push-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  padding: 14px;
}

.install-card p,
.push-card p,
.status-card p,
.quick-card em,
.empty-state,
.list-sub,
.profile-grid span,
.settings-user span,
.info-list span {
  color: var(--tcc-muted);
  font-size: 0.9rem;
  font-style: normal;
}

.install-icon,
.card-icon,
.nav-icon,
.logout-icon {
  display: inline-grid;
  place-items: center;
  background-color: currentColor;
  color: var(--tcc-secondary);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.install-icon,
.card-icon {
  width: 34px;
  height: 34px;
}

.install-icon {
  color: var(--tcc-secondary);
  background: none;
  font-size: 1.55rem;
  font-weight: 900;
}

.app-view {
  display: block;
}

.app-header {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  margin: -4px 0 18px;
  padding-top: env(safe-area-inset-top);
}

.hello-block {
  min-width: 0;
}

.hello-block p {
  color: var(--tcc-primary);
  font-size: 1.35rem;
  font-weight: 850;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.hello-block h1 {
  margin-top: 3px;
  color: var(--tcc-muted);
  font-size: 0.96rem;
  font-weight: 650;
}

.avatar-button {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  color: #fff;
  background: linear-gradient(135deg, var(--tcc-primary), var(--tcc-secondary));
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  font-weight: 850;
  box-shadow: 0 10px 28px rgba(13, 78, 166, 0.18);
}

.avatar-button.has-photo,
.profile-photo-preview.has-photo,
.member-avatar.has-photo {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.screen {
  display: grid;
  gap: 16px;
}

.screen-title {
  padding: 20px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.14), transparent 42%),
    linear-gradient(135deg, var(--tcc-primary), var(--tcc-secondary));
  border-radius: 28px;
  box-shadow: var(--tcc-shadow);
}

.brand-panel {
  display: flex;
  gap: 14px;
  align-items: center;
}

.screen-logo {
  flex: 0 0 58px;
  width: 58px;
  height: 76px;
  padding: 5px;
  border-radius: 18px;
}

.screen-title h2 {
  font-size: 1.9rem;
  line-height: 1.05;
}

.push-card {
  background: linear-gradient(135deg, #fff, #F7FAFF);
  border: 1px solid rgba(31, 111, 209, 0.2);
  border-radius: 22px;
  box-shadow: 0 12px 34px rgba(13, 78, 166, 0.1);
}

.push-card strong {
  display: block;
  color: var(--tcc-primary);
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.status-card {
  min-width: 0;
  padding: 14px 12px;
  cursor: pointer;
}

.status-card .card-icon {
  width: 28px;
  height: 28px;
  margin-bottom: 10px;
}

.status-card strong {
  display: block;
  color: var(--tcc-primary);
  font-size: 1.65rem;
  line-height: 1;
}

.status-card span {
  display: block;
  margin-top: 4px;
  font-size: 0.88rem;
  font-weight: 800;
}

.status-card p {
  margin-top: 6px;
  line-height: 1.25;
}

.status-card-danger {
  border: 1px solid rgba(215, 38, 56, 0.35);
  background: #fff4f5;
}

.status-card-danger strong,
.status-card-danger span,
.status-card-danger p {
  color: #c61f32;
}

.dashboard-modules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.dashboard-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.dashboard-card:active {
  transform: scale(0.985);
}

.dashboard-card .feature-head {
  min-width: 0;
}

.dashboard-card .feature-head h3 {
  min-width: 0;
  overflow-wrap: anywhere;
}

.dashboard-hero-card,
.dashboard-priority-card,
.dashboard-actions-card,
.dashboard-alert-card {
  grid-column: 1 / -1;
}

.dashboard-hero-card {
  padding: 18px;
  color: #fff;
  background:
    radial-gradient(circle at 92% 8%, rgba(255,255,255,0.26), transparent 30%),
    linear-gradient(135deg, var(--tcc-primary), var(--tcc-secondary));
  border: 0;
  box-shadow: 0 18px 42px rgba(13, 78, 166, 0.24);
}

.dashboard-hero-card .feature-head h3,
.dashboard-hero-card .dashboard-main-copy strong,
.dashboard-hero-card .dashboard-main-copy span,
.dashboard-hero-card .dashboard-arrow {
  color: #fff;
}

.dashboard-hero-card .card-icon {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.dashboard-main-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.dashboard-main-copy strong {
  color: var(--tcc-text);
  font-size: 1.18rem;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.dashboard-main-copy span,
.dashboard-preview,
.dashboard-compact-copy {
  color: var(--tcc-muted);
  font-size: 0.92rem;
  line-height: 1.38;
}

.dashboard-preview {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin: 0;
}

.dashboard-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dashboard-arrow {
  color: var(--tcc-primary);
  font-size: 1.55rem;
  font-weight: 900;
  line-height: 1;
}

.dashboard-priority-card {
  gap: 14px;
  padding: 17px;
  border-color: rgba(13, 78, 166, 0.14);
}

.dashboard-alert-card {
  background: var(--tcc-danger-bg);
  border-color: rgba(215, 38, 56, 0.28);
}

.dashboard-alert-card .feature-head h3,
.dashboard-alert-card .dashboard-main-copy strong,
.dashboard-alert-card .dashboard-arrow {
  color: var(--tcc-danger);
}

.dashboard-compact-card {
  min-height: 126px;
  padding: 14px;
  gap: 10px;
}

.dashboard-compact-card .feature-head {
  gap: 8px;
}

.dashboard-compact-card .feature-head h3 {
  font-size: 0.98rem;
}

.dashboard-compact-card .card-icon {
  width: 30px;
  height: 30px;
}

.dashboard-compact-card .dashboard-arrow {
  position: absolute;
  right: 13px;
  bottom: 12px;
}

.dashboard-action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.dashboard-action-card {
  display: grid;
  gap: 7px;
  min-height: 78px;
  padding: 10px 8px;
  place-items: center;
  color: var(--tcc-primary);
  text-align: center;
  background: var(--tcc-soft);
  border: 1px solid rgba(31, 111, 209, 0.14);
  border-radius: 18px;
  box-shadow: none;
}

.dashboard-action-card .card-icon {
  width: 30px;
  height: 30px;
}

.dashboard-action-card strong {
  font-size: 0.78rem;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.feature-card,
.settings-card {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.feature-head,
.section-head {
  display: flex;
  gap: 10px;
  align-items: center;
}

.feature-head h3,
.quick-section h3,
.section-head h2 {
  color: var(--tcc-primary);
  font-size: 1.12rem;
}

.section-back-button {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.section-back-button .back-arrow {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(13, 78, 166, 0.12);
  color: var(--tcc-primary);
  font-size: 0.95rem;
  font-weight: 800;
}

.profile-visibility-form {
  display: grid;
  gap: 10px;
}

.profile-visibility-form label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--tcc-text);
}

.profile-visibility-form input[type="checkbox"] {
  width: 20px;
  min-height: 20px;
  accent-color: var(--tcc-primary);
}

.feature-head h3 {
  min-width: 0;
}

.empty-state {
  padding: 12px;
  background: var(--tcc-soft);
  border-radius: 16px;
}

.module-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.module-link {
  min-height: 42px;
  padding: 0 13px;
  color: var(--tcc-primary);
  background: rgba(31, 111, 209, 0.1);
  border-radius: 14px;
  font-size: 0.9rem;
  font-weight: 800;
}

.quick-section {
  display: grid;
  gap: 10px;
}

.quick-grid {
  display: grid;
  gap: 10px;
}

.quick-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 72px;
  padding: 14px;
  color: var(--tcc-text);
  text-align: left;
}

.quick-card strong,
.quick-card em {
  grid-column: 2;
}

.quick-card strong {
  align-self: end;
  font-size: 1rem;
}

.quick-card em {
  align-self: start;
}

.quick-card .card-icon {
  grid-row: 1 / span 2;
}

.chevron {
  grid-column: 3;
  grid-row: 1 / span 2;
  color: var(--tcc-secondary);
  font-size: 1.8rem;
  line-height: 1;
}

.quick-card:active,
.status-card:active,
.module-link:active,
.secondary-action:active {
  background: #EAF2FF;
}

.page-list {
  display: grid;
  gap: 11px;
}

.list-item {
  display: grid;
  gap: 5px;
  padding: 15px;
  background: var(--tcc-card);
  border: 1px solid var(--tcc-line);
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(13, 78, 166, 0.08);
}

.list-item strong {
  color: var(--tcc-text);
  font-size: 1rem;
}

.profile-grid,
.settings-user,
.info-list {
  display: grid;
  gap: 10px;
}

.profile-grid > div,
.settings-user > div,
.info-list > div,
.text-row {
  display: grid;
  gap: 3px;
  padding: 14px;
}

.profile-grid strong,
.settings-user strong,
.info-list strong {
  color: var(--tcc-primary);
  font-size: 0.88rem;
}

.logout-card {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  color: var(--tcc-accent);
  background: #fff;
  font-weight: 800;
}

.settings-head {
  align-items: flex-start;
  justify-content: space-between;
}

.settings-card {
  box-shadow: 0 14px 34px rgba(13, 78, 166, 0.1);
}

.status-badge {
  margin-left: auto;
  padding: 5px 9px;
  color: var(--tcc-primary);
  background: var(--tcc-soft);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 850;
}

.status-badge.active {
  color: #08633C;
  background: rgba(22, 163, 74, 0.12);
}

.status-badge.inactive {
  color: var(--tcc-accent);
  background: rgba(215, 38, 56, 0.1);
}

.dashboard-settings-list {
  display: grid;
  gap: 9px;
}

.mini-album-list {
  display: grid;
  gap: 10px;
}

.mini-album-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px;
  text-align: left;
  background: linear-gradient(135deg, rgba(13, 78, 166, 0.07), rgba(255, 255, 255, 0.95));
  border: 1px solid var(--tcc-line);
  border-radius: 18px;
}

.mini-album-card strong {
  display: block;
  color: var(--tcc-primary);
}

.mini-album-card em {
  display: block;
  color: var(--tcc-muted);
  font-style: normal;
  font-size: 0.88rem;
}

.mini-album-cover,
.admin-gallery-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(13, 78, 166, 0.16), rgba(31, 111, 209, 0.28));
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.gallery-album-grid {
  display: grid;
  gap: 14px;
}

.gallery-album-card {
  position: relative;
  display: grid;
  min-height: 280px;
  overflow: hidden;
  padding: 18px;
  text-align: left;
  border-radius: 28px;
  box-shadow: 0 22px 48px rgba(13, 78, 166, 0.18);
  background: linear-gradient(135deg, rgba(13, 78, 166, 0.18), rgba(22, 33, 46, 0.34));
}

.gallery-album-cover,
.gallery-hero-cover {
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.gallery-album-gradient {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 30, 66, 0.1), rgba(11, 30, 66, 0.82)),
    linear-gradient(135deg, rgba(13, 78, 166, 0.2), rgba(215, 38, 56, 0.12));
}

.gallery-album-content {
  position: relative;
  z-index: 1;
  display: grid;
  align-self: end;
  gap: 6px;
  color: #fff;
}

.gallery-album-content strong {
  font-size: 1.32rem;
}

.gallery-album-content span,
.gallery-album-content em,
.gallery-album-content p {
  color: rgba(255, 255, 255, 0.84);
  font-style: normal;
}

.gallery-detail-panel {
  gap: 16px;
}

.back-chip,
.chip-button {
  min-height: 38px;
  padding: 0 14px;
  color: var(--tcc-primary);
  background: rgba(13, 78, 166, 0.1);
  border-radius: 999px;
  font-weight: 800;
}

.chip-button.danger {
  color: var(--tcc-accent);
  background: rgba(215, 38, 56, 0.1);
}

.gallery-hero {
  position: relative;
  overflow: hidden;
  min-height: 260px;
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(13, 78, 166, 0.15), rgba(31, 111, 209, 0.22));
}

.gallery-hero-copy {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: end;
  min-height: 260px;
  padding: 22px;
  color: #fff;
  background: linear-gradient(180deg, rgba(11, 30, 66, 0.06), rgba(11, 30, 66, 0.84));
}

.gallery-hero-copy strong {
  font-size: 1.5rem;
}

.gallery-hero-copy p {
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.85);
}

.gallery-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  gap: 10px;
}

.gallery-meta > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  background: rgba(13, 78, 166, 0.06);
  border-radius: 16px;
  overflow: hidden;
}

.gallery-meta strong {
  color: var(--tcc-primary);
  font-size: 0.82rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.gallery-meta span {
  color: var(--tcc-text);
  font-size: 0.94rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

.gallery-image-grid,
.admin-gallery-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.gallery-image-tile,
.admin-gallery-image-card {
  display: grid;
  gap: 8px;
  overflow: hidden;
  padding: 0;
  background: #fff;
  border: 1px solid var(--tcc-line);
  border-radius: 20px;
  box-shadow: 0 14px 28px rgba(13, 78, 166, 0.08);
}

.gallery-image-tile img,
.admin-gallery-image-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.gallery-image-caption {
  padding: 0 12px 12px;
  color: var(--tcc-text);
  font-size: 0.88rem;
  text-align: left;
}

.admin-gallery-albums {
  display: grid;
  gap: 10px;
}

.admin-gallery-album-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: rgba(13, 78, 166, 0.05);
  border-radius: 18px;
}

.admin-gallery-album-card.is-active {
  border: 1px solid rgba(13, 78, 166, 0.22);
}

.admin-gallery-select {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 0;
  text-align: left;
  background: transparent;
}

.admin-gallery-select strong {
  display: block;
  color: var(--tcc-primary);
}

.admin-gallery-select span span {
  color: var(--tcc-muted);
  font-size: 0.88rem;
}

.admin-form-actions,
.admin-chip-row,
.admin-gallery-image-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.profile-photo-card {
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: center;
}

.profile-photo-preview {
  display: grid;
  width: 82px;
  height: 82px;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--tcc-primary), var(--tcc-secondary));
  border: 3px solid #fff;
  border-radius: 26px;
  box-shadow: 0 14px 28px rgba(13, 78, 166, 0.16);
  font-size: 1.2rem;
  font-weight: 900;
  overflow: hidden;
}

.member-card-qr-preview {
  width: 160px;
  height: 160px;
  border-radius: var(--tcc-radius-md);
}

.profile-photo-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.profile-photo-copy h3 {
  color: var(--tcc-primary);
  font-size: 1.1rem;
}

.profile-photo-copy p,
.member-main span,
.member-search {
  color: var(--tcc-muted);
  font-size: 0.9rem;
}

.profile-photo-form {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.file-pill {
  display: grid;
  min-height: 46px;
  place-items: center;
  padding: 0 14px;
  color: var(--tcc-primary);
  background: rgba(31, 111, 209, 0.1);
  border: 1px solid rgba(13, 78, 166, 0.16);
  border-radius: 16px;
  font-weight: 850;
}

.profile-photo-card .form-message {
  grid-column: 1 / -1;
}

.members-list {
  display: grid;
  gap: 10px;
}

.event-response-grid {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.event-response-grid label {
  display: grid;
  gap: 4px;
  font-size: 0.82rem;
  color: var(--tcc-muted);
}

.member-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--tcc-line);
  border-radius: 20px;
  box-shadow: 0 12px 26px rgba(13, 78, 166, 0.09);
}

.member-avatar {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--tcc-primary), var(--tcc-secondary));
  border-radius: 18px;
  font-weight: 900;
  overflow: hidden;
}

button.member-avatar {
  min-height: 58px;
  padding: 0;
  border: 0;
  cursor: zoom-in;
}

button.member-avatar:focus-visible {
  outline: 3px solid rgba(13, 78, 166, 0.28);
  outline-offset: 3px;
}

.member-avatar.has-photo {
  box-shadow: 0 12px 26px rgba(13, 78, 166, 0.18);
}

.member-main {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.member-main strong {
  color: var(--tcc-primary);
  font-size: 1.02rem;
}

.member-main strong,
.member-main span {
  overflow-wrap: anywhere;
}

.profile-form {
  margin-top: 14px;
}

.field-error {
  display: block;
  min-height: 16px;
  margin-top: 6px;
  color: #d72638;
  font-size: 0.78rem;
}

.admin-form input.has-error,
.admin-form textarea.has-error,
.admin-form select.has-error {
  border-color: rgba(215, 38, 56, 0.55);
  box-shadow: 0 0 0 3px rgba(215, 38, 56, 0.12);
}

.upload-meta {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  background: rgba(13, 78, 166, 0.06);
  border-radius: 16px;
  color: var(--tcc-text);
}

.upload-meta span {
  color: var(--tcc-muted);
  font-size: 0.84rem;
}

.document-thumb {
  display: grid;
  place-items: center;
  color: var(--tcc-primary);
  font-size: 1rem;
  font-weight: 800;
}

.inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.inline-actions a {
  text-decoration: none;
}

.admin-gallery-image-actions {
  padding: 0 12px 12px;
}

.admin-gallery-image-card.is-cover {
  outline: 2px solid rgba(13, 78, 166, 0.26);
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 16, 34, 0.92);
  backdrop-filter: blur(10px);
}

.lightbox-dialog {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: min(100%, 760px);
  padding: 18px;
}

.member-photo-dialog {
  grid-template-columns: minmax(0, 1fr);
  width: min(92vw, 520px);
}

.member-photo-dialog .lightbox-close {
  justify-self: end;
}

.lightbox-figure {
  display: grid;
  gap: 12px;
  margin: 0;
}

.lightbox-figure img {
  width: 100%;
  max-height: 72vh;
  object-fit: contain;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.05);
}

.member-photo-figure img {
  max-height: 78vh;
  border-radius: 28px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}

.lightbox-figure figcaption {
  display: grid;
  gap: 4px;
  color: #fff;
  text-align: center;
}

.lightbox-close,
.lightbox-arrow {
  width: 44px;
  min-height: 44px;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  font-size: 1.6rem;
}

.group-modal {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  box-sizing: border-box;
}

.group-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 16, 34, 0.56);
  backdrop-filter: blur(8px);
}

.group-modal-card {
  position: relative;
  z-index: 1;
  width: min(430px, 100%);
  max-height: calc(100vh - 80px);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15, 31, 54, 0.28);
  padding: 24px;
  overflow: auto;
}

.group-modal-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.group-modal-kicker {
  margin: 0 0 2px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .72rem;
  color: var(--tcc-muted);
  font-weight: 800;
}

.group-modal-head h3 {
  margin: 0;
}

.group-modal-member {
  margin: 4px 0 0;
  color: var(--tcc-muted);
  font-size: .9rem;
}

.group-modal-close {
  width: 40px;
  min-height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: #fff;
  color: var(--tcc-blue-dark);
  font-size: 1.5rem;
  line-height: 1;
}

.group-modal-search-wrap {
  margin-top: 12px;
}

.group-modal-search-wrap input {
  width: 100%;
}

.member-groups-modal-options {
  margin-top: 12px;
  display: grid;
  gap: 10px;
  max-height: min(44vh, 380px);
  overflow: auto;
  padding-right: 2px;
}

.group-option {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 14px;
  padding: 10px 12px;
  background: #fff;
}

.group-option input {
  width: 18px;
  height: 18px;
  accent-color: var(--tcc-blue);
}

.group-option span {
  font-weight: 700;
  font-size: .95rem;
  overflow-wrap: anywhere;
}

.group-modal-message {
  margin: 12px 2px 0;
  min-height: 1.2em;
  font-size: .88rem;
  color: var(--tcc-muted);
}

.group-modal-message.error {
  color: #b42318;
}

.group-modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.admin-grid {
  display: grid;
  gap: 10px;
}

.admin-list {
  display: grid;
  gap: 10px;
}

.admin-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
  text-align: left;
  background: var(--tcc-card);
  border: 1px solid var(--tcc-line);
  border-radius: var(--tcc-radius);
  box-shadow: var(--tcc-shadow);
}

.admin-card strong {
  display: block;
  color: var(--tcc-primary);
}

.admin-card span {
  display: block;
  color: var(--tcc-muted);
  font-size: 0.9rem;
}

.admin-card .status-badge {
  grid-column: 2;
  justify-self: start;
  margin-left: 0;
}

.admin-form {
  display: grid;
  gap: 12px;
}

.admin-output {
  max-height: 320px;
  margin: 0;
  padding: 12px;
  overflow: auto;
  color: var(--tcc-text);
  background: #F8FAFC;
  border: 1px solid var(--tcc-line);
  border-radius: 14px;
  font-size: 0.78rem;
  white-space: pre-wrap;
}

.dashboard-setting-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 9px;
  align-items: center;
  padding: 10px;
  box-shadow: 0 8px 18px rgba(13, 78, 166, 0.07);
}

.dashboard-setting-row label {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--tcc-text);
  font-size: 0.95rem;
}

.dashboard-setting-row input {
  width: 20px;
  min-height: 20px;
  accent-color: var(--tcc-primary);
}

.dashboard-setting-topcards {
  grid-template-columns: 28px minmax(110px, 1fr) 1fr 1fr 1fr;
}

.dashboard-setting-topcards select {
  width: 100%;
  min-height: 38px;
  border-radius: 10px;
  border: 1px solid #c7d3e3;
  background: #fff;
  color: var(--tcc-text);
  font-weight: 600;
  padding: 0 8px;
}

.move-button {
  width: 38px;
  min-height: 38px;
  color: var(--tcc-primary);
  background: var(--tcc-soft);
  border-radius: 12px;
  font-weight: 900;
}

.text-row {
  width: 100%;
  min-height: 48px;
  color: var(--tcc-primary);
  text-align: left;
  font-weight: 800;
}

.install-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 20px;
}

.install-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 16, 34, 0.62);
  backdrop-filter: blur(12px);
}

.install-modal-card {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 16px;
  width: min(90vw, 420px);
  max-height: 80vh;
  overflow-y: auto;
  padding: 18px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(13, 78, 166, 0.16);
  border-radius: 22px;
  box-shadow: 0 30px 70px rgba(7, 16, 34, 0.22);
}

.install-modal-logo {
  display: block;
  width: 52px;
  height: 68px;
  padding: 4px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(13, 78, 166, 0.14);
  border-radius: 20px;
}

.install-modal-copy {
  display: grid;
  gap: 8px;
}

.install-modal-eyebrow {
  color: var(--tcc-primary);
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.install-modal-copy h2 {
  color: var(--tcc-text);
  font-size: 1.35rem;
  line-height: 1.1;
}

.install-modal-copy p,
.install-modal-hint,
.install-modal-steps li {
  color: var(--tcc-muted);
  font-size: 0.95rem;
}

.install-modal-steps {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 20px;
}

.install-modal-actions {
  display: grid;
  gap: 8px;
}

.install-modal-actions .primary-button,
.install-modal-actions .secondary-action {
  width: 100%;
}

.install-modal-guide {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(13, 78, 166, 0.16);
  background: rgba(13, 78, 166, 0.04);
}

.install-modal-guide h4 {
  margin: 0;
  font-size: 0.95rem;
  color: var(--tcc-text);
}

.install-modal-links {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.install-modal-link {
  min-height: 32px;
  color: var(--tcc-muted);
  background: transparent;
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.bottom-nav {
  position: fixed;
  right: max(12px, calc((100vw - 520px) / 2 + 12px));
  bottom: 0;
  left: max(12px, calc((100vw - 520px) / 2 + 12px));
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(13, 78, 166, 0.13);
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -14px 34px rgba(13, 78, 166, 0.12);
  backdrop-filter: blur(16px);
}

.bottom-tab {
  display: grid;
  min-width: 0;
  min-height: 56px;
  place-items: center;
  color: var(--tcc-muted);
  background: transparent;
  border-radius: 18px;
  font-size: 0.64rem;
  font-weight: 800;
  line-height: 1.05;
  text-align: center;
}

.bottom-tab.active {
  color: var(--tcc-primary);
  background: rgba(31, 111, 209, 0.12);
}

.nav-icon {
  width: 22px;
  height: 22px;
}

.home-icon { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 10.5 12 3l9 7.5V21h-6v-6H9v6H3z'/%3E%3C/svg%3E"); }
.news-icon { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 4h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Zm2 4v2h10V8H7Zm0 4v2h10v-2H7Zm0 4v2h7v-2H7Z'/%3E%3C/svg%3E"); }
.calendar-icon { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 2h2v3h6V2h2v3h2a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h2V2Zm12 8H5v10h14V10Z'/%3E%3C/svg%3E"); }
.groups-icon { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm8-1a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7ZM2 21a6 6 0 0 1 12 0H2Zm11.5 0a7.5 7.5 0 0 0-2-5.1A5 5 0 0 1 22 21h-8.5Z'/%3E%3C/svg%3E"); }
.payments-icon { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 4a7 7 0 0 0-6.32 4H4v2h2.08a7.6 7.6 0 0 0 0 2H4v2h2.68A7 7 0 0 0 20 16l-1.8-1.2A5 5 0 0 1 9 14h6v-2H8.1a5 5 0 0 1 0-2H15V8H9a5 5 0 0 1 9.2-.8L20 6a7 7 0 0 0-7-2Z'/%3E%3C/svg%3E"); }
.profile-icon { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-5 0-9 2.5-9 5.5V22h18v-2.5C21 16.5 17 14 12 14Z'/%3E%3C/svg%3E"); }
.document-icon { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 2h8l5 5v15H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Zm7 1.5V8h4.5L13 3.5ZM8 12v2h8v-2H8Zm0 4v2h8v-2H8Z'/%3E%3C/svg%3E"); }
.gallery-icon { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5Zm3 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm11 10-4.5-6-3.5 4.5-2-2.5L6 17h12Z'/%3E%3C/svg%3E"); }
.bell-icon { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22a2.8 2.8 0 0 0 2.7-2H9.3A2.8 2.8 0 0 0 12 22Zm8-5-2-2V9a6 6 0 1 0-12 0v6l-2 2v1h16v-1Z'/%3E%3C/svg%3E"); }
.settings-icon { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m19.43 12.98.04-.98-.04-.98 2.11-1.65-2-3.46-2.49 1a7.7 7.7 0 0 0-1.7-.98L15 3h-4l-.35 2.93c-.6.24-1.17.57-1.7.98l-2.49-1-2 3.46 2.11 1.65-.04.98.04.98-2.11 1.65 2 3.46 2.49-1c.53.41 1.1.74 1.7.98L11 21h4l.35-2.93c.6-.24 1.17-.57 1.7-.98l2.49 1 2-3.46-2.11-1.65ZM13 15.5a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7Z'/%3E%3C/svg%3E"); }
.admin-icon { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2 4 5.5V11c0 5 3.4 9.6 8 11 4.6-1.4 8-6 8-11V5.5L12 2Zm-1 14.5-3.5-3.5 1.4-1.4 2.1 2.1 4.6-4.6 1.4 1.4-6 6Z'/%3E%3C/svg%3E"); }
.logout-icon { width: 20px; height: 20px; mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3H4v18h6v-2H6V5h4V3Zm5.6 4.4L14.2 8.8 16.4 11H9v2h7.4l-2.2 2.2 1.4 1.4L20.2 12l-4.6-4.6Z'/%3E%3C/svg%3E"); }

/* Design system consolidation: all app areas share these primitives. */
.screen,
.dashboard-modules,
.page-list,
.members-list,
.admin-grid,
.admin-list,
.gallery-album-grid,
.admin-gallery-albums,
.info-list,
.dashboard-settings-list {
  gap: var(--tcc-space-3);
}

.feature-card,
.settings-card,
.list-item,
.member-card,
.admin-card,
.admin-panel,
.admin-gallery-album-card,
.gallery-image-tile,
.admin-gallery-image-card,
.dashboard-setting-row,
.profile-grid > div,
.settings-user > div,
.info-list > div,
.text-row,
.install-card,
.push-card,
.status-card,
.quick-card,
.logout-card {
  min-width: 0;
  background: var(--tcc-surface);
  border: 1px solid var(--tcc-line);
  border-radius: var(--tcc-radius-lg);
  box-shadow: var(--tcc-shadow-card);
}

.feature-card,
.settings-card,
.list-item,
.member-card,
.admin-card,
.admin-panel,
.admin-gallery-album-card,
.dashboard-setting-row,
.profile-grid > div,
.settings-user > div,
.info-list > div,
.text-row {
  padding: var(--tcc-space-4);
}

.section-head {
  min-width: 0;
  margin-top: 2px;
}

.section-head h2 {
  color: var(--tcc-primary);
  font-size: 1.32rem;
  line-height: 1.14;
  overflow-wrap: anywhere;
}

.section-head p,
.settings-copy,
.list-sub,
.quick-card em,
.admin-card span,
.member-main span,
.gallery-album-content span,
.gallery-album-content em,
.gallery-album-content p,
.install-modal-copy p,
.install-modal-hint,
.install-modal-steps li {
  color: var(--tcc-muted);
  font-size: 0.92rem;
  line-height: 1.38;
}

.feature-head {
  min-width: 0;
  align-items: flex-start;
}

.feature-head h3,
.quick-section h3,
.profile-photo-copy h3 {
  color: var(--tcc-primary);
  font-size: 1.08rem;
  line-height: 1.22;
  overflow-wrap: anywhere;
}

.list-item,
.mailbox-card,
.event-item {
  overflow: hidden;
}

.list-item strong,
.member-main strong,
.admin-gallery-select strong,
.mini-album-card strong {
  min-width: 0;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.list-sub {
  min-width: 0;
  overflow-wrap: anywhere;
}

.empty-card,
.empty-state {
  color: var(--tcc-muted);
  background: var(--tcc-info-bg);
  border: 1px dashed rgba(13, 78, 166, 0.18);
  box-shadow: none;
}

.primary-button,
.secondary-action,
.small-action,
.link-button,
.chip-button,
.back-chip,
.module-link,
.move-button,
.text-row,
.quick-card,
.admin-card,
.bottom-tab,
.logout-card {
  min-height: 46px;
  border-radius: var(--tcc-radius-md);
  font-size: 0.94rem;
  font-weight: 820;
  transition: transform 140ms ease, background-color 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.primary-button,
.small-action {
  color: #fff;
  background: linear-gradient(135deg, var(--tcc-primary), var(--tcc-secondary));
  box-shadow: 0 12px 28px rgba(13, 78, 166, 0.22);
}

.secondary-action,
.chip-button,
.back-chip,
.module-link,
.move-button {
  color: var(--tcc-primary);
  background: var(--tcc-info-bg);
  border: 1px solid rgba(13, 78, 166, 0.16);
  box-shadow: none;
}

.link-button,
.install-modal-dismiss {
  color: var(--tcc-primary);
  background: transparent;
  box-shadow: none;
}

.primary-button:focus-visible,
.secondary-action:focus-visible,
.small-action:focus-visible,
.link-button:focus-visible,
.chip-button:focus-visible,
.back-chip:focus-visible,
.module-link:focus-visible,
.quick-card:focus-visible,
.status-card:focus-visible,
.admin-card:focus-visible,
.bottom-tab:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(31, 111, 209, 0.22);
  outline-offset: 3px;
}

.danger,
.chip-button.danger {
  color: var(--tcc-danger);
  background: var(--tcc-danger-bg);
}

.status-badge,
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 10px;
  color: var(--tcc-info);
  background: var(--tcc-info-bg);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.status-badge.active,
.status-badge.success,
.badge-success {
  color: var(--tcc-success);
  background: var(--tcc-success-bg);
}

.status-badge.inactive,
.status-badge.danger,
.badge-danger,
.form-message.is-error,
.push-message.error {
  color: var(--tcc-danger);
  background: var(--tcc-danger-bg);
}

.status-badge.warning,
.badge-warning {
  color: var(--tcc-warning);
  background: var(--tcc-warning-bg);
}

label {
  min-width: 0;
}

input,
textarea,
select {
  color: var(--tcc-text);
  background: var(--tcc-surface-strong);
  border: 1px solid rgba(13, 78, 166, 0.16);
  border-radius: var(--tcc-radius-md);
}

.admin-form,
.login-form,
.profile-form,
.profile-visibility-form,
.event-response-grid {
  gap: var(--tcc-space-3);
}

.quick-grid {
  grid-template-columns: 1fr;
}

.quick-card {
  width: 100%;
  border-radius: var(--tcc-radius-lg);
}

.quick-card .card-icon,
.status-card .card-icon,
.feature-head .card-icon,
.admin-card .card-icon {
  color: var(--tcc-secondary);
}

.mailbox-card {
  border-left: 4px solid transparent;
}

.mailbox-card.is-unread {
  border-left-color: var(--tcc-secondary);
  background: linear-gradient(135deg, #fff, #F3F8FF);
}

.mailbox-card-head,
.event-card-head {
  display: flex;
  gap: var(--tcc-space-2);
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
}

.mailbox-card-head strong,
.event-card-head strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.event-response-grid {
  padding-top: var(--tcc-space-2);
  border-top: 1px solid var(--tcc-line);
}

.gallery-album-card {
  border-radius: var(--tcc-radius-xl);
}

.gallery-meta {
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
}

.gallery-meta > div {
  background: var(--tcc-info-bg);
  border: 1px solid rgba(13, 78, 166, 0.12);
  border-radius: var(--tcc-radius-md);
}

.gallery-image-tile img,
.admin-gallery-image-card img,
.mini-album-cover,
.admin-gallery-thumb {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.bottom-nav {
  max-width: 496px;
  margin-inline: auto;
}

/* Startseite: kompakter Dashboard-Rhythmus statt langer Kartenliste. */
.dashboard-modules {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.dashboard-card {
  cursor: pointer;
}

.dashboard-hero-card,
.dashboard-priority-card,
.dashboard-actions-card,
.dashboard-alert-card {
  grid-column: 1 / -1;
}

.dashboard-hero-card {
  color: #fff;
  background:
    radial-gradient(circle at 92% 8%, rgba(255,255,255,0.26), transparent 30%),
    linear-gradient(135deg, var(--tcc-primary), var(--tcc-secondary));
  border: 0;
  box-shadow: 0 18px 42px rgba(13, 78, 166, 0.24);
}

.dashboard-hero-card .feature-head h3,
.dashboard-hero-card .dashboard-main-copy strong,
.dashboard-hero-card .dashboard-main-copy span,
.dashboard-hero-card .dashboard-arrow {
  color: #fff;
}

.dashboard-hero-card .feature-head .card-icon {
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
}

.dashboard-priority-card {
  padding: 17px;
}

.dashboard-compact-card {
  min-height: 126px;
  padding: 14px;
}

.dashboard-alert-card {
  color: var(--tcc-danger);
  background: var(--tcc-danger-bg);
  border-color: rgba(215, 38, 56, 0.28);
}

.dashboard-alert-card .feature-head h3,
.dashboard-alert-card .dashboard-main-copy strong,
.dashboard-alert-card .dashboard-arrow {
  color: var(--tcc-danger);
}

.dashboard-action-card {
  min-height: 78px;
  color: var(--tcc-primary);
  background: var(--tcc-info-bg);
  border: 1px solid rgba(13, 78, 166, 0.14);
  border-radius: 18px;
  box-shadow: none;
}

/* Premium UX pass: less framing, stronger hierarchy, calmer surfaces. */
:root {
  --tcc-shadow-card: 0 10px 28px rgba(13, 78, 166, 0.08);
  --tcc-shadow-soft: 0 6px 18px rgba(13, 78, 166, 0.06);
}

.screen {
  gap: 16px;
}

.screen-title h2 {
  font-size: 2.02rem;
  font-weight: 860;
  line-height: 1.02;
}

.screen-title p {
  font-size: 0.98rem;
  font-weight: 640;
}

.feature-card,
.status-card,
.quick-card,
.list-item,
.settings-card,
.admin-panel,
.member-card,
.push-card {
  border: 0;
  box-shadow: var(--tcc-shadow-card);
}

.feature-card,
.settings-card {
  padding: 18px;
  gap: 11px;
}

.feature-head h3 {
  font-size: 1.16rem;
  font-weight: 830;
  line-height: 1.15;
}

.section-head h2 {
  font-size: 1.44rem;
  font-weight: 860;
  line-height: 1.08;
}

.section-head p,
.settings-copy,
.list-sub,
.dashboard-main-copy span,
.dashboard-preview,
.dashboard-compact-copy {
  font-size: 0.94rem;
  line-height: 1.35;
}

.status-grid {
  gap: 12px;
}

.status-card {
  min-height: 156px;
  padding: 16px 14px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
}

.status-card .card-icon {
  width: 30px;
  height: 30px;
}

.status-card strong {
  font-size: 1.78rem;
}

.status-card span {
  font-size: 0.92rem;
}

.status-card p {
  font-size: 0.9rem;
}

.status-card[data-view="news"] {
  background: linear-gradient(180deg, #f7fbff, #eef6ff);
}

.status-card[data-view="groups"] {
  background: linear-gradient(180deg, #f8fcff, #f0f8ff);
}

.status-card[data-view="events"] {
  background: linear-gradient(180deg, #f8fbff, #edf4ff);
}

.status-card[data-view="payments"] {
  background: linear-gradient(180deg, #fff8f8, #fff1f2);
}

.dashboard-modules {
  gap: 14px;
}

.dashboard-card {
  border-radius: 20px;
  box-shadow: var(--tcc-shadow-card);
}

.dashboard-main-copy strong {
  font-size: 1.28rem;
  line-height: 1.12;
  font-weight: 860;
}

.dashboard-main-copy span {
  opacity: 0.92;
}

.dashboard-preview {
  -webkit-line-clamp: 1;
  margin-top: -2px;
}

.dashboard-hero-card {
  min-height: 188px;
  padding: 20px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 88% 6%, rgba(255,255,255,0.3), transparent 34%),
    linear-gradient(140deg, #0d4ea6 0%, #1563c9 58%, #0e57b9 100%);
  box-shadow: 0 20px 42px rgba(13, 78, 166, 0.3);
}

.dashboard-hero-card .feature-head {
  margin-bottom: 2px;
}

.dashboard-hero-card .feature-head .card-icon {
  width: 38px;
  height: 38px;
  border-radius: 13px;
}

.dashboard-hero-card .status-badge {
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.26);
}

.dashboard-priority-card {
  min-height: 156px;
  padding: 18px;
  background: linear-gradient(180deg, #ffffff, #f6faff);
}

.dashboard-priority-card[data-view="news"] {
  background: linear-gradient(180deg, #f8fbff, #eff7ff);
}

.dashboard-priority-card[data-view="events"] {
  background: linear-gradient(180deg, #f9fbff, #f1f6ff);
}

.dashboard-alert-card {
  min-height: 136px;
  box-shadow: 0 10px 26px rgba(215, 38, 56, 0.12);
}

.dashboard-compact-card {
  min-height: 126px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
}

.dashboard-compact-card[data-view="gallery"] {
  background: linear-gradient(180deg, #f8fbff, #f0f7ff);
}

.dashboard-compact-card[data-view="documents"] {
  background: linear-gradient(180deg, #f8fcff, #f1f8ff);
}

.dashboard-action-grid {
  gap: 10px;
}

.dashboard-action-card {
  min-height: 86px;
  padding: 11px 9px;
  border-radius: 16px;
  border: 0;
  background: linear-gradient(180deg, #f9fcff, #eff5ff);
  box-shadow: var(--tcc-shadow-soft);
}

.dashboard-action-card .card-icon {
  width: 31px;
  height: 31px;
}

.dashboard-action-card strong {
  font-size: 0.8rem;
  font-weight: 820;
}

.push-card {
  border: 0;
  padding: 16px 16px 14px;
  background: linear-gradient(180deg, #ffffff, #f4f9ff);
  box-shadow: 0 14px 30px rgba(13, 78, 166, 0.11);
}

.push-card p {
  font-size: 0.93rem;
}

.push-message {
  margin-top: 2px;
}

.bottom-nav {
  right: max(10px, calc((100vw - 520px) / 2 + 10px));
  left: max(10px, calc((100vw - 520px) / 2 + 10px));
  padding: 7px 7px calc(10px + env(safe-area-inset-bottom));
  border: 0;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 -18px 36px rgba(13, 78, 166, 0.16);
}

.bottom-tab {
  min-height: 58px;
  gap: 3px;
  border-radius: 15px;
  font-size: 0.65rem;
  font-weight: 800;
}

.bottom-tab .nav-icon {
  width: 21px;
  height: 21px;
}

.bottom-tab.active {
  color: var(--tcc-primary);
  background: linear-gradient(180deg, #e8f1ff, #dceaff);
  box-shadow: inset 0 0 0 1px rgba(31, 111, 209, 0.2);
}

@media (max-width: 410px) {
  .dashboard-hero-card {
    min-height: 176px;
    padding: 18px;
  }

  .dashboard-main-copy strong {
    font-size: 1.2rem;
  }

  .dashboard-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 700px) {
  .app-shell {
    padding-right: 22px;
    padding-left: 22px;
  }
}

@media (max-width: 410px) {
  .status-grid {
    grid-template-columns: 1fr;
  }

  .install-card,
  .push-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .install-card .small-action,
  .push-card .small-action {
    grid-column: 1 / -1;
    width: 100%;
  }

  .dashboard-setting-row {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
  }

  .profile-photo-card,
  .profile-photo-form {
    grid-template-columns: 1fr;
  }

  .profile-photo-preview {
    justify-self: center;
  }

  .gallery-meta,
  .gallery-image-grid,
  .admin-gallery-images {
    grid-template-columns: 1fr;
  }

  .lightbox-dialog {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .lightbox-arrow {
    display: none;
  }

  .install-modal {
    padding: 14px;
  }

  .install-modal-card {
    padding: 20px 18px;
    border-radius: 24px;
  }
}

/* --- Final Premium Brand Pass (TCC) --- */
:root {
  --tcc-brand-glow: rgba(13, 78, 166, 0.18);
  --tcc-brand-glow-soft: rgba(31, 111, 209, 0.12);
  --tcc-hero-shadow: 0 24px 52px rgba(13, 78, 166, 0.28);
  --tcc-card-shadow-premium: 0 14px 34px rgba(13, 78, 166, 0.09);
  --tcc-card-shadow-soft: 0 8px 22px rgba(13, 78, 166, 0.06);
}

body {
  background:
    radial-gradient(70% 44% at 12% -8%, var(--tcc-brand-glow), transparent 66%),
    radial-gradient(48% 28% at 94% 3%, var(--tcc-brand-glow-soft), transparent 70%),
    linear-gradient(180deg, #f5f9ff 0%, #f4f8fc 42%, #f7faff 100%);
}

body::before {
  background:
    radial-gradient(circle at 84% 8%, rgba(13, 78, 166, 0.1), transparent 26%),
    linear-gradient(120deg, rgba(13, 78, 166, 0.028) 0 1px, transparent 1px 20px),
    linear-gradient(28deg, rgba(31, 111, 209, 0.03) 0 1px, transparent 1px 24px);
  opacity: 0.72;
}

.app-shell {
  padding-top: calc(16px + env(safe-area-inset-top));
}

.app-header {
  margin-bottom: 16px;
  padding: 14px 14px 10px;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.56));
  border: 1px solid rgba(13, 78, 166, 0.09);
  border-radius: 22px;
  box-shadow: var(--tcc-card-shadow-soft);
  backdrop-filter: blur(10px);
}

.hello-block p {
  font-size: 1.58rem;
  font-weight: 880;
  line-height: 1.02;
  letter-spacing: 0;
}

.hello-block h1 {
  margin-top: 6px;
  color: #4f627d;
  font-size: 0.95rem;
  font-weight: 700;
}

.avatar-button {
  width: 50px;
  height: 50px;
  box-shadow: 0 12px 26px rgba(13, 78, 166, 0.24);
}

.screen-title,
.login-hero {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  box-shadow: var(--tcc-hero-shadow);
  background:
    radial-gradient(circle at 86% 7%, rgba(255, 255, 255, 0.28), transparent 36%),
    linear-gradient(145deg, #0c4798 0%, #125fc4 52%, #0f57b8 100%);
}

.screen-title::after,
.login-hero::after {
  position: absolute;
  inset: auto -20% -54% auto;
  width: 240px;
  height: 240px;
  content: "";
  background: radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 66%);
  pointer-events: none;
}

.screen-title h2 {
  font-size: 2.1rem;
  font-weight: 900;
}

.screen-title p,
.login-hero p {
  font-size: 0.95rem;
  font-weight: 680;
}

.brand-logo,
.screen-logo {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.76);
  box-shadow: 0 14px 30px rgba(10, 24, 46, 0.2);
}

.feature-card,
.settings-card,
.status-card,
.quick-card,
.list-item,
.member-card,
.admin-card,
.admin-panel,
.push-card,
.install-card {
  border: 0;
  box-shadow: var(--tcc-card-shadow-premium);
}

.feature-card,
.settings-card,
.list-item {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 253, 255, 0.98));
}

.section-head h2,
.feature-head h3 {
  letter-spacing: 0;
}

.section-head h2 {
  font-size: 1.5rem;
  font-weight: 880;
}

.feature-head h3 {
  font-size: 1.14rem;
  font-weight: 840;
}

.section-head p,
.settings-copy,
.dashboard-main-copy span,
.dashboard-preview,
.dashboard-compact-copy,
.list-sub {
  color: #556984;
}

.status-grid {
  gap: 11px;
}

.status-card {
  min-height: 148px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 249, 255, 0.98));
}

.status-card strong {
  font-size: 1.86rem;
  font-weight: 900;
}

.dashboard-card {
  border-radius: 22px;
  box-shadow: var(--tcc-card-shadow-premium);
}

.dashboard-hero-card {
  min-height: 194px;
  border-radius: 24px;
  box-shadow: var(--tcc-hero-shadow);
  background:
    radial-gradient(circle at 90% 8%, rgba(255, 255, 255, 0.3), transparent 34%),
    linear-gradient(145deg, #0d4ea6 0%, #1668ce 57%, #0f57b8 100%);
}

.dashboard-main-copy strong {
  font-size: 1.34rem;
  font-weight: 890;
}

.dashboard-priority-card {
  min-height: 154px;
}

.dashboard-compact-card {
  min-height: 122px;
}

.dashboard-actions-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 255, 0.98));
}

.dashboard-action-grid {
  gap: 10px;
}

.dashboard-action-card {
  min-height: 88px;
  border: 1px solid rgba(13, 78, 166, 0.08);
  border-radius: 17px;
  background: linear-gradient(180deg, #ffffff, #f2f7ff);
  box-shadow: var(--tcc-card-shadow-soft);
}

.dashboard-action-card .card-icon {
  width: 30px;
  height: 30px;
}

.dashboard-action-card strong {
  font-size: 0.79rem;
  font-weight: 840;
}

.dashboard-action-card:active,
.quick-card:active,
.status-card:active,
.dashboard-card:active {
  transform: translateY(1px) scale(0.988);
}

.quick-grid {
  gap: 9px;
}

.quick-card {
  border-radius: 18px;
  min-height: 68px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 255, 0.98));
}

.quick-card strong {
  font-size: 0.98rem;
  font-weight: 820;
}

.quick-card em {
  font-size: 0.86rem;
  color: #60728b;
}

.quick-card .card-icon {
  width: 30px;
  height: 30px;
}

.push-card {
  border-radius: 22px;
  background:
    radial-gradient(circle at 92% 8%, rgba(31, 111, 209, 0.1), transparent 35%),
    linear-gradient(180deg, #ffffff, #f3f8ff);
  box-shadow: 0 14px 30px rgba(13, 78, 166, 0.12);
}

.push-card strong {
  font-size: 1.2rem;
  font-weight: 860;
}

.list-item {
  border-radius: 18px;
}

.bottom-nav {
  right: max(9px, calc((100vw - 520px) / 2 + 9px));
  left: max(9px, calc((100vw - 520px) / 2 + 9px));
  padding: 7px 8px calc(11px + env(safe-area-inset-bottom));
  border-radius: 24px 24px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(245, 250, 255, 0.94));
  box-shadow: 0 -18px 42px rgba(13, 78, 166, 0.16);
  backdrop-filter: blur(18px);
}

.bottom-tab {
  min-height: 58px;
  border-radius: 16px;
  color: #66768d;
}

.bottom-tab .nav-icon {
  width: 22px;
  height: 22px;
}

.bottom-tab.active {
  color: var(--tcc-primary);
  background: linear-gradient(180deg, #e9f2ff, #deebff);
  box-shadow: inset 0 0 0 1px rgba(31, 111, 209, 0.19), 0 8px 16px rgba(13, 78, 166, 0.11);
}

.bottom-tab:active {
  background: rgba(31, 111, 209, 0.12);
}

@media (max-width: 410px) {
  .app-header {
    padding: 12px 12px 9px;
  }

  .hello-block p {
    font-size: 1.44rem;
  }

  .screen-title h2 {
    font-size: 1.82rem;
  }

  .dashboard-hero-card {
    min-height: 176px;
    padding: 18px;
  }
}

/* UX pass: Mitgliedsausweis prominent + Settings klar priorisiert */
#settingsTab > .settings-card:nth-of-type(4) {
  display: none;
}

.member-card-highlight {
  display: grid;
  gap: 12px;
  padding: 16px;
  cursor: pointer;
  border: 0;
  border-radius: 22px;
  background:
    radial-gradient(circle at 92% 9%, rgba(255, 255, 255, 0.28), transparent 34%),
    linear-gradient(145deg, #0d4ea6 0%, #1668ce 60%, #0f57b8 100%);
  box-shadow: 0 18px 40px rgba(13, 78, 166, 0.28);
  color: #fff;
}

.member-card-highlight .card-icon {
  color: #fff;
}

.member-card-highlight-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.member-card-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.member-card-brand strong {
  display: block;
  font-size: 1.04rem;
  line-height: 1.2;
}

.member-card-brand em {
  display: block;
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.86rem;
  font-style: normal;
}

.member-card-highlight-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.member-card-highlight-meta {
  display: grid;
  gap: 3px;
}

.member-card-highlight-meta span:first-child {
  font-size: 1.08rem;
  font-weight: 860;
}

.member-card-highlight-meta span:last-child {
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.88rem;
}

.member-card-highlight-qr {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 0.86rem;
  font-weight: 800;
}

.member-card-highlight .dashboard-card-foot .status-badge {
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.member-card-highlight .dashboard-arrow {
  color: #fff;
}

.dashboard-membercard-card {
  background: linear-gradient(180deg, #f8fbff, #edf5ff);
}

.settings-collapse {
  border: 1px solid rgba(13, 78, 166, 0.14);
  border-radius: 16px;
  background: rgba(13, 78, 166, 0.04);
  overflow: hidden;
}

.settings-collapse summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  color: var(--tcc-primary);
  font-size: 0.92rem;
  font-weight: 820;
}

.settings-collapse summary::-webkit-details-marker {
  display: none;
}

.settings-collapse[open] summary {
  border-bottom: 1px solid rgba(13, 78, 166, 0.12);
}

.settings-collapse .dashboard-settings-list,
.settings-collapse #resetDashboardButton {
  margin: 10px 12px 12px;
}

/* V4 UX adjust: banner-first layout + compact mailbox + member card right below banner */
#homeTab {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#homeTab .app-header {
  order: 1;
  position: absolute;
  top: 20px;
  right: 16px;
  left: 16px;
  z-index: 3;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}

#homeTab .hello-block p,
#homeTab .hello-block h1 {
  color: #fff;
  text-shadow: 0 2px 10px rgba(7, 16, 34, 0.25);
}

#homeTab .hello-block p {
  font-size: 1.42rem;
}

#homeTab .hello-block h1 {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.88);
}

#homeTab .avatar-button {
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 10px 24px rgba(7, 16, 34, 0.25);
}

#homeTab .screen-title {
  order: 2;
  margin-top: 0;
  padding-top: 96px;
}

#homeTab .dashboard-modules {
  order: 3;
}

#homeTab .push-card {
  order: 4;
}

#homeTab .status-grid {
  order: 5;
}

#homeTab .dashboard-membercard-card {
  grid-column: 1 / -1;
  min-height: 138px;
  background:
    radial-gradient(circle at 92% 10%, rgba(31, 111, 209, 0.18), transparent 33%),
    linear-gradient(180deg, #ffffff, #f5f9ff);
}

#homeTab .dashboard-mailbox-card {
  grid-column: span 1;
  min-height: 126px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  box-shadow: var(--tcc-card-shadow-soft);
}

#homeTab .dashboard-mailbox-card .feature-head h3 {
  font-size: 1.02rem;
}

#homeTab .dashboard-mailbox-card .dashboard-main-copy strong {
  font-size: 1.04rem;
  line-height: 1.2;
}

#homeTab .dashboard-mailbox-card .dashboard-main-copy span {
  font-size: 0.86rem;
}

#homeTab .dashboard-mailbox-card .dashboard-arrow {
  font-size: 1.35rem;
}

@media (max-width: 410px) {
  #homeTab .app-header {
    top: 16px;
    right: 14px;
    left: 14px;
  }

  #homeTab .screen-title {
    padding-top: 88px;
  }

  #homeTab .dashboard-mailbox-card {
    grid-column: 1 / -1;
  }
}

/* ============================================
   V5 Visual Theme (based on provided mockup)
   Dashboard-first premium layout
   ============================================ */

:root {
  --v5-bg: #efeee9;
  --v5-surface: #ffffff;
  --v5-ink: #171a24;
  --v5-muted: #6a7284;
  --v5-primary: #2649a7;
  --v5-primary-2: #2f5dd4;
  --v5-soft-line: rgba(34, 48, 92, 0.08);
  --v5-soft-shadow: 0 10px 24px rgba(24, 33, 66, 0.08);
  --v5-soft-shadow-strong: 0 18px 36px rgba(24, 33, 66, 0.16);
}

html,
body {
  background: var(--v5-bg);
}

body::before {
  display: none;
}

.app-shell {
  max-width: 560px;
  padding: calc(12px + env(safe-area-inset-top)) 14px calc(112px + env(safe-area-inset-bottom));
}

/* --- Top area --- */
#homeTab {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#homeTab .app-header {
  order: 1;
  position: static;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 4px 2px 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

#homeTab .hello-block p {
  color: #141827;
  font-size: clamp(2rem, 6vw, 2.46rem);
  font-weight: 500;
  letter-spacing: 0;
  font-family: "Iowan Old Style", "Times New Roman", Georgia, serif;
}

#homeTab .hello-block h1 {
  margin-top: 4px;
  color: #667087;
  font-size: 0.96rem;
  font-weight: 650;
}

#homeTab .avatar-button {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 0;
  background: linear-gradient(135deg, #2b49a3, #345ed3);
  box-shadow: 0 8px 18px rgba(29, 52, 122, 0.22);
}

#homeTab .screen-title {
  order: 2;
  padding: 14px;
  border-radius: 24px;
  border: 0;
  box-shadow: var(--v5-soft-shadow-strong);
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 255, 255, 0.24), transparent 34%),
    linear-gradient(138deg, #1f3688 0%, #2749a8 44%, #3866d9 100%);
}

#homeTab .brand-panel {
  gap: 12px;
  align-items: center;
}

#homeTab .screen-logo {
  width: 52px;
  height: 70px;
  border-radius: 14px;
}

#homeTab .screen-title h2 {
  font-size: 1.96rem;
  line-height: 1.05;
}

#homeTab .screen-title p {
  font-size: 0.98rem;
  color: rgba(255, 255, 255, 0.86);
}

/* --- Dashboard order and layout --- */
#homeTab .dashboard-modules {
  order: 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

#homeTab .status-grid {
  order: 4;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

#homeTab .push-card {
  order: 5;
}

/* --- Member card right after banner --- */
#homeTab .dashboard-membercard-card {
  grid-column: 1 / -1;
  min-height: 148px;
  border: 0;
  border-radius: 24px;
  background:
    radial-gradient(circle at 88% 10%, rgba(255, 255, 255, 0.22), transparent 34%),
    linear-gradient(145deg, #213b95 0%, #2d53bf 55%, #3564db 100%);
  box-shadow: 0 18px 34px rgba(33, 58, 138, 0.25);
}

#homeTab .dashboard-membercard-card .feature-head h3,
#homeTab .dashboard-membercard-card .dashboard-main-copy strong,
#homeTab .dashboard-membercard-card .dashboard-main-copy span,
#homeTab .dashboard-membercard-card .dashboard-arrow {
  color: #fff;
}

#homeTab .dashboard-membercard-card .feature-head .card-icon {
  color: #fff;
}

#homeTab .dashboard-membercard-card .status-badge {
  color: #ffdd70;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.24);
}

/* --- Postfach compact white card --- */
#homeTab .dashboard-mailbox-card {
  grid-column: 1 / -1;
  min-height: 98px;
  border: 1px solid var(--v5-soft-line);
  border-radius: 20px;
  background: var(--v5-surface);
  box-shadow: var(--v5-soft-shadow);
}

#homeTab .dashboard-mailbox-card .feature-head h3 {
  color: #1f326c;
  font-size: 1.04rem;
}

#homeTab .dashboard-mailbox-card .dashboard-main-copy strong {
  color: var(--v5-ink);
  font-size: 1.05rem;
}

#homeTab .dashboard-mailbox-card .dashboard-main-copy span {
  color: var(--v5-muted);
  font-size: 0.86rem;
}

#homeTab .dashboard-mailbox-card .dashboard-arrow {
  color: #3853a7;
  font-size: 1.3rem;
}

/* --- Info tiles under hero --- */
#homeTab .status-card {
  min-height: 90px;
  border: 1px solid var(--v5-soft-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--v5-soft-shadow);
  padding: 12px 10px;
}

#homeTab .status-card .card-icon {
  width: 20px;
  height: 20px;
  margin-bottom: 8px;
  opacity: 0.82;
}

#homeTab .status-card strong {
  font-size: 1.66rem;
  color: #1f2640;
}

#homeTab .status-card span {
  font-size: 0.92rem;
  color: #2d3552;
}

#homeTab .status-card p {
  margin-top: 2px;
  font-size: 0.8rem;
  color: #7a8397;
  line-height: 1.2;
}

/* --- next event / news cards style --- */
#homeTab .dashboard-priority-card {
  grid-column: 1 / -1;
  border: 1px solid var(--v5-soft-line);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--v5-soft-shadow);
}

#homeTab .dashboard-priority-card .dashboard-main-copy strong {
  font-size: 1.18rem;
  color: var(--v5-ink);
}

#homeTab .dashboard-priority-card .dashboard-main-copy span,
#homeTab .dashboard-priority-card .dashboard-preview {
  color: #6e7587;
}

/* --- quick actions like rounded icon chips --- */
#homeTab .dashboard-actions-card {
  grid-column: 1 / -1;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

#homeTab .dashboard-actions-card .feature-head {
  margin-bottom: 6px;
}

#homeTab .dashboard-action-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

#homeTab .dashboard-action-card {
  min-height: 82px;
  border: 1px solid var(--v5-soft-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--v5-soft-shadow);
}

#homeTab .dashboard-action-card strong {
  font-size: 0.82rem;
  color: #252c44;
}

/* --- Gallery row look --- */
#homeTab .dashboard-compact-card[data-view="gallery"] {
  grid-column: 1 / -1;
  min-height: 110px;
  border-radius: 20px;
  background: linear-gradient(120deg, #f2f6ff, #f8fbff);
}

/* --- bottom nav closer to mockup --- */
.bottom-nav {
  right: max(14px, calc((100vw - 560px) / 2 + 14px));
  left: max(14px, calc((100vw - 560px) / 2 + 14px));
  bottom: max(10px, env(safe-area-inset-bottom));
  border: 1px solid rgba(33, 52, 104, 0.08);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 14px 28px rgba(23, 31, 62, 0.12);
}

.bottom-tab {
  min-height: 60px;
  border-radius: 16px;
  font-size: 0.7rem;
}

.bottom-tab.active {
  color: #fff;
  background: linear-gradient(145deg, #2b4db1, #335fdb);
  box-shadow: 0 10px 18px rgba(43, 77, 177, 0.3);
}

.bottom-tab.active .nav-icon {
  color: #fff;
}

@media (max-width: 460px) {
  #homeTab .screen-title {
    padding: 12px;
  }

  #homeTab .screen-title h2 {
    font-size: 1.78rem;
  }

  #homeTab .dashboard-action-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 390px) {
  #homeTab .dashboard-action-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* === TCC Premium Mobile UI V5 === */
:root {
  --tcc-bg: #f4f0e8;
  --tcc-surface: #ffffff;
  --tcc-surface-soft: #f8f6f1;
  --tcc-blue: #244fbf;
  --tcc-blue-dark: #183a8f;
  --tcc-blue-deep: #172f74;
  --tcc-blue-gradient: linear-gradient(135deg, #1c347f 0%, #2554c7 100%);
  --tcc-text: #111827;
  --tcc-muted: #64748b;
  --tcc-border: #e5e7eb;
  --tcc-red: #ef4562;
  --tcc-green: #2f9e5f;
  --tcc-gold: #c79824;
  --tcc-radius-xl: 24px;
  --tcc-radius-lg: 18px;
  --tcc-shadow-soft: 0 12px 30px rgba(15, 23, 42, 0.10);
  --tcc-shadow-card: 0 8px 24px rgba(15, 23, 42, 0.08);
}

html,
body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at 70% 0%, rgba(36, 79, 191, 0.08), transparent 34%),
    var(--tcc-bg);
  color: var(--tcc-text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  overflow-x: hidden;
}

.app-shell {
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  margin: 0 auto;
  padding: max(20px, env(safe-area-inset-top)) 18px 108px;
  box-sizing: border-box;
  background: transparent;
  color: var(--tcc-text);
}

.app-view {
  min-height: 100vh;
}

.screen {
  width: 100%;
  box-sizing: border-box;
}

.screen:not([hidden]) {
  display: block;
}

#homeTab:not([hidden]) {
  display: flex;
  flex-direction: column;
}

#homeTab .screen-title {
  display: none;
}

.app-header {
  display: none;
}

body.is-home .app-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 0 2px 18px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.hello-block {
  min-width: 0;
}

.hello-block #welcomeSubtitle {
  margin: 0;
  color: #94a3b8;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 800;
  order: 0;
}

.hello-block #welcomeTitle {
  margin: 2px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  line-height: 1.08;
  font-weight: 400;
  color: var(--tcc-text);
}

.hello-block #welcomeTitle span {
  color: var(--tcc-blue);
  font-style: italic;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.icon-circle,
.profile-circle,
.avatar-button.profile-circle {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: grid;
  place-items: center;
}

.icon-circle {
  border: 0;
  background: var(--tcc-surface);
  color: #25324a;
  box-shadow: var(--tcc-shadow-card);
  position: relative;
}

.profile-circle,
.avatar-button.profile-circle {
  border: 0;
  background: var(--tcc-blue);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(36, 79, 191, 0.22);
  background-size: cover;
  background-position: center;
}

.notification-dot {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--tcc-red);
  border: 2px solid #fff;
}

#homeTab .dashboard-modules {
  display: contents;
}

#homeTab .push-card {
  order: 8;
}

#homeTab .status-grid {
  order: 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0 18px;
}

#homeTab .status-card {
  min-height: 94px;
  padding: 14px 12px 12px;
  border: 0;
  border-radius: 16px;
  background: var(--tcc-surface);
  box-shadow: var(--tcc-shadow-card);
  box-sizing: border-box;
}

#homeTab .status-card .card-icon {
  width: 18px;
  height: 18px;
  margin: 0 0 10px;
  color: #7b8aa7;
}

#homeTab .status-card strong {
  display: inline;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  line-height: 1;
  font-weight: 400;
  color: var(--tcc-text);
}

#homeTab .status-card span {
  display: inline;
  margin-left: 3px;
  color: var(--tcc-muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

#homeTab .status-card p {
  margin: 4px 0 0;
  color: #344054;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

#homeTab .status-card-danger {
  box-shadow: 0 12px 24px rgba(239, 69, 98, 0.14);
}

#homeTab .status-card-danger strong,
#homeTab .status-card-danger span {
  color: var(--tcc-red);
}

#homeTab .dashboard-card {
  min-width: 0;
}

#homeTab .dashboard-membercard-card {
  order: 2;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#homeTab .dashboard-membercard-card > .feature-head {
  display: none;
}

.member-card-preview {
  width: 100%;
  color: #fff;
  background: var(--tcc-blue-gradient);
  border-radius: 22px;
  padding: 16px;
  box-shadow: 0 16px 30px rgba(36, 79, 191, 0.28);
  overflow: hidden;
  box-sizing: border-box;
}

.member-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  padding-bottom: 10px;
}

.member-brand {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}

.member-logo-tile {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 1px solid rgba(255, 210, 80, 0.7);
  color: #facc15;
  display: grid;
  place-items: center;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  flex-shrink: 0;
}

.member-card-title {
  display: block;
  color: rgba(255, 255, 255, 0.75);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 900;
}

.member-card-club {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  line-height: 1.1;
  color: #fff;
  text-decoration: underline;
}

.member-status-badge {
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #facc15;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  flex-shrink: 0;
}

.member-card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  margin-top: 14px;
}

.member-name {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.member-number {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
  opacity: 0.86;
}

.member-card-button {
  min-width: 130px;
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-weight: 900;
  box-shadow: none;
}

#homeTab .dashboard-event-card {
  order: 4;
}

#homeTab .dashboard-actions-card {
  order: 5;
}

#homeTab .dashboard-news-card {
  order: 6;
}

#homeTab .dashboard-gallery-card {
  order: 7;
}

#homeTab .dashboard-event-card,
#homeTab .dashboard-actions-card,
#homeTab .dashboard-news-card,
#homeTab .dashboard-gallery-card {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#homeTab .dashboard-event-card > .feature-head,
#homeTab .dashboard-actions-card > .feature-head,
#homeTab .dashboard-news-card > .feature-head,
#homeTab .dashboard-gallery-card > .feature-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 4px 12px;
}

#homeTab .dashboard-event-card > .feature-head .card-icon,
#homeTab .dashboard-actions-card > .feature-head .card-icon,
#homeTab .dashboard-news-card > .feature-head .card-icon,
#homeTab .dashboard-gallery-card > .feature-head .card-icon {
  display: none;
}

#homeTab .dashboard-event-card > .feature-head h3,
#homeTab .dashboard-actions-card > .feature-head h3,
#homeTab .dashboard-news-card > .feature-head h3,
#homeTab .dashboard-gallery-card > .feature-head h3,
.section-head h2 {
  margin: 0;
  color: var(--tcc-text);
  font-size: 21px;
  font-weight: 900;
  line-height: 1.15;
}

.event-card {
  background: var(--tcc-surface);
  border: 0;
  border-radius: 22px;
  box-shadow: var(--tcc-shadow-card);
  overflow: hidden;
}

.event-main {
  display: flex;
  gap: 14px;
  padding: 16px;
}

.date-tile {
  width: 52px;
  min-width: 52px;
  border-radius: 16px;
  background: #f5f0e8;
  text-align: center;
  padding: 10px 0;
  align-self: flex-start;
}

.date-weekday,
.date-month {
  display: block;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.1;
}

.date-day {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  line-height: 1.05;
  font-weight: 400;
  color: var(--tcc-text);
}

.event-copy {
  min-width: 0;
  flex: 1;
}

.event-badge,
.news-badge,
.mail-badge,
.status-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 10px;
  background: #e8eefc;
  color: var(--tcc-blue);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.status-badge.success {
  background: #dff3e7;
  color: #168044;
}

.status-badge.warning {
  background: #fff2cc;
  color: #a46a00;
}

.status-badge.danger {
  background: #ffe1e7;
  color: #be123c;
}

.event-title {
  display: block;
  margin-top: 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--tcc-text);
  overflow-wrap: anywhere;
}

.event-meta {
  display: block;
  margin-top: 8px;
  color: var(--tcc-muted);
  font-size: 12px;
  line-height: 1.35;
}

.event-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--tcc-border);
  background: var(--tcc-surface-soft);
  padding: 12px 16px;
}

.event-attendees {
  min-width: 0;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.event-button {
  min-height: 40px;
  padding: 10px 18px;
  border: 0;
  border-radius: 10px;
  background: var(--tcc-blue-dark);
  color: #fff;
  font-weight: 900;
}

.event-description {
  margin: -4px 16px 12px 82px;
  color: var(--tcc-muted);
  font-size: 13px;
  line-height: 1.45;
}

.dashboard-action-grid,
.quick-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.dashboard-action-card,
.quick-card {
  min-height: 82px;
  border: 0;
  border-radius: 16px;
  background: var(--tcc-surface);
  box-shadow: var(--tcc-shadow-card);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  color: var(--tcc-text);
}

.dashboard-action-card .quick-icon,
.quick-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin: 0;
  background: #eef4ff;
  color: var(--tcc-blue);
}

.dashboard-action-card .success-icon {
  background: #e6f7ee;
  color: var(--tcc-green);
}

.dashboard-action-card .gallery-icon {
  background: #f6f0e4;
  color: var(--tcc-gold);
}

.dashboard-action-card .groups-icon {
  background: #fff0f3;
  color: var(--tcc-red);
}

.dashboard-action-card strong,
.quick-label {
  font-size: 12px;
  line-height: 1.1;
  font-weight: 900;
}

.quick-badge {
  position: absolute;
  top: 10px;
  right: 12px;
  background: var(--tcc-red);
  color: white;
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 10px;
  font-weight: 900;
}

.news-card {
  display: flex;
  gap: 14px;
  margin-bottom: 12px;
  padding: 14px;
  border-radius: 22px;
  background: var(--tcc-surface);
  box-shadow: var(--tcc-shadow-card);
}

.news-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: #fff;
  background: linear-gradient(135deg, #1c347f, #466ee0);
  font-size: 24px;
}

.news-icon.red {
  background: linear-gradient(135deg, #ef4562, #f35b75);
}

.news-body {
  min-width: 0;
  display: block;
}

.news-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.news-meta small {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 800;
}

.news-title {
  display: block;
  color: var(--tcc-text);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.news-text {
  display: -webkit-box;
  margin-top: 3px;
  color: var(--tcc-muted);
  font-size: 13px;
  line-height: 1.25;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.gallery-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 0 18px 8px 0;
  margin-right: -18px;
  scrollbar-width: thin;
}

.gallery-card {
  min-width: 128px;
  height: 170px;
  border: 0;
  border-radius: 14px;
  padding: 12px;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
  overflow: hidden;
  box-shadow: var(--tcc-shadow-card);
  box-sizing: border-box;
  background: linear-gradient(160deg, #5f83df, #14133d);
}

.gallery-card-1 {
  background: linear-gradient(160deg, #d65365, #4a1e14);
}

.gallery-card-2 {
  background: linear-gradient(160deg, #54d4bd, #0e3b46);
}

.gallery-card-3 {
  background: linear-gradient(160deg, #d5b24b, #514018);
}

.gallery-badge {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 900;
}

.gallery-title {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  line-height: 1.15;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.gallery-date {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-style: normal;
  opacity: 0.85;
}

.bottom-nav {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: max(12px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: calc(100% - 28px);
  max-width: 452px;
  height: 72px;
  padding: 0;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 26px;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.18);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(14px);
}

.bottom-tab {
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: #475569;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  box-shadow: none;
}

.bottom-tab.active {
  color: var(--tcc-blue);
  background: transparent;
  box-shadow: none;
}

.bottom-tab.pass-nav {
  width: 58px;
  height: 58px;
  min-height: 58px;
  margin: -25px auto 0;
  border: 4px solid #fff;
  border-radius: 18px;
  background: var(--tcc-blue);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 24px rgba(36, 79, 191, 0.48);
}

.bottom-tab.pass-nav span:not(.nav-icon) {
  display: none;
}

.bottom-tab.pass-nav .nav-icon {
  width: 24px;
  height: 24px;
  color: #fff;
}

.success-icon { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.2 16.6 4.9 12.3 3.5 13.7l5.7 5.7L21 7.6 19.6 6.2z'/%3E%3C/svg%3E"); }
.search-icon { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5 4a6.5 6.5 0 0 1 5.16 10.45l4.45 4.44-1.42 1.42-4.44-4.45A6.5 6.5 0 1 1 10.5 4Zm0 2a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9Z'/%3E%3C/svg%3E"); }
.mailbox-icon { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Zm.7 2 7.3 5 7.3-5H4.7Zm15.3 2.2-7.4 5.1a1 1 0 0 1-1.2 0L4 9.2V17h16V9.2Z'/%3E%3C/svg%3E"); }

.nav-icon {
  width: 22px;
  height: 22px;
}

.section-head,
.page-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 18px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.section-head > div > span,
.page-hero > span,
.mail-header span,
.pass-header span:not(.valid-badge) {
  display: block;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.section-head h2,
.mail-title,
.pass-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 32px;
  line-height: 1.05;
  font-weight: 400;
}

#eventsTab .page-list {
  display: grid;
  gap: 28px;
}

.event-list-card {
  margin: 0;
}

.event-list-card .event-copy .status-badge {
  margin-left: 6px;
}

.event-list-card.is-cancelled .event-main,
.event-list-card.is-cancelled .event-footer {
  opacity: 0.72;
}

.event-response-grid {
  display: grid;
  gap: 10px;
  padding: 14px 16px 16px;
  background: #fff;
}

.event-response-grid label,
.login-form label,
.settings-card label {
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

input,
select,
textarea {
  border-radius: 14px;
  border: 1px solid #dbe3ee;
  background: #fff;
  color: var(--tcc-text);
  min-height: 44px;
  box-sizing: border-box;
}

.primary-button,
.chip-button,
.wallet-button,
.pass-action-button {
  border-radius: 12px;
  font-weight: 900;
}

#memberCardTab .settings-card {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.valid-badge {
  background: #dff3e7;
  color: #168044;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
}

.member-pass-layout {
  display: block;
}

.full-pass-card {
  min-height: 226px;
  padding: 20px;
  border-radius: 22px;
  background: var(--tcc-blue-gradient);
  color: #fff;
  box-shadow: 0 16px 34px rgba(36, 79, 191, 0.30);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  overflow: hidden;
  box-sizing: border-box;
}

.full-pass-main {
  min-width: 0;
}

.pass-member-label {
  display: block;
  margin-top: 34px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.pass-member-name {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 25px;
  line-height: 1.1;
  font-weight: 400;
  overflow-wrap: anywhere;
}

.pass-member-number {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1px;
}

.pass-member-subline {
  display: block;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  line-height: 1.35;
}

.qr-box {
  align-self: center;
  flex-shrink: 0;
  border-radius: 10px;
  background: #fff;
  padding: 8px;
}

.qr-box img,
.qr-box canvas {
  width: 96px;
  height: 96px;
  display: block;
}

.pass-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 18px;
}

.pass-info-card {
  border-radius: 13px;
  background: #fff;
  padding: 12px;
  box-shadow: var(--tcc-shadow-card);
}

.pass-info-label {
  display: block;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.pass-info-value {
  display: block;
  margin-top: 4px;
  color: var(--tcc-text);
  font-size: 14px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

#memberCardTab .member-card-qr-preview {
  display: none;
}

#rotateMemberCardTokenButton {
  display: none;
}

#walletButton,
.wallet-button {
  width: 100%;
  margin-top: 18px;
  padding: 16px;
  border: 0;
  border-radius: 12px;
  background: #101522;
  color: #fff;
  font-weight: 900;
}

.pass-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

#renewMemberCardButton,
#shareMemberCardButton,
.pass-action-button {
  background: #fff;
  border: 1px solid var(--tcc-border);
  color: var(--tcc-text);
  padding: 14px;
  border-radius: 12px;
  font-weight: 900;
}

.pass-note {
  margin: 22px 12px 0;
  color: #475569;
  font-size: 12px;
  line-height: 1.5;
}

#mailboxTab:not([hidden]) {
  display: flex;
  flex-direction: column;
}

.mail-header {
  align-items: flex-start;
}

.mail-add-button {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 0;
  background: var(--tcc-blue);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 28px;
  line-height: 1;
  box-shadow: 0 12px 24px rgba(36, 79, 191, 0.35);
}

.mail-search {
  display: flex;
  gap: 10px;
  align-items: center;
  color: #94a3b8;
  padding: 8px 14px 18px;
}

.mail-search input {
  width: 100%;
  min-height: 42px;
  border: 0;
  background: transparent;
  outline: none;
  font-size: 14px;
  color: var(--tcc-text);
}

.mail-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}

.mail-tab {
  min-height: 36px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  padding: 9px 14px;
  color: var(--tcc-text);
  font-weight: 900;
}

.mail-tab.active {
  background: #101522;
  color: #fff;
}

#mailboxThreads {
  order: 3;
}

.mail-card {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
  padding: 16px;
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--tcc-shadow-card);
  box-sizing: border-box;
}

.mail-avatar {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: #fff;
  font-weight: 900;
  background: var(--tcc-blue);
}

.mail-content {
  min-width: 0;
  flex: 1;
}

.mail-thread-list {
  display: grid;
  gap: 10px;
  max-height: min(52vh, 460px);
  overflow-y: auto;
  padding-right: 2px;
}

.mail-thread-bubble {
  max-width: 92%;
}

.mail-thread-bubble.is-mine {
  margin-left: auto;
  background: #e8f0ff;
}

.mail-thread-bubble.is-other {
  margin-right: auto;
  background: #fff;
}

.mail-thread-bubble.is-mine .mail-avatar {
  background: #0d4ea6;
}

.mail-thread-bubble.is-other .mail-avatar {
  background: #5b6b83;
}

.mail-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.mail-name {
  font-weight: 900;
}

.mail-time {
  flex-shrink: 0;
  color: #94a3b8;
  font-size: 11px;
}

.mail-subject {
  display: block;
  margin-top: 3px;
  color: var(--tcc-text);
  font-size: 14px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.mail-preview {
  display: block;
  margin-top: 3px;
  color: var(--tcc-muted);
  font-size: 13px;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.35;
}

.feature-card,
.settings-card,
.list-item,
.admin-card,
.profile-card {
  border: 0;
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--tcc-shadow-card);
}

#profileTab .profile-card,
#settingsTab .settings-card,
#documentsTab .list-item,
#groupsTab .list-item,
#paymentsTab .list-item,
#newsTab .list-item,
#membersTab .list-item {
  border-radius: 22px;
  box-shadow: var(--tcc-shadow-card);
}

.gallery-album-card {
  border-radius: 22px;
  box-shadow: var(--tcc-shadow-card);
}

.gallery-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.gallery-meta > div {
  min-width: 0;
  border-radius: 16px;
  background: #fff;
  padding: 12px;
  box-shadow: var(--tcc-shadow-card);
}

.gallery-meta span,
.gallery-meta strong {
  display: block;
  overflow-wrap: anywhere;
}

/* === TCC V5.1 profile/settings repair === */
#profileTab .profile-action-grid {
  grid-template-columns: 1fr;
  gap: 10px;
}

#profileTab .profile-action-grid .quick-card {
  min-height: 74px;
  padding: 14px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 18px;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 2px;
  align-items: center;
  text-align: left;
}

#profileTab .profile-action-grid .quick-card .card-icon {
  grid-row: 1 / span 2;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background-color: currentColor;
  color: var(--tcc-blue);
}

#profileTab .profile-action-grid .quick-card strong {
  min-width: 0;
  color: var(--tcc-text);
  font-size: 16px;
  line-height: 1.2;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#profileTab .profile-action-grid .quick-card em {
  min-width: 0;
  color: var(--tcc-muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.25;
  overflow-wrap: anywhere;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#profileTab .profile-action-grid .quick-card .chevron {
  grid-column: 3;
  grid-row: 1 / span 2;
  color: var(--tcc-blue);
  font-size: 24px;
  font-weight: 900;
}

#profileTab .profile-head {
  align-items: flex-start;
}

#profileTab .profile-head h2 {
  max-width: 48%;
}

#profileTab .profile-head .secondary-action,
#profileTab .section-back-button {
  min-height: 46px;
  padding-inline: 16px;
  white-space: normal;
}

.mail-card {
  max-width: 100%;
  overflow: hidden;
}

.mail-card .inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.mail-card .chip-button {
  min-width: 0;
}

.bottom-tab[data-view="mailbox"] .mailbox-icon,
.quick-card .mailbox-icon,
.mail-add-button .mailbox-icon {
  color: var(--tcc-blue);
}

#settingsTab .quick-grid {
  grid-template-columns: 1fr;
}

#settingsTab > .settings-card:nth-of-type(4) {
  display: grid;
}

#settingsTab .quick-card {
  min-height: 68px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 16px;
  grid-template-rows: auto auto;
  gap: 2px 12px;
  text-align: left;
  align-items: center;
  padding: 12px 14px;
}

.profile-payment-status {
  margin-top: 12px;
  width: 100%;
  border: 1px solid #d8e0ef;
  border-radius: 14px;
  background: #fff;
  padding: 12px 14px;
  text-align: left;
  display: grid;
  gap: 4px;
}

.profile-payment-status strong {
  color: #0f2f78;
  font-size: 14px;
}

.profile-payment-status span {
  color: #4b5f80;
  font-size: 13px;
}

.profile-payment-status-danger {
  border-color: #f3b5bc;
  background: #fff4f5;
}

.profile-payment-status-danger strong,
.profile-payment-status-danger span {
  color: #c7293b;
}

.profile-payment-status-success {
  border-color: #b7e7c7;
  background: #f4fcf7;
}

#settingsTab .quick-card .card-icon {
  grid-row: 1 / span 2;
}

#settingsTab .quick-card strong,
#settingsTab .quick-card em {
  min-width: 0;
  overflow-wrap: anywhere;
}

#settingsTab .quick-card .chevron {
  grid-column: 3;
  grid-row: 1 / span 2;
}

@media (max-width: 390px) {
  .app-shell {
    padding-left: 14px;
    padding-right: 14px;
  }

  .dashboard-action-grid,
  .quick-grid {
    gap: 10px;
  }

  .dashboard-action-card {
    min-height: 78px;
    padding-inline: 6px;
  }

  .member-card-bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .member-card-button {
    width: 100%;
  }

  .full-pass-card {
    padding: 16px;
  }

  .qr-box img,
  .qr-box canvas {
    width: 82px;
    height: 82px;
  }
}

/* Mailbox V2 */
#mailboxComposer[hidden],
#mailboxThreadDetail[hidden] {
  display: none !important;
}

.mail-preview-wrap {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: initial !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mail-thread-list {
  display: grid;
  gap: 10px;
}

/* Unread badge sync: header bell + mailbox tab */
.header-bell-button {
  position: relative;
}

.notification-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--tcc-red, #ef4562);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  display: inline-grid;
  place-items: center;
  box-shadow: 0 2px 8px rgba(239, 69, 98, 0.35);
}

.bottom-tab[data-view="mailbox"] {
  position: relative;
}

.nav-unread-count {
  position: absolute;
  top: 4px;
  right: 12px;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--tcc-red, #ef4562);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
}

.event-responses-panel {
  margin-top: 10px;
  border: 1px solid var(--tcc-border, #e5e7eb);
  border-radius: 14px;
  padding: 10px;
  background: #fff;
}

.event-responses-grid {
  display: grid;
  gap: 10px;
}

.event-responses-grid h5 {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 800;
}

.event-response-list {
  margin: 0;
  padding-left: 16px;
  display: grid;
  gap: 4px;
}

.event-response-list li {
  font-size: 13px;
  color: var(--tcc-text, #111827);
}

.event-response-list li span {
  display: block;
  color: var(--tcc-muted, #64748b);
  margin-top: 2px;
}

.chip-button.danger {
  color: #c22c44;
  border-color: rgba(194, 44, 68, 0.35);
}

.qr-icon {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h8v8H3V3Zm2 2v4h4V5H5Zm8-2h8v8h-8V3Zm2 2v4h4V5h-4ZM3 13h8v8H3v-8Zm2 2v4h4v-4H5Zm8-2h2v2h-2v-2Zm2 2h2v2h-2v-2Zm2-2h2v2h-2v-2Zm-4 4h2v2h-2v-2Zm4 0h4v4h-2v-2h-2v-2Zm-2 2h2v2h-2v-2Z'/%3E%3C/svg%3E");
}

.attendance-scanner-wrap {
  margin: 8px 0 12px;
}

#attendanceScannerVideo {
  width: 100%;
  max-height: 240px;
  border-radius: 14px;
  background: #0f172a;
  object-fit: cover;
  margin-top: 8px;
}

/* Stability overrides */
.mailbox-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Zm.7 2 7.3 5 7.3-5H4.7Zm15.3 2.2-7.4 5.1a1 1 0 0 1-1.2 0L4 9.2V17h16V9.2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Zm.7 2 7.3 5 7.3-5H4.7Zm15.3 2.2-7.4 5.1a1 1 0 0 1-1.2 0L4 9.2V17h16V9.2Z'/%3E%3C/svg%3E");
}

.bottom-tab.active {
  color: var(--tcc-blue-dark) !important;
  background: linear-gradient(180deg, #eef4ff, #dfeaff) !important;
  box-shadow: inset 0 0 0 1px rgba(13, 78, 166, 0.26), 0 8px 18px rgba(13, 78, 166, 0.16) !important;
}

.bottom-tab.active .nav-icon {
  color: var(--tcc-blue-dark) !important;
  background: var(--tcc-blue-dark) !important;
}

/* --- V5.1.1 fixes: check-in, mailbox overflow, floating nav, profile compact --- */
html,
body,
#app,
.tcc-app,
.tcc-page,
.screen {
  max-width: 100%;
  overflow-x: hidden;
}

#mailboxTab,
#mailboxTab .settings-card,
#mailboxThreads,
.mail-card,
.mail-content {
  max-width: 100%;
  box-sizing: border-box;
}

.mail-tabs {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  padding-bottom: 6px;
}

.mail-tabs::-webkit-scrollbar {
  display: none;
}

.mail-tab {
  flex: 0 0 auto;
  white-space: nowrap;
}

.mail-search {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.mail-search input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.bottom-nav {
  position: fixed !important;
  left: 24px !important;
  right: 24px !important;
  bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  z-index: 9999 !important;
}

@media (max-width: 380px) {
  .bottom-nav {
    left: 12px !important;
    right: 12px !important;
    height: 68px !important;
  }
}

.screen,
.tcc-content {
  padding-bottom: calc(120px + env(safe-area-inset-bottom));
}

#profileTab {
  padding-bottom: calc(140px + env(safe-area-inset-bottom));
}

.scanner-live {
  display: grid;
  gap: 10px;
}

#attendanceScannerVideo {
  min-height: 220px;
}

.attendance-feedback-card {
  display: grid;
  gap: 8px;
  border-radius: 16px;
  padding: 14px;
  border: 1px solid var(--tcc-line);
  background: #eef5ff;
}

.attendance-feedback-card strong {
  font-size: 18px;
  line-height: 1.2;
}

.attendance-feedback-card.is-success {
  background: #edfdf3;
  border-color: rgba(10, 122, 69, 0.3);
}

.attendance-feedback-card.is-warning {
  background: #fff8eb;
  border-color: rgba(183, 121, 31, 0.35);
}

.attendance-feedback-card.is-error {
  background: #fff2f4;
  border-color: rgba(215, 38, 56, 0.35);
}

.attendance-feedback-card.is-info {
  background: #eef5ff;
  border-color: rgba(13, 78, 166, 0.25);
}

.profile-photo-card {
  padding: 24px;
}

.profile-photo-card .profile-photo-preview {
  width: 86px;
  height: 86px;
  border-radius: 24px;
  flex: 0 0 auto;
}

.profile-photo-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.profile-photo-form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.profile-photo-form .file-pill,
.profile-photo-form .secondary-action {
  flex: 1 1 140px;
}

/* Requested floating nav geometry */
.bottom-nav {
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: calc(100% - 32px) !important;
  max-width: 430px !important;
  bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  z-index: 9999 !important;
}

.screen,
.tcc-content,
.page-list,
#homeTab,
#newsTab,
#eventsTab,
#attendanceTab,
#mailboxTab,
#memberCardTab,
#galleryTab,
#groupsTab,
#paymentsTab,
#membersTab,
#profileTab,
#documentsTab,
#settingsTab,
#adminTab {
  padding-bottom: calc(128px + env(safe-area-inset-bottom)) !important;
}

body.tcc-modal-open {
  overflow: hidden;
}

body.tutorial-open {
  overflow: hidden;
}

.tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 21000;
  pointer-events: auto;
}

.tutorial-highlight {
  position: fixed;
  border-radius: 16px;
  box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.62);
  border: 2px solid rgba(255, 255, 255, 0.9);
  transition: all .25s ease;
  pointer-events: none;
}

.tutorial-panel {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(96px + env(safe-area-inset-bottom));
  width: min(430px, calc(100% - 24px));
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 24px 56px rgba(15, 23, 42, 0.25);
  padding: 16px;
}

.tutorial-progress {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 800;
  color: #64748b;
}

.tutorial-panel h3 {
  margin: 0 0 6px;
}

.tutorial-panel p {
  margin: 0 0 10px;
}

.tutorial-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tcc-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20000;
  background: rgba(15, 23, 42, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.tcc-modal {
  width: min(430px, 100%);
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15, 31, 54, 0.28);
  padding: 24px;
}

.mailbox-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.mailbox-modal-head h3 {
  margin: 0;
}

.mailbox-modal .inline-actions {
  margin-top: 12px;
}

.mailbox-confirm-modal p {
  margin-top: 8px;
  margin-bottom: 12px;
  color: #64748b;
}

.mail-card .chip-button.primary {
  background: #0d4ea6;
  color: #fff;
  border-color: #0d4ea6;
}

.app-toast {
  position: fixed;
  left: 50%;
  bottom: calc(116px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 22000;
  width: min(430px, calc(100% - 32px));
  background: #0f172a;
  color: #fff;
  padding: 12px 14px;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.28);
  font-weight: 600;
}

.app-toast.is-error {
  background: #991b1b;
}

.app-toast.is-success {
  background: #166534;
}