/* XMB Trade — app shell v2 (2026-10-23): three workspaces (Giełda USA · Narzędzia tradera · Krypto) */
body[data-ws="stocks"]{--accent:#8b7cff;--accent-rgb:139,124,255}
body[data-ws="tools"]{--accent:#2bb8a3;--accent-rgb:43,184,163}
body[data-ws="crypto"]{--accent:#f2a33a;--accent-rgb:242,163,58}
body[data-ws="account"]{--accent:#8b7cff;--accent-rgb:139,124,255}
.mark{background:linear-gradient(135deg,var(--accent),#5b4cf0)}
.nav-item.active{background:rgba(var(--accent-rgb),.14)}
.btn-primary{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 70%,#3b2fd0));box-shadow:0 6px 18px rgba(var(--accent-rgb),.28)}
.seg button.on{background:var(--accent)}
.pill.acc{color:var(--accent);background:rgba(var(--accent-rgb),.14);border-color:rgba(var(--accent-rgb),.32)}
.kpi.hl::after{background:radial-gradient(circle,rgba(var(--accent-rgb),.22),transparent 70%)}
input.inp:focus,.sel:focus{border-color:var(--accent);outline:none}

/* workspace switcher */
.ws-switch{display:grid;grid-template-columns:1fr;gap:6px;margin:0 0 6px}
.ws-btn{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel);
  cursor:pointer;transition:.15s;color:var(--muted);text-align:left;font:inherit;width:100%}
.ws-btn:hover{border-color:var(--line2);color:var(--text)}
.ws-btn .wi{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-size:16px;background:var(--panel2);flex:none}
.ws-btn .wt{font-weight:700;font-size:13.5px;color:var(--text);line-height:1.2}
.ws-btn .wd{font-size:11px;color:var(--faint);line-height:1.3}
.ws-btn.on{border-color:rgba(var(--accent-rgb),.55);background:linear-gradient(135deg,rgba(var(--accent-rgb),.16),rgba(var(--accent-rgb),.04))}
.ws-btn.on .wi{background:rgba(var(--accent-rgb),.22)}
.nav-wrap{flex:1}

/* topbar */
.crumb{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
.crumb b{color:var(--accent);font-weight:700}
.clock{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:6px 12px;white-space:nowrap}
.clock .dot{width:7px;height:7px;border-radius:50%;background:var(--faint)}
.clock.open .dot{background:var(--buy);box-shadow:0 0 0 3px rgba(42,157,143,.2)}
.clock.closed .dot{background:var(--warn)}
.bell{position:relative;width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--panel);display:grid;place-items:center;cursor:pointer;font-size:15px}
.bell .n{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;border-radius:9px;background:var(--sell);color:#fff;font-size:10.5px;font-weight:800;display:grid;place-items:center;padding:0 5px}
.npanel{position:absolute;right:0;top:44px;width:360px;max-height:460px;overflow-y:auto;background:var(--panel);border:1px solid var(--line2);border-radius:14px;box-shadow:var(--shadow);z-index:40;display:none}
.npanel.on{display:block}
.nitem{padding:11px 14px;border-bottom:1px solid var(--line);font-size:13px;cursor:pointer}
.nitem:hover{background:rgba(255,255,255,.03)} .nitem.new{background:rgba(var(--accent-rgb),.07)}
.nitem .nt{font-weight:600} .nitem .nb{color:var(--muted);font-size:12px} .nitem .nw{color:var(--faint);font-size:11px}

/* views */
.view{display:none} .view.on{display:block;animation:fadein .18s ease}
@keyframes fadein{from{opacity:.4;transform:translateY(3px)}to{opacity:1;transform:none}}
.vgrid{display:grid;gap:16px} .mt16{margin-top:16px} .mt12{margin-top:12px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:16px;align-items:start}
.split.eq{grid-template-columns:1fr 1fr} .split.wide{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
@media(max-width:1150px){.split,.split.eq,.split.wide{grid-template-columns:1fr}}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:12px 18px;border-bottom:1px solid var(--line)}
.form{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;padding:16px 18px}
.form label{font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:4px}
.fchip{font:inherit;font-size:12px;font-weight:600;border:1px solid var(--line2);background:var(--panel2);color:var(--muted);padding:5px 11px;border-radius:999px;cursor:pointer;white-space:nowrap}
.fchip:hover{color:var(--text)} .fchip.on{background:rgba(var(--accent-rgb),.18);color:var(--text);border-color:rgba(var(--accent-rgb),.55)}
.fchip b{color:var(--accent);margin-left:5px}
.up{color:var(--buy)} .dn{color:var(--sell)}
.tsym{font-weight:800;letter-spacing:.2px} .tnm{font-size:11.5px;color:var(--muted);max-width:230px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trow{cursor:pointer} .trow.sel td{background:rgba(var(--accent-rgb),.08)}
.sdet-head{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;padding:16px 18px 6px}
.sdet-px{font-size:28px;font-weight:800;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.stats4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:10px 18px 16px}
.stats4 div{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:11px;color:var(--muted)}
.stats4 b{display:block;color:var(--text);font-size:13.5px;margin-top:2px;font-variant-numeric:tabular-nums}
.lwc{height:380px;margin:0 12px}
.verdict{padding:14px 16px;border-radius:12px;background:rgba(var(--accent-rgb),.1);border:1px solid rgba(var(--accent-rgb),.32);font-weight:600;margin-bottom:12px;line-height:1.5}
.verdict.pass{background:rgba(42,157,143,.12);border-color:rgba(42,157,143,.4)} .verdict.block{background:rgba(224,60,60,.1);border-color:rgba(224,60,60,.4)}
.disc{font-size:12px;color:var(--muted);padding:12px 18px;border-top:1px solid var(--line);line-height:1.55}
.note{font-size:12.5px;color:var(--muted);line-height:1.6}
.hint{font-size:12px;color:var(--faint)}
.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;padding:14px 18px}
.step{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:12px;cursor:pointer;transition:.15s}
.step:hover{border-color:rgba(var(--accent-rgb),.5)}
.step .sn{font-size:11px;color:var(--accent);font-weight:800;letter-spacing:.5px} .step .st{font-weight:700;font-size:13.5px;margin:2px 0} .step .sd{font-size:11.5px;color:var(--muted);line-height:1.4}
@media(max-width:1000px){.steps{grid-template-columns:repeat(2,1fr)} .stats4{grid-template-columns:repeat(2,1fr)}}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13px} .kv dt{color:var(--muted)} .kv dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.big-clock{font-size:30px;font-weight:800;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.tag{display:inline-block;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:6px;background:var(--panel2);border:1px solid var(--line2);color:var(--muted);margin:1px 3px 1px 0}
.newsi{display:grid;grid-template-columns:70px 1fr;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line)}
.newsi:last-child{border-bottom:0} .newsi .nt{font-weight:600;font-size:13.5px;line-height:1.4} .newsi .ns{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.5}
.newsi .when{font-size:11.5px;color:var(--faint);text-align:right}
.mstrip{display:flex;gap:8px;flex-wrap:wrap;padding:12px 18px;border-bottom:1px solid var(--line)}
.mbox{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:7px 11px;font-size:12px;cursor:pointer}
.mbox b{font-size:13px}
.limit{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.limit:last-child{border-bottom:0} .limit.bind{color:var(--text);font-weight:700} .limit .lh{color:var(--muted);font-size:12px}
.ticket{border:1px dashed rgba(var(--accent-rgb),.5);border-radius:14px;padding:14px 16px;background:rgba(var(--accent-rgb),.05)}
.ticket .tt{font-weight:800;font-size:16px}
.reason{font-size:12.5px;padding:3px 0}
.reason.bad{color:var(--sell)} .reason.ok{color:var(--muted)}
.wallet-pill{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:6px 12px;cursor:pointer;white-space:nowrap}
.wallet-pill b{color:var(--text)}

/* toasts + confirm */
#toasts{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:8px;z-index:90;max-width:360px}
.toast{background:var(--panel2);border:1px solid var(--line2);border-left:3px solid var(--accent);border-radius:11px;padding:11px 14px;font-size:13px;box-shadow:var(--shadow);animation:fadein .2s ease}
.toast.ok{border-left-color:var(--buy)} .toast.err{border-left-color:var(--sell)}
.cmodal{max-width:420px}
.cmodal .cbtns{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
.cmodal .cbtns .btn{width:auto;margin:0}

@media(max-width:880px){
  .ws-switch{grid-template-columns:repeat(3,1fr);order:2;width:100%;margin:6px 0 0}
  .ws-btn{flex-direction:column;gap:4px;padding:8px 6px;text-align:center} .ws-btn .wd{display:none} .ws-btn .wi{width:26px;height:26px;font-size:14px}
  .ws-btn .wt{font-size:12px}
  .nav-wrap{order:3;width:100%;display:flex;gap:4px;overflow-x:auto;padding-bottom:4px}
  .nav-wrap .snav{flex-direction:row;width:auto;margin:0;overflow:visible;padding:0;order:0}
  #navAccount{display:none}
  .npanel{position:fixed;left:10px;right:10px;width:auto;top:60px}
  .clock .lbl{display:none}
  #toasts{left:12px;right:12px;max-width:none}
}

.logo-img{width:38px;height:38px;border-radius:10px;box-shadow:0 8px 22px rgba(0,0,0,.45);flex:none}
