:root {
    font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
    color:#1c293d;
    background:#f4f6fa;
    font-synthesis:none;
    --muted:#6b788c;
    --positive:#c83f4f;
    --negative:#098064;
    --line:#e7ebf1;
}

* {
    box-sizing:border-box;
}

body {
    margin:0;
}

.dashboard {
    max-width:1440px;
    margin:auto;
    padding:40px 40px 24px;
}

.header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:30px;
}

.eyebrow {
    font-size:12px;
    font-weight:700;
    letter-spacing:2px;
    display:flex;
    align-items:center;
    gap:12px;
    color:#51627b;
}

.brand-mark {
    background:#243d68;
    color:#fff;
    border-radius:9px;
    padding:7px 11px;
    font-size:18px;
}

.divider {
    color:#abb4c2;
}

h1 {
    font-size:28px;
    letter-spacing:-.7px;
    margin:22px 0 10px;
}

h2 {
    font-size:16px;
    margin:0;
    font-weight:650;
}

p {
    line-height:1.7;
    margin:8px 0 0;
}

.muted {
    color:var(--muted);
    font-size:12px;
}

.source-tag {
    font-size:12px;
    background:#e8edf5;
    color:#4d6283;
    padding:9px 14px;
    border-radius:20px;
}

.toolbar {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:16px 20px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px;
    margin-bottom:24px;
}

.date-controls,.table-controls {
    display:flex;
    align-items:center;
    gap:10px;
}

.date-controls label {
    font-size:13px;
    font-weight:600;
    margin-right:6px;
}

button,select,input {
    font:inherit;
    font-size:13px;
    border:1px solid #dbe1eb;
    background:#fff;
    border-radius:7px;
    padding:9px 12px;
    color:inherit;
}

button {
    cursor:pointer;
}

button:hover:not(:disabled) {
    background:#eef3fb;
    border-color:#9caec8;
}

button:disabled {
    opacity:.4;
    cursor:not-allowed;
}

button:focus-visible,select:focus-visible,input:focus-visible {
    outline:3px solid #a2bcef;
    outline-offset:2px;
}

.loading {
    position:absolute;
    right:20px;
    bottom:-20px;
    color:#406ba3;
    font-size:12px;
}

.metrics {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
    margin-bottom:24px;
}

.metric {
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px;
    padding:22px;
}

.metric>span {
    font-size:13px;
    color:#617087;
}

.metric>strong {
    display:block;
    font-size:32px;
    line-height:1.3;
    letter-spacing:-1px;
    margin:14px 0 8px;
    font-variant-numeric:tabular-nums;
}

.metric small {
    font-size:13px;
    font-weight:400;
    color:var(--muted);
}

.metric p {
    font-size:12px;
    color:var(--muted);
}

.positive {
    color:var(--positive);
}

.negative {
    color:var(--negative);
}

.charts {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-bottom:24px;
}

.panel {
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px;
    overflow:hidden;
}

.panel-heading {
    padding:22px 24px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
}

.panel-heading h2 {
    display:flex;
    align-items:center;
    gap:9px;
}

.dot {
    width:7px;
    height:7px;
    border-radius:50%;
    background:currentColor;
}

.bar-chart {
    padding:0 24px 24px;
    display:grid;
    gap:15px;
}

.bar-row {
    display:grid;
    grid-template-columns:100px minmax(0,1fr) 70px;
    gap:12px;
    align-items:center;
    font-size:12px;
    min-height:20px;
}

