:root {
  --bg: #0c0d0f;
  --panel: #17191c;
  --panel2: #202328;
  --line: #30343a;
  --text: #f2f3f4;
  --muted: #9ba2aa;
  --accent: #a6b8d0;
  --accent-strong: #536d92;
  --shadow: 0 12px 32px #00000035;
  --scroll-track: #17191c;
  --scroll-thumb: #4a5058;
  --scroll-thumb-hover: #69727d;
}
body[data-theme=light] {
  --bg: #f4f4f2;
  --panel: #ffffff;
  --panel2: #f0f1f2;
  --line: #d8dadd;
  --text: #202327;
  --muted: #697078;
  --accent: #526b8c;
  --accent-strong: #536d92;
  --shadow: 0 12px 32px #00000010;
  --scroll-track: #e9eaec;
  --scroll-thumb: #aeb4bc;
  --scroll-thumb-hover: #858d98;
}
* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) var(--scroll-track); }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: var(--scroll-track); }
*::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border: 2px solid var(--scroll-track); border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }
*::-webkit-scrollbar-corner { background: var(--scroll-track); }
.auth-art {
  background: radial-gradient(circle at 70% 45%, #41464d 0%, #262a2e 40%, #17191c 75%);
}
.auth-art:before { border-radius: 5px; }
.auth-art:after { color: #ffffff0b; }
.metric,.card { border-radius: 5px; }
.button,.icon-button,.filter,.pill,.tag { border-radius: 4px; }
.stack input,.field input,.field select,.field textarea,select,input,textarea { border-radius: 4px; }
.sidebar nav button,.sidebar-bottom>button,.avatar,.brand img,.user-tile .avatar { border-radius: 4px; }
.avatar { background: #455568; }
.modal { border-radius: 6px; }
#modal-body { padding: 25px; }
#modal-body .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#modal-body .field, #modal-body .stack label { min-width: 0; }
#modal-body .field > input:not([type=checkbox]), #modal-body .field > select, #modal-body .field > textarea, #modal-body .stack input, #modal-body .stack textarea { width: 100%; max-width: 100%; }
.invoice-vat-note { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 19px; }
.invoice-vat-note span { background: var(--panel2); border: 1px solid var(--line); padding: 11px; color: var(--muted); font-size: 11px; }
.invoice-vat-note strong { display: block; color: var(--text); margin-top: 5px; font-size: 15px; }
@media (max-width: 600px) { #modal-body { padding: 18px; } #modal-body .form-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .invoice-vat-note { grid-template-columns: 1fr; } }
.callout,.detail-stats>div { border-radius: 4px; }
.project-card:hover { transform: translateY(-1px); }
.chart-col .bar { background: linear-gradient(180deg,#9cadc4,#536d92); }
.donut { background: conic-gradient(#536d92 0 62%,var(--green) 62% 82%,var(--amber) 82% 100%); }