/* RADioActive — estética cool-retro-term
 * Perfil importado do cool-retro-term do operador:
 *   fontColor #0ccc68 · background #000 · bloom .5 · burnIn .3 · curvature .3
 *   flicker .1 · hsync .1 · staticNoise .1 · jitter .2 · glowingLine .2
 *   ambientLight .3 · frameSize .1 · screenRadius .2 · Departure Mono
 */

@font-face {
  font-family: "Departure Mono";
  src: url("/assets/fonts/DepartureMono-Regular.woff2") format("woff2");
  font-display: block;
}

:root {
  --fg: #0ccc68;
  --fg-rgb: 12, 204, 104;
  --fg-hi: #6dffae;
  --fg-dim: rgba(var(--fg-rgb), 0.62);
  --fg-faint: rgba(var(--fg-rgb), 0.22);
  --fg-ghost: rgba(var(--fg-rgb), 0.08);
  --bg: #010402;
  --alert: #ffb641;
  --frame: #d4d4d4;
  --font-size: 16px;
  --line: 1.28;
  --glow: 0 0 1px rgba(var(--fg-rgb), 0.95), 0 0 6px rgba(var(--fg-rgb), 0.55), 0 0 16px rgba(var(--fg-rgb), 0.28);
  --glow-strong: 0 0 2px var(--fg-hi), 0 0 10px rgba(var(--fg-rgb), 0.8), 0 0 28px rgba(var(--fg-rgb), 0.45);
  --pad: clamp(10px, 2.2vmin, 28px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #050505;
  overflow: hidden;
  overscroll-behavior: none;
}

html, body, button, a, .check, .clickable, label, select {
  cursor: url("/assets/cursor.svg") 16 16, auto;
}
button:not(:disabled), a, .check, .clickable, select, label.check, input[type="checkbox"], input[type="range"] {
  cursor: url("/assets/cursor-hot.svg") 16 16, pointer;
}
input:not([type="checkbox"]):not([type="range"]), textarea { cursor: text; }

body {
  font-family: "Departure Mono", ui-monospace, "DejaVu Sans Mono", monospace;
  font-size: var(--font-size);
  line-height: var(--line);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeSpeed;
}

::selection { background: var(--fg); color: var(--bg); text-shadow: none; }

/* ------------------------------------------------------------ monitor */

.monitor {
  position: fixed;
  inset: 0;
  padding: clamp(6px, 1.6vmin, 22px);
  background:
    radial-gradient(120% 90% at 50% 0%, #3a3a3a 0%, #1d1d1d 45%, #0c0c0c 100%);
}

/* Moldura (frameSize .1, frameColor #d4d4d4 com pouco brilho) */
.bezel {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: clamp(10px, 3.2vmin, 42px);
  padding: clamp(5px, 1.3vmin, 18px);
  background:
    linear-gradient(160deg, rgba(212, 212, 212, 0.16), rgba(212, 212, 212, 0.03) 40%, rgba(0, 0, 0, 0.3) 100%),
    #151515;
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.09),
    inset 0 -3px 6px rgba(0, 0, 0, 0.8),
    0 12px 40px rgba(0, 0, 0, 0.8);
}

.screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: clamp(8px, 2.6vmin, 36px) / clamp(10px, 3vmin, 40px);
  background:
    radial-gradient(ellipse at 50% 45%, rgba(var(--fg-rgb), 0.075) 0%, rgba(var(--fg-rgb), 0.025) 45%, transparent 75%),
    var(--bg);
  box-shadow: inset 0 0 0 1px #000, inset 0 0 30px 6px rgba(0, 0, 0, 0.9);
  isolation: isolate;
}

.screen-content {
  position: absolute;
  inset: 0;
  padding: var(--pad);
  text-shadow: var(--glow);
  filter: brightness(1.04) contrast(1.08);
  animation: jitter 0.19s steps(2) infinite, hsync 9s linear infinite;
  will-change: transform;
}

