@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;1,700&family=Space+Grotesk:wght@400;500;600&display=swap");

:root { --red:#ec3750; --red-light:#ff5d79; --app:#101217; --deep:#131316; --panel:#17171d; --sidebar:#1c1c21; --white:#fff; --text:#e0e6ed; --soft:#c3cada; --muted:#94a3b8; --border:rgba(214,225,255,.16); --green:#43c781; --yellow:#facc15; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { min-width:320px; margin:0; background:var(--app); color:var(--text); font-family:"Space Grotesk",sans-serif; }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
.eyebrow,.section-label,label,time { font-family:"JetBrains Mono",monospace; }
.eyebrow { margin:0; color:var(--muted); font-size:.63rem; letter-spacing:.09em; }
.login-shell { min-height:100vh; display:grid; place-items:center; padding:1.25rem; background:linear-gradient(90deg,var(--deep) 0 28%,var(--app) 28%); }
.login-panel { width:min(100%,660px); padding:clamp(2rem,7vw,5rem); position:relative; background:var(--panel); border:1px solid var(--border); border-left:5px solid var(--red); }
.login-panel::after { content:"AUTH / 01"; position:absolute; right:1.2rem; top:1.2rem; color:var(--muted); font:500 .58rem/1 "JetBrains Mono",monospace; letter-spacing:.08em; }
.login-panel h1,.desk-intro h1 { margin:1.2rem 0 0; color:var(--white); font:700 italic clamp(3.8rem,10vw,7rem)/.82 "JetBrains Mono",monospace; letter-spacing:-.1em; }
.login-copy { max-width:31rem; margin:1.6rem 0 2.2rem; color:var(--soft); line-height:1.55; }
label { display:block; margin-bottom:.65rem; color:var(--muted); font-size:.62rem; font-weight:600; letter-spacing:.07em; }
.password-row { display:flex; }
input,textarea { width:100%; color:var(--white); background:var(--deep); border:1px solid var(--border); border-radius:0; outline:none; }
input { min-height:3.3rem; padding:0 1rem; }
textarea { min-height:7.5rem; padding:1rem; resize:vertical; line-height:1.5; }
input:focus,textarea:focus { border-color:var(--red); box-shadow:0 0 0 3px rgba(236,55,80,.12); }
.password-row button,.primary-button { min-height:3.3rem; padding:0 1.2rem; color:var(--white); background:var(--red); border:0; font:700 .68rem/1 "JetBrains Mono",monospace; letter-spacing:.05em; }
.password-row button:hover,.primary-button:hover { background:var(--red-light); }
.form-error { min-height:1.2rem; margin:.8rem 0 0; color:var(--red-light); font:500 .7rem/1.4 "JetBrains Mono",monospace; }
main { width:min(calc(100% - 2rem),1180px); margin:auto; padding:1.25rem 0 4rem; }
.desk-header { min-height:3.7rem; padding:0 1rem; display:flex; align-items:center; justify-content:space-between; background:var(--deep); border-bottom:1px solid var(--border); }
.wordmark { color:var(--white); text-decoration:none; font:700 italic 1.15rem/1 "JetBrains Mono",monospace; letter-spacing:-.08em; }.wordmark span { margin:0 .22em; color:var(--red); }
.desk-header > div { display:flex; align-items:center; gap:1rem; }.desk-header #sync-state { color:var(--muted); font:600 .58rem/1 "JetBrains Mono",monospace; letter-spacing:.06em; }.spinner { width:.45rem; height:.45rem; margin-right:.45rem; display:inline-block; border:2px solid rgba(250,204,21,.24); border-top-color:var(--yellow); border-radius:50%; animation:spin .76s linear infinite; }
.quiet-button,.icon-button { color:var(--muted); background:transparent; border:1px solid var(--border); font:600 .6rem/1 "JetBrains Mono",monospace; }.quiet-button { padding:.6rem .8rem; }.quiet-button:hover,.icon-button:hover { color:var(--white); background:rgba(255,255,255,.05); }
.desk-intro { min-height:21rem; padding:clamp(2.5rem,7vw,5rem); display:flex; flex-direction:column; justify-content:center; position:relative; background:var(--panel); border-bottom:1px solid var(--border); }.desk-intro::before { content:""; position:absolute; inset:0 auto 0 0; width:5px; background:var(--red); }.desk-intro h1 { font-size:clamp(3.8rem,8.5vw,7rem); }.desk-intro > p:last-child { max-width:39rem; margin:1.5rem 0 0; color:var(--soft); line-height:1.6; }
.ops-console { padding:clamp(1.4rem,4vw,2.5rem); background:#0d0e12; border-bottom:1px solid var(--border); }.ops-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }.ops-heading h2 { margin:.55rem 0 0; color:var(--white); font:700 clamp(1.6rem,4vw,2.8rem)/.95 "JetBrains Mono",monospace; letter-spacing:-.07em; }.ops-lock-state { padding:.5rem .65rem; color:var(--yellow); border:1px solid rgba(250,204,21,.32); font:600 .58rem/1 "JetBrains Mono",monospace; letter-spacing:.07em; }.ops-lock-state.live { color:var(--red-light); border-color:rgba(236,55,80,.45); }.ops-unlock { margin-top:1.6rem; display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.8fr); align-items:end; gap:1rem 2rem; }.ops-unlock label { margin:0 0 .45rem; color:var(--white); }.ops-unlock p { margin:0; color:var(--muted); font-size:.82rem; }.ops-unlock .form-error { grid-column:1/-1; }.ops-state { margin-top:1.7rem; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) auto; border:1px solid var(--border); }.ops-state > div { min-height:4.4rem; padding:.9rem 1rem; display:grid; align-content:center; gap:.45rem; border-right:1px solid var(--border); }.ops-state span { color:var(--muted); font:500 .55rem/1 "JetBrains Mono",monospace; letter-spacing:.07em; }.ops-state strong { color:var(--white); font:700 .69rem/1.2 "JetBrains Mono",monospace; }.ops-state .quiet-button { margin:auto 1rem; }.ops-actions { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border:1px solid var(--border); border-top:0; }.ops-actions > button { min-height:7rem; padding:1rem; display:flex; flex-direction:column; justify-content:space-between; gap:.8rem; color:var(--white); text-align:left; background:transparent; border:0; border-right:1px solid var(--border); font:700 .63rem/1.3 "JetBrains Mono",monospace; }.ops-actions > button:last-child { border-right:0; }.ops-actions > button:hover:not(:disabled) { background:rgba(236,55,80,.1); }.ops-actions > button.danger { color:var(--red-light); }.ops-actions > button:disabled { cursor:not-allowed; color:#626a78; background:rgba(255,255,255,.015); }.ops-actions small { color:var(--muted); font:400 .7rem/1.4 "Space Grotesk",sans-serif; }.ops-actions button:disabled small { color:#59606c; }
.maintenance-manager { margin-top:1.8rem; padding-top:1.5rem; border-top:1px solid var(--border); }.maintenance-intro { display:flex; align-items:end; justify-content:space-between; gap:2rem; }.maintenance-intro h3 { margin:.5rem 0 0; color:var(--white); font:700 1.25rem/1 "JetBrains Mono",monospace; letter-spacing:-.05em; }.maintenance-intro > p { max-width:41rem; margin:0; color:var(--muted); font-size:.78rem; line-height:1.5; }.maintenance-form { margin-top:1.2rem; display:grid; grid-template-columns:1fr 1fr 1fr auto; align-items:end; gap:.75rem; }.maintenance-form label { margin:0; }.maintenance-form input { margin-top:.45rem; }.maintenance-form .maintenance-message { grid-column:1/-2; }.maintenance-form textarea { min-height:5rem; margin-top:.45rem; }.maintenance-form > .primary-button { min-height:5rem; }.maintenance-list { margin-top:1.1rem; border-top:1px solid var(--border); }.maintenance-row { min-height:4.3rem; padding:.75rem 0; display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:1rem; border-bottom:1px solid var(--border); }.maintenance-row div { display:grid; gap:.3rem; }.maintenance-row strong { color:var(--white); font:600 .7rem/1.3 "JetBrains Mono",monospace; }.maintenance-row small,.maintenance-row time { color:var(--muted); font-size:.68rem; }.maintenance-row button { padding:.55rem .7rem; color:var(--red-light); background:transparent; border:1px solid rgba(236,55,80,.35); font:600 .57rem/1 "JetBrains Mono",monospace; }
.desk-grid { display:grid; grid-template-columns:300px minmax(0,1fr); min-height:38rem; border-bottom:1px solid var(--border); }.desk-grid > aside { padding:1.4rem; background:var(--sidebar); border-right:1px solid var(--border); }.section-label { min-height:2rem; display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:.6rem; font-weight:600; letter-spacing:.08em; }.icon-button { width:2rem; height:2rem; }
#incident-list { margin-top:1rem; display:grid; gap:.55rem; }.incident-option { width:100%; padding:1rem; display:grid; gap:.55rem; text-align:left; color:var(--soft); background:transparent; border:1px solid transparent; }.incident-option:hover { background:rgba(255,255,255,.04); }.incident-option.selected { background:var(--panel); border-color:var(--border); }.incident-option strong { color:var(--white); font:600 .73rem/1.35 "JetBrains Mono",monospace; }.incident-option span { display:flex; justify-content:space-between; color:var(--muted); font:500 .57rem/1.3 "JetBrains Mono",monospace; letter-spacing:.05em; }.incident-option .open { color:var(--red-light); }.incident-option .resolved { color:var(--green); }
.workspace { min-width:0; padding:clamp(1.4rem,4vw,3rem); background:var(--deep); }.empty-state { min-height:20rem; display:grid; place-items:center; color:var(--muted); font:500 .7rem/1.5 "JetBrains Mono",monospace; }.incident-heading { padding-bottom:2rem; display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; border-bottom:1px solid var(--border); }.incident-heading h2 { max-width:34rem; margin:.65rem 0 0; color:var(--white); font:700 clamp(1.7rem,4vw,3rem)/.95 "JetBrains Mono",monospace; letter-spacing:-.07em; }.incident-heading time { color:var(--muted); font-size:.6rem; white-space:nowrap; }
.operator-block { padding:2rem 0; display:grid; grid-template-columns:3rem minmax(0,1fr); gap:1rem; border-bottom:1px solid var(--border); }.block-number { padding-top:.1rem; color:var(--red); font:600 .65rem/1 "JetBrains Mono",monospace; }.operator-block label { margin:.1rem 0 .5rem; color:var(--white); }.operator-block p { margin:0 0 1rem; color:var(--muted); font-size:.86rem; }.operator-block .primary-button { margin-top:.8rem; }.form-footer { display:flex; align-items:center; justify-content:space-between; gap:1rem; }.form-footer span { color:var(--muted); font:500 .58rem/1 "JetBrains Mono",monospace; }
.acknowledged-block { margin:1.5rem 0 0; padding:1rem 1.2rem; background:rgba(67,199,129,.06); border:1px solid rgba(67,199,129,.28); }.acknowledged-block span { color:var(--green); font:700 .62rem/1 "JetBrains Mono",monospace; letter-spacing:.07em; }.acknowledged-block p { margin:.65rem 0 0; color:var(--soft); line-height:1.5; }
.notes-section { padding-top:2rem; }.notes-section > .section-label { padding-bottom:.7rem; border-bottom:1px solid var(--border); }.note-card { padding:1.2rem 0; border-bottom:1px solid var(--border); }.note-meta { display:flex; justify-content:space-between; gap:1rem; color:var(--muted); font:500 .58rem/1.3 "JetBrains Mono",monospace; }.note-card > p { margin:.8rem 0; color:var(--text); line-height:1.55; white-space:pre-wrap; }.note-actions { display:flex; gap:.5rem; }.note-actions button { padding:.42rem .58rem; color:var(--muted); background:transparent; border:1px solid var(--border); font:600 .56rem/1 "JetBrains Mono",monospace; }.note-actions button:hover { color:var(--white); }.note-actions .delete:hover { color:var(--red-light); border-color:rgba(236,55,80,.4); }.edit-form { margin-top:.8rem; }.edit-form textarea { min-height:6rem; }.edit-form div { margin-top:.55rem; display:flex; justify-content:flex-end; gap:.5rem; }.edit-form button { padding:.55rem .7rem; color:var(--white); background:rgba(255,255,255,.06); border:1px solid var(--border); font:600 .58rem/1 "JetBrains Mono",monospace; }.edit-form button[type="submit"] { background:var(--red); border-color:var(--red); }
.toast { position:fixed; right:1.5rem; bottom:1.5rem; max-width:min(24rem,calc(100% - 3rem)); margin:0; padding:.85rem 1rem; color:var(--white); background:var(--panel); border:1px solid var(--border); border-left:3px solid var(--green); font:500 .65rem/1.4 "JetBrains Mono",monospace; opacity:0; transform:translateY(.5rem); pointer-events:none; transition:.18s ease; }.toast.visible { opacity:1; transform:none; }.toast.error { border-left-color:var(--red); }
@keyframes spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .spinner { animation:none; } .toast { transition:none; } }
@media(max-width:900px) { .ops-actions { grid-template-columns:1fr 1fr; }.ops-actions > button { min-height:6rem; border-bottom:1px solid var(--border); }.ops-state { grid-template-columns:1fr 1fr; }.ops-state > div { border-bottom:1px solid var(--border); }.ops-state .quiet-button { min-height:3rem; margin:1rem; }.maintenance-intro { display:grid; }.maintenance-form { grid-template-columns:1fr 1fr; }.maintenance-form .maintenance-message { grid-column:1/-1; }.maintenance-form > .primary-button { min-height:3.3rem; } }
@media(max-width:760px) { main { width:min(calc(100% - 1.2rem),1180px); padding-top:.6rem; }.desk-intro { min-height:19rem; padding:3.5rem 1.4rem; }.desk-grid { grid-template-columns:1fr; }.desk-grid > aside { border-right:0; border-bottom:1px solid var(--border); }.workspace { padding:1.4rem; }.login-shell { background:var(--app); }.password-row { display:grid; }.password-row button { min-height:3rem; }.incident-heading { flex-direction:column; }.operator-block { grid-template-columns:2rem minmax(0,1fr); }.ops-heading { display:grid; }.ops-lock-state { width:max-content; }.ops-unlock,.ops-state,.ops-actions,.maintenance-form { grid-template-columns:1fr; }.ops-actions > button,.ops-state > div { border-right:0; }.ops-state .quiet-button { width:calc(100% - 2rem); }.ops-unlock .password-row { min-width:0; }.maintenance-form .maintenance-message { grid-column:auto; }.maintenance-row { grid-template-columns:1fr auto; }.maintenance-row time { grid-column:1/-1; } }