/**
 * os-v01d-desk@1 — Spectral HX / OS V01D desk chrome
 * Cobalt #1e4ed8 · Uranium #e6ff2a · Vanta + frosted glass · UE viewport
 * Load LAST after polish / entrance / chat-desk / downloads.
 * Never Sitejet/Vercel. Algorithms only.
 */

:root,
html,
body,
[data-theme],
[data-theme="os-v01d"],
#app,
.soapbox,
#soapbox {
  --void: #000000 !important;
  --vanta: #050508 !important;
  --obsidian: #05070c !important;
  --cobalt: #1e4ed8 !important;
  --cobalt-mid: #3b6ef0 !important;
  --cobalt-hot: #60a5fa !important;
  --uranium: #e6ff2a !important;
  --uranium-hot: #f0ff66 !important;
  --uranium-dim: #b8cc22 !important;
  --ink: #e8eef8 !important;
  --muted: #7a8aa8 !important;
  --hector: #3b6ef0 !important;
  --hector-dim: #1e4ed8 !important;
  --nemesis: #e6ff2a !important;
  --nemesis-dim: #b8cc22 !important;
  --panel: rgb(0 18 48 / 0.42) !important;
  --panel-strong: rgb(0 10 28 / 0.78) !important;
  --line: rgb(30 78 216 / 0.5) !important;
  --line-strong: rgb(230 255 42 / 0.45) !important;
  --glass: rgb(0 10 28 / 0.62) !important;
  --glass-border: rgb(30 78 216 / 0.55) !important;
  --glow-h: 0 0 48px rgb(30 78 216 / 0.38) !important;
  --glow-n: 0 0 44px rgb(230 255 42 / 0.24) !important;
  --glow-u: 0 0 36px rgb(230 255 42 / 0.38) !important;
  --grid: rgb(30 78 216 / 0.14) !important;
  --scan: rgb(230 255 42 / 0.035) !important;
  --glass-blur: blur(18px) saturate(1.35) !important;
  --y-void: #000000 !important;
  --y-vanta: #050508 !important;
  --y-cobalt: #1e4ed8 !important;
  --y-cobalt-hot: #60a5fa !important;
  --y-uranium: #e6ff2a !important;
  --y-uranium-dim: #b8cc22 !important;
  --y-ink: #e8eef8 !important;
  --y-muted: #7a8aa8 !important;
  --y-glass: rgb(0 10 28 / 0.62) !important;
  --y-border: rgb(30 78 216 / 0.55) !important;
  --dl-void: #000000 !important;
  --dl-vanta: #050508 !important;
  --dl-cobalt: #1e4ed8 !important;
  --dl-cobalt-hot: #60a5fa !important;
  --dl-uranium: #e6ff2a !important;
  --dl-ink: #e8eef8 !important;
  --dl-muted: #7a8aa8 !important;
  --dl-glass: rgb(0 10 28 / 0.62) !important;
  --dl-border: rgb(30 78 216 / 0.55) !important;
  --de-void: #000000 !important;
  --de-cobalt: #1e4ed8 !important;
  --de-cobalt-hot: #60a5fa !important;
  --de-uranium: #e6ff2a !important;
  --de-uranium-dim: #b8cc22 !important;
  --de-ink: #e8eef8 !important;
  --de-muted: #7a8aa8 !important;
  --de-glass: rgb(0 10 28 / 0.62) !important;
  --de-glass-border: rgb(30 78 216 / 0.55) !important;
  --dm-void: #000000 !important;
  --dm-vanta: #050508 !important;
  --dm-cobalt: #1e4ed8 !important;
  --dm-cobalt-hot: #60a5fa !important;
  --dm-uranium: #e6ff2a !important;
  --dm-uranium-dim: #b8cc22 !important;
  --dm-ink: #e8eef8 !important;
  --dm-muted: #7a8aa8 !important;
  --dm-glass: rgb(0 10 28 / 0.72) !important;
  --dm-border: rgb(30 78 216 / 0.5) !important;
  --dm-hover: rgb(30 78 216 / 0.18) !important;
  --dm-active: rgb(30 78 216 / 0.32) !important;
  --dc-cobalt: #1e4ed8 !important;
}

html, body {
  background: #000 !important;
  color: var(--ink);
}

