/* ============================================================
   TEC Festac Member Hub — design system
   Brand: deep blue #195296 · lime #BED000 · sky #A1DAF8
   Lime is a fill/accent only — never used as text on light.
   ============================================================ */
:root{
  --ink:#14233B; --ink-2:#213A5C; --navy:#0C2742;
  --blue:#195296; --blue-2:#2C6DB5;
  --lime:#BED000; --lime-soft:#E4F09A;
  --sky:#A1DAF8; --sky-soft:#D8EAFA;
  --paper:#EEF3F9; --card:#FFFFFF;
  --muted:#6E7C92; --muted-2:#A6B2C4; --line:#E3E9F1;
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --serif:"Bricolage Grotesque",system-ui,sans-serif; /* alias kept for existing rules */
  --sans:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  --r:16px; --shadow:0 1px 3px rgba(20,35,59,.06),0 24px 48px -28px rgba(20,35,59,.34);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.5;}
a{color:inherit;text-decoration:none;}
svg.ic{vertical-align:-0.15em;flex:none;}
.ic-lg{font-size:1.3em;}

/* ---------------------------- buttons --------------------------- */
.btn{border:none;cursor:pointer;font-family:var(--sans);font-weight:700;font-size:14px;
  background:var(--lime);color:var(--navy);border-radius:13px;padding:13px 20px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 8px 18px -6px rgba(190,208,0,.55);transition:filter .15s,transform .05s;}
.btn:hover{filter:brightness(1.04);} .btn:active{transform:translateY(1px);}
.btn--block{width:100%;}
.btn--soft{background:var(--sky-soft);color:var(--blue);box-shadow:none;}
.btn--ghost{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:none;}
.btn--ok{background:#DDF0D6;color:#1f7a3d;box-shadow:none;}
.btn:disabled{opacity:.6;cursor:default;}
.linkbtn{background:none;border:none;color:var(--blue);font-family:var(--sans);
  font-weight:700;font-size:13px;cursor:pointer;}

/* ============================================================
   AUTH (split-screen)
   ============================================================ */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:28px;
  background:radial-gradient(1200px 600px at 12% -10%,#e3eef9 0,transparent 55%),
   radial-gradient(1000px 500px at 95% 0%,#dfeaf8 0,transparent 50%),#E6EDF5;}
.auth-card{width:100%;max-width:940px;background:var(--card);border-radius:20px;overflow:hidden;
  box-shadow:var(--shadow);border:1px solid #dfe6ef;display:grid;grid-template-columns:.85fr 1fr;
  min-height:560px;}
.brand-side{position:relative;overflow:hidden;color:#fff;padding:36px 38px;display:flex;flex-direction:column;
  background:radial-gradient(120% 120% at 80% -10%,rgba(120,170,225,.30) 0,transparent 55%),
   linear-gradient(155deg,#1C6FB0 0,#103A66 55%,var(--navy) 100%);}
.brand-side .mk{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:600;font-size:20px;}
.brand-side .welcome{margin-top:auto;}
.brand-side .welcome small{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);}
.brand-side .welcome h2{font-family:var(--serif);font-weight:500;font-size:29px;line-height:1.16;margin-top:10px;}
.brand-side .welcome h2 span{color:var(--lime-soft);}
.mini{display:flex;align-items:flex-end;gap:8px;margin-top:28px;height:64px;}
.mini i{flex:1;border-radius:6px 6px 3px 3px;background:rgba(255,255,255,.13);}
.mini i:nth-child(1){height:26px;background:linear-gradient(180deg,var(--lime-soft),var(--lime));box-shadow:0 0 14px rgba(190,208,0,.5);}
.mini i:nth-child(2){height:36px;} .mini i:nth-child(3){height:46px;}
.mini i:nth-child(4){height:56px;} .mini i:nth-child(5){height:66px;}

.form-side{padding:34px 44px;display:flex;flex-direction:column;justify-content:center;min-width:0;}
.form-side .step-lab{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:12px;}
.form-side h3{font-family:var(--serif);font-weight:500;font-size:27px;line-height:1.15;}
.form-side .sub{font-size:14px;color:var(--muted);margin-top:8px;}
.fl{font-size:12px;font-weight:700;color:var(--ink-2);margin:22px 0 7px;display:block;}
.inp{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:13px 15px;
  font-family:var(--sans);font-size:15px;color:var(--ink);background:#fff;}
.inp:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 4px rgba(190,208,0,.18);}
.phone-grp{display:flex;gap:10px;} .phone-grp .cc{width:92px;flex:none;text-align:center;font-weight:600;}
.grp2{display:flex;gap:12px;} .grp2>div{flex:1;}
.auth-alt{margin-top:18px;font-size:13px;color:var(--muted);}
.auth-alt a{color:var(--blue);font-weight:700;}
.note{margin-top:20px;background:var(--sky-soft);border-radius:12px;padding:12px 14px;
  font-size:12.5px;color:var(--ink-2);display:flex;gap:10px;align-items:flex-start;}
.note b{color:var(--blue);}
.devcode{margin-top:16px;background:#FBFEF0;border:1px dashed var(--lime);border-radius:12px;
  padding:12px 14px;font-size:13px;color:var(--ink-2);}
.devcode b{font-family:var(--serif);font-size:20px;letter-spacing:.2em;color:var(--blue);}
.err{margin-top:16px;background:#FDECEC;border:1px solid #F4C7C7;color:#A23A3A;
  border-radius:11px;padding:11px 14px;font-size:13px;font-weight:600;}

/* OTP */
.otp{display:flex;gap:12px;margin-top:24px;}
.otp input{flex:1 1 0;min-width:0;max-width:62px;height:60px;text-align:center;font-size:25px;font-weight:700;
  border:1.5px solid var(--line);border-radius:13px;font-family:var(--sans);color:var(--ink);}
.otp input:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 4px rgba(190,208,0,.18);}

/* choice cards + chips */
.choice{display:flex;gap:12px;margin-top:22px;}
.opt{flex:1;border:1.5px solid var(--line);border-radius:15px;padding:16px;cursor:pointer;transition:.18s;background:#fff;text-align:left;}
.opt:hover{border-color:var(--blue);}
.opt.sel{border-color:var(--lime);background:#F7FCE8;box-shadow:0 0 0 4px rgba(190,208,0,.14);}
.opt .e{font-size:24px;color:var(--blue);} .opt .ot{font-size:14px;font-weight:700;margin-top:8px;}
.opt .od{font-size:11.5px;color:var(--muted);margin-top:2px;}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px;}
.chip-t{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:9px 15px;
  font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:.16s;user-select:none;}
.chip-t:hover{border-color:var(--blue);}
.chip-t.sel{background:var(--ink);color:#fff;border-color:var(--ink);}

/* ============================================================
   APP SHELL
   ============================================================ */
.app{display:grid;grid-template-columns:240px 1fr;min-height:100vh;}
.scrim{display:none;position:fixed;inset:0;background:rgba(12,39,66,.4);z-index:20;}
.side{background:var(--card);border-right:1px solid var(--line);padding:22px 16px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;}
.side .logo{height:30px;width:auto;display:block;margin:4px 8px 6px;}
.side .sublabel{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin:0 8px 14px;}
.nav-lab{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);padding:12px 10px 6px;}
.nl{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;font-size:13.5px;
  font-weight:600;color:var(--muted);cursor:pointer;}
.nl .i{font-size:17px;width:20px;text-align:center;opacity:.7;}
.nl:hover{background:var(--paper);color:var(--ink-2);}
.nl.on{background:var(--ink);color:#fff;} .nl.on .i{opacity:1;}
.nl .badge{margin-left:auto;background:var(--lime);color:var(--navy);font-size:10px;font-weight:800;border-radius:999px;padding:1px 7px;}
.side .me{margin-top:auto;display:flex;align-items:center;gap:11px;padding:11px;border-radius:13px;background:var(--paper);}
.side .me .av{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--blue),var(--blue-2));
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;flex:none;}
.side .me .nm{font-size:13px;font-weight:700;line-height:1.2;}
.side .me .rl{font-size:11px;color:var(--muted);}
.side .me a{margin-left:auto;color:var(--muted-2);}

.main{display:flex;flex-direction:column;min-width:0;}
.topbar{display:flex;align-items:center;gap:16px;padding:16px 28px;border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.7);backdrop-filter:blur(6px);position:sticky;top:0;z-index:5;}
.topbar .burger{display:none;background:none;border:none;font-size:22px;color:var(--ink);cursor:pointer;}
.topbar .hi h2{font-family:var(--serif);font-weight:500;font-size:20px;line-height:1.1;}
.topbar .hi p{font-size:12.5px;color:var(--muted);}
.topbar .search{margin-left:auto;background:#fff;border:1px solid var(--line);border-radius:11px;
  padding:9px 13px;font-size:13px;color:var(--muted-2);display:flex;align-items:center;gap:8px;min-width:210px;}
.topbar .search input{border:none;outline:none;font-family:var(--sans);font-size:13px;color:var(--ink);width:100%;background:none;}
.tb-ico{width:40px;height:40px;border-radius:11px;background:#fff;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:16px;flex:none;position:relative;color:var(--ink-2);}
.tb-ico .dot{position:absolute;top:9px;right:10px;width:7px;height:7px;border-radius:50%;background:var(--lime);border:2px solid #fff;}
.content{padding:24px 28px 40px;}
.page-h{margin-bottom:18px;}
.page-h h1{font-family:var(--serif);font-weight:500;font-size:26px;}
.page-h p{font-size:13.5px;color:var(--muted);margin-top:3px;}

/* ----------------------------- hero / ascent --------------------------- */
.hero{border-radius:22px;padding:24px 28px 18px;color:#fff;position:relative;overflow:hidden;
  background:radial-gradient(120% 140% at 85% -10%,rgba(120,170,225,.30) 0,transparent 55%),
   linear-gradient(150deg,#1C6FB0 0,#103A66 55%,var(--navy) 100%);}
.hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap;}
.hero .hlab{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55);}
.hero h3{font-family:var(--serif);font-weight:500;font-size:23px;margin-top:5px;max-width:22ch;}
.hero h3 span{color:var(--lime-soft);}
.stage-pill{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);border-radius:999px;
  padding:8px 15px;font-size:12px;font-weight:600;color:var(--lime-soft);white-space:nowrap;}
/* Discipleship journey — gentle ascending stepper (desktop) → vertical timeline (mobile) */
.journey-track{position:relative;margin-top:18px;}
.jt-node{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;flex:none;background:#173d63;
  border:2px solid rgba(255,255,255,.22);color:rgba(255,255,255,.72);}
.jt-node svg{width:1.05em;height:1.05em;}
.jt-name{font-weight:700;color:rgba(255,255,255,.55);line-height:1.2;}
.jt-status{font-weight:600;color:rgba(255,255,255,.4);}
.done .jt-node,.jt-node.done{background:linear-gradient(160deg,var(--blue-2),var(--blue));border-color:transparent;color:#fff;}
.current .jt-node,.jt-node.current{background:#fff;border-color:var(--lime);color:var(--navy);
  box-shadow:0 0 0 4px rgba(190,208,0,.28),0 8px 22px -6px rgba(190,208,0,.6);}
.done .jt-name,.current .jt-name{color:#fff;}
.current .jt-status{color:var(--lime-soft);}

/* desktop graph (the rising path) */
.jt-graph{position:relative;height:122px;}
.jt-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.jt-svg-bg{fill:none;stroke:rgba(255,255,255,.16);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
.jt-svg-fg{fill:none;stroke:url(#jtgrad);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 5px rgba(150,200,245,.45));}
.jt-graph .jt-node{position:absolute;transform:translate(-50%,-50%);z-index:1;}
.jt-labels{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);}
.jt-lab{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;min-width:0;}
.jt-lab .jt-name{font-size:12.5px;} .jt-lab .jt-status{font-size:10.5px;min-height:13px;}

/* mobile vertical timeline (hidden on desktop) */
.jt-mobile{display:none;}

@media (max-width:640px){
  .jt-graph,.jt-labels{display:none;}
  .jt-mobile{display:block;position:relative;list-style:none;margin:2px 0 0;padding:0;}
  .jt-mobile::before{content:"";position:absolute;left:20px;top:14px;bottom:14px;width:4px;border-radius:4px;
    background:rgba(255,255,255,.16);}
  .jt-mobile::after{content:"";position:absolute;left:20px;top:14px;width:4px;border-radius:4px;
    height:calc((100% - 28px) * var(--frac,0));
    background:linear-gradient(180deg,var(--blue-2),var(--lime));transition:height .7s ease;}
  .jt-mstage{position:relative;display:flex;align-items:center;gap:14px;padding:8px 0;}
  .jt-mstage .jt-node{position:relative;z-index:1;}
  .jt-mstage .jt-text{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
  .jt-mstage .jt-name{font-size:14px;} .jt-mstage .jt-status{font-size:11px;}
}

/* motion — only when the user hasn't asked to reduce it */
@media (prefers-reduced-motion:no-preference){
  .jt-graph .jt-node:not(.current){opacity:0;animation:jtRise .55s cubic-bezier(.2,.7,.3,1) forwards;}
  .jt-lab{opacity:0;animation:jtFade .5s ease forwards;}
  .jt-mstage:not(.current){opacity:0;animation:jtFade .5s ease forwards;}
  .current .jt-node,.jt-node.current{animation:jtPulse 2.8s ease-in-out infinite;}
}
@keyframes jtRise{from{opacity:0;transform:translate(-50%,calc(-50% + 9px));}to{opacity:1;transform:translate(-50%,-50%);}}
@keyframes jtFade{from{opacity:0;transform:translateY(7px);}to{opacity:1;transform:none;}}
@keyframes jtPulse{0%,100%{box-shadow:0 0 0 4px rgba(190,208,0,.28),0 8px 22px -6px rgba(190,208,0,.55);}
  50%{box-shadow:0 0 0 7px rgba(190,208,0,.12),0 8px 26px -4px rgba(190,208,0,.8);}}

/* ------------------------------ cards / grid --------------------------- */
.grid{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;margin-top:20px;align-items:start;}
.col{display:flex;flex-direction:column;gap:20px;}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;}
.card-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.card-h h4{font-size:15px;font-weight:700;} .card-h a{font-size:12px;color:var(--blue);font-weight:600;}
.next{background:linear-gradient(155deg,#F6FBFF,#E6F2FC);border-color:#CDE6FA;display:flex;gap:18px;align-items:center;}
.next .ring{width:58px;height:58px;border-radius:16px;flex:none;background:#fff;border:1px solid #CDE6FA;
  display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--blue);}
.next .txt{flex:1;min-width:0;}
.next .kick{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);}
.next h3{font-family:var(--serif);font-weight:500;font-size:20px;margin:3px 0;}
.next p{font-size:13px;color:var(--muted);line-height:1.5;}

.task{display:flex;align-items:center;gap:13px;padding:11px 0;border-bottom:1px solid var(--line);}
.task:last-child{border-bottom:none;}
.task .box{width:22px;height:22px;border-radius:7px;flex:none;border:2px solid var(--muted-2);
  display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;}
.task.ok .box{background:var(--blue);border-color:var(--blue);}
.task.active .box{border-color:var(--lime);}
.task .tt{font-size:13.5px;font-weight:600;flex:1;}
.task.ok .tt{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--muted-2);}
.task .go{font-size:12px;font-weight:700;color:var(--blue);}

.event{display:flex;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);}
.event:last-child{border-bottom:none;}
.cal{width:48px;height:52px;border-radius:12px;flex:none;background:var(--sky-soft);
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;}
.cal b{font-size:18px;font-weight:800;color:var(--blue);}
.cal small{font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);margin-top:3px;font-weight:700;}
.event .ev-b{flex:1;min-width:0;} .event .ev-b h5{font-size:14px;font-weight:700;}
.event .ev-b p{font-size:12px;color:var(--muted);margin-top:2px;}

.emblem{width:44px;height:44px;border-radius:14px;flex:none;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:20px;position:relative;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 6px 14px -7px rgba(12,39,66,.45);}
.emblem svg{width:1em;height:1em;position:relative;z-index:1;}
.emblem::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 120% at 78% 12%,rgba(255,255,255,.28),transparent 55%);}
.emblem--0{background:linear-gradient(140deg,#2C6DB5,#173d63);}
.emblem--1{background:linear-gradient(140deg,#4F9AD6,#1C6FB0);}
.emblem--2{background:linear-gradient(140deg,#6FB7E6,#2C6DB5);}
.emblem--3{background:linear-gradient(140deg,#1C6FB0,#0C2742);}
.gc-meta{display:flex;gap:18px;margin:13px 0;flex-wrap:wrap;}
.gc-meta div{font-size:12px;color:var(--ink-2);} .gc-meta b{display:block;font-size:10px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px;font-weight:700;}

.leader{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);}
.leader:last-child{border-bottom:none;}
.leader .av{width:42px;height:42px;border-radius:50%;flex:none;background:linear-gradient(135deg,var(--sky),var(--blue));
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;}
.leader .ln{font-size:13.5px;font-weight:700;} .leader .lr{font-size:11.5px;color:var(--muted);}
.leader .msg{margin-left:auto;}

.rowlink{display:flex;align-items:center;gap:13px;padding:11px 0;border-bottom:1px solid var(--line);cursor:pointer;}
.rowlink:last-child{border-bottom:none;}
.rowlink .rl-i{width:38px;height:38px;border-radius:11px;background:var(--sky-soft);display:flex;align-items:center;justify-content:center;font-size:16px;flex:none;color:var(--blue);}
.rowlink .rl-t{font-size:13.5px;font-weight:700;} .rowlink .rl-d{font-size:11.5px;color:var(--muted);margin-top:1px;}
.rowlink .rl-a{margin-left:auto;color:var(--muted-2);}

.pbar{height:8px;border-radius:5px;background:var(--line);overflow:hidden;}
.pbar span{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--blue-2));border-radius:5px;}

.cards-list{display:flex;flex-direction:column;gap:14px;}
.empty{text-align:center;color:var(--muted);padding:30px;font-size:14px;}

/* ----------------------------- toast --------------------------- */
.toast-wrap{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:50;display:flex;flex-direction:column;gap:10px;align-items:center;}
.toast{background:var(--ink);color:#fff;padding:13px 20px;border-radius:13px;font-size:13.5px;font-weight:600;
  box-shadow:0 18px 40px -16px rgba(20,35,59,.5);display:flex;align-items:center;gap:10px;
  animation:toastin .3s ease both;max-width:90vw;}
.toast.ok{background:#1f7a3d;}
@keyframes toastin{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

/* ----------------------------- responsive --------------------------- */
@media (max-width:900px){
  .auth-card{grid-template-columns:1fr;} .brand-side{display:none;} .form-side{padding:30px 24px;}
  .app{grid-template-columns:1fr;}
  .side{position:fixed;z-index:30;width:240px;left:-260px;transition:left .25s;box-shadow:var(--shadow);}
  .side.open{left:0;}
  .topbar .burger{display:block;}
  .grid{grid-template-columns:1fr;}
  .scrim{position:fixed;inset:0;background:rgba(12,39,66,.4);z-index:20;display:none;}
  .scrim.show{display:block;}
}

/* ============================================================
   Mobile bottom navigation + responsive polish
   ============================================================ */
.bottomnav{display:none;}
.bn-more{background:none;border:none;font-family:var(--sans);cursor:pointer;}

@media (max-width:900px){
  /* App-style bottom tab bar */
  .bottomnav{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:25;
    background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
    border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .bn{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:6px 2px;font-size:10.5px;font-weight:700;color:var(--muted-2);text-decoration:none;}
  .bn .bn-i{font-size:21px;line-height:1;color:var(--muted-2);}
  .bn.on,.bn.on .bn-i{color:var(--blue);}
  .bn.on .bn-i{filter:drop-shadow(0 4px 8px rgba(25,82,150,.3));}
  body.has-bottomnav .content{padding-bottom:84px;}

  /* Tighter spacing on phones */
  .content{padding:16px 14px 84px;}
  .topbar{padding:13px 14px;}
  .topbar .search{display:none;}          /* search lives on the sermons page on mobile */
  .topbar .hi h2{font-size:17px;}
  .hero{padding:18px 16px 14px;border-radius:18px;}
  .hero h3{font-size:18px;}
  .page-h h1{font-size:21px;}
  .card{padding:16px;border-radius:15px;}
  .next{flex-direction:row;} .next .ring{width:48px;height:48px;font-size:20px;}
  .next h3{font-size:17px;}
  .grp2{flex-direction:column;gap:0;}
  .choice{flex-direction:column;}
  .event{flex-wrap:wrap;}
  .event .btn{margin-left:56px;}
  .auth-wrap{padding:0;align-items:stretch;}
  .auth-card{border-radius:0;min-height:100vh;box-shadow:none;border:none;}
  .form-side{justify-content:flex-start;padding:46px 22px;}
}

@media (max-width:520px){
  .otp{gap:8px;}
  .otp input{height:54px;font-size:22px;}
  .devcode b{font-size:18px;letter-spacing:.12em;}
}
@media (max-width:380px){
  .otp{gap:6px;}
  .otp input{height:50px;font-size:20px;}
  .form-side{padding:40px 18px;}
}

/* Larger touch targets everywhere on touch devices */
@media (hover:none){
  .btn{padding:14px 20px;} .nl{padding:12px;}
}

/* ============================================================
   My Unit workspace + avatars + photo picker
   ============================================================ */
.av-fallback{border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;background:linear-gradient(135deg,var(--blue),var(--blue-2));}
.av-img{border:2px solid var(--line);}

/* photo picker on sign-up */
.photo-pick{display:flex;align-items:center;gap:14px;margin-top:8px;}
.photo-prev{width:64px;height:64px;border-radius:50%;flex:none;background:var(--paper);
  border:2px dashed var(--muted-2);display:flex;align-items:center;justify-content:center;
  color:var(--muted-2);font-size:24px;overflow:hidden;}

/* unit sub-tabs */
.utabs{display:flex;gap:6px;margin-bottom:18px;overflow-x:auto;border-bottom:1px solid var(--line);padding-bottom:0;}
.utab{display:inline-flex;align-items:center;gap:7px;padding:10px 14px;font-size:13px;font-weight:700;
  color:var(--muted);border-bottom:2.5px solid transparent;white-space:nowrap;}
.utab.on{color:var(--blue);border-bottom-color:var(--lime);}
.utab:hover{color:var(--ink-2);}

/* team grid */
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:16px;margin-top:6px;}
.team-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:14px 8px;
  border:1px solid var(--line);border-radius:14px;}
.team-card .tn{font-size:13px;font-weight:700;line-height:1.2;}
.team-card .tr{font-size:11px;color:var(--muted);}

/* unit chat */
.thread{display:flex;flex-direction:column;gap:14px;max-height:50vh;overflow-y:auto;padding:6px 0 14px;}
.msg{display:flex;gap:10px;align-items:flex-start;}
.msg.mine{flex-direction:row-reverse;}
.msg .bubble{background:var(--paper);border-radius:14px;padding:9px 13px;max-width:78%;}
.msg.mine .bubble{background:var(--sky-soft);}
.msg .who{font-size:11px;font-weight:700;color:var(--ink-2);margin-bottom:3px;}
.msg .who .when{color:var(--muted-2);font-weight:500;margin-left:6px;}
.msg .body{font-size:13.5px;color:var(--ink);line-height:1.45;}
.msg-form{display:flex;gap:10px;margin-top:14px;border-top:1px solid var(--line);padding-top:14px;}
.msg-form .inp{flex:1;}

@media (max-width:900px){
  .team-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));}
  .msg .bubble{max-width:84%;}
}

/* ============================================================
   Admin console
   ============================================================ */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;}
.stat{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 20px;}
.stat .sv{font-family:var(--serif);font-size:32px;font-weight:600;color:var(--blue);line-height:1;}
.stat .sl{font-size:12.5px;color:var(--muted);margin-top:6px;font-weight:600;}

.table{width:100%;border-collapse:collapse;font-size:13.5px;}
.table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-2);
  font-weight:700;padding:8px 12px;border-bottom:1px solid var(--line);white-space:nowrap;}
.table td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle;}
.table tr:last-child td{border-bottom:none;}
.table td.muted{color:var(--muted);}
.table .linkbtn{margin-right:8px;}
.pill{display:inline-block;background:var(--sky-soft);color:var(--blue);font-size:11px;font-weight:700;
  border-radius:999px;padding:3px 10px;}

@media (max-width:900px){
  .table{font-size:12.5px;} .table th,.table td{padding:8px;}
}

/* Sign in / Register segmented toggle on auth pages */
.auth-switch{display:flex;gap:6px;background:var(--paper);border:1px solid var(--line);
  border-radius:12px;padding:5px;margin-bottom:26px;}
.auth-switch a{flex:1;text-align:center;padding:10px 12px;border-radius:8px;
  font-size:13.5px;font-weight:700;color:var(--muted);transition:.15s;}
.auth-switch a.on{background:var(--blue);color:#fff;box-shadow:0 4px 12px rgba(25,82,150,.22);}
.auth-switch a:not(.on):hover{color:var(--ink-2);}

/* subtle interactive life */
.stat,.team-card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.stat:hover,.team-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px -14px rgba(12,39,66,.28);border-color:var(--sky);}
.rowlink{transition:background .15s ease,transform .15s ease;}
.btn,.btn--soft,.btn--ok{transition:transform .12s ease,box-shadow .18s ease,background .18s ease;}
.btn:active{transform:translateY(1px);}

/* dashboard announcement items */
.annc{padding:11px 0;border-bottom:1px solid var(--line);}
.annc:last-child{border-bottom:none;padding-bottom:0;}
.annc:first-child{padding-top:0;}
.annc .ln{font-size:13.5px;font-weight:700;color:var(--ink);}
.annc .lr{font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.5;}

/* heading tracking for the grotesque display face */
.hero h3,.page-h h1,.form-side h3,.next h3,.topbar .hi h2,.brand-side .welcome h2,.stat .sv{
  letter-spacing:-.012em;}