@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --hull: #0d2436; --hull-2:#123249; --panel:#f3f0e8; --panel-2:#e9e4d6;
  --ink:#16232c; --ink-soft:#55636b; --brass:#b98a3d; --brass-lt:#d9ac5f;
  --red:#b83b3b; --amber:#c8862b; --green:#3f7a5a; --grey:#8b8f8a; --line:#cfc8b4;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--hull); font-family:'Space Grotesk',sans-serif; color:var(--ink); }
.mono{ font-family:'IBM Plex Mono', monospace; }

.bridge{ background:linear-gradient(180deg, var(--hull-2), var(--hull) 90%); color:#eef3f5; padding:20px 32px 0; border-bottom:3px solid var(--brass); }
.bridge-top{ display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:14px; padding-bottom:16px; }
.brand{ display:flex; align-items:baseline; gap:12px; }
.brand .mark{ font-family:'IBM Plex Mono',monospace; font-weight:600; letter-spacing:2px; font-size:13px; color:var(--brass-lt); border:1px solid var(--brass); padding:3px 8px; border-radius:2px; }
.brand h1{ margin:0; font-size:24px; font-weight:700; }
.brand .sub{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:#9fb4c2; letter-spacing:1px; }
.clock{ text-align:right; font-family:'IBM Plex Mono',monospace; font-size:12px; color:#9fb4c2; line-height:1.6; }

.topnav{ display:flex; gap:4px; }
.topnav a{ font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.6px; text-transform:uppercase; color:#9fb4c2; text-decoration:none; padding:9px 16px; border-radius:3px 3px 0 0; }
.topnav a.active{ color:var(--ink); background:var(--panel); font-weight:600; }
.topnav a:hover:not(.active){ color:#eef3f5; }

.deck{ background:var(--panel); min-height:100vh; padding:28px 32px 60px; }
.grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:1000px){ .grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .grid{ grid-template-columns:1fr;} }

.card{ background:#fff; border:1px solid var(--line); border-radius:4px; padding:16px 18px; position:relative; overflow:hidden; }
.card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; }
.card.sev-red::before{ background:var(--red); } .card.sev-amber::before{ background:var(--amber); }
.card.sev-green::before{ background:var(--green); } .card.sev-grey::before{ background:var(--grey); }
.card .k{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:1.2px; color:var(--ink-soft); text-transform:uppercase; }
.card .v{ font-size:26px; font-weight:700; margin:6px 0 2px; line-height:1; }
.card .d{ font-size:12.5px; color:var(--ink-soft); }

section{ margin-top:34px; }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px; }
.section-head h2{ font-size:14px; margin:0; letter-spacing:1.5px; text-transform:uppercase; font-family:'IBM Plex Mono',monospace; color:var(--ink-soft); font-weight:600; border-left:3px solid var(--brass); padding-left:10px; }
.section-head a{ font-size:12px; color:var(--brass); text-decoration:none; font-family:'IBM Plex Mono',monospace; }

table{ width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:4px; overflow:hidden; }
th{ text-align:left; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.8px; text-transform:uppercase; color:var(--ink-soft); padding:10px 14px; background:var(--panel-2); border-bottom:1px solid var(--line); }
td{ padding:11px 14px; font-size:13.5px; border-bottom:1px solid #ece7d9; vertical-align:middle; }
tr:last-child td{ border-bottom:none; }
tr:hover td{ background:#fbf9f3; }
.mono-cell{ font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--ink-soft); }

.pill{ display:inline-flex; align-items:center; gap:6px; font-family:'IBM Plex Mono',monospace; font-size:11px; padding:3px 9px; border-radius:20px; font-weight:600; }
.pill .dot{ width:6px; height:6px; border-radius:50%; }
.pill.green{ background:#e2ede4; color:var(--green); } .pill.green .dot{ background:var(--green); }
.pill.red{ background:#f7e3e0; color:var(--red); } .pill.red .dot{ background:var(--red); }
.pill.amber{ background:#f8ecd6; color:var(--amber); } .pill.amber .dot{ background:var(--amber); }
.pill.grey{ background:#eceae4; color:var(--ink-soft); } .pill.grey .dot{ background:var(--grey); }

.empty-state{ padding:30px; text-align:center; color:var(--ink-soft); font-family:'IBM Plex Mono',monospace; font-size:12.5px; background:#fff; border:1px dashed var(--line); border-radius:4px; }
.maintenance-summary{ margin:14px 0 18px; }.maintenance-summary .v.compact{ font-size:17px; line-height:1.25; }.table-scroll{ overflow-x:auto; }.task-link,.back-link{ color:var(--hull-2); font-weight:600; text-decoration:none; }.task-link:hover,.back-link:hover{ text-decoration:underline; }.muted{ color:var(--ink-soft); font-size:11.5px; margin-top:3px; }.scope-links{ display:flex; gap:5px; }.scope-links a{ padding:4px 8px; border:1px solid var(--line); border-radius:3px; color:var(--ink-soft); }.scope-links a.selected{ background:var(--hull-2); color:white; border-color:var(--hull-2); }.priority{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; }.priority-high,.priority-critical{ color:var(--red); font-weight:600; }
.form-panel{ background:#fff; border:1px solid var(--line); padding:18px; border-radius:4px; }.form-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 18px; }.form-grid label{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.5px; text-transform:uppercase; color:var(--ink-soft); }.form-grid input,.form-grid select,.form-grid textarea{ display:block; width:100%; margin-top:5px; border:1px solid var(--line); border-radius:3px; padding:9px 10px; font:13px 'Space Grotesk',sans-serif; color:var(--ink); background:#fff; }.form-grid textarea{ resize:vertical; }.span-2{ grid-column:span 2; }.button{ margin-top:14px; padding:10px 16px; border:0; border-radius:3px; background:var(--hull-2); color:#fff; font:600 11px 'IBM Plex Mono',monospace; letter-spacing:.5px; text-transform:uppercase; cursor:pointer; }.button.secondary{ background:var(--grey); }.form-help{ color:var(--ink-soft); font-size:12px; }.notice{ border-radius:3px; padding:10px 14px; margin:0 0 16px; font-size:13px; }.notice.success{ background:#e2ede4; color:var(--green); }.notice.error{ background:#f7e3e0; color:var(--red); }.notice.warning{ background:#f8ecd6; color:#805317; margin-top:12px; }.detail-heading{ display:flex; align-items:center; justify-content:space-between; gap:20px; }.detail-heading h2{ margin:8px 0 0; }.archive-form{ margin-top:12px; display:flex; align-items:baseline; gap:12px; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; }.span-2{ grid-column:span 1; }.detail-heading{ align-items:flex-start; flex-direction:column; } }

/* Auth pages */
.auth-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--hull); }
.auth-card{ background:var(--panel); border-radius:6px; padding:36px 40px; width:340px; border-top:3px solid var(--brass); }
.auth-card h1{ font-size:20px; margin:0 0 4px; }
.auth-card .sub{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft); margin-bottom:20px; }
.auth-card label{ font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.6px; color:var(--ink-soft); display:block; margin-bottom:5px; margin-top:14px; }
.auth-card input{ width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:3px; font-family:'Space Grotesk',sans-serif; font-size:14px; }
.auth-card button{ width:100%; margin-top:22px; padding:11px; background:var(--hull-2); color:#eef3f5; border:none; border-radius:3px; font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:0.8px; text-transform:uppercase; cursor:pointer; }
.auth-card button:hover{ background:var(--hull); }
.auth-error{ background:#f7e3e0; color:var(--red); font-size:12.5px; padding:8px 12px; border-radius:3px; margin-top:14px; }
.qr-box{ text-align:center; margin:16px 0; }
.qr-box img{ border:1px solid var(--line); border-radius:4px; }