:root {
    --hq-bg: #f5f6f8;
    --hq-ink: #1d2329;
    --hq-side: #1d2329;
    --hq-side-text: #b9c0c7;
    --hq-accent: #32b66b;
    --hq-line: #e4e7eb;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
    font-family: "Segoe UI", sans-serif;
    color: var(--hq-ink);
    background: var(--hq-bg);
}
.hq-shell { display: flex; min-height: 100vh; }
.hq-side {
    width: 220px;
    flex: 0 0 220px;
    background: var(--hq-side);
    color: var(--hq-side-text);
    padding: 18px 14px;
}
.hq-brand { color: #fff; font-weight: 700; margin-bottom: 18px; }
.hq-side a { display: block; color: var(--hq-side-text); text-decoration: none; padding: 8px 10px; border-radius: 8px; }
.hq-side a.active, .hq-side a:hover { background: #282f36; color: #fff; }
.hq-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hq-toolbar {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    background: #fff; border-bottom: 1px solid var(--hq-line); padding: 10px 16px;
}
.hq-content { padding: 16px; }
.hq-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.hq-kpi, .hq-card { background: #fff; border: 1px solid var(--hq-line); border-radius: 10px; padding: 12px; }
.hq-kpi span { display: block; color: #667085; font-size: 12px; }
.hq-kpi strong { font-size: 22px; }
.hq-table-wrap { overflow: auto; background: #fff; border: 1px solid var(--hq-line); border-radius: 10px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--hq-line); text-align: left; white-space: nowrap; }
th.sticky, td.sticky { position: sticky; left: 0; background: #fff; }
.hq-warn { background: #fff7e8; border: 1px solid #f3d19c; padding: 10px 12px; border-radius: 8px; }
.hq-dialog { border: 0; border-radius: 14px; padding: 18px; width: min(480px, calc(100vw - 32px)); }
.hq-dialog::backdrop { background: rgba(15, 23, 42, .45); }
input, select, button { font: inherit; }
input, select { border: 1px solid #d0d5dd; border-radius: 8px; padding: 7px 8px; }
button, .hq-button { background: var(--hq-accent); color: #fff; border: 0; border-radius: 8px; padding: 8px 12px; text-decoration: none; }
@media (max-width: 800px) {
    .hq-shell { display: block; }
    .hq-side { width: auto; }
    .hq-kpis { grid-template-columns: 1fr 1fr; }
}
@media print {
    .hq-side, .hq-toolbar, .no-print { display: none !important; }
    .hq-content { padding: 0; }
}