/* Polished modern styles */
:root{ --bg:#f4f6fb; --panel:#ffffff; --muted:#6b7280; --accent:#1e6fff; --good:#10b981; --bad:#ef4444; --active-bg:#eaf3ff; }
*{box-sizing:border-box} body{margin:0;font-family:Inter,system-ui,Roboto,Arial;background:var(--bg);color:#0f172a} .app{display:flex;min-height:100vh}
.sidebar{width:260px;background:var(--panel);padding:22px;border-right:1px solid #eef2f7;position:sticky;top:0;height:100vh;overflow:auto}
.logo{display:flex;gap:12px;align-items:center;margin-bottom:18px} .square{width:56px;height:56px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#7c3aed);display:flex;align-items:center;justify-content:center;color:white;font-weight:800;font-size:18px} .brand{font-weight:800;font-size:16px}
.nav{margin-top:18px;display:flex;flex-direction:column;gap:8px} .nav button{display:flex;align-items:center;padding:12px;border-radius:10px;border:0;background:transparent;color:#0f172a;text-align:left;cursor:pointer;font-weight:700;font-size:14px} .nav button.active{background:var(--active-bg);color:var(--accent)}
.muted{font-size:13px;color:var(--muted);margin-top:14px;line-height:1.4}
.main{flex:1;padding:28px;overflow:auto} .topbar{display:flex;gap:16px;align-items:center;justify-content:space-between;margin-bottom:18px}
.search{display:flex;gap:10px;align-items:center;flex:1;max-width:860px} .search input{flex:1;padding:12px 14px;border-radius:12px;border:1px solid #e9f0ff;background:white}
.controls{display:flex;gap:10px;align-items:center} .btn{padding:10px 14px;border-radius:10px;border:0;background:var(--accent);color:white;cursor:pointer;font-weight:800} .btn.ghost{background:transparent;color:var(--accent);border:1px solid rgba(30,111,255,0.12)} .btn.gray{background:#f8fafc;color:#111;border:1px solid #e6eef8}
.kpis{display:flex;gap:16px;margin-bottom:18px;flex-wrap:wrap} .kpi{background:linear-gradient(180deg,#fff,#fbfdff);padding:18px;border-radius:14px;min-width:18%;border:1px solid #f1f5f9} .kpi .label{font-size:13px;color:var(--muted)} .kpi .value{font-size:22px;font-weight:900;margin-top:8px}
.panel{background:var(--panel);padding:18px;border-radius:14px;margin-bottom:18px;border:1px solid #eef6ff} .two-col{display:grid;grid-template-columns:1fr 420px;gap:18px}
.table-wrap{overflow:auto;border-radius:10px;border:1px solid #eef2f7;background:linear-gradient(180deg,#fff,#fbfdff)} table{width:100%;border-collapse:collapse;font-size:14px} thead th{position:sticky;top:0;background:linear-gradient(180deg,#fff,#f7fbff);padding:12px 14px;text-align:left;border-bottom:1px solid #eef2f7;font-weight:800} tbody td{padding:12px 14px;border-bottom:1px solid #f1f5f9} tbody tr:hover td{background:linear-gradient(90deg,#fbfdff,#f8fbff)} .col-right{text-align:right} .chart-box{height:260px;padding:8px;border-radius:10px}
.tab-content{display:none;opacity:0;transform:translateY(8px);transition:opacity .38s ease, transform .38s ease} .tab-content.active{display:block;opacity:1;transform:none} .green{color:var(--good)} .red{color:var(--bad)}
@media(max-width:720px){.sidebar{display:none} .topbar{flex-direction:column;align-items:stretch;gap:10px}}
.sort-btn {
    background: #1a73e8;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: 0.2s;
}
.sort-btn:hover {
    background: #155bc2;
}
.table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}