/* COLD FREEZE — Haute Lumière, applied to an operator surface. No imagery
   doctrine to satisfy here (no photographs on a status console) — type,
   colour, hairlines and shadow-as-distance carry the whole thing. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Manrope:wght@400;500;600&display=swap');

:root, html[data-register="daylight"] {
  --paper:#FAF8F3; --paper-2:#F3EFE6; --ink:#0C1E16; --soft:#334A3F; --muted:#5C7065;
  --gold:#C5A059; --gold-d:#9A7A3A; --rule:#E1E7E2; --desk:#D6DAD4;
}
html[data-register="midnight"] {
  --paper:#111620; --paper-2:#171E2A; --ink:#EFE8D8; --soft:#CFC7B4; --muted:#8E97A6;
  --gold:#D9B472; --gold-d:#C39A56; --rule:#2A3140; --desk:#080B11;
}
:root {
  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Manrope', system-ui, sans-serif;
  --ease:cubic-bezier(.165,.84,.44,1);
  --shadow-sheet: 0 40px 90px -40px rgba(0,0,0,.28);
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--paper); color:var(--ink); font-family:var(--serif);
  font-weight:300; font-size:18px; line-height:1.6;
  transition:background 700ms var(--ease), color 700ms var(--ease);
}
a{ color:inherit; }
button,input,select{ font:inherit; color:inherit; background:none; border:none; }
.hair{ height:1px; background:var(--rule); border:0; margin:0; }
.tag{ font-family:var(--sans); font-size:10px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.tag.gold{ color:var(--gold-d); }
h1,h2,h3{ font-weight:300; margin:0 0 .3em; line-height:1.15; }
h1{ font-size:clamp(30px,4.6vw,48px); }
h2{ font-size:clamp(21px,2.4vw,28px); }
p{ margin:0 0 1em; color:var(--soft); }

.wrap{ max-width:920px; margin:0 auto; padding:0 24px; }
.top{ padding:22px 0; border-bottom:1px solid var(--rule); }
.top .in{ display:flex; align-items:baseline; justify-content:space-between; }
.mark{ font-size:14px; letter-spacing:.32em; text-transform:uppercase; font-family:var(--sans); }
.mark b{ color:var(--gold-d); font-weight:500; }

.section{ padding:44px 0; }
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.cell{ background:var(--paper); padding:20px; }
.stat{ font-family:var(--sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.big{ font-size:30px; font-weight:300; }
.big.gold{ color:var(--gold-d); }

.card{ background:var(--paper-2); padding:24px; box-shadow:var(--shadow-sheet); }
.row{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--rule); gap:16px; }
.row:last-child{ border-bottom:0; }
.pill{ font-family:var(--sans); font-size:10px; letter-spacing:.14em; text-transform:uppercase; padding:4px 10px; border:1px solid var(--rule); color:var(--muted); }
.pill.clean{ color:var(--gold-d); border-color:var(--gold); }
.pill.watch{ color:var(--ink); border-color:var(--ink); font-weight:500; }
/* Never red, never a flash — an incident state is named plainly in weight
   and a hairline, not alarmed at. The house rule against manufactured
   urgency applies exactly as hard to a security product as to anything
   else it governs. */

input[type=text],input[type=password]{
  width:100%; padding:12px 14px; border:1px solid var(--rule); background:var(--paper);
  font-family:var(--sans); font-size:14px;
}
button.go{
  font-family:var(--sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  padding:12px 22px; border:1px solid var(--ink); color:var(--ink); cursor:pointer;
  transition:background 400ms var(--ease), color 400ms var(--ease);
}
button.go:hover{ background:var(--ink); color:var(--paper); }
button.go[disabled]{ opacity:.4; cursor:default; }
.foot{ padding:40px 0; text-align:center; }
.mono{ font-family:var(--sans); font-size:13px; color:var(--muted); }