*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── Theme variables ── */
:root{
    --bg:#0a0e14;
    --bg-subtle:#0f1318;
    --card-bg:#131920;
    --card-bg-hover:#181f28;
    --border:#1e2a36;
    --border-subtle:#161e28;
    --text:#d4dde8;
    --text-secondary:#9eaab8;
    --text-muted:#5a6a7a;
    --accent:#3b82f6;
    --accent-hover:#60a5fa;
    --accent-bg:rgba(59,130,246,0.08);
    --green:#10b981;
    --green-bg:rgba(16,185,129,0.1);
    --red:#ef4444;
    --red-bg:rgba(239,68,68,0.1);
    --orange:#f97316;
    --orange-bg:rgba(249,115,22,0.1);
    --purple:#8b5cf6;
    --shadow:0 1px 3px rgba(0,0,0,0.3);
    --shadow-lg:0 4px 12px rgba(0,0,0,0.4);
}

[data-theme="light"]{
    --bg:#f5f7fa;
    --bg-subtle:#edf0f5;
    --card-bg:#ffffff;
    --card-bg-hover:#f8f9fb;
    --border:#e2e6ec;
    --border-subtle:#eaecf0;
    --text:#1a2332;
    --text-secondary:#4a5568;
    --text-muted:#8492a6;
    --accent:#3b82f6;
    --accent-hover:#2563eb;
    --accent-bg:rgba(59,130,246,0.06);
    --green:#059669;
    --green-bg:rgba(5,150,105,0.08);
    --red:#dc2626;
    --red-bg:rgba(220,38,38,0.08);
    --orange:#ea580c;
    --orange-bg:rgba(234,88,12,0.08);
    --purple:#7c3aed;
    --shadow:0 1px 3px rgba(0,0,0,0.08);
    --shadow-lg:0 4px 12px rgba(0,0,0,0.1);
}

body{
    font-family:'JetBrains Mono',monospace;
    background:var(--bg);
    color:var(--text);
    min-height:100vh;
    line-height:1.6;
    font-size:14px;
    transition:background 0.2s,color 0.2s;
}

/* ── Login page ── */
.login-page{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:2rem;
}

.login-card{
    background:var(--card-bg);
    border:1px solid var(--border);
    border-radius:16px;
    padding:2.5rem;
    width:100%;
    max-width:380px;
    text-align:center;
    box-shadow:var(--shadow-lg);
}

.login-logo{font-size:3rem;margin-bottom:0.5rem}

.login-card h1{
    font-size:1.8rem;
    font-weight:700;
    color:var(--text);
    margin-bottom:0.2rem;
}

.login-sub{
    font-size:0.78rem;
    color:var(--text-muted);
    margin-bottom:1.8rem;
}

.login-card label{
    display:block;
    text-align:left;
    font-size:0.68rem;
    font-weight:600;
    color:var(--text-muted);
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:0.4rem;
}

.login-card input{
    width:100%;
    padding:0.75rem 1rem;
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:8px;
    color:var(--text);
    font-family:inherit;
    font-size:1.1rem;
    letter-spacing:1px;
    text-align:center;
    margin-bottom:1rem;
    transition:border-color 0.2s;
}

.login-card input:focus{outline:none;border-color:var(--accent)}
.login-card input::placeholder{color:var(--text-muted);opacity:0.5}

.login-card button{
    width:100%;
    padding:0.75rem;
    background:var(--accent);
    color:#fff;
    border:none;
    border-radius:8px;
    font-family:inherit;
    font-size:0.85rem;
    font-weight:700;
    cursor:pointer;
    transition:background 0.2s;
}

.login-card button:hover{background:var(--accent-hover)}

.flash{
    background:var(--red-bg);
    border:1px solid rgba(239,68,68,0.3);
    color:var(--red);
    padding:0.6rem 0.8rem;
    border-radius:8px;
    font-size:0.78rem;
    margin-bottom:1rem;
    font-weight:500;
}

.phone-sent{font-size:0.82rem;color:var(--text-muted);margin-bottom:1rem}
.phone-sent strong{color:var(--text)}

.login-hint{font-size:0.7rem;color:var(--text-muted);margin-top:1rem;line-height:1.6}

.back-link{
    display:inline-block;
    margin-top:0.8rem;
    font-size:0.75rem;
    color:var(--text-muted);
    text-decoration:none;
}

.back-link:hover{color:var(--accent)}

.login-footer{margin-top:2rem;font-size:0.68rem;color:var(--text-muted)}
.login-footer a{color:var(--accent);text-decoration:none}

/* ── Top nav ── */
.topnav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0.6rem 1.5rem;
    border-bottom:1px solid var(--border);
    background:var(--card-bg);
    position:sticky;
    top:0;
    z-index:100;
    backdrop-filter:blur(8px);
}

.nav-brand{
    font-weight:700;
    font-size:1rem;
    display:flex;
    align-items:center;
    gap:0.5rem;
}

.nav-right{
    display:flex;
    align-items:center;
    gap:0.8rem;
}

