/* Midnight onyx */
:root {
  color-scheme: dark; /* dark date pickers, selects and scrollbars */
  --bg:#0a0a0b; --surface:#131316; --surface-2:#1b1b20; --line:#25252c;
  --text:#e8e9ed; --muted:#8d909b;
  --blue:#398eff; --blue-deep:#0772ff;
  --green:#3fb950; --amber:#e3b341; --red:#f85149;
}
* { box-sizing:border-box }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; -webkit-font-smoothing:antialiased }
a { color:var(--blue); text-decoration:none }
a:hover { text-decoration:underline }
:focus-visible { outline:2px solid var(--blue); outline-offset:2px }

header { border-bottom:1px solid var(--line) }
header nav { max-width:860px; margin:0 auto; padding:14px 16px; display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px }
header .brand { display:flex; align-items:center; gap:8px; color:var(--text); font-weight:700; margin-right:auto }
header .brand:hover { text-decoration:none }
header .brand img { width:28px; height:28px }
header .login { background:linear-gradient(180deg,var(--blue),var(--blue-deep)); color:#fff; font-weight:600; padding:6px 14px; border-radius:6px }
header .login:hover { text-decoration:none; filter:brightness(1.1) }
main { max-width:860px; margin:0 auto; padding:24px 16px 64px }

.user-menu { position:relative }
.user-menu summary { list-style:none; display:flex; align-items:center; gap:8px; padding:4px 14px 4px 4px; background:var(--surface); border:1px solid var(--line); border-radius:999px; cursor:pointer; font-weight:600; user-select:none }
.user-menu summary::-webkit-details-marker { display:none }
.user-menu summary:hover, .user-menu[open] summary { background:var(--surface-2) }
.user-menu summary img, .avatar-fallback { width:28px; height:28px; border-radius:50%; flex:none }
.avatar-fallback { display:grid; place-items:center; background:var(--blue-deep); color:#fff; font-size:.85rem }
.user-menu .menu { position:absolute; right:0; top:calc(100% + 6px); min-width:160px; padding:6px; background:var(--surface); border:1px solid var(--line); border-radius:8px; box-shadow:0 12px 32px rgba(0,0,0,.5); z-index:10 }
.user-menu .menu a { display:block; padding:7px 10px; border-radius:6px; color:var(--text) }
.user-menu .menu a:hover { background:var(--surface-2); text-decoration:none }

h1 { font-size:1.75rem; margin:0 0 20px }
h2 { font-size:1.3rem; margin:32px 0 12px }
article { padding:20px 0; border-bottom:1px solid var(--line) }
article:last-child { border-bottom:0 }
article h3 { font-size:1.2rem; margin:0 }
article h3 a { color:var(--text) }
.meta { color:var(--muted); font-size:.9rem; margin:2px 0 12px }
/* Change sections, one coloured bar per type */
.group { --c:var(--blue); margin-top:16px }
.group.added { --c:var(--green) }
.group.fixed { --c:var(--amber) }
.group.removed { --c:var(--red) }
.group h4 { display:flex; align-items:center; gap:10px; margin:0; padding:10px 14px; border-radius:6px 6px 0 0; color:var(--c); font-size:.85rem; text-transform:uppercase; letter-spacing:.06em;
  background:linear-gradient(90deg, color-mix(in srgb, var(--c) 20%, transparent), color-mix(in srgb, var(--c) 6%, transparent)) }
/* Icons in public/icons are single-colour, used as masks so they take the section colour */
.group h4::before { content:""; width:22px; height:22px; flex:none; background:var(--c); -webkit-mask:var(--icon) center/contain no-repeat; mask:var(--icon) center/contain no-repeat }
.group.added { --icon:url(/icons/added.svg) }
.group.changed { --icon:url(/icons/changed.svg) }
.group.fixed { --icon:url(/icons/fixed.svg) }
.group.removed { --icon:url(/icons/removed.svg) }
.group > ul { list-style:none; margin:0; padding:0 }
.group > ul > li { position:relative; padding:8px 14px 8px 34px }
.group > ul > li::before { content:"\2022"; position:absolute; left:16px; color:var(--muted) }
.group > ul > li:nth-child(even) { background:var(--surface) }
.group li ul { margin:4px 0 0; padding-left:18px; color:var(--muted); font-size:.95rem }

table { width:100%; border-collapse:collapse; font-size:.95rem }
th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line) }
th { color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.06em }
tbody tr:hover { background:var(--surface) }
td form { display:inline }

input, select, textarea { font:inherit; color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:7px 10px }
input:focus, select:focus, textarea:focus { border-color:var(--blue); outline:none }
textarea { width:100%; font-family:ui-monospace,Consolas,monospace; font-size:.9rem }
button { font:inherit; font-weight:600; color:var(--text); background:var(--surface-2); border:1px solid var(--line); border-radius:6px; padding:7px 14px; cursor:pointer }
button:hover { background:#24242a }
button.primary { background:linear-gradient(180deg,var(--blue),var(--blue-deep)); border-color:var(--blue-deep); color:#fff }
button.primary:hover { filter:brightness(1.1) }
button.danger { color:var(--red) }
label { font-weight:600 }
small { color:var(--muted) }
.admin-nav { display:flex; flex-wrap:wrap; gap:16px; padding-bottom:12px; margin-bottom:20px; border-bottom:1px solid var(--line) }
.errors { border:1px solid #5c1d1a; background:#2a0f0e; color:#ffb4ad; border-radius:6px; padding:10px 14px; margin-bottom:16px }
.errors ul { margin:4px 0 0; padding-left:20px }
.preview { background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:4px 16px 16px; margin-top:24px }
.draft { color:var(--muted) }

/* Editor: one box per section, joined to its coloured header */
.edit-box { margin-top:14px }
.edit-box h4 label { color:inherit; font-weight:inherit; cursor:text }
.edit-box textarea { display:block; border-top:0; border-radius:0 0 6px 6px; resize:vertical }
.edit-box textarea:focus { border-color:var(--c) }