.warp { height: 100%; }
.crt-warp .warp { filter: url(#crt-warp); }

/* jitter .2 */
@keyframes jitter {
  0% { transform: translate(0, 0); }
  50% { transform: translate(0.25px, -0.2px); }
  100% { transform: translate(-0.2px, 0.25px); }
}

/* horizontalSync .1: ondulação rara */
@keyframes hsync {
  0%, 93%, 100% { transform: translateX(0) skewX(0); }
  94% { transform: translateX(1.5px) skewX(-0.35deg); }
  95% { transform: translateX(-2px) skewX(0.4deg); }
  96% { transform: translateX(0.8px) skewX(-0.1deg); }
}

.crt-off .screen-content { animation: none; filter: none; }

/* Camadas por cima da tela */
.overlay { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; }

.noise { z-index: 5; opacity: 0.1; mix-blend-mode: screen; width: 100%; height: 100%; image-rendering: pixelated; }

.glowline {
  z-index: 6;
  overflow: hidden;
}
.glowline::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 22%;
  top: -25%;
  background: linear-gradient(180deg, transparent, rgba(var(--fg-rgb), 0.045) 45%, rgba(var(--fg-rgb), 0.07) 50%, transparent);
  animation: glowline 7.5s linear infinite;
}
@keyframes glowline { to { top: 110%; } }

.vignette {
  z-index: 7;
  background:
    radial-gradient(ellipse 78% 72% at 50% 50%, transparent 58%, rgba(0, 0, 0, 0.35) 82%, rgba(0, 0, 0, 0.85) 100%);
}

/* ilusão de vidro abaulado sem entortar o conteúdo (cliques continuam alinhados) */
.screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.9),
    inset 0 0 26px 10px rgba(0, 0, 0, 0.75),
    inset 0 0 90px 30px rgba(0, 0, 0, 0.35);
}

/* reflexo do vidro (ambientLight .3) */
.glass {
  z-index: 8;
  background:
    radial-gradient(ellipse 60% 40% at 30% 12%, rgba(255, 255, 255, 0.035), transparent 70%),
    linear-gradient(170deg, rgba(255, 255, 255, 0.025), transparent 35%);
}

/* flickering .1 */
.flicker { z-index: 9; background: rgba(0, 0, 0, 0.5); opacity: 0; animation: flicker 0.12s infinite; }
@keyframes flicker {
  0% { opacity: 0.02; } 20% { opacity: 0.045; } 40% { opacity: 0.01; } 60% { opacity: 0.05; } 80% { opacity: 0.02; } 100% { opacity: 0.035; }
}

.crt-off .noise, .crt-off .glowline, .crt-off .flicker { display: none; }

/* burnIn .3: fósforo que demora a apagar */
.phosphor-in { animation: phosphor 0.45s ease-out; }
@keyframes phosphor {
  0% { opacity: 0; filter: blur(1.2px) brightness(1.8); }
  35% { opacity: 1; filter: blur(0.4px) brightness(1.4); }
  100% { opacity: 1; filter: none; }
}

/* ------------------------------------------------------------ tipografia & componentes */

