:root{
    --bg:#07111f;
    --bg-deep:#050c17;
    --sidebar:#06101d;
    --surface:#0b1829;
    --surface-2:#0d1d31;
    --surface-3:#102238;
    --border:#1c3553;
    --border-soft:rgba(107,145,192,.18);
    --text:#f4f7fd;
    --muted:#91a2bb;
    --muted-2:#637793;
    --blue:#4094ff;
    --blue-2:#286fff;
    --green:#15d98a;
    --red:#ff566d;
    --orange:#ff9e18;
    --purple:#a646ff;
    --cyan:#11c9d1;
    --shadow:0 16px 40px rgba(0,0,0,.22);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}
body{
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
    background:
        radial-gradient(circle at 77% -10%,rgba(54,120,214,.12),transparent 31%),
        linear-gradient(180deg,#07111f 0%,#081321 100%);
    font-size:14px;
}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
svg{display:block}
img{max-width:100%}

/* ---------- GLOBAL APP ---------- */
.app-shell{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:100vh}
.app-sidebar{
    position:sticky;top:0;height:100vh;overflow:auto;
    padding:20px 18px 18px;
    background:linear-gradient(180deg,#07111f 0%,#050d18 100%);
    border-right:1px solid #19304b;
    scrollbar-width:thin;
}
.app-main{min-width:0;padding:0 20px 40px}

/* ---------- BRAND ---------- */
.brand-wrap{display:flex;align-items:center;gap:11px}
.brand-logo{
    width:36px;height:36px;border-radius:8px;
    display:grid;place-items:center;
    background:linear-gradient(135deg,#3d99ff,#615cff);
    box-shadow:0 0 26px rgba(65,148,255,.28);
}
.brand-logo svg{width:21px;height:21px;stroke:#fff}
.brand-title{font-size:19px;line-height:1;font-weight:900;letter-spacing:-.5px}
.brand-title b{color:#62a4ff}
.brand-caption{font-size:9.5px;color:#8799b2;margin:5px 0 30px 47px}

/* ---------- SIDEBAR NAV ---------- */
.primary-link{
    display:flex;align-items:center;gap:10px;height:39px;padding:0 10px;
    margin-bottom:18px;border:1px solid #2364a7;border-radius:7px;
    background:linear-gradient(90deg,#0e2d52,#0a2039);
    color:#70b0ff;font-size:12px;font-weight:750;
}
.primary-link svg,.nav-link svg{width:16px;height:16px;flex:0 0 16px}
.side-section{margin-top:19px}
.side-heading{
    margin:0 9px 8px;
    font-size:10px;text-transform:uppercase;letter-spacing:.55px;color:#8b9bb2
}
.side-nav{display:grid;gap:3px}
.nav-link{
    min-height:34px;padding:0 10px;border-radius:7px;
    display:flex;align-items:center;gap:11px;
    color:#c5cedc;font-size:12px;transition:.14s ease;
}
.nav-link svg{stroke:#8093ad}
.nav-link:hover,.nav-link.active{background:#0e223a;color:#fff}
.nav-link.active svg{stroke:#56a0ff}
.nav-new{
    margin-left:auto;padding:2px 5px;border-radius:4px;
    background:#096dcc;border:1px solid #0c7de8;
    color:#b7dcff;font-size:7px;font-weight:900
}
.sidebar-spacer{height:22px}
.profile-card{
    margin-top:34px;padding:12px;border:1px solid #223b5a;border-radius:8px;
    background:linear-gradient(135deg,#0c1c30,#0a1728);
    display:flex;align-items:center;gap:9px
}
.profile-avatar{
    width:35px;height:35px;border-radius:50%;
    display:grid;place-items:center;font-weight:850;
    background:linear-gradient(135deg,#c33cff,#7c30d7)
}
.profile-meta{min-width:0;flex:1}
.profile-name{font-size:11px;font-weight:780;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile-plan{font-size:9px;color:#ffc31c;margin-top:3px}
.profile-chevron{color:#8598b3}
.theme-card{
    height:52px;margin-top:17px;padding:0 13px;border:1px solid #213957;border-radius:8px;
    background:#0a192b;display:flex;align-items:center;justify-content:space-between;
    color:#d0d9e8;font-size:11px
}
.theme-switch{
    width:36px;height:18px;border-radius:99px;position:relative;
    background:#267cea;box-shadow:inset 0 0 0 1px #438ff2
}
.theme-switch:after{
    content:"";position:absolute;right:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff
}
.signout-link{display:block;margin-top:11px;text-align:center;color:#6f829f;font-size:10px}

/* ---------- DASHBOARD HEADER ---------- */
.dashboard-top{
    min-height:91px;padding-top:22px;
    display:flex;align-items:flex-start;justify-content:space-between;gap:18px
}
.dashboard-title h1{margin:0;font-size:26px;line-height:1.05;letter-spacing:-.75px}
.dashboard-title p{margin:6px 0 0;font-size:12px;color:var(--muted)}
.dashboard-filters{display:flex;gap:10px;align-items:center}
.filter-control{
    height:42px;padding:0 11px;border:1px solid #223d5d;border-radius:7px;
    background:#0a192a;color:#edf3fc;display:flex;align-items:center;gap:8px;font-size:11px
}
.filter-control svg{width:15px;height:15px;stroke:#8ea2bd}
.filter-control input,.filter-control select{
    padding:0;border:0;outline:0;background:transparent;color:#edf3fc;font-size:11px
}
.filter-control input[type=date]{width:104px;color-scheme:dark}
.filter-control select{min-width:125px}
.filter-control option{background:#0a192a;color:#fff}
.filter-arrow{color:#748aa7}

/* ---------- KPI CARDS ---------- */
.kpi-grid{display:grid;grid-template-columns:repeat(6,minmax(125px,1fr));gap:12px;margin-bottom:13px}
.kpi-card{
    min-height:109px;padding:15px;
    border:1px solid var(--border);border-radius:8px;
    background:linear-gradient(150deg,#0e2035,#0a1829);
    display:flex;align-items:flex-start;gap:12px;
    box-shadow:var(--shadow)
}
.kpi-card.k-green{border-color:#155844}
.kpi-card.k-blue{border-color:#1a4877}
.kpi-card.k-purple{border-color:#4b2869}
.kpi-card.k-cyan{border-color:#15515c}
.kpi-card.k-orange{border-color:#63431e}
.kpi-icon{
    flex:0 0 42px;width:42px;height:42px;border-radius:50%;
    display:grid;place-items:center;margin-top:1px;
    border:1px solid currentColor
}
.kpi-icon svg{width:21px;height:21px}
.kpi-icon.green{color:#18c876;background:#083225;box-shadow:0 0 24px rgba(24,200,118,.16)}
.kpi-icon.blue{color:#3a92ff;background:#082747;box-shadow:0 0 24px rgba(58,146,255,.17)}
.kpi-icon.purple{color:#aa48ef;background:#2c103f;box-shadow:0 0 24px rgba(170,72,239,.16)}
.kpi-icon.cyan{color:#13c9d0;background:#073238;box-shadow:0 0 24px rgba(19,201,208,.16)}
.kpi-icon.orange{color:#ff9f1a;background:#38240b;box-shadow:0 0 24px rgba(255,159,26,.16)}
.kpi-label{font-size:8.5px;text-transform:uppercase;color:#9eacc0;font-weight:800;margin-bottom:7px}
.kpi-value{font-size:22px;line-height:1;font-weight:880;letter-spacing:-.45px}
.kpi-sub{font-size:9.5px;color:#bdc7d7;margin-top:9px;white-space:nowrap}
.pos{color:var(--green)!important;font-weight:800}
.neg{color:var(--red)!important;font-weight:800}

/* ---------- PANELS ---------- */
.dashboard-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:13px}
.dashboard-lower{display:grid;grid-template-columns:1.02fr .98fr;gap:13px;margin-top:13px}
.ui-panel{
    overflow:hidden;border:1px solid var(--border);border-radius:8px;
    background:linear-gradient(155deg,#0c1d31,#091827);
    box-shadow:var(--shadow)
}
.ui-panel-inner{padding:17px 18px}
.ui-panel-head{
    display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:13px
}
.ui-title{font-size:16px;font-weight:820;letter-spacing:-.2px}
.ui-subtitle{margin-top:5px;font-size:10px;color:#8fa2bc}
.ui-info{font-size:11px;color:#8598b3}
.ui-select{
    padding:7px 10px;border:1px solid #25415f;border-radius:7px;
    background:#0a192b;color:#e8eef8;font-size:10px;outline:0
}
.chart-equity{height:247px;position:relative}
.chart-drawdown{height:199px;position:relative}

/* ---------- TABLES ---------- */
.metric-table{width:100%;border-collapse:collapse;font-size:11px}
.metric-table th{
    text-align:left;padding:9px 3px;border-bottom:1px solid #1b3551;
    color:#8295af;font-size:8.5px;text-transform:uppercase;font-weight:850
}
.metric-table td{padding:12px 3px;border-bottom:1px solid #19314b;color:#e4eaf3}
.metric-table tr:last-child td{border-bottom:0}
.session-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px}
.dot-green{background:#15d982}.dot-orange{background:#ff9e18}.dot-purple{background:#a247ff}.dot-blue{background:#3d8fff}
.panel-link{display:inline-block;margin-top:14px;color:#3f98ff;font-size:10px}

/* ---------- RISK STRIP ---------- */
.risk-panel{margin-top:13px;padding:13px 14px 14px}
.risk-heading{margin:0 0 10px;font-size:13px;font-weight:820}
.risk-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.risk-card{
    min-height:75px;padding:12px;position:relative;overflow:hidden;
    border:1px solid #203a58;border-radius:8px;background:linear-gradient(155deg,#0e2035,#0a192b)
}
.risk-label{font-size:8px;text-transform:uppercase;color:#96a6bb;font-weight:800}
.risk-value{margin-top:9px;font-size:18px;font-weight:880}
.sparkline{position:absolute!important;right:8px!important;bottom:7px!important;width:82px!important;height:27px!important}

/* ---------- EXISTING V0.1–V0.3 PAGES COMPATIBILITY ---------- */
header.topbar, .topbar{
    display:flex;justify-content:space-between;align-items:center;padding:25px 0 20px
}
header.topbar h1,.topbar h1{margin:0;font-size:25px}
header.topbar p,.topbar p{margin:5px 0 0;color:var(--muted)}
.user-pill,.userbadge{
    padding:8px 12px;border:1px solid var(--border);border-radius:999px;background:var(--surface);
}
.cards{display:grid;grid-template-columns:repeat(6,minmax(125px,1fr));gap:12px;margin-bottom:17px}
.stat{
    min-height:100px;padding:16px;border:1px solid var(--border);border-radius:10px;
    background:linear-gradient(150deg,#0e2035,#0a1829)
}
.stat span{display:block;font-size:9px;text-transform:uppercase;color:var(--muted);font-weight:800}
.stat strong{display:block;margin-top:10px;font-size:22px}
.grid2,.grid.two{display:grid;grid-template-columns:1.2fr 1fr;gap:16px}
.panel{
    padding:18px;border:1px solid var(--border);border-radius:10px;
    background:linear-gradient(155deg,#0c1d31,#091827);box-shadow:var(--shadow)
}
.panel h2{margin:0 0 15px;font-size:15px}
.panel.narrow{max-width:720px}
.panel-title{display:flex;justify-content:space-between;align-items:center}
.panel-title span{font-size:10px;color:var(--muted)}
.secondrow{margin-top:16px}
.chartbox{height:310px;position:relative;margin-bottom:17px}
.chartbox canvas{max-height:310px}
table{width:100%;border-collapse:collapse;font-size:12px}
th,td{text-align:left;padding:10px 9px;border-bottom:1px solid rgba(112,145,184,.14);white-space:nowrap}
th{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.scroll,.table-wrap{overflow:auto}
form{display:grid;gap:9px}
label{font-size:10px;color:var(--muted);font-weight:700}
input,select,textarea{
    width:100%;padding:10px 11px;border:1px solid var(--border);border-radius:8px;
    background:#091527;color:#fff;outline:0
}
button,.button-link{
    padding:10px 14px;border:0;border-radius:8px;
    background:linear-gradient(135deg,var(--blue),#7862ff);color:#fff;font-weight:800;cursor:pointer
}
.filters{display:flex;gap:9px;margin-bottom:15px}
.filters select,.filters input{max-width:190px}
.bad,.alert,.good,.success,.empty,.hint{
    padding:11px 13px;margin:10px 0;border-radius:8px;font-size:11px
}
.bad,.alert{background:#401d2a;color:#ffc0cb}
.good,.success{background:#11382f;color:#9ff0d4}
.empty,.hint{background:#091527;color:var(--muted)}
.side{font-size:10px;font-weight:850}
.side.buy{color:var(--green)}.side.sell{color:var(--red)}
.positive{color:var(--green);font-weight:800}.negative{color:var(--red);font-weight:800}
.strategy-controls{margin-bottom:17px}
.strategy-form{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px;align-items:end}
.strategy-form>div{display:grid;gap:6px}
.days-block{grid-column:1/-1}
.daychecks{display:flex;gap:7px;flex-wrap:wrap}
.check{
    display:flex!important;align-items:center;gap:6px;padding:7px 9px;margin:0!important;
    border:1px solid var(--border);border-radius:8px;background:#091527;color:#fff!important
}
.check input{width:auto}
.strategy-actions{grid-column:1/-1;display:flex!important;gap:9px}
.ghost-btn{display:inline-flex;align-items:center;padding:10px 14px;border:1px solid var(--border);border-radius:8px}
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.compare-card.highlight{border-color:#4d8fff}
.compare-title{display:flex;justify-content:space-between;gap:10px}
.compare-title span{font-size:10px;color:var(--muted)}
.compare-number{font-size:36px;font-weight:900;margin:14px 0}
.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.metric-grid>div{padding:10px;border:1px solid var(--border);border-radius:8px;background:#091527}
.metric-grid span{font-size:8px;text-transform:uppercase;color:var(--muted)}
.metric-grid b{display:block;margin-top:4px}
.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}
.calhead{padding:7px;font-size:9px;font-weight:850;color:var(--muted)}
.calday{
    min-height:100px;padding:9px;border:1px solid var(--border);border-radius:8px;
    background:#091527;display:flex;flex-direction:column;gap:7px
}
.calday strong{font-size:16px}.calday small{font-size:9px;color:var(--muted)}
.emptyday{opacity:.3}

/* Auth screens from v0.1 */
.auth,.auth-body{
    min-height:100vh;display:grid;place-items:center;
    background:radial-gradient(circle at top,#17345f,#07111f 45%)
}
.authbox,.auth-card{
    width:min(420px,92vw);padding:31px;border:1px solid var(--border);border-radius:16px;
    background:var(--surface);box-shadow:var(--shadow)
}
.authbox h1,.auth-card h1{margin:22px 0 5px}
.authbox>p,.auth-card>p{color:var(--muted)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1420px){
    .kpi-grid,.cards{grid-template-columns:repeat(3,1fr)}
    .risk-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:1080px){
    .app-shell{grid-template-columns:205px minmax(0,1fr)}
    .dashboard-grid,.dashboard-lower,.grid2,.grid.two{grid-template-columns:1fr}
    .strategy-form{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
    .app-shell{display:block}
    .app-sidebar{position:relative;height:auto}
    .app-main{padding:0 12px 28px}
    .dashboard-top{display:block;padding-bottom:17px}
    .dashboard-filters{margin-top:15px;flex-wrap:wrap}
    .kpi-grid,.cards{grid-template-columns:repeat(2,1fr)}
    .risk-grid{grid-template-columns:repeat(2,1fr)}
    .strategy-form{grid-template-columns:1fr 1fr}
    .compare-grid{grid-template-columns:1fr}
    .metric-grid{grid-template-columns:1fr 1fr}
    .calendar{grid-template-columns:repeat(2,1fr)}
    .calhead{display:none}
}