/* ORCA dashboard (web + phone app). Same layout everywhere, dark and light themes. */
@font-face{font-family:"Fraunces";font-weight:100 900;font-display:swap;src:url(/assets/fonts/fraunces-latin-full-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:400;font-display:swap;src:url(/assets/fonts/instrument-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:500;font-display:swap;src:url(/assets/fonts/instrument-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:600;font-display:swap;src:url(/assets/fonts/instrument-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:700;font-display:swap;src:url(/assets/fonts/instrument-sans-latin-700-normal.woff2) format("woff2")}

:root{
  --display:"Fraunces",Georgia,serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:18px;--r-sm:12px;--ease:cubic-bezier(.2,.8,.2,1);
  /* light */
  --bg:#F4EEDF;--surface:#FFFCF4;--surface-2:#F7F1E2;--line:#E4D9BF;--line-2:#EEE6D2;
  --text:#13251C;--text-2:#3E4F43;--muted:#6E7A6E;
  --brand:#1A422F;--brand-2:#4D694E;--cream:#F3EBD6;--accent:#E8661C;--accent-ink:#13251C;
  --up:#15A3A0;--down:#E5484D;--up-text:#0B7A77;--down-text:#B8322F;
  --up-wash:rgba(21,163,160,.12);--down-wash:rgba(229,72,77,.12);
  --warn:#B7791F;--warn-wash:rgba(183,121,31,.14);
  --cell:#ECE4CF;--shadow:0 18px 40px -30px rgba(19,37,28,.45);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#06120D;--surface:#0E1F17;--surface-2:#132A1F;--line:rgba(243,235,214,.10);--line-2:rgba(243,235,214,.06);
  --text:#F3EBD6;--text-2:#C9C7B5;--muted:#8E9A8D;
  --brand:#F3EBD6;--brand-2:#A9BB9C;--accent:#FF7A2E;--accent-ink:#0B1A12;
  --up:#1AA79F;--down:#EA5E48;--up-text:#4FD1C5;--down-text:#FF8A75;
  --up-wash:rgba(26,167,159,.16);--down-wash:rgba(234,94,72,.16);
  --warn:#F2B544;--warn-wash:rgba(242,181,68,.14);
  --cell:#173224;--shadow:0 18px 40px -30px rgba(0,0,0,.9);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#06120D;--surface:#0E1F17;--surface-2:#132A1F;--line:rgba(243,235,214,.10);--line-2:rgba(243,235,214,.06);
    --text:#F3EBD6;--text-2:#C9C7B5;--muted:#8E9A8D;
    --brand:#F3EBD6;--brand-2:#A9BB9C;--accent:#FF7A2E;--accent-ink:#0B1A12;
    --up:#1AA79F;--down:#EA5E48;--up-text:#4FD1C5;--down-text:#FF8A75;
    --up-wash:rgba(26,167,159,.16);--down-wash:rgba(234,94,72,.16);
    --warn:#F2B544;--warn-wash:rgba(242,181,68,.14);
    --cell:#173224;--shadow:0 18px 40px -30px rgba(0,0,0,.9);
    color-scheme:dark;
  }
}
[hidden]{display:none!important}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg)}
body{overflow-x:hidden;font:15px/1.5 var(--sans);color:var(--text);-webkit-font-smoothing:antialiased;min-height:100vh;min-height:100dvh}
button,input,select{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
.num{font-variant-numeric:tabular-nums}
.up{color:var(--up-text)}.down{color:var(--down-text)}.mut{color:var(--muted)}
.h-display{font-family:var(--display);font-weight:760;font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144;letter-spacing:-.01em;line-height:1}

/* ---------- shell ---------- */
.top{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line-2)}
.top .in{max-width:1220px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px;padding-top:max(10px,env(safe-area-inset-top))}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;font:700 14px var(--sans);letter-spacing:.14em;color:var(--text)}
.logo svg{width:30px;color:var(--text)}
.tabs{display:flex;gap:2px;margin-left:18px;background:var(--surface-2);border:1px solid var(--line-2);padding:3px;border-radius:999px}
.tabs button{border:0;background:transparent;padding:7px 14px;border-radius:999px;cursor:pointer;color:var(--text-2);font-weight:600;font-size:14px}
.tabs button[aria-current="page"]{background:var(--surface);color:var(--text);box-shadow:0 1px 0 var(--line)}
.top .sp{flex:1}
.acct{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px 6px 4px 12px;max-width:290px}
.acct select{border:0;background:transparent;font-weight:600;font-size:14px;min-width:0;max-width:210px;cursor:pointer;padding:4px 0}
.dot-live{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none}
.dot-live.on{background:var(--up);box-shadow:0 0 0 3px var(--up-wash)}
.icon-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer;flex:none}
.icon-btn svg{width:18px;height:18px}
main.wrap{max-width:1220px;margin:0 auto;padding:18px 16px 110px}
.banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-radius:var(--r);padding:12px 14px;margin-bottom:16px;border:1px solid var(--line);background:var(--surface)}
.banner.warn{background:var(--warn-wash);border-color:transparent}
.banner.bad{background:var(--down-wash);border-color:transparent}
.banner .t{flex:1;min-width:200px;font-weight:600}
.banner .t small{display:block;font-weight:400;color:var(--text-2)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;text-decoration:none;font-weight:700;font-size:14px;padding:10px 16px;border-radius:999px;transition:transform .2s var(--ease),opacity .2s;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.5;cursor:default}
.btn-accent{background:var(--accent);color:var(--accent-ink)}
.btn-line{background:transparent;border:1px solid var(--line);color:var(--text)}
.btn-soft{background:var(--surface-2);color:var(--text);border:1px solid var(--line-2)}
.btn-full{width:100%}

