:root {
    color-scheme: dark;
    --background: #050505;
    --surface: #0d0d0d;
    --surface-raised: #151515;
    --text: #f7f7f5;
    --muted: #aaa9a5;
    --accent: #ff3b30;
    --accent-strong: #d91f16;
    --border: #2b2b2b;
    --max-width: 1160px;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--background);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
    line-height: 1.5;
}

a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid var(--border);
    background: rgba(5, 5, 5, 0.88);
    backdrop-filter: blur(18px);
}

.nav {
    width: min(calc(100% - 32px), var(--max-width));
    min-height: 64px;
    margin: auto;
    display: flex;
    align-items: center;
    gap: 20px;
}

.brand { display: flex; align-items: center; gap: 10px; font-weight: 750; }
.brand-mark { color: var(--accent); font-size: 1.35rem; }
.nav-links { margin-left: auto; display: flex; align-items: center; gap: 22px; }

.button {
    min-height: 44px;
    padding: 10px 17px;
    border: 1px solid var(--border);
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--surface-raised);
    color: var(--text);
    cursor: pointer;
    font-weight: 680;
}

.button:hover { border-color: #565656; }
.button-disabled { cursor: default; opacity: .72; }
.button-disabled:hover { border-color: var(--border); }
.button:disabled, button:disabled { cursor: wait; opacity: .55; }
.button.primary { border-color: var(--accent); background: var(--accent); color: #000; }
.button.primary:hover { background: #ff5a51; }
.button:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

main { overflow: hidden; }
.container { width: min(calc(100% - 32px), var(--max-width)); margin: auto; }

.hero {
    min-height: calc(100svh - 64px);
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    align-items: center;
    gap: clamp(38px, 7vw, 96px);
    padding-block: 76px;
}

.eyebrow { color: var(--accent); font-weight: 760; letter-spacing: .08em; text-transform: uppercase; font-size: .78rem; }
h1 { margin: 12px 0 18px; max-width: 800px; font-size: clamp(3.2rem, 8vw, 7.2rem); line-height: .92; letter-spacing: -.065em; }
.hero-copy { max-width: 650px; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.3rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.device {
    max-width: 390px;
    margin: auto;
    padding: 14px;
    border: 1px solid #3b3b3b;
    border-radius: 42px;
    background: #101010;
    box-shadow: 0 34px 90px rgba(255, 59, 48, .14);
}

.device-screen { min-height: 610px; padding: 25px 18px; border-radius: 31px; background: #000; border: 1px solid #252525; }
.device-title { margin: 18px 0; font-size: 1.55rem; font-weight: 760; }
.flight-card, .check-card { border: 1px solid #4c1210; border-radius: 15px; padding: 16px; margin-top: 12px; }
.route { display: flex; justify-content: space-between; color: var(--accent); font-size: 1.7rem; font-weight: 780; }
.flight-meta, .check-meta { color: #d84b45; font-size: .9rem; }
.progress { height: 5px; margin-top: 14px; border-radius: 99px; background: #32100e; overflow: hidden; }
.progress > span { display: block; width: 72%; height: 100%; background: var(--accent); }

.section { padding-block: 96px; }
.section-heading { max-width: 700px; margin-bottom: 38px; }
.section h2 { margin: 8px 0 12px; font-size: clamp(2.2rem, 5vw, 4.4rem); line-height: 1; letter-spacing: -.045em; }
.section-heading p { color: var(--muted); font-size: 1.1rem; }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.feature-card { min-height: 220px; padding: 24px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.feature-icon { color: var(--accent); font-size: 1.6rem; }
.feature-card h3 { margin: 36px 0 8px; font-size: 1.2rem; }
.feature-card p { margin: 0; color: var(--muted); }

.platforms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.platform { padding: 24px; border-top: 1px solid var(--accent); background: linear-gradient(180deg, rgba(255,59,48,.08), transparent); }
.platform strong { display: block; font-size: 1.25rem; }
.platform span { color: var(--muted); }

.cta { margin-block: 80px; padding: clamp(30px, 7vw, 72px); border: 1px solid #4c1210; border-radius: 24px; background: radial-gradient(circle at top right, rgba(255,59,48,.18), transparent 45%), var(--surface); }
.cta h2 { max-width: 720px; }

.auth-shell { min-height: calc(100svh - 64px); display: grid; place-items: center; padding: 42px 16px; }
.auth-card { width: min(100%, 480px); padding: 32px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); }
.auth-card h1 { margin: 4px 0 12px; font-size: 2.5rem; line-height: 1; letter-spacing: -.04em; }
.auth-card p { color: var(--muted); }
.auth-card .button { width: 100%; margin-top: 12px; }
.status { min-height: 24px; color: var(--muted); }
.status.error { color: var(--accent); }

.admin-shell { padding-block: 54px 90px; }
.admin-header { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 34px; }
.admin-header h1 { margin: 0; font-size: clamp(2.2rem, 5vw, 4rem); }
.admin-header .button { margin-left: auto; }
.admin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.admin-card { padding: 22px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.admin-card span { color: var(--muted); }
.admin-card strong { display: block; margin-top: 12px; color: var(--accent); font-size: 2rem; }

footer { border-top: 1px solid var(--border); color: var(--muted); }
.footer-inner { min-height: 90px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 18px; }
.footer-links a:hover, .legal-page a { color: var(--accent); }

@media (max-width: 820px) {
    .nav-links a:not(.button) { display: none; }
    .hero { grid-template-columns: 1fr; min-height: auto; }
    .device { width: min(100%, 360px); }
    .feature-grid, .platforms, .admin-grid { grid-template-columns: 1fr; }
    .feature-card { min-height: auto; }
    .footer-inner { flex-direction: column; align-items: flex-start; padding-block: 25px; }
}

@media (prefers-reduced-motion: no-preference) {
    .feature-card, .button { transition: transform .18s ease, border-color .18s ease, background .18s ease; }
    .feature-card:hover { transform: translateY(-3px); border-color: #4a4a4a; }
}
@media (prefers-reduced-motion: reduce) { .spinner,.icon-button.is-loading { animation-duration: 2s; } }

.admin-body { min-height: 100svh; }
.admin-badge { padding: 3px 8px; border-radius: 6px; background: var(--accent); color: #000; font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.icon-button { width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); cursor: pointer; font-size: 1.3rem; }
.admin-app { width: min(100%, 1500px); min-height: calc(100svh - 65px); margin: auto; display: grid; grid-template-columns: 210px minmax(0, 1fr); overflow: visible; }
.admin-nav { position: sticky; top: 65px; height: calc(100svh - 65px); padding: 24px 14px; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 5px; }
.admin-tab { min-height: 45px; padding: 8px 12px; border: 0; border-radius: 10px; display: flex; align-items: center; gap: 12px; background: transparent; color: var(--muted); text-align: left; cursor: pointer; }
.admin-tab span { width: 22px; color: var(--accent); font-size: 1.1rem; text-align: center; }.admin-tab b { font-weight: 650; }.admin-tab:hover,.admin-tab.active { background: var(--surface-raised); color: var(--text); }
.admin-content { min-width: 0; padding: clamp(22px, 4vw, 52px); }.workspace-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 30px; }.workspace-header h1 { margin: 2px 0; font-size: clamp(2rem, 4vw, 3.7rem); }.view-description { max-width: 650px; margin: 8px 0 0; color: var(--muted); }.workspace-meta { text-align: right; color: var(--muted); }.workspace-meta p { margin: 4px 0; }.workspace-meta small { display: block; }
.metric-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }.metric,.panel { padding: 20px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); }.metric span { color: var(--muted); font-size: .84rem; }.metric strong { display: block; margin-top: 8px; color: var(--accent); font-size: 1.65rem; }.panel { margin-top: 16px; }.panel h2 { margin: 0; }.panel p { color: var(--muted); }
.quick-links { margin-top: 18px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }.quick-link { min-height: 92px; padding: 15px; border: 1px solid var(--border); border-radius: 12px; display: grid; grid-template-columns: 28px 1fr; column-gap: 10px; align-items: center; background: #090909; color: var(--text); text-align: left; cursor: pointer; }.quick-link > span { grid-row: 1 / 3; color: var(--accent); font-size: 1.3rem; }.quick-link strong,.quick-link small { display: block; }.quick-link small { color: var(--muted); }.quick-link:hover { border-color: #555; background: var(--surface-raised); }
.toolbar { display: flex; gap: 10px; margin-bottom: 18px; }.toolbar input,.toolbar select { min-height: 44px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); }.toolbar input { flex: 1; }
.toolbar-spacer { flex: 1; }.edit-toggle.active { border-color: var(--accent); color: var(--accent); }
.batch-bar { min-height: 52px; margin: -6px 0 16px; padding: 8px 10px; border: 1px solid #4c1210; border-radius: 11px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; background: rgba(255,59,48,.06); }
.batch-bar label { display: flex; align-items: center; gap: 7px; }.batch-bar select { min-height: 38px; margin-left: auto; padding: 6px 9px; border: 1px solid var(--border); border-radius: 8px; background: #000; color: var(--text); }
.data-list { display: grid; gap: 8px; }.data-row { padding: 15px 16px; border: 1px solid var(--border); border-radius: 13px; display: flex; justify-content: space-between; gap: 18px; background: var(--surface); }.row-main { min-width: 0; display: grid; gap: 3px; }.row-main strong,.row-main span,.row-main small { overflow-wrap: anywhere; }.row-main span,.row-main small,.row-main p { color: var(--muted); }.row-main p { margin: 6px 0 0; }.row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 7px; }.row-actions button { min-height: 40px; padding: 7px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-raised); color: var(--text); cursor: pointer; }.row-actions .danger-link { color: var(--accent); }.empty-state { padding: 48px 20px; border: 1px dashed var(--border); border-radius: 13px; display: grid; gap: 5px; color: var(--muted); text-align: center; }.empty-state strong { color: var(--text); font-size: 1.05rem; }.load-more { margin: 18px auto 0; }
.data-row.is-editing { grid-template-columns: auto minmax(0,1fr) auto; align-items: center; }.row-select { display: grid; place-items: center; min-width: 28px; min-height: 44px; }.row-select input,.batch-bar input { width: 18px; height: 18px; accent-color: var(--accent); }
.pagination { min-height: 62px; display: flex; align-items: center; justify-content: center; gap: 14px; }.pagination span { min-width: 70px; color: var(--muted); text-align: center; }
.loading-row { min-height: 140px; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); }.spinner { width: 19px; height: 19px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: admin-spin .8s linear infinite; }@keyframes admin-spin { to { transform: rotate(360deg); } }
.icon-button.is-loading { animation: admin-spin .8s linear infinite; }
.notice { position: fixed; z-index: 50; right: 20px; bottom: 20px; max-width: 420px; padding: 13px 16px; border: 1px solid #1f6f3a; border-radius: 11px; background: #092713; color: #a9efbf; box-shadow: 0 12px 40px #000; }.notice.error { border-color: var(--accent); background: #310908; color: #ffaaa5; }
dialog { width: min(calc(100% - 32px), 470px); padding: 25px; border: 1px solid var(--border); border-radius: 17px; background: var(--surface); color: var(--text); }dialog::backdrop { background: rgba(0,0,0,.78); backdrop-filter: blur(3px); }dialog h2 { margin-top: 0; }dialog p,dialog label { color: var(--muted); }dialog label { display: grid; gap: 7px; }dialog input { width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 9px; background: #000; color: var(--text); }.dialog-actions { margin-top: 22px; display: flex; justify-content: flex-end; gap: 9px; }.button.danger { border-color: var(--accent); background: var(--accent); color: #000; }
@media (max-width: 900px) { .metric-grid { grid-template-columns: repeat(2, 1fr); }.admin-app { grid-template-columns: 74px minmax(0,1fr); }.admin-nav { align-items: center; }.admin-tab { width: 48px; justify-content: center; }.admin-tab b { display: none; }.quick-links { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .admin-app { display: block; padding-bottom: 74px; }.admin-content { padding: 20px 14px; }.admin-nav { position: fixed; z-index: 30; top: auto; left: 0; right: 0; bottom: 0; height: 68px; padding: 7px 8px max(7px, env(safe-area-inset-bottom)); border: 0; border-top: 1px solid var(--border); flex-direction: row; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; background: rgba(5,5,5,.96); }.admin-nav::-webkit-scrollbar { display:none; }.admin-tab { min-width: 48px; min-height: 48px; }.workspace-header { display: block; }.workspace-meta { margin-top: 12px; text-align: left; }.metric-grid { grid-template-columns: 1fr 1fr; }.toolbar { flex-wrap: wrap; }.toolbar input,.toolbar select { flex: 1 1 180px; }.data-row,.data-row.is-editing { display: grid; grid-template-columns: auto minmax(0,1fr); }.data-row .row-actions { grid-column: 1 / -1; justify-content: flex-start; }.row-actions button { min-height: 44px; }.batch-bar select { width: 100%; margin-left: 0; }.batch-bar .button { flex: 1; }.nav { width: calc(100% - 20px); }.notice { left: 12px; right: 12px; bottom: 82px; } }
.member-badge { background: transparent; border: 1px solid var(--accent); color: var(--accent); }
.workspace-switcher { gap: 9px; }.workspace-link { background: transparent; }.admin-workspace-link { border-color: var(--accent); color: var(--accent); }
.member-shell { width: min(100%, 1380px); min-height: calc(100svh - 65px); margin: auto; display: grid; grid-template-columns: 210px minmax(0,1fr); overflow: visible; }
.member-nav { padding: 24px 14px; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 5px; }
.member-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); }
.profile-form { margin: 0; }.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.profile-form label, dialog label { display: grid; gap: 6px; color: var(--muted); }
.profile-form input, .profile-form textarea, dialog textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; background: #000; color: var(--text); }
.profile-form fieldset { margin: 22px 0; padding: 16px; border: 1px solid var(--border); border-radius: 12px; }
.profile-form .toggle { min-height: 38px; display: flex; grid-template-columns: auto 1fr; align-items: center; }.profile-form .toggle input { width: 20px; min-height: 20px; }
.danger-zone { margin-top: 20px; padding: 22px; border: 1px solid #6f1712; border-radius: 15px; background: #170504; }.danger-zone h2 { margin-top: 0; }
.legal-page { max-width: 820px; padding-block: clamp(54px,8vw,100px); }.legal-page h1 { font-size: clamp(3rem,8vw,6rem); }.legal-page h2 { margin-top: 42px; font-size: 1.45rem; }.legal-page p,.legal-page li { color: var(--muted); font-size: 1.06rem; }.legal-lead { font-size: clamp(1.2rem,2.5vw,1.5rem) !important; }.steps { display: grid; gap: 12px; padding-left: 24px; margin-bottom: 28px; }.support-grid { display: grid; gap: 14px; }.support-grid .panel { margin: 0; }
@media (max-width:900px) { .member-shell { grid-template-columns:74px minmax(0,1fr); }.member-nav { align-items:center; }.member-nav .admin-tab { width:48px; justify-content:center; }.member-nav .admin-tab b { display:none; } }
@media (max-width:620px) { .member-shell { display:block; padding-bottom:74px; }.member-nav { position:fixed; z-index:30; left:0; right:0; bottom:0; height:68px; padding:7px 8px max(7px,env(safe-area-inset-bottom)); border:0; border-top:1px solid var(--border); flex-direction:row; justify-content:space-around; background:rgba(5,5,5,.96); }.form-grid { grid-template-columns:1fr; }.member-metrics { grid-template-columns:1fr; }.legal-page { padding-inline:18px; }.workspace-link span:last-child { display:none; }.workspace-link { width:44px; padding-inline:0; }.admin-badge { display:none; } }
