:root {
  /* LIGHT THEME (Default) */
  --bg-color: #F8FAFC;
  --surface: rgba(255, 255, 255, 0.9);
  --surface-hover: rgba(255, 255, 255, 1);
  --surface-active: rgba(241, 245, 249, 1);
  --border: rgba(0, 0, 0, 0.08);
  --border-highlight: rgba(0, 0, 0, 0.15);
  --border2: rgba(0, 0, 0, 0.04);

  --ink: #0F172A;
  --ink2: #334155;
  --ink3: #475569;
  --ink4: #64748B;

  --primary: #3B82F6;
  --primary-hover: #2563EB;
  --primary-active: #1D4ED8;

  --blue: #3B82F6;
  --blue-bg: rgba(59, 130, 246, 0.15);
  --blue-mid: #60A5FA;
  --teal: #059669;
  --teal-bg: rgba(16, 185, 129, 0.15);
  --teal-mid: #34D399;
  --green: #16A34A;
  --green-bg: rgba(34, 197, 94, 0.15);
  --green-mid: #4ADE80;
  --amber: #D97706;
  --amber-bg: rgba(245, 158, 11, 0.15);
  --amber-mid: #FBBF24;
  --red: #DC2626;
  --red-bg: rgba(239, 68, 68, 0.15);
  --red-mid: #F87171;

  --accent-blue: var(--blue);
  --accent-blue-bg: var(--blue-bg);
  --accent-teal: var(--teal);
  --accent-teal-bg: var(--teal-bg);
  --accent-green: var(--green);
  --accent-green-bg: var(--green-bg);
  --accent-amber: var(--amber);
  --accent-amber-bg: var(--amber-bg);
  --accent-red: var(--red);
  --accent-red-bg: var(--red-bg);

  --grad-1: rgba(59, 130, 246, 0.08);
  --grad-2: rgba(16, 185, 129, 0.04);
  --grad-3: rgba(245, 158, 11, 0.02);

  --title-grad-1: #000000;
  --title-grad-2: #333333;

  --glass-b-2: rgba(0,0,0,0.04);
  --glass-b-3: rgba(0,0,0,0.08);
  --glass-b-4: rgba(0,0,0,0.08);
  --glass-b-6: rgba(0,0,0,0.1);
  --glass-b-8: rgba(0,0,0,0.4);
  --glass-b-15: rgba(0,0,0,0.05);
  --glass-b-100: rgba(0,0,0,0.08);

  --glass-w-02: rgba(0,0,0,0.02);
  --glass-w-03: rgba(0,0,0,0.03);
  --glass-w-04: rgba(0,0,0,0.04);
  --glass-w-05: rgba(0,0,0,0.05);
  --glass-w-08: rgba(0,0,0,0.08);
  --glass-w-15: rgba(0,0,0,0.08);
  --glass-w-100: rgba(0,0,0,0.06);

  --r: 8px;
  --r2: 14px;
  --r3: 20px;
  --rp: 24px;

  --mono: 'DM Mono', 'JetBrains Mono', monospace;
  --sans: 'DM Sans', 'Inter', sans-serif;

  --shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.04);
  --blur: blur(16px);
}

:root[data-theme="dark"],
:root[data-theme="aviation"] {
  /* Premium Dark Theme variables */
  --bg-color: #0B0E14;
  --surface: rgba(22, 26, 35, 0.6);
  --surface-hover: rgba(30, 36, 48, 0.7);
  --surface-active: rgba(40, 48, 64, 0.8);
  --border: rgba(255, 255, 255, 0.08);
  --border-highlight: rgba(255, 255, 255, 0.15);
  --border2: rgba(255, 255, 255, 0.04);

  --ink: #FFFFFF;
  --ink2: #A1A8B8;
  --ink3: #757E91;
  --ink4: #4E5669;

  --primary: #3B82F6;
  --primary-hover: #60A5FA;
  --primary-active: #2563EB;

  --blue: #3B82F6;
  --blue-bg: rgba(59, 130, 246, 0.15);
  --blue-mid: #60A5FA;
  --teal: #10B981;
  --teal-bg: rgba(16, 185, 129, 0.15);
  --teal-mid: #34D399;
  --green: #22C55E;
  --green-bg: rgba(34, 197, 94, 0.15);
  --green-mid: #4ADE80;
  --amber: #F59E0B;
  --amber-bg: rgba(245, 158, 11, 0.15);
  --amber-mid: #FBBF24;
  --red: #EF4444;
  --red-bg: rgba(239, 68, 68, 0.15);
  --red-mid: #F87171;

  --grad-1: rgba(59, 130, 246, 0.15);
  --grad-2: rgba(16, 185, 129, 0.1);
  --grad-3: rgba(245, 158, 11, 0.05);

  --title-grad-1: #fff;
  --title-grad-2: #a1a8b8;

  --glass-b-2: rgba(0,0,0,0.2);
  --glass-b-3: rgba(0,0,0,0.3);
  --glass-b-4: rgba(0,0,0,0.4);
  --glass-b-6: rgba(0,0,0,0.6);
  --glass-b-8: rgba(0,0,0,0.8);
  --glass-b-15: rgba(0,0,0,0.15);
  --glass-b-100: rgba(0,0,0,0.1);

  --glass-w-02: rgba(255,255,255,0.02);
  --glass-w-03: rgba(255,255,255,0.03);
  --glass-w-04: rgba(255,255,255,0.04);
  --glass-w-05: rgba(255,255,255,0.05);
  --glass-w-08: rgba(255,255,255,0.08);
  --glass-w-15: rgba(255,255,255,0.15);
  --glass-w-100: rgba(255,255,255,0.1);

  --shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.2);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --bg-color: #0B0E14;
    --surface: rgba(22, 26, 35, 0.6);
    --surface-hover: rgba(30, 36, 48, 0.7);
    --surface-active: rgba(40, 48, 64, 0.8);
    --border: rgba(255, 255, 255, 0.08);
    --border-highlight: rgba(255, 255, 255, 0.15);
    --border2: rgba(255, 255, 255, 0.04);

    --ink: #FFFFFF;
    --ink2: #A1A8B8;
    --ink3: #757E91;
    --ink4: #4E5669;

    --primary: #3B82F6;
    --primary-hover: #60A5FA;
    --primary-active: #2563EB;

    --grad-1: rgba(59, 130, 246, 0.15);
    --grad-2: rgba(16, 185, 129, 0.1);
    --grad-3: rgba(245, 158, 11, 0.05);

  --title-grad-1: #fff;
  --title-grad-2: #a1a8b8;

    --glass-b-2: rgba(0,0,0,0.2);
    --glass-b-3: rgba(0,0,0,0.3);
    --glass-b-4: rgba(0,0,0,0.4);
    --glass-b-6: rgba(0,0,0,0.6);
    --glass-b-8: rgba(0,0,0,0.8);
    --glass-b-15: rgba(0,0,0,0.15);
    --glass-b-100: rgba(0,0,0,0.1);

    --glass-w-02: rgba(255,255,255,0.02);
    --glass-w-03: rgba(255,255,255,0.03);
    --glass-w-04: rgba(255,255,255,0.04);
    --glass-w-05: rgba(255,255,255,0.05);
    --glass-w-08: rgba(255,255,255,0.08);
    --glass-w-15: rgba(255,255,255,0.15);
    --glass-w-100: rgba(255,255,255,0.1);

    --shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.2);
  }
}
/* Base */
/* touch-action: manipulation tells the browser this element only cares
   about tap/pan gestures, not double-tap-to-zoom — fixes double-tap
   zooming in the mobile browser and inside the installed/home-screen app,
   where the viewport meta tag's user-scalable=no isn't always honored
   consistently on its own. */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
