:root { --ink:#081611; --surface:#0E241D; --surface2:#143028; --line:#22483B;
  --brass:#C9A22F; --brassLight:#E8C877; --cream:#F2EAD3; --dim:#8FA89A;
  --ok:#57C785; --warn:#E8A33D; --bad:#E4574C; }
* { box-sizing:border-box; margin:0; padding:0; }
body { background: radial-gradient(1400px 700px at 50% -120px, #14352A, var(--ink));
  color:var(--cream); font-family:-apple-system,'Segoe UI',Roboto,sans-serif;
  min-height:100vh; padding:24px 16px 60px; }
.serif { font-family:Georgia,'Times New Roman',serif; }
.mono { font-family:'Courier New',monospace; }
.wrap { max-width:520px; margin:0 auto; }
.masthead { display:flex; align-items:center; justify-content:center; gap:14px; }
.brand { font-family:Georgia,serif; font-size:26px; letter-spacing:2px; color:var(--brassLight); }
.brand span { color:var(--cream); }
.sub { font-size:10px; letter-spacing:2.5px; color:var(--dim); text-transform:uppercase; margin-top:2px; }
.rule { display:flex; align-items:center; gap:8px; margin:16px 0 22px; }
.rule .l { flex:1; height:1px; background:linear-gradient(90deg,transparent,#C9A22F88); }
.rule .r { flex:1; height:1px; background:linear-gradient(90deg,#C9A22F88,transparent); }
.rule .t { font-size:9px; letter-spacing:3px; color:var(--brass); }
.panel { border-radius:14px; background:var(--surface2); border:1px solid var(--line); padding:20px; }
label { display:block; font-size:11px; letter-spacing:1.5px; color:var(--dim);
  text-transform:uppercase; margin:14px 0 6px; }
input { width:100%; background:var(--ink); border:1px solid var(--line); color:var(--cream);
  border-radius:10px; padding:12px; font-size:15px; outline:none; }
input:focus { border-color:var(--brass); }
.btn { display:block; width:100%; margin-top:18px; padding:14px; border-radius:10px; border:none;
  background:var(--brass); color:var(--ink); font-family:Georgia,serif; font-size:16px;
  letter-spacing:1px; cursor:pointer; }
.btn.ghost { background:transparent; border:1px solid var(--line); color:var(--cream);
  font-family:inherit; font-size:13.5px; padding:11px; }
.err { color:var(--bad); font-size:13px; margin-top:12px; text-align:center; min-height:18px; }
.okmsg { color:var(--ok); font-size:13px; margin-top:12px; text-align:center; min-height:18px; }
.linkline { text-align:center; margin-top:16px; font-size:13px; color:var(--dim); }
.linkline a { color:var(--brassLight); }
.topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.topbar .who { font-size:13px; color:var(--dim); }
.topbar .who b { color:var(--cream); display:block; font-size:15px; }
.topbar nav a { color:var(--brassLight); font-size:12.5px; margin-left:14px; text-decoration:none; }
.chip { display:inline-block; padding:3px 10px; border-radius:999px; font-size:10.5px;
  letter-spacing:1px; border:1px solid var(--line); color:var(--dim); }
.chip.on { border-color:#57C78566; color:var(--ok); background:#57C78510; }
.chip.off { border-color:#E8A33D55; color:var(--warn); background:#E8A33D10; }
.foot { margin-top:28px; text-align:center; font-size:9px; color:#4E6A5C; line-height:1.7;
  letter-spacing:.5px; text-transform:uppercase; }
@keyframes fadeUp { from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }
@keyframes stamp { from{opacity:0; transform:scale(1.35)} to{opacity:1; transform:scale(1)} }
@keyframes pulse { 0%,100%{opacity:.4; transform:scale(.8)} 50%{opacity:1; transform:scale(1.15)} }