/* Kepha Studio — dark premium cockpit · OS KEPHA-STUDIO-MISSION-CONSOLE-LIVE-PREVIEW-MVP-001
   Tema canônico STRAUX "grafite quente" + âmbar ·
   OS KEPHA-STUDIO-CANONICAL-UX-IMPLEMENTAR-DESIGN-ORIGINAL-STRAUX-AMBAR-001
   OS /squad-elite HOTFIX VISUAL P0 (2026-08-16): Design System canônico real
   (KEPHA_DESIGN_SYSTEM_CANONICAL.zip, sha256 cebb8950…) aplicado — tokens
   REPRODUZIDOS (não aproximados) de tokens/colors.css, typography.css,
   spacing.css, radii.css, effects.css do artefato. Aliases antigos (--bg2,
   --panel, --panel2, --line, --txt, --dim, --acc2, --ok, --err, --chip,
   --rad) mantidos por compatibilidade com centenas de regras já existentes
   em app.css/intelligent_home.css/auth_gate.css/executive_dashboard.css —
   agora apontam para os valores EXATOS da escala canônica (--bg-0.._bg-inset,
   --gold-*, --fg-*, --line-*, --ok/danger-*) em vez de valores inventados. */
:root{
  /* ---- escala canônica -- OS-KEPHA-MATERIALIZE-CANONICAL-DESIGN-SYSTEM-
     001 (2026-08-29): estes nomes (--bg-0/--gold-500/--fg-1/etc.) eram a
     ÚNICA fonte de valor visual do Studio; a partir desta OS eles só
     REPASSAM os tokens canônicos (--k-*, kepha-tokens.css, importado ANTES
     deste arquivo em index.html) -- nunca mais um valor hex próprio aqui.
     Mantidos como nomes (em vez de reescrever every var(--bg-0) em ~15
     arquivos de componente) para migrar o Studio inteiro pro Design
     System canônico numa única mudança, sem risco de esquecer um arquivo
     -- ver KEPHA-DESIGN-SYSTEM.md, seção "Por que existem 2 cópias" pro
     resto do raciocínio de integração. */
  --bg-0:var(--k-bg); --bg-1:var(--k-surface); --bg-2:var(--k-bg-sidebar); --bg-3:var(--k-card); --bg-inset:var(--k-terminal);
  --gold-100:var(--k-gold-bright); --gold-500:var(--k-gold); --gold-700:var(--k-gold-deep); --gold-ink:#20180a;
  --gold-wash:var(--k-gold-dim); --gold-line:var(--k-border-gold);
  --fg-1:var(--k-text); --fg-2:var(--k-text-2); --fg-3:var(--k-text-3); --fg-4:var(--k-text-3); --fg-5:var(--k-text-3);
  --ok-500:var(--k-success); --ok-wash:rgba(125,219,99,.13);
  --warn-500:var(--k-gold);
  --danger-500:var(--k-danger); --danger-wash:var(--k-danger-dim); --danger-line:rgba(229,72,77,.35);
  --line-1:rgba(255,255,255,.05); --line-2:var(--k-border); --line-3:var(--k-border-gold);
  --surface-app:var(--bg-0); --surface-chrome:var(--bg-2); --surface-card:var(--bg-3);
  --surface-terminal:var(--bg-inset);
  --radius-xs:3px; --radius-sm:var(--k-r-sm); --radius-md:var(--k-r-md); --radius-lg:var(--k-r-lg); --radius-pill:var(--k-r-pill);
  --border-hairline:1px solid var(--line-2); --border-gold:1px solid var(--gold-line);
  --border-dashed:1px dashed var(--line-3);
  --marker-active:inset 2px 0 0 var(--gold-500);
  --glow-live:var(--k-glow);
  --wash-gold-panel:linear-gradient(160deg,var(--k-gold-dim),transparent);
  --hatch:repeating-linear-gradient(135deg,rgba(255,255,255,.02) 0 8px,transparent 8px 16px);
  --ease-ui:cubic-bezier(.2,.6,.2,1); --dur-fast:120ms; --dur-ui:180ms;
  --rail-nav:210px; --rail-exec:340px;
  --text-hero:800 46px/1.02 var(--font); --text-h1:800 26px/1.1 var(--font);
  --text-h2:700 15px/1.3 var(--font); --text-row:700 13px/1.35 var(--font);
  --text-body-md:400 13.5px/1.55 var(--font); --text-body-sm:400 12px/1.5 var(--font);
  --text-label:700 10px/1 var(--font-mono); --text-meta:400 9.5px/1.4 var(--font-mono);
  --tracking-hero:-.035em; --tracking-h1:-.025em; --tracking-label:.12em;

  /* ---- aliases de compatibilidade (mesmo nome, valor canônico exato) ---- */
  --bg:var(--bg-0); --bg2:var(--bg-2); --panel:var(--bg-3); --panel2:var(--bg-3);
  --line:var(--line-2); --txt:var(--fg-1); --dim:var(--fg-3);
  --acc:var(--gold-500); --acc2:var(--gold-100);
  --ok:var(--ok-500); --warn:var(--warn-500); --err:var(--danger-500);
  --chip:var(--bg-inset);
  --rad:var(--radius-lg); --rad-md:var(--radius-md);
  --font:var(--k-font,'Archivo','Segoe UI',system-ui,-apple-system,sans-serif);
  --font-mono:var(--k-mono,'JetBrains Mono',ui-monospace,'SFMono-Regular',Consolas,monospace);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--txt);font-family:var(--font);font-size:14px;height:100vh;display:flex;flex-direction:column;overflow:hidden}

/* topbar (cockpit técnico / modo avançado) */
#topbar{display:flex;align-items:center;gap:16px;padding:10px 18px;background:var(--bg2);border-bottom:1px solid var(--line);flex-wrap:wrap}
.brand{font-size:16px;display:flex;align-items:center;gap:8px}
.logo{color:var(--acc);font-size:20px}
.tag{font-size:11px;color:var(--dim);border:1px solid var(--line);border-radius:20px;padding:1px 8px}
.top-status{display:flex;gap:8px;flex:1}
.top-actions{display:flex;gap:8px;flex-wrap:wrap}

.badge{background:var(--chip);border:1px solid var(--line);border-radius:20px;padding:3px 10px;font-size:12px;color:var(--dim)}
.badge.ok{color:var(--ok);border-color:var(--ok)}
.badge.err{color:var(--err);border-color:var(--err)}
.badge.di{color:var(--warn);border-color:var(--warn)}
/* OS-KEPHA-STUDIO-HUMAN-EXPLAINABLE-ORGANIZATION-AGENTS-UX-001: badges de
   nível de tela -- avisam o Owner que a página é mais técnica/diagnóstica/
   legada antes de ele tentar interpretá-la como uma tela executiva comum. */
.badge.advanced{color:var(--acc);border-color:var(--acc);margin-left:8px;vertical-align:middle}
.badge.diagnostic{color:var(--warn);border-color:var(--warn);margin-left:8px;vertical-align:middle}
.badge.legacy{color:var(--dim);border-color:var(--line-3,var(--line));margin-left:8px;vertical-align:middle}

.btn{background:transparent;color:var(--fg-2);border:1px solid var(--line-3);border-radius:var(--rad-md);padding:7px 14px;cursor:pointer;font-size:13px;font-family:var(--font);font-weight:700;transition:background var(--dur-fast) var(--ease-ui),color var(--dur-fast) var(--ease-ui),border-color var(--dur-fast) var(--ease-ui)}
.btn:hover{border-color:var(--gold-line);color:var(--fg-1)}
.btn.primary{background:var(--gold-500);color:var(--gold-ink);border:1px solid transparent;font-weight:800}
.btn.primary:hover{background:var(--gold-100)}
.btn.primary:active{background:var(--gold-700)}
.btn.warn{border-color:var(--danger-line);color:var(--danger-500)}
.btn.small{padding:4px 10px;font-size:12px}
.btn.wide{width:100%;margin-top:10px}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* layout */
#layout{display:flex;flex:1;min-height:0}
#sidebar{width:210px;background:var(--bg2);border-right:1px solid var(--line);padding:12px 8px;overflow-y:auto}
.nav-item{padding:9px 12px;border-radius:var(--rad-md);cursor:pointer;color:var(--fg-3);margin-bottom:2px;font-weight:400}
.nav-item:hover{background:var(--bg-3);color:var(--fg-1)}
.nav-item.active{background:var(--gold-wash);color:var(--gold-100);font-weight:700;box-shadow:var(--marker-active)}
#sidebar-list{margin-top:12px;font-size:12px}
.side-entry{padding:6px 10px;border-radius:6px;cursor:pointer;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-entry:hover,.side-entry.sel{background:var(--panel2);color:var(--txt)}
.side-entry .st{font-size:10px;color:var(--acc)}

#workspace{flex:1;display:grid;grid-template-columns:minmax(380px,44%) 1fr;min-height:0}
#console{padding:14px;overflow-y:auto;border-right:1px solid var(--line)}
#live{display:flex;flex-direction:column;min-height:0;background:var(--bg2)}

h2{font-size:15px;margin-bottom:10px;display:flex;gap:10px;align-items:center}
h3{font-size:13px;color:var(--dim);margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}
.chip{background:var(--chip);border-radius:6px;padding:2px 8px;font-size:11px;color:var(--acc)}
.chip.strong{color:var(--ok);font-weight:700}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);padding:14px;margin-bottom:12px}
label{display:block;font-size:12px;color:var(--dim);margin:8px 0 4px}
input,select,textarea{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:var(--rad-md);color:var(--txt);padding:8px 10px;font-size:13px;font-family:var(--font)}
textarea{resize:vertical;font-family:var(--font-mono)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc)}
.row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.ui-row{display:flex;align-items:center;gap:12px;margin-top:10px}
.check{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--txt)}
.check input{width:auto}
.paths{margin-top:8px;color:var(--dim)}
code{background:var(--bg);padding:1px 5px;border-radius:4px;font-size:11px}

.di-card{background:var(--bg-inset);border:var(--border-gold);border-radius:var(--radius-md);padding:10px;margin-top:8px;font-size:12px}
.hidden{display:none!important}

/* gates */
.gate{display:flex;justify-content:space-between;padding:5px 8px;border-radius:6px;font-size:12px}
.gate:nth-child(odd){background:var(--bg)}
.gate .g-ok{color:var(--ok)} .gate .g-block{color:var(--err)} .gate .g-na{color:var(--dim)}

/* timeline */
.timeline{list-style:none;font-size:12px}
.timeline li{padding:4px 0 4px 18px;position:relative;border-left:2px solid var(--line);margin-left:6px}
.timeline li::before{content:'';position:absolute;left:-6px;top:9px;width:9px;height:9px;border-radius:50%;background:var(--acc)}
.timeline li b{color:var(--txt)} .timeline li span{color:var(--dim)}

.verdicts{display:flex;flex-direction:column;gap:6px;font-size:13px}
#logs{max-height:220px;overflow:auto;font-size:11px;color:var(--dim);background:var(--bg);border-radius:8px;padding:8px;white-space:pre-wrap;font-family:var(--font-mono)}
summary{cursor:pointer;font-size:13px;color:var(--dim);text-transform:uppercase;letter-spacing:.5px}

/* tabs */
#tabs{display:flex;border-bottom:1px solid var(--line);background:var(--panel)}
.tab{padding:10px 18px;cursor:pointer;color:var(--dim);font-size:13px;border-bottom:2px solid transparent}
.tab:hover{color:var(--txt)}
.tab.active{color:var(--acc);border-bottom-color:var(--acc)}
.tabpane{display:none;flex:1;overflow:auto;padding:14px;min-height:0}
.tabpane.active{display:flex;flex-direction:column}
.pane-actions{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.pane-actions select{width:auto;min-width:180px}

#preview-frame{flex:1;width:100%;min-height:400px;border:1px solid var(--line);border-radius:var(--rad);background:#fff}
.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--dim);text-align:center;font-size:14px;border:1px dashed var(--line);border-radius:var(--rad);padding:40px;gap:8px}
.jsonview{flex:1;overflow:auto;background:var(--bg);border-radius:var(--rad);padding:12px;font-size:12px;color:#e8c97a;white-space:pre-wrap;font-family:var(--font-mono)}

.ev-item{display:flex;justify-content:space-between;padding:7px 10px;border-bottom:1px solid var(--line);font-size:12px}
.ev-item small{color:var(--dim)}

/* modal */
.modal{position:fixed;inset:0;background:rgba(8,6,4,.75);display:flex;align-items:center;justify-content:center;z-index:50}
.modal-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);padding:20px;width:min(640px,92vw);display:flex;flex-direction:column;gap:10px}
.hint{font-size:12px;color:var(--dim)}
.modal-actions{display:flex;justify-content:flex-end;gap:10px}

#toast{position:fixed;bottom:22px;right:22px;background:var(--bg-3);border:var(--border-gold);border-radius:var(--radius-md);padding:12px 18px;font-size:13px;z-index:99;max-width:420px}
#toast.err{border:1px solid var(--danger-line);color:var(--danger-500)}
#toast.ok{border-color:var(--gold-line)}

@media (max-width:1100px){#workspace{grid-template-columns:1fr};#live{min-height:420px}}