:root{
  --bg:#ffffff; --text:#111; --muted:#555; --border:#d6d6d6;
  --primary:#0b5ed7; --primaryText:#fff;
  --danger:#b42318; --dangerText:#fff;
  --card:#f8f8f8;
  --focus:#ffbf47;
  --radius:14px;
  --pad:14px;
  --max:980px;
  --font: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0f1115; --text:#f2f2f2; --muted:#c7c7c7; --border:#333; --card:#151922; --primary:#4d8dff; --focus:#ffd166;}
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--font); line-height:1.45;}
a{color:var(--primary)}
a:focus, button:focus, input:focus, select:focus, textarea:focus{outline:3px solid var(--focus); outline-offset:2px;}
.skip-link{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;}
.skip-link:focus{left:12px; top:12px; width:auto; height:auto; padding:10px 12px; background:var(--focus); color:#000; border-radius:10px; z-index:9999;}
header{position:sticky; top:0; z-index:10; background:var(--card); border-bottom:1px solid var(--border);}
.header-inner{max-width:var(--max); margin:0 auto; padding:10px var(--pad); display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap;}
.brand{font-weight:700; text-decoration:none;}
nav{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
nav a{padding:8px 10px; border-radius:10px; text-decoration:none; border:1px solid transparent;}
nav a[aria-current="page"]{border-color:var(--border); background:rgba(11,94,215,.10);}
main{max-width:var(--max); margin:0 auto; padding:16px var(--pad) 80px;}
h1{font-size:1.25rem; margin:10px 0 14px}
.card{border:1px solid var(--border); background:var(--card); border-radius:var(--radius); padding:14px; margin:12px 0;}
.row{display:grid; grid-template-columns:1fr; gap:12px;}
@media (min-width: 860px){ .row.two{grid-template-columns:1fr 1fr;} .row.three{grid-template-columns:1fr 1fr 1fr;} }
label{font-weight:600; display:block; margin-bottom:6px;}
input[type="text"], input[type="number"], select, textarea{width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:var(--bg); color:var(--text);}
textarea{min-height:92px; resize:vertical;}
.help{color:var(--muted); font-size:.95rem; margin-top:6px;}
.actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;}
.btn{display:inline-flex; align-items:center; justify-content:center; padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:transparent; color:var(--text); text-decoration:none; cursor:pointer;}
.btn.primary{background:var(--primary); color:var(--primaryText); border-color:transparent;}
.btn.danger{background:var(--danger); color:var(--dangerText); border-color:transparent;}
.table-wrap{overflow:auto; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg);}
table{width:100%; border-collapse:collapse; min-width:720px;}
th,td{padding:10px 10px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top;}
th{background:rgba(0,0,0,.04)}
@media (prefers-color-scheme: dark){th{background:rgba(255,255,255,.06)}}
td.actions-col{white-space:nowrap}
.flash{padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:rgba(11,94,215,.08); margin:12px 0;}
.flash.error{background:rgba(180,35,24,.10)}
.inline{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end;}
.small{font-size:.95rem; color:var(--muted)}
footer{border-top:1px solid var(--border); background:var(--card); position:fixed; bottom:0; left:0; right:0;}
.footer-inner{max-width:var(--max); margin:0 auto; padding:10px var(--pad); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:center;}