/* bottom bar on phones */
.bnav{display:none}
@media (max-width:820px){
  .tabs{display:none}
  .acct{max-width:none;flex:1}
  .acct select{max-width:none;flex:1}
  .top .sp{display:none}
  .bnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-top:1px solid var(--line);padding:6px 6px max(8px,env(safe-area-inset-bottom))}
  .bnav button{flex:1;border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;font-size:11.5px;font-weight:600;color:var(--muted);cursor:pointer}
  .bnav button svg{width:22px;height:22px}
  .bnav button[aria-current="page"]{color:var(--text)}
  .bnav button[aria-current="page"] svg{color:var(--accent)}
  .logo span{display:none}
}

/* ---------- layout pieces ---------- */
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:6px 0 14px}
.head h1{font-size:clamp(30px,5vw,46px)}
.head p{color:var(--text-2);margin-top:6px}
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--line-2);border-radius:999px;padding:3px;gap:2px;overflow-x:auto;max-width:100%}
.seg button{border:0;background:transparent;padding:6px 12px;border-radius:999px;font-weight:600;font-size:13px;color:var(--text-2);cursor:pointer;white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--text);box-shadow:0 1px 0 var(--line)}
.grid{display:grid;gap:14px}
.g-hero{grid-template-columns:1.35fr 1fr}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-2{grid-template-columns:1fr 1fr}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-2k{grid-template-columns:1fr 1fr}
.g-3k{grid-template-columns:repeat(3,1fr)}
@media (max-width:520px){.g-3k{grid-template-columns:1fr 1fr}}
@media (max-width:980px){.g-hero{grid-template-columns:1fr}.g-3{grid-template-columns:1fr 1fr}}
@media (max-width:820px){.g-4{grid-template-columns:1fr 1fr}.g-2,.g-3{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow);min-width:0}
.card h2{font:600 15px var(--sans);display:flex;align-items:center;gap:8px;justify-content:space-between}
.card h2 .mut{font-weight:500;font-size:13px}
.card .sub{color:var(--muted);font-size:13px;margin-top:2px}
.lbl{font-size:13px;color:var(--muted)}
.big{font:650 clamp(38px,6vw,56px)/1.02 var(--sans);letter-spacing:-.02em;margin-top:8px}
.mid{font:650 24px/1.1 var(--sans);letter-spacing:-.01em;margin-top:6px}
.stat .v{font:650 22px/1.15 var(--sans);margin-top:4px;letter-spacing:-.01em}
.stat .d{font-size:12.5px;color:var(--muted);margin-top:2px}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--surface-2);color:var(--text-2);white-space:nowrap}
.pill.up{background:var(--up-wash);color:var(--up-text)}.pill.down{background:var(--down-wash);color:var(--down-text)}.pill.warn{background:var(--warn-wash);color:var(--warn)}
.kv{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-2);font-size:14px}
.kv:last-child{border-bottom:0}
.kv span:first-child{color:var(--text-2)}
.kv b{font-weight:600}
.empty{padding:26px 10px;text-align:center;color:var(--muted)}
.chart{width:100%;display:block;overflow:visible}
.chart .grid-l{stroke:var(--line);stroke-width:1}
.chart .axis{fill:var(--muted);font-size:11px}
.chart .zero{stroke:var(--muted);stroke-width:1;opacity:.5}

