/* OT-Guard Control Room identity, matched to ot-guard.com (28 October 2026).
   Logo assets are copied unchanged from the live website; see assets/README.txt. */
:root{
  color-scheme:dark;
  font-family:Arial,Helvetica,sans-serif;
  color:#f5f7f6;background:#081e29;
  --green:#ff8190;--border:#314752;--muted:#b7c8cd;
  --brand-red:#ed2140;--action:#c71330;--panel:#132f3b;--raised:#1a3844;
}
body{background:#081e29;color:#f5f7f6}
h1,h2,.brand,.stat strong{font-family:Arial,Helvetica,sans-serif}
h1{font-weight:700;letter-spacing:-.04em;line-height:1.15}
h2{color:#f5f7f6;font-weight:700}
p,.muted{color:var(--muted)}
.sidebar{background:#081e29;border-right:1px solid var(--border);padding-top:20px}
.brand{display:block;line-height:0;letter-spacing:normal}
.brand img{display:block;width:100%;max-width:216px;height:auto;object-fit:contain}
.workspace{background:var(--panel);border-color:var(--border);margin:26px 0 30px;color:#f5f7f6}
.workspace small,.sidebar-bottom small,.sidebar-bottom a,.nav-label{color:var(--muted)}
.avatar{background:var(--raised);color:#f5f7f6;border:1px solid var(--border)}
nav button{color:#b7c8cd;border-radius:4px;border-left:2px solid transparent}
nav button:hover{background:#102a36;color:#f5f7f6}
nav button.active{background:var(--panel);color:#f5f7f6;border-left-color:var(--brand-red)}
nav b{background:#652c38;color:#ffd8df}
.sidebar-bottom{border-color:var(--border)}
.shell{background:#081e29;min-height:100vh}
header{background:#0b222e;border-color:var(--border)}
.crumb,.crumb span{color:#b7c8cd}.crumb strong{color:#f5f7f6}
.mode{color:#d6e1e4;border-color:#536b76;border-radius:3px}
.icon-button{color:#b7c8cd}.icon-button:hover{color:white}
.eyebrow{color:#f5f7f6;letter-spacing:.12em;display:flex;align-items:center;gap:10px}
.eyebrow:before{content:'';width:18px;height:2px;background:var(--brand-red);flex:none}
.primary{background:var(--action);border:1px solid transparent;border-radius:4px;color:#fff}
.primary:hover:not(:disabled){background:#a90f28}
.secondary{background:transparent;color:#f5f7f6;border-color:#526c78;border-radius:4px}
.secondary:hover:not(:disabled){background:var(--raised)}
.text-button{color:#f5f7f6;text-decoration:underline;text-decoration-color:#ed2140;text-underline-offset:4px}
.text-button:hover{color:#ffb5bf}
select,input{color:#f5f7f6;background:#102b37;border-color:#617b86;border-radius:4px}
select option{background:#102b37;color:#f5f7f6}
input::placeholder{color:#aabdc5}
label{color:#f5f7f6}
input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{
  outline:2px solid #f5f7f6;outline-offset:3px;
}
.stat,.panel{background:var(--panel);border-color:var(--border);border-radius:5px}
.grid>div,.panel,.stat{min-width:0}
.stat-label,.stat small{color:#b7c8cd}.stat strong{color:#f5f7f6}
.stat .stat-icon{background:var(--raised);color:#d6e1e4;border-radius:4px}
.panel-heading,.section-note{border-color:var(--border)}
th{background:#102a36;color:#b7c8cd}td{border-color:#314752;color:#f5f7f6}
td small{color:#b7c8cd}tr.clickable:hover,.alert-item:hover{background:var(--raised)}
.customer-symbol{background:#27434e;color:#f5f7f6}
.badge{background:#294752;color:#e2edf0;border:1px solid transparent}
.badge.healthy{background:#163e35;color:#a5ebcb}
.badge.critical{background:#522735;color:#ffb5bf}
.badge.high,.badge.stale{background:#443820;color:#ffdb97}
.badge.medium{background:#243b59;color:#c4d9ff}
.badge.offline{background:#2b3b46;color:#ccd6dc}
.count,.protocols span{background:#27434e;color:#dce8eb}
.alert-item{border-color:var(--border)}.alert-meta,.empty,.skeleton,.section-note{color:#b7c8cd}
.detail-card{background:#1a3844}.detail-card small{color:#b7c8cd}
.bar{background:#294752}.bar span{background:#79cbb0}
footer{color:#b7c8cd;border-color:var(--border)}
dialog{color:#f5f7f6;background:#132f3b;border-color:#526c78;border-radius:6px;box-shadow:0 25px 100px #0008}
dialog::backdrop{background:#03121cbb}
.temporary-password{background:#081e29;border-color:#526c78;color:#f5f7f6}
.form-error{color:#ff9daa}
#toast{background:#294752;border:1px solid #718a95;color:#f5f7f6}
.login-screen{background:radial-gradient(ellipse at 50% 35%,#1a3844 0%,#081e29 65%);padding:40px 24px}
.login-card{background:#102a36;border:1px solid #314752;border-top:2px solid #ed2140;border-radius:6px;width:min(100%,460px);padding:34px 38px 38px;box-shadow:0 24px 100px #0003}
.login-brand{display:block;margin:0 0 30px;line-height:0;width:216px;max-width:100%}
.login-brand img{display:block;width:100%;height:auto}
.login-card h1{font-size:36px;letter-spacing:-.04em;margin:14px 0}
.login-card .eyebrow{font-size:9px;letter-spacing:.11em;line-height:1.5}
.login-card form{margin-top:28px;gap:18px}
.login-card label{font-size:13px}
.login-card input{background:#081e29;border-color:#617b86;min-height:48px}
.login-card .primary{min-height:48px}
.login-help{border-color:#314752;color:#b7c8cd;line-height:1.7}
@media(max-width:1100px){.brand img{max-width:185px}}
@media(max-width:700px){
  .sidebar{border-right:0;border-bottom:1px solid var(--border);padding:12px 15px}
  .brand img{width:165px}.workspace{display:none}
  nav{margin-top:12px}nav button{border-left:0;border-bottom:2px solid transparent}
  nav button.active{border-bottom-color:var(--brand-red)}
  .grid{grid-template-columns:minmax(0,1fr)}
  footer{flex-wrap:wrap}
  .login-screen{padding:24px 16px;min-height:100svh}
  .login-card{padding:24px}.login-brand{width:198px;margin-bottom:24px}
  .login-card h1{font-size:32px}.login-card .eyebrow{font-size:8px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}