:root{
color-scheme:light dark;
--bg:#e9f0ec;--bg2:#dde7e1;--card:#ffffff;--ink:#16211d;--muted:#5a6b63;--line:#d5e0d9;
--line2:#b7c8bd;--accent:#0b6b5e;--accent-ink:#ffffff;--accent-soft:#dcefe8;
--gold:#96600a;--gold-bg:#faf0d7;
--ok:#14713f;--ok-bg:#dcf2e4;--warn:#96600a;--warn-bg:#faf0d7;--bad:#bd2118;--bad-bg:#fbe3e0;
--chip:#e7eee9;
--band1:#0c6f61;--band2:#07332d;--band-ink:#f2faf7;--band-muted:#b7d4cb;
--focus:#0b6b5e;--radius:16px;
--shadow:0 1px 2px rgba(18,45,38,.07),0 10px 28px -16px rgba(18,45,38,.25);
--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
:root{
--bg:#0c1211;--bg2:#080d0c;--card:#131c1a;--ink:#e9f2ed;--muted:#a4b7ae;--line:#243330;
--line2:#34463f;--accent:#5eead4;--accent-ink:#04302a;--accent-soft:#123b35;
--gold:#fbbf24;--gold-bg:#3a2b0e;
--ok:#6fdc9c;--ok-bg:#113324;--warn:#fbbf24;--warn-bg:#3a2b0e;--bad:#ff9d94;--bad-bg:#441c18;
--chip:#1d2926;
--band1:#0e5a4f;--band2:#06241f;--band-ink:#eef8f4;--band-muted:#9fc4b8;
--focus:#6ee7c8;
--shadow:0 1px 2px rgba(0,0,0,.4),0 12px 30px -16px rgba(0,0,0,.6);
}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background-color:var(--bg);
background-image:linear-gradient(180deg,var(--bg2),rgba(0,0,0,0) 340px);color:var(--ink);
font:15px/1.5 var(--sans);overflow-x:hidden}
h1,h2,h3{line-height:1.25;margin:0}
p{margin:.5em 0}
small,.muted{color:var(--muted)}
.num,.big,.price,td{font-variant-numeric:tabular-nums}
/* skip link + focus */
.skip{position:absolute;left:-9999px;top:0;background:var(--card);padding:8px 14px;z-index:50}
.skip:focus{left:8px;top:8px;outline:3px solid var(--focus)}
a{color:var(--accent)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}
/* header */
.topbar{background:var(--card);border-bottom:1px solid var(--line)}
.topbar-in{max-width:1180px;margin:0 auto;padding:12px 16px 6px;display:flex;flex-wrap:wrap;
gap:10px 16px;align-items:center}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand svg{flex:none;width:34px;height:34px}
.brand-name{font-weight:800;letter-spacing:.4px;font-size:16px}
.brand-sub{font-size:12px;color:var(--muted)}
.navwrap{max-width:1180px;margin:0 auto;padding:0 16px}
nav.nav{display:flex;gap:8px;overflow-x:auto;padding:10px 2px 12px;scrollbar-width:thin}
nav.nav a{flex:none;display:inline-flex;align-items:center;justify-content:center;min-height:38px;
color:var(--muted);text-decoration:none;padding:7px 16px;border-radius:10px;white-space:nowrap;
border:1px solid var(--line2);background:var(--bg);font-size:13.5px;font-weight:600}
nav.nav a:hover{background:var(--chip);color:var(--ink);border-color:var(--muted)}
nav.nav a.on{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}
.userbox{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:13px;
background:var(--bg);border:1px solid var(--line);border-radius:99px;padding:4px 4px 4px 8px}
.avatar{flex:none;width:26px;height:26px;border-radius:50%;background:var(--accent);
color:var(--accent-ink);display:inline-flex;align-items:center;justify-content:center;
font-size:13px;font-weight:800}
.userbox .who{color:var(--muted);overflow:hidden;text-overflow:ellipsis;max-width:32vw;white-space:nowrap}
button.logout{padding:6px 14px;min-height:0;font-size:13px;border-radius:99px}
/* layout */
main{max-width:1180px;margin:0 auto;padding:18px 16px 60px;min-width:0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:14px;margin-top:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
padding:16px 18px;min-width:0;box-shadow:var(--shadow)}
.card-h{display:flex;align-items:center;gap:8px;margin:0 0 10px;padding-bottom:8px;
border-bottom:1px solid var(--line);font-size:12.5px;
text-transform:uppercase;letter-spacing:.7px;color:var(--muted);font-weight:700}
.card-h .ico{flex:none;width:22px;height:22px;border-radius:7px;background:var(--chip);
display:inline-flex;align-items:center;justify-content:center;font-size:13px}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 14px;font-size:13.5px}
.kv span:nth-child(odd){color:var(--muted)}
.kv span:nth-child(even){min-width:0;overflow-wrap:anywhere}
.big{font-size:26px;font-weight:750;letter-spacing:-.3px}
.price{font-size:32px;font-weight:800;letter-spacing:-.5px}
.ok{color:var(--ok)}.warn{color:var(--warn)}.bad{color:var(--bad)}
.chip{display:inline-block;padding:2px 10px;border-radius:99px;background:var(--chip);
font-weight:700;font-size:12.5px}
/* status strip */
.strip{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
padding:14px 18px;display:flex;flex-wrap:wrap;gap:12px 32px;align-items:center;box-shadow:var(--shadow)}
.strip-pair{display:flex;flex-direction:column;gap:2px}
.strip-l{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--muted)}
.strip-v{font-size:20px;font-weight:800;letter-spacing:-.2px}
.strip-day{min-width:200px;flex:1}
.status{display:inline-flex;align-items:center;gap:8px;font-size:17px;font-weight:800;
padding:6px 16px;border-radius:12px;border:2px solid currentColor;background:var(--chip)}
.status::before{content:"";width:10px;height:10px;border-radius:50%;background:currentColor;flex:none}
.status.ok{color:var(--ok);background:var(--ok-bg)}
.status.warn{color:var(--warn);background:var(--warn-bg)}
.status.bad{color:var(--bad);background:var(--bad-bg)}
.status.muted{color:var(--muted)}
/* luno account hero card */
.acct{margin-top:14px;border-top:4px solid var(--accent)}
.acct-band{background:linear-gradient(135deg,var(--band1),var(--band2));color:var(--band-ink);
border-radius:12px;padding:14px 18px;display:flex;flex-wrap:wrap;gap:12px 36px;align-items:center;
margin-bottom:12px}
.acct-band .band-l{font-size:11.5px;text-transform:uppercase;letter-spacing:.8px;
color:var(--band-muted);font-weight:700}
.acct-band .band-v{font-size:24px;font-weight:800;letter-spacing:-.3px}
.band-note{margin-left:auto;font-size:12.5px;color:var(--band-muted)}
/* controls */
.ctrlcard{margin-top:14px;border-top:4px solid var(--gold)}
.cmds{margin-top:10px;display:grid;gap:8px}
.cmd{background:var(--bg2);border:1px solid var(--line);
border-radius:10px;padding:8px 12px;font-size:12.5px}
.cmd small{color:var(--muted)}
.cmd b{font-weight:800}
/* banners */
.banner{padding:11px 14px 11px 16px;border-radius:10px;margin-bottom:12px;
border:1px solid var(--line);background:var(--card);border-left-width:6px;
display:flex;gap:10px;align-items:flex-start;font-size:13.5px}
.banner .b-ico{flex:none;width:24px;height:24px;border-radius:50%;background:var(--chip);
display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:13px}
.banner.bad{border-left-color:var(--bad)}
.banner.warn{border-left-color:var(--warn)}
.banner .b-title{font-weight:800;display:block;margin-bottom:2px}
/* controls */
.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ctl-group{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
border:1px solid var(--line2);border-radius:12px;padding:10px 12px;background:rgba(127,127,127,.06)}
.ctl-label{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;
color:var(--muted);width:100%}
.controls button{min-height:44px}
form.inline{display:inline}
button{font:inherit;font-weight:700;padding:9px 16px;border-radius:10px;min-height:40px;
display:inline-flex;align-items:center;justify-content:center;
border:1px solid var(--line2);background:var(--card);color:var(--ink);cursor:pointer;
transition:transform .08s ease,box-shadow .12s ease,background .12s ease}
button:hover:not(:disabled){box-shadow:0 1px 4px rgba(0,0,0,.18)}
button:active:not(:disabled){transform:translateY(1px)}
button:disabled{opacity:.45;cursor:not-allowed;text-decoration:line-through}
button.go{background:#166534;border-color:#166534;color:#fff}
button.stop{background:#fff;color:#92400e;border-color:#92400e;border-width:2px}
button.danger{background:#b3261e;border-color:#7c1a14;color:#fff;border-width:2px}
@media (prefers-color-scheme:dark){
button.go{background:#2f9e5f;border-color:#2f9e5f;color:#06240f}
button.stop{background:transparent;color:var(--warn)}
button.danger{background:#7c1f1a;color:#fff}
}
.pwlabel{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12.5px;
color:var(--muted);font-weight:600}
input,select{font:inherit;padding:8px 10px;border-radius:8px;border:1px solid var(--line2);
background:var(--bg);color:var(--ink);max-width:100%}
input:disabled,select:disabled{background:var(--chip);opacity:.75}
input[type="checkbox"]{width:17px;height:17px;accent-color:var(--accent)}
.checkline{display:flex;gap:8px;align-items:flex-start;font-size:13px;margin:8px 0}
.locknote{font-size:12px;color:var(--muted)}
/* badges */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:99px;
font-weight:800;font-size:13px;border:2px solid currentColor;letter-spacing:.3px}
.b-buy{color:var(--ok);background:var(--ok-bg)}
.b-sell{color:var(--bad);background:var(--bad-bg)}
.b-hold{color:var(--accent);background:var(--accent-soft)}
.b-avoid{color:var(--warn);background:var(--warn-bg)}
.b-exec{color:var(--ok);background:var(--ok-bg)}
.b-block{color:var(--warn);background:var(--warn-bg)}
.b-neutral{color:var(--muted);background:var(--chip);border-color:var(--line2)}
/* meters */
.meterline{margin:8px 0 2px}
.meterline label{display:block;font-size:12px;color:var(--muted);font-weight:600}
meter,progress{width:100%;height:12px}
progress.daybar{height:10px}
pre{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:14px;
white-space:pre-wrap;word-break:break-word;font:12.5px/1.55 var(--mono);overflow-x:auto}
.reportbox{max-height:70vh;overflow:auto}
/* tables */
.scroll{overflow-x:auto;border-radius:8px}
table{width:100%;border-collapse:collapse;font-size:13px;min-width:560px}
th,td{text-align:left;padding:7px 9px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--muted);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.5px}
thead th{background:var(--chip)}
tbody tr:hover{background:var(--chip)}
.lvl{font-weight:800;font-size:12px}
.stline{font-size:12.5px}
/* portfolio panels */
.panel-tag{font-size:11.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
display:inline-block;padding:3px 10px;border-radius:99px;margin-bottom:8px}
.panel-own{border-top:5px solid var(--accent)}
.panel-own .panel-tag{background:var(--accent-soft);color:var(--accent)}
.panel-yours{border-top:5px solid var(--warn);border-style:solid}
.panel-yours .panel-tag{background:var(--warn-bg);color:var(--warn)}
.own-av{font-size:22px;font-weight:800}
/* login */
.login{max-width:400px;margin:8vh auto}
.login .card{padding:26px 24px}
.login h2{font-size:20px;letter-spacing:.3px}
.login label{display:block;font-size:13px;font-weight:700;margin:12px 0 2px}
.login input{width:100%;margin:2px 0 6px}
.login button{width:100%;margin-top:10px}
.brandmark{display:flex;align-items:center;gap:10px;margin-bottom:6px}
/* footer */
.foot{max-width:1180px;margin:18px auto 0;padding:14px 16px;color:var(--muted);font-size:12.5px;
border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
.dotsep::before{content:"\00B7";margin-right:8px}
/* settings */
.setgrid{display:grid;gap:14px}
.lockedpill{font-size:11px;font-weight:800;background:var(--chip);border:1px solid var(--line2);
border-radius:99px;padding:1px 8px;color:var(--muted)}
@keyframes rise{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.card,.strip,.banner,.ctrlcard,.acct-band{animation:rise .25s ease}
@media (prefers-reduced-motion:reduce){.card,.strip,.banner,.ctrlcard,.acct-band{animation:none}
button{transition:none}}
@media (max-width:640px){
main{padding:14px 10px 50px}
.strip{padding:12px}
.price{font-size:27px}
.big{font-size:22px}
.strip-v{font-size:18px}
.acct-band .band-v{font-size:20px}
.band-note{margin-left:0}
.userbox{margin-left:0;width:100%;justify-content:space-between}
button{padding:10px 13px}
.kv{grid-template-columns:minmax(110px,auto) minmax(0,1fr)}
}