:root {
  --primary: #004E8C;
  --navy: #0A1F44;
  --accent: #5D3F97;
  --bg: #F8FAFC;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Surfaces */
  --color-bg: #F8FAFC;
  --color-bg-translucent: rgba(248, 250, 252, 0.92);
  --color-surface: #FFFFFF;
  --color-surface-alt: #F1F5F9;
  --color-border: #E2E8F0;
  --color-divider: #F1F5F9;
  --color-decorative: #CBD5E1;

  /* Text */
  --color-text-heading: #0A1F44;
  --color-text-primary: #0F172A;
  --color-text-secondary: #334155;
  --color-text-tertiary: #64748B;
  --color-text-quaternary: #94A3B8;

  /* Brand (constant across themes; tokenised for consistency) */
  --color-primary: #004E8C;
  --color-primary-text: #004E8C;
  --color-navy-surface: #0A1F44;
  --color-accent: #5D3F97;

  /* Status tints (pastel background + matching readable text) */
  --tint-info-bg: #D6E9F8;
  --tint-info-text: #004E8C;
  --tint-info-border: #BFDDF3;
  --tint-info-line: #7FB3DD;
  --tint-success-bg: #DCFCE7;
  --tint-success-text: #166534;
  --tint-warning-bg: #FEF3C7;
  --tint-warning-text: #92400E;
  --tint-danger-bg: #FEE2E2;
  --tint-danger-text: #991B1B;
  --tint-danger-border: #FECACA;
  --tint-accent-bg: #EDE6F8;
  --tint-accent-text: #5D3F97;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0B1220;
    --color-bg-translucent: rgba(11, 18, 32, 0.88);
    --color-surface: #141E2E;
    --color-surface-alt: #1B2534;
    --color-border: #263041;
    --color-divider: #263041;
    --color-decorative: #33404F;

    --color-text-heading: #F1F5F9;
    --color-text-primary: #F1F5F9;
    --color-text-secondary: #C7D0DD;
    --color-text-tertiary: #96A4B8;
    --color-text-quaternary: #6B7A8F;

    --color-primary-text: #5AA9E6;

    --tint-info-bg: #16283D;
    --tint-info-text: #6BB6F5;
    --tint-info-border: #22405E;
    --tint-info-line: #3E6E96;
    --tint-success-bg: #123322;
    --tint-success-text: #4ADE80;
    --tint-warning-bg: #3A2C10;
    --tint-warning-text: #FBBF24;
    --tint-danger-bg: #3A1717;
    --tint-danger-text: #F87171;
    --tint-danger-border: #5C2323;
    --tint-accent-bg: #241B3B;
    --tint-accent-text: #B79EEA;
  }
}

:root[data-theme="dark"] {
  --color-bg: #0B1220;
  --color-bg-translucent: rgba(11, 18, 32, 0.88);
  --color-surface: #141E2E;
  --color-surface-alt: #1B2534;
  --color-border: #263041;
  --color-divider: #263041;
  --color-decorative: #33404F;

  --color-text-heading: #F1F5F9;
  --color-text-primary: #F1F5F9;
  --color-text-secondary: #C7D0DD;
  --color-text-tertiary: #96A4B8;
  --color-text-quaternary: #6B7A8F;

  --color-primary-text: #5AA9E6;

  --tint-info-bg: #16283D;
  --tint-info-text: #6BB6F5;
  --tint-info-border: #22405E;
  --tint-info-line: #3E6E96;
  --tint-success-bg: #123322;
  --tint-success-text: #4ADE80;
  --tint-warning-bg: #3A2C10;
  --tint-warning-text: #FBBF24;
  --tint-danger-bg: #3A1717;
  --tint-danger-text: #F87171;
  --tint-danger-border: #5C2323;
  --tint-accent-bg: #241B3B;
  --tint-accent-text: #B79EEA;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--color-bg);
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

.app-screen {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--color-bg);
  max-width: 480px;
  margin: 0 auto;
  transition: background-color 0.15s ease;
}

/* Real status-bar clearance: 64px matches the prototype on non-notch
   devices; grows further under an installed PWA's safe-area inset. */
.content-pad-top {
  padding-top: max(64px, calc(24px + var(--safe-top)));
}

.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 480px;
  margin: 0 auto;
  background: var(--color-bg-translucent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: space-around;
  padding: 10px 8px max(26px, calc(10px + var(--safe-bottom)));
  z-index: 30;
}

.tabbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--color-text-quaternary);
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
}

.tabbar-item .tabbar-label {
  font-size: 11px;
  font-weight: 600;
}

.tabbar-item.active {
  color: var(--color-primary-text);
}

.tabbar-item.active .tabbar-label {
  font-weight: 700;
}

.header-back {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  min-height: 44px;
}

.header-back .back-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--color-surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.header-back .back-label {
  font-size: 13px;
  color: var(--color-text-tertiary);
  font-weight: 600;
}

.form-field { display: flex; flex-direction: column; gap: 6px; }

.form-field label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.form-field input {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 13px 14px;
  font-size: 14px;
  color: var(--color-text-primary);
  font-family: inherit;
  width: 100%;
  min-height: 44px;
}

.form-field input:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.form-field input::placeholder { color: var(--color-text-quaternary); }

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14.5px;
  padding: 15px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  min-height: 44px;
  width: 100%;
  font-family: inherit;
}

.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:disabled { opacity: 0.55; cursor: default; }
.btn-block-disabled { background: var(--color-border); color: var(--color-text-quaternary); }

.form-error {
  display: none;
  background: var(--tint-danger-bg);
  border: 1px solid var(--tint-danger-border);
  color: var(--tint-danger-text);
  font-size: 12.5px;
  font-weight: 600;
  padding: 11px 13px;
  border-radius: 10px;
  margin-bottom: 14px;
  line-height: 1.4;
}

.form-error.visible { display: block; }

.skel {
  background: linear-gradient(90deg, var(--color-surface-alt) 25%, var(--color-border) 37%, var(--color-surface-alt) 63%);
  background-size: 400% 100%;
  animation: skel-shimmer 1.4s ease infinite;
  border-radius: 6px;
}

@keyframes skel-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.toast {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: calc(20px + var(--safe-bottom));
  max-width: 440px;
  margin: 0 auto;
  background: var(--navy);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  padding: 13px 16px;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(10, 31, 68, 0.25);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast.visible {
  opacity: 1;
  transform: translateY(0);
}