/* Cox's Bazar Surf Hub · Member account
   Brand: Navy #0A2540, Deep Navy #060F1A, Gold #C8A84B, Teal #0FB9B1, Orange #FF7A00, Cream #F4F0E6.
   Accessibility rule: never white text on teal or orange; use navy on those. */
:root{
  --bg:#060F1A; --bg2:#0A1A2B; --card:#0D2136; --card2:#10283F; --line:rgba(244,240,230,.10); --line2:rgba(244,240,230,.18);
  --tx:#F4F0E6; --tx2:rgba(244,240,230,.74); --tx3:rgba(244,240,230,.52);
  --navy:#0A2540; --gold:#C8A84B; --gold2:#E2C877; --teal:#0FB9B1; --orange:#FF7A00;
  --ok:#2BBF83; --warn:#F2B230; --bad:#EF5350;
  --r:16px; --r2:12px; --sh:0 14px 40px rgba(0,0,0,.35);
  --f:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --fd:'Cormorant Garamond',Georgia,serif; --fn:'Bebas Neue','DM Sans',sans-serif;
  --fb:'Hind Siliguri','Noto Sans Bengali','DM Sans',sans-serif;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px); --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
  --top:60px; --tabs:64px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
html,body{margin:0;background:var(--bg);color:var(--tx);font-family:var(--f);font-size:15.5px;line-height:1.5;-webkit-font-smoothing:antialiased}
body{background:radial-gradient(900px 500px at 10% -10%,rgba(15,185,177,.10),transparent 60%),radial-gradient(900px 600px at 110% 0%,rgba(200,168,75,.10),transparent 60%),var(--bg);min-height:100vh;overscroll-behavior-y:none}
body.bn{font-family:var(--fb)}
a{color:var(--gold2);text-decoration:none}
a,button,input,select,textarea,label,summary{touch-action:manipulation}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{margin:0 0 .35em;line-height:1.15}
h1{font-family:var(--fd);font-weight:600;font-size:2.1rem;letter-spacing:.005em}
h2{font-family:var(--fd);font-weight:600;font-size:1.55rem}
h3{font-size:1rem;font-weight:700;display:flex;align-items:center;gap:8px}
body.bn h1,body.bn h2{font-family:var(--fb);font-weight:600}
p{margin:.3em 0 .7em}
small{display:block;color:var(--tx3);font-size:.8rem}
.muted{color:var(--tx3)} .small{font-size:.82rem} .center{text-align:center}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em}
.eyebrow{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:4px}
body.bn .eyebrow{letter-spacing:.02em;text-transform:none;font-size:.8rem}
.ic{width:18px;height:18px;flex:none;display:inline-block;vertical-align:-3px}
.chev{opacity:.5;margin-left:auto}

