/* Approved layout; Ocean uses the TB Ops skin. Other venue palettes stay intact. */
body { height:auto; min-height:100vh; }
.portal-topbar { position:relative; top:auto; }
.portal-topbar .topbar-context { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:8px 16px; padding-top:6px; padding-bottom:14px; }
.portal-topbar .brand,.login-logo { --mark-width:228px; position:relative; width:var(--mark-width); height:68px; padding:0; overflow:hidden; background:transparent; border:0; border-radius:0; box-shadow:none; }
.portal-topbar .brand { grid-column:2; grid-row:1; }
.portal-topbar .brand-logo,.login-logo-img { position:absolute; width:calc(var(--mark-width) * 2172 / 1197); height:auto; max-width:none; left:50%; top:50%; transform:translate(-50%,-50%); padding:0; background:transparent; border:0; border-radius:0; box-shadow:none; }
.login-logo { margin:0 auto 18px; }
body[data-theme="daylight"] :is(.brand-logo,.login-logo-img),body[data-theme="pitch25"] :is(.brand-logo,.login-logo-img) { filter:invert(1); }
.portal-topbar .account { grid-column:3; grid-row:1; justify-self:end; margin:0; }
.portal-topbar .topbar-context > .grow { display:none; }
.portal-topbar .context-group { grid-column:1 / -1; grid-row:2; order:0; justify-content:center; margin:0; padding:0; border-left:0; }
.portal-topbar .tenant-select { box-shadow:none; border-color:var(--line-2); color:var(--text); }
.portal-topbar .topbar-nav { height:44px; }
.portal-topbar .fleet-dot { box-shadow:none; }
.portal-topbar .tab { min-height:32px; font-size:11px; }
.account { position:relative; flex-shrink:0; }
.account summary { list-style:none; display:flex; align-items:center; gap:9px; padding:5px 8px; cursor:pointer; border:1px solid transparent; border-radius:6px; font-size:13px; }
.account summary::-webkit-details-marker { display:none; }
.account summary:hover,.account[open]>summary { border-color:var(--line-2); background:var(--bg-3); }
.avatar { width:27px; height:27px; display:grid; place-items:center; border:1px solid var(--line-2); border-radius:50%; font-size:10px; color:var(--text-dim); }
.chevron { color:var(--text-dim); }
.account-menu { position:absolute; top:calc(100% + 10px); right:0; width:min(232px,calc(100vw - 28px)); display:flex; flex-direction:column; gap:5px; padding:16px; background:var(--bg-2); border:1px solid var(--line-2); border-radius:14px; box-shadow:0 18px 40px #0008; z-index:20; }
.account-menu>span { font-size:12px; color:var(--text-dim); }
.account-email { overflow-wrap:anywhere; }
.account-menu .account-role { font-size:11px; color:var(--accent); }
.account-menu hr { border:0; border-top:1px solid var(--line); width:100%; margin:8px 0; }
.account-menu button { border:0; background:transparent; text-align:left; padding:8px 0; min-height:40px; font-size:13px; }
.account-menu button:hover { color:var(--accent); }
.grid.two:has(> .device-card) { grid-template-columns:repeat(2,minmax(0,1fr)); }
.device-card { position:relative; padding:12px 20px 20px; border:1px solid var(--line); border-radius:22px; background:linear-gradient(145deg,var(--bg-2),var(--bg-1)); box-shadow:0 10px 26px #0002; min-width:0; }
.device-card:focus-within { border-color:var(--accent); }
.device-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.device-kind { display:flex; align-items:center; gap:8px; color:var(--text-dim); font:10px Orbitron,sans-serif; letter-spacing:.08em; text-transform:uppercase; }
.device-kind svg { color:var(--accent); width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.online { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--ok); }
.online i { width:5px; height:5px; border-radius:50%; background:currentColor; }
.device-card .offline { color:var(--text-dim); }
.device-card h2 { font-size:15px; color:var(--text); letter-spacing:.045em; margin:0 0 6px; }
.device-link { display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; min-height:44px; padding:0; border:0; background:transparent; color:inherit; font:inherit; letter-spacing:inherit; text-transform:inherit; text-align:left; border-radius:4px; }
.device-link > span:first-child { overflow-wrap:anywhere; min-width:0; }
.device-link > span:last-child { color:var(--accent); font:18px Inter,sans-serif; flex-shrink:0; }
.device-link:hover { color:var(--accent); }
.current-state { display:flex; flex-direction:column; gap:5px; min-height:52px; margin-bottom:23px; }
.current-state>span { font-size:12px; color:var(--text-muted); }
.current-state strong { font-size:17px; font-weight:500; line-height:1.4; color:var(--text); overflow-wrap:anywhere; }
.current-state .device-warning { color:var(--warn); }
.device-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.device-bottom>span { color:var(--text-dim); font-size:12px; }
.device-bottom .upd-tag { color:var(--warn); }
.technical { border-top:1px solid var(--line); margin-top:17px; padding-top:11px; }
.technical summary { cursor:pointer; width:fit-content; color:var(--text-muted); font-size:12px; }
.technical summary:hover { color:var(--text); }
.technical dl { display:grid; gap:9px; margin:16px 0 2px; font-size:12px; }
.technical dl>div { display:flex; justify-content:space-between; gap:12px; }
.technical dt { color:var(--text-dim); }
.technical dd { margin:0; color:var(--text); overflow-wrap:anywhere; text-align:right; }
.device-link:focus-visible,.technical summary:focus-visible,.account summary:focus-visible,.account-menu button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
@media (min-width:641px) and (max-width:1200px) {
 .portal-topbar .ctx-picker { gap:6px; }
 .portal-topbar .tenant-select { width:190px; }
 .portal-topbar .context-group { gap:8px; }
}
@media(max-width:640px) {
 .portal-topbar .brand { --mark-width:190px; height:60px; }
 .portal-topbar .topbar-context { gap:10px; padding-top:8px; padding-bottom:10px; }
 .portal-topbar .account summary { padding:4px; gap:5px; min-height:40px; }
 .portal-topbar .topbar-nav { justify-content:space-between; padding:6px 14px; height:46px; }
 .portal-topbar .tab { min-height:36px; }
 .grid.two:has(> .device-card) { grid-template-columns:minmax(0,1fr); gap:14px; }
 .device-card { padding:12px 18px 18px; }
 .current-state { margin-bottom:16px; min-height:48px; }
 .current-state strong { font-size:16px; }
 .technical { margin-top:12px; padding-top:0; }
 .technical summary { display:flex; align-items:center; gap:6px; min-height:44px; width:100%; padding:4px 0; }
 .technical summary::before { content:"▸"; }
 .technical[open] summary::before { content:"▾"; }
 .technical summary::-webkit-details-marker { display:none; }
 .technical dl { margin-top:4px; }
}
@media(max-width:480px) {
 .portal-topbar .account summary { width:40px; justify-content:center; padding:4px; }
 .portal-topbar .account summary > span:not(.avatar) { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
}

/* TB Ops root and v82.1 HUD rules mapped to the default Ocean theme. */
body[data-theme="ocean"] {
  --body-font: Inter, Arial, sans-serif;
  --display-font: Orbitron, Inter, sans-serif;
  --mono-font: "Share Tech Mono", monospace;
  --bg: #02050a;
  --panel: rgba(8,13,20,.84);
  --panel-strong: rgba(10,17,25,.94);
  --border: rgba(0,240,255,.14);
  --border-strong: rgba(0,240,255,.28);
  --text: #eaffff;
  --muted: #7d95a7;
  --accent: #00f0ff;
  --accent-2: #ff2bd6;
  --good: #00ff88;
  --warn: #ffc857;
  --bad: #ff5a78;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --shadow: 0 18px 50px rgba(0,0,0,.28);
  --shadow-glow: 0 0 18px rgba(0,240,255,.16);
  --hud-blue: #00b8ff;
  --hud-cyan: #00e5ff;
  --hud-edge: rgba(0,205,255,.22);
  --hud-edge-soft: rgba(0,180,255,.09);
  --hud-surface: rgba(5,12,22,.92);
  --hud-surface-raised: rgba(8,18,31,.94);
  --hud-depth: 0 22px 50px rgba(0,3,12,.34), inset 0 1px rgba(94,226,255,.06);
  --bg-0:var(--bg); --bg-1:var(--hud-surface); --bg-2:var(--panel-strong); --bg-3:var(--hud-surface-raised);
  --line:var(--border); --line-2:var(--border-strong); --text-muted:var(--muted); --text-dim:var(--muted); --ok:var(--good); --err:var(--bad);
  font-family:var(--body-font);
  background:linear-gradient(118deg,rgba(0,170,255,.055),transparent 28%),linear-gradient(242deg,rgba(255,43,214,.035),transparent 25%),linear-gradient(180deg,#02050a 0%,#050a12 56%,#02060c 100%);
}
body[data-theme="ocean"]::before {
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.88;
  background:linear-gradient(rgba(0,190,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(0,190,255,.025) 1px,transparent 1px),linear-gradient(rgba(0,110,180,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(0,110,180,.012) 1px,transparent 1px);
  background-size:48px 48px,48px 48px,12px 12px,12px 12px;
  mask-image:radial-gradient(circle at center,#000 45%,transparent 90%);
}
body[data-theme="ocean"] .portal-topbar {
  background:linear-gradient(180deg,rgba(4,10,18,.86),rgba(4,9,16,.70));
  border-bottom-color:var(--hud-edge-soft);
  box-shadow:0 14px 34px rgba(0,3,12,.18),inset 0 -1px rgba(0,212,255,.025);
  backdrop-filter:blur(22px) saturate(135%);
}
body[data-theme="ocean"] .card,
body[data-theme="ocean"] .login-card,
body[data-theme="ocean"] .device-card,
body[data-theme="ocean"] .modal {
  border:1px solid var(--hud-edge-soft);
  border-radius:var(--radius-lg);
  background:linear-gradient(90deg,transparent 0%,rgba(70,218,255,.16) 22%,rgba(0,169,255,.24) 50%,rgba(70,218,255,.16) 78%,transparent 100%) top / 100% 1px no-repeat,linear-gradient(135deg,rgba(9,20,34,.94),rgba(4,9,17,.97) 62%,rgba(3,8,14,.99));
  box-shadow:var(--hud-depth);
  backdrop-filter:blur(14px);
}
body[data-theme="ocean"] .device-card::before,
body[data-theme="ocean"] .device-card::after,
body[data-theme="ocean"] .portal-topbar::after { content:none; }
body[data-theme="ocean"] .toolbar { border-left:0; padding-left:0; }
body[data-theme="ocean"] .picker-label,
body[data-theme="ocean"] .eyebrow { color:#91aabd; }
body[data-theme="ocean"] .tab,
body[data-theme="ocean"] .btn {
  color:var(--text); background:rgba(7,12,18,.92); border:1px solid var(--border); border-radius:14px;
  box-shadow:inset 0 1px rgba(255,255,255,.045),0 8px 18px rgba(0,3,12,.12);
  font-family:var(--body-font); font-weight:700; text-transform:none; letter-spacing:.01em;
}
body[data-theme="ocean"] .input,
body[data-theme="ocean"] .select,
body[data-theme="ocean"] .tenant-select {
  border-color:rgba(0,205,255,.13); border-radius:14px;
  background:linear-gradient(180deg,rgba(2,8,15,.96),rgba(3,9,16,.92));
  box-shadow:inset 0 1px 10px rgba(0,0,0,.20),inset 0 1px rgba(105,231,255,.025);
  appearance:auto; -webkit-appearance:menulist; padding-right:12px;
}
body[data-theme="ocean"] .tenant-select:focus {
  border-color:rgba(0,221,255,.36);
  box-shadow:inset 0 1px 10px rgba(0,0,0,.18),0 0 0 2px rgba(0,184,255,.07),0 0 22px rgba(0,184,255,.07);
}
body[data-theme="ocean"] .account-menu {
  background:linear-gradient(180deg,rgba(11,17,27,.98),rgba(6,10,15,.98));
  border:1px solid var(--border-strong); border-radius:14px; box-shadow:var(--shadow);
}
body[data-theme="ocean"] .online {
  color:var(--good); background:rgba(0,255,136,.12); border:1px solid rgba(0,255,136,.24);
  padding:4px 7px; border-radius:7px; box-shadow:inset 0 1px rgba(255,255,255,.035);
}
body[data-theme="ocean"] .modal {
  border-color:rgba(0,205,255,.20);
  box-shadow:0 34px 90px rgba(0,0,8,.60),0 0 0 1px rgba(0,205,255,.035),inset 0 1px rgba(117,234,255,.08);
}
body[data-theme="ocean"] .modal-overlay { background:rgba(0,3,9,.78); backdrop-filter:blur(18px) saturate(115%); }

body[data-theme="ocean"] .btn.primary { color:#041018; background:linear-gradient(90deg,var(--accent),#00b8ff); border-color:transparent; box-shadow:inset 0 1px rgba(255,255,255,.38),0 10px 24px rgba(0,184,255,.18); text-shadow:none; }
body[data-theme="ocean"] .device-card .offline { color:var(--text-dim); background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.12); }
body[data-theme="ocean"] .tab.active { text-shadow:none; }

.technical .temp-warm { color:var(--warn); }
.technical .temp-hot { color:var(--err); }