/* LAYOUT V3 — Pro Trading Terminal */
#app{display:none}
.wrap{max-width:1100px;margin:0 auto;padding:0 calc(var(--sp)*4)}

/* Header */
.hdr{background:linear-gradient(180deg, var(--bg-surface) 0%, var(--bg) 100%);border-bottom:1px solid var(--border);padding:calc(var(--sp)*4) calc(var(--sp)*4) calc(var(--sp)*2)}
.hdr-top{display:flex;justify-content:space-between;align-items:center}
.hdr .logo{display:flex;align-items:center;gap:calc(var(--sp)*2)}
.hdr .logo b{font-size:16px}
.hdr .logo small{font-size:10px;color:var(--text-3);display:block}

/* Timeline */
.tl{display:flex;height:24px;border-radius:6px;overflow:hidden;background:var(--bg);border:1px solid var(--border);position:relative;margin:calc(var(--sp)*2) 0}
.tl .z{display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.tl .z.on{color:#fff}
.tl .z.asia{background:rgba(59,130,246,.08);color:rgba(59,130,246,.4)}.tl .z.asia.on{background:rgba(59,130,246,.25)}
.tl .z.ldn{background:rgba(16,185,129,.08);color:rgba(16,185,129,.4)}.tl .z.ldn.on{background:rgba(16,185,129,.3)}
.tl .z.ovlp{background:rgba(245,158,11,.08);color:rgba(245,158,11,.4)}.tl .z.ovlp.on{background:rgba(245,158,11,.3)}
.tl .z.ny{background:rgba(139,92,246,.08);color:rgba(139,92,246,.4)}.tl .z.ny.on{background:rgba(139,92,246,.3)}
.tl .now{position:absolute;top:0;bottom:0;width:2px;background:var(--red);box-shadow:0 0 6px var(--red)}

/* Decision bar */
.dec{display:flex;align-items:center;gap:calc(var(--sp)*2);padding:calc(var(--sp)*2) calc(var(--sp)*3);background:var(--bg-elevated);border:1px solid var(--border);border-radius:6px;font-size:10px;color:var(--text-2);margin-bottom:calc(var(--sp)*2)}
.dec .d{width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0}

/* Stats row */
.stats{display:grid;gap:calc(var(--sp)*2);margin-bottom:calc(var(--sp)*3)}
.st{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:calc(var(--sp)*2) calc(var(--sp)*3);text-align:center}
.st .l{font-size:8px;color:var(--text-3);text-transform:uppercase;letter-spacing:.8px;font-weight:600}
.st .v{font-size:16px;font-weight:900;margin-top:1px}
.st .s{font-size:8px;color:var(--text-3)}

/* Section title */
.stit{font-size:9px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:calc(var(--sp)*2)}

/* Robot cards */
.rb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:calc(var(--sp)*2);margin-bottom:calc(var(--sp)*3)}
.rc{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:calc(var(--sp)*2);cursor:pointer;transition:all .15s;border-left:3px solid}
.rc:hover{background:var(--bg-elevated);border-color:var(--border-hover)}
.rc.off{opacity:.35}

/* Badges */
.bst{display:inline-flex;padding:1px 6px;border-radius:99px;font-size:7px;font-weight:800;letter-spacing:.5px}
.bst.on{background:rgba(16,185,129,.12);color:var(--green)}
.bst.off{background:rgba(148,163,184,.06);color:var(--text-3)}

/* Table scanner */
.tbl{width:100%;border-collapse:collapse}
.tbl th{font-size:8px;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;font-weight:600;padding:calc(var(--sp)*2);text-align:left;border-bottom:1px solid var(--border)}
.tbl td{padding:6px calc(var(--sp)*2);font-size:11px;border-bottom:1px solid rgba(148,163,184,.03);vertical-align:middle}
.tbl tr:hover td{background:rgba(255,255,255,.015)}
.tbl .sym{font-weight:700;font-size:12px}
.tbl .tp{font-size:9px;color:var(--text-3)}
.tbl .bl{color:var(--green);font-weight:700;font-size:11px}
.tbl .br{color:var(--red);font-weight:700;font-size:11px}
.tbl .bn{color:var(--text-3);font-size:11px}

/* Score bar */
.sbar{display:flex;align-items:center;gap:calc(var(--sp)*2)}
.sbar .bg{flex:1;height:5px;background:rgba(148,163,184,.06);border-radius:3px;overflow:hidden}
.sbar .fg{height:100%;border-radius:3px;transition:width .8s}

/* Tabs */
.tabs{display:flex;justify-content:center;border-bottom:1px solid var(--border);margin-bottom:calc(var(--sp)*3);gap:0}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:calc(var(--sp)*2) calc(var(--sp)*4);font-size:11px;font-weight:600;color:var(--text-3);border:none;background:none;border-bottom:2px solid transparent;white-space:nowrap;transition:all .15s}
.tab.on{color:var(--blue);border-bottom-color:var(--blue)}
.tab:hover:not(.on){color:var(--text-2)}