/* ── boot ── */
.boot{min-height:100vh;display:grid;place-items:center;align-content:center;gap:18px}
.boot .shmark{margin-bottom:6px}
.spin{width:18px;height:18px;border:2px solid var(--line2);border-top-color:var(--gold);border-radius:50%;display:inline-block;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading{display:flex;align-items:center;gap:10px;color:var(--tx3);padding:40px 0;justify-content:center}
.loading.sm{padding:10px 0;justify-content:flex-start}

/* ── shell ── */
#top{position:sticky;top:0;z-index:30;height:calc(var(--top) + var(--sat));padding:var(--sat) calc(16px + var(--sar)) 0 calc(16px + var(--sal));display:flex;align-items:center;gap:12px;background:rgba(6,15,26,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
#top .brand.shmark img{height:30px}
#top .brand{min-width:0;flex-shrink:1}
.top-r .btn{white-space:nowrap}
@media(max-width:480px){#top{gap:8px}#top .brand.shmark{gap:8px}#top .brand.shmark img{height:24px}#top .brand .shmark-t{font-size:.95rem}.top-r{gap:6px}.lang button{padding:7px 9px}.top-r .btn{padding-left:12px;padding-right:12px}}
@media(max-width:374px){#top .brand .shmark-t{display:none}}
.top-r{margin-left:auto;display:flex;align-items:center;gap:8px}
.lang{display:inline-flex;border:1px solid var(--line2);border-radius:999px;overflow:hidden}
.lang button{background:none;border:0;padding:7px 11px;font-size:.78rem;cursor:pointer;color:var(--tx2);min-height:34px}
.lang button.on{background:var(--gold);color:var(--navy);font-weight:700}
.icon-btn{background:none;border:1px solid var(--line2);color:var(--tx);border-radius:50%;width:38px;height:38px;display:inline-grid;place-items:center;cursor:pointer}
main{max-width:1080px;margin:0 auto;padding:18px calc(16px + var(--sar)) calc(var(--tabs) + 30px + var(--sab)) calc(16px + var(--sal))}
#tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;justify-content:space-around;background:rgba(10,26,43,.97);border-top:1px solid var(--line);padding:6px calc(4px + var(--sar)) calc(6px + var(--sab)) calc(4px + var(--sal));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
#tabs a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 2px;color:var(--tx3);font-size:.7rem;min-width:0}
#tabs a .ic{width:23px;height:23px}
#tabs a.on{color:var(--gold2)}
@media (min-width:900px){
  #tabs{position:sticky;top:calc(var(--top) + var(--sat));bottom:auto;justify-content:center;gap:6px;padding:8px 16px;border-top:0;border-bottom:1px solid var(--line);background:rgba(6,15,26,.86)}
  #tabs a{flex:none;flex-direction:row;gap:8px;padding:8px 16px;border-radius:999px;font-size:.88rem}
  #tabs a .ic{width:18px;height:18px}
  #tabs a.on{background:rgba(200,168,75,.12)}
  main{padding-bottom:60px}
}

/* ── building blocks ── */
.card{display:block;background:linear-gradient(180deg,var(--card),rgba(13,33,54,.85));border:1px solid var(--line);border-radius:var(--r);padding:18px;color:inherit;margin-bottom:14px}
a.card:hover{border-color:var(--line2)}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.card-h h3,.card-h h2{margin:0}
.link{font-weight:700;font-size:.88rem}
.stack>*+*{margin-top:10px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 18px;border-radius:12px;border:1px solid var(--line2);background:rgba(255,255,255,.04);color:var(--tx);font-weight:700;font-size:.95rem;cursor:pointer;text-decoration:none;transition:transform .08s,background .15s}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.55;cursor:wait}
.btn.primary{background:linear-gradient(135deg,var(--gold),#E0B85A);border-color:transparent;color:var(--navy)}
.btn.teal{background:var(--teal);border-color:transparent;color:var(--navy)}
.btn.danger{background:var(--bad);border-color:transparent;color:#fff}
.btn.ghost{background:none}
.btn.full{width:100%}
.btn.sm{min-height:36px;padding:6px 12px;font-size:.84rem;border-radius:10px}
.badge{display:inline-flex;align-items:center;gap:4px;font-size:.72rem;font-weight:700;letter-spacing:.03em;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--tx2);white-space:nowrap}
.badge.ok{background:rgba(43,191,131,.16);color:#7FE3B6}.badge.warn{background:rgba(242,178,48,.16);color:#FFD27A}.badge.bad{background:rgba(239,83,80,.16);color:#FFA7A5}.badge.gold{background:rgba(200,168,75,.18);color:var(--gold2)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line2);background:none;color:var(--tx2);padding:8px 13px;border-radius:999px;font-size:.86rem;cursor:pointer;min-height:38px}
.chip.on{background:var(--tx);color:var(--navy);border-color:var(--tx);font-weight:700}
.progress{height:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;margin:8px 0}
.progress.lg{height:10px}
.progress>i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--gold));border-radius:99px}
.list .item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);color:inherit}
.list .item:last-child{border-bottom:0}
.item .main{flex:1;min-width:0}.item .main b{display:block}
.item .side{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:6px 0 12px;font-size:.92rem}
.kv dt{color:var(--tx3)}.kv dd{margin:0}
.empty{text-align:center;color:var(--tx3);padding:24px 8px}.empty.err{color:#FFA7A5}
.banner{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--r2);background:rgba(200,168,75,.1);border:1px solid rgba(200,168,75,.35);color:var(--tx);margin-bottom:14px}
.banner.warn{background:rgba(242,178,48,.12);border-color:rgba(242,178,48,.4)}
.banner.bad{background:rgba(239,83,80,.12);border-color:rgba(239,83,80,.45)}
.banner .ic{color:var(--gold2)}
.page-h{margin:4px 0 16px}
.back{display:inline-flex;align-items:center;gap:4px;color:var(--tx3);font-size:.88rem;margin-bottom:6px}
.hero-card{background:linear-gradient(135deg,rgba(15,185,177,.14),rgba(200,168,75,.12)),var(--card);border:1px solid var(--line2);border-radius:20px;padding:24px 20px;margin-bottom:14px}
.seg-tabs{display:flex;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:12px;padding:4px;margin-bottom:14px;gap:4px}
.seg-tabs button{flex:1;background:none;border:0;border-radius:9px;padding:10px;color:var(--tx2);font-weight:700;cursor:pointer;min-height:42px}
.seg-tabs button.on{background:var(--card2);color:var(--tx);box-shadow:inset 0 0 0 1px var(--line2)}
.count{display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:10px;background:var(--gold);color:var(--navy);font-size:.72rem;margin-left:4px;padding:0 5px}

/* forms */
.form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 14px}
.form>*{min-width:0}
.form .full,.form .btn.full{grid-column:1/-1}
.fld{display:flex;flex-direction:column;gap:5px;min-width:0}
.fld>span,.lbl{font-size:.8rem;font-weight:700;color:var(--tx2)}
.fld i{color:var(--gold);font-style:normal}
input,select,textarea{width:100%;background:rgba(0,0,0,.25);border:1px solid var(--line2);border-radius:11px;padding:11px 12px;outline:none;min-height:46px;font-size:16px}
input:focus,select:focus,textarea:focus{border-color:var(--gold)}
input:disabled{opacity:.7}
textarea{resize:vertical}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--tx2);cursor:pointer;margin:8px 0}
.chk input{width:22px;height:22px;min-height:0;flex:none;accent-color:var(--gold);margin-top:1px}
.sig{font-family:var(--fd);font-size:1.4rem !important;font-style:italic}
@media (max-width:640px){.form{grid-template-columns:minmax(0,1fr)}}