a { color: var(--fg-hi); text-decoration: underline dotted; }
h1, h2, h3 { font-size: 1em; font-weight: normal; margin: 0 0 0.6em; letter-spacing: 0.08em; }
.hi { color: var(--fg-hi); text-shadow: var(--glow-strong); }
.dim { color: var(--fg-dim); }
.faint { color: var(--fg-faint); }
.alert { color: var(--alert); text-shadow: 0 0 6px rgba(255, 182, 65, 0.6); }
.inv { background: var(--fg); color: var(--bg); text-shadow: none; padding: 0 0.4ch; }
.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.pre { white-space: pre; }
.wrap { white-space: pre-wrap; word-break: break-word; }
.center { text-align: center; }
.right { text-align: right; }
.grow { flex: 1; min-width: 0; }
.row { display: flex; gap: 1ch; align-items: center; flex-wrap: wrap; }
.row.nowrap { flex-wrap: nowrap; }
.col { display: flex; flex-direction: column; gap: 0.6em; }
.spacer { flex: 1; }
.mt { margin-top: 0.8em; }
.mb { margin-bottom: 0.8em; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.box {
  position: relative;
  border: 3px double var(--fg-dim);
  padding: 1em 1.2ch 0.7em;
  margin-top: 0.7em;
  box-shadow: 0 0 6px rgba(var(--fg-rgb), 0.15), inset 0 0 8px rgba(var(--fg-rgb), 0.06);
  min-width: 0;
}
.box > .title {
  position: absolute;
  top: -0.72em;
  left: 1ch;
  padding: 0 0.8ch;
  background: var(--bg);
  color: var(--fg-hi);
  letter-spacing: 0.06em;
  white-space: nowrap;
  max-width: calc(100% - 2ch);
  overflow: hidden;
  text-overflow: ellipsis;
}
.box > .title-right { left: auto; right: 1ch; color: var(--fg-dim); }
.box.single { border: 1px solid var(--fg-faint); }

button, .btn {
  font: inherit;
  color: var(--fg);
  background: transparent;
  border: 0;
  padding: 0.1em 0.3ch;
  cursor: pointer;
  text-shadow: inherit;
  white-space: nowrap;
  touch-action: manipulation;
}
button::before { content: "["; color: var(--fg-dim); }
button::after { content: "]"; color: var(--fg-dim); }
button.bare::before, button.bare::after { content: none; }
button:hover:not(:disabled), button:focus-visible, button.active {
  background: var(--fg);
  color: var(--bg);
  text-shadow: none;
  outline: none;
}
button:hover::before, button:hover::after, button.active::before, button.active::after,
button:focus-visible::before, button:focus-visible::after { color: var(--bg); }
button:disabled { opacity: 0.4; cursor: default; }
button.danger { color: var(--alert); }
button.danger:hover { background: var(--alert); color: #000; }

input, textarea, select {
  font: inherit;
  color: var(--fg-hi);
  background: rgba(var(--fg-rgb), 0.05);
  border: 0;
  border-bottom: 1px dashed var(--fg-dim);
  padding: 0.25em 0.6ch;
  text-shadow: var(--glow);
  caret-color: var(--fg-hi);
  outline: none;
  border-radius: 0;
  min-width: 0;
}
input:focus, textarea:focus, select:focus { background: rgba(var(--fg-rgb), 0.11); border-bottom-style: solid; }
input::placeholder, textarea::placeholder { color: var(--fg-faint); }
textarea { width: 100%; resize: vertical; line-height: var(--line); border: 1px dashed var(--fg-faint); }
select option { background: var(--bg); color: var(--fg); }
input[type="date"], input[type="time"], input[type="datetime-local"] { color-scheme: dark; }
input[type="checkbox"] { accent-color: var(--fg); }

label.field { display: flex; flex-direction: column; gap: 0.2em; min-width: 0; }
label.field > span { color: var(--fg-dim); font-size: 0.9em; }
.grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(22ch, 1fr)); gap: 0.8em 2ch; }

.list { list-style: none; margin: 0; padding: 0; }
.list > li { padding: 0.25em 0.6ch; border-bottom: 1px dotted var(--fg-ghost); cursor: default; }
.list > li.clickable { cursor: pointer; }
.list > li.clickable:hover, .list > li.selected { background: rgba(var(--fg-rgb), 0.12); }
.list > li.selected { box-shadow: inset 3px 0 0 var(--fg); }
.list > li.done { color: var(--fg-dim); text-decoration: line-through; }

.check { cursor: pointer; user-select: none; color: var(--fg-hi); }
.chip { display: inline-block; border: 1px solid var(--fg-faint); padding: 0 0.6ch; margin: 0.1em 0.3ch 0.1em 0; font-size: 0.9em; }
.chip.on { background: var(--fg); color: var(--bg); text-shadow: none; }
.tag { color: var(--fg-dim); }
.tag::before { content: "#"; }

.tabs { display: flex; gap: 0.5ch; flex-wrap: wrap; margin-bottom: 0.6em; }

.scroll { overflow-y: auto; overflow-x: hidden; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--fg-dim) transparent; }
.scroll::-webkit-scrollbar { width: 8px; }
.scroll::-webkit-scrollbar-thumb { background: var(--fg-faint); }

.empty { color: var(--fg-faint); padding: 0.8em 0; }
.empty::before { content: "∅ "; }

/* ------------------------------------------------------------ shell */

.shell {
  display: grid;
  height: 100%;
  gap: 0.6em 2ch;
  grid-template-columns: 17ch minmax(0, 1fr) 36ch;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "head head head"
    "nav  main side"
    "cmd  cmd  cmd";
}