body {
  font-family: var(--sans);
  background: var(--bg-color);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  min-height: 100vh;
  position: relative;
}

/* Background Gradients */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(circle at 15% 10%, var(--grad-1) 0%, transparent 40%),
    radial-gradient(circle at 85% 90%, var(--grad-2) 0%, transparent 40%),
    radial-gradient(circle at 85% 10%, var(--grad-3) 0%, transparent 40%);
  z-index: -1;
  pointer-events: none;
}

.app { max-width: 800px; margin: 0 auto; padding: 0 0 80px; }

/* ── Header ── */
.hdr { padding: 24px 20px 0; display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.hdr-icon { width: 48px; height: 48px; background: var(--glass-w-05); border: 1px solid var(--border); border-radius: var(--r2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; backdrop-filter: var(--blur); }
.hdr-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hdr-text h1 { font-size: 20px; font-weight: 700; letter-spacing: -0.5px; line-height: 1.2; background: linear-gradient(to right, var(--title-grad-1), var(--title-grad-2)); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.hdr-text p { font-size: 12px; color: var(--accent-blue); font-family: var(--sans); font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; margin-top: 2px; }

/* ── Settings Gear ── */
.hdr-gear { margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: var(--r2); background: var(--surface); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ink2); flex-shrink: 0; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); backdrop-filter: var(--blur); }
.hdr-gear:hover { background: var(--surface-hover); color: var(--ink); transform: translateY(-2px); border-color: var(--border-highlight); box-shadow: var(--shadow-sm); }
.hdr-gear:active { transform: translateY(0); }
.hdr-gear svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── Nav ── */
.nav { display: flex; gap: 6px; padding: 0 16px; margin-bottom: 24px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav-btn { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 16px; border: 1px solid transparent; background: transparent; border-radius: var(--r2); cursor: pointer; color: var(--ink3); font-family: var(--sans); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); min-width: 72px; }
.nav-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; transition: transform 0.2s; }
.nav-btn span { font-size: 11px; font-weight: 600; white-space: nowrap; }
.nav-btn:hover { color: var(--ink2); background: var(--glass-w-03); }
.nav-btn:hover svg { transform: translateY(-2px); }
.nav-btn.on { background: var(--surface); color: var(--primary); border: 1px solid var(--border-highlight); box-shadow: var(--shadow-sm); backdrop-filter: var(--blur); }
.nav-btn.on svg { stroke: var(--primary); }
.nav-btn:active { transform: scale(0.96); }

/* ── My Schedule (personal roster calendar) ── */
.sch-cal-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.sch-cal-title { font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -0.2px; }
.sch-cal-nav { display: flex; align-items: center; gap: 6px; }
.sch-cal-btn { width: 32px; height: 32px; border: 1px solid var(--border); border-radius: var(--r); background: var(--glass-w-03); color: var(--ink2); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; transition: all 0.2s; }
.sch-cal-btn:hover { background: var(--glass-w-05); color: var(--ink); border-color: var(--border-highlight); }
.sch-cal-today { font-size: 11px; font-weight: 700; color: var(--primary); background: var(--accent-blue-bg); border: 1px solid rgba(59, 130, 246, 0.3); border-radius: 20px; padding: 0 12px; height: 32px; cursor: pointer; transition: all 0.2s; }
.sch-cal-today:hover { background: rgba(59, 130, 246, 0.18); }

.sch-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 6px; }
.sch-dow span { text-align: center; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; color: var(--ink3); text-transform: uppercase; }