html, body, #app {
  height: 100%;
  max-height: 100dvh;
  overflow: hidden;
}

#app[data-theme="os-v01d"],
#app.os-v01d-viewport,
.desk.os-v01d-viewport,
html[data-theme="os-v01d"] #app {
  position: relative;
  box-sizing: border-box;
  height: 100dvh;
  max-height: 100dvh;
  padding: 10px;
  background:
    radial-gradient(ellipse 70% 45% at 50% -8%, rgb(30 78 216 / 0.22), transparent 55%),
    #000;
}

#app.os-v01d-viewport::before,
.desk.os-v01d-viewport::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 6px;
  z-index: 50;
  border: 1px solid rgb(30 78 216 / 0.55);
  border-radius: 2px;
  box-shadow:
    inset 0 0 0 1px rgb(230 255 42 / 0.08),
    0 0 24px rgb(30 78 216 / 0.12);
}

#app.os-v01d-viewport::after,
.desk.os-v01d-viewport::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 6px;
  z-index: 51;
  background:
    linear-gradient(#e6ff2a, #e6ff2a) top left / 14px 2px no-repeat,
    linear-gradient(#e6ff2a, #e6ff2a) top left / 2px 14px no-repeat,
    linear-gradient(#e6ff2a, #e6ff2a) top right / 14px 2px no-repeat,
    linear-gradient(#e6ff2a, #e6ff2a) top right / 2px 14px no-repeat,
    linear-gradient(#e6ff2a, #e6ff2a) bottom left / 14px 2px no-repeat,
    linear-gradient(#e6ff2a, #e6ff2a) bottom left / 2px 14px no-repeat,
    linear-gradient(#e6ff2a, #e6ff2a) bottom right / 14px 2px no-repeat,
    linear-gradient(#e6ff2a, #e6ff2a) bottom right / 2px 14px no-repeat;
  opacity: 0.9;
}

.os-v01d-status {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 10px;
  z-index: 52;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 18px;
  padding: 0 8px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(122 138 168 / 0.95);
  pointer-events: none;
  border-top: 1px solid rgb(30 78 216 / 0.35);
  background: linear-gradient(90deg, rgb(0 8 20 / 0.55), transparent 40%, transparent 60%, rgb(0 8 20 / 0.55));
}
.os-v01d-status .os-v01d-status-mark { color: #e6ff2a; }
.os-v01d-status .os-v01d-status-cobalt { color: #60a5fa; }

html.doom-embed .os-v01d-status,
html.chat-focus .os-v01d-status { opacity: 0.55; }

.desk {
  height: 100dvh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #000 !important;
}

.chrome {
  flex-shrink: 0;
  min-height: 48px !important;
  padding: 8px 16px !important;
  border-bottom: 1px solid rgb(30 78 216 / 0.5) !important;
  background: rgb(0 8 22 / 0.88) !important;
  backdrop-filter: blur(16px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.3) !important;
  box-shadow: inset 0 -1px 0 rgb(230 255 42 / 0.06);
}

.chrome-nav a {
  border: 1px solid rgb(96 165 250 / 0.28) !important;
  background: transparent !important;
  color: #8b9bb8 !important;
  border-radius: 6px !important;
  letter-spacing: 0.1em !important;
}

.chrome-nav a.on,
.chrome-nav a[aria-current="page"] {
  color: #0a0c00 !important;
  background: #e6ff2a !important;
  border-color: #e6ff2a !important;
  box-shadow: 0 0 18px rgb(230 255 42 / 0.35) !important;
}

.chrome-nav a:hover {
  color: #e8eef8 !important;
  border-color: rgb(96 165 250 / 0.65) !important;
  background: rgb(30 78 216 / 0.28) !important;
}

.chrome-nav a.on:hover {
  color: #0a0c00 !important;
  background: #e6ff2a !important;
}

.composer-wrap {
  background: rgb(0 10 28 / 0.9) !important;
  border-top: 1px solid rgb(30 78 216 / 0.45) !important;
  backdrop-filter: blur(16px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.25) !important;
}

.composer textarea {
  border: 1px solid rgb(96 165 250 / 0.35) !important;
  background: #000 !important;
  color: #e8eef8 !important;
  border-radius: 8px !important;
}

.composer .btn-primary,
.composer button.btn-primary,
.composer .btn.primary {
  background: #e6ff2a !important;
  border-color: #e6ff2a !important;
  color: #0a0c00 !important;
  box-shadow: 0 0 20px rgb(230 255 42 / 0.3) !important;
}

.thread { padding: 16px 20px 12px !important; }

.panel, .card, .modal, .sheet, .dock,
#hector-task-dock, #hector-learn-loop,
.dl-panel, .dl-card, .sx-panel, .sx-head,
.de-card, .de-panel {
  background: rgb(0 10 28 / 0.62) !important;
  border-color: rgb(30 78 216 / 0.5) !important;
  backdrop-filter: blur(16px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.3) !important;
}

input[type="radio"],
input[type="checkbox"] { accent-color: #1e4ed8 !important; }

select:focus-visible,
input[type="radio"]:focus-visible,
input[type="checkbox"]:focus-visible,
.chrome-nav a:focus-visible,
.composer textarea:focus-visible,
.composer button:focus-visible { outline-color: #e6ff2a !important; }

#doom-entrance { background: #000 !important; }
#doom-entrance .de-panel,
#doom-entrance .de-card,
#doom-entrance .de-glass {
  background: rgb(0 10 28 / 0.62) !important;
  border-color: rgb(30 78 216 / 0.55) !important;
  backdrop-filter: blur(18px) saturate(1.35) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.35) !important;
}
#doom-entrance .de-cta,
#doom-entrance button.de-enter,
#doom-entrance .de-enter {
  background: #e6ff2a !important;
  color: #0a0c00 !important;
  border-color: #e6ff2a !important;
  box-shadow: 0 0 28px rgb(230 255 42 / 0.35) !important;
}
#doom-entrance a,
#doom-entrance .de-uranium { color: #e6ff2a; }

body.dl-page {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgb(30 78 216 / 0.28), transparent 55%),
    #000 !important;
}
.dl-card {
  border: 1px solid rgb(30 78 216 / 0.5) !important;
  background: rgb(0 10 28 / 0.62) !important;
  backdrop-filter: blur(14px) saturate(1.3) !important;
}
.dl-card h3 { color: #e6ff2a !important; }
.dl-card a.dl-btn { background: #1e4ed8 !important; color: #fff !important; }
.dl-card a.dl-btn.uranium { background: #e6ff2a !important; color: #0a0c00 !important; }

.sx-shell {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgb(30 78 216 / 0.35), transparent 60%),
    radial-gradient(800px 400px at 10% 110%, rgb(230 255 42 / 0.08), transparent 55%),
    #000 !important;
}
.sx-head, .sx-panel {
  background: rgb(0 10 28 / 0.72) !important;
  border-color: rgb(30 78 216 / 0.5) !important;
  backdrop-filter: blur(14px) saturate(1.3) !important;
}
.sx-brand span, .sx-api h2, h1.sx-title { color: #e6ff2a !important; }
.sx-btn.primary { background: #1e4ed8 !important; border-color: #1e4ed8 !important; }
.sx-btn:hover { border-color: #e6ff2a !important; color: #e6ff2a !important; }

.dch-fab, .he-fab { background: #e6ff2a !important; color: #0a0c00 !important; }
.dch-panel, .he-panel {
  background: rgb(0 10 28 / 0.88) !important;
  border-color: rgb(30 78 216 / 0.55) !important;
  backdrop-filter: blur(16px) !important;
}

button.btn-primary,
.button-primary,
[class*="btn-primary"],
a.button.button--primary {
  background: #e6ff2a !important;
  border-color: #e6ff2a !important;
  color: #000 !important;
  box-shadow: 0 0 24px rgb(230 255 42 / 0.35) !important;
}

html.doom-embed #app.os-v01d-viewport,
html.doom-embed .desk.os-v01d-viewport { padding: 0 !important; }
html.doom-embed #app.os-v01d-viewport::before,
html.doom-embed #app.os-v01d-viewport::after,
html.doom-embed .desk.os-v01d-viewport::before,
html.doom-embed .desk.os-v01d-viewport::after,
html.doom-embed .os-v01d-status { display: none !important; }

@media (max-width: 720px) {
  #app.os-v01d-viewport,
  .desk.os-v01d-viewport { padding: 6px; }
  .os-v01d-status { font-size: 8px; letter-spacing: 0.1em; }
}