.head {
  grid-area: head;
  display: flex;
  align-items: center;
  gap: 2ch;
  border-bottom: 1px solid var(--fg-faint);
  padding-bottom: 0.35em;
  white-space: nowrap;
  overflow: hidden;
}
.head .brand { color: var(--fg-hi); text-shadow: var(--glow-strong); letter-spacing: 0.06em; }
.head .brand .tre { display: inline-block; animation: spin 12s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.head .clock { color: var(--fg-hi); }

.nav { grid-area: nav; display: flex; flex-direction: column; gap: 0.15em; }
.nav button { text-align: left; width: 100%; padding: 0.2em 0.6ch; }
.nav button::before, .nav button::after { content: none; }
.nav button .key { color: var(--fg-faint); margin-right: 1ch; }
.nav button.active .key, .nav button:hover .key { color: var(--bg); }
.nav .badge { float: right; }

.main { grid-area: main; min-height: 0; display: flex; flex-direction: column; }
.module { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.module-head { display: flex; align-items: baseline; gap: 2ch; flex-wrap: wrap; margin-bottom: 0.4em; }
.module-head h1 { margin: 0; color: var(--fg-hi); text-shadow: var(--glow-strong); }

.side { grid-area: side; min-height: 0; display: flex; flex-direction: column; }

.cmd { grid-area: cmd; border-top: 1px solid var(--fg-faint); padding-top: 0.35em; }
.cmd .out { color: var(--fg-dim); min-height: 1.3em; white-space: pre-wrap; max-height: 5.2em; overflow: hidden; }
.cmd form { display: flex; gap: 1ch; align-items: center; }
.cmd .prompt { color: var(--fg-hi); white-space: nowrap; }
.cmd input { flex: 1; background: transparent; border: 0; padding: 0; }

.tabbar { display: none; }
.radx-fab { display: none; }

/* notificações */
.toasts { position: absolute; z-index: 20; right: calc(var(--pad) + 1ch); bottom: calc(var(--pad) + 3.4em); display: flex; flex-direction: column; gap: 0.5em; max-width: min(60ch, 80%); pointer-events: none; }
.toast { background: var(--bg); border: 3px double var(--fg); padding: 0.5em 1.2ch; box-shadow: 0 0 18px rgba(var(--fg-rgb), 0.35); animation: phosphor 0.4s ease-out; pointer-events: auto; }
.toast.err { border-color: var(--alert); color: var(--alert); }

/* ------------------------------------------------------------ módulos */

.dash { display: grid; grid-template-columns: repeat(auto-fill, minmax(34ch, 1fr)); gap: 0.4em 2ch; align-content: start; }

.split { display: grid; grid-template-columns: minmax(26ch, 38%) minmax(0, 1fr); gap: 2ch; min-height: 0; flex: 1; }
.split > * { min-height: 0; }
.pane { display: flex; flex-direction: column; min-height: 0; }

.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.cal .dow { color: var(--fg-dim); font-size: 0.85em; }
.cal button { padding: 0.25em 0; width: 100%; position: relative; }
.cal button::before, .cal button::after { content: none; }
.cal button.other { color: var(--fg-faint); }
.cal button.today { outline: 1px solid var(--fg-dim); }
.cal button.mark::after { content: "•"; position: absolute; right: 2px; top: -2px; color: var(--fg-hi); }
.cal button.active.mark::after { color: var(--bg); }
/* tarefa pendente no dia: marcador ▪ no canto esquerdo */
.cal button.task::before { content: "▪"; position: absolute; left: 3px; top: -2px; color: var(--fg-hi); }
.cal button.active.task::before { color: var(--bg); }

.news-item { padding: 0.5em 0.6ch; border-bottom: 1px dotted var(--fg-faint); }
.news-item.read { opacity: 0.55; }
.news-item .meta { color: var(--fg-dim); font-size: 0.85em; }
.news-item .summary { color: var(--fg-dim); margin-top: 0.2em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(24ch, 34%); gap: 2ch; flex: 1; min-height: 0; }
.calc .display { font-size: 2em; text-align: right; padding: 0.3em 0.5ch; border: 3px double var(--fg-dim); min-height: 2.2em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--fg-hi); text-shadow: var(--glow-strong); }
.calc .expr { text-align: right; color: var(--fg-dim); min-height: 1.3em; overflow: hidden; white-space: nowrap; }
.calc .keys { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.4em; margin-top: 0.6em; }
.calc .keys button { padding: 0.55em 0; font-size: 1.1em; border: 1px solid var(--fg-faint); }
.calc .keys button::before, .calc .keys button::after { content: none; }

.chat { display: flex; flex-direction: column; gap: 0.6em; }
.msg { white-space: pre-wrap; word-break: break-word; }
.msg .who { color: var(--fg-dim); }
.msg.user .who { color: var(--fg-dim); }
.msg.assistant .who { color: var(--fg-hi); }
.msg.system { color: var(--fg-faint); text-align: center; }
.cursor-block { display: inline-block; width: 0.62em; height: 1.05em; background: var(--fg); vertical-align: text-bottom; animation: blink 1s steps(1) infinite; box-shadow: var(--glow); }

/* ------------------------------------------------------------ Mr.RAD-X */

.radx-figure { display: block; width: 100%; max-width: 220px; margin: 0 auto; overflow: visible; filter: drop-shadow(0 0 3px rgba(var(--fg-rgb), 0.7)) drop-shadow(0 0 10px rgba(var(--fg-rgb), 0.3)); }
.radx-figure .ln { fill: none; stroke: var(--fg); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.radx-figure .thin { stroke-width: 1.5; }
.radx-figure .solid { fill: var(--bg); stroke: var(--fg); stroke-width: 2.4; stroke-linejoin: round; }
.radx-figure .fillfg { fill: var(--fg); stroke: none; }
.radx-figure .body { animation: bob 3.2s ease-in-out infinite; transform-origin: 100px 250px; }
@keyframes bob { 50% { transform: translateY(2px) rotate(-0.6deg); } }
.radx-figure .eyes { animation: eyeblink 4.6s infinite; transform-origin: 100px 82px; }
@keyframes eyeblink { 0%, 95%, 100% { transform: scaleY(1); } 97% { transform: scaleY(0.1); } }
.radx-figure .mouth-open { display: none; }
.radx-figure.talking .mouth-open { display: inline; animation: talk 0.28s steps(1) infinite; }
.radx-figure.talking .mouth-smile { animation: talk 0.28s steps(1) infinite reverse; }
@keyframes talk { 50% { opacity: 0; } }
.radx-figure.acting .body { animation: busy 0.45s ease-in-out infinite; }
@keyframes busy { 50% { transform: translateY(-3px); } }
.radx-figure .atom { display: none; }
.radx-figure.thinking .atom { display: inline; }
.radx-figure .atom .orbit { animation: spin 1.6s linear infinite; transform-origin: 150px 22px; }
.radx-figure .sweat { display: none; }
.radx-figure.error .sweat { display: inline; animation: drip 1s ease-in infinite; }
@keyframes drip { from { transform: translateY(0); opacity: 1; } to { transform: translateY(10px); opacity: 0; } }
.radx-status { text-align: center; color: var(--fg-dim); min-height: 1.3em; }

.radx-side .chat { flex: 1; min-height: 0; }
/* o boneco não encolhe dentro da coluna (encolhendo, o desenho vazava por cima do chat) */
.radx-side .radx-figure, .radx-full .radx-figure {
  flex: 0 0 auto;
  width: auto;
  height: clamp(150px, 30vh, 260px);
  max-width: 100%;
}
.radx-side .radx-status, .radx-full .radx-status { flex: 0 0 auto; margin: 0.3em 0 0.5em; border-bottom: 1px dotted var(--fg-faint); padding-bottom: 0.3em; }
.radx-full { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); }

/* ------------------------------------------------------------ autenticação */

.auth { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1em; overflow-y: auto; padding: 1em 0; }
.auth .panel { width: min(92ch, 100%); }
.moon { color: var(--fg-hi); text-shadow: var(--glow-strong); line-height: 1; font-size: 0.8em; }
.gate-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.4em 1ch; }
.gate-grid button { padding: 0.45em 0; font-size: 1.05em; }
.gate-grid button::before, .gate-grid button::after { content: none; }
.gate-grid button { border: 1px solid var(--fg-faint); }
.readout { display: grid; grid-template-columns: auto 1fr; gap: 0.1em 2ch; }
.readout .k { color: var(--fg-dim); }
.decrypt { font-size: 1.2em; letter-spacing: 0.1em; color: var(--fg-hi); text-shadow: var(--glow-strong); word-break: break-all; }
.locked { color: var(--alert); text-align: center; text-shadow: 0 0 10px rgba(255, 182, 65, 0.7); }
.locked .big { font-size: 2em; }
.auth.boot { align-items: flex-start; justify-content: flex-start; white-space: pre-wrap; }

/* ------------------------------------------------------------ intro radioativa */

.intro { position: absolute; inset: 0; z-index: 15; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2em; background: var(--bg); }
.intro.out { animation: introOut 0.8s ease-in forwards; }
@keyframes introOut { to { opacity: 0; filter: brightness(3) blur(2px); } }
.trefoil { width: min(52vmin, 360px); height: auto; overflow: visible; filter: drop-shadow(0 0 4px var(--fg)) drop-shadow(0 0 22px rgba(var(--fg-rgb), 0.55)); }
.trefoil .blade, .trefoil .core, .trefoil .ring {
  fill: var(--fg); fill-opacity: 0; stroke: var(--fg); stroke-width: 2.2;
  stroke-dasharray: 700; stroke-dashoffset: 700;
  animation: draw 1.3s ease-out forwards, fillin 0.7s ease-in 1.2s forwards;
}
.trefoil .blade:nth-child(2) { animation-delay: 0.25s, 1.35s; }
.trefoil .blade:nth-child(3) { animation-delay: 0.5s, 1.5s; }
.trefoil .core { animation-delay: 0.8s, 1.6s; }
.trefoil .ring { fill: none; animation: draw 2s ease-out 0.1s forwards; stroke-width: 1.2; opacity: 0.7; }
.trefoil .spin { transform-origin: 100px 100px; animation: spin 6s cubic-bezier(0.5, 0, 0.3, 1) 1.6s infinite; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fillin { to { fill-opacity: 1; } }
.intro .word { font-size: clamp(1.6em, 5vmin, 3em); letter-spacing: 0.18em; color: var(--fg-hi); text-shadow: var(--glow-strong); min-height: 1.3em; }
.intro .sub { color: var(--fg-dim); min-height: 1.3em; }

/* ------------------------------------------------------------ player */

.player { display: inline-flex; gap: 0.5ch; align-items: center; max-width: 34ch; }
.player .name { max-width: 20ch; overflow: hidden; text-overflow: ellipsis; color: var(--fg-dim); }
.player button { padding: 0 0.2ch; }
.player button::before, .player button::after { content: none; }

/* ------------------------------------------------------------ responsivo */

@media (max-width: 1280px) {
  .shell { grid-template-columns: 15ch minmax(0, 1fr) 30ch; }
}

@media (max-width: 1020px) {
  .shell {
    grid-template-columns: 14ch minmax(0, 1fr);
    grid-template-areas: "head head" "nav main" "cmd cmd";
  }
  .side { display: none; }
  .radx-fab { display: block; position: absolute; z-index: 12; right: calc(var(--pad) + 0.5ch); bottom: calc(var(--pad) + 3em); width: 74px; }
  .radx-fab button { padding: 0; }
  .radx-fab button::before, .radx-fab button::after { content: none; }
  .radx-fab button:hover { background: transparent; }
}

@media (max-width: 760px) {
  :root { --font-size: 14.5px; --pad: 10px; }
  .monitor { padding: 0; background: #000; }
  .bezel { border-radius: 0; padding: 0; box-shadow: none; background: #000; }
  .screen { border-radius: 0; }
  .vignette { background: radial-gradient(ellipse 95% 90% at 50% 50%, transparent 70%, rgba(0, 0, 0, 0.55) 100%); }
  .shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "head" "main" "tabs";
    gap: 0.4em;
  }
  .nav, .cmd { display: none; }
  .head { gap: 1.2ch; font-size: 0.92em; }
  .head .hide-sm { display: none; }
  .tabbar {
    grid-area: tabs;
    display: flex;
    gap: 0.3ch;
    overflow-x: auto;
    border-top: 1px solid var(--fg-faint);
    padding: 0.35em 0 calc(0.35em + env(safe-area-inset-bottom));
    scrollbar-width: none;
  }
  .tabbar::-webkit-scrollbar { display: none; }
  .tabbar button { flex: 0 0 auto; padding: 0.45em 0.8ch; }
  .tabbar button::before, .tabbar button::after { content: none; }
  .radx-fab { bottom: calc(3.4em + env(safe-area-inset-bottom)); right: 6px; width: 62px; }
  .toasts { bottom: calc(3.6em + env(safe-area-inset-bottom)); right: 8px; left: 8px; max-width: none; }
  .split, .calc { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
  .split:not(.stack).detail-open > .pane:first-child { display: none; }
  .split:not(.stack):not(.detail-open) > .pane:last-child { display: none; }
  .split.stack { grid-template-columns: minmax(0, 1fr) !important; }
  .radx-full { grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
  .radx-full .radx-figure { height: 110px; }
  .dash { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
  .gate-grid { grid-template-columns: repeat(5, 1fr); }
  .gate-grid button { padding: 0.7em 0; }
  .moon { font-size: 0.62em; }
  .auth .panel .row.moonrow { flex-direction: column; align-items: flex-start; }
  input, textarea, select { font-size: 16px; } /* evita zoom no iOS */
  .grid-form { grid-template-columns: minmax(0, 1fr); }
  .calc .keys button { padding: 0.8em 0; }
}

@media (prefers-reduced-motion: reduce) {
  .screen-content, .glowline::after, .flicker, .radx-figure .body, .head .brand .tre { animation: none !important; }
}

/* fórmula do portão lunar */
.formula { font-size: 1.15em; letter-spacing: 0.08em; }
.formula .hi { border: 1px solid var(--fg-dim); padding: 0.1em 1ch; }

/* fórmula: a caixinha nunca quebra no meio */
.formula { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em 1ch; }
.formula .hi { white-space: nowrap; display: inline-block; }

/* calculadorinha do portão (só no computador) */
.minicalc { width: 19ch; border: 1px solid var(--fg-faint); padding: 0.4em 0.6ch; flex: 0 0 auto; margin-left: auto; }
.mc-display { text-align: right; color: var(--fg-hi); text-shadow: var(--glow-strong); border-bottom: 1px dashed var(--fg-dim); padding: 0.1em 0.3ch 0.3em; margin-bottom: 0.4em; overflow: hidden; white-space: nowrap; }
.mc-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.25em; }
.mc-keys button { border: 1px solid var(--fg-ghost); padding: 0.2em 0; text-align: center; }
.mc-keys button.eq { grid-column: span 2; }
@media (max-width: 760px) {
  .minicalc { display: none; }
  .auth .box > .title-right { display: none; }
  .formula { font-size: 1em; letter-spacing: 0.04em; }
}

/* ------------------------------------------------------------ máquinas */
.hosts { display: grid; grid-template-columns: repeat(auto-fill, minmax(36ch, 1fr)); gap: 0.3em 2ch; }
.box.host { cursor: pointer; }
.box.host.selected { border-color: var(--fg); box-shadow: 0 0 12px rgba(var(--fg-rgb), 0.35), inset 0 0 10px rgba(var(--fg-rgb), 0.08); }
.box.host.off { border-color: rgba(255, 182, 65, 0.6); }
.list.containers > li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
pre.logs {
  margin: 0.6em 0 0;
  max-height: 45vh;
  white-space: pre-wrap;
  word-break: break-all;
  font-size: 0.85em;
  line-height: 1.2;
  color: var(--fg-dim);
  border: 1px solid var(--fg-ghost);
  padding: 0.5em 1ch;
}
.box.approval { border-color: var(--alert); margin-bottom: 0.6em; }
.box.approval > .title { color: var(--alert); }
@media (max-width: 760px) {
  .hosts { grid-template-columns: minmax(0, 1fr); }
  .list.containers > li { white-space: normal; }
}