:root{
  --bg:#0a1622;--bg-2:#0f1f30;--panel:#13283d;--panel-2:#17324b;
  --line:#244563;--line-soft:#1c3a55;
  --ink:#eaf2fb;--ink-dim:#9db4cc;--ink-faint:#6985a3;
  --brass:#d8a657;--brass-dim:#a87f3f;
  --signal:#34d399;--warn:#fbbf24;--danger:#f87171;--blue:#4aa3ff;--violet:#a78bfa;
  --shadow:0 10px 40px rgba(0,0,0,.45);--r:14px;--r-sm:10px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(74,163,255,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(216,166,87,.07), transparent 55%),
    var(--bg);
  color:var(--ink);font-family:'Archivo',-apple-system,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
#app{min-height:100%;display:flex;flex-direction:column}
h1,h2,h3,.display{font-family:'Fraunces',serif;font-weight:600;letter-spacing:-.01em}

/* top bar */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;padding:14px 18px;padding-top:calc(14px + env(safe-area-inset-top));background:linear-gradient(180deg,rgba(10,22,34,.96),rgba(10,22,34,.82));backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft)}
.brand{display:flex;align-items:center;gap:10px;font-family:'Fraunces';font-weight:700;font-size:1.15rem}
.brand .anchor{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(135deg,var(--brass),var(--brass-dim));color:#1a1206;box-shadow:0 4px 14px rgba(216,166,87,.35);font-size:1rem}
.brand small{font-family:'Archivo';font-weight:500;color:var(--ink-faint);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;display:block;margin-top:-2px}
.topbar .vessel{margin-left:auto;display:flex;align-items:center;gap:10px}
.role-pill{font-size:.64rem;text-transform:uppercase;letter-spacing:.1em;padding:3px 9px;border-radius:999px;border:1px solid var(--line);color:var(--brass);background:rgba(216,166,87,.08);margin-top:3px;display:inline-block}
.lang-sel{display:flex;gap:3px;background:var(--bg);border:1px solid var(--line-soft);border-radius:999px;padding:3px}
.lang-sel button{border:none;background:none;color:var(--ink-faint);font-family:'Archivo';font-weight:700;font-size:.66rem;letter-spacing:.04em;padding:4px 9px;border-radius:999px;cursor:pointer;transition:.15s}
.lang-sel button.active{background:var(--brass);color:#1a1206}

/* layout */
.shell{flex:1;width:100%;max-width:980px;margin:0 auto;padding:18px 16px 110px}
.page-head{margin:4px 2px 18px}
.page-head h1{font-size:1.7rem;line-height:1.1}
.page-head p{color:var(--ink-dim);font-size:.9rem;margin-top:5px;max-width:60ch}
.eyebrow{font-family:'Archivo';font-weight:700;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);margin-bottom:6px}

.card{background:linear-gradient(180deg,var(--panel),var(--bg-2));border:1px solid var(--line-soft);border-radius:var(--r);box-shadow:var(--shadow)}
.card.pad{padding:16px}
.grid{display:grid;gap:12px}
.grid.two{grid-template-columns:1fr 1fr}
@media(max-width:640px){.grid.two{grid-template-columns:1fr}}

.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:680px){.tiles{grid-template-columns:repeat(4,1fr)}}
.tile{background:linear-gradient(180deg,var(--panel),var(--bg-2));border:1px solid var(--line-soft);border-radius:var(--r);padding:14px;cursor:pointer;transition:transform .15s,border-color .15s;position:relative;overflow:hidden}
.tile:active{transform:scale(.97)}
.tile:hover{border-color:var(--line)}
.tile .ti{font-size:1.4rem;margin-bottom:8px;display:block}
.tile .tl{font-weight:600;font-size:.92rem}
.tile .ts{color:var(--ink-faint);font-size:.74rem;margin-top:2px}
.tile .badge{position:absolute;top:10px;right:10px;min-width:20px;height:20px;border-radius:999px;background:var(--danger);color:#fff;font-size:.66rem;font-weight:700;display:grid;place-items:center;padding:0 5px}

.stat-row{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:14px}
@media(min-width:680px){.stat-row{grid-template-columns:repeat(4,1fr)}}
.stat{background:linear-gradient(180deg,var(--panel),var(--bg-2));border:1px solid var(--line-soft);border-radius:var(--r);padding:14px}
.stat .v{font-family:'Fraunces';font-size:1.9rem;font-weight:600;line-height:1}
.stat .l{color:var(--ink-faint);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;margin-top:6px}
.stat .v.ok{color:var(--signal)}.stat .v.warn{color:var(--warn)}.stat .v.bad{color:var(--danger)}

.list{display:flex;flex-direction:column}
.item{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-bottom:1px solid var(--line-soft)}
.item:last-child{border-bottom:none}
.item .lead{flex:1;min-width:0}
.item .lead h4{font-size:.96rem;font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.item .lead p{color:var(--ink-dim);font-size:.82rem;margin-top:3px;line-height:1.45}
.item .meta{color:var(--ink-faint);font-size:.72rem;margin-top:6px;display:flex;gap:10px;flex-wrap:wrap}
.item .meta span{display:inline-flex;align-items:center;gap:4px}

.prio{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:2px 7px;border-radius:6px}
.prio.critical{background:rgba(248,113,113,.16);color:var(--danger);border:1px solid rgba(248,113,113,.3)}
.prio.high{background:rgba(251,191,36,.14);color:var(--warn);border:1px solid rgba(251,191,36,.28)}
.prio.routine{background:rgba(74,163,255,.12);color:var(--blue);border:1px solid rgba(74,163,255,.25)}

.chip{font-size:.66rem;padding:3px 9px;border-radius:999px;border:1px solid var(--line);color:var(--ink-dim);background:rgba(255,255,255,.02)}
.chip.ok{color:var(--signal);border-color:rgba(52,211,153,.35);background:rgba(52,211,153,.08)}
.chip.pending{color:var(--warn);border-color:rgba(251,191,36,.3);background:rgba(251,191,36,.07)}
.chip.dept{color:var(--brass);border-color:var(--brass-dim);background:rgba(216,166,87,.08)}
.chip.blue{color:var(--blue);border-color:rgba(74,163,255,.3);background:rgba(74,163,255,.08)}

.btn{font-family:'Archivo';font-weight:600;font-size:.86rem;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);padding:10px 16px;border-radius:var(--r-sm);cursor:pointer;transition:filter .15s,transform .1s;display:inline-flex;align-items:center;gap:7px}
.btn:active{transform:scale(.97)}
.btn:hover{filter:brightness(1.12)}
.btn.primary{background:linear-gradient(135deg,var(--brass),var(--brass-dim));border-color:var(--brass-dim);color:#1a1206}
.btn.ghost{background:transparent}
.btn.sm{padding:7px 12px;font-size:.78rem}
.btn.full{width:100%;justify-content:center}
.btn.ok{background:linear-gradient(135deg,#34d399,#10b981);border-color:#0f9d6f;color:#04241a}
.btn-row{display:flex;gap:8px;flex-wrap:wrap}

label.fld{display:block;margin-bottom:12px}
label.fld span{display:block;font-size:.74rem;color:var(--ink-dim);margin-bottom:5px;font-weight:600}
input,select,textarea{width:100%;font-family:'Archivo';font-size:.9rem;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 12px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brass)}
textarea{resize:vertical;min-height:80px}
input[type=date],input[type=number]{color-scheme:dark}

.bar{height:8px;border-radius:999px;background:var(--bg);overflow:hidden;border:1px solid var(--line-soft)}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--signal),#10b981);border-radius:999px;transition:width .4s}
.bar.warn i{background:linear-gradient(90deg,var(--warn),#f59e0b)}
.bar.bad i{background:linear-gradient(90deg,var(--danger),#ef4444)}

.check{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line-soft);cursor:pointer}
.check:last-child{border-bottom:none}
.check .box{width:24px;height:24px;border-radius:7px;border:2px solid var(--line);display:grid;place-items:center;flex-shrink:0;transition:.15s}
.check.done .box{background:var(--signal);border-color:var(--signal);color:#04241a}
.check .tx{flex:1}
.check.done .tx .t{text-decoration:line-through;color:var(--ink-faint)}
.check .tx .t{font-weight:500;font-size:.92rem}
.check .tx .by{font-size:.7rem;color:var(--ink-faint);margin-top:2px}

/* crew board */
.crew-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.crew{padding:12px;border-radius:var(--r-sm);border:1px solid var(--line-soft);background:var(--bg-2);text-align:center;cursor:pointer;transition:.15s;position:relative}
.crew:active{transform:scale(.96)}
.crew .av{width:42px;height:42px;border-radius:50%;margin:0 auto 8px;display:grid;place-items:center;font-weight:700;font-family:'Fraunces';font-size:1.1rem;color:#04241a}
.crew .nm{font-weight:600;font-size:.84rem}
.crew .rl{font-size:.68rem;color:var(--ink-faint);margin-top:1px}
.crew .st{margin-top:8px;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:3px 0;border-radius:6px}
.crew.aboard{border-color:rgba(52,211,153,.3)}
.crew.aboard .st{color:var(--signal)}
.crew.ashore{opacity:.7}.crew.ashore .st{color:var(--warn)}
.crew.leave{opacity:.5}.crew.leave .st{color:var(--ink-faint)}
.crew.onwatch{border-color:var(--brass);box-shadow:0 0 0 1px var(--brass),0 0 18px rgba(216,166,87,.25)}
.crew .watch-tag{position:absolute;top:-8px;left:50%;transform:translateX(-50%);background:var(--brass);color:#1a1206;font-size:.56rem;font-weight:800;letter-spacing:.08em;padding:2px 8px;border-radius:999px;text-transform:uppercase}

/* watch / calendar grids */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal .dh{text-align:center;font-size:.66rem;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.06em;padding-bottom:4px;font-weight:700}
.cal .day{aspect-ratio:1;border-radius:9px;border:1px solid var(--line-soft);background:var(--bg-2);padding:5px;font-size:.7rem;display:flex;flex-direction:column;overflow:hidden;cursor:pointer}
.cal .day .dn{color:var(--ink-faint);font-size:.62rem;font-weight:700}
.cal .day .w{margin-top:auto;font-size:.62rem;font-weight:600;border-radius:5px;padding:2px 4px;text-align:center;line-height:1.2}
.cal .day .w.on{background:rgba(74,163,255,.18);color:var(--blue)}
.cal .day .w.off{background:rgba(52,211,153,.14);color:var(--signal)}
.cal .day.has-ev{border-color:var(--brass-dim)}
.cal .day .evdot{width:6px;height:6px;border-radius:50%;background:var(--brass);margin-top:auto}

/* month calendar (events / leave) */
.mcal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.mcal .dh{text-align:center;font-size:.62rem;color:var(--ink-faint);text-transform:uppercase;padding-bottom:4px;font-weight:700}
.mcal .cell{min-height:62px;border-radius:8px;border:1px solid var(--line-soft);background:var(--bg-2);padding:4px;font-size:.66rem;cursor:pointer;display:flex;flex-direction:column;gap:2px;overflow:hidden}
.mcal .cell.empty{background:transparent;border:none;cursor:default}
.mcal .cell .dn{color:var(--ink-faint);font-weight:700;font-size:.62rem}
.mcal .cell.today{border-color:var(--brass);box-shadow:0 0 0 1px var(--brass)}
.mcal .ev{font-size:.58rem;border-radius:4px;padding:1px 4px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.ev.refuel{background:rgba(74,163,255,.18);color:var(--blue)}
.ev.provision{background:rgba(52,211,153,.16);color:var(--signal)}
.ev.move{background:rgba(216,166,87,.18);color:var(--brass)}
.ev.leave{background:rgba(167,139,250,.18);color:var(--violet)}
.ev.other{background:rgba(157,180,204,.15);color:var(--ink-dim)}

/* stock / steppers */
.stock-row{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line-soft)}
.stock-row:last-child{border-bottom:none}
.stock-row .q{font-family:'Fraunces';font-size:1.3rem;font-weight:600;min-width:46px;text-align:center}
.stock-row .q.low{color:var(--danger)}
.stock-row .info{flex:1}
.stock-row .info .n{font-weight:600;font-size:.9rem}
.stock-row .info .l{font-size:.72rem;color:var(--ink-faint);margin-top:2px}
.stepper{display:flex;align-items:center;gap:6px}
.stepper button{width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);font-size:1.1rem;cursor:pointer;display:grid;place-items:center}
.stepper button:active{transform:scale(.9)}

/* groceries */
.gro{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line-soft);cursor:pointer}
.gro:last-child{border-bottom:none}
.gro .box{width:22px;height:22px;border-radius:6px;border:2px solid var(--line);display:grid;place-items:center;flex-shrink:0}
.gro.bought .box{background:var(--signal);border-color:var(--signal);color:#04241a}
.gro.bought .nm{text-decoration:line-through;color:var(--ink-faint)}
.gro .nm{flex:1;font-size:.9rem;font-weight:500}
.gro .who{font-size:.68rem;color:var(--ink-faint)}

/* tasks */
.task{display:flex;gap:11px;padding:13px 16px;border-bottom:1px solid var(--line-soft);align-items:flex-start}
.task:last-child{border-bottom:none}
.task .box{width:22px;height:22px;border-radius:6px;border:2px solid var(--line);display:grid;place-items:center;flex-shrink:0;cursor:pointer;margin-top:2px}
.task.done .box{background:var(--signal);border-color:var(--signal);color:#04241a}
.task.done .ttl{text-decoration:line-through;color:var(--ink-faint)}
.task .body{flex:1;min-width:0}
.task .ttl{font-weight:600;font-size:.9rem}
.task .sub{font-size:.72rem;color:var(--ink-faint);margin-top:3px;display:flex;gap:8px;flex-wrap:wrap}

/* nav */
.nav{position:fixed;bottom:0;left:0;right:0;z-index:50;display:flex;justify-content:space-around;background:linear-gradient(0deg,rgba(10,22,34,.99),rgba(10,22,34,.9));backdrop-filter:blur(16px);border-top:1px solid var(--line-soft);padding:8px 6px;padding-bottom:calc(8px + env(safe-area-inset-bottom))}
.nav button{background:none;border:none;color:var(--ink-faint);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;font-family:'Archivo';font-size:.6rem;font-weight:600;letter-spacing:.04em;padding:5px 8px;border-radius:10px;flex:1;max-width:80px;transition:color .15s;position:relative}
.nav button .ic{font-size:1.25rem;line-height:1}
.nav button.active{color:var(--brass)}
.nav button.active .ic{filter:drop-shadow(0 0 8px rgba(216,166,87,.5))}

/* modal */
.modal-bg{position:fixed;inset:0;z-index:60;background:rgba(4,10,16,.7);backdrop-filter:blur(6px);display:grid;place-items:end center}
.modal{background:linear-gradient(180deg,var(--panel),var(--bg-2));border:1px solid var(--line);border-radius:20px 20px 0 0;width:100%;max-width:560px;max-height:90vh;overflow-y:auto;padding:22px 20px;padding-bottom:calc(22px + env(safe-area-inset-bottom));box-shadow:0 -10px 50px rgba(0,0,0,.6);animation:sheet .28s cubic-bezier(.2,.9,.3,1)}
@keyframes sheet{from{transform:translateY(100%)}to{transform:translateY(0)}}
.modal .grab{width:40px;height:4px;border-radius:999px;background:var(--line);margin:0 auto 16px}
.modal h2{font-size:1.3rem;margin-bottom:4px}
.modal .sub{color:var(--ink-dim);font-size:.84rem;margin-bottom:18px}

.section-title{display:flex;align-items:center;justify-content:space-between;margin:22px 2px 10px}
.section-title h3{font-size:1.05rem}
.empty{text-align:center;padding:40px 20px;color:var(--ink-faint)}
.empty .e{font-size:2.2rem;margin-bottom:10px}
.hint{font-size:.74rem;color:var(--ink-faint);margin-top:6px}
.divider{height:1px;background:var(--line-soft);margin:18px 0}
.tag-v2{font-size:.56rem;font-weight:800;letter-spacing:.1em;color:var(--blue);border:1px solid rgba(74,163,255,.4);background:rgba(74,163,255,.1);padding:2px 6px;border-radius:6px;text-transform:uppercase}
.toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);z-index:80;background:var(--panel);border:1px solid var(--brass-dim);color:var(--ink);padding:12px 20px;border-radius:999px;box-shadow:var(--shadow);font-size:.85rem;font-weight:500;animation:pop .3s;display:flex;gap:8px;align-items:center;max-width:90vw}
@keyframes pop{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1}}
.scroll-x{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
.scroll-x::-webkit-scrollbar{display:none}
.tab{white-space:nowrap;padding:8px 14px;border-radius:999px;border:1px solid var(--line-soft);background:var(--bg-2);color:var(--ink-dim);font-size:.8rem;font-weight:600;cursor:pointer}
.tab.active{background:rgba(216,166,87,.12);border-color:var(--brass-dim);color:var(--brass)}

/* dashboard widgets: map + weather */
.widget-row{display:grid;grid-template-columns:1.4fr 1fr;gap:12px;margin-bottom:14px}
@media(max-width:560px){.widget-row{grid-template-columns:1fr}}
.map-w{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line-soft);min-height:150px;background:
  radial-gradient(circle at 30% 40%, rgba(74,163,255,.12), transparent 40%),
  linear-gradient(180deg,#0c2236,#0a1c2c)}
.map-w svg{display:block;width:100%;height:100%}
.map-w .pin{position:absolute;font-size:1.4rem;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));animation:bob 2.5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.map-w .coords{position:absolute;bottom:8px;left:10px;font-size:.7rem;color:var(--ink-dim);background:rgba(10,22,34,.7);padding:3px 8px;border-radius:6px;backdrop-filter:blur(4px)}
.weather-w{border-radius:var(--r);border:1px solid var(--line-soft);padding:14px;background:linear-gradient(180deg,var(--panel),var(--bg-2));display:flex;flex-direction:column;justify-content:center;gap:4px}
.weather-w .temp{font-family:'Fraunces';font-size:2.4rem;font-weight:600;line-height:1}
.weather-w .cond{color:var(--ink-dim);font-size:.84rem}
.weather-w .extra{font-size:.72rem;color:var(--ink-faint);margin-top:6px;display:flex;gap:12px;flex-wrap:wrap}

/* wellbeing */
.checkin-card{border-color:rgba(52,211,153,.35);background:linear-gradient(180deg,rgba(52,211,153,.07),var(--bg-2))}
.mood-row{display:flex;gap:10px;justify-content:space-between;margin:14px 0}
.mood-btn{flex:1;aspect-ratio:1;border-radius:14px;border:1px solid var(--line-soft);background:var(--bg-2);font-size:1.8rem;cursor:pointer;transition:.15s;display:grid;place-items:center}
.mood-btn:active{transform:scale(.92)}
.mood-btn.sel{border-color:var(--brass);background:rgba(216,166,87,.12)}
.gauge{display:flex;align-items:flex-end;gap:6px;height:90px;margin-top:10px}
.gauge .b{flex:1;background:linear-gradient(180deg,var(--brass),var(--brass-dim));border-radius:6px 6px 0 0;min-height:6px;position:relative}
.gauge .b span{position:absolute;top:-18px;left:50%;transform:translateX(-50%);font-size:1rem}

/* onboarding */
.welcome{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:30px;gap:6px;position:relative}
.welcome .big-anchor{width:78px;height:78px;border-radius:22px;display:grid;place-items:center;background:linear-gradient(135deg,var(--brass),var(--brass-dim));color:#1a1206;font-size:2.4rem;box-shadow:0 12px 40px rgba(216,166,87,.4);margin-bottom:18px}
.welcome h1{font-size:2.6rem;line-height:1.05}
.welcome .sub-brand{color:var(--ink-faint);letter-spacing:.2em;text-transform:uppercase;font-size:.7rem;margin-bottom:14px}
.welcome p{color:var(--ink-dim);max-width:36ch;margin:6px 0 22px}
.welcome .feat{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-bottom:26px;color:var(--ink-faint);font-size:.78rem}
.role-cards{display:grid;gap:10px;width:100%;max-width:420px}
.role-card{text-align:left;padding:16px;border-radius:var(--r);border:1px solid var(--line-soft);background:linear-gradient(180deg,var(--panel),var(--bg-2));cursor:pointer;transition:.15s;display:flex;gap:12px;align-items:center}
.role-card:hover{border-color:var(--brass-dim)}
.role-card .ic{font-size:1.6rem}
.role-card h4{font-size:1rem;font-weight:600}
.role-card p{color:var(--ink-faint);font-size:.8rem;margin:2px 0 0;max-width:none}
.trial-badge{display:inline-block;margin-top:18px;font-size:.72rem;color:var(--brass);border:1px solid var(--brass-dim);background:rgba(216,166,87,.08);padding:5px 12px;border-radius:999px}