/* Regime pill */
.rpill{display:inline-flex;align-items:center;gap:calc(var(--sp)*2);padding:4px calc(var(--sp)*3);border-radius:99px;font-size:12px;font-weight:800;border:1px solid}
.rdot{width:8px;height:8px;border-radius:50%;animation:pulse 2s infinite}

/* Pills */
.pill{display:inline-flex;flex-direction:column;align-items:center;background:var(--bg-elevated);border:1px solid var(--border);border-radius:6px;padding:calc(var(--sp)*2) calc(var(--sp)*3);min-width:60px}
.pill .pk{font-size:8px;color:var(--text-3);text-transform:uppercase;font-weight:600}
.pill .pv{font-size:14px;font-weight:900}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:calc(var(--sp)*2);padding:calc(var(--sp)*2) calc(var(--sp)*4);border-radius:6px;border:none;font-weight:700;font-size:12px;transition:all .15s;min-height:36px}
.btn-p{background:var(--blue);color:#fff}.btn-p:hover{filter:brightness(1.1)}
.btn-g{background:transparent;border:1px solid var(--border);color:var(--text-2)}.btn-g:hover{border-color:var(--border-hover);color:var(--text)}
.btn-d{background:var(--red);color:#fff}
.btn-s{padding:3px 8px;font-size:10px;min-height:24px}

.input{width:100%;padding:10px calc(var(--sp)*4);border-radius:6px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:14px;outline:none}
.input:focus{border-color:var(--blue)}

.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:99px;font-size:9px;font-weight:700}
.bg-g{background:rgba(16,185,129,.12);color:var(--green)}
.bg-r{background:rgba(239,68,68,.12);color:var(--red)}
.bg-o{background:rgba(245,158,11,.12);color:var(--orange)}
.bg-b{background:rgba(59,130,246,.12);color:var(--blue)}
.bg-m{background:rgba(148,163,184,.06);color:var(--text-2)}

.spinner{width:24px;height:24px;border:2px solid var(--border);border-top-color:var(--blue);border-radius:50%;animation:spin .7s linear infinite;margin:0 auto}

/* Login */
.login-screen{display:flex;justify-content:center;align-items:center;min-height:100dvh;padding:calc(var(--sp)*4);background:var(--bg)}
.login-box{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:40px 32px;max-width:380px;width:100%;text-align:center}
.login-box h1{font-size:22px;font-weight:900;margin:calc(var(--sp)*3) 0 4px}
.login-box .sub{color:var(--text-2);font-size:12px;margin-bottom:calc(var(--sp)*6)}

/* Footer */
.footer{text-align:center;padding:calc(var(--sp)*4) 0;margin-top:calc(var(--sp)*4);border-top:1px solid var(--border);color:var(--text-3);font-size:9px}

/* Responsive */
.stats{grid-template-columns:repeat(3,1fr)}
.tbl .hide-m{display:none}

@media(min-width:768px){
  .stats{grid-template-columns:repeat(6,1fr)}
  .tbl .hide-m{display:table-cell}
  .rb-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
}
@media(min-width:1024px){
  .wrap{max-width:1100px}
  .rb-grid{grid-template-columns:repeat(5,1fr)}
}