:root { --ink:#0a0a0a; --ink-soft:#2d2d2d; --paper:#ffffff; --muted:#555;
        --accent:#fbed0f; --accent-dark:#ca8a04; --line:#e5e5e5; }
*,*::before,*::after { box-sizing:border-box; }
body { margin:0; font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
       color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; }
a { color:var(--ink); text-decoration:underline; text-decoration-color:var(--accent);
    text-decoration-thickness:2px; text-underline-offset:3px; }
a:hover { text-decoration-thickness:4px; }

.topbar { display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;
          padding:.9rem 1.25rem; background:var(--paper); border-bottom:2px solid var(--ink); }
.brand { font-weight:800; font-size:1.15rem; letter-spacing:-.5px; text-decoration:none; color:var(--ink); }
.topbar nav { display:flex; gap:1rem; flex-wrap:wrap; font-weight:600; font-size:.9rem; }
.topbar nav a { text-decoration:none; color:var(--ink); }
.topbar nav a:hover { text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:3px; }
.role { margin-left:auto; font-size:.85rem; color:var(--muted); display:flex; align-items:center; gap:.6rem; }
.role .dev { color:var(--muted); }

main { max-width:980px; margin:2rem auto; padding:0 1.25rem; }
h1 { font-size:2rem; font-weight:800; letter-spacing:-1px; line-height:1.1; margin:0 0 1.2rem; }
h2 { font-size:1.3rem; font-weight:800; letter-spacing:-.4px; margin:1.6rem 0 .8rem; }
h3 { font-size:1.05rem; font-weight:700; margin:1.2rem 0 .6rem; }

table { border-collapse:collapse; width:100%; background:var(--paper); border:2px solid var(--ink); margin:.4rem 0 1.2rem; }
th, td { text-align:left; padding:.5rem .7rem; border-bottom:1px solid var(--line); font-size:.92rem; }
th { background:var(--ink); color:var(--paper); font-weight:700; letter-spacing:.3px; }
tr:last-child td { border-bottom:none; }
.actions { white-space:nowrap; }
.actions a, .actions button { margin-right:.5rem; }

button, .btn { font:inherit; font-weight:700; padding:.45rem .9rem; border:2px solid var(--ink);
               background:var(--ink); color:var(--paper); cursor:pointer; text-decoration:none;
               display:inline-block; transition:background .12s,color .12s; }
button:hover, .btn:hover { background:var(--accent); color:var(--ink); }
.btn { margin-bottom:1rem; }
.btn.secondary, .actions button { background:var(--paper); color:var(--ink); }
.btn.secondary:hover, .actions button:hover { background:var(--accent); }
form.inline { display:inline; }

label { display:block; margin:.8rem 0; font-weight:600; font-size:.9rem; }
input, textarea, select { display:block; width:100%; max-width:460px; padding:.5rem .6rem; margin-top:.3rem;
                          font:inherit; font-weight:400; color:var(--ink); background:var(--paper);
                          border:2px solid var(--ink); border-radius:0; }
input:focus, textarea:focus, select:focus { outline:3px solid var(--accent); outline-offset:0; }
textarea { min-height:6rem; }
.formbtns { margin-top:1.2rem; }

.flash { background:#fffbe6; border:2px solid var(--ink); border-left:6px solid var(--accent);
         padding:.7rem .9rem; margin-bottom:1rem; }
.err { color:#b00020; font-weight:600; }
.brk { word-break:break-all; }
code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; background:#f3f3f3; padding:.1rem .3rem; border:1px solid var(--line); }

ul.cards { list-style:none; padding:0; display:grid; gap:0; border-top:2px solid var(--ink); border-left:2px solid var(--ink);
           grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
ul.cards a { display:block; padding:1.1rem; background:var(--paper); border-right:2px solid var(--ink);
             border-bottom:2px solid var(--ink); text-decoration:none; color:var(--ink); font-weight:700; }
ul.cards a:hover { background:var(--accent); }
ul.kv { list-style:none; padding:0; margin:.4rem 0 1rem; }
ul.kv li { padding:.3rem 0; border-bottom:1px solid var(--line); }
.transitions { display:flex; flex-wrap:wrap; gap:.5rem; margin:.4rem 0 1rem; }

footer { max-width:980px; margin:2.5rem auto 0; padding:1.2rem 1.25rem 2.5rem;
         color:var(--muted); font-size:.8rem; border-top:2px solid var(--ink); }