.nav-user{font-size:0.75rem;color:var(--text-muted)}

.theme-toggle{
    background:none;
    border:1px solid var(--border);
    border-radius:6px;
    padding:0.25rem 0.5rem;
    cursor:pointer;
    font-size:0.85rem;
    line-height:1;
    color:var(--text-muted);
    transition:border-color 0.2s,color 0.2s;
}

.theme-toggle:hover{border-color:var(--accent);color:var(--accent)}

.nav-logout{
    font-size:0.72rem;
    color:var(--text-muted);
    text-decoration:none;
    padding:0.25rem 0.6rem;
    border:1px solid var(--border);
    border-radius:6px;
    transition:color 0.2s,border-color 0.2s;
}

.nav-logout:hover{color:var(--red);border-color:var(--red)}

/* ── Dashboard ── */
.dashboard{
    padding:1.5rem;
    max-width:1300px;
    margin:0 auto;
}

.section-title{
    font-size:0.7rem;
    font-weight:700;
    color:var(--text-muted);
    text-transform:uppercase;
    letter-spacing:1.5px;
    margin-bottom:0.8rem;
    padding-left:0.2rem;
}

/* ── Summary cards ── */
.summary-row{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0.8rem;
    margin-bottom:1.2rem;
}

.summary-row-3{grid-template-columns:repeat(3,1fr)}

.stat-card{
    background:var(--card-bg);
    border:1px solid var(--border);
    border-radius:10px;
    padding:1rem 1.2rem;
    transition:border-color 0.15s,box-shadow 0.15s;
    position:relative;
    overflow:hidden;
}

.stat-card:hover{
    border-color:var(--border-subtle);
    box-shadow:var(--shadow);
}

.stat-label{
    font-size:0.65rem;
    font-weight:600;
    color:var(--text-muted);
    text-transform:uppercase;
    letter-spacing:0.5px;
    margin-bottom:0.3rem;
}

.stat-value{
    font-size:1.5rem;
    font-weight:700;
    color:var(--text);
    font-variant-numeric:tabular-nums;
    line-height:1.2;
}

.stat-sub{
    font-size:0.68rem;
    color:var(--text-muted);
    margin-top:0.15rem;
    display:flex;
    align-items:center;
    gap:0.4rem;
}

.trend{
    display:inline-flex;
    align-items:center;
    gap:0.15rem;
    font-weight:600;
    font-size:0.65rem;
    padding:0.1rem 0.35rem;
    border-radius:4px;
}

.trend.up{color:var(--green);background:var(--green-bg)}
.trend.down{color:var(--red);background:var(--red-bg)}
.trend.flat{color:var(--text-muted);background:var(--accent-bg)}

.sparkline-wrap{
    position:absolute;
    bottom:0;
    right:0;
    width:80px;
    height:32px;
    opacity:0.5;
}

.sparkline-wrap canvas{
    width:100%;
    height:100%;
}

/* ── Chart card ── */
.chart-card{
    background:var(--card-bg);
    border:1px solid var(--border);
    border-radius:10px;
    padding:1.2rem;
    margin-bottom:1.2rem;
}

.chart-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:0.8rem;
    flex-wrap:wrap;
    gap:0.5rem;
}

.chart-header h2{font-size:0.9rem;font-weight:700}

.chart-controls{display:flex;gap:0.25rem}

.chart-btn{
    padding:0.25rem 0.6rem;
    border:1px solid var(--border);
    background:transparent;
    border-radius:5px;
    font-size:0.68rem;
    font-weight:600;
    cursor:pointer;
    color:var(--text-muted);
    font-family:inherit;
    transition:all 0.15s;
}

.chart-btn:hover{border-color:var(--accent);color:var(--accent)}

.chart-btn.active{
    background:var(--accent);
    color:#fff;
    border-color:var(--accent);
}

.chart-container{height:280px;position:relative}

/* ── Table card ── */
.table-card{
    background:var(--card-bg);
    border:1px solid var(--border);
    border-radius:10px;
    padding:1.2rem;
    margin-bottom:1.2rem;
}

.table-card h2{font-size:0.9rem;font-weight:700;margin-bottom:0.8rem}

.table-scroll{overflow-x:auto}

table{width:100%;border-collapse:collapse;font-size:0.75rem}

thead th{
    text-align:left;
    padding:0.4rem 0.6rem;
    border-bottom:2px solid var(--border);
    font-size:0.65rem;
    font-weight:700;
    color:var(--text-muted);
    text-transform:uppercase;
    letter-spacing:0.5px;
}

tbody td{
    padding:0.4rem 0.6rem;
    border-bottom:1px solid var(--border-subtle);
    color:var(--text);
}

tbody tr:hover{background:var(--accent-bg)}

td.num{font-variant-numeric:tabular-nums;text-align:right}

.bar-cell{
    width:100px;
    height:12px;
    background:var(--accent-bg);
    border-radius:3px;
    overflow:hidden;
}

.bar{
    height:100%;
    background:var(--accent);
    border-radius:3px;
    transition:width 0.3s;
}

