:root{color-scheme:dark;--bg:#0d1320;--sidebar:#111a2a;--panel:#151e2e;--border:#263348;--text:#edf2fa;--muted:#8f9cb1;--green:#20ce9c;--blue:#6e9aff;--orange:#f2b857;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font-size:14px}button,select,input{font:inherit}.app-shell{display:flex;min-height:100vh}.sidebar{width:242px;background:var(--sidebar);border-right:1px solid var(--border);padding:27px 16px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;flex-shrink:0}.brand{display:flex;gap:12px;align-items:center;margin:2px 7px 57px}.brand-mark{display:grid;place-items:center;background:#f6c65b;color:#161b26;font-weight:900;width:39px;height:39px;border-radius:11px;font-size:24px}.brand strong{font-size:15px;letter-spacing:1.2px}.brand small{display:block;margin-top:4px;color:var(--muted);font-size:9px;letter-spacing:1.7px}.side-label{font-size:10px;color:#61718b;font-weight:750;letter-spacing:2px;margin:0 16px 15px}.section-spaced{margin-top:34px}.nav-active,.nav-row{padding:13px 15px;display:flex;align-items:center;gap:12px;border-radius:8px;font-size:13px}.nav-active{background:#253348;color:#fff;font-weight:650}.nav-row{color:#8292ad}.nav-icon{font-size:18px}.nav-dot{width:6px;height:6px;border-radius:50%;background:#f3c45a;margin-left:auto}.sidebar-bottom{margin-top:auto;padding:19px 8px 0;border-top:1px solid #263348;display:flex;align-items:center;gap:10px}.avatar{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:#f8cd70;background:#3a3430;font-size:11px;font-weight:800}.bottom-identity strong{display:block;font-size:12px}.bottom-identity small{color:var(--muted);font-size:11px;display:block;margin-top:5px}.content{min-width:0;flex:1}.topbar{border-bottom:1px solid var(--border);height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 32px}.breadcrumb{color:#d4dfef;font-size:12px}.breadcrumb span{padding:0 11px;color:#5f728b}.top-right{display:flex;align-items:center;gap:19px;font-size:11px;color:var(--muted)}.updated{padding-left:18px;border-left:1px solid var(--border)}.main-padding{padding:34px 32px 20px;max-width:1820px;margin:auto}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:27px}.eyebrow{color:#e8b857;font-size:10px;letter-spacing:2px;font-weight:800;margin-bottom:9px}h1{margin:0 0 9px;font-size:27px;letter-spacing:-.6px}h2{margin:0;font-size:15px;letter-spacing:-.1px}.subheading{color:var(--muted);font-size:12px}.subheading code{color:#b7c5db}.heading-actions{display:flex;gap:13px;align-items:center}.health{display:flex;align-items:center;gap:8px;border-radius:30px;padding:9px 13px;color:#88dfa9;background:#15332f;border:1px solid #25614d;font-size:11px;white-space:nowrap}.health i{width:7px;height:7px;border-radius:50%;background:#35d39d;box-shadow:0 0 0 3px #35d39d23}.health.bad{color:#ffad9d;background:#3e292b;border-color:#714042}.health.bad i{background:#ee7564;box-shadow:none}.btn-secondary,.export-button{border:1px solid #33445d;background:#1b2637;color:#dee6f3;border-radius:8px;padding:10px 14px;text-decoration:none;cursor:pointer;font-weight:600;white-space:nowrap}.btn-secondary:hover,.export-button:hover{border-color:#6a7890}.filters{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:23px}.range-group{display:flex;background:#141e2d;border:1px solid var(--border);padding:4px;border-radius:10px}.range{border:0;background:transparent;color:#8798b0;padding:9px 14px;cursor:pointer;border-radius:7px;white-space:nowrap}.range.active{color:#f0f3f8;background:#33425a;font-weight:650}.filter-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.select-wrap{display:flex;align-items:center;gap:8px;border:1px solid var(--border);background:#151e2d;border-radius:8px;padding:0 10px;color:#7688a0;font-size:11px}.select-wrap select{background:transparent;border:0;color:#e7effa;padding:11px 4px;min-width:115px;outline:none;font-size:12px;max-width:220px}.select-wrap option{background:#1b2738}.custom-range{display:flex;gap:9px}.custom-range label{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:5px}.custom-range input{background:#151e2d;border:1px solid var(--border);color:#e4edfa;border-radius:6px;padding:8px}.hidden{display:none!important}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px;margin-bottom:20px}.metric-card{border:1px solid var(--border);border-radius:12px;background:var(--panel);padding:19px 19px 20px;min-width:0;overflow:hidden}.metric-card.sell{border-top:2px solid #1ba77e}.metric-card.buy{border-top:2px solid #5d89ec}.metric-top{display:flex;align-items:center;justify-content:space-between;color:#9eabc0;letter-spacing:1px;font-size:10px;font-weight:750}.metric-icon{font-size:19px;color:#637792}.sell .metric-icon{color:var(--green)}.buy .metric-icon{color:var(--blue)}.metric-number{font-size:clamp(20px,2.25vw,31px);font-weight:770;letter-spacing:-.8px;margin:20px 0 16px;white-space:nowrap}.metric-number small{font-size:12px;color:#8999b0;font-weight:600;letter-spacing:0}.metric-foot{display:flex;align-items:center;gap:7px;font-size:12px;white-space:nowrap;color:#cad4e4}.metric-right{margin-left:auto;color:#8999b0;font-size:10px}.muted{color:var(--muted);font-size:11px}.bullet{width:7px;height:7px;border-radius:50%;flex-shrink:0}.bullet.green{background:var(--green)}.bullet.blue{background:var(--blue)}.chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}.panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;min-width:0;overflow:hidden}.panel-heading{padding:22px 22px 18px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.panel-heading p{margin:7px 0 0;color:var(--muted);font-size:11px}.info-tag{font-size:10px;color:#a1aec2;background:#222f42;padding:7px 9px;border-radius:6px;white-space:nowrap}.chart-body{height:300px;padding:0 16px 21px 11px;position:relative}.chart-body canvas{width:100%!important;height:100%!important}.empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);padding:25px;text-align:center}.table-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:20px}.table-scroll{overflow-x:auto;max-height:530px;overflow-y:auto}table{border-collapse:collapse;width:100%;font-size:12px;text-align:left}th{color:#788ba6;font-size:10px;letter-spacing:.7px;font-weight:750;padding:14px 19px;background:#1a2638;white-space:nowrap}td{border-top:1px solid #263246;padding:14px 19px;color:#d5deea;white-space:nowrap}td code{color:#aab9cd;font-size:11px}.side-badge{display:inline-block;font-size:10px;border-radius:5px;padding:5px 7px;font-weight:750}.side-badge.sell{color:#69e7bc;background:#1c443c}.side-badge.buy{color:#91b1ff;background:#293b63}.side-badge.reset{color:#f5bf75;background:#4a3627}.positive{color:#40d6a7;font-weight:700}.negative{color:#82a9ff;font-weight:700}.no-data{text-align:center;color:var(--muted);padding:32px}.notice{margin-top:18px;padding:15px 18px;border:1px solid #514a37;background:#252638;color:#c8bba3;border-radius:9px;font-size:11px;line-height:1.7}footer{padding:25px 0 8px;font-size:11px;text-align:center;color:#60738f}.error{padding:12px 16px;margin-bottom:15px;background:#522d31;border:1px solid #884e50;color:#ffd3cf;border-radius:7px;font-size:12px}.demo-badge{padding:3px 7px;background:#4b422d;color:#f2c36b;border-radius:4px;font-size:10px;font-weight:750;margin-left:7px}@media(max-width:1220px){.sidebar{width:198px}.main-padding{padding:27px 21px}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.chart-grid,.table-grid{grid-template-columns:1fr}}@media(max-width:760px){.sidebar{display:none}.topbar{padding:0 15px}.top-right .timezone{display:none}.main-padding{padding:22px 13px}.page-heading{align-items:flex-start;flex-direction:column}h1{font-size:23px}.filters{align-items:flex-start}.filter-right{width:100%}.metrics{gap:10px}.metric-card{padding:14px}.metric-number{font-size:21px}.metric-right{display:none}.chart-body{height:260px}.topbar{height:57px}}@media(max-width:450px){.metrics{grid-template-columns:1fr}.filter-right{gap:8px}.select-wrap{width:100%}.select-wrap select{flex:1}.range{padding:9px 11px}.custom-range{flex-wrap:wrap}}

/* v2: Binance side colors by merchant perspective: BUY green, SELL red. */
:root{--green:#0ecb81;--red:#f6465d;--blue:#719efb}
.metric-card.sell{border-top:2px solid var(--red)}
.metric-card.buy{border-top:2px solid var(--green)}
.sell .metric-icon{color:var(--red)}
.buy .metric-icon{color:var(--green)}
.bullet.red{background:var(--red)}
.bullet.green{background:var(--green)}
.side-badge.sell{color:#ff8e9e;background:#48242f}
.side-badge.buy{color:#70e4b2;background:#193e33}
.positive{color:#ff8e9e}
.negative{color:#70e4b2}
.btn-primary{border:1px solid #158d64;background:#0f925f;color:#fff;padding:11px 17px;border-radius:8px;font-weight:750;cursor:pointer}
.btn-primary:hover{background:#13a46c}
.btn-primary:disabled{opacity:.6;cursor:wait}
.btn-logout{border:1px solid #394860;border-radius:7px;padding:6px 10px;background:transparent;color:#cdd6e6;cursor:pointer;font-size:11px}
.login-body{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 50% 20%,#1d3543 0%,#0d1320 52%)}
.login-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;width:100%;max-width:420px;padding:34px;box-shadow:0 24px 60px #0004}
.login-brand{margin:0 0 38px}.login-card h1{font-size:26px}
.login-card .subheading{line-height:1.7;margin-bottom:24px}
.login-form{display:flex;flex-direction:column;gap:10px}
.login-form label{font-size:12px;color:#b0bed2;font-weight:650;margin-top:7px}
.login-form input,.manager-form input{border:1px solid #3b4b63;background:#101927;border-radius:8px;color:#eaf2ff;padding:12px;width:100%;outline:none}
.login-form input:focus,.manager-form input:focus{border-color:#42bf91}
.login-form button{margin-top:15px}
.login-foot{text-align:center;color:#66768f;font-size:11px;margin-top:25px}
.merchant-manager{margin-bottom:20px;padding-bottom:18px}
.manager-form{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;padding:0 22px 16px}
.manager-form label{display:block;flex:1;min-width:180px;font-size:11px;color:#a4b2ca}
.manager-form input{display:block;margin-top:7px}
.merchant-list{display:flex;flex-direction:column;gap:9px;padding:0 22px}
.merchant-item{display:flex;justify-content:space-between;align-items:center;gap:15px;border:1px solid var(--border);border-radius:9px;padding:11px 14px;background:#121b2a}
.merchant-item strong{display:block;font-size:13px}.merchant-item code{display:block;margin-top:6px;color:#91a1ba;overflow-wrap:anywhere;font-size:11px}
.btn-danger{border:1px solid #823b49;border-radius:7px;padding:8px 10px;background:#45252e;color:#ffa3ae;cursor:pointer;white-space:nowrap}
.manager-message{margin:8px 22px;font-size:12px;color:#d9bc7d}
.manager-import{border-top:1px solid var(--border);margin:18px 22px 0;padding-top:16px;font-size:12px}
.manager-import p{color:var(--muted);line-height:1.6}
.manager-import-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.manager-import-row input{max-width:320px;color:#b8c7dd}
@media(max-width:760px){.manager-form{flex-direction:column;align-items:stretch}.manager-form label{width:100%;min-width:0}.merchant-item{align-items:flex-start;flex-direction:column}.heading-actions{flex-wrap:wrap}.top-right{gap:6px}}

/* v3: khối lượng âm, giá nguồn linh hoạt */
.reversed{color:#ff808e!important;font-weight:800}
.chart-source{background:#202e40;color:#e6eaf4;border:1px solid #35455c;border-radius:7px;padding:7px 8px;max-width:230px;font-size:11px;cursor:pointer}
.metric-right{white-space:normal;text-align:right;line-height:1.5;max-width:70%}

/* v4.1 — portfolio metrics are placed after the original v3 dashboard. */
.finance-section{margin:26px 0 10px;padding-top:16px;border-top:1px solid var(--border)}
.finance-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:15px 0 16px}
.finance-heading h2{font-size:20px}
.finance-heading p{font-size:12px;margin:8px 0 0;color:var(--muted)}
.finance-metrics{margin-bottom:16px}
.finance-charts{margin-bottom:14px}
.finance-warning{padding:12px 15px;background:#272333;border:1px solid #5b4b38;color:#f0d4a7;border-radius:8px;font-size:12px;line-height:1.7;margin:0 0 19px}
.finance-warning.ok{background:#17302c;border-color:#295c4d;color:#97d8c4}
.finance-metrics .metric-card:nth-child(1){border-top:2px solid #8ea5ff}
.finance-metrics .metric-card:nth-child(2){border-top:2px solid #0ecb81}
.finance-metrics .metric-card:nth-child(4){border-top:2px solid #e7a84b}
.finance-metrics .metric-foot{white-space:normal;line-height:1.55}
.metric-number.gain{color:#0ecb81}
.metric-number.loss{color:#f6465d}
.manager-hint{font-size:11px;color:var(--muted);margin:11px 0}
.merchant-item-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.merchant-item .btn-secondary{padding:7px 10px;font-size:11px}
@media(max-width:760px){.finance-heading{align-items:flex-start;flex-direction:column}}

.finance-negative{color:#f6465d!important}