:root {
  --paper: #fbfaf7; --card: #ffffff; --panel: #f6f4ee; --ink: #1f1c17; --body: #4c453b;
  --muted: #6f675c; --faint: #8a8171; --hair: #e7e2d8; --hair2: #ddd6c9;
  --accent: #1f4e8c; --accent-bg: rgba(31, 78, 140, 0.09);
  --dc: #3466c4; --dc-bg: rgba(52,102,196,0.1); --ap: #7a4fc9; --ap-bg: rgba(122,79,201,0.1);
  --itc: #bd6317; --itc-bg: rgba(189,99,23,0.12); --camp: #b3403a; --camp-bg: rgba(179,64,58,0.11);
  --serif: "Newsreader", Georgia, serif; --sans: "Archivo", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", Consolas, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); }
a:hover { color: var(--ink); }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.site-header { position: sticky; top: 0; z-index: 40; background: var(--paper); border-bottom: 1px solid var(--hair); }
.site-header .wrap { display: flex; align-items: center; gap: 24px; padding: 14px 24px; flex-wrap: wrap; }
.wordmark { font-weight: 800; letter-spacing: 0.16em; font-size: 15px; color: var(--ink); text-decoration: none; }
.wordmark em { color: var(--accent); font-style: normal; }
.wordmark .pro { background: var(--accent); color: var(--paper); font-size: 10px; letter-spacing: 0.18em; border-radius: 4px; padding: 2px 6px; margin-left: 8px; vertical-align: 2px; }
.site-nav { display: flex; gap: 18px; flex-wrap: wrap; }
.site-nav a { color: var(--muted); text-decoration: none; font-size: 13.5px; font-weight: 500; }
.site-nav a:hover { color: var(--accent); }
.site-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.btn { display: inline-block; background: var(--accent); color: var(--paper); border: none; font: 600 13.5px var(--sans); padding: 10px 18px; border-radius: 8px; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn-ghost { display: inline-block; background: transparent; color: var(--ink); border: 1px solid var(--hair2); font: 600 13px var(--sans); padding: 8px 14px; border-radius: 8px; cursor: pointer; text-decoration: none; }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.site-header .btn, .site-header .btn-ghost { margin-left: auto; }
.hero { padding: 56px 0 30px; max-width: 860px; }
.hero h1 { font-family: var(--serif); font-size: clamp(36px, 5.4vw, 62px); line-height: 1.05; margin: 0 0 16px; }
.hero h1 em { font-style: italic; color: var(--accent); }
.hero p { font-size: 17px; color: var(--body); max-width: 62ch; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin: 26px 0 40px; }
.feature { background: var(--card); border: 1px solid var(--hair); border-radius: 12px; padding: 18px 20px; }
.feature h3 { margin: 0 0 6px; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; }
.feature p { margin: 0; font-size: 13.5px; color: var(--body); }
.section { padding: 26px 0; }
.section h2 { font-family: var(--serif); font-size: clamp(24px, 3vw, 34px); margin: 0 0 12px; }
.form-card { background: var(--card); border: 1px solid var(--hair); border-radius: 12px; padding: 24px; max-width: 560px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.field input, .field textarea, .field select { width: 100%; background: var(--paper); color: var(--ink); border: 1px solid var(--hair2); border-radius: 8px; padding: 10px 12px; font: 400 15px var(--sans); }
.field textarea { resize: vertical; line-height: 1.5; }
.hp { position: absolute; left: -9999px; top: -9999px; height: 1px; width: 1px; overflow: hidden; }
.note { font-size: 12.5px; color: var(--faint); }
.alert-ok { background: rgba(46,107,63,0.1); border: 1px solid #2e6b3f; color: #24532f; border-radius: 8px; padding: 12px 14px; font-size: 14px; margin: 12px 0; max-width: 560px; }
.searchbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; background: var(--panel); border: 1px solid var(--hair); border-radius: 12px; padding: 14px 16px; margin-bottom: 18px; }
.searchbar .field { margin: 0; }
.searchbar .grow { flex: 1 1 260px; }
.badge { font: 600 10.5px var(--sans); letter-spacing: 0.1em; border-radius: 5px; padding: 3px 7px; white-space: nowrap; }
.b-district { color: var(--dc); background: var(--dc-bg); }
.b-appeals { color: var(--ap); background: var(--ap-bg); }
.b-itc, .b-ptab { color: var(--itc); background: var(--itc-bg); }
.b-camp { color: var(--camp); background: var(--camp-bg); }
.table-scroll { overflow-x: auto; background: var(--card); border: 1px solid var(--hair); border-radius: 12px; }
table.cases { border-collapse: collapse; width: 100%; min-width: 760px; }
table.cases th { text-align: left; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 12px 14px; border-bottom: 1px solid var(--hair); }
table.cases td { padding: 12px 14px; border-bottom: 1px solid var(--hair); font-size: 13.5px; vertical-align: top; }
table.cases tr:last-child td { border-bottom: none; }
td.c-name a { font-weight: 600; text-decoration: none; }
td.c-meta { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.stat-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.stat { background: var(--card); border: 1px solid var(--hair); border-radius: 10px; padding: 10px 16px; font-size: 13px; color: var(--muted); }
.stat strong { display: block; font-size: 20px; color: var(--ink); font-family: var(--serif); }
.case-detail { background: var(--card); border: 1px solid var(--hair); border-radius: 12px; padding: 26px 28px; max-width: 860px; }
.case-detail h1 { font-family: var(--serif); font-size: clamp(24px, 3.4vw, 38px); margin: 10px 0 8px; }
.meta-line { font-family: var(--mono); font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.tagrow { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.tag { font-size: 11.5px; color: var(--muted); background: var(--panel); border: 1px solid var(--hair); border-radius: 999px; padding: 3px 10px; }
.kv { margin: 14px 0; padding: 12px 14px; background: var(--panel); border-radius: 8px; font-size: 14px; }
.kv strong { text-transform: uppercase; font-size: 11.5px; letter-spacing: 0.08em; color: var(--muted); display: block; margin-bottom: 3px; }
.checks { display: flex; gap: 14px; flex-wrap: wrap; }
.checks label { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; text-transform: none; letter-spacing: 0; color: var(--ink); font-weight: 500; }
.checks input { width: auto; }
.admin-table td, .admin-table th { font-size: 13px; }
.pill { font-size: 11px; border-radius: 999px; padding: 2px 9px; font-weight: 600; }
.pill.active { background: rgba(46,107,63,0.12); color: #24532f; }
.pill.pending { background: var(--itc-bg); color: var(--itc); }
.pill.disabled { background: var(--camp-bg); color: var(--camp); }
.site-footer { border-top: 1px solid var(--hair); margin-top: 44px; }
.site-footer .wrap { display: flex; gap: 32px; padding: 22px 24px 34px; flex-wrap: wrap; }
.site-footer p { color: var(--faint); font-size: 11.5px; max-width: 78ch; margin: 0; line-height: 1.6; }
@media (max-width: 900px) { .feature-grid { grid-template-columns: 1fr; } }