.bar-label {
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.bar-track {
    height:13px;
    background:#f7f8fa;
    border-radius:3px;
}

.bar {
    height:100%;
    background:currentColor;
    border-radius:3px;
    opacity:.85;
}

.bar-value {
    text-align:right;
    font-variant-numeric:tabular-nums;
}

.chart-empty {
    padding:60px 0;
    text-align:center;
    color:var(--muted);
}

.table-scroll {
    overflow-x:auto;
}

table {
    border-collapse:collapse;
    width:100%;
    font-size:13px;
    white-space:nowrap;
    text-align:right;
}

th {
    font-size:12px;
    color:#6b788c;
    font-weight:500;
    background:#f8f9fc;
}

th,td {
    padding:14px 20px;
    border-bottom:1px solid #edf0f5;
}

th:first-child,td:first-child {
    text-align:left;
    padding-left:24px;
}

tbody tr:hover {
    background:#fafbfe;
}

td strong {
    font-weight:550;
}

.code {
    display:block;
    color:#8c97a9;
    font-size:11px;
    margin-top:5px;
}

.net-value {
    font-weight:650;
}

td {
    font-variant-numeric:tabular-nums;
}

.pagination {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px 24px;
}

.pagination button+button {
    margin-left:8px;
}

.footnote {
    font-size:12px;
    color:#7a8698;
    margin:18px 2px;
}

.empty-state {
    text-align:center;
    padding:90px 24px;
    background:#fff;
    border:1px dashed #d4dce8;
    border-radius:12px;
}

.empty-state p {
    font-size:14px;
    color:var(--muted);
}

.table-empty {
    text-align:center!important;
    padding:40px;
}

.is-loading {
    opacity:.5;
    pointer-events:none;
}

.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

@media(min-width:1500px) {
    .dashboard {
        padding-top:52px;
    }
}

@media(max-width:1000px) {
    .dashboard {
        padding:28px 24px;
    }
    .metrics {
        gap:12px;
    }
    .metric {
        padding:18px;
    }
    .metric>strong {
        font-size:27px;
    }
    .details-heading {
        align-items:flex-start;
        flex-direction:column;
    }
    .bar-row {
        grid-template-columns:80px minmax(0,1fr) 65px;
        gap:8px;
    }
    .panel-heading,.bar-chart {
        padding-left:18px;
        padding-right:18px;
    }
}

@media(max-width:700px) {
    .dashboard {
        padding:22px 14px;
    }
    .header {
        align-items:flex-start;
    }
    .source-tag {
        display:none;
    }
    h1 {
        font-size:23px;
    }
    .toolbar {
        align-items:flex-start;
        flex-direction:column;
        padding:14px;
    }
    .metrics {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .charts {
        grid-template-columns:1fr;
    }
    .table-controls {
        flex-wrap:wrap;
        width:100%;
    }
    .table-controls input {
        width:100%;
    }
    .table-controls select {
        width:100%;
    }
    .pagination {
        padding:14px;
        gap:10px;
    }
    .pagination button {
        padding:8px;
    }
    .bar-row {
        grid-template-columns:100px minmax(0,1fr) 70px;
    }
    .metric>strong {
        font-size:26px;
    }
    .footnote {
        line-height:1.8;
    }
}

[x-cloak] { display: none !important; }
.date-controls { position: relative; }
.date-trigger { display: flex; align-items: center; gap: 10px; min-width: 158px; }
.calendar-popover {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 30;
    width: min(322px, calc(100vw - 58px));
    padding: 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 12px 36px #1c293d24;
}
.calendar-heading, .calendar-month-controls, .calendar-footer { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.calendar-heading > button { padding: 3px 9px; font-size: 22px; }
.calendar-month-controls select { padding: 5px 2px; border: 0; font-weight: 600; }
.calendar-weekdays, .calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; gap: 4px; }
.calendar-weekdays { margin: 18px 0 8px; color: var(--muted); font-size: 12px; }
.calendar-day { width: 100%; height: 34px; padding: 0; border: 0; font-variant-numeric: tabular-nums; }
.calendar-day:disabled { color: #a4adbc; background: #f8f9fb; opacity: .65; }
.calendar-day.is-selected, .calendar-day.is-selected:hover:not(:disabled) { background: #243d68; color: #fff; font-weight: 700; }
.calendar-footer { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 14px; font-size: 11px; color: var(--muted); }
.calendar-footer button { padding: 4px 0; border: 0; color: #345d94; font-size: 12px; }