.sch-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.sch-cell { aspect-ratio: 1; min-height: 50px; border: 1px solid var(--border); border-radius: 10px; background: var(--glass-w-02); padding: 5px; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; overflow: hidden; font-family: var(--sans); transition: all 0.15s; }
.sch-cell:hover { border-color: var(--border-highlight); background: var(--glass-w-05); }
.sch-cell.blank { visibility: hidden; cursor: default; border: none; background: none; }
.sch-cell.today { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.sch-cell-num { font-size: 12px; font-weight: 700; color: var(--ink2); }
.sch-cell.today .sch-cell-num { color: var(--primary); }
.sch-cell-time { font-size: 9px; color: var(--ink3); font-weight: 600; font-family: var(--mono); }

.sch-tag { font-size: 9px; font-weight: 700; letter-spacing: 0.3px; padding: 2px 5px; border-radius: 5px; }
.sch-tag-duty { background: var(--accent-blue-bg); color: var(--accent-blue); }
.sch-tag-standby { background: var(--accent-amber-bg); color: var(--accent-amber); }
.sch-tag-off { background: var(--accent-green-bg); color: var(--accent-green); }
.sch-tag-leave { background: var(--accent-teal-bg); color: var(--accent-teal); }
.sch-tag-training { background: var(--glass-w-05); color: var(--ink2); }

.sch-legend { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--glass-w-05); }
.sch-legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink2); font-weight: 600; }
.sch-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ── Post-install reminders banner ── */
#remind-banner { padding: 0 16px; margin-bottom: 16px; }
#remind-banner-inner { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; background: var(--accent-blue-bg); border: 1px solid rgba(59, 130, 246, 0.3); border-radius: var(--r2); padding: 14px 16px; }
#remind-banner-icon { font-size: 20px; line-height: 1; flex-shrink: 0; }
#remind-banner-text { flex: 1; min-width: 180px; font-size: 12px; color: var(--ink2); line-height: 1.5; }
#remind-banner-text strong { display: block; color: var(--ink); font-size: 13px; margin-bottom: 2px; }
#remind-banner-actions { display: flex; gap: 8px; flex-shrink: 0; }
#remind-banner-actions button { white-space: nowrap; height: 32px; padding: 0 14px; border-radius: 8px; font-size: 11px; font-weight: 700; cursor: pointer; font-family: var(--sans); border: 1px solid transparent; transition: all 0.2s; }
#remind-banner-actions button:first-child { background: var(--primary); color: #fff; }
#remind-banner-actions button:first-child:hover { background: var(--primary-hover); }
#remind-banner-actions button:last-child { background: transparent; color: var(--ink2); border-color: var(--border); }
#remind-banner-actions button:last-child:hover { background: var(--glass-w-05); color: var(--ink); }

/* ── Dashboard header (Home tab) ── */
.dash-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 16px; }
.dash-greeting { font-size: 19px; font-weight: 700; letter-spacing: -0.4px; color: var(--ink); line-height: 1.25; }
.dash-date { font-size: 12px; font-weight: 500; color: var(--ink3); margin-top: 3px; }
.dash-badges { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Panels ── */
.pane { display: none; padding: 0 16px; animation: fadeUp 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; opacity: 0; transform: translateY(10px); }
.pane.on { display: block; }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

/* ── Cards (Glassmorphism) ── */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r3); padding: 20px; margin-bottom: 16px; box-shadow: var(--shadow); backdrop-filter: var(--blur); transition: transform 0.2s, border-color 0.2s; }
.card:hover { border-color: var(--border-highlight); }
.card-title { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink2); margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.card-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to right, var(--border-highlight), transparent); }

/* ── Form Grids ── */
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.g3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.g1 { margin-bottom: 12px; }

/* ── Inputs & Selects ── */
.fld { display: flex; flex-direction: column; gap: 6px; }
.fld label { font-size: 12px; font-weight: 600; color: var(--ink2); letter-spacing: 0.3px; }
.fld input, .fld select { height: 44px; border: 1px solid var(--border); border-radius: var(--r2); padding: 0 14px; font-size: 14px; background: var(--glass-b-2); color: var(--ink); font-family: var(--sans); outline: none; transition: all 0.2s; width: 100%; appearance: none; -webkit-appearance: none; box-shadow: inset 0 2px 4px var(--glass-b-100); }
.fld select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A1A8B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.fld input[type=time], .fld input[data-fmt=hhmm], .sec-input[data-fmt=hhmm] { font-family: var(--mono); font-size: 14px; letter-spacing: 1px; color: var(--ink); }
.fld input::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.5; cursor: pointer; }
.fld input:focus, .fld select:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15), inset 0 2px 4px var(--glass-b-100); background: var(--glass-b-3); }

/* ── Toggles ── */
.tog { display: flex; border: 1px solid var(--border); border-radius: var(--r2); overflow: hidden; height: 44px; background: var(--glass-b-2); box-shadow: inset 0 2px 4px var(--glass-b-100); padding: 2px; gap: 2px; }
.tg { flex: 1; border: none; background: transparent; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--ink3); font-family: var(--sans); padding: 0 10px; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); text-align: center; }
.tg.on { background: var(--surface-hover); color: var(--ink); box-shadow: var(--shadow-sm); }
.tg:hover:not(.on) { color: var(--ink2); background: var(--glass-w-02); }
.tg:active { transform: scale(0.98); }

/* ── Results ── */
.res { border-radius: var(--r3); padding: 20px; margin-top: 16px; border: 1px solid; backdrop-filter: var(--blur); box-shadow: var(--shadow-sm); }
.res.ok { background: var(--accent-green-bg); border-color: rgba(34, 197, 94, 0.3); }
.res.warn { background: var(--accent-amber-bg); border-color: rgba(245, 158, 11, 0.3); }
.res.err { background: var(--accent-red-bg); border-color: rgba(239, 68, 68, 0.3); }
.res.info { background: var(--accent-blue-bg); border-color: rgba(59, 130, 246, 0.3); }
.res.teal { background: var(--accent-teal-bg); border-color: rgba(16, 185, 129, 0.3); }

.rlbl { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.res.ok .rlbl { color: var(--accent-green); }
.res.warn .rlbl { color: var(--accent-amber); }
.res.err .rlbl { color: var(--accent-red); }
.res.info .rlbl { color: var(--accent-blue); }
.res.teal .rlbl { color: var(--accent-teal); }

.rgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 16px; }
.rm { background: var(--glass-b-2); border: 1px solid var(--glass-w-05); border-radius: var(--r2); padding: 12px 14px; }
.rml { font-size: 10px; color: var(--ink2); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; font-weight: 600; }
.rmv { font-size: 22px; font-weight: 600; font-family: var(--mono); line-height: 1.1; color: var(--ink); }
.rms { font-size: 11px; color: var(--ink3); margin-top: 4px; font-weight: 500; }

