/* Visual compartilhado das telas (Início, Triagem, Torre, Certificação). */

/* Fontes do Google Fonts (licença SIL Open Font License), hospedadas no painel: Rajdhani nos títulos, Rubik nos textos. */
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/rajdhani-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/rajdhani-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/rajdhani-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/rajdhani-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/rajdhani-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/rajdhani-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/rubik-400-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/rubik-400-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --font: "Rubik", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-titulo: "Rajdhani", "Rubik", "Segoe UI", system-ui, sans-serif;
  --mono: "Cascadia Mono", Consolas, Menlo, monospace;
  --brand-cyan: #00d9ff;
  --grad-brand: linear-gradient(135deg, #0a3cff 0%, #0a8cff 55%, #00d9ff 100%);
  --grad-ok: linear-gradient(135deg, #0b7a43, #1fbf75);
  --fav: #f2b01e; --fav-bg: #fff3cf; --fav-text: #6b4a00;
}

[data-theme="light"] {
  color-scheme: light;
  --page-bg: #f3f6ff;
  --page-image: url("/assets/bg-light.webp");
  --surface: rgba(255, 255, 255, .88);
  --surface-solid: #ffffff;
  --text: #0c1445;
  --muted: #586391;
  --border: #dbe3f8;
  --field-bg: #ffffff;
  --field-border: #c9d4f2;
  --field-hover: #9fb0e8;
  --accent: #0a46ff;
  --accent-soft: rgba(10, 70, 255, .09);
  --accent-text: #0a3cd6;
  --ring: rgba(10, 70, 255, .28);
  --ok: #0b7a43; --ok-bg: #e4f6ec; --ok-border: #a9dfc2;
  --bad: #c2271d; --bad-bg: #fdeceb; --bad-border: #f2bcb8;
  --shadow: 0 1px 2px rgba(12, 20, 69, .05), 0 12px 32px rgba(10, 40, 160, .10);
  --sidebar-image: url("/assets/bg-brand.webp");
  --sidebar-overlay: linear-gradient(180deg, rgba(0, 10, 120, 0) 0%, rgba(0, 8, 100, .38) 100%);
  --preview-bg: #f6f8ff;
  --skel-a: #e8edfc;
  --skel-b: #f7f9ff;
}

[data-theme="dark"] {
  color-scheme: dark;
  --page-bg: #070a2e;
  --page-image: url("/assets/bg-dark.webp");
  --surface: rgba(14, 19, 70, .72);
  --surface-solid: #101650;
  --text: #eaf0ff;
  --muted: #9aa7dc;
  --border: rgba(255, 255, 255, .11);
  --field-bg: rgba(4, 7, 38, .55);
  --field-border: rgba(255, 255, 255, .17);
  --field-hover: rgba(255, 255, 255, .32);
  --accent: #3d8bff;
  --accent-soft: rgba(61, 139, 255, .17);
  --accent-text: #86b9ff;
  --ring: rgba(61, 139, 255, .42);
  --ok: #4ade9a; --ok-bg: rgba(74, 222, 154, .12); --ok-border: rgba(74, 222, 154, .36);
  --bad: #ff8080; --bad-bg: rgba(255, 128, 128, .12); --bad-border: rgba(255, 128, 128, .36);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 40px rgba(0, 0, 0, .35);
  --sidebar-image: url("/assets/bg-dark.webp");
  --sidebar-overlay: linear-gradient(180deg, rgba(2, 4, 30, .5) 0%, rgba(2, 4, 30, .82) 100%);
  --preview-bg: rgba(3, 5, 30, .6);
  --skel-a: rgba(255, 255, 255, .06);
  --skel-b: rgba(255, 255, 255, .16);
  --fav-bg: rgba(242, 176, 30, .16); --fav-text: #ffd37a;
}

* { box-sizing: border-box; }
html, body { margin: 0; -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  color: var(--text);
  background: var(--page-bg) var(--page-image) center / cover fixed no-repeat;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .55; font-weight: 400; }
button { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.oculto { display: none !important; }
.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

@keyframes reveal { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
@keyframes slidein { from { transform: translateX(100%); } to { transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes indet { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
@keyframes shimmer { from { background-position: 220% 0; } to { background-position: -220% 0; } }
.reveal { animation: reveal .2s ease-out both; }

/* ---------- rastro de luz no neon da logo (static/neon.js) ---------- */
/* Um giro cônico (cabeça branca, rastro ciano que some) recortado pela máscara do próprio
   neon da imagem (--mascara); --cx/--cy = centro do tubo. A luz soma brilho ao neon. */
@property --neon-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes neon-varre { from { --neon-ang: 0deg; } to { --neon-ang: 360deg; } }
@keyframes neon-aparece { 0% { opacity: 0; } 12%, 80% { opacity: 1; } 100% { opacity: 0; } }
.neon-wrap { position: relative; }
.neon-wrap > img { display: block; width: 100%; height: auto; }
/* enquanto a luz corre, só o tubo (não o texto) fica mais apagado, para o rastro se destacar */
.neon-sombra { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: #041a7a; mix-blend-mode: multiply; }
.neon-luz {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  mix-blend-mode: plus-lighter;
  filter: drop-shadow(0 0 2px rgba(0, 229, 255, .95)) drop-shadow(0 0 9px rgba(0, 190, 255, .75));
}
.neon-sombra, .neon-luz > span, .neon-loader > span {
  position: absolute; inset: 0;
  -webkit-mask: var(--mascara) center / 100% 100% no-repeat;
  mask: var(--mascara) center / 100% 100% no-repeat;
}
.neon-luz > span, .neon-loader .nl-luz {
  background: conic-gradient(from var(--neon-ang) at var(--cx) var(--cy),
    transparent 0deg 190deg, rgba(0, 170, 255, .35) 260deg, rgba(0, 225, 255, .9) 325deg,
    #c9fbff 345deg, #fff 354deg, transparent 359deg);
}
@keyframes neon-apaga { 0% { opacity: 0; } 12%, 80% { opacity: .6; } 100% { opacity: 0; } }
.neon-wrap.volta .neon-luz { animation: neon-aparece 1.7s ease-in-out both; }
.neon-wrap.volta .neon-sombra { animation: neon-apaga 1.7s ease-in-out both; }
.neon-wrap.volta .neon-luz > span { animation: neon-varre 1.7s cubic-bezier(.45, .05, .35, 1) both; }
.neon-wrap.giro .neon-luz { opacity: 1; }
.neon-wrap.giro .neon-sombra { opacity: .6; transition: opacity .3s; }
.neon-wrap.giro .neon-luz > span { animation: neon-varre 1.3s linear infinite; }
.brand { cursor: pointer; }

/* ---------- fundo animado (static/grainient.js) ---------- */
.grainient { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.grainient canvas { display: block; width: 100%; height: 100%; }

/* ---------- menu lateral ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; z-index: 20;
  height: 100vh;
  width: 256px; flex: 0 0 256px;
  display: flex; flex-direction: column;
  padding: 26px 20px 20px;
  color: #fff;
  background: var(--sidebar-overlay), var(--sidebar-image) 70% 30% / cover no-repeat;
  border-right: 1px solid rgba(255, 255, 255, .14);
  transition: width .2s ease, flex-basis .2s ease, padding .2s ease;
}
.sb-toggle {
  position: absolute; top: 30px; right: -13px;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; padding: 0; cursor: pointer;
  color: var(--accent-text);
  background: var(--surface-solid);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(10, 30, 120, .18);
  outline: none;
  transition: transform .15s;
}
.sb-toggle:hover { transform: scale(1.08); }
.sb-toggle:focus-visible { box-shadow: 0 0 0 3px var(--ring); }
.sb-toggle .ic { width: 14px; height: 14px; stroke-width: 2.4; transition: transform .2s; }
.brand { display: flex; justify-content: center; align-items: center; min-height: 52px; }
.brand .logo-full { display: block; width: 100%; max-width: 150px; margin: 4px auto 0; }
.brand .logo-compact { display: none; width: 44px; }
.nav { margin-top: 34px; display: flex; flex-direction: column; gap: 6px; }
.nav-item, .theme-toggle {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: 12px;
  color: #fff; font-weight: 600; text-decoration: none; white-space: nowrap; overflow: hidden;
  border: 1px solid transparent;
  transition: background-color .15s, border-color .15s;
}
.nav-item:hover { background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .16); }
.nav-item[aria-current="page"] { background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .22); }
.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.theme-toggle { width: 100%; cursor: pointer; background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .22); }
.theme-toggle:hover { background: rgba(255, 255, 255, .20); }
.logout-form { display: contents; }
.theme-toggle.logout { background: transparent; border-color: transparent; opacity: .85; }
.theme-toggle.logout:hover { opacity: 1; background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .16); }
.theme-toggle:focus-visible, .nav-item:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

[data-sb="closed"] .sidebar { width: 76px; flex-basis: 76px; padding: 26px 14px 20px; }
[data-sb="closed"] .sb-toggle .ic { transform: rotate(180deg); }
[data-sb="closed"] .brand .logo-full { display: none; }
[data-sb="closed"] .brand .logo-compact { display: block; }
[data-sb="closed"] .nav-label { display: none; }
[data-sb="closed"] .nav-item, [data-sb="closed"] .theme-toggle { justify-content: center; }

/* ---------- página ---------- */
.main { flex: 1; min-width: 0; padding: 28px clamp(16px, 3vw, 40px) 32px; }
.container { max-width: 1120px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.page-head { flex: 1 1 100%; display: flex; align-items: center; gap: 12px; }
.page-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--grad-brand); box-shadow: 0 6px 16px rgba(10, 70, 255, .28); flex: 0 0 auto; }
.page-icon .ic { width: 20px; height: 20px; }
/* títulos em Rajdhani (mais estreita: um pouco maior que o texto ao redor) */
h1, h2, .bt-title, .detail-head .t, .result-head strong, .sec-title span, .itable-title { font-family: var(--font-titulo); }
h1 { margin: 0; font-size: 25px; font-weight: 700; line-height: 1.15; letter-spacing: .005em; }
.sub { margin: 2px 0 0; color: var(--muted); font-size: 13.5px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.form-card { flex: 1 1 600px; min-width: 0; position: relative; z-index: 2; }
.card-title { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.card-title .badge-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); flex: 0 0 auto; }
.card-title .badge-ic .ic { width: 16px; height: 16px; }
.card-title h2 { margin: 0; font-size: 18px; font-weight: 700; }
.card-title small { margin-left: auto; font-size: 12px; color: var(--muted); }
.sec-title { display: flex; align-items: center; gap: 8px; margin: 2px 0; color: var(--muted); }
.sec-title .ic { width: 16px; height: 16px; }
.sec-title span { font-size: 15px; font-weight: 700; color: var(--text); }
.divider { height: 1px; background: var(--border); margin: 4px 0; }

.stack { display: flex; flex-direction: column; gap: 10px; }
.row { display: grid; gap: 10px; position: relative; }
.c1 { grid-template-columns: minmax(0, 1fr); }
.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- campo com nome dentro ---------- */
.field {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 12px;
  min-width: 0;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: 10px;
  cursor: text;
  transition: border-color .15s, box-shadow .15s;
}
.field:hover { border-color: var(--field-hover); }
.field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.field.accent { border-color: var(--accent); }
.f-name { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.auto-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
.field input {
  flex: 1; min-width: 0; width: 100%; height: 100%;
  padding: 0; border: 0; background: transparent; outline: none;
  font: inherit; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.field .f-affix { font-size: 11.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.field .f-prefix { font-weight: 600; color: var(--muted); }
.field.tight { gap: 6px; padding: 0 10px 0 12px; }
.kbd { font-size: 11px; font-weight: 600; color: var(--muted); padding: 2px 6px; border: 1px solid var(--field-border); border-radius: 5px; white-space: nowrap; }

/* ---------- dropdown ---------- */
.dd { position: relative; min-width: 0; transition: opacity .15s; }
.dd-btn {
  width: 100%; height: 44px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px; margin: 0;
  font: inherit; text-align: left; color: var(--text);
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: 10px;
  cursor: pointer; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.dd-btn:hover { border-color: var(--field-hover); }
.dd-btn:focus-visible, .dd.open .dd-btn { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.dd-value { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-value.placeholder { color: var(--muted); }
.dd-chev { width: 16px; height: 16px; stroke: var(--muted); stroke-width: 2.2; transition: transform .15s; }
.dd.open .dd-chev { transform: rotate(180deg); }
.dd.open { z-index: 70; }
.dd.disabled { opacity: .45; }
.dd.disabled.locked { opacity: .8; }
.dd.disabled .dd-btn { cursor: not-allowed; }
.dd-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60;
  min-width: 200px; max-height: 280px; overflow: auto;
  padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(10, 30, 120, .22);
  animation: reveal .14s ease-out both;
}
.dd-menu[hidden] { display: none; }
.dd-menu.up { top: auto; bottom: calc(100% + 6px); }
.dd-menu.right { left: auto; right: 0; width: 220px; min-width: 0; max-width: 100%; }
.dd-menu .menu-head { padding: 4px 10px 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.dd-opt {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 10px; border: 0; border-radius: 8px;
  font: inherit; font-size: 14px; font-weight: 500; text-align: left; color: var(--text);
  background: transparent; cursor: pointer; outline: none;
}
.dd-opt:hover, .dd-opt:focus-visible { background: var(--accent-soft); }
.dd-opt[aria-selected="true"] { font-weight: 700; color: var(--accent-text); background: var(--accent-soft); }
.dd-opt .ic { width: 16px; height: 16px; stroke-width: 2.4; }
.combo-chev { width: 32px; height: 32px; margin-right: -6px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.combo-chev:hover { background: var(--accent-soft); }

/* ---------- botões liga/desliga ---------- */
.tgl {
  width: 100%; height: 44px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 14px; font-weight: 700; white-space: nowrap;
  color: var(--muted);
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: 10px;
  cursor: pointer; outline: none;
  transition: background-color .15s, border-color .15s, color .15s;
}
.tgl:hover { border-color: var(--field-hover); }
.tgl:focus-visible { box-shadow: 0 0 0 3px var(--ring); }
.tgl > .ic { width: 16px; height: 16px; stroke-width: 2.4; }
.tgl .when-on { display: none; }
.tgl[aria-pressed="true"] { color: #fff; background: var(--grad-brand); border-color: transparent; }
.tgl[aria-pressed="true"] .when-on { display: inline-block; }
.tgl[disabled] { opacity: .45; cursor: not-allowed; }

.state {
  width: 100%; height: 44px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 14px; font-weight: 700; white-space: nowrap;
  border: 1px solid; border-radius: 10px; outline: none; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.state:focus-visible { box-shadow: 0 0 0 3px var(--ring); }
.state .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.state[data-state="on"] { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-border); }
.state[data-state="off"] { color: var(--bad); background: var(--bad-bg); border-color: var(--bad-border); }
.state[data-state="idle"] { color: var(--muted); background: var(--field-bg); border-color: var(--field-border); }
.state[data-state="idle"] .dot { background: transparent; border: 2px solid currentColor; }

.okbtn {
  width: 100%; height: 44px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 14px; font-weight: 700;
  color: var(--muted); background: var(--field-bg);
  border: 1px solid var(--field-border); border-radius: 10px;
  cursor: pointer; outline: none;
  transition: background-color .15s, border-color .15s, color .15s;
}
.okbtn:focus-visible { box-shadow: 0 0 0 3px var(--ring); }
.okbtn > .ic { width: 17px; height: 17px; stroke-width: 1.9; }
.okbtn[aria-pressed="true"] { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-border); }

.seg { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 3px; border: 1px solid var(--field-border); border-radius: 12px; background: var(--field-bg); }
.seg button { height: 40px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--muted); background: transparent; border: 0; border-radius: 9px; cursor: pointer; outline: none; transition: background .15s, color .15s; }
.seg button:focus-visible { box-shadow: 0 0 0 3px var(--ring); }
.seg button[aria-pressed="true"] { color: #fff; background: var(--grad-brand); box-shadow: 0 4px 12px rgba(10, 70, 255, .25); }
.seg-row { display: flex; align-items: center; gap: 12px; }
.seg-row > .f-name { min-width: 60px; }

/* ---------- busca, botões ---------- */
.search-row { display: flex; gap: 10px; }
.search-field { flex: 1; height: 48px; padding: 0 14px; }
.search-field > .ic { stroke: var(--muted); }
.search-field input { font-size: 16px; }
.btn {
  height: 48px; padding: 0 22px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; color: #fff; white-space: nowrap; cursor: pointer;
  background: var(--grad-brand);
  border: 0; border-radius: 12px;
  box-shadow: 0 6px 18px rgba(10, 70, 255, .28);
  outline: none; text-decoration: none;
  transition: transform .08s, filter .15s, box-shadow .15s, background .2s;
}
.btn:hover { filter: brightness(1.07); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { box-shadow: 0 0 0 3px var(--ring), 0 6px 18px rgba(10, 70, 255, .28); }
.btn[disabled] { cursor: progress; filter: saturate(.75) brightness(.96); }
.btn.copied { background: var(--grad-ok); box-shadow: 0 6px 18px rgba(11, 122, 67, .32); }
.btn-sm { height: 44px; padding: 0 16px; }
.btn-soft {
  height: 48px; padding: 0 16px; position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 600; color: var(--text); white-space: nowrap; cursor: pointer;
  background: var(--field-bg); border: 1px solid var(--field-border); border-radius: 12px; outline: none;
  transition: background-color .15s, border-color .15s;
}
.btn-soft:hover { background: var(--accent-soft); border-color: var(--field-hover); }
.btn-soft:focus-visible { box-shadow: 0 0 0 3px var(--ring); }
.count-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; background: var(--grad-brand); }
.btn-spinner { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; animation: spin .7s linear infinite; }
.is-loading .btn-search .btn-spinner { display: inline-block; }
.is-loading .btn-search > .ic { display: none; }

.actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin-top: 4px; }
.btn-copy { height: 50px; gap: 10px; font-size: 16px; }
.btn-copy .kbd-light { font-size: 11px; font-weight: 600; padding: 2px 6px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 5px; opacity: .9; }
.btn-ghost {
  height: 50px; padding: 0 16px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 600; color: var(--text); cursor: pointer;
  background: transparent; border: 1px solid var(--field-border); border-radius: 12px; outline: none;
}
.btn-ghost:hover { background: var(--accent-soft); }
.btn-ghost:focus-visible { box-shadow: 0 0 0 3px var(--ring); }
.icon-btn { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; padding: 0; border-radius: 10px; background: transparent; border: 1px solid var(--field-border); color: var(--muted); cursor: pointer; outline: none; }
.icon-btn:hover { background: var(--accent-soft); color: var(--text); }
.icon-btn:focus-visible { box-shadow: 0 0 0 3px var(--ring); }
.icon-btn .ic { width: 16px; height: 16px; }
.icon-btn.danger { color: var(--bad); }

/* ---------- linha de status e carregamento ---------- */
.status-line { display: flex; align-items: center; gap: 8px; min-height: 24px; margin: 10px 0 4px; font-size: 13px; color: var(--muted); }
.status-line[data-kind="ok"] { color: var(--ok); }
.status-line[data-kind="error"] { color: var(--bad); font-weight: 600; align-items: flex-start; }
.status-line[data-kind="loading"] { color: var(--accent-text); font-weight: 600; }
.status-line .ic { width: 16px; height: 16px; stroke-width: 2; }
.sl-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sl-body .idle { display: flex; align-items: center; gap: 6px; }
.sl-detail { font-family: var(--mono); font-size: 11.5px; font-weight: 400; color: var(--muted); overflow-wrap: anywhere; }
.neon-loader { position: relative; display: inline-block; width: 44px; aspect-ratio: 480 / 263; flex: 0 0 auto; filter: drop-shadow(0 0 3px rgba(0, 210, 255, .7)); }
.neon-loader .nl-base { background: var(--accent); opacity: .3; }
.neon-loader .nl-luz { animation: neon-varre 1.3s linear infinite; }
[data-theme="light"] .neon-loader .nl-luz { filter: brightness(.8) saturate(1.4); }
/* carregamento grande no quadro Resultado (Triagem e Torre) */
.preview-carregando { display: none; position: absolute; inset: 0; z-index: 4; place-items: center; align-content: center; gap: 12px; pointer-events: none; }
.is-loading .preview-carregando { display: grid; }
.preview-carregando .neon-loader { width: 150px; filter: drop-shadow(0 0 4px rgba(0, 210, 255, .8)) drop-shadow(0 0 14px rgba(0, 170, 255, .5)); }
.preview-carregando .pc-texto { font-size: 12.5px; font-weight: 600; color: var(--accent-text); }
.progress { height: 2px; margin-bottom: 12px; border-radius: 2px; overflow: hidden; opacity: 0; transition: opacity .2s; background: var(--accent-soft); }
.progress i { display: block; width: 40%; height: 100%; background: var(--grad-brand); animation: indet 1.1s ease-in-out infinite; }
.is-loading .progress { opacity: 1; }

.skel { position: relative; }
.is-loading .auto::after,
.is-loading .skel::after {
  content: ""; position: absolute; inset: 0; border-radius: 10px; z-index: 3;
  background: linear-gradient(90deg, var(--skel-a) 0%, var(--skel-b) 50%, var(--skel-a) 100%);
  background-size: 220% 100%;
  animation: shimmer 1.25s linear infinite;
  pointer-events: none;
}
.is-loading .preview-wrap::after { border-radius: 12px; }
.is-loading .auto, .is-loading .skel { pointer-events: none; }
.is-loading .btn-copy { pointer-events: none; opacity: .55; }

/* ---------- resultado ---------- */
.result-card { flex: 0 1 360px; min-width: 280px; position: sticky; top: 24px; padding: 16px; }
.result-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--muted); }
.result-head .ic { width: 16px; height: 16px; }
.result-head strong { font-size: 16px; font-weight: 700; color: var(--text); }
.result-head small { margin-left: auto; font-size: 12px; }
.preview-wrap { position: relative; }
.preview {
  margin: 0; padding: 12px;
  font-family: var(--mono); font-size: 12px; line-height: 1.65;
  color: var(--text);
  background: var(--preview-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow-wrap: anywhere;
  max-height: 70vh; overflow: auto;
}
.pl { min-height: 1.65em; white-space: pre-wrap; }
.pq { color: var(--accent-text); opacity: .85; }
.is-loading .preview, .is-loading .preview * { color: transparent !important; }

/* ---------- painel lateral (histórico) e modal ---------- */
.overlay { position: fixed; inset: 0; z-index: 90; background: rgba(5, 10, 50, .35); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: reveal .15s ease-out both; }
.overlay.darker { background: rgba(5, 10, 50, .38); }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 91;
  width: min(440px, 100vw);
  display: flex; flex-direction: column;
  background: var(--surface-solid);
  box-shadow: -18px 0 48px rgba(5, 10, 50, .28);
  animation: slidein .22s ease-out both;
}
.brand-top {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 18px 16px;
  color: #fff;
  background: var(--sidebar-overlay), var(--sidebar-image) 70% 30% / cover no-repeat;
}
.brand-top .bt-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .25); flex: 0 0 auto; }
.brand-top .bt-title { font-size: 19px; font-weight: 700; line-height: 1.15; }
.brand-top .bt-sub { font-size: 12.5px; opacity: .85; }
.brand-top .bt-close { width: 34px; height: 34px; margin-left: auto; display: grid; place-items: center; padding: 0; border-radius: 10px; color: #fff; cursor: pointer; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); outline: none; }
.brand-top .bt-close:hover { background: rgba(255, 255, 255, .22); }
.brand-top .bt-close:focus-visible { box-shadow: 0 0 0 3px rgba(255, 255, 255, .5); }
.drawer-search { padding: 14px 16px 6px; }
.drawer-search .field { height: 42px; }
.drawer-body { flex: 1; overflow: auto; padding: 8px 16px 16px; display: flex; flex-direction: column; gap: 14px; }
.drawer-empty { margin: auto; max-width: 280px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; font-size: 14px; color: var(--muted); }
.drawer-empty .big-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.hgroup { display: flex; flex-direction: column; gap: 8px; }
.hgroup-label { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.hcard { padding: 12px; border: 1px solid var(--border); border-radius: 12px; display: flex; flex-direction: column; gap: 6px; background: var(--surface); }
.hcard-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hcard-login { font-weight: 700; font-size: 14.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.htag { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; border: 1px solid; }
.htag .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.htag.on { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-border); }
.htag.off { color: var(--bad); background: var(--bad-bg); border-color: var(--bad-border); }
.hcard-time { flex: none; margin-left: auto; font-size: 12px; font-weight: 600; color: var(--muted); }
.hcard-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12.5px; color: var(--muted); }
.hcard-meta span + span::before { content: "·"; margin-right: 10px; }
.hcard-desc { font-size: 13px; }
.hcard-actions { display: flex; gap: 8px; margin-top: 2px; }
.hcard-actions .btn { flex: 1; height: 34px; padding: 0 12px; font-size: 13px; border-radius: 10px; box-shadow: none; }
.drawer-foot { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); }
.btn-danger-soft { margin-left: auto; height: 34px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--bad); background: transparent; border: 1px solid var(--bad-border); border-radius: 10px; cursor: pointer; outline: none; }
.btn-danger-soft.confirm { border-color: var(--bad); }
.btn-danger-soft .ic { width: 15px; height: 15px; }

.modal {
  position: fixed; z-index: 91; inset: 0; margin: auto;
  width: min(var(--mw, 600px), calc(100vw - 32px)); height: fit-content; max-height: calc(100vh - 48px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface-solid);
  border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 24px 60px rgba(5, 10, 50, .35);
  animation: reveal .18s ease-out both;
}
.modal-body { padding: 16px; overflow: auto; display: flex; flex-wrap: wrap; gap: 12px; }
.itable { min-width: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.itable-title { padding: 8px 12px; font-size: 14px; font-weight: 700; color: var(--accent-text); background: var(--accent-soft); }
.itable-grid { display: grid; }
.itable-head { padding: 8px 12px; font-size: 12px; font-weight: 700; color: var(--muted); border-bottom: 1px solid var(--border); }
.icell { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 9px 12px; font-size: 13.5px; font-weight: 500; text-align: left; color: var(--text); background: transparent; border: 0; cursor: default; outline: none; }
.icell.alt { background: var(--preview-bg); }
.icell.first { font-weight: 700; }
.icell.can { cursor: pointer; }
.icell.can:hover { background: var(--accent-soft); }
.icell.done { color: var(--ok); }
.icell .ic { width: 15px; height: 15px; stroke-width: 2.4; }
.items-grid { flex: 1 1 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.item-btn { height: 44px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text); background: var(--field-bg); border: 1px solid var(--field-border); border-radius: 10px; cursor: pointer; outline: none; text-align: left; }
.item-btn:hover { background: var(--accent-soft); }
.item-btn.done { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-border); }
.item-btn .ic { width: 16px; height: 16px; }

/* ---------- Início ---------- */
.info-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.info-btn { height: 40px; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--text); background: var(--field-bg); border: 1px solid var(--field-border); border-radius: 10px; cursor: pointer; outline: none; transition: background-color .15s, border-color .15s; }
.info-btn:hover { background: var(--accent-soft); border-color: var(--field-hover); }
.info-btn:focus-visible { box-shadow: 0 0 0 3px var(--ring); }
.info-btn .ic { width: 16px; height: 16px; color: var(--accent-text); }
.scripts-wrap { flex: 1 1 100%; min-width: 0; display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.scripts-list { flex: 1 1 380px; min-width: 0; }
.scripts-detail { flex: 1 1 420px; min-width: 0; position: sticky; top: 24px; }
.fav-btn { height: 44px; flex: 0 0 auto; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--text); background: var(--field-bg); border: 1px solid var(--field-border); border-radius: 10px; cursor: pointer; outline: none; }
.fav-btn .star { width: 18px; height: 18px; fill: none; stroke: var(--fav); stroke-width: 1.9; stroke-linejoin: round; }
.fav-btn.has .star, .fav-btn[aria-pressed="true"] .star { fill: var(--fav); }
.fav-btn[aria-pressed="true"] { color: var(--fav-text); background: var(--fav-bg); border-color: var(--fav); }
.fav-btn .count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--muted); background: var(--accent-soft); }
.fav-btn[aria-pressed="true"] .count { color: var(--fav-text); background: rgba(242, 176, 30, .28); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { height: 30px; padding: 0 11px; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--text); background: var(--field-bg); border: 1px solid var(--field-border); border-radius: 999px; cursor: pointer; outline: none; }
.chip span:last-child { font-size: 11px; opacity: .75; }
.chip[aria-pressed="true"] { color: #fff; background: var(--grad-brand); border-color: transparent; }
.chip:focus-visible { box-shadow: 0 0 0 3px var(--ring); }
.slist { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; max-height: 62vh; overflow: auto; padding-right: 2px; }
.sitem { display: flex; align-items: flex-start; gap: 8px; padding: 10px; border: 1px solid transparent; border-radius: 12px; cursor: pointer; }
.sitem:hover { background: var(--accent-soft); }
.sitem.sel { border-color: var(--accent); background: var(--accent-soft); }
.sitem .star-btn { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.sitem .star-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; }
.sitem .star-btn.on { color: var(--fav); }
.sitem .star-btn.on svg { fill: var(--fav); }
.sitem-body { flex: 1; min-width: 0; }
.sitem-top { display: flex; align-items: baseline; gap: 8px; }
.sitem-title { font-size: 14px; font-weight: 700; }
.sitem-cat { font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.sitem-prev { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sitem .quick { width: 30px; height: 30px; }
.slist-empty { padding: 24px 8px; text-align: center; font-size: 13.5px; color: var(--muted); }
.detail-empty { min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.detail-empty .big-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.detail-empty strong { font-size: 15px; }
.detail-empty p { margin: 0; max-width: 300px; font-size: 13.5px; color: var(--muted); }
.detail-head { display: flex; align-items: flex-start; gap: 10px; }
.detail-head .t { font-size: 19px; font-weight: 700; }
.detail-head .c { font-size: 12px; color: var(--muted); }
.notice { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; font-size: 12.5px; font-weight: 600; color: var(--accent-text); background: var(--accent-soft); }
.notice .ic { width: 16px; height: 16px; }
.btn-mini { height: 32px; padding: 0 10px; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text); background: transparent; border: 1px solid var(--field-border); border-radius: 9px; cursor: pointer; }
.btn-mini .ic { width: 15px; height: 15px; }
.script-text { width: 100%; min-height: 240px; padding: 12px; resize: vertical; font: inherit; font-size: 14.5px; line-height: 1.55; color: var(--text); background: var(--preview-bg); border: 1px solid var(--border); border-radius: 12px; outline: none; }
.script-text:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }

/* ---------- responsivo ---------- */
@media (max-width: 1000px) {
  .result-card, .scripts-detail { flex: 1 1 100%; position: static; }
  .preview { max-height: none; }
}
@media (max-width: 900px) {
  .app { flex-direction: column; }
  .sidebar, [data-sb="closed"] .sidebar { position: sticky; top: 0; height: auto; width: 100%; flex: none; flex-direction: row; align-items: center; gap: 6px; padding: 8px 12px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .16); background-position: 70% 40%; }
  .sb-toggle { display: none; }
  .brand { min-height: 0; }
  .brand .logo-full, [data-sb="closed"] .brand .logo-full { display: none; }
  .brand .logo-compact, [data-sb="closed"] .brand .logo-compact { display: block; width: 73px; }
  .nav { margin: 0 0 0 auto; flex-direction: row; gap: 4px; }
  .nav-item { padding: 9px; }
  .nav-label { display: none; }
  .sidebar-foot { margin: 0; flex-direction: row; gap: 4px; }
  .theme-toggle { width: auto; padding: 9px; }
  .main { padding-top: 20px; }
}
@media (max-width: 640px) {
  .c3.wrap-sm, .c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search-row { flex-wrap: wrap; }
  .search-row .search-field { flex: 1 1 100%; }
  .search-row .btn, .search-row .btn-soft { flex: 1 1 0; }
  .actions { grid-template-columns: minmax(0, 1fr); }
  .btn-copy .kbd-light { display: none; }
  .hide-sm { display: none !important; }
}
@media (max-width: 480px) {
  .c2.wrap-xs, .c3.wrap-xs { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}