:root{
  --bg:#f6f7fb; --card:#fff; --ink:#1f2937; --muted:#6b7280; --line:#e5e7eb;
  --brand:#16a34a; --brand2:#22c55e; --radius:14px;
  --shadow-sm:0 4px 16px rgba(0,0,0,.06); --shadow-md:0 8px 28px rgba(0,0,0,.08);
}
*{box-sizing:border-box} html,body{height:100%}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial;color:var(--ink);background:var(--bg);margin:0}

/* topbar */
.topbar{height:56px;background:#fff;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;padding:0 16px;position:sticky;top:0;z-index:10}
.brand-link{font-weight:700;color:var(--ink);text-decoration:none}
.menu{display:flex;align-items:center;gap:10px}
.menu a{color:var(--ink);text-decoration:none;padding:8px 10px;border-radius:8px}
.menu a:hover{background:#f3f4f6}
.user-chip{background:#f3f4f6;padding:6px 10px;border-radius:10px;margin-left:6px}

/* container */
.container{max-width:1180px;margin:24px auto;padding:0 16px}

/* buttons */
.btn{border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px 14px;cursor:pointer;display:inline-block}
.btn:hover{box-shadow:var(--shadow-sm)}
.btn-light{background:#fff}
.btn-primary{background:var(--brand);color:#fff;border-color:var(--brand)}

/* page head */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:16px}
.page-title{margin:0;font-size:26px}
.muted{color:var(--muted)}
.page-actions{display:flex;gap:8px;flex-wrap:wrap}

/* kpis */
.kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}
.kpi-card{display:flex;gap:14px;align-items:center;padding:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.kpi-icon{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand2))}
.kpi-icon svg{width:24px;height:24px}
.kpi-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.kpi-title{font-size:12px;color:#6b7280}
.kpi-value{font-size:20px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-sub{font-size:12px;color:#9ca3af}

/* panels */
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;margin-bottom:14px}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line)}
.panel-title{margin:0;font-size:16px}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* quick actions */
.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:12px}
.quick{display:flex;gap:10px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff;color:inherit;text-decoration:none;transition:box-shadow .15s,transform .15s}
.quick:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.q-ico{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff}
.q-ico svg{width:20px;height:20px}
.q-label{display:flex;flex-direction:column;line-height:1.15}
.q-label span{color:#6b7280;font-size:12px}

/* summary */
.summary-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:12px 16px 16px}
.summary-item{background:#fafafa;border:1px solid var(--line);border-radius:10px;padding:12px}
.summary-label{display:block;font-size:12px;color:#6b7280;margin-bottom:4px}
.summary-value{font-weight:600}
.summary-badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px}
.summary-badge.ok{background:#ecfdf5;color:#065f46;border:1px solid #bbf7d0}
.summary-badge.warn{background:#fff7ed;color:#9a3412;border:1px solid #fed7aa}

/* table */
.table-wrap{width:100%;overflow:auto}
.table{width:100%;border-collapse:separate;border-spacing:0}
.table thead th{font-size:12px;color:#6b7280;text-align:left;background:#fafafa;padding:12px 14px;border-bottom:1px solid var(--line)}
.table tbody td{padding:12px 14px;border-bottom:1px solid #f1f5f9}
.table tr:hover td{background:#fbfdfc}
.placeholder td{padding:26px 14px}
.empty{color:#6b7280}

/* responsive */
@media (max-width:1100px){
  .kpi-grid{grid-template-columns:1fr 1fr}
  .row-2{grid-template-columns:1fr}
  .quick-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .kpi-grid{grid-template-columns:1fr}
  .quick-grid{grid-template-columns:1fr}
  .page-title{font-size:22px}
}