/* ============================================================================
   SALA DE INSPECAO HB — design system
   Conceito: atelie de certificacao/vault de inspecao para o CRM High Beauty.
   Metafora: cada fluxo e uma peca da colecao sob inspecao antes de ir a vitrine.
   Ref. artistica: art deco de luxo (linhas douradas, geometria) + control panel
   glassmorphico. Tipografia: Fraunces (display) + Plus Jakarta Sans (corpo) +
   IBM Plex Mono (evidencias/codigos). Paleta: veludo preto + dourado metalico;
   veredito usa esmeralda/bordo/grafite (reserva o dourado para a marca).
   ============================================================================ */

:root{
  --bg: #0a090c;
  --bg-1: #121016;
  --bg-2: #1a161d;
  --bg-3: #241f28;
  --bg-4: #2d2732;

  --border: rgba(201,162,75,0.16);
  --border-strong: rgba(201,162,75,0.4);
  --border-hair: rgba(243,236,221,0.08);

  --gold: #c9a24b;
  --gold-bright: #e8c874;
  --gold-rgb: 201,162,75;
  --gold-dim: rgba(201,162,75,0.5);

  --text: #f3ecdd;
  --text-2: #b7ae9f;
  --text-3: #8a8175;
  --text-4: #5c564d;

  --ok: #3fa579;
  --ok-bright: #57c496;
  --ok-rgb: 63,165,121;
  --bad: #b5454c;
  --bad-bright: #d9636a;
  --bad-rgb: 181,69,76;
  --pending: #8a92a8;
  --pending-rgb: 138,146,168;

  --font-display: 'Fraunces', 'Iowan Old Style', serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --space-section: 5rem;
  --space-element: 1.75rem;
  --space-inner: 1.25rem;

  --ease-smooth: cubic-bezier(0.16,1,0.3,1);
  --ease-bounce: cubic-bezier(0.34,1.56,0.64,1);
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 600ms;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(0,0,0,0.35);
  --shadow-md: 0 10px 30px rgba(0,0,0,0.4);
  --shadow-lg: 0 24px 70px rgba(0,0,0,0.55);
  --shadow-glow-gold: 0 0 36px rgba(var(--gold-rgb),0.22);
  --shadow-glow-ok: 0 0 28px rgba(var(--ok-rgb),0.28);
  --shadow-glow-bad: 0 0 28px rgba(var(--bad-rgb),0.28);

  --panel-rgb-1: 26,22,29;
  --panel-rgb-2: 18,16,22;
  --scrim-rgb: 6,5,7;
  --code-bg: #08070a;
  --selection-text: #ffffff;
  --grain-blend: overlay;
  --grain-opacity: 0.035;

  --sidebar-w: 300px;
  --topbar-h: 76px;
}

/* ---------- Tema claro — mesmo conceito (atelie de certificacao), luminancia
   invertida: pergaminho/creme + dourado bronze, sem perder o acabamento premium. ---------- */