/* meter */
.meter{height:10px;border-radius:6px;background:var(--surface-2);overflow:hidden;margin-top:10px;border:1px solid var(--line-2)}
.meter i{display:block;height:100%;border-radius:6px;background:var(--up);transition:width .6s var(--ease)}
.meter.warn i{background:var(--warn)}.meter.bad i{background:var(--down)}

/* heatmap (weeks x days) */
.heat{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,1fr);gap:4px;margin-top:12px}
.heat-wrap{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:stretch}
.heat-days{display:grid;grid-template-rows:repeat(7,1fr);gap:4px;margin-top:12px;font-size:10.5px;color:var(--muted)}
.heat-days span{display:flex;align-items:center;line-height:1}
.hc{aspect-ratio:1;border-radius:5px;background:var(--cell);min-width:8px;cursor:pointer;border:0;padding:0}
.hc.future{opacity:.35;cursor:default}
.legend{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-top:10px;flex-wrap:wrap}
.legend i{width:12px;height:12px;border-radius:3px;display:inline-block}

/* month calendar */
.cal-head{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-bottom:12px}
.cal-head h2{font-size:22px}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal .dow{font-size:12px;color:var(--muted);text-align:center;padding-bottom:2px}
.day{min-width:0;overflow:hidden;min-height:84px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line-2);padding:8px;display:flex;flex-direction:column;gap:4px;cursor:pointer;text-align:left;position:relative}
.day.out{opacity:.35}
.day.today{border-color:var(--accent)}
.day .n{font-size:12.5px;color:var(--text-2);font-weight:600;display:flex;align-items:center;gap:6px}
.day .n i{width:8px;height:8px;border-radius:50%;display:inline-block}
.day .p{font:650 14px var(--sans);margin-top:auto}
.day .c{font-size:11.5px;color:var(--muted)}
.day.win{background:var(--up-wash);border-color:transparent}
.day.loss{background:var(--down-wash);border-color:transparent}
.day.none{cursor:default}
.day .ps{display:none}
@media (max-width:600px){.cal{gap:4px}.day{min-height:58px;padding:6px 5px;border-radius:10px}.day .c,.day .pf{display:none}.day .ps{display:inline}.day .p{font-size:12px}.day .n{font-size:11px;gap:4px}.day .n i{width:6px;height:6px}}

/* lists */
.tlist{display:flex;flex-direction:column}
.trow{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:11px 4px;border-bottom:1px solid var(--line-2);cursor:pointer;background:none;border-left:0;border-right:0;border-top:0;text-align:left;width:100%}
.trow:hover{background:var(--surface-2)}
.side{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font:700 11px var(--sans);letter-spacing:.04em}
.side.b{background:var(--up-wash);color:var(--up-text)}.side.s{background:var(--down-wash);color:var(--down-text)}
.trow .m b{display:block;font-weight:600}
.trow .m span{font-size:12.5px;color:var(--muted)}
.trow .r{text-align:right}
.trow .r b{display:block;font-weight:650}
.trow .r span{font-size:12px;color:var(--muted)}
.search{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.in{padding:10px 13px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);font-size:15px;min-width:0;width:100%}
.in:focus{outline:none;border-color:var(--accent)}
label.f{display:block;font-size:13px;font-weight:600;color:var(--text-2);margin:12px 0 6px}

/* bars list (symbols, weekdays) */
.bars{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.bar{display:grid;grid-template-columns:86px 1fr 84px;gap:10px;align-items:center;font-size:13.5px}
.bar .tr{position:relative;height:14px}
.bar .tr .mid0{position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:var(--line)}
.bar .tr i{position:absolute;top:0;height:14px;border-radius:4px}
.bar .tr i.pos{left:50%;background:var(--up);border-radius:0 4px 4px 0}
.bar .tr i.neg{right:50%;background:var(--down);border-radius:4px 0 0 4px}
.bar .v{text-align:right;font-weight:600}

/* sheet (trade/day details) */
.sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:60;display:flex;align-items:flex-end;justify-content:center;animation:fade .2s}
.sheet{background:var(--surface);border:1px solid var(--line);border-radius:22px 22px 0 0;width:min(640px,100%);max-height:86vh;overflow:auto;padding:18px 18px max(22px,env(safe-area-inset-bottom));animation:up .28s var(--ease)}
@media (min-width:821px){.sheet-bg{align-items:center}.sheet{border-radius:22px}}
.sheet .grab{width:42px;height:5px;border-radius:3px;background:var(--line);margin:0 auto 12px}
@keyframes fade{from{opacity:0}}@keyframes up{from{transform:translateY(40px);opacity:0}}

/* tooltip */
.tip{position:fixed;z-index:80;pointer-events:none;background:var(--text);color:var(--bg);font-size:12.5px;padding:7px 10px;border-radius:10px;box-shadow:0 10px 30px -10px rgba(0,0,0,.5);white-space:nowrap;transform:translate(-50%,-110%)}
.tip b{font-weight:700}

/* login */
.login{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:1.1fr .9fr}
.login .art{background:#06120D;color:#F3EBD6;padding:clamp(24px,5vw,64px);display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.login .art h1{font-size:clamp(44px,6.4vw,92px);color:#F3EBD6;max-width:10ch}
.login .art p{color:#C9C7B5;max-width:38ch;margin-top:18px;font-size:17px}
.login .art .logo,.login .art .logo svg{color:#F3EBD6}
.login .art .mock{display:grid;grid-template-columns:repeat(14,1fr);gap:5px;max-width:420px;margin-top:28px}
.login .art .mock i{aspect-ratio:1;border-radius:4px;background:#173224}
.login .form{display:flex;align-items:center;justify-content:center;padding:28px 18px;background:var(--bg)}
.login .box{width:min(400px,100%)}
.login .box h2{font-size:30px}
.login .box p{color:var(--text-2);margin-top:6px}
.msg{min-height:20px;font-size:14px;margin-top:10px;color:var(--text-2)}
.msg.err{color:var(--down-text)}
@media (max-width:820px){.login{grid-template-columns:1fr}.login .art{min-height:auto;padding-bottom:30px}.login .art .mock{display:none}}

.steps{counter-reset:s;display:grid;gap:10px;margin-top:12px}
.steps li{list-style:none;display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start}
.steps li::before{counter-increment:s;content:counter(s);width:30px;height:30px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line);display:grid;place-items:center;font-weight:700;font-size:13px}
.steps li b{display:block}
.steps li span{color:var(--text-2);font-size:14px}
code.key{display:block;font:600 15px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:12px;word-break:break-all;margin-top:8px}
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:var(--text);color:var(--bg);padding:10px 16px;border-radius:999px;font-weight:600;font-size:14px;z-index:90;animation:up .25s var(--ease)}
.skel{background:linear-gradient(90deg,var(--surface-2),var(--line-2),var(--surface-2));background-size:200% 100%;animation:sk 1.2s infinite;border-radius:10px;min-height:16px}
@keyframes sk{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}