:root{
  color-scheme: light;
  --bg:#edf0f3; --surface:#ffffff; --surface-2:#f6f8fa;
  --ink:#14202b; --muted:#5b6b7a; --line:#d6dde4;
  --up:#0b8a5c; --down:#cf353a;
  --warn:#d97f00; --warn-soft:#fff3dc;
  --accent:#2a3fa6; --accent-ink:#ffffff;
  --focus:#2a3fa6;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#0c1520; --surface:#131f2c; --surface-2:#182737;
    --ink:#e8eef3; --muted:#93a4b3; --line:#243545;
    --up:#3fd39c; --down:#ff6d71;
    --warn:#ffb340; --warn-soft:#2e2412;
    --accent:#8fa8ff; --accent-ink:#0c1520;
    --focus:#8fa8ff;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#0c1520; --surface:#131f2c; --surface-2:#182737;
  --ink:#e8eef3; --muted:#93a4b3; --line:#243545;
  --up:#3fd39c; --down:#ff6d71;
  --warn:#ffb340; --warn-soft:#2e2412;
  --accent:#8fa8ff; --accent-ink:#0c1520;
  --focus:#8fa8ff;
}
html{scroll-padding-top:env(safe-area-inset-top,0px);}
*,*::before,*::after{box-sizing:inherit}
[hidden]{display:none!important}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 15px/1.45 "Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-variant-numeric:tabular-nums;
  -webkit-text-size-adjust:100%;
}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--surface);z-index:30;}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:6px}
a{color:inherit}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--surface);border-bottom:1px solid var(--line);}
.top-in{max-width:1040px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:20px;min-height:58px;}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:17px;letter-spacing:-.01em;text-decoration:none}
.brand i{width:12px;height:12px;border-radius:50%;background:var(--warn);box-shadow:0 0 0 4px var(--warn-soft)}
.tabs{display:flex;gap:4px;align-self:stretch;margin-left:8px}
.tab{display:flex;align-items:center;gap:8px;padding:0 14px;text-decoration:none;font-weight:600;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-1px}
.tab small{font-weight:500;font-size:12px;color:var(--muted)}
.tab[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}
.badge{display:none;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--warn);color:#1b1200;font-size:12px;font-weight:700;align-items:center;justify-content:center;animation:blink 1s ease-in-out infinite}
.badge.on{display:inline-flex}
.grow{flex:1}
.pill{font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 10px;white-space:nowrap}
.who{display:flex;align-items:center;gap:9px;background:none;border:1px solid var(--line);border-radius:999px;padding:4px 12px 4px 4px;cursor:pointer}
.who span{font-weight:600;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

main{max-width:1040px;margin:0 auto;padding:24px 20px 64px}
.loading{color:var(--muted);padding:48px 0;text-align:center}

/* summary */
.summary{display:grid;grid-template-columns:repeat(3,1fr);background:var(--surface);border:1px solid var(--line);border-radius:12px;margin-bottom:16px}
.stat{padding:16px 20px;min-width:0}
.stat+.stat{border-left:1px solid var(--line)}
.lbl{display:block;color:var(--muted);font-size:13px}
.num{display:block;font-size:24px;font-weight:650;letter-spacing:-.015em;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sub{display:block;font-size:13px;margin-top:1px;color:var(--muted)}
.up{color:var(--up)} .dn{color:var(--down)}

/* buttons / fields */
.field{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.field input,.field select{height:38px;border:1px solid var(--line);background:var(--surface-2);border-radius:8px;padding:0 10px;color:var(--ink);min-width:0}
.field .fl{font-size:13px;color:var(--muted)}
.btn{height:38px;padding:0 16px;border-radius:8px;border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);font-weight:600;cursor:pointer}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.danger{background:transparent;color:var(--down);border-color:var(--down)}
.btn:disabled{opacity:.5;cursor:default}
.msg{flex-basis:100%;font-size:13px;color:var(--down);margin:0}
.msg:empty{display:none}
.msg.ok{color:var(--up)}

/* holdings list */
.list{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.list-h{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 10px 16px}
.list-h h2{margin:0;font-size:14px;font-weight:600;color:var(--muted)}
.plus{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 0 2px;transition:transform .15s,color .15s,border-color .15s}
.plus:hover{color:var(--ink);border-color:var(--muted)}
.plus.open{transform:rotate(45deg);color:var(--ink)}
.addrow{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;padding:12px 16px 14px;background:var(--surface-2);border-top:1px solid var(--line)}
.addrow .field{flex:1 1 130px}
.addrow .btns{display:flex;gap:8px}
.row{display:grid;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line);
  grid-template-columns:minmax(110px,1.3fr) 76px minmax(110px,150px) minmax(120px,1fr) minmax(130px,1fr) 170px 30px;}
.row.head{background:var(--surface-2);color:var(--muted);font-size:12.5px;padding-top:9px;padding-bottom:9px}
.row.is-alert{background:var(--warn-soft)}
.r{text-align:right}
.tk{text-decoration:none;display:flex;flex-direction:column;min-width:0}
.tk b{font-size:16px;font-weight:650;overflow:hidden;text-overflow:ellipsis}
.tk:hover b{text-decoration:underline}
.tk span{font-size:12px;color:var(--muted)}
.units{text-align:right}
.spark{width:100%;height:36px;display:block;overflow:visible}
.spark .base{stroke:var(--line);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.spark polyline{fill:none;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.px,.val{text-align:right;display:flex;flex-direction:column;align-items:flex-end}
.px .p{font-weight:600;font-size:16px}
.px .ar{font-size:11px;margin-right:4px}
.px small,.val small{font-size:12.5px}
.val .v{font-weight:650;font-size:16px}
.del{width:28px;height:28px;border-radius:50%;border:0;background:transparent;color:var(--muted);font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 0 2px;opacity:.75}
.del:hover,.del:focus-visible{color:var(--down);background:var(--surface-2);opacity:1}
.empty{padding:32px 20px 36px;text-align:center;color:var(--muted);border-top:1px solid var(--line)}
.empty b{display:block;color:var(--ink);font-size:16px;margin-bottom:4px}

/* alert lamp */
.lamp{display:flex;align-items:center;gap:10px;background:none;border:0;padding:6px 8px;margin:-6px -8px;border-radius:999px;cursor:pointer;color:var(--muted);text-align:left;min-width:0}
.lamp .dot{width:14px;height:14px;border-radius:50%;border:2px solid currentColor;flex:none;position:relative}
.lamp .why{font-size:12.5px;line-height:1.25;min-width:0}
.lamp[data-s="armed"] .dot{background:var(--accent);border-color:var(--accent)}
.lamp[data-s="alert"]{color:var(--warn);font-weight:600}
.lamp[data-s="alert"] .dot{background:var(--warn);border-color:var(--warn);animation:blink 1s ease-in-out infinite}
.lamp[data-s="alert"] .dot::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid var(--warn);animation:ring 1s ease-out infinite}
.lamp[data-s="acked"]{color:var(--warn)}
.lamp[data-s="acked"] .dot{background:var(--warn);border-color:var(--warn)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes ring{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.15);opacity:0}}
@media (prefers-reduced-motion: reduce){
  .lamp[data-s="alert"] .dot,.badge{animation:blink 2.6s ease-in-out infinite}
  .lamp[data-s="alert"] .dot::after{animation:none;opacity:.6}
}

/* settings page */
.back{display:inline-block;margin-bottom:10px;color:var(--muted);text-decoration:none;font-size:14px}
.back:hover{color:var(--ink)}
.ph{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.ph h1{margin:0;font-size:30px;letter-spacing:-.02em}
.ph p{margin:0;color:var(--muted)}
.live{display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface);border:1px solid var(--line);border-radius:12px;margin-bottom:14px}
.live .stat .num{font-size:20px}
.banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;border-radius:12px;border:1px solid var(--line);background:var(--surface);margin-bottom:22px}
.banner[data-s="alert"]{background:var(--warn-soft);border-color:var(--warn)}
.banner[data-s="acked"]{border-color:var(--warn)}
.banner .lamp{pointer-events:none;margin:0;padding:0}
.banner .t{flex:1;min-width:200px}
.grp-t{margin:0 0 4px;font-size:16px}
.grp-s{margin:0 0 10px;color:var(--muted);font-size:13.5px}
.grp{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:24px;align-items:start}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:0;min-width:0}
.card h2,.card h3{margin:0;font-size:16px}
.card .hint{margin:2px 0 0;color:var(--muted);font-size:13.5px}
.rule-h{display:flex;gap:14px;align-items:flex-start}
.opt-b{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px;align-items:flex-end}
.opt-b.off .field,.opt-b.off .preview{opacity:.55}
.opt-b .field{flex:1 1 130px}
.opt-b .field.sf{flex:1 1 100%}
.pctgrp{display:contents}
.preview{flex-basis:100%;margin:0;font-size:13.5px;color:var(--muted)}
.ostat{flex-basis:100%;margin:0;font-size:13.5px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ostat:empty{display:none}
.ostat .st{flex:1;min-width:160px}
.ostat .st.warn{color:var(--warn);font-weight:600}
.ostat .btn{height:32px;padding:0 12px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface-2);align-self:flex-start;max-width:100%}
.seg label{position:relative;cursor:pointer;display:block}
.seg input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.seg span{display:block;padding:0 12px;line-height:36px;font-size:13.5px;color:var(--muted);white-space:nowrap}
.seg input:checked+span{background:var(--accent);color:var(--accent-ink);font-weight:600}
.seg input:focus-visible+span{outline:2px solid var(--focus);outline-offset:-2px}
.switch{position:relative;display:inline-block;width:44px;height:26px;flex:none;margin-top:1px}
.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.switch .trk{position:absolute;inset:0;border-radius:13px;background:var(--line);transition:background .15s}
.switch .trk::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.switch input:checked+.trk{background:var(--accent)}
.switch input:checked+.trk::after{transform:translateX(18px)}
.switch input:focus-visible+.trk{outline:2px solid var(--focus);outline-offset:2px}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row-edit{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-top:12px}
.row-edit .field{flex:1 1 140px}
.demo{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.demo .btn{height:34px;padding:0 14px}

/* prefs panel */
.scrim{position:fixed;inset:0;background:rgba(5,10,16,.5);z-index:40;display:none}
.scrim.on{display:block}
.panel{position:fixed;top:0;right:0;bottom:0;width:min(380px,100%);background:var(--surface);border-left:1px solid var(--line);z-index:41;transform:translateX(102%);transition:transform .2s;padding:calc(20px + env(safe-area-inset-top,0px)) 20px calc(20px + env(safe-area-inset-bottom,0px));overflow:auto;display:flex;flex-direction:column;gap:16px}
.panel.on{transform:none}
.panel h2{margin:0;font-size:20px}
.panel .acct{display:flex;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.panel .acct p{margin:0;font-size:13.5px;color:var(--muted)}
.panel .acct b{display:block;font-size:15px;color:var(--ink)}
.panel .field select{width:100%}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;font-weight:500;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:60;max-width:90vw;display:flex;gap:14px;align-items:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.act.on{pointer-events:auto}
.toast button{background:none;border:0;color:inherit;font-weight:700;text-decoration:underline;cursor:pointer;padding:0}

/* narrow screens */
@media (max-width:860px){
  .grp{grid-template-columns:1fr}
}
/* The 7-column holdings row needs ~780px; reflow it before it can overflow. */
@media (max-width:900px){
  .row.head{display:none}
  .row{grid-template-columns:1fr auto auto;grid-template-areas:"tk lamp del" "spark px px" "units val val";row-gap:10px}
  .row .tk{grid-area:tk} .row .lampw{grid-area:lamp;justify-self:end} .row .del{grid-area:del}
  .row .sparkw{grid-area:spark} .row .px{grid-area:px} .row .val{grid-area:val}
  .row .units{grid-area:units;text-align:left;color:var(--muted);font-size:13px}
  .row .units::after{content:" units"}
}
@media (max-width:760px){
  html,body{overflow-x:hidden}
  .top-in{padding:0 14px;gap:10px}
  .pill,.who span{display:none}
  .who{padding:3px}
  .tab{padding:0 10px}
  .tab small{display:none}
  .brand{font-size:16px}
  main{padding:16px 14px 56px}
  .summary{grid-template-columns:1fr}
  .stat+.stat{border-left:0;border-top:1px solid var(--line)}
  .num{font-size:20px}
  .live{grid-template-columns:1fr 1fr}
  .live .stat:nth-child(3){border-left:0}
  .live .stat:nth-child(n+3){border-top:1px solid var(--line)}
  .ph h1{font-size:24px}
  /* Alert lamp: dot only on a phone — the status text would squeeze the row. */
  .lamp .why{display:none}
  /* 16px inputs stop iOS zooming the page on focus; 44px targets are finger-sized. */
  .field input,.field select{height:44px;font-size:16px}
  .btn{min-height:44px}
  .gate{margin:24px auto}
  .login-form{padding:16px}
  .login-form .btn{width:100%}
  .addrow .btns,.row-edit .actions{flex-basis:100%}
  .addrow .btns .btn,.demo .btn{flex:1}
  .seg{max-width:100%;overflow-x:auto}
}
@media (max-width:480px){
  .top-in{gap:8px}
  .tab{padding:0 8px}
  .live{grid-template-columns:1fr}
  .live .stat+.stat{border-left:0;border-top:1px solid var(--line)}
  .stat{padding:14px 16px}
  .bar{padding:10px 12px}
  .panel{padding-left:16px;padding-right:16px}
}

/* additions for the hosted build */
.av{width:28px;height:28px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;text-transform:uppercase;flex:none}
.av.lg{width:40px;height:40px;font-size:16px}
.panel .acct b{word-break:break-all}
.bars{max-width:1040px;margin:0 auto;padding:12px 20px 0}
.bar{padding:10px 16px;border-radius:12px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;border:1px solid var(--line);background:var(--surface)}
.bar+.bar{margin-top:8px}
.bar.demo{border-color:var(--accent)}
.bar.auth{border-color:var(--warn);background:var(--warn-soft)}
.bar .btn{height:34px}
.feedline{margin:0 0 10px;font-size:13px;color:var(--muted)}
.feedline.err{color:var(--down)}
.gate{max-width:480px;margin:48px auto;text-align:center}
.gate h1{font-size:22px;margin:0 0 8px}
.gate p{color:var(--muted);margin:0 0 16px}
.login-form{display:flex;flex-direction:column;gap:12px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px}
.login-form .field input{width:100%}
.login-form .msg{margin:0}
.login-form #loginCodeStep{display:flex;flex-direction:column;gap:12px}
.login-form #loginCodeStep[hidden]{display:none}
a.btn{display:inline-flex;align-items:center;text-decoration:none}
@media (max-width:760px){ .bars{padding:10px 14px 0} }