.rnotes { font-size: 13px; color: var(--ink2); margin-top: 12px; }
.rnotes li { margin-left: 18px; margin-top: 6px; line-height: 1.6; }

/* ── Checklists ── */
.chk { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.chk:last-child { border: none; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 8px currentColor; }
.dok { background: var(--accent-green); color: var(--accent-green); }
.derr { background: var(--accent-red); color: var(--accent-red); }
.dwarn { background: var(--accent-amber); color: var(--accent-amber); }
.dinfo { background: var(--accent-blue); color: var(--accent-blue); }
.dteal { background: var(--accent-teal); color: var(--accent-teal); }
.dmuted { background: var(--ink3); color: var(--ink3); }

.badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; border: 1px solid; }
.bok { background: var(--accent-green-bg); color: var(--accent-green); border-color: rgba(34, 197, 94, 0.3); }
.berr { background: var(--accent-red-bg); color: var(--accent-red); border-color: rgba(239, 68, 68, 0.3); }
.bwarn { background: var(--accent-amber-bg); color: var(--accent-amber); border-color: rgba(245, 158, 11, 0.3); }
.binfo { background: var(--accent-blue-bg); color: var(--accent-blue); border-color: rgba(59, 130, 246, 0.3); }

/* ── Hints ── */
.hint { background: rgba(59, 130, 246, 0.08); border-radius: var(--r2); padding: 12px 16px; font-size: 13px; color: var(--ink2); margin-bottom: 16px; line-height: 1.6; border-left: 3px solid var(--accent-blue); }

/* ── Flight Planner specific ── */
.timeline { margin: 16px 0; position: relative; }
.tl-track { position: relative; padding-left: 40px; }
.tl-line { position: absolute; left: 15px; top: 12px; bottom: 12px; width: 2px; background: var(--border); }
.tl-dot { display: none; }

.tl-seg { padding: 0 0 20px 10px; position: relative; }
.tl-seg:last-child { padding-bottom: 0; }
.tl-time { font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: 0.5px; }
.tl-label { font-size: 13px; color: var(--ink2); margin-top: 2px; }
.tl-dur { font-size: 11px; color: var(--ink3); font-family: var(--mono); background: var(--glass-w-05); border-radius: 6px; padding: 2px 8px; display: inline-block; margin-top: 6px; font-weight: 500; border: 1px solid var(--border); }

/* Sector Builder */
.sec-row { display: flex; align-items: center; gap: 10px; padding: 10px; background: var(--glass-b-15); border-radius: var(--r2); margin-bottom: 10px; border: 1px solid var(--border); }
.sec-num { width: 24px; height: 24px; background: var(--surface-hover); color: var(--ink); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; border: 1px solid var(--border-highlight); }
.sec-input { height: 38px; border: 1px solid var(--border); border-radius: var(--r); padding: 0 12px; font-size: 13px; background: var(--glass-b-3); color: var(--ink); font-family: var(--mono); outline: none; flex: 1; min-width: 0; transition: all 0.2s; }
.sec-input:focus { border-color: var(--primary); }
.sec-del { width: 38px; height: 38px; border: 1px solid var(--border); border-radius: var(--r); background: rgba(239, 68, 68, 0.1); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--accent-red); flex-shrink: 0; font-size: 18px; transition: all 0.2s; font-family: var(--mono); }
.sec-del:hover { background: var(--accent-red); color: #fff; }

/* Text-label delete action (e.g. Logbook's "Remove leg") — .sec-del above is
   a fixed 38x38 icon square sized for a single "×" glyph and overflows badly
   with a text label, so this is a separate full-width variant. */
.leg-del { width: 100%; height: 36px; border: 1px solid rgba(239, 68, 68, 0.3); border-radius: var(--r); background: rgba(239, 68, 68, 0.08); cursor: pointer; font-size: 12px; font-weight: 600; color: var(--accent-red); font-family: var(--sans); transition: all 0.2s; }
.leg-del:hover { background: var(--accent-red); color: #fff; border-color: var(--accent-red); }

/* Neutral full-width dismiss action (e.g. "Cancel" beneath a Save button).
   .sec-del above is a fixed 38x38 icon square in the monospace font, meant
   for a single "×" glyph — using it for a text label made Cancel visibly
   mismatched next to its sans-serif, taller Save button. */
.cancel-btn { width: 100%; height: 38px; border: 1px solid var(--border-highlight); border-radius: var(--r2); background: var(--glass-b-2); color: var(--ink); cursor: pointer; font-size: 12px; font-weight: 600; font-family: var(--sans); transition: all 0.2s; }
.cancel-btn:hover { background: var(--glass-w-05); border-color: var(--border-highlight); }

/* A primary action sitting next to .cancel-btn in a .g2 pair (e.g. the
   Roster push panel's "Load Flight Details") needs .calc-save-btn's colour
   without its 52px standalone height, or it towers over Cancel the same way
   .sec-del once did in reverse. */
.push-load-btn { width: 100%; height: 38px; background: linear-gradient(135deg, var(--primary), #2563EB); color: #fff; border: none; border-radius: var(--r2); font-size: 12px; font-weight: 600; cursor: pointer; font-family: var(--sans); transition: all 0.2s; box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3); }
.push-load-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4); }

/* ── Crew Documents (quick-fill chips + document rows) ── */
.doc-quick-btn { padding: 8px 14px; border: 1px solid var(--border); border-radius: 20px; background: var(--glass-w-03); color: var(--ink2); font-size: 12px; font-weight: 600; cursor: pointer; font-family: var(--sans); transition: all 0.2s; }
.doc-quick-btn:hover { background: var(--glass-w-05); color: var(--ink); }
.doc-quick-btn.on { background: var(--accent-blue-bg); border-color: rgba(59, 130, 246, 0.3); color: var(--accent-blue); }

.doc-item { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.doc-item:last-child { border: none; padding-bottom: 0; }
.doc-item-info { flex: 1; min-width: 140px; }
.doc-item-label { font-size: 13px; font-weight: 700; color: var(--ink); }
.doc-item-meta { font-size: 11px; color: var(--ink3); margin-top: 2px; }

.add-sec { height: 44px; border: 1px dashed var(--border-highlight); border-radius: var(--r2); background: var(--glass-w-02); cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink2); font-family: var(--sans); width: 100%; transition: all 0.2s; }
.add-sec:hover { background: var(--glass-w-05); border-style: solid; color: var(--ink); }

/* Status Strip */
.strip { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; border: 1px solid; backdrop-filter: var(--blur); transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease; }
.pill-ok { background: var(--accent-green-bg); border-color: rgba(34, 197, 94, 0.3); color: var(--accent-green); }
.pill-err { background: var(--accent-red-bg); border-color: rgba(239, 68, 68, 0.3); color: var(--accent-red); }
.pill-warn { background: var(--accent-amber-bg); border-color: rgba(245, 158, 11, 0.3); color: var(--accent-amber); }
.pill-info { background: var(--accent-blue-bg); border-color: rgba(59, 130, 246, 0.3); color: var(--accent-blue); }

/* Ref Tables */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r2); border: 1px solid var(--border); background: var(--glass-b-2); }
table.rt { width: 100%; border-collapse: collapse; font-size: 13px; }
table.rt th { background: var(--glass-w-05); padding: 12px 10px; font-weight: 600; text-align: center; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--ink2); }
table.rt th:first-child { text-align: left; }
table.rt th:last-child { border-right: none; }
table.rt td { padding: 10px; border-bottom: 1px solid var(--glass-w-03); border-right: 1px solid var(--glass-w-03); text-align: center; font-family: var(--mono); color: var(--ink); }
table.rt tr:last-child td { border-bottom: none; }
table.rt td:last-child { border-right: none; }
table.rt td:first-child { text-align: left; font-family: var(--sans); font-weight: 500; color: var(--ink2); }
table.rt tr:hover td { background: var(--glass-w-02); }
table.rt td.hl { background: rgba(245, 158, 11, 0.15); font-weight: 700; color: var(--accent-amber); }
.sec-label { font-size: 12px; font-weight: 700; color: var(--ink2); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }

/* Calculate Button */
.calc-save-btn { width: 100%; height: 52px; background: linear-gradient(135deg, var(--primary), #2563EB); color: #fff; border: none; border-radius: var(--r2); font-size: 14px; font-weight: 600; cursor: pointer; font-family: var(--sans); transition: all 0.3s; margin: 16px 0; display: flex; align-items: center; justify-content: center; gap: 10px; letter-spacing: 0.5px; box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3); }
.calc-save-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4); }
.calc-save-btn:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3); }
.calc-save-btn.saved { background: linear-gradient(135deg, var(--accent-green), #16a34a); box-shadow: 0 4px 16px rgba(34, 197, 94, 0.3); }
.calc-save-btn svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* Tools Grid */
.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }

/* ── Manpower / FTE Calculator ── */
.mp-grid-input { width: 100%; min-width: 52px; height: 32px; border: 1px solid var(--border); border-radius: 6px; background: var(--glass-b-2); color: var(--ink); font-family: var(--mono); font-size: 12px; text-align: center; padding: 0 4px; }
.mp-grid-input:focus { border-color: var(--primary); outline: none; }
.mp-overhead-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.mp-overhead-row input[type=text] { flex: 2; height: 36px; border: 1px solid var(--border); border-radius: var(--r); background: var(--glass-b-2); color: var(--ink); padding: 0 10px; font-size: 13px; font-family: var(--sans); }
.mp-overhead-row input[type=number] { flex: 1; height: 36px; border: 1px solid var(--border); border-radius: var(--r); background: var(--glass-b-2); color: var(--ink); padding: 0 10px; font-size: 13px; font-family: var(--mono); text-align: center; }
table.rt.mp-grid th, table.rt.mp-grid td { padding: 6px 4px; font-size: 11px; }
table.rt.mp-grid td:first-child { font-size: 11px; white-space: nowrap; text-align: left; }

/* ── Mandays / Block Hours: day-of-week picker ── */
.dow-picker { display: flex; gap: 4px; flex-wrap: wrap; }
.dow-btn { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 8px; background: var(--glass-b-2); color: var(--ink3); font-size: 11px; font-weight: 700; cursor: pointer; font-family: var(--sans); transition: all 0.15s; }
.dow-btn.on { background: var(--primary); color: #fff; border-color: var(--primary); }
.dow-btn:hover:not(.on) { background: var(--glass-w-05); color: var(--ink); }

/* ── Rotation card (mirrors sec-row visual language) ── */
.rot-card { background: var(--glass-b-15); border: 1px solid var(--border); border-radius: var(--r2); padding: 14px; margin-bottom: 12px; }
.rot-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.rot-num { width: 24px; height: 24px; background: var(--surface-hover); color: var(--ink); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; border: 1px solid var(--border-highlight); }
.rot-del { margin-left: auto; width: 32px; height: 32px; border: 1px solid var(--border); border-radius: var(--r); background: rgba(239, 68, 68, 0.1); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--accent-red); font-size: 16px; flex-shrink: 0; }
.rot-del:hover { background: var(--accent-red); color: #fff; }

/* ── Collapsible daily breakdown ── */
.mandays-detail { display: none; margin-top: 12px; }
.mandays-detail.open { display: block; }
.detail-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--primary); cursor: pointer; background: none; border: none; padding: 8px 0; font-family: var(--sans); }
.detail-toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform 0.2s; }
.detail-toggle.open svg { transform: rotate(180deg); }

/* ── Editable summary value ── */
.edit-val { width: 90px; height: 34px; border: 1px solid var(--border); border-radius: var(--r); background: var(--glass-b-2); color: var(--ink); font-family: var(--mono); font-size: 13px; text-align: center; padding: 0 6px; }
.edit-val:focus { border-color: var(--primary); outline: none; }
.reset-val { width: 28px; height: 28px; border: 1px solid var(--border); border-radius: var(--r); background: var(--glass-w-03); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--ink3); font-size: 13px; margin-left: 6px; }
.reset-val:hover { color: var(--ink); background: var(--glass-w-05); }

