:root{
  --tpp-orange:#F36F21;
  --tpp-orange-deep:#D4571A;
  --tpp-charcoal:#1A1A1A;
  --n-50:#F7F7F7;
  --n-100:#EDEDED;
  --n-300:#C9C9C9;
  --n-500:#7A7A7A;
  --n-700:#3D3D3D;
  --n-900:#0F1115;
  --f-display:'Anton', system-ui, sans-serif;
  --f-sans:'Inter', system-ui, sans-serif;
  --f-mono:'JetBrains Mono', ui-monospace, monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--f-sans);font-size:14px;line-height:1.5;color:var(--n-900);background:var(--n-50)}
a{color:var(--tpp-orange-deep);text-decoration:none}
a:hover{color:var(--tpp-orange)}
button{font:inherit;cursor:pointer}

/* LOGIN */
.admin-login{min-height:100vh;background:var(--tpp-charcoal);display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{background:#fff;width:100%;max-width:380px;padding:32px;border-radius:8px}
.login-card .lockup{display:flex;align-items:center;gap:12px;margin-bottom:24px;color:var(--tpp-charcoal)}
.login-card .lockup span{font-family:var(--f-display);font-size:18px;letter-spacing:0.04em;line-height:1}
.login-card .lockup small{display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:0.24em;color:var(--tpp-orange);margin-top:2px}
.login-card label{display:block;margin-bottom:16px;font-size:13px;color:var(--n-700)}
.login-card input{display:block;width:100%;padding:10px 12px;border:1px solid var(--n-300);font-size:15px;margin-top:6px}
.login-card button{width:100%;padding:12px;background:var(--tpp-orange);color:var(--tpp-charcoal);border:none;font-family:var(--f-mono);font-size:13px;letter-spacing:0.18em;text-transform:uppercase}
.login-card button:hover{background:var(--tpp-orange-deep);color:#fff}
.login-card .err{padding:12px;background:#fff3ed;border:1px solid var(--tpp-orange);color:var(--tpp-orange-deep);margin-bottom:16px;font-size:13px}

/* APP SHELL */
.admin{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.side{background:var(--tpp-charcoal);color:#fff;padding:24px;display:flex;flex-direction:column;gap:24px;position:sticky;top:0;height:100vh}
.side .lockup{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,0.1);color:#fff}
.side .lockup span{font-family:var(--f-display);font-size:14px;letter-spacing:0.16em}
.side nav{display:flex;flex-direction:column;gap:4px;flex:1}
.side nav a{padding:10px 12px;font-family:var(--f-mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,255,255,0.7);border-left:2px solid transparent}
.side nav a:hover{color:var(--tpp-orange);background:rgba(255,255,255,0.04)}
.side nav a.on{color:var(--tpp-orange);border-left-color:var(--tpp-orange);background:rgba(243,111,33,0.08)}
.side .logout button{width:100%;padding:10px;background:transparent;color:rgba(255,255,255,0.7);border:1px solid rgba(255,255,255,0.2);font-family:var(--f-mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase}
.side .logout button:hover{color:#fff;border-color:#fff}
.side .who{font-size:12px;color:rgba(255,255,255,0.5);padding-top:16px;border-top:1px solid rgba(255,255,255,0.1)}
.side .who small{font-family:var(--f-mono);font-size:10px;letter-spacing:0.06em}

.main{padding:32px;max-width:1200px;width:100%}
.page-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;gap:16px;flex-wrap:wrap}
.page-head h1{font-family:var(--f-sans);font-weight:700;font-size:28px;letter-spacing:-0.01em}
.page-head .range a{display:inline-block;padding:6px 12px;font-family:var(--f-mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--n-500);border:1px solid var(--n-300);margin-left:4px}
.page-head .range a.on{background:var(--tpp-charcoal);color:#fff;border-color:var(--tpp-charcoal)}

.btn-primary,.primary{background:var(--tpp-orange);color:var(--tpp-charcoal);padding:10px 18px;border:none;font-family:var(--f-mono);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;display:inline-block}
.btn-primary:hover,.primary:hover{background:var(--tpp-orange-deep);color:#fff}
.ghost{background:transparent;color:var(--n-700);border:1px solid var(--n-300);padding:10px 18px;font-family:var(--f-mono);font-size:12px;letter-spacing:0.16em;text-transform:uppercase}
.link{color:var(--tpp-orange-deep);font-size:13px}
.link-danger{background:none;border:none;color:#c1331a;font-family:var(--f-mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;cursor:pointer}
.link-danger:hover{color:#7d1f0e}

/* KPI ROW */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.kpi{background:#fff;padding:20px;border:1px solid var(--n-300);border-radius:6px}
.kpi span{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--n-500);margin-bottom:8px}
.kpi strong{font-family:var(--f-sans);font-weight:700;font-size:32px;color:var(--tpp-charcoal);font-feature-settings:"tnum"}
@media (max-width:880px){.kpis{grid-template-columns:repeat(2,1fr)}.admin{grid-template-columns:1fr}.side{position:static;height:auto}}

/* CARDS */
.card{background:#fff;padding:24px;border:1px solid var(--n-300);border-radius:6px;margin-bottom:16px}
.card h2{font-family:var(--f-sans);font-weight:700;font-size:16px;letter-spacing:0.04em;text-transform:uppercase;color:var(--n-700);margin-bottom:16px}
.chart-card canvas{max-height:260px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:880px){.grid-2{grid-template-columns:1fr}}

/* TABLES */
.t{width:100%;border-collapse:collapse;font-size:14px}
.t th,.t td{padding:8px 8px;border-bottom:1px solid var(--n-100);text-align:left;vertical-align:top}
.t th{font-family:var(--f-mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--n-500);font-weight:500}
.t td.num,.t th.num{text-align:right;font-feature-settings:"tnum"}
.t small{display:block;color:var(--n-500);font-size:11px;font-family:var(--f-mono)}
.t .empty{text-align:center;color:var(--n-500);padding:24px}
.t.posts a{font-weight:600;color:var(--tpp-charcoal)}
.t.posts a:hover{color:var(--tpp-orange-deep)}
.t .row-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.t .row-actions form{display:inline}

/* STATUS PILL */
.status{display:inline-block;padding:2px 8px;font-family:var(--f-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;border:1px solid var(--n-300);background:var(--n-50)}
.status.published{background:#e6f5e8;border-color:#4f9e6a;color:#2e6a44}
.status.draft{background:#fff5e6;border-color:var(--tpp-orange);color:var(--tpp-orange-deep)}
.status.archived{background:var(--n-100);color:var(--n-500)}

/* FORM */
.post-form label,.post-form fieldset{display:block;margin-bottom:16px;font-size:13px;color:var(--n-700)}
.post-form input[type=text],.post-form input[type=number],.post-form input[type=email],.post-form input[type=password],.post-form select,.post-form textarea{display:block;width:100%;padding:10px 12px;border:1px solid var(--n-300);font-size:15px;margin-top:6px;font-family:var(--f-sans)}
.post-form textarea.mono{font-family:var(--f-mono);font-size:13px;line-height:1.5}
.post-form small{display:block;color:var(--n-500);font-size:12px;font-weight:400;font-family:var(--f-mono)}
.post-form fieldset{border:1px solid var(--n-300);padding:16px;background:var(--n-50)}
.post-form fieldset legend{font-family:var(--f-mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--tpp-orange);padding:0 8px}
.post-form .actions{display:flex;gap:12px;align-items:center;margin-top:24px;padding-top:16px;border-top:1px solid var(--n-100)}
.post-form .actions button{padding:10px 18px;font-family:var(--f-mono);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;border:1px solid var(--n-300);background:#fff;color:var(--n-700)}
.post-form .actions button.primary{background:var(--tpp-orange);color:var(--tpp-charcoal);border-color:var(--tpp-orange)}
.post-form .hint{font-family:var(--f-mono);font-size:12px;color:var(--n-500);margin-bottom:16px}

/* INLINE FORM */
.inline-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.inline-form input,.inline-form select{padding:8px 10px;border:1px solid var(--n-300);font-size:13px}
.inline-form button{padding:8px 14px;font-family:var(--f-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;background:#fff;border:1px solid var(--n-300)}
.inline-form button.primary{background:var(--tpp-orange);color:var(--tpp-charcoal);border-color:var(--tpp-orange)}

.ok{padding:12px 16px;background:#e6f5e8;border:1px solid #4f9e6a;color:#2e6a44;margin-bottom:16px;font-size:13px}
.hint code{background:var(--n-100);padding:2px 6px;font-family:var(--f-mono);font-size:12px}