:root{
  --canvas:#f3f6f6; --surface:#fff; --surface-2:#f7faf9;
  --ink:#10201d; --muted:#5a6b67; --faint:#8a9793;
  --brand:#0e6b5c; --brand-strong:#0a4c41; --brand-soft:#e3f1ee;
  --line:#e2e9e7; --line-strong:#cdd8d5;
  --positive:#17794d; --negative:#b3261e; --warn:#9a5b0a;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"Fraunces",Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--canvas);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-strong)}
.tnum{font-variant-numeric:tabular-nums}
h1,h2,h3{margin:0}
.display{font-family:var(--display)}

/* Layout */
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}
.wrap-wide{max-width:1400px;margin:0 auto;padding:0 24px}
.header{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.main{padding:32px 0}

/* Wordmark */
.wm{display:inline-flex;align-items:center;gap:8px}
.wm-mark{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:var(--brand);color:#fff}
.wm-text{font-family:var(--display);font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}

/* Cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px}
.card-pad{padding:20px}
@media(min-width:640px){.card-pad{padding:24px}}
.grid{display:grid;gap:16px}
.grid-4{grid-template-columns:repeat(1,1fr)}
.grid-2{grid-template-columns:repeat(1,1fr)}
@media(min-width:640px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.grid-4{grid-template-columns:repeat(4,1fr)}}

/* KPI */
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px}
.kpi-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--faint)}
.kpi-value{margin-top:8px;font-size:26px;font-weight:600}
.pos{color:var(--positive)} .neg{color:var(--negative)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:8px;font-weight:600;font-size:14px;
  padding:10px 16px;border:1px solid transparent;cursor:pointer;transition:.15s;text-decoration:none}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-strong);color:#fff}
.btn-outline{background:var(--surface);border-color:var(--line-strong);color:var(--ink)}
.btn-outline:hover{background:var(--surface-2);color:var(--ink)}
.btn-ghost{background:transparent;color:var(--muted)}
.btn-ghost:hover{background:var(--surface-2);color:var(--ink)}
.btn-danger{background:#fff;border-color:rgba(179,38,30,.3);color:var(--negative)}
.btn-danger:hover{background:rgba(179,38,30,.05)}
.btn-sm{padding:7px 12px;font-size:13px}
.btn-full{width:100%}

/* Forms */
.field{display:block;margin-bottom:16px}
.field label,.lbl{display:block;margin-bottom:6px;font-size:13px;font-weight:500;color:var(--muted)}
.input,input[type=text],input[type=password],input[type=email],select,input[type=file]{
  width:100%;border:1px solid var(--line-strong);background:var(--surface);border-radius:8px;
  padding:10px 14px;font-size:14px;color:var(--ink);font-family:inherit}
.input:focus,input:focus,select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(14,107,92,.15)}
.hint{margin-top:6px;font-size:12px;color:var(--faint)}
input[type=file]{padding:8px 10px}
input[type=file]::file-selector-button{margin-right:12px;border:0;border-radius:8px;background:var(--brand-soft);color:var(--brand-strong);
  padding:8px 14px;font-weight:600;font-size:13px;cursor:pointer;font-family:inherit}

/* Notices */
.notice{border:1px solid;border-radius:8px;padding:10px 14px;font-size:14px;margin-bottom:14px}
.notice-error{border-color:rgba(179,38,30,.25);background:rgba(179,38,30,.05);color:var(--negative)}
.notice-success{border-color:rgba(23,121,77,.25);background:rgba(23,121,77,.05);color:var(--positive)}
.notice-info{border-color:var(--line);background:var(--surface-2);color:var(--muted)}

/* Badges */
.badge{display:inline-flex;align-items:center;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:500}
.badge-neutral{background:var(--brand-soft);color:var(--brand-strong)}
.badge-positive{background:rgba(23,121,77,.1);color:var(--positive)}
.badge-muted{background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}

/* Tables */
table{width:100%;border-collapse:collapse;font-size:14px}
thead th{background:var(--surface-2);text-align:left;font-size:12px;font-weight:500;color:var(--muted);padding:10px 20px}
tbody td{padding:10px 20px;border-top:1px solid var(--line)}
.tbl-wrap{max-height:420px;overflow:auto}
.right{text-align:right}
.muted{color:var(--muted)} .faint{color:var(--faint)}
.empty{padding:32px;text-align:center;color:var(--faint)}

/* Tabs / toggles */
.toggle{display:inline-flex;border:1px solid var(--line);background:var(--surface-2);border-radius:8px;padding:2px}
.toggle a,.toggle button{border:0;background:transparent;border-radius:6px;padding:7px 16px;font-size:13px;font-weight:500;color:var(--muted);cursor:pointer;text-decoration:none}
.toggle a.active,.toggle button.active{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.06)}

/* Split login */
.split{display:grid;min-height:100dvh}
@media(min-width:1024px){.split{grid-template-columns:1.05fr 1fr}}
.split-brand{display:none;position:relative;overflow:hidden;background:var(--brand-strong);color:#fff}
@media(min-width:1024px){.split-brand{display:block}}
.split-brand-inner{position:relative;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:48px}
.split-dots{position:absolute;inset:0;opacity:.12;background-image:radial-gradient(circle at 1px 1px,#fff 1px,transparent 0);background-size:28px 28px}
.split-form{display:flex;align-items:center;justify-content:center;padding:48px 24px}
.split-form-inner{width:100%;max-width:380px}

/* Section title */
.sec-title{font-size:16px;font-weight:600;color:var(--ink)}
.sec-sub{font-size:14px;color:var(--muted);margin-top:2px}
.row-between{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}

/* Admin two-col */
.admin-grid{display:grid;gap:24px}
@media(min-width:1024px){.admin-grid{grid-template-columns:340px 1fr}}
.side-list{display:flex;flex-direction:column;max-height:calc(100dvh - 130px)}
.side-item{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:12px 16px;text-align:left;
  border:0;background:transparent;border-top:1px solid var(--line);cursor:pointer;color:inherit;text-decoration:none}
.side-item:hover{background:var(--surface-2)}
.side-item.active{background:var(--brand-soft)}
.stack{display:flex;flex-direction:column;gap:24px}

/* Modal-less inline panels use cards. Chart */
.chart-box{position:relative;width:100%}
.mini{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;border-top:1px solid var(--line);padding-top:16px;margin-top:20px}
.mini .l{font-size:12px;color:var(--faint)} .mini .v{margin-top:4px;font-size:14px;font-weight:600}
.pill{display:inline-block;background:var(--brand-soft);color:var(--brand-strong);border-radius:999px;padding:2px 10px;font-size:12px;font-weight:500}
.footer-note{margin-top:40px;text-align:center;font-size:12px;color:var(--faint)}
.actions{display:inline-flex;gap:4px}
details summary{cursor:pointer;font-weight:500}
pre{overflow:auto;background:var(--surface-2);border-radius:8px;padding:12px;font-size:11px}
hr.sep{border:0;border-top:1px solid var(--line);margin:20px 0}