/* ── Collapsible section guide (info button + hint) ──
   Sits inside a .card-title, right after the label text and before its
   ::after divider rule — the button toggles the .info-hint that follows
   the title, which stays fully .hint-styled (background/border-left/etc.)
   but starts hidden instead of always taking up space. Colour is
   deliberately the same blue as .pill-info/.dok's info state, not
   red/amber, so it doesn't read as a warning next to the app's actual
   derr/dwarn indicators. */
.info-btn { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(59, 130, 246, 0.35); background: var(--accent-blue-bg); color: var(--accent-blue); font-size: 12px; font-weight: 800; font-family: var(--sans); line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; transition: all 0.2s; }
.info-btn:hover, .info-btn.on { background: var(--accent-blue); color: #fff; }
.info-hint { display: none; }
.info-hint.show { display: block; }
.tool-btn { background: var(--glass-w-03); border: 1px solid var(--border); border-radius: var(--r2); padding: 16px; cursor: pointer; text-align: left; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; gap: 10px; width: 100%; position: relative; overflow: hidden; }
.tool-btn::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, var(--glass-w-05), transparent); opacity: 0; transition: opacity 0.2s; }
.tool-btn:hover { border-color: var(--border-highlight); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.tool-btn:hover::before { opacity: 1; }
.tool-btn:active { transform: translateY(0); }
.tool-btn-icon { width: 36px; height: 36px; background: var(--glass-w-100); border-radius: var(--r); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--ink); border: 1px solid var(--glass-w-100); }
.tool-btn-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tool-btn-name { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.2; letter-spacing: 0.3px; }
.tool-btn-desc { font-size: 11px; color: var(--ink3); line-height: 1.5; font-weight: 500; }

/* Active Config Rows */
.cfg-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--glass-w-05); }
.cfg-row:last-child { border: none; padding-bottom: 0; }
.cfg-label { font-size: 13px; color: var(--ink2); font-weight: 500; }
.cfg-val { font-size: 13px; font-weight: 600; color: var(--ink); font-family: var(--mono); background: var(--glass-w-05); padding: 4px 10px; border-radius: 6px; }
.cs-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 20px; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; background: var(--accent-amber-bg); color: var(--accent-amber); border: 1px solid rgba(245, 158, 11, 0.3); text-transform: uppercase; }

/* Recent Calculations */
.rc-item { background: var(--glass-w-02); border: 1px solid var(--border); border-radius: var(--r2); margin-bottom: 10px; overflow: hidden; cursor: pointer; transition: all 0.2s; }
.rc-item:hover { border-color: var(--border-highlight); background: var(--glass-w-04); }
.rc-item:last-child { margin-bottom: 0; }
.rc-item.open { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.rc-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.rc-tab-icon { width: 32px; height: 32px; border-radius: var(--r); background: var(--glass-w-100); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--ink); }
.rc-tab-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rc-meta { flex: 1; min-width: 0; }
.rc-title { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.rc-time { font-size: 11px; color: var(--ink3); font-family: var(--mono); margin-top: 4px; font-weight: 500; }
.rc-chevron { color: var(--ink3); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); flex-shrink: 0; }
.rc-chevron svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.rc-body { display: none; padding: 0 16px 16px; animation: slideDown 0.3s ease forwards; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.rc-body .res { margin-top: 0; box-shadow: none; border: 1px solid var(--glass-w-05); }
.rc-body .card { margin-top: 0; margin-bottom: 12px; box-shadow: none; border-color: var(--glass-w-05); }
.rc-item.open .rc-chevron { transform: rotate(180deg); color: var(--primary); }
.rc-item.open .rc-body { display: block; }
.rc-empty { text-align: center; padding: 40px 20px; color: var(--ink3); }
.rc-empty-icon { font-size: 40px; margin-bottom: 16px; opacity: 0.5; filter: grayscale(1); }
.rc-empty p { font-size: 13px; line-height: 1.6; font-weight: 500; }

/* ══ MODALS / OVERLAYS ══ */
#sec-overlay, #stg-overlay { position: fixed; inset: 0; background: var(--glass-b-8); z-index: 9999; display: none; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: opacity 0.3s ease; }
/* Defaults to hidden (the shared display:none above) like every other overlay
   in the app — openDisclaimer()/closeDisclaimer() in app.js set style.display
   directly when actually opening/closing it. A `:not(.hide)`-style "visible
   unless explicitly hidden" rule used to live here, which made this render on
   first paint before app.js had even run far enough to hide it — a real,
   visible flash on every load. .hide is now only ever the fade-OUT transient
   (opacity/pointer-events) while display:none finishes taking over. */
#sec-overlay.hide { opacity: 0; pointer-events: none; }
#stg-overlay.open { display: flex; }

#sec-modal, #stg-modal { background: var(--bg-color); border: 1px solid var(--border-highlight); border-radius: var(--rp); max-width: 500px; width: 100%; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 64px var(--glass-b-6); position: relative; }
#sec-modal::before, #stg-modal::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 100px; background: linear-gradient(to bottom, var(--glass-w-03), transparent); pointer-events: none; }

/* Security Modal */
.spm-head { padding: 24px 24px 16px; flex-shrink: 0; text-align: center; border-bottom: 1px solid var(--border); }
.spm-icon { width: 48px; height: 48px; background: var(--glass-w-100); border-radius: var(--r2); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; color: var(--ink); }
.spm-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spm-head h2 { font-size: 20px; font-weight: 700; color: var(--ink); margin: 0 0 6px; }
.spm-head p { font-size: 12px; color: var(--ink3); margin: 0; font-weight: 500; letter-spacing: 0.5px; }
.spm-body { padding: 16px 24px; overflow-y: auto; flex: 1; }
.spm-body ul { list-style: none; padding: 0; margin: 0; }
.spm-body li { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--glass-w-05); font-size: 13px; color: var(--ink2); line-height: 1.6; }
.spm-body li:last-child { border: none; }
.spm-ico { width: 36px; height: 36px; border-radius: var(--r2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.spm-ico svg { width: 18px; height: 18px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spm-foot { padding: 20px 24px 24px; border-top: 1px solid var(--border); flex-shrink: 0; background: var(--glass-b-2); }
.spm-foot p { font-size: 12px; color: var(--ink3); margin: 0 0 16px; line-height: 1.6; text-align: center; }
#sec-accept { width: 100%; height: 52px; background: linear-gradient(135deg, var(--primary), #2563EB); color: #fff; border: none; border-radius: var(--r2); font-size: 15px; font-weight: 600; cursor: pointer; font-family: var(--sans); transition: all 0.2s; letter-spacing: 0.5px; box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3); }
#sec-accept:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4); }
#sec-accept:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3); }

/* Settings Modal */
.stg-head { padding: 20px 24px; border-bottom: 1px solid var(--border); flex-shrink: 0; display: flex; align-items: center; gap: 16px; }
.stg-head-icon { width: 40px; height: 40px; background: var(--glass-w-100); border-radius: var(--r2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--ink); }
.stg-head-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stg-head-text { flex: 1; }
.stg-head-text h2 { font-size: 18px; font-weight: 700; color: var(--ink); }
.stg-head-text p { font-size: 12px; color: var(--ink3); margin-top: 2px; font-weight: 500; }
.stg-close { width: 36px; height: 36px; border: 1px solid var(--border); border-radius: var(--r2); background: var(--glass-w-05); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ink2); font-size: 18px; flex-shrink: 0; transition: all 0.2s; }
.stg-close:hover { background: var(--glass-w-100); color: var(--ink); }
.stg-body { padding: 20px 24px; overflow-y: auto; flex: 1; }
.stg-section { margin-bottom: 28px; }
.stg-section:last-child { margin-bottom: 0; }
.stg-sec-title { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink3); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.stg-sec-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to right, var(--glass-w-100), transparent); }
.stg-opt { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r2); cursor: pointer; transition: all 0.2s; background: var(--glass-w-02); margin-bottom: 8px; }
.stg-opt:hover { background: var(--glass-w-05); border-color: var(--border-highlight); }
.stg-opt.on { border-color: var(--primary); background: rgba(59, 130, 246, 0.05); box-shadow: 0 0 0 1px var(--primary); }
.stg-opt.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.stg-opt-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border-highlight); display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--glass-b-3); transition: all 0.2s; }
.stg-opt.on .stg-opt-dot { border-color: var(--primary); background: var(--primary); }
.stg-opt.on .stg-opt-dot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.stg-opt-info { flex: 1; min-width: 0; }
.stg-opt-name { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.stg-opt-desc { font-size: 12px; color: var(--ink3); margin-top: 4px; line-height: 1.4; }

.stg-theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stg-theme-btn { height: 48px; border: 1px solid var(--border); border-radius: var(--r2); background: var(--glass-w-02); cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink2); font-family: var(--sans); transition: all 0.2s; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 8px; }
.stg-theme-btn:hover:not(.cs) { background: var(--glass-w-05); border-color: var(--border-highlight); color: var(--ink); }
.stg-theme-btn.on { border-color: var(--primary); background: rgba(59, 130, 246, 0.05); color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.stg-theme-btn.cs { opacity: 0.5; cursor: not-allowed; }
.stg-cs-tag { position: absolute; top: 4px; right: 6px; font-size: 9px; font-weight: 700; letter-spacing: 0.5px; color: var(--accent-amber); text-transform: uppercase; background: rgba(245, 158, 11, 0.1); padding: 2px 6px; border-radius: 10px; }

  .utc-hint { background: var(--accent-blue-bg); border: 1px solid rgba(59, 130, 246, 0.3); border-radius: var(--r2); padding: 12px 16px; font-size: 12px; color: var(--accent-blue); margin-top: 12px; display: none; line-height: 1.5; }
  .utc-hint.show { display: block; }
.stg-foot { padding: 20px 24px; border-top: 1px solid var(--border); flex-shrink: 0; background: var(--glass-b-2); }
.stg-foot p { font-size: 12px; color: var(--ink3); margin-bottom: 16px; line-height: 1.5; text-align: center; }
#stg-apply { width: 100%; height: 52px; background: linear-gradient(135deg, var(--primary), #2563EB); color: #fff; border: none; border-radius: var(--r2); font-size: 15px; font-weight: 600; cursor: pointer; font-family: var(--sans); transition: all 0.2s; letter-spacing: 0.5px; box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3); }
#stg-apply:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4); }
#stg-apply:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3); }

/* Responsive Adjustments */
@media(max-width: 640px) {
  .app { padding: 0 0 100px; }
  .pane { padding: 0 12px; }
  .hdr { padding: 20px 16px 0; margin-bottom: 20px; }
  .hdr-text h1 { font-size: 18px; }

  .nav { padding: 0 12px; gap: 4px; }
  .nav-btn { min-width: 64px; padding: 10px 12px; }

  .card { padding: 16px; border-radius: 16px; }

  .g2 { grid-template-columns: 1fr; gap: 10px; margin-bottom: 10px; }
  .g3 { grid-template-columns: 1fr; gap: 10px; margin-bottom: 10px; }
  .g1 { margin-bottom: 10px; }

  .rgrid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .rmv { font-size: 18px; }

  .fld input, .fld select { height: 48px; font-size: 15px; }
  .tog { height: 48px; }
  .tg { font-size: 14px; }

  .sec-row { flex-wrap: wrap; gap: 8px; }
  .sec-input { min-width: 100px; }

  .sch-grid { gap: 3px; }
  .sch-cell { min-height: 40px; padding: 3px; border-radius: 8px; }
  .sch-cell-num { font-size: 11px; }
  .sch-tag { font-size: 8px; padding: 1px 4px; }
  .sch-cell-time { display: none; }

  .tbl-wrap { margin: 0 -16px; border-radius: 0; border-left: none; border-right: none; }
  table.rt { min-width: 450px; }
  table.rt th:first-child, table.rt td:first-child { padding-left: 16px; }
  table.rt th:last-child, table.rt td:last-child { padding-right: 16px; }

  .res { padding: 16px; }
}

@media(max-width: 360px) {
  .nav-btn span { font-size: 10px; }
  .nav-btn { min-width: 56px; }
  .rmv { font-size: 16px; }
  .hdr-text h1 { font-size: 16px; }
}

/* ── First-visit onboarding ──────────────────────────────────────────────
   Reuses the security popup's shell (.spm-head / .spm-foot) so the two read
   as one family; only the role picker and the agreement row are new. */
#onb-overlay { position: fixed; inset: 0; background: var(--glass-b-8); z-index: 10000; display: none; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: opacity 0.3s ease; }
/* Same fix as #sec-overlay above: defaults to hidden, shown only by the
   init IIFE at the bottom of app.js explicitly setting style.display. */
#onb-overlay.hide { opacity: 0; pointer-events: none; }
#onb-modal { background: var(--bg-color); border: 1px solid var(--border-highlight); border-radius: var(--rp); max-width: 500px; width: 100%; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 64px var(--glass-b-6); position: relative; }

.onb-body { padding: 20px 24px 8px; overflow-y: auto; flex: 1; }
.onb-q { font-size: 13px; font-weight: 600; color: var(--ink); margin: 0 0 12px; }

.onb-roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.onb-role { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; background: var(--glass-b-2); border: 1px solid var(--border); border-radius: var(--r2); cursor: pointer; font-family: var(--sans); color: var(--ink2); transition: all 0.18s; text-align: center; }
.onb-role svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.onb-role:hover { border-color: var(--border-highlight); color: var(--ink); }
.onb-role.on { background: var(--blue-bg); border-color: var(--blue); color: var(--blue); }
.onb-role-name { font-size: 12px; font-weight: 600; line-height: 1.2; }
.onb-role-sub { font-size: 10px; opacity: 0.75; line-height: 1.2; }

.onb-note { font-size: 11px; color: var(--ink3); line-height: 1.6; margin: 12px 0 4px; }

/* The agreement row carries the legal wording itself — deliberately on the
   label rather than as a caption beneath, so ticking the box IS the consent. */
.onb-check { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; cursor: pointer; text-align: left; }
.onb-check input { width: 18px; height: 18px; margin: 1px 0 0; flex-shrink: 0; cursor: pointer; accent-color: var(--blue); }
.onb-check span { font-size: 12px; color: var(--ink2); line-height: 1.6; }
.onb-check a { color: var(--blue); text-decoration: underline; }

#onb-takeoff { width: 100%; height: 52px; background: linear-gradient(135deg, var(--primary), #2563EB); color: #fff; border: none; border-radius: var(--r2); font-size: 15px; font-weight: 600; cursor: pointer; font-family: var(--sans); transition: all 0.2s; letter-spacing: 0.5px; box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3); }
#onb-takeoff:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4); }
#onb-takeoff:active:not(:disabled) { transform: translateY(0); box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3); }
#onb-takeoff:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; transform: none; }

/* The disclaimer is opened FROM the onboarding modal, so it has to sit above
   it — the shared #sec-overlay/#stg-overlay rule above puts it at 9999, below
   onboarding's 10000, which would open it behind the thing that launched it. */
#sec-overlay { z-index: 10001; }

/* Close control on the now-dismissable disclaimer popup. */
.spm-close { position: absolute; top: 14px; right: 16px; width: 30px; height: 30px; border: none; background: transparent; color: var(--ink3); font-size: 24px; line-height: 1; cursor: pointer; border-radius: var(--r2); font-family: var(--sans); transition: all 0.18s; }
.spm-close:hover { background: var(--glass-b-2); color: var(--ink); }

@media (max-width: 380px) {
  .onb-roles { grid-template-columns: 1fr; }
  .onb-role { flex-direction: row; justify-content: flex-start; gap: 10px; padding: 10px 12px; text-align: left; }
  .onb-role-sub { margin-left: auto; }
}

/* ── Printable logbook ──────────────────────────────────────────────────
   #lb-print is built on demand by lbExportPDF() and is invisible on screen;
   printing hides the whole app and reveals only this sheet. Using the
   browser's own print pipeline means no PDF library to vendor, and on
   Android the Capacitor shell routes it to the system print service where
   "Save as PDF" already exists. */
#lb-print { display: none; }

@media print {
  /* Everything the app draws on screen is chrome as far as a logbook page is
     concerned — nav, cards, modals, the lot. */
  body > *:not(#lb-print) { display: none !important; }

  #lb-print {
    display: block;
    color: #000;
    background: #fff;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 9pt;
  }

  @page { size: A4 landscape; margin: 12mm; }

  .lbp-head { border-bottom: 2px solid #000; padding-bottom: 6px; margin-bottom: 10px; }
  .lbp-head h1 { font-size: 15pt; margin: 0 0 3px; letter-spacing: 0.5px; }
  .lbp-meta { font-size: 8pt; color: #444; }

  .lbp-table { width: 100%; border-collapse: collapse; }
  .lbp-table th, .lbp-table td { border: 1px solid #666; padding: 3px 5px; text-align: left; }
  .lbp-table th { background: #e8e8e8; font-size: 8pt; text-transform: uppercase; letter-spacing: 0.3px; }
  .lbp-table td.n { text-align: right; font-variant-numeric: tabular-nums; }
  .lbp-table sup { font-size: 6pt; }

  /* Repeat the header on every sheet, and never split a duty across a page
     break — a half-row is unreadable in a printed record. */
  .lbp-table thead { display: table-header-group; }
  .lbp-table tr { page-break-inside: avoid; }

  .lbp-tot td { font-weight: bold; border-top: 2px solid #000; background: #f2f2f2; }

  .lbp-foot { margin-top: 10px; font-size: 7.5pt; color: #333; font-style: italic; }
}