:root{
  --bg:#0b0f16;--surface:#0e1522;--tile:#111b2b;
  --ink:#e6eefb;--muted:#9fb3d7;--line:#1a2536;
  --accent:#00BCD4;--ok:#10b981;--warn:#f59e0b;--bad:#ef4444;
  --r:14px;--gap:1rem;--max:980px
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;line-height:1.5}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
header,footer{max-width:var(--max);margin:0 auto;padding:14px}
main{max-width:var(--max);margin:0 auto;padding:14px;display:grid;gap:var(--gap)}
nav{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}
nav a{padding:.35rem .6rem;border-radius:999px;background:transparent;border:1px solid var(--line)}
nav a[aria-current="page"]{background:color-mix(in hsl,var(--accent) 18%, transparent);border-color:var(--accent)}
.card{background:var(--tile);border:1px solid var(--line);border-radius:var(--r);padding:12px}
button,.btn,input,select,textarea{font:inherit;border-radius:10px;border:1px solid var(--line);background:#0f1929;color:var(--ink);padding:.6rem .8rem}
.btn-primary{background:var(--accent);color:#001116;border-color:var(--accent)}
.grid{display:grid;gap:.75rem}
.projects{grid-template-columns:1fr}
@media(min-width:720px){.projects{grid-template-columns:repeat(2,1fr)}}
.badge{display:inline-block;padding:.2rem .5rem;border:1px solid var(--line);border-radius:999px;font-size:.78rem;color:var(--muted)}
hr{border:0;border-top:1px solid var(--line);margin:1rem 0}
dialog{border:none;border-radius:16px;padding:0;max-width:720px;width:96vw;background:var(--surface);color:var(--ink)}
dialog header{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}
dialog .content{padding:14px}
.backdrop::backdrop{background:rgba(0,0,0,.6)}
form .row{display:grid;gap:.6rem}
@media(min-width:640px){form .row{grid-template-columns:1fr 1fr}}
.small{font-size:.9rem;color:var(--muted)}