/* ── Expand button ── */
.expand-btn{
    font-size:0.8rem !important;
    padding:0.2rem 0.5rem !important;
    line-height:1;
}

.expandable{cursor:default}
.expandable .chart-container{cursor:pointer}

/* ── Multi-panel fullscreen ── */
.fs-overlay{
    display:none;
    position:fixed;
    inset:0;
    z-index:1000;
    background:var(--bg);
    flex-direction:column;
}

.fs-overlay.active{display:flex}

.fs-toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0.4rem 1rem;
    border-bottom:1px solid var(--border);
    background:var(--card-bg);
    flex-shrink:0;
}

.fs-toolbar-left{display:flex;gap:0.3rem}

.fs-layout-btn{
    width:28px;height:28px;
    border:1px solid var(--border);
    background:transparent;
    border-radius:5px;
    font-size:0.72rem;
    font-weight:700;
    color:var(--text-muted);
    cursor:pointer;
    font-family:inherit;
    transition:all 0.15s;
}

.fs-layout-btn:hover{border-color:var(--accent);color:var(--accent)}
.fs-layout-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}

.fs-close-btn{
    background:none;
    border:1px solid var(--border);
    border-radius:6px;
    color:var(--text-muted);
    font-size:1.3rem;
    line-height:1;
    padding:0.15rem 0.5rem;
    cursor:pointer;
    font-family:inherit;
    transition:color 0.15s,border-color 0.15s;
}

.fs-close-btn:hover{color:var(--red);border-color:var(--red)}

.fs-grid{
    flex:1;
    display:grid;
    gap:0;
    min-height:0;
}

.fs-grid[data-layout="1"]{grid-template-columns:1fr;grid-template-rows:1fr}
.fs-grid[data-layout="1"] .fs-panel:nth-child(n+2){display:none}

.fs-grid[data-layout="2"]{grid-template-columns:1fr 1fr;grid-template-rows:1fr}
.fs-grid[data-layout="2"] .fs-panel:nth-child(n+3){display:none}

.fs-grid[data-layout="4"]{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}

.fs-panel{
    display:flex;
    flex-direction:column;
    border:1px solid var(--border);
    min-height:0;
    overflow:hidden;
}

.fs-panel-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0.3rem 0.6rem;
    border-bottom:1px solid var(--border-subtle);
    flex-shrink:0;
}

.fs-panel-title{
    font-size:0.72rem;
    font-weight:600;
    color:var(--text-muted);
}

.fs-panel-select{
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:4px;
    color:var(--text);
    font-family:inherit;
    font-size:0.68rem;
    padding:0.15rem 0.4rem;
    cursor:pointer;
}

.fs-panel-body{
    flex:1;
    position:relative;
    min-height:0;
}

.fs-panel-body canvas{
    position:absolute;
    inset:0;
    width:100% !important;
    height:100% !important;
}

/* ── Globe ── */
.globe-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1rem;
    margin-bottom:1.2rem;
}

.globe-card{margin-bottom:0}

.globe-container{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:300px;
}

.globe-container canvas{
    cursor:grab;
    max-width:100%;
}

.globe-container canvas:active{cursor:grabbing}

/* ── Week card ── */
.week-card{
    background:var(--card-bg);
    border:1px solid var(--border);
    border-radius:10px;
    padding:1.2rem 1.5rem;
    margin-bottom:1.2rem;
}

.week-header{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    margin-bottom:1rem;
}

.week-total{
    font-size:1.5rem;
    font-weight:700;
    font-variant-numeric:tabular-nums;
}

.week-total-label{
    font-size:0.72rem;
    color:var(--text-muted);
    margin-left:0.4rem;
}

.week-avg{
    font-size:0.72rem;
    color:var(--text-muted);
}

.week-bars{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:0.5rem;
    align-items:end;
}

.week-day{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0.3rem;
}

.week-day-bar{
    width:100%;
    border-radius:4px 4px 2px 2px;
    min-height:4px;
    transition:height 0.3s;
}

.week-day-count{
    font-size:0.72rem;
    font-weight:600;
    font-variant-numeric:tabular-nums;
    color:var(--text);
}

.week-day-label{
    font-size:0.62rem;
    color:var(--text-muted);
    text-transform:uppercase;
    letter-spacing:0.5px;
}

.week-day.today .week-day-label{
    color:var(--accent);
    font-weight:700;
}

.week-day.today .week-day-count{
    color:var(--accent);
}

/* ── Section divider ── */
.section-divider{
    border:none;
    border-top:1px solid var(--border);
    margin:1.5rem 0 1rem;
}

/* ── Responsive ── */
@media(max-width:900px){
    .summary-row{grid-template-columns:repeat(2,1fr)}
    .summary-row-3{grid-template-columns:repeat(2,1fr)}
    .globe-row{grid-template-columns:1fr}
}

@media(max-width:600px){
    .summary-row,.summary-row-3{grid-template-columns:1fr}
    .chart-header{flex-direction:column;align-items:flex-start}
    .dashboard{padding:0.8rem}
    .topnav{padding:0.6rem 0.8rem}
}