/* Official InOperation identity. Loaded only for the default brand. */
:root{
  --surface-0:#1b1b18;
  --surface-1:#242420;
  --surface-2:#30302a;
  --border:#48483f;
  --text:#f4f3ec;
  --text-muted:#bab9af;
  --text-dim:#919083;
  --accent:var(--primary);
  --accent-hover:var(--brand-accent-hover);
  --accent-soft:var(--brand-accent-soft);
  --shadow:0 3px 14px rgba(0,0,0,.2);
  color-scheme:dark;
}
body{background:var(--background);color:var(--text)}
body header{
  height:64px;background:#181816;color:var(--text);
  border-bottom:3px solid var(--primary);
}
body header img.brand-logo-inoperation{
  height:52px;max-height:52px;width:auto;max-width:150px;
  padding:0;background:transparent;border-radius:0;
}
body header .header-user{color:var(--text-muted)}
body header .hamb-btn span{background:var(--text)}
#mobileMenu{top:64px;max-height:calc(100vh - 76px);max-height:calc(100dvh - 76px)}
.btn-primary{color:#181816;font-weight:600}
.btn-primary:hover{color:#181816;opacity:1}
input[type=checkbox]:checked::after{border-color:#181816}
input[type=checkbox],input[type=radio],progress{accent-color:var(--primary)}
input::placeholder,textarea::placeholder{color:var(--text-dim);opacity:1}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
body header :focus-visible{outline-color:var(--primary)}
.card,.device-confirm{background:var(--surface-1)}
.card .meta,.card .readings,.card .door-feedback{color:var(--text-muted)}
.card hr{border:0;border-top:1px solid var(--border);margin:14px 0}
.card .settings-btn:hover,.card .auto-btn:hover,.card .hold-btn:hover,.card .door-btn:hover{background:var(--accent-soft);border-radius:6px}
.card .settings-btn:focus-visible,.card .door-btn:focus-visible,.card .hold-btn:focus-visible,.card .auto-btn:focus-visible{border-radius:6px}
.wi-card,.card{border-color:var(--border)}
.model-card:hover,.history-device:hover{background:var(--surface-2)}
.badge-admin{color:var(--primary)}
.flash-pw{color:var(--text)}
/* Login uses the same surfaces and controls as the signed-in pages. */
.login-page{
  background:radial-gradient(ellipse at 50% 0,rgba(244,189,0,.065),transparent 60%),var(--background);
  color:var(--text);
}
.login-page #loginForm input{
  background:var(--surface-2);color:var(--text);
  border:1px solid var(--border);outline:none;
}
.login-page #loginForm input:focus{border-color:var(--primary);outline:2px solid var(--accent-soft);outline-offset:2px}
.login-page button{background:var(--primary);color:#181816;font-weight:600}
.login-page .language-picker button{font-weight:600}
.login-page button:hover{background:var(--brand-accent-hover)}
.login-page .language-picker select{border-color:var(--border);background:var(--surface-2);color:var(--text)}
.login-page .err{color:#ff8d85;text-align:center;line-height:1.5}
/* Home: ambient light and architectural lines behind the existing device cards.
   Decorative layers never receive pointer events or cover the live controls. */
body:has(#cards){background:#141512;isolation:isolate;min-height:100svh}
body:has(#cards)::before{
  content:"";position:fixed;inset:64px 0 0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse at 8% 8%,rgba(244,189,0,.14),transparent 48%),
    radial-gradient(ellipse at 95% 72%,rgba(194,142,29,.10),transparent 52%),
    radial-gradient(ellipse at 50% 38%,rgba(255,248,211,.035),transparent 65%),
    linear-gradient(120deg,transparent 0 22%,rgba(244,189,0,.025) 22% 22.1%,transparent 22.1% 72%,rgba(244,189,0,.035) 72% 72.1%,transparent 72.1%),
    linear-gradient(180deg,#171813,#10120f);
}
body:has(#cards)::after{
  content:"";position:fixed;inset:64px 0 0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,245,190,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,245,190,.018) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(180deg,#000,transparent 80%);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 80%);
}
body:has(#cards) header{
  background:linear-gradient(110deg,#1d1e18,#141512);
  box-shadow:0 8px 30px rgba(0,0,0,.24);
}
#cards{padding-top:32px;padding-bottom:40px}
#cards :is(.card,.wi-card){
  position:relative;isolation:isolate;
  background:linear-gradient(135deg,rgba(255,248,215,.055),transparent 48%),linear-gradient(155deg,#292b23,#20221c);
  border:1px solid rgba(213,201,149,.16);border-radius:16px;
  box-shadow:0 14px 32px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,250,215,.045);
  transition:border-color .2s ease,box-shadow .2s ease;
}
#cards :is(.card,.wi-card)::before{
  content:"";position:absolute;top:-1px;left:20px;right:20px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(244,189,0,.4),rgba(255,249,215,.12),transparent);
  pointer-events:none;
}
#cards .head>div{min-width:0}
#cards .head .led,#cards .head .settings-btn{flex-shrink:0}
#cards .serial,#cards .device-heading h2{font-weight:600;letter-spacing:-.015em;overflow-wrap:anywhere}
#cards .meta,#cards .device-meta{font-size:.78rem;line-height:1.6}
#cards .readings{font-size:.88rem;line-height:1.6}
#cards .state{font-size:.9rem;line-height:1.6}
#cards .device-summary{font-variant-numeric:tabular-nums;letter-spacing:-.025em}
#cards .device-readings{font-size:.9rem;line-height:1.55}
#cards .device-readings dt{color:#b6b9a8}
#cards .device-readings dd{font-variant-numeric:tabular-nums}
#cards .door-btn-container{gap:4px;align-items:center}
#cards .door-btn-container button,#cards .settings-btn{border-radius:10px}
#cards .settings-btn{background:rgba(255,255,230,.025)}
#cards .device-feedback,#cards .door-feedback{line-height:1.6}
#cards .connection-notice{padding:12px 16px;border:1px solid var(--border);border-radius:12px;background:rgba(36,38,29,.9)}
@media(hover:hover) and (pointer:fine){
  #cards :is(.card,.wi-card):hover{border-color:rgba(244,189,0,.32);box-shadow:0 18px 40px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,250,215,.07)}
}
@media(prefers-reduced-motion:reduce){#cards :is(.card,.wi-card){transition:none}}
@media(max-width:600px){
  html{scroll-padding-top:80px}
  #cards{padding-top:22px;padding-bottom:24px}
  body:has(#cards)::after{background-size:48px 48px}
}