/* toasts + sheets */
#toasts{position:fixed;left:50%;bottom:calc(var(--tabs) + 18px + var(--sab));transform:translateX(-50%);z-index:90;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:calc(100% - 32px);max-width:440px}
.toast{background:#F4F0E6;color:var(--navy);padding:12px 16px;border-radius:12px;font-weight:700;font-size:.9rem;box-shadow:var(--sh);transition:opacity .3s,transform .3s;text-align:center}
.toast.err{background:#FFD3D1;color:#5A0B09}
.toast.out{opacity:0;transform:translateY(8px)}
.sheet-wrap{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .18s}
.sheet-wrap.in{opacity:1}
.sheet{background:var(--bg2);border:1px solid var(--line2);border-radius:22px 22px 0 0;width:100%;max-width:560px;max-height:calc(92vh - var(--sat));display:flex;flex-direction:column;padding-bottom:var(--sab);transform:translateY(30px);transition:transform .2s}
.sheet-wrap.in .sheet{transform:none}
.sheet-h{display:flex;align-items:center;gap:10px;padding:16px 18px 10px}
.sheet-h h3{flex:1;margin:0;font-size:1.05rem}
.sheet-b{padding:4px 18px 16px;overflow:auto}
.sheet-f{display:flex;gap:10px;padding:12px 18px 16px;border-top:1px solid var(--line)}
.sheet-f .btn{flex:1}
@media (min-width:700px){.sheet-wrap{align-items:center}.sheet{border-radius:22px;padding-bottom:0}}
.menu a,.menu-out{display:flex;align-items:center;gap:14px;padding:15px 4px;border-bottom:1px solid var(--line);color:var(--tx);font-weight:600;background:none;border-left:0;border-right:0;border-top:0;width:100%;cursor:pointer;font-size:1rem}
.menu .ic{width:22px;height:22px;color:var(--gold2)}
.menu-out{color:var(--tx3);border-bottom:0}
.done-box{text-align:center}
.done-box>.ic{width:54px;height:54px;color:var(--ok);margin:6px auto 10px;display:block}

/* ── auth + join ── */
.auth{display:grid;place-items:center;min-height:calc(100vh - var(--top) - 80px);padding:10px 0}
.auth-card{width:100%;max-width:440px;background:var(--card);border:1px solid var(--line2);border-radius:22px;padding:28px 22px;box-shadow:var(--sh)}
.auth-card .form{grid-template-columns:minmax(0,1fr)}
.auth-ic{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:rgba(200,168,75,.14);color:var(--gold2);margin-bottom:12px}
.auth-ic.ok{background:rgba(43,191,131,.15);color:var(--ok)}
.auth-ic .ic{width:26px;height:26px}
.auth-alt{margin-top:18px;text-align:center;color:var(--tx3);font-size:.92rem}
.steps{display:flex;gap:8px;list-style:none;padding:0;margin:0 0 18px;counter-reset:s}
.steps li{flex:1;display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--tx3);font-weight:600}
.steps li span{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line2);flex:none;font-size:.8rem}
.steps li.on{color:var(--tx)}.steps li.on span{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.steps li.done span{background:rgba(43,191,131,.2);color:var(--ok);border-color:transparent}
.steps li span .ic{width:14px;height:14px}
.plans{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-bottom:18px}
.plan{text-align:left;background:var(--card);border:1px solid var(--line2);border-radius:18px;padding:18px;cursor:pointer;color:var(--tx);display:flex;flex-direction:column;gap:6px;transition:border-color .15s,transform .1s}
.plan:hover{border-color:var(--gold)}
.plan.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.plan.closed{opacity:.5;cursor:not-allowed}
.plan-top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start;flex-wrap:wrap}
.plan-top b{flex:1 1 140px;min-width:0}
.plan-top .badge{flex:none}
.plan-top b{font-family:var(--fd);font-size:1.35rem;font-weight:600}
.plan-price{font-family:var(--fn);font-size:1.9rem;letter-spacing:.03em;color:var(--gold2)}
.plan-price small{display:inline;font-family:var(--f);font-size:.8rem;letter-spacing:0;color:var(--tx3)}
.plan-note{font-size:.82rem;color:var(--tx2)}
.plan ul,.perks{list-style:none;padding:0;margin:6px 0 0;display:flex;flex-direction:column;gap:6px;font-size:.88rem;color:var(--tx2)}
.plan li,.perks li{display:flex;gap:8px;align-items:flex-start}
.plan li .ic,.perks li .ic{color:var(--teal);width:16px;height:16px;margin-top:2px}
.split{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
.sum{position:sticky;top:130px}
.sum-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line)}
@media (max-width:860px){.split{grid-template-columns:minmax(0,1fr)}.sum{position:static;order:-1}}

/* ── home ── */
.hello{display:flex;justify-content:space-between;align-items:flex-end;margin:6px 0 14px}
.hello h1{font-size:2.3rem;margin:0 0 8px}
.dash{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
.dash>.card{margin-bottom:14px}
@media (max-width:700px){.dash{grid-template-columns:minmax(0,1fr)}}
.pass-mini,.journey-mini,.refer-mini,.link-card{display:flex;align-items:center;gap:14px}
.pass-mini b,.journey-mini b,.refer-mini b,.link-card b{display:block}
.mini-qr{width:72px;height:72px;border-radius:10px;overflow:hidden;background:#fff;flex:none;display:grid;place-items:center}
.mini-qr .qr{width:72px;height:72px}
.ring{--p:0;width:64px;height:64px;border-radius:50%;flex:none;display:grid;place-items:center;background:conic-gradient(var(--gold) calc(var(--p)*1%),rgba(255,255,255,.08) 0)}
.ring span{width:52px;height:52px;border-radius:50%;background:var(--card);display:grid;place-items:center;font-weight:700;font-size:.86rem}
.refer-mini>div:first-child .ic{width:30px;height:30px;color:var(--gold2)}
.next{display:flex;gap:14px;align-items:center}
.next-d{display:flex;flex-direction:column;align-items:center;min-width:64px;padding:8px;border-radius:12px;background:rgba(200,168,75,.1);border:1px solid rgba(200,168,75,.3)}
.next-d b{font-size:.84rem}.next-d span{font-size:.78rem;color:var(--tx3)}
.surf-now{display:flex;gap:18px;align-items:center}
.surf-now .score{font-family:var(--fn);font-size:2rem;color:var(--gold2);display:block;line-height:1}
.surf-now .score i{font-style:normal;font-size:.9rem;color:var(--tx3)}
.lvl{display:flex;gap:12px;align-items:center}
.lvl-n{display:inline-grid;place-items:center;min-width:40px;height:40px;border-radius:50%;border:1.5px solid var(--lc,var(--gold));color:var(--lc,var(--gold));font-family:var(--fn);font-size:1.3rem;flex:none}
.lvl-n .ic{width:18px;height:18px}

/* stars (same widget as the website forecast) */
.st{position:relative;display:inline-block;line-height:1;white-space:nowrap;vertical-align:middle;font-size:1rem;letter-spacing:.04em}
.st-b{color:rgba(240,237,232,.25)}
.st-f{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;color:#FFC857}

/* ── pass ── */
.pass-wrap{max-width:420px;margin:0 auto}
.pass{background:linear-gradient(160deg,#0F2E4D,#0A2540 55%,#08192C);border:1px solid rgba(200,168,75,.45);border-radius:24px;padding:20px;text-align:center;box-shadow:var(--sh);position:relative;overflow:hidden;margin-bottom:14px}
.pass::before{content:'';position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,var(--teal),var(--gold))}
.pass.bad::before{background:var(--bad)}.pass.warn::before{background:var(--warn)}
.pass-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.pass-top .shmark{min-width:0}
.pass-qr{background:#fff;border-radius:16px;padding:10px;display:inline-block}
.pass-qr .qr{display:block;width:min(264px,70vw);height:auto}
.pass-name{font-family:var(--fd);font-size:1.7rem;font-weight:600;margin-top:14px}
.pass-meta{display:flex;justify-content:center;gap:6px 8px;flex-wrap:wrap;color:var(--tx2);font-size:.85rem;margin-top:8px}
.pass-meta span{padding:3px 10px;border:1px solid var(--line2);border-radius:999px}
.pass-day{margin-top:14px;font-size:.82rem;color:var(--gold2);display:flex;align-items:center;justify-content:center;gap:6px}

/* ── journey ── */
.journey{list-style:none;padding:0;margin:0;position:relative}
.journey li{display:flex;gap:14px;padding:0 0 18px;position:relative}
.journey li::before{content:'';position:absolute;left:17px;top:36px;bottom:0;width:2px;background:var(--line)}
.journey li:last-child::before{display:none}
.journey .dot{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;border:1.5px solid var(--line2);font-weight:700;font-size:.85rem;background:var(--bg);position:relative;z-index:1}
.journey li.done .dot{background:rgba(43,191,131,.18);border-color:transparent;color:var(--ok)}
.journey li.next .dot{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.journey li.done b{color:var(--tx2)}
.j-body{padding-top:6px}.j-body b{display:block}.j-body .btn{margin-top:10px}

/* ── booking ── */
.prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;margin-bottom:14px}
.prod{display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:left;background:var(--card);border:1px solid var(--line2);border-radius:14px;padding:14px;color:var(--tx);cursor:pointer;min-height:64px}
.prod b{display:block}.prod.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.prod-p{font-weight:700;color:var(--gold2);white-space:nowrap}
.days{display:flex;gap:8px;overflow-x:auto;padding:4px 0 10px;scrollbar-width:none}
.days::-webkit-scrollbar{display:none}
.day{flex:none;width:58px;padding:8px 0;border-radius:12px;border:1px solid var(--line2);background:none;color:var(--tx);cursor:pointer;display:flex;flex-direction:column;align-items:center}
.day small{font-size:.7rem}.day b{font-size:1.15rem}
.day.on{background:var(--gold);border-color:var(--gold);color:var(--navy)}.day.on small{color:var(--navy)}
.sum-line{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--line);font-weight:600}
.sum-line b{color:var(--gold2)}

/* ── membership / pay ── */
.pay{border-color:rgba(242,178,48,.45)}
.pay-h{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-bottom:10px}
.pay-h h3{font-family:var(--fn);font-size:2rem;letter-spacing:.03em;color:var(--gold2);margin:0}
.ref,.code{display:flex;flex-direction:column;align-items:flex-end;gap:2px;background:rgba(0,0,0,.25);border:1px dashed var(--gold);border-radius:12px;padding:8px 12px;color:var(--tx);cursor:pointer}
.ref b,.code b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.1rem;letter-spacing:.08em;white-space:nowrap}
.ref .ic,.code .ic{width:14px;height:14px;color:var(--gold2)}
.code{align-items:center;margin:14px 0;padding:14px 18px;width:100%}
.code b{font-size:1.6rem}
.pay-steps{padding-left:20px;margin:6px 0 10px;display:flex;flex-direction:column;gap:6px}
.plan-card h2{margin:0}

/* ── passport ── */
.ladder .lv{padding:0;overflow:hidden;border-left:3px solid var(--lc)}
.lv>summary{list-style:none;display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer}
.lv>summary::-webkit-details-marker{display:none}
.lv>summary .main{flex:1}.lv>summary .main b{display:block}
.lv.future{opacity:.72}
.lv>p,.lv>.skills{margin-left:16px;margin-right:16px}
.skills{list-style:none;padding:0;margin:0 0 14px}
.skills li{display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.skills li b{display:block;font-size:.93rem}
.sk-dot{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line2);flex:none;margin-top:3px}
.skills li.working .sk-dot{background:linear-gradient(90deg,var(--teal) 50%,transparent 50%);border-color:var(--teal)}
.skills li.achieved .sk-dot{background:var(--gold);border-color:var(--gold)}
.skills li.achieved b{color:var(--gold2)}
.by{font-style:italic;color:var(--tx2) !important}
.note{color:var(--tx2) !important;border-left:2px solid var(--gold);padding-left:8px;margin-top:4px}
.certs{display:flex;flex-direction:column;gap:8px}
.cert-chip{display:flex;gap:12px;align-items:center;text-align:left;background:rgba(0,0,0,.2);border:1px solid var(--line2);border-left:3px solid var(--lc);border-radius:12px;padding:10px 12px;color:var(--tx);cursor:pointer}
.cert-chip b{display:block}
.cert-card{background:#F4F0E6;color:#0A2540;border-radius:14px;padding:22px 18px;text-align:center;border:2px solid #C8A84B;position:relative;margin-bottom:14px}
.cert-card::before{content:'';position:absolute;inset:0 0 auto 0;height:6px;background:var(--lc);border-radius:12px 12px 0 0}
.cert-top{display:flex;justify-content:space-between;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:#8a6d1f;font-weight:700}
.cert-lvl{margin-top:14px;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;font-weight:700}
.cert-card h2{color:#0A2540;margin:.1em 0 0;font-size:2rem}
.cert-bn{font-family:var(--fb);color:#5b6b7a}
.cert-card p{color:#3b4a5a;margin:12px 0 0}
.cert-name{font-family:var(--fd);font-size:1.8rem;font-weight:600;border-bottom:1px solid #C8A84B;display:inline-block;padding:0 16px 2px}
.cert-meta{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:16px}
.cert-meta small{color:#8a6d1f;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase}
.cert-meta b{font-size:.86rem}
.clips{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.clips figure{margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:rgba(0,0,0,.2)}
.clip-v{aspect-ratio:16/10;display:grid;place-items:center;background:#000}
.clip-v video,.clip-v img{width:100%;height:100%;object-fit:cover;display:block}
.clips figcaption{padding:10px 12px}.clips figcaption b{display:block}

/* ── forecast ── */
.beaches{display:flex;gap:8px;overflow-x:auto;padding-bottom:10px;margin-bottom:6px;scrollbar-width:none}
.beaches::-webkit-scrollbar{display:none}
.beach{flex:none;min-width:150px;text-align:left;background:var(--card);border:1px solid var(--line2);border-radius:14px;padding:12px;color:var(--tx);cursor:pointer;display:flex;flex-direction:column;gap:4px}
.beach.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.fc-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.fc-top h2{margin:0}
.fc-score{text-align:right}.fc-score .st{font-size:1.2rem}
.fc-score b{font-family:var(--fn);font-size:2.3rem;color:var(--gold2);display:block;line-height:1}
.fc-score b i{font-style:normal;font-size:.9rem;color:var(--tx3)}
.hours,.days7{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-bottom:14px}
.hours>div,.days7>div{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 2px;border-radius:10px;background:rgba(0,0,0,.18);font-size:.8rem}
.hours .st,.days7 .st{font-size:.56rem}
.hours .now,.days7 .now{background:rgba(200,168,75,.14);outline:1px solid rgba(200,168,75,.4)}

/* ── waiver ── */
.w-sum{padding-left:20px;margin:6px 0 12px;display:flex;flex-direction:column;gap:8px;font-size:.9rem}
.w-sum b{display:block}.w-sum span{color:var(--tx2)}
.yn{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:.93rem}
.yn-b{display:flex;gap:6px;flex:none}
.yn-b label{cursor:pointer;position:relative}
.yn-b input{position:absolute;opacity:0;width:1px;height:1px;min-height:0}
.yn-b b{display:inline-grid;place-items:center;min-width:58px;min-height:40px;border:1px solid var(--line2);border-radius:10px;font-size:.88rem}
.yn-b input:checked+b{background:var(--tx);color:var(--navy);border-color:var(--tx)}
.yn-b input[value=yes]:checked+b{background:var(--warn);border-color:var(--warn);color:var(--navy)}
.yn-b input:focus-visible+b{outline:2px solid var(--gold)}

/* Site mark: identical to the public website nav (wave icon + Cormorant wordmark) */
.shmark{display:inline-flex;align-items:center;gap:12px;color:#F0EDE8;text-decoration:none;line-height:1}
.shmark img{height:34px;width:auto;max-width:150px;object-fit:contain;flex-shrink:0;display:block}
.shmark-t{font-family:'Cormorant Garamond',Georgia,serif!important;font-size:1.12rem;font-weight:700;letter-spacing:-.005em;white-space:nowrap;color:#F0EDE8}
.shmark-t em{font-style:italic!important;color:#FFC857;font-weight:600}
.shmark.lg{flex-direction:column;gap:12px}
.shmark.lg img{height:56px;max-width:none}
.shmark.lg .shmark-t{font-size:1.7rem}
.shmark.sm img{height:26px}
.shmark.sm .shmark-t{font-size:.98rem}

/* ── courses (2026-09-29) ── */
.course-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
@media (max-width:700px){.course-grid{grid-template-columns:minmax(0,1fr)}}
.course-card{border-top:3px solid var(--ac,var(--gold));position:relative}
.course-t{font-family:var(--fd);font-size:1.35rem;font-weight:600;margin:2px 0 2px;display:block}
body.bn .course-t{font-family:var(--fb)}
.course-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.84rem;color:var(--tx2)}
.course-next{display:flex;align-items:center;gap:12px;margin-top:12px;padding:12px;border-radius:12px;background:rgba(15,185,177,.10);border:1px solid rgba(15,185,177,.28)}
.course-next .ic{color:var(--teal)}
.course-next span{flex:1;min-width:0}.course-next b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.course-next.done{background:rgba(43,191,131,.10);border-color:rgba(43,191,131,.3)}.course-next.done .ic{color:var(--ok)}
.sec-h{margin:10px 0 12px;font-size:1.3rem}
.mini-course{margin-top:8px}.mini-course b{font-size:.92rem}.mini-course .progress{margin:6px 0 2px}
.course-hero{background:linear-gradient(135deg,rgba(15,185,177,.12),rgba(200,168,75,.10)),var(--card);border:1px solid var(--line2);border-top:4px solid var(--ac,var(--gold));border-radius:20px;padding:22px 20px;margin-bottom:14px}
.course-hero h1{margin-bottom:4px}
.ring-row{display:flex;align-items:center;gap:14px;margin:14px 0 16px}
.ring-row b{display:block}
.banner.ok-b{background:rgba(43,191,131,.12);border-color:rgba(43,191,131,.4);margin:0}.banner.ok-b .ic{color:var(--ok)}
.mod-h{margin-bottom:4px}.mod-h h3{margin:2px 0}
.lessons .item{padding:12px 2px}
.tick{width:26px;height:26px;border-radius:50%;border:2px solid var(--line2);display:grid;place-items:center;flex:none}
.tick.on{background:var(--teal);border-color:var(--teal);color:var(--navy)}.tick .ic{width:15px;height:15px}
details.more{border-bottom:1px solid var(--line);padding:10px 0}details.more:last-child{border-bottom:0}
details.more summary,.ex details summary,.vid details summary{cursor:pointer;font-weight:700;color:var(--gold2)}
.rich{line-height:1.65}.rich p{margin:.2em 0 .9em}.rich ul,.rich ol{padding-left:1.3em;margin:.3em 0 .9em}.rich li{margin:.25em 0}
.rich h2,.rich h3,.rich h4{font-family:var(--f);font-size:1.05rem;font-weight:700;margin:1.1em 0 .4em;color:var(--gold2)}
.rich table{width:100%;border-collapse:collapse;font-size:.9rem;margin:.6em 0 1em;display:block;overflow-x:auto}
.rich th,.rich td{border:1px solid var(--line2);padding:7px 9px;text-align:left;vertical-align:top}.rich th{background:rgba(255,255,255,.05)}
.rich img{max-width:100%;border-radius:10px}
.rich .lib-card{border:1px solid var(--line2);border-left:4px solid var(--gold);border-radius:10px;padding:12px 14px;margin:1em 0;background:rgba(200,168,75,.07)}
.rich .lib-card.teal{border-left-color:var(--teal);background:rgba(15,185,177,.07)}.rich .lib-card.red,.rich .lib-card.danger{border-left-color:var(--bad);background:rgba(239,83,80,.07)}
.rich .lib-card-h{font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold2);margin-bottom:4px}
body.bn .rich:has(.bn) .en{display:none}body:not(.bn) .rich:has(.en) .bn{display:none}
.lesson-h{margin:4px 0 14px}.lesson-h h1{margin-bottom:4px}
.lesson-body{font-size:1rem}
.l-steps{padding-left:1.4em;margin:0}.l-steps li{margin:.5em 0;line-height:1.55}
.ex-list .ex{padding:12px 0;border-bottom:1px solid var(--line)}.ex-list .ex:last-child{border-bottom:0}
.ex-h{display:flex;align-items:center;gap:10px}.ex-h .main{flex:1;min-width:0}.ex-h b{display:block}
.ex-b{font-family:var(--fn);font-size:1.1rem;color:var(--gold);min-width:26px}
.ex p{margin:.4em 0}.ex details{margin-top:6px}.ex details p{font-size:.9rem;color:var(--tx2)}
.ex-vid:not(:empty){margin-top:10px}
.vid-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:640px){.vid-grid{grid-template-columns:minmax(0,1fr)}}
.vid{margin:0}.vid figcaption{margin-top:8px}.vid figcaption b{display:block;font-size:.92rem}.vid details{margin-top:6px;font-size:.88rem}.warn-t{color:#FFD27A}
.vid-thumb{position:relative;display:block;width:100%;padding:0;border:0;border-radius:12px;overflow:hidden;cursor:pointer;background:#000;aspect-ratio:16/9}
.vid-thumb img{width:100%;height:100%;object-fit:cover;display:block;opacity:.85}
.vid-play{position:absolute;inset:0;display:grid;place-items:center}.vid-play .ic{width:54px;height:54px;padding:14px;border-radius:50%;background:rgba(6,15,26,.75);color:#fff}
.yt{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000}.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-row{display:flex;align-items:center;gap:10px;padding:10px 0}
.lesson-bar{position:sticky;bottom:calc(var(--tabs) + var(--sab) + 8px);display:flex;gap:8px;padding:10px;margin-top:6px;background:rgba(10,26,43,.96);border:1px solid var(--line2);border-radius:16px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:20}
.lesson-bar .grow{flex:1}.lesson-bar .btn{min-height:48px}
@media (min-width:900px){.lesson-bar{bottom:16px}}

/* ── final test ── */
.test-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(68px,1fr));gap:8px;margin:14px 0 6px}
.test-facts div{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:12px;padding:10px;text-align:center}
.test-facts b{display:block;font-family:var(--fn);font-size:1.9rem;line-height:1;color:var(--gold2)}
.test-rules{margin:0 0 14px;padding-left:1.2em;display:grid;gap:6px;color:var(--tx2)}
.test-bar{display:flex;justify-content:space-between;align-items:center;font-weight:700;color:var(--tx2);font-size:.9rem}
.test-time{font-family:var(--fn);font-size:1.4rem;color:var(--gold2);letter-spacing:.04em}.test-time.low{color:#FF8A80}
.test-q h2{font-family:var(--f);font-weight:700;font-size:1.2rem;line-height:1.4;margin-bottom:12px}
body.bn .test-q h2{font-family:var(--fb)}
.test-img{width:100%;border-radius:12px;margin-bottom:10px}
.test-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px;margin:12px 0 6px}
.test-grid button{min-height:44px;border-radius:10px;border:1px dashed var(--line2);background:none;color:var(--tx3);font-weight:700;cursor:pointer}
.test-grid button.on{border-style:solid;border-color:var(--teal);background:rgba(15,185,177,.14);color:var(--tx)}
.test-result.pass{border-top-color:#2BBF83}.test-result.fail{border-top-color:#EF5350}
.test-review{display:grid;gap:8px}
.tr-item{border:1px solid var(--line);border-radius:12px;padding:10px 12px;border-left:4px solid #2BBF83}.tr-item.bad{border-left-color:#EF5350}
.tr-h{display:flex;gap:10px;align-items:flex-start}.tr-h b{flex:1;font-weight:600}
.tr-n{flex:none;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;font-size:.75rem;font-weight:800}
.tr-v .ic{color:#2BBF83}.tr-item.bad .tr-v .ic{color:#EF5350}
.tr-item p{margin:.3em 0 0 34px}
.test-card{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:3px solid var(--gold)}
.test-card.passed{border-top-color:#2BBF83}.test-card.locked{opacity:.8}
.test-card .btn{flex:none}
.course-cert{display:block;text-decoration:none}
.course-cert .cert-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;font-size:.8rem;color:#3B4F63;margin-top:6px}
.course-cert .link{color:#0B7F79;display:inline-flex;gap:6px;align-items:center;margin-top:10px}

/* ── certificate ── */
.certificate{background:#F4F0E6;color:#0A2540;border-radius:16px;padding:14px;margin-bottom:14px;box-shadow:var(--sh)}
.ce-frame{border:2px solid #C8A84B;outline:1px solid #C8A84B;outline-offset:-8px;border-radius:10px;padding:28px 22px;text-align:center;display:grid;gap:6px;justify-items:center}
.ce-brand{display:flex;align-items:center;gap:10px;font-family:var(--fd);font-size:1.35rem;font-weight:700;color:#0A2540}.ce-brand em{font-style:normal;color:#8A6D1F}.ce-brand img{height:30px;width:auto}
.ce-kicker{font-family:var(--fd);font-size:1.7rem;font-weight:700;letter-spacing:.02em;margin-top:6px}
.ce-small{margin:0;color:#4A5B6C;font-size:.92rem}
.ce-name{font-family:var(--fd);font-size:2.3rem;font-weight:700;line-height:1.1;border-bottom:1px solid #C8A84B;padding:0 20px 4px}
.ce-course{font-size:1.25rem;font-weight:800;color:#0B6E69}
body.bn .ce-kicker,body.bn .ce-name{font-family:var(--fb)}
.ce-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin-top:10px}
.ce-meta small{color:#6B7A89;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}.ce-meta b{display:block}
.ce-sign{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;width:100%;margin-top:14px}
.ce-sign small{color:#4A5B6C}.ce-line{display:block;width:180px;border-bottom:1px solid #0A2540;margin-bottom:4px}
.ce-qr svg{display:block}
.ce-verify{margin:6px 0 0;font-size:.78rem;color:#6B7A89}
@media print{
  body{background:#fff!important}
  #top,#tabs,.back,.no-print,#toasts{display:none!important}
  main{padding:0!important;max-width:none}
  .certificate{box-shadow:none;margin:0;border-radius:0;page-break-inside:avoid}
  .ce-frame{min-height:90vh;align-content:center}
}


/* ── lesson: tracker, sign-off, coach thread ── */
.badge.info{background:rgba(15,185,177,.16);color:#7FE3DD}
.tick.wait{border-color:var(--warn);color:var(--warn)}.tick.bad{border-color:var(--bad)}
.l-main>*+*,.l-signoff>*,.l-thread>*{margin-top:14px}
.tracker .trk-ex{border-top:1px solid var(--line);padding:12px 0}
.trk-h b{display:block}.trk-h small{margin-bottom:6px}
.trk-grid{display:grid;grid-template-columns:22px 1fr 1fr 44px;gap:6px 8px;align-items:center}
.trk-grid>small{margin:0}.trk-n{text-align:center;color:var(--tx2)}
.trk-grid input[type=text],.trk-grid input:not([type]),.trk-grid input[inputmode]{width:100%;min-width:0;min-height:44px;padding:8px 10px;border-radius:10px;border:1px solid var(--line2);background:var(--bg2);font-size:16px}
.trk-ok{display:grid;place-items:center;min-height:44px;cursor:pointer}
.trk-ok input{position:absolute;opacity:0;width:1px;height:1px}
.trk-ok span{width:34px;height:34px;border-radius:10px;border:2px solid var(--line2);display:grid;place-items:center;color:transparent}
.trk-ok input:checked+span{background:var(--teal);border-color:var(--teal);color:var(--navy)}
.trk-ok input:focus-visible+span{outline:2px solid var(--gold2);outline-offset:2px}
.trk-rpe{margin:14px 0 8px}.trk-rpe label{display:block;margin-bottom:8px}
.rpe-row{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.rpe{min-height:44px;border-radius:10px;border:1px solid var(--line2);background:var(--bg2);font-weight:700;cursor:pointer}
.rpe.on{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.trk-note{display:block;margin:10px 0}.trk-note span{display:block;font-size:.85rem;color:var(--tx2);margin-bottom:6px}
.trk-note textarea,.ask textarea{width:100%;border-radius:12px;border:1px solid var(--line2);background:var(--bg2);padding:10px 12px;font-size:16px;resize:vertical}
.signoff-card.ok{border-color:rgba(43,191,131,.45)}.signoff-card.bad{border-color:rgba(239,83,80,.45)}
.crit{list-style:none;padding:0;margin:8px 0 10px;display:grid;gap:8px}
.crit li{display:flex;gap:10px;align-items:flex-start;line-height:1.4}
.crit li .dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--line2);flex:none;margin-top:2px}
.crit li.ok .ic{color:var(--ok)}.crit li.bad .ic{color:var(--bad)}.crit .ic{width:18px;height:18px;flex:none}
.sop-sign.ok{border-color:rgba(43,191,131,.45)}.sop-sign .row{gap:10px;align-items:center}.sop-sign>*+*{margin-top:10px}
.thread .msgs{display:grid;gap:10px;margin:6px 0 12px}
.msg{max-width:88%}.msg.me{justify-self:end;text-align:right}
.msg .bubble{padding:10px 12px;border-radius:14px;background:var(--card2);white-space:pre-wrap;text-align:left}
.msg.coach .bubble{background:rgba(200,168,75,.14);border:1px solid rgba(200,168,75,.3)}
.msg small{margin-top:3px}
.ask{display:flex;gap:8px;align-items:flex-end}.ask textarea{flex:1}.ask .btn{min-height:48px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.coach-msgs .msg-row{display:block;padding:10px 0;border-top:1px solid var(--line);color:var(--tx)}
.coach-msgs .msg-row.new span{font-weight:700}.coach-msgs .msg-row span{display:block;white-space:pre-wrap}
.course-new{margin:4px 0}
.scn-done.slim .row{gap:10px;align-items:center}.scn-done.slim .row>div{flex:1}