/* Quantum Ticks — theme-aware design system. Light is the default; `data-theme` on overrides, and "system" follows the OS preference. Every colour is a variable so both themes stay in step. */ :root{ --bg:#f5f7fa; --surface:#ffffff; --surface-2:#f0f3f8; --surface-3:#e7ecf3; --line:#dde4ed; --line-strong:#c6d0dd; --txt:#1a2233; --txt-2:#5a6779; --txt-3:#8996a8; --accent:#2563eb; --accent-hover:#1d4ed8; --accent-soft:#e8effd; --green:#15803d; --green-b:#16a34a; --green-soft:#e6f6ec; --red:#b91c1c; --red-b:#dc2626; --red-soft:#fdeaea; --amber:#b45309; --amber-b:#d97706; --amber-soft:#fdf3e3; --purple:#7c3aed; --purple-soft:#f1eafe; --shadow:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06); --shadow-lg:0 4px 12px rgba(16,24,40,.09), 0 12px 28px rgba(16,24,40,.08); --radius:10px; --radius-sm:7px; --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,sans-serif; --sidebar:248px; } :root[data-theme="dark"]{ --bg:#0d1117; --surface:#161b25; --surface-2:#1d2430; --surface-3:#262f3d; --line:#2a3441; --line-strong:#3a4655; --txt:#e4eaf2; --txt-2:#9aa8bd; --txt-3:#6b7a90; --accent:#4d8ef7; --accent-hover:#6ba0f9; --accent-soft:#16243d; --green:#22c55e; --green-b:#22c55e; --green-soft:#10261a; --red:#f05252; --red-b:#ef4444; --red-soft:#2b1416; --amber:#f59e0b; --amber-b:#f59e0b; --amber-soft:#2b1f0c; --purple:#a78bfa; --purple-soft:#1f1833; --shadow:0 1px 2px rgba(0,0,0,.3); --shadow-lg:0 8px 28px rgba(0,0,0,.45); } @media (prefers-color-scheme: dark){ :root[data-theme="system"]{ --bg:#0d1117; --surface:#161b25; --surface-2:#1d2430; --surface-3:#262f3d; --line:#2a3441; --line-strong:#3a4655; --txt:#e4eaf2; --txt-2:#9aa8bd; --txt-3:#6b7a90; --accent:#4d8ef7; --accent-hover:#6ba0f9; --accent-soft:#16243d; --green:#22c55e; --green-b:#22c55e; --green-soft:#10261a; --red:#f05252; --red-b:#ef4444; --red-soft:#2b1416; --amber:#f59e0b; --amber-b:#f59e0b; --amber-soft:#2b1f0c; --purple:#a78bfa; --purple-soft:#1f1833; --shadow:0 1px 2px rgba(0,0,0,.3); --shadow-lg:0 8px 28px rgba(0,0,0,.45); } } *{box-sizing:border-box} html,body{height:100%} body{margin:0;background:var(--bg);color:var(--txt);font:14px/1.55 var(--sans); -webkit-font-smoothing:antialiased} a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline} h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.01em} h2{font-size:15.5px} h3{font-size:11.5px;color:var(--txt-3);text-transform:uppercase;letter-spacing:.07em; font-weight:700;margin-bottom:10px} /* ---------- shell ---------- */ .shell{display:flex;min-height:100vh} .sidebar{width:var(--sidebar);flex-shrink:0;background:var(--surface); border-right:1px solid var(--line);display:flex;flex-direction:column; position:fixed;top:0;bottom:0;left:0;z-index:60} .brand{padding:20px 20px 16px;border-bottom:1px solid var(--line)} .brand .name{font-size:19px;font-weight:750;letter-spacing:-.03em} .brand .name span{color:var(--accent)} .brand .tag{font-size:11px;color:var(--txt-3);margin-top:2px} .navlist{flex:1;padding:12px 10px;overflow-y:auto} .navlist button{display:flex;align-items:center;gap:11px;width:100%;background:none; border:none;color:var(--txt-2);padding:9px 12px;border-radius:var(--radius-sm); cursor:pointer;font-size:13.5px;font-weight:550;font-family:inherit;text-align:left; margin-bottom:2px} .navlist button:hover{background:var(--surface-2);color:var(--txt)} .navlist button.active{background:var(--accent-soft);color:var(--accent);font-weight:650} .navlist button .ic{width:17px;text-align:center;font-size:14px;flex-shrink:0} .navsep{font-size:10px;color:var(--txt-3);text-transform:uppercase;letter-spacing:.08em; font-weight:700;padding:14px 12px 6px} .sidefoot{border-top:1px solid var(--line);padding:12px} .who{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:var(--radius-sm)} .avatar{width:31px;height:31px;border-radius:50%;background:var(--accent);color:#fff; display:grid;place-items:center;font-weight:700;font-size:13px;flex-shrink:0} .who .u{font-size:13px;font-weight:600;line-height:1.25;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .who .r{font-size:10.5px;color:var(--txt-3);text-transform:uppercase;letter-spacing:.05em} .themeswitch{display:flex;gap:3px;background:var(--surface-2);padding:3px; border-radius:var(--radius-sm);margin-top:10px} .themeswitch button{flex:1;background:none;border:none;color:var(--txt-3);padding:5px; border-radius:5px;cursor:pointer;font-size:11px;font-weight:600;font-family:inherit} .themeswitch button.on{background:var(--surface);color:var(--txt);box-shadow:var(--shadow)} /* ---------- main ---------- */ .main{flex:1;margin-left:var(--sidebar);min-width:0;display:flex;flex-direction:column} .topbar{min-height:57px;background:var(--surface);border-bottom:1px solid var(--line); display:flex;align-items:center;gap:12px;padding:8px 22px;position:sticky;top:0;z-index:50; flex-wrap:wrap} .topbar .title{font-size:15px;font-weight:650} .content{padding:22px;max-width:1560px;width:100%} .tab{display:none}.tab.active{display:block} /* ---------- cards & grids ---------- */ .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:18px;box-shadow:var(--shadow)} .card+.card{margin-top:16px} .card .hd{display:flex;align-items:center;justify-content:space-between;gap:10px; margin-bottom:14px;flex-wrap:wrap} .grid{display:grid;gap:16px} .g2{grid-template-columns:repeat(auto-fit,minmax(370px,1fr))} .g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .g4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))} .mb{margin-bottom:16px} /* ---------- stat tiles ---------- */ .stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:14px 16px;box-shadow:var(--shadow)} .stat .k{font-size:11px;color:var(--txt-3);text-transform:uppercase;letter-spacing:.06em; font-weight:650} .stat .v{font-size:23px;font-weight:680;font-family:var(--mono);margin-top:4px; letter-spacing:-.02em;overflow-wrap:anywhere} .stat .s{font-size:11.5px;color:var(--txt-3);margin-top:3px} .v.pos{color:var(--green-b)}.v.neg{color:var(--red-b)}.v.acc{color:var(--accent)} .v.pur{color:var(--purple)} /* ---------- badges ---------- */ .badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px; font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em; white-space:nowrap} .badge.ok{background:var(--green-soft);color:var(--green)} .badge.err{background:var(--red-soft);color:var(--red)} .badge.warn{background:var(--amber-soft);color:var(--amber)} .badge.info{background:var(--accent-soft);color:var(--accent)} .badge.purple{background:var(--purple-soft);color:var(--purple)} .badge.off{background:var(--surface-3);color:var(--txt-3)} .dot{width:6px;height:6px;border-radius:50%;background:currentColor} .pulse{animation:pulse 1.8s ease-in-out infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}} /* ---------- forms ---------- */ label{display:block;font-size:12px;color:var(--txt-2);margin-bottom:5px;font-weight:550} input,select,textarea{width:100%;background:var(--surface);border:1px solid var(--line-strong); color:var(--txt);padding:8px 11px;border-radius:var(--radius-sm);font-size:13px; font-family:inherit} input:focus,select:focus{outline:none;border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)} input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);cursor:pointer} .field{margin-bottom:13px} .row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap} .row>.field{flex:1;min-width:160px;margin-bottom:0} .chk{display:flex;align-items:center;gap:8px} .chk label{margin:0;color:var(--txt);font-size:13px;cursor:pointer;font-weight:500} .btn{background:var(--accent);color:#fff;border:1px solid transparent;padding:8px 16px; border-radius:var(--radius-sm);cursor:pointer;font-size:13px;font-weight:600; font-family:inherit;white-space:nowrap;display:inline-flex;align-items:center;gap:7px} .btn:hover{background:var(--accent-hover)} .btn:disabled{opacity:.45;cursor:not-allowed} .btn.ghost{background:var(--surface);color:var(--txt);border-color:var(--line-strong)} .btn.ghost:hover{background:var(--surface-2)} .btn.danger{background:var(--red-b)}.btn.danger:hover{background:var(--red)} .btn.success{background:var(--green-b)}.btn.success:hover{background:var(--green)} .btn.warn{background:var(--amber-b)}.btn.warn:hover{background:var(--amber)} .btn.sm{padding:5px 11px;font-size:12px} .btn.lg{padding:11px 22px;font-size:14px} .btn.block{width:100%;justify-content:center} /* ---------- tables ---------- */ .scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} table{width:100%;border-collapse:collapse;font-size:13px} th{text-align:left;color:var(--txt-3);font-weight:700;font-size:10.5px; text-transform:uppercase;letter-spacing:.06em;padding:9px 11px; border-bottom:1px solid var(--line);white-space:nowrap} td{padding:9px 11px;border-bottom:1px solid var(--line);font-family:var(--mono); font-size:12.5px} tbody tr:last-child td{border-bottom:none} tbody tr:hover td{background:var(--surface-2)} tr.sel td{background:var(--green-soft)} .num{text-align:right} .muted{color:var(--txt-3);font-size:12.5px} /* ---------- notices ---------- */ .notice{border-radius:var(--radius-sm);padding:12px 14px;font-size:13px; margin-bottom:14px;border:1px solid transparent;line-height:1.5} .notice.ok{background:var(--green-soft);border-color:var(--green-b);color:var(--green)} .notice.err{background:var(--red-soft);border-color:var(--red-b);color:var(--red)} .notice.warn{background:var(--amber-soft);border-color:var(--amber-b);color:var(--amber)} .notice.info{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)} /* ---------- logs ---------- */ .logbox{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm); padding:12px;max-height:640px;overflow:auto;font-family:var(--mono);font-size:12px; line-height:1.7} .logline{display:flex;gap:11px;padding:1px 0} .logline .t{color:var(--txt-3);flex-shrink:0} .logline .c{color:var(--purple);flex-shrink:0;width:76px} .logline .m{color:var(--txt-2)} .logline.error .m{color:var(--red-b);font-weight:550} .logline.warn .m{color:var(--amber-b)} .logline.trade .m{color:var(--green-b);font-weight:550} /* ---------- calendar ---------- */ .cal{display:flex;gap:20px;flex-wrap:wrap} .calmonth .mt{font-size:12px;color:var(--txt-2);margin-bottom:7px;font-weight:650} .calgrid{display:grid;grid-template-columns:repeat(7,27px);gap:3px} .cell{width:27px;height:27px;border-radius:5px;background:var(--surface-3); border:1px solid var(--line)} .cell.has{cursor:pointer} .cell.p1{background:#a7e0bd;border-color:#a7e0bd} .cell.p2{background:#4cb87a;border-color:#4cb87a} .cell.p3{background:#15803d;border-color:#15803d} .cell.l1{background:#f5b5b5;border-color:#f5b5b5} .cell.l2{background:#e06a6a;border-color:#e06a6a} .cell.l3{background:#b91c1c;border-color:#b91c1c} :root[data-theme="dark"] .cell.p1{background:#14532d;border-color:#14532d} :root[data-theme="dark"] .cell.p2{background:#166534;border-color:#166534} :root[data-theme="dark"] .cell.p3{background:#16a34a;border-color:#16a34a} :root[data-theme="dark"] .cell.l1{background:#4c1414;border-color:#4c1414} :root[data-theme="dark"] .cell.l2{background:#991b1b;border-color:#991b1b} :root[data-theme="dark"] .cell.l3{background:#dc2626;border-color:#dc2626} .cell.paper{border-style:dashed;border-color:var(--purple);border-width:1.5px} .cell.has:hover{outline:2px solid var(--accent);outline-offset:1px} #tip{position:fixed;z-index:300;background:var(--surface);border:1px solid var(--line-strong); border-radius:var(--radius-sm);padding:11px 13px;font-size:12px;pointer-events:none; display:none;box-shadow:var(--shadow-lg);max-width:330px;font-family:var(--mono); line-height:1.7;color:var(--txt)} #tip .h{color:var(--accent);font-weight:700;margin-bottom:6px;font-family:var(--sans)} #tip hr{border:0;border-top:1px solid var(--line);margin:6px 0} /* ---------- modal ---------- */ .modalbg{position:fixed;inset:0;background:rgba(10,15,25,.55);z-index:400; display:none;align-items:center;justify-content:center;padding:20px} .modalbg.show{display:flex} .modal{background:var(--surface);border:1px solid var(--line);border-radius:12px; padding:24px;max-width:540px;width:100%;box-shadow:var(--shadow-lg); max-height:90vh;overflow:auto} .modal h2{margin-bottom:8px;font-size:17px} .modal .body{color:var(--txt-2);font-size:13.5px;margin-bottom:18px;line-height:1.6} .modal .acts{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap} /* ---------- toasts ---------- */ #toasts{position:fixed;top:14px;right:14px;z-index:500;display:flex; flex-direction:column;gap:9px;max-width:430px} .toast{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent); border-radius:var(--radius-sm);padding:11px 15px;box-shadow:var(--shadow-lg);font-size:13px; animation:slidein .18s ease-out;line-height:1.5} .toast.ok{border-left-color:var(--green-b)} .toast.err{border-left-color:var(--red-b)} .toast.warn{border-left-color:var(--amber-b)} @keyframes slidein{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}} /* ---------- misc ---------- */ .pill{font-family:var(--mono);font-size:11.5px;background:var(--surface-3); padding:2px 8px;border-radius:5px;color:var(--txt-2)} .tag{font-size:10px;padding:2px 6px;border-radius:4px;background:var(--surface-3); color:var(--txt-3);font-weight:600} .hr{height:1px;background:var(--line);margin:16px 0;border:0} .spacer{flex:1} .sub{font-size:12px;color:var(--txt-3);margin-bottom:12px;line-height:1.5} .subcard{background:var(--surface-2);border:1px solid var(--line); border-radius:var(--radius-sm);padding:15px;margin-bottom:13px} svg{display:block;max-width:100%} /* ---------- login ---------- */ .loginwrap{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px} .loginbox{width:390px;max-width:100%;background:var(--surface);border:1px solid var(--line); border-radius:14px;padding:32px;box-shadow:var(--shadow-lg)} .loginbox .name{font-size:26px;font-weight:750;letter-spacing:-.03em} .loginbox .name span{color:var(--accent)} /* ---------- responsive ---------- */ .menubtn{display:none;background:none;border:none;color:var(--txt);font-size:21px; cursor:pointer;padding:4px 8px} @media(max-width:900px){ .sidebar{transform:translateX(-100%);transition:transform .2s ease} .sidebar.open{transform:none;box-shadow:var(--shadow-lg)} .main{margin-left:0} .menubtn{display:block} .content{padding:14px} .card{padding:14px} } /* ---------- toggle switch ---------- */ .switch{position:relative;display:inline-block;width:42px;height:23px;flex-shrink:0} .switch input{opacity:0;width:0;height:0} .switch .slider{position:absolute;cursor:pointer;inset:0;background:var(--surface-3); border:1px solid var(--line-strong);border-radius:23px;transition:.18s} .switch .slider:before{position:absolute;content:"";height:17px;width:17px;left:2px;bottom:2px; background:var(--surface);border-radius:50%;transition:.18s;box-shadow:var(--shadow)} .switch input:checked + .slider{background:var(--green-b);border-color:var(--green-b)} .switch input:checked + .slider:before{transform:translateX(19px)} /* ---------- password reveal ---------- */ .withEye{position:relative;display:flex;align-items:center} .withEye input{padding-right:36px} .withEye .eye{position:absolute;right:4px;background:none;border:none;cursor:pointer; font-size:14px;opacity:.45;padding:4px 6px;line-height:1;color:var(--txt-2)} .withEye .eye:hover{opacity:.85} .withEye .eye.on{opacity:1;color:var(--accent)} /* multi-select sizing */ select[multiple]{padding:6px;min-height:96px} select[multiple] option{padding:4px 6px;border-radius:4px} /* ---- console-style readouts (capture reports) ---- */ .console{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px; background:var(--surface-2);border:1px solid var(--line);border-radius:10px; padding:12px 14px;overflow-x:auto} .console.ticks{max-height:460px;overflow-y:auto} .cfeed{font-weight:600;color:var(--txt-1);margin:2px 0 6px} .cgap{height:14px} .cline{display:flex;align-items:baseline;gap:10px;padding:2px 0;white-space:nowrap} .cline .lbl{color:var(--txt-2);flex:1 1 auto;min-width:0} .cline .tv{color:var(--txt-3);flex:0 0 auto;font-variant-numeric:tabular-nums} .cline .vv{color:var(--txt-1);font-weight:600;flex:0 0 auto;text-align:right; min-width:84px;font-variant-numeric:tabular-nums} .cline .win{color:var(--green);font-weight:600} .cline.sub2 .lbl{padding-left:18px;color:var(--txt-3)} .feedtag{flex:0 0 auto;min-width:86px;color:var(--accent)} .symtag{flex:0 0 auto;min-width:70px;color:var(--purple)} /* a still button with a blinking dot beside it - a blinking control is hard to hit and reads as an error */ .livedot{display:inline-block;width:8px;height:8px;border-radius:50%; background:var(--green);margin-right:6px;animation:pulse 1.2s ease-in-out infinite} @keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 var(--green-soft)} 50%{opacity:.35;box-shadow:0 0 0 5px transparent}}