html[data-theme="light"]{
  --bg: #f6f1e6;
  --bg-1: #fffcf5;
  --bg-2: #efe6d2;
  --bg-3: #e6d9bd;
  --bg-4: #d8c7a2;

  --border: rgba(139,107,36,0.22);
  --border-strong: rgba(139,107,36,0.45);
  --border-hair: rgba(42,35,24,0.1);

  --gold: #8a6a22;
  --gold-bright: #a9832f;
  --gold-rgb: 138,106,34;
  --gold-dim: rgba(138,106,34,0.55);

  --text: #241f16;
  --text-2: #55503f;
  --text-3: #7c7259;
  --text-4: #a6987a;

  --ok: #1f7a52;
  --ok-bright: #24925f;
  --ok-rgb: 31,122,82;
  --bad: #a1323a;
  --bad-bright: #bf424a;
  --bad-rgb: 161,50,58;
  --pending: #5c6478;
  --pending-rgb: 92,100,120;

  --shadow-sm: 0 2px 10px rgba(90,70,30,0.1);
  --shadow-md: 0 10px 28px rgba(80,62,26,0.12);
  --shadow-lg: 0 24px 60px rgba(60,45,20,0.16);

  --panel-rgb-1: 255,255,255;
  --panel-rgb-2: 240,230,205;
  --scrim-rgb: 40,32,18;
  --code-bg: #23201a;
  --selection-text: #fffef9;
  --grain-blend: multiply;
  --grain-opacity: 0.045;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
/* <button> nativo carrega appearance:auto (chrome do SO), que pode ignorar
   outline-color customizado no foco por teclado — reset explicito, widget
   100% autoral daqui pra frente (consistente com o resto do design system). */
button{ appearance:none; -webkit-appearance:none; font:inherit; color:inherit; background:none; border:none; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

body{
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

::selection{ background: rgba(var(--gold-rgb),0.35); color: var(--selection-text); }

/* Foco visivel (teclado) em todo elemento interativo — acessibilidade critica,
   nunca suprimida sem substituicao. Anel dourado on-brand, so aparece em
   navegacao por teclado (:focus-visible), nao em clique de mouse. */
:focus-visible{ outline-width: 2px; outline-style: solid; outline-color: var(--gold-bright); outline-offset: 2px; border-radius: 4px; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background: var(--bg-1); }
::-webkit-scrollbar-thumb{ background: var(--bg-4); border-radius: 10px; border:2px solid var(--bg-1); }
::-webkit-scrollbar-thumb:hover{ background: var(--gold-dim); }

a{ color: var(--gold); }

/* ---------- Atmosfera de fundo (veludo + orbs dourados + grain) ---------- */
.bg-atmosphere{
  position: fixed; inset:0; z-index:-2; pointer-events:none; overflow:hidden;
  background:
    radial-gradient(1200px 700px at 82% -8%, rgba(var(--gold-rgb),0.10), transparent 60%),
    radial-gradient(900px 600px at -10% 100%, rgba(var(--gold-rgb),0.07), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-1) 40%, var(--bg) 100%);
  transition: background var(--duration-slow) var(--ease-smooth);
}
.bg-grain{
  position: fixed; inset:0; z-index:-1; pointer-events:none; opacity: var(--grain-opacity); mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================================
   GATE — porta do vault (senha)
   ============================================================================ */
.gate{
  position: fixed; inset:0; z-index: 1000;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(700px 500px at 50% 30%, rgba(var(--gold-rgb),0.09), transparent 65%),
    #08070a;
  padding: 24px;
  transition: opacity var(--duration-slow) var(--ease-smooth), visibility var(--duration-slow);
}
.gate.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }

.gate-panel{
  width:100%; max-width: 420px;
  background: linear-gradient(180deg, rgba(26,22,29,0.9), rgba(18,16,22,0.9));
  border:1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 3rem 2.25rem 2.25rem;
  text-align:center;
  box-shadow: var(--shadow-lg), var(--shadow-glow-gold);
  position: relative;
  animation: gate-in 0.7s var(--ease-smooth) both;
}
@keyframes gate-in{ from{ opacity:0; transform: translateY(18px) scale(0.98); } to{ opacity:1; transform:none; } }

.gate-panel::before, .gate-panel::after{
  content:''; position:absolute; width:22px; height:22px; border: 1px solid var(--gold-dim);
}
.gate-panel::before{ top:10px; left:10px; border-right:none; border-bottom:none; }
.gate-panel::after{ bottom:10px; right:10px; border-left:none; border-top:none; }

.gate-seal{
  width:56px; height:56px; margin:0 auto 1.5rem; border-radius:50%;
  border:1.5px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  color: var(--gold);
  box-shadow: 0 0 0 5px rgba(var(--gold-rgb),0.08), var(--shadow-glow-gold);
}
.gate-seal svg{ width:26px; height:26px; }
.gate-input-icon svg{ width:16px; height:16px; }
.guide-toggle-icon svg{ width:15px; height:15px; }
.brand-mark svg{ width:17px; height:17px; }
.gate-eyebrow{ font-family: var(--font-mono); font-size:10.5px; letter-spacing:0.22em; text-transform:uppercase; color: var(--gold); margin-bottom: 10px; }
.gate-title{ font-family: var(--font-display); font-weight:600; font-size: 27px; letter-spacing:-0.01em; margin-bottom: 8px; }
.gate-sub{ font-size: 13.5px; color: var(--text-2); line-height:1.6; margin-bottom: 2rem; }

.gate-field{ text-align:left; margin-bottom: 1.1rem; }
.gate-field label{ display:block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing:0.12em; text-transform:uppercase; color: var(--text-3); margin-bottom: 8px; }
.gate-input-wrap{ position:relative; }
.gate-input{
  width:100%; background: var(--bg-3); border:1px solid var(--border-hair); color: var(--text);
  font-family: var(--font-mono); font-size: 15px; letter-spacing:0.06em; padding: 13px 44px 13px 16px;
  border-radius: var(--radius-sm); transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.gate-input:focus{ outline:none; border-color: var(--gold-dim); box-shadow: 0 0 0 3px rgba(var(--gold-rgb),0.14); }
.gate-input:focus-visible{ outline-width: 2px; outline-style: solid; outline-color: var(--gold-bright); outline-offset: 2px; }
.gate-input-icon{ position:absolute; right:14px; top:50%; transform:translateY(-50%); color: var(--text-4); pointer-events:none; }

.gate-btn{
  width:100%; margin-top: 0.4rem; padding: 14px; border-radius: var(--radius-sm); border:1px solid var(--gold);
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color:#1a1408; font-weight:700; font-size:14px; letter-spacing:0.02em; cursor:pointer;
  transition: transform var(--duration-fast) var(--ease-smooth), box-shadow var(--duration-fast);
  font-family: var(--font-body);
}
.gate-btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow-glow-gold); }
.gate-btn:active{ transform: translateY(0); }
.gate-btn[disabled]{ opacity:0.6; cursor:default; transform:none; box-shadow:none; }

.gate-error{
  display:none; margin-top:14px; padding:10px 12px; border-radius: var(--radius-sm);
  background: rgba(var(--bad-rgb),0.12); border:1px solid rgba(var(--bad-rgb),0.4);
  color: var(--bad-bright); font-size: 12.5px; text-align:left;
}
.gate-error.is-visible{ display:block; animation: shake 0.4s var(--ease-smooth); }
@keyframes shake{ 0%,100%{ transform:translateX(0);} 25%{ transform:translateX(-6px);} 75%{ transform:translateX(6px);} }

.gate-foot{ margin-top: 1.75rem; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-4); letter-spacing:0.05em; }

/* ============================================================================
   APP shell
   ============================================================================ */
.app{ opacity:0; transition: opacity var(--duration-slow) var(--ease-smooth); }
.app.is-visible{ opacity:1; }

/* ---------- Topbar ---------- */
.topbar{
  position: sticky; top:0; z-index: 200; height: var(--topbar-h);
  display:flex; align-items:center; gap:20px; padding: 0 28px;
  background: rgba(var(--panel-rgb-2),0.72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border); transition: background var(--duration-normal) var(--ease-smooth);
}
.topbar-accent{ position:fixed; top:0; left:0; width:100%; height:3px; z-index:250;
  background: linear-gradient(90deg, transparent, var(--gold), var(--gold-bright), var(--gold), transparent); }

.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{
  width:38px; height:38px; border-radius:50%; border:1.5px solid var(--gold);
  display:flex; align-items:center; justify-content:center; font-family: var(--font-display);
  font-weight:700; font-size:14px; color: var(--gold); flex-shrink:0;
  box-shadow: inset 0 0 0 3px rgba(var(--gold-rgb),0.08);
}
.brand-text{ line-height:1.15; }
.brand-title{ font-family: var(--font-display); font-weight:600; font-size:16.5px; letter-spacing:-0.01em; }
.brand-sub{ font-family: var(--font-mono); font-size:9.5px; letter-spacing:0.16em; text-transform:uppercase; color: var(--text-3); }

.menu-toggle{ display:none; }

.topbar-actions{ margin-left:auto; display:flex; align-items:center; gap:12px; }

.sync-pill{
  display:flex; align-items:center; gap:7px; font-family: var(--font-mono); font-size:10.5px;
  letter-spacing:0.04em; color: var(--text-3); padding:7px 12px; border-radius: var(--radius-pill);
  border:1px solid var(--border-hair); background: var(--bg-2); cursor:default; transition: all var(--duration-fast);
}
.sync-pill .dot{ width:6px; height:6px; border-radius:50%; background: var(--text-4); flex-shrink:0; }
.sync-pill.is-saving .dot{ background: var(--gold); animation: pulse-dot 1s ease-in-out infinite; }
.sync-pill.is-saved .dot{ background: var(--ok); }
.sync-pill.is-error{ cursor:pointer; border-color: rgba(var(--bad-rgb),0.4); color: var(--bad-bright); }
.sync-pill.is-error .dot{ background: var(--bad); }
.sync-refresh-icon{ display:none; width:12px; height:12px; }
.sync-pill.is-error .sync-refresh-icon{ display:inline-flex; }
@keyframes pulse-dot{ 0%,100%{ opacity:1; } 50%{ opacity:0.3; } }

.btn{
  display:inline-flex; align-items:center; gap:8px; font-family: var(--font-body); font-weight:600;
  font-size:13px; padding:10px 18px; border-radius: var(--radius-pill); cursor:pointer; border:1px solid transparent;
  transition: transform var(--duration-fast) var(--ease-smooth), box-shadow var(--duration-fast), border-color var(--duration-fast), background var(--duration-fast);
  white-space:nowrap;
}
.btn:active{ transform: scale(0.97); }
.btn-gold{ background: linear-gradient(135deg, var(--gold-bright), var(--gold)); color:#1a1408; }
.btn-gold:hover{ box-shadow: var(--shadow-glow-gold); transform: translateY(-1px); }
.btn-ghost{ background: transparent; border-color: var(--border-strong); color: var(--text); }
.btn-ghost:hover{ border-color: var(--gold); color: var(--gold-bright); }
.btn-icon{ padding:9px; border-radius:50%; background: var(--bg-2); border:1px solid var(--border-hair); color: var(--text-2); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition: color var(--duration-fast), border-color var(--duration-fast), background var(--duration-fast); }
.btn-icon:hover{ color: var(--gold-bright); border-color: var(--border-strong); }
.btn-icon svg{ width:16px; height:16px; flex-shrink:0; }
.btn svg{ width:15px; height:15px; flex-shrink:0; }

/* ============================================================================
   LAYOUT
   ============================================================================ */
.layout{ display:grid; grid-template-columns: var(--sidebar-w) 1fr; align-items:start; max-width:1360px; margin:0 auto; }

/* ---------- Sidebar ---------- */
.sidebar{
  position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h));
  border-right: 1px solid var(--border); padding: 26px 16px 26px 28px;
  display:flex; flex-direction:column; gap:16px;
}
.sidebar-scroll{ overflow-y:auto; flex:1; padding-right:6px; margin-right:-6px; }
.sidebar-eyebrow{ font-family: var(--font-mono); font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color: var(--text-3); padding: 0 4px 10px; }

.flow-nav-item{
  display:flex; align-items:center; gap:11px; padding:10px 10px; border-radius: var(--radius-sm);
  cursor:pointer; text-decoration:none; color:inherit; transition: background var(--duration-fast);
  border:1px solid transparent;
}
.flow-nav-item:hover{ background: var(--bg-2); }
.flow-nav-item.is-active{ background: var(--bg-2); border-color: var(--border); }

.flow-nav-status{ width:9px; height:9px; border-radius:50%; flex-shrink:0; background: var(--pending); box-shadow: 0 0 0 3px rgba(var(--pending-rgb),0.14); transition: all var(--duration-normal); }
.flow-nav-status.is-ok{ background: var(--ok); box-shadow: 0 0 0 3px rgba(var(--ok-rgb),0.16); }
.flow-nav-status.is-bad{ background: var(--bad); box-shadow: 0 0 0 3px rgba(var(--bad-rgb),0.16); }
.flow-nav-status.is-partial{ background: var(--gold); box-shadow: 0 0 0 3px rgba(var(--gold-rgb),0.16); }

.flow-nav-body{ flex:1; min-width:0; }
.flow-nav-top{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.flow-nav-title{ font-size:12.5px; font-weight:600; color: var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.flow-nav-count{ font-family: var(--font-mono); font-size:10px; color: var(--text-3); flex-shrink:0; }
.flow-nav-bar{ height:3px; border-radius:2px; background: var(--bg-3); margin-top:7px; overflow:hidden; }
.flow-nav-bar-fill{ height:100%; border-radius:2px; background: linear-gradient(90deg, var(--gold), var(--gold-bright)); width:0%; transition: width var(--duration-slow) var(--ease-smooth); }

.sidebar-foot{ padding-top:14px; border-top:1px solid var(--border); }

.next-pending-btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:13px 16px; border-radius: var(--radius-md); border:1px solid var(--border-strong);
  background: rgba(var(--gold-rgb),0.08); color: var(--gold-bright); font-weight:700; font-size:12.5px;
  cursor:pointer; transition: all var(--duration-fast) var(--ease-smooth); font-family: var(--font-body);
}
.next-pending-btn:hover{ background: rgba(var(--gold-rgb),0.15); box-shadow: var(--shadow-glow-gold); transform: translateY(-1px); }
.next-pending-btn svg{ width:16px; height:16px; flex-shrink:0; animation: nudge-right 1.8s ease-in-out infinite; }
.next-pending-btn[disabled]{ opacity:0.45; cursor:default; }
.next-pending-btn[disabled] svg{ animation:none; }
@keyframes nudge-right{ 0%,100%{ transform:translateX(0);} 50%{ transform:translateX(4px);} }

/* ---------- Main ---------- */
.main{ padding: 32px 40px 120px; min-width:0; }

/* ============================================================================
   HERO
   ============================================================================ */
.hero{
  display:grid; grid-template-columns: auto 1fr; gap: 3rem; align-items:center;
  padding: 2.75rem; border-radius: var(--radius-lg); border:1px solid var(--border);
  background: linear-gradient(155deg, rgba(var(--panel-rgb-1),0.7), rgba(var(--panel-rgb-2),0.55));
  position:relative; overflow:hidden; margin-bottom: 2.5rem;
}
.hero::before, .hero::after{ content:''; position:absolute; width:26px; height:26px; border: 1px solid var(--gold-dim); pointer-events:none; }
.hero::before{ top:14px; left:14px; border-right:none; border-bottom:none; }
.hero::after{ bottom:14px; right:14px; border-left:none; border-top:none; }

.hero-ring-wrap{ position:relative; width:172px; height:172px; flex-shrink:0; }
.hero-ring-wrap svg{ width:100%; height:100%; transform: rotate(-90deg); }
.hero-ring-track{ stroke: var(--bg-3); }
.hero-ring-ok{ stroke: var(--ok); stroke-linecap:round; transition: stroke-dasharray 1.1s var(--ease-smooth); filter: drop-shadow(0 0 6px rgba(var(--ok-rgb),0.5)); }
.hero-ring-bad{ stroke: var(--bad); stroke-linecap:round; transition: stroke-dasharray 1.1s var(--ease-smooth); filter: drop-shadow(0 0 6px rgba(var(--bad-rgb),0.5)); }
.hero-ring-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.hero-ring-pct{ font-family: var(--font-display); font-weight:700; font-size:34px; line-height:1; }
.hero-ring-lbl{ font-family: var(--font-mono); font-size:9px; letter-spacing:0.1em; text-transform:uppercase; color: var(--text-3); margin-top:6px; }

.hero-body{ min-width:0; }
.hero-eyebrow{ font-family: var(--font-mono); font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color: var(--gold); margin-bottom:10px; }
.hero-title{ font-family: var(--font-display); font-weight:600; font-size: clamp(24px, 2.6vw, 34px); letter-spacing:-0.01em; margin-bottom:10px; }
.hero-title em{ color: var(--gold-bright); font-style:italic; }
.hero-desc{ color: var(--text-2); font-size:14px; line-height:1.65; max-width:560px; margin-bottom: 1.6rem; }

.hero-stats{ display:flex; gap:10px; flex-wrap:wrap; }
.hero-stat{
  display:flex; align-items:center; gap:9px; padding:9px 14px; border-radius: var(--radius-pill);
  border:1px solid var(--border-hair); background: var(--bg-2); font-size:12.5px;
}
.hero-stat .n{ font-family: var(--font-mono); font-weight:700; font-size:14px; }
.hero-stat .l{ color: var(--text-3); }
.hero-stat.ok .n{ color: var(--ok-bright); }
.hero-stat.bad .n{ color: var(--bad-bright); }
.hero-stat.pending .n{ color: var(--pending); }
.hero-stat.total .n{ color: var(--gold-bright); }

/* ============================================================================
   GUIA DO INSPETOR (painel colapsavel)
   ============================================================================ */
.guide{ border:1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 2.5rem; overflow:hidden; background: rgba(var(--panel-rgb-1),0.4); }
.guide-toggle{
  width:100%; display:flex; align-items:center; gap:12px; padding:18px 24px; background:transparent; border:none;
  cursor:pointer; color: var(--text); font-family: var(--font-body); text-align:left;
}
.guide-toggle-icon{ width:30px; height:30px; border-radius:50%; border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center; color: var(--gold); flex-shrink:0; }
.guide-toggle-title{ font-weight:700; font-size:14px; }
.guide-toggle-sub{ font-size:11.5px; color: var(--text-3); margin-top:2px; }
.guide-toggle-chevron{ margin-left:auto; color: var(--text-3); transition: transform var(--duration-normal) var(--ease-smooth); flex-shrink:0; }
.guide.is-open .guide-toggle-chevron{ transform: rotate(180deg); }

.guide-body{ max-height:0; overflow:hidden; transition: max-height var(--duration-slow) var(--ease-smooth); }
.guide.is-open .guide-body{ max-height:1400px; }
.guide-body-inner{ padding: 4px 24px 26px; display:grid; grid-template-columns: 1.1fr 1fr; gap: 28px; }
@media (max-width: 780px){ .guide-body-inner{ grid-template-columns:1fr; } }

.guide-block-title{ font-family: var(--font-mono); font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color: var(--gold); margin-bottom:12px; }
.guide-row{ display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--border-hair); font-size:12.5px; }
.guide-row:last-child{ border-bottom:none; }
.guide-row .k{ color: var(--text-3); min-width:120px; flex-shrink:0; }
.guide-row .v{ color: var(--text-2); line-height:1.55; }
.guide-row .v code{ font-family: var(--font-mono); font-size:11.5px; background: var(--bg-3); padding:1px 6px; border-radius:4px; color: var(--gold-bright); }

.guide-steps{ counter-reset: gstep; list-style:none; }
.guide-steps li{ counter-increment: gstep; position:relative; padding:6px 0 6px 30px; font-size:12.5px; color: var(--text-2); line-height:1.55; }
.guide-steps li::before{ content: counter(gstep); position:absolute; left:0; top:6px; width:20px; height:20px; border-radius:50%; border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center; font-family: var(--font-mono); font-size:10px; color: var(--gold); }

.guide-navmap-group{ margin-bottom:14px; }
.guide-navmap-label{ font-family: var(--font-mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color: var(--text-3); margin-bottom:8px; }
.guide-navmap-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.guide-navmap-chip{ font-size:11.5px; padding:5px 11px; border-radius: var(--radius-pill); background: var(--bg-3); border:1px solid var(--border-hair); color: var(--text-2); }

/* ============================================================================
   FLOW SECTIONS
   ============================================================================ */
.flow-section{ margin-bottom: var(--space-section); scroll-margin-top: calc(var(--topbar-h) + 20px); opacity:0; transform: translateY(22px); transition: opacity 0.7s var(--ease-smooth), transform 0.7s var(--ease-smooth); }
.flow-section.is-in{ opacity:1; transform:none; }

.flow-header{ display:flex; align-items:flex-end; gap:20px; margin-bottom: 1.6rem; padding-bottom: 1.3rem; border-bottom:1px solid var(--border); }
.flow-header-num{ font-family: var(--font-display); font-weight:600; font-size:44px; line-height:0.8; color: transparent; -webkit-text-stroke: 1.4px var(--gold-dim); flex-shrink:0; }
.flow-header-body{ flex:1; min-width:0; }
.flow-header-eyebrow{ font-family: var(--font-mono); font-size:10.5px; letter-spacing:0.18em; text-transform:uppercase; color: var(--text-3); margin-bottom:6px; }
.flow-header-title{ font-family: var(--font-display); font-weight:600; font-size: clamp(19px, 1.9vw, 25px); letter-spacing:-0.01em; }
.flow-header-meta{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.flow-header-count{ font-family: var(--font-mono); font-size:12px; color: var(--text-3); white-space:nowrap; }
.flow-header-ring{ width:44px; height:44px; }
.flow-header-ring svg{ width:100%; height:100%; transform: rotate(-90deg); }
.flow-header-ring-track{ stroke: var(--bg-3); }
.flow-header-ring-fill{ stroke: var(--gold); stroke-linecap:round; transition: stroke-dasharray var(--duration-slow) var(--ease-smooth); }

/* ---------- Note callout ---------- */
.note{ display:flex; gap:13px; padding:16px 18px; border-radius: var(--radius-md); margin-bottom: 1.6rem; border:1px solid; font-size:13px; line-height:1.65; }
.note svg{ width:18px; height:18px; flex-shrink:0; margin-top:2px; }
.note-info{ background: rgba(var(--gold-rgb),0.06); border-color: rgba(var(--gold-rgb),0.3); color: var(--text-2); }
.note-info svg{ color: var(--gold); }
.note-warn{ background: rgba(232,180,74,0.06); border-color: rgba(232,180,74,0.35); color: var(--text-2); }
.note-warn svg{ color: #e8b44a; }
html[data-theme="light"] .note-warn{ background: rgba(184,132,10,0.1); border-color: rgba(184,132,10,0.4); }
html[data-theme="light"] .note-warn svg{ color: #9c6f0a; }
.note-danger{ background: rgba(var(--bad-rgb),0.09); border-color: rgba(var(--bad-rgb),0.4); color: var(--text-2); }
.note-danger svg{ color: var(--bad-bright); }
.note strong{ color: var(--text); }
.note code{ font-family: var(--font-mono); font-size:12px; background: rgba(0,0,0,0.25); padding:1px 6px; border-radius:4px; color: var(--gold-bright); }

/* ============================================================================
   ITEM CARD
   ============================================================================ */
.items-grid{ display:flex; flex-direction:column; gap: 1.1rem; }

.item-card{
  position:relative; border-radius: var(--radius-lg); border:1px solid var(--border);
  background: linear-gradient(160deg, rgba(var(--panel-rgb-1),0.55), rgba(var(--panel-rgb-2),0.5));
  padding: 1.7rem 1.9rem 1.6rem; transition: border-color var(--duration-normal), box-shadow var(--duration-normal);
}
.item-card::before{
  content:''; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:0 3px 3px 0;
  background: var(--bg-3); transition: background var(--duration-normal), box-shadow var(--duration-normal);
}
.item-card.v-aprovado::before{ background: var(--ok); box-shadow: 0 0 14px rgba(var(--ok-rgb),0.55); }
.item-card.v-reprovado::before{ background: var(--bad); box-shadow: 0 0 14px rgba(var(--bad-rgb),0.55); }
.item-card.v-aprovado{ border-color: rgba(var(--ok-rgb),0.28); }
.item-card.v-reprovado{ border-color: rgba(var(--bad-rgb),0.32); }
.item-card:hover{ border-color: var(--border-strong); }
.item-card.is-highlight{ animation: highlight-pulse 1.6s var(--ease-smooth); }
@keyframes highlight-pulse{
  0%{ box-shadow: 0 0 0 0 rgba(var(--gold-rgb),0.55); border-color: var(--gold-dim); }
  55%{ box-shadow: 0 0 0 14px rgba(var(--gold-rgb),0); }
  100%{ box-shadow: 0 0 0 0 rgba(var(--gold-rgb),0); }
}

.item-head{ display:flex; align-items:flex-start; gap:14px; margin-bottom: 1.3rem; }
.item-idchip{ font-family: var(--font-mono); font-size:10.5px; font-weight:600; color: var(--gold); background: rgba(var(--gold-rgb),0.1); border:1px solid rgba(var(--gold-rgb),0.28); padding:4px 9px; border-radius: var(--radius-pill); flex-shrink:0; margin-top:2px; white-space:nowrap; }
.item-title{ font-family: var(--font-display); font-weight:600; font-size:18px; letter-spacing:-0.005em; line-height:1.35; flex:1; }

.item-statuschip{ display:none; align-items:center; gap:6px; font-family: var(--font-mono); font-size:10px; letter-spacing:0.06em; text-transform:uppercase; padding:5px 10px; border-radius: var(--radius-pill); flex-shrink:0; white-space:nowrap; }
.item-statuschip svg{ width:11px; height:11px; }
.item-card.v-aprovado .item-statuschip{ display:flex; background: rgba(var(--ok-rgb),0.14); color: var(--ok-bright); }
.item-card.v-reprovado .item-statuschip{ display:flex; background: rgba(var(--bad-rgb),0.14); color: var(--bad-bright); }

.block{ margin-bottom: 1.2rem; }
.block-title{ display:flex; align-items:center; gap:8px; font-family: var(--font-mono); font-size:10.5px; letter-spacing:0.13em; text-transform:uppercase; color: var(--text-3); margin-bottom:10px; }
.block-title svg{ width:13px; height:13px; }
.block-fazer .block-title{ color: var(--gold); }
.block-esperado .block-title{ color: var(--ok-bright); }
.block-falhar .block-title{ color: var(--bad-bright); }

.fazer-list{ list-style:none; display:flex; flex-direction:column; gap:9px; }
.fazer-step{ display:flex; gap:11px; font-size:13.5px; line-height:1.62; color: var(--text-2); }
.step-n{ flex-shrink:0; width:24px; height:24px; border-radius:50%; border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center; font-family: var(--font-mono); font-size:10.5px; color: var(--gold); margin-top:1px; }
.fazer-step strong{ color: var(--text); font-weight:600; }
.fazer-step code{ font-family: var(--font-mono); font-size:12px; background: var(--bg-3); padding:1px 6px; border-radius:4px; color: var(--gold-bright); }

.bullet-list{ list-style:none; display:flex; flex-direction:column; gap:9px; }
.bullet-item{ position:relative; padding-left:19px; font-size:13.5px; line-height:1.62; color: var(--text-2); }
.bullet-item::before{ content:''; position:absolute; left:1px; top:6.5px; width:7px; height:7px; background: var(--gold-dim); transform: rotate(45deg); }
.block-esperado .bullet-item::before{ background: rgba(var(--ok-rgb),0.65); }
.block-falhar .bullet-item::before{ background: rgba(var(--bad-rgb),0.65); }
.bullet-item strong{ color: var(--text); font-weight:600; }
.bullet-item code{ font-family: var(--font-mono); font-size:12px; background: var(--bg-3); padding:1px 6px; border-radius:4px; color: var(--gold-bright); }

/* ---------- Verdict control ---------- */
.verdict-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top: 1.5rem; padding-top: 1.4rem; border-top:1px solid var(--border-hair); }
.verdict-label{ font-family: var(--font-mono); font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; color: var(--text-3); }
.verdict-seg{ display:inline-flex; background: var(--bg-3); border-radius: var(--radius-pill); padding:4px; gap:3px; border:1px solid var(--border-hair); }
.verdict-btn{
  display:flex; align-items:center; gap:7px; padding:9px 16px; border-radius: var(--radius-pill); border:none;
  background:transparent; color: var(--text-3); font-family: var(--font-body); font-weight:700; font-size:12px;
  cursor:pointer; transition: all var(--duration-fast) var(--ease-smooth);
}
.verdict-btn svg{ width:14px; height:14px; }
.verdict-btn:hover{ color: var(--text); }
.verdict-btn[data-v="pendente"].is-active{ background: var(--bg-4); color: var(--pending); box-shadow: inset 0 0 0 1px rgba(var(--pending-rgb),0.4); }
.verdict-btn[data-v="aprovado"].is-active{ background: rgba(var(--ok-rgb),0.16); color: var(--ok-bright); box-shadow: inset 0 0 0 1px rgba(var(--ok-rgb),0.5), 0 0 16px rgba(var(--ok-rgb),0.25); animation: stamp-in 0.4s var(--ease-bounce); }
.verdict-btn[data-v="reprovado"].is-active{ background: rgba(var(--bad-rgb),0.16); color: var(--bad-bright); box-shadow: inset 0 0 0 1px rgba(var(--bad-rgb),0.5), 0 0 16px rgba(var(--bad-rgb),0.25); animation: stamp-in 0.4s var(--ease-bounce); }
@keyframes stamp-in{ 0%{ transform: scale(1.22) rotate(-3deg); } 60%{ transform: scale(0.97) rotate(1deg); } 100%{ transform: scale(1) rotate(0); } }

.note-field{ margin-top: 1.1rem; max-height:0; overflow:hidden; opacity:0; transition: max-height var(--duration-slow) var(--ease-smooth), opacity var(--duration-normal); }
.note-field.is-open{ max-height:220px; opacity:1; }
.note-field-label{ display:flex; align-items:center; gap:7px; font-family: var(--font-mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:8px; }
.note-field-label .req{ color: var(--bad-bright); }
.note-field-label .opt{ color: var(--text-4); text-transform:none; letter-spacing:0; font-family: var(--font-body); }
.note-field textarea{
  width:100%; min-height:76px; resize:vertical; background: var(--bg-3); border:1px solid var(--border-hair);
  border-radius: var(--radius-sm); padding:12px 14px; color: var(--text); font-family: var(--font-body); font-size:13.5px;
  line-height:1.55; transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.note-field textarea:focus{ outline:none; border-color: var(--border-strong); }
.note-field textarea:focus-visible{ outline-width: 2px; outline-style: solid; outline-color: var(--gold-bright); outline-offset: 2px; }
.note-field.is-required textarea{ border-color: rgba(var(--bad-rgb),0.4); }
.note-field.is-required.is-empty textarea{ box-shadow: 0 0 0 3px rgba(var(--bad-rgb),0.12); }
.note-field-hint{ font-size:11px; color: var(--bad-bright); margin-top:6px; display:none; }
.note-field.is-required.is-empty .note-field-hint{ display:block; }

/* ============================================================================
   FAB (mobile — proximo pendente)
   ============================================================================ */
.float-next{
  position: fixed; right:20px; bottom:20px; z-index:150; width:58px; height:58px; border-radius:50%;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold)); color:#1a1408; border:none;
  display:none; align-items:center; justify-content:center; box-shadow: var(--shadow-lg), var(--shadow-glow-gold);
  cursor:pointer; opacity:0; transform: translateY(14px) scale(0.9); pointer-events:none;
  transition: opacity var(--duration-normal) var(--ease-smooth), transform var(--duration-normal) var(--ease-smooth);
}
.float-next.is-shown{ opacity:1; transform:none; pointer-events:auto; }
.float-next svg{ width:22px; height:22px; }
.float-next[disabled]{ opacity:0.5; }

/* ============================================================================
   MODAL — relatorio
   ============================================================================ */
.modal-overlay{
  position:fixed; inset:0; z-index:500; background: rgba(var(--scrim-rgb),0.72); backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; visibility:hidden;
  transition: opacity var(--duration-normal) var(--ease-smooth), visibility var(--duration-normal);
}
.modal-overlay.is-open{ opacity:1; visibility:visible; }
.modal{
  width:100%; max-width:720px; max-height:86vh; display:flex; flex-direction:column;
  background: linear-gradient(165deg, var(--bg-2), var(--bg-1)); border:1px solid var(--border-strong); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); transform: translateY(16px) scale(0.98); transition: transform var(--duration-normal) var(--ease-smooth);
}
.modal-overlay.is-open .modal{ transform:none; }
.modal-header{ display:flex; align-items:flex-start; gap:14px; padding:24px 26px; border-bottom:1px solid var(--border); }
.modal-title{ font-family: var(--font-display); font-weight:600; font-size:20px; }
.modal-sub{ font-size:12px; color: var(--text-3); margin-top:5px; font-family: var(--font-mono); }
.modal-close{ margin-left:auto; }
.modal-body{ padding:22px 26px; overflow-y:auto; flex:1; }

.report-warn{ display:flex; gap:10px; padding:12px 14px; border-radius: var(--radius-sm); background: rgba(232,180,74,0.08); border:1px solid rgba(232,180,74,0.35); font-size:12.5px; color: var(--text-2); margin-bottom:16px; line-height:1.55; }
.report-warn svg{ width:16px; height:16px; color:#e8b44a; flex-shrink:0; margin-top:1px; }
html[data-theme="light"] .report-warn{ background: rgba(184,132,10,0.12); border-color: rgba(184,132,10,0.4); }
html[data-theme="light"] .report-warn svg{ color: #9c6f0a; }

.report-empty{ text-align:center; padding: 2.5rem 1rem; color: var(--text-3); }
.report-empty svg{ width:40px; height:40px; color: var(--ok); margin-bottom:14px; }
.report-empty-title{ font-family: var(--font-display); font-size:18px; color: var(--text); margin-bottom:6px; }

.report-pre{
  font-family: var(--font-mono); font-size:12px; line-height:1.75; white-space:pre-wrap; word-break:break-word;
  background: var(--code-bg); border:1px solid var(--border); border-radius: var(--radius-md); padding:20px 22px; color: #d7d2c4;
}
/* report-pre e sempre um bloco escuro tipo "terminal" (contraste de evidencia),
   mesmo no tema claro — por isso usa cores fixas, nao as variaveis de tema. */
.report-pre .h1{ color: #e8c874; font-weight:700; }
.report-pre .h2{ color: #c9a24b; }
.report-pre .bad{ color: #e0838a; }
.report-pre .pending{ color: #a3aac0; }
.report-pre .dim{ color: #756d5e; }

.modal-actions{ display:flex; gap:10px; padding:20px 26px; border-top:1px solid var(--border); flex-wrap:wrap; }
.modal-actions .btn{ flex:1; justify-content:center; }

/* ============================================================================
   DRAWER (mobile sidebar)
   ============================================================================ */
.drawer-overlay{ position:fixed; inset:0; z-index:400; background: rgba(var(--scrim-rgb),0.68); opacity:0; visibility:hidden; transition: opacity var(--duration-normal), visibility var(--duration-normal); }
.drawer-overlay.is-open{ opacity:1; visibility:visible; }
.drawer{
  position:fixed; top:0; left:0; bottom:0; width:min(320px, 84vw); z-index:401; background: var(--bg-1);
  border-right:1px solid var(--border-strong); transform: translateX(-100%); transition: transform var(--duration-normal) var(--ease-smooth);
  display:flex; flex-direction:column; padding: 20px 16px 20px 20px;
}
.drawer-overlay.is-open .drawer{ transform:none; }
.drawer-head{ display:flex; align-items:center; gap:10px; padding-bottom:16px; margin-bottom:10px; border-bottom:1px solid var(--border); }

/* ============================================================================
   TOAST
   ============================================================================ */
.toast-stack{ position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:600; display:flex; flex-direction:column; gap:8px; align-items:center; }
.toast{
  display:flex; align-items:center; gap:9px; padding:11px 18px; border-radius: var(--radius-pill);
  background: var(--bg-3); border:1px solid var(--border-strong); font-size:12.5px; box-shadow: var(--shadow-md);
  animation: toast-in 0.35s var(--ease-bounce);
}
.toast svg{ width:15px; height:15px; color: var(--ok-bright); flex-shrink:0; }
@keyframes toast-in{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform:none; } }

/* ============================================================================
   FOOTER
   ============================================================================ */
.site-footer{ max-width:1360px; margin:0 auto; padding: 40px 40px 60px calc(var(--sidebar-w) + 40px); color: var(--text-4); font-family: var(--font-mono); font-size:11px; letter-spacing:0.03em; }

/* ============================================================================
   STAGGER util
   ============================================================================ */
.stagger > *{ opacity:0; transform: translateY(14px); animation: fade-up 0.6s var(--ease-smooth) forwards; }
.stagger > *:nth-child(1){ animation-delay: 0ms; }
.stagger > *:nth-child(2){ animation-delay: 90ms; }
.stagger > *:nth-child(3){ animation-delay: 180ms; }
@keyframes fade-up{ to{ opacity:1; transform:none; } }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 1040px){
  .layout{ grid-template-columns: 1fr; }
  .sidebar{ display:none; }
  .site-footer{ padding-left:40px; }
  .float-next{ display:flex; }
  .menu-toggle{ display:flex; }
}

@media (max-width: 720px){
  .topbar{ padding:0 16px; gap:12px; }
  .brand-sub{ display:none; }
  .main{ padding: 22px 16px 100px; }
  .hero{ grid-template-columns: 1fr; text-align:center; padding: 2rem 1.4rem; gap:1.6rem; }
  .hero-ring-wrap{ margin:0 auto; }
  .hero-stats{ justify-content:center; }
  .hero-desc{ margin-left:auto; margin-right:auto; }
  .guide-body-inner{ padding: 4px 16px 20px; }
  .flow-header{ flex-wrap:wrap; }
  .flow-header-num{ font-size:32px; }
  .item-card{ padding: 1.4rem 1.2rem 1.3rem; }
  .item-head{ flex-wrap:wrap; }
  .verdict-row{ flex-direction:column; align-items:stretch; }
  .verdict-seg{ justify-content:space-between; }
  .verdict-btn{ flex:1; justify-content:center; padding:9px 10px; }
  .verdict-btn span{ display:none; }
  .site-footer{ padding: 30px 16px 50px; }
  .sync-pill span.txt{ display:none; }
  .topbar-actions .btn span{ display:none; }
  .topbar-actions .btn{ padding:10px; border-radius:50%; }
}

/* ============================================================================
   ICON BUTTON copy feedback
   ============================================================================ */
.btn.is-copied{ background: rgba(var(--ok-rgb),0.18); border-color: rgba(var(--ok-rgb),0.5); color: var(--ok-bright); }