:root{
  --brand:#c0392b; --brand-hover:#a93226; --brand-subtle:#fdecea;
  --ink-900:#1a1a1a; --ink-200:#e5e5e5;
  --surface-sunken:#f4f5f7; --surface-card:#ffffff; --surface-dark:#1c1e26;
  --border-default:#e2e4e9;
  --fg-primary:#1a1a1a; --fg-secondary:#5b5f6b; --fg-muted:#8a8f9c; --fg-on-dark:#f4f5f7;
  --success:#1f9d55; --danger:#d64545; --info:#2f6fed;
  --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-pill:999px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-16:64px; --space-24:96px;
  --text-xs:12px; --text-sm:13px; --text-base:15px; --text-md:16px; --text-lg:18px; --text-xl:22px; --text-2xl:28px;
  --font-body:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-display:var(--font-body);
  --font-mono:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;
  --leading-snug:1.3; --leading-relaxed:1.6; --tracking-tight:-.01em; --tracking-wide:.04em;
}
*{box-sizing:border-box;}
body{margin:0;font-family:var(--font-body);color:var(--fg-primary);background:var(--surface-sunken);}
a{color:var(--brand);text-decoration:none;}
a:hover{color:var(--brand-hover);}
.container{max-width:1200px;margin:0 auto;padding:0 var(--space-6);}
.narrow{max-width:640px;}

/* Top bar */
.topbar{height:64px;background:var(--surface-dark);display:flex;align-items:center;gap:var(--space-6);padding:0 var(--space-6);color:var(--fg-on-dark);}
.topbar .logo{display:flex;align-items:center;gap:var(--space-3);}
.logo-badge{width:34px;height:34px;border-radius:var(--radius-md);background:var(--brand);display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;}
.logo-title{font-weight:700;font-size:var(--text-md);letter-spacing:var(--tracking-tight);}
.topbar .spacer{flex:1;}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--brand);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--text-sm);color:#fff;}
.role-badge{font-size:var(--text-xs);background:oklch(1 0 0 / 0.12);padding:4px 10px;border-radius:var(--radius-pill);color:#fff;text-transform:capitalize;}

/* Layout: sidebar + main */
.app-shell{display:flex;min-height:calc(100vh - 64px);}
.sidebar{width:220px;flex:0 0 auto;background:var(--surface-card);border-right:1px solid var(--border-default);padding:var(--space-5) var(--space-3);display:flex;flex-direction:column;gap:4px;}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-md);cursor:pointer;font-size:var(--text-sm);font-weight:500;color:var(--fg-primary);}
.nav-item.active{color:var(--brand);font-weight:600;background:var(--brand-subtle);}
.nav-item:hover{background:var(--surface-sunken);}
.sidebar .who{margin-top:auto;padding:var(--space-4) var(--space-3);border-top:1px solid var(--border-default);}
.who .label{font-size:var(--text-xs);color:var(--fg-muted);text-transform:uppercase;letter-spacing:var(--tracking-wide);margin-bottom:4px;}
.who .name{font-size:var(--text-sm);font-weight:600;}
.who .sub{font-size:var(--text-xs);color:var(--fg-muted);}
.main{flex:1;padding:var(--space-8);}

/* Cards */
.card{background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:var(--space-4);}
.card.clickable{cursor:pointer;transition:box-shadow .15s;}
.card.clickable:hover{box-shadow:0 4px 16px rgba(0,0,0,.08);}
.thumb{width:100%;height:120px;border-radius:10px;background:linear-gradient(135deg,var(--brand-subtle),var(--surface-sunken));display:flex;align-items:center;justify-content:center;color:var(--fg-muted);font-size:var(--text-xs);overflow:hidden;}
.thumb img{width:100%;height:100%;object-fit:cover;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4);}
@media(max-width:900px){.grid-3{grid-template-columns:1fr 1fr;}.grid-4{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.grid-3,.grid-4{grid-template-columns:1fr;}.app-shell{flex-direction:column;}.sidebar{width:100%;flex-direction:row;overflow-x:auto;}.sidebar .who{display:none;}}

.stat-tile .value{font-family:var(--font-mono);font-weight:700;font-size:var(--text-2xl);}
.stat-tile .label{font-size:var(--text-sm);color:var(--fg-secondary);margin-top:4px;}

.badge{display:inline-flex;align-items:center;font-size:var(--text-xs);font-weight:600;padding:3px 10px;border-radius:var(--radius-pill);}
.badge.neutral{background:var(--ink-200);color:var(--fg-secondary);}
.badge.info{background:#e6effe;color:var(--info);}
.badge.brand{background:var(--brand-subtle);color:var(--brand);}
.badge.success{background:#e6f6ec;color:var(--success);}
.badge.danger{background:#fdeaea;color:var(--danger);}

.progress-track{height:6px;background:var(--surface-sunken);border-radius:var(--radius-pill);overflow:hidden;}
.progress-bar{height:100%;background:var(--brand);border-radius:var(--radius-pill);}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:600;padding:10px 18px;border:1px solid transparent;cursor:pointer;text-decoration:none;}
.btn-primary{background:var(--brand);color:#fff;}
.btn-primary:hover{background:var(--brand-hover);color:#fff;}
.btn-outline{background:transparent;border-color:var(--border-default);color:var(--fg-primary);}
.btn-outline:hover{border-color:var(--brand);color:var(--brand);}
.btn-secondary{background:var(--ink-200);color:var(--fg-primary);}
.btn-sm{padding:6px 14px;font-size:var(--text-xs);}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.btn-danger{background:var(--danger);color:#fff;}

/* Forms */
.form-group{margin-bottom:var(--space-4);}
label{display:block;font-size:var(--text-sm);font-weight:600;margin-bottom:6px;}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],input[type=url],input[type=tel],select,textarea{
  width:100%;padding:10px 12px;border:1px solid var(--border-default);border-radius:var(--radius-md);font-size:var(--text-base);font-family:var(--font-body);background:#fff;
}
textarea{resize:vertical;min-height:90px;}
.help{font-size:var(--text-xs);color:var(--fg-muted);margin-top:4px;}
.form-row{display:flex;gap:var(--space-4);}
.form-row>*{flex:1;}

/* Alerts */
.alert{padding:12px 16px;border-radius:var(--radius-md);font-size:var(--text-sm);margin-bottom:var(--space-4);}
.alert-success{background:#e6f6ec;color:#146c33;}
.alert-error{background:#fdeaea;color:#a12222;}
.alert-info{background:#e6effe;color:#1c4bb0;}

/* Tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border-default);}
.tab{padding:10px 16px;font-size:var(--text-sm);font-weight:600;color:var(--fg-secondary);cursor:pointer;border-bottom:2px solid transparent;}
.tab.active{color:var(--brand);border-bottom-color:var(--brand);}

/* Data table */
.data-table{width:100%;border-collapse:collapse;background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-lg);overflow:hidden;}
.data-table th{text-align:left;padding:12px 16px;background:var(--surface-sunken);font-size:var(--text-xs);font-weight:600;color:var(--fg-muted);text-transform:uppercase;letter-spacing:var(--tracking-wide);}
.data-table td{padding:12px 16px;border-top:1px solid var(--border-default);font-size:var(--text-sm);vertical-align:middle;}
.data-table tr:hover td{background:var(--surface-sunken);}

.page-title{font-weight:700;font-size:var(--text-2xl);margin:0 0 4px;}
.page-sub{color:var(--fg-secondary);margin:0 0 var(--space-6);}
.section-title{font-weight:700;font-size:var(--text-lg);margin:var(--space-8) 0 var(--space-4);}
.flex-between{display:flex;align-items:center;justify-content:space-between;}

/* Auth pages */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--space-6);}
.auth-card{width:100%;max-width:420px;background:#fff;border-radius:var(--radius-lg);padding:var(--space-8);border:1px solid var(--border-default);}

/* Certificate */
.certificate{background:#fff;border:2px solid var(--brand);border-radius:var(--radius-lg);padding:var(--space-16) var(--space-10);text-align:center;}
.cert-stats{display:flex;justify-content:center;gap:var(--space-16);margin-top:var(--space-10);font-size:var(--text-sm);color:var(--fg-secondary);}
.cert-stats .v{font-family:var(--font-mono);font-weight:600;}
@media print{
  .no-print{display:none!important;}
  .app-shell,.topbar{display:block!important;}
  body{background:#fff;}
}