/* ===== FUNDAÇÃO – VARIÁVEIS E RESET ===== */
    :root {
      --bg-dark: #02040a;
      --ink: #eaf6ff;
      --text-main: #f0f3f9;
      --text-muted: #8b95a5;
      --font-main: 'Inter', sans-serif;

      --kob-voice-primary: #f97316;      /* padrão Kodux */
      --kob-voice-secondary: #b978ff;
      --kob-voice-accent: #ffffff;
      --kob-voice-bg-soft: color-mix(in srgb, var(--kob-voice-primary) 12%, transparent);
      --border: color-mix(in srgb, var(--kob-voice-primary) 30%, rgba(255,255,255,0.08));
      --panel-blur: blur(20px) saturate(180%);
      --radius-lg: 24px;
      --radius-md: 16px;
      --radius-sm: 12px;
      --z-base: 0;
      --z-content: 100;
      --z-widget: 500;
      --z-overlay: 1000;
      --z-system: 5000;
      --orb-speed: 7.8s;
    }

    /* 12 ARQUÉTIPOS – definições de cor (via data-arch) */
    body[data-arch="atlas"]   { --kob-voice-primary: #38bdf8; --kob-voice-secondary: #1e3a8a; }
    body[data-arch="nova"]    { --kob-voice-primary: #f72585; --kob-voice-secondary: #7209b7; }
    body[data-arch="vitalis"] { --kob-voice-primary: #22c55e; --kob-voice-secondary: #166534; }
    body[data-arch="pulse"]   { --kob-voice-primary: #ec4899; --kob-voice-secondary: #831843; }
    body[data-arch="artemis"] { --kob-voice-primary: #a855f7; --kob-voice-secondary: #5b21b6; }
    body[data-arch="serena"]  { --kob-voice-primary: #38bdf8; --kob-voice-secondary: #1e3a8a; }
    body[data-arch="kaos"]    { --kob-voice-primary: #facc15; --kob-voice-secondary: #b45309; }
    body[data-arch="genus"]   { --kob-voice-primary: #e5e7eb; --kob-voice-secondary: #4b5563; }
    body[data-arch="lumine"]  { --kob-voice-primary: #fde047; --kob-voice-secondary: #ca8a04; }
    body[data-arch="solus"]   { --kob-voice-primary: #0ea5e9; --kob-voice-secondary: #0369a1; }
    body[data-arch="rhea"]    { --kob-voice-primary: #22c55e; --kob-voice-secondary: #166534; }
    body[data-arch="aion"]    { --kob-voice-primary: #4f46e5; --kob-voice-secondary: #3730a3; }
    /* aliases para compatibilidade */
    body[data-arch="kodux"]   { --kob-voice-primary: #f97316; --kob-voice-secondary: #c2410c; }

    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      background-color: var(--bg-dark);
      background-image: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--kob-voice-primary) 15%, transparent) 0%, transparent 60%),
                        linear-gradient(180deg, #02040a 0%, #060913 100%);
      color: var(--text-main);
      font-family: var(--font-main);
      min-height: 100vh;
      overflow-x: hidden;
    overflow-y: auto;
      transition: background 0.8s ease;
    }
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); }
    ::-webkit-scrollbar-thumb { background: var(--kob-voice-primary); border-radius: 3px; }

    /* ===== MOTOR 78K (cards principais) ===== */
    #root { min-height: 100vh; width: 100%; position: relative; z-index: var(--z-base); }
    .container {
      max-width: 900px; margin: 0 auto; padding: 40px 20px 120px;
      display: flex; flex-direction: column; gap: 30px;
    }
    .fusion-card {
      background: rgba(10,14,23,0.65); backdrop-filter: var(--panel-blur);
      border: 1px solid var(--border); border-radius: var(--radius-lg);
      padding: 32px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.8);
      position: relative; overflow: hidden;
    }
    .fusion-card::before {
      content: ''; position: absolute; top:0; left:0; right:0; height:1px;
      background: linear-gradient(90deg, transparent, var(--kob-voice-primary), transparent);
      opacity: 0.5;
    }
    .header-78k { display: flex; align-items: center; gap:20px; margin-bottom:24px; }
    .logo-orb {
      width:56px; height:56px; border-radius:50%;
      background: radial-gradient(circle at 30%30%, #fff, var(--kob-voice-primary));
      box-shadow:0 0 25px color-mix(in srgb, var(--kob-voice-primary) 50%, transparent);
      animation: orb-pulse 3s infinite alternate ease-in-out;
    }
    @keyframes orb-pulse { 0%{transform:scale(0.95);filter:brightness(0.9);} 100%{transform:scale(1.05);filter:brightness(1.2);} }
    .title-block h1 {
      font-family:'Montserrat',sans-serif; font-weight:900; font-size:24px; text-transform:uppercase;
      background: linear-gradient(to right, #fff, var(--text-muted)); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
      margin:0 0 4px;
    }
    .title-block p { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--kob-voice-primary); letter-spacing:2px; }
    textarea {
      width:100%; height:160px; background:rgba(0,0,0,0.4); border:1px solid rgba(255,255,255,0.06);
      border-radius:var(--radius-md); padding:18px; color:var(--text-main);
      font-family:'JetBrains Mono',monospace; font-size:14px; line-height:1.6; resize:vertical;
      outline:none; transition:all 0.3s ease;
    }
    textarea:focus { border-color:var(--kob-voice-primary); box-shadow:0 0 0 3px var(--kob-voice-bg-soft); }
    .controls-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }
    @media (max-width:600px){ .controls-grid{grid-template-columns:1fr;} }
    .input-group { display:flex; flex-direction:column; gap:8px; }
    .input-group label { font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted); }
    select {
      width:100%; background:rgba(0,0,0,0.4); border:1px solid rgba(255,255,255,0.06);
      color:var(--text-main); padding:14px; border-radius:var(--radius-sm);
      font-weight:600; outline:none; cursor:pointer;
    }
    select:focus { border-color:var(--kob-voice-primary); }
    .checkbox-wrapper {
      display:flex; align-items:center; gap:10px; height:100%; padding-top:18px; cursor:pointer;
      user-select:none;
    }
    .checkbox-wrapper input[type="checkbox"] {
      appearance:none; width:20px; height:20px; border:2px solid var(--border);
      border-radius:6px; background:rgba(0,0,0,0.3); cursor:pointer; transition:all 0.2s;
    }
    .checkbox-wrapper input:checked { background:var(--kob-voice-primary); border-color:var(--kob-voice-primary); }
    .checkbox-wrapper input:checked::after { content:'✓'; display:flex; justify-content:center; color:#000; font-weight:900; }
    .btn-generate {
      width:100%; padding:16px; margin-top:24px; background:var(--kob-voice-primary);
      color:#02040a; border:none; border-radius:var(--radius-sm); font-family:'Montserrat',sans-serif;
      font-weight:900; font-size:14px; text-transform:uppercase; letter-spacing:2px; cursor:pointer;
      transition:all 0.3s ease;
    }
    .btn-generate:hover { transform:translateY(-2px); box-shadow:0 10px 25px color-mix(in srgb, var(--kob-voice-primary) 40%, transparent); }
    .output-area { display:flex; flex-direction:column; gap:16px; }
    .para-block {
      background:linear-gradient(90deg, var(--kob-voice-bg-soft), rgba(255,255,255,0.01));
      border-left:3px solid var(--kob-voice-primary); padding:20px 24px;
      border-radius:0 var(--radius-md) var(--radius-md) 0; font-size:15px; line-height:1.7;
      opacity:0; transform:translateX(-20px); animation:slideFadeIn 0.5s ease-out forwards;
    }
    @keyframes slideFadeIn { to { opacity:1; transform:translateX(0); } }
    .arch-tag {
      font-family:'JetBrains Mono',monospace; font-weight:800; color:var(--kob-voice-primary);
      text-transform:uppercase; font-size:11px; letter-spacing:2px; display:inline-block;
      margin-bottom:8px; background:rgba(0,0,0,0.3); padding:4px 10px; border-radius:6px;
      border:1px solid var(--border);
    }
    .empty-state { text-align:center; padding:40px 20px; color:var(--text-muted); border:1px dashed var(--border); border-radius:var(--radius-md); background:rgba(0,0,0,0.2); }
    .status-bar { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-muted); text-align:center; text-transform:uppercase; letter-spacing:3px; margin-top:10px; }

    /* ===== HUD FLUTUANTE UNIFICADO (do Motor 78K) bottom:30px; left:50%; transform:translate3d(-50%,0,0);===== */
    .symbol-bar {
      position: fixed; 
      z-index:9999; display:flex; align-items:center; gap:8px; padding:10px;
      background:rgba(10,14,23,0.85); backdrop-filter:var(--panel-blur); border:1px solid var(--border);
      border-radius:30px; box-shadow:0 10px 30px rgba(0,0,0,0.5); user-select:none; touch-action:none;
      transition:opacity 0.35s ease, transform 0.1s ease-out;
    }
    .symbol-bar.idle { opacity:0.15; transform:translate3d(-50%,0,0) scale(0.92); }
    .symbol-bar:hover { opacity:1 !important; transform:translate3d(-50%,0,0) scale(1) !important; }
    .drag-handle {
      display:flex; align-items:center; justify-content:center; width:30px; height:44px;
      cursor:grab; color:var(--text-muted); opacity:0.5; transition:opacity 0.2s;
    }
    .drag-handle::before { content:'⋮⋮'; font-size:18px; font-weight:bold; letter-spacing:-2px; }
    .drag-handle:hover, .symbol-bar.dragging .drag-handle { opacity:1; color:var(--kob-voice-primary); }
    .symbol-bar.dragging .drag-handle { cursor:grabbing; }
    .symbol-btn {
      width:24px; height:24px; border-radius:22px; border:1px solid rgba(255,255,255,0.08);
      background:rgba(0,0,0,0.4); color:var(--text-main); font-size:16px; cursor:pointer;
      display:flex; align-items:center; justify-content:center; transition:all 0.2s ease;
      flex-shrink:0;
    }
    .symbol-btn:hover {
      background:var(--kob-voice-bg-soft); border-color:var(--kob-voice-primary);
      color:var(--kob-voice-primary); transform:translateY(-2px);
    }
    #btn-arch { padding:0; }
    .orb-microphone-container { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
    .tts-orb-mini { width:28px; height:28px; position:relative; }
    .orb { width:100%; height:100%; border-radius:50%; display:grid; place-items:center; }
    .orb-core {
      width:78%; height:78%; border-radius:50%;
      background:radial-gradient(circle at 30%30%, var(--kob-voice-accent) 0%, rgba(255,255,255,0.1) 10%, transparent 60%),
                 radial-gradient(circle at 70%70%, var(--kob-voice-primary) 0%, var(--kob-voice-secondary) 100%);
      box-shadow:0 0 15px var(--kob-voice-primary);
      animation: orbSpin var(--orb-speed) linear infinite;
    }
    @keyframes orbSpin { to { transform:rotate(360deg); } }
    .speaking .orb-core { animation: orbSpin 2s linear infinite, orbPulse 0.5s ease-in-out infinite alternate; }
    @keyframes orbPulse { from { transform:scale(1); } to { transform:scale(1.15); } }
    .hud-info {
      font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:700; padding:0 16px 0 8px;
      border-left:1px solid rgba(255,255,255,0.1); color:var(--kob-voice-primary); letter-spacing:1px;
      white-space:nowrap;
    }

    /* ===== SEÇÕES DA PÁGINA KOB-NEPHESH ===== */
    .hero, .manifesto, .portal-section, .archetypes-section, .law-footer {
      position:relative; z-index:10; max-width:1400px; margin:0 auto; padding:4rem 2rem;
    }
    .hero { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; border-bottom:1px solid var(--border); }
    .hero-sigil {
      font-family:'JetBrains Mono',monospace; font-size:clamp(0.65rem,1.2vw,0.85rem);
      color:var(--kob-voice-primary); opacity:0.7; letter-spacing:0.3em; margin-bottom:2rem;
      white-space:pre; line-height:1.6; animation:pulse-soft 4s ease-in-out infinite;
    }
    .hero-title {
      font-family:'Montserrat',sans-serif; font-size:clamp(2.2rem,6vw,5rem); font-weight:900;
      background:linear-gradient(135deg, var(--kob-voice-primary) 0%, var(--kob-voice-secondary) 40%, var(--kob-voice-primary) 70%);
      -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
      animation:shimmer 6s ease-in-out infinite; letter-spacing:0.1em; line-height:1.1; margin-bottom:0.5rem;
    }
    .hero-sub { font-family:'JetBrains Mono',monospace; font-size:clamp(0.75rem,1.5vw,0.95rem); color:var(--kob-voice-secondary); letter-spacing:0.5em; text-transform:uppercase; margin-bottom:2rem; opacity:0.8; }
    .hero-law { font-size:clamp(1rem,2vw,1.3rem); font-weight:300; color:var(--ink); max-width:700px; line-height:1.8; margin-bottom:2.5rem; }
    .hero-law strong { color:var(--kob-voice-primary); font-weight:600; }
    .hero-seal { font-size:2rem; letter-spacing:0.3em; animation:pulseX 20s linear infinite; }
    .section-header { text-align:center; margin-bottom:3rem; }
    .section-label { font-family:'JetBrains Mono',monospace; font-size:0.75rem; letter-spacing:0.5em; color:var(--kob-voice-secondary); text-transform:uppercase; margin-bottom:0.75rem; opacity:0.7; }
    .section-title { font-family:'Montserrat',sans-serif; font-size:clamp(1.4rem,3vw,2.2rem); font-weight:700; color:var(--kob-voice-primary); letter-spacing:0.05em; }

    .manifesto-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:1.5rem; margin-top:2rem; }
    .manifest-card { background:var(--panel-bg); border:1px solid var(--border); border-radius:12px; padding:1.5rem; position:relative; overflow:hidden; backdrop-filter:blur(10px); }
    .manifest-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, var(--kob-voice-primary), transparent); opacity:0.6; }
    .manifest-card-key { font-family:'JetBrains Mono',monospace; font-size:0.7rem; color:var(--kob-voice-secondary); letter-spacing:0.3em; margin-bottom:0.5rem; opacity:0.7; }
    .manifest-card-num { font-family:'Montserrat',sans-serif; font-size:2.5rem; color:var(--kob-voice-primary); opacity:0.3; position:absolute; top:0.8rem; right:1rem; line-height:1; }
    .manifest-card p { font-size:0.95rem; line-height:1.7; color:var(--ink); font-weight:300; }

    .portal-section { background:linear-gradient(180deg, transparent, rgba(10,10,32,0.8), transparent); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
    .portal-table-wrapper { max-width:900px; margin:2rem auto 0; overflow-x:auto; }
    .portal-table { width:100%; border-collapse:collapse; font-family:'JetBrains Mono',monospace; }
    .portal-table th { font-size:0.75rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--kob-voice-secondary); padding:1rem 1.5rem; text-align:left; border-bottom:1px solid color-mix(in srgb, var(--kob-voice-secondary) 20%, transparent); opacity:0.7; }
    .portal-table td { padding:0.9rem 1.5rem; border-bottom:1px solid rgba(255,255,255,0.03); font-size:0.88rem; color:var(--ink); }
    .portal-table tr:hover td { background:rgba(255,255,255,0.02); }
    .portal-ascii { font-size:1.1rem; color:var(--kob-voice-primary); white-space:nowrap; }
    .portal-name { color:var(--kob-voice-secondary); font-weight:bold; letter-spacing:0.2em; }

    .archetypes-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(340px,1fr)); gap:2rem; margin-top:3rem; }
    .arch-card {
      background:var(--panel-bg); backdrop-filter:blur(10px); border:1px solid var(--border);
      border-radius:20px; overflow:hidden; transition:transform 0.3s ease, box-shadow 0.3s ease;
      --card-accent: var(--kob-voice-primary);
    }
    .arch-card:hover { transform:translateY(-6px) scale(1.01); box-shadow:0 20px 60px rgba(0,0,0,0.6), 0 0 40px color-mix(in srgb, var(--card-accent) 30%, transparent); border-color:var(--card-accent); }
    .arch-card-header { padding:2rem 2rem 1.5rem; display:flex; align-items:flex-start; gap:1.2rem; position:relative; cursor:pointer; user-select:none; }
    .arch-card-header::after { content:''; position:absolute; bottom:0; left:2rem; right:2rem; height:1px; background:linear-gradient(90deg, transparent, var(--card-accent), transparent); }
    .arch-symbol { font-size:2.8rem; filter:drop-shadow(0 0 12px var(--card-accent)); flex-shrink:0; }
    .arch-name { font-family:'Montserrat',sans-serif; font-size:1.5rem; font-weight:700; color:var(--card-accent); letter-spacing:0.06em; line-height:1.1; }
    .arch-role { font-family:'JetBrains Mono',monospace; font-size:0.72rem; color:var(--ink); opacity:0.7; margin-top:0.3rem; letter-spacing:0.2em; }
    .indicator { margin-left:auto; color:var(--card-accent); font-size:1.2rem; transition:transform 0.3s ease; }
    .arch-card.is-collapsed .arch-body { height:0 !important; padding-top:0 !important; padding-bottom:0 !important; opacity:0 !important; overflow:hidden !important; }
    .arch-card.is-open .indicator { transform:rotate(180deg); }
    .arch-body { transition:height 0.34s cubic-bezier(.2,.9,.25,1), opacity 0.25s ease, padding 0.28s; overflow:hidden; padding:0 2rem 2rem; }
    .arch-desc { font-size:0.92rem; line-height:1.75; color:var(--ink); font-weight:300; margin-bottom:1.5rem; }
    .arch-visual { width:100%; height:160px; border-radius:10px; background:rgba(0,0,0,0.3); border:1px solid rgba(255,255,255,0.06); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; margin-bottom:1.5rem; }
    .arch-visual::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at center, color-mix(in srgb, var(--card-accent) 15%, transparent) 0%, transparent 70%); }
    .arch-visual-inner { position:relative; z-index:1; text-align:center; }
    .arch-visual-symbol { font-size:4.5rem; filter:drop-shadow(0 0 30px var(--card-accent)); animation:float 6s ease-in-out infinite; display:block; }
    .arch-visual-label { font-family:'JetBrains Mono',monospace; font-size:0.6rem; letter-spacing:0.4em; color:var(--card-accent); opacity:0.5; margin-top:0.5rem; text-transform:uppercase; }
    .arch-code-wrapper { display:flex; align-items:center; justify-content:space-between; background:rgba(0,0,0,0.3); border-radius:30px; padding:0.5rem 1rem; margin-bottom:1.5rem; border:1px solid rgba(255,255,255,0.05); }
    .arch-code { font-family:'JetBrains Mono',monospace; font-size:0.9rem; color:var(--card-accent); letter-spacing:0.1em; }
    .arch-code-btn { background:transparent; border:1px solid var(--card-accent); border-radius:20px; padding:0.3rem 1rem; color:var(--card-accent); font-family:'JetBrains Mono',monospace; font-size:0.7rem; cursor:pointer; transition:all 0.3s ease; text-transform:uppercase; }
    .arch-code-btn:hover { background:color-mix(in srgb, var(--card-accent) 10%, transparent); box-shadow:0 0 10px var(--card-accent); }
    .arch-prompt-wrapper { margin-top:1.5rem; }
    .arch-prompt-label { font-family:'JetBrains Mono',monospace; font-size:0.65rem; letter-spacing:0.35em; color:var(--card-accent); opacity:0.6; margin-bottom:0.5rem; text-transform:uppercase; }
    .arch-prompt { background:rgba(0,0,0,0.4); border:1px solid rgba(255,255,255,0.08); border-left:2px solid var(--card-accent); border-radius:8px; padding:1rem; font-size:0.88rem; color:var(--ink); line-height:1.65; max-height:130px; overflow-y:auto; margin-bottom:0.75rem; }
    .copy-prompt-btn { display:flex; align-items:center; gap:0.5rem; background:transparent; border:1px solid var(--card-accent); border-radius:6px; padding:0.5rem 1rem; color:var(--card-accent); font-family:'JetBrains Mono',monospace; font-size:0.72rem; letter-spacing:0.2em; cursor:pointer; transition:all 0.3s; width:100%; justify-content:center; }
    .copy-prompt-btn:hover { background:color-mix(in srgb, var(--card-accent) 10%, transparent); box-shadow:0 0 15px var(--card-accent); }
    .copy-prompt-btn.copied, .arch-code-btn.copied { border-color:#50dc78; color:#50dc78; background:rgba(80,220,120,0.08); }

    .law-footer { text-align:center; border-top:1px solid var(--border); }
    .divider { display:flex; align-items:center; gap:1rem; max-width:600px; margin:2rem auto; opacity:0.3; }
    .divider-line { flex:1; height:1px; background:var(--kob-voice-primary); }
    .divider-sym { color:var(--kob-voice-primary); font-size:1.2rem; }
    .law-text { font-family:'Montserrat',sans-serif; font-size:clamp(0.9rem,2vw,1.4rem); color:var(--kob-voice-primary); letter-spacing:0.1em; line-height:2; margin-bottom:1.5rem; opacity:0.9; }
    .law-center { font-size:clamp(0.8rem,1.5vw,1rem); color:var(--ink); letter-spacing:0.3em; opacity:0.5; text-transform:uppercase; }

    @keyframes shimmer { 0%,100%{background-position:0% 50%;} 50%{background-position:100% 50%;} }
    @keyframes pulse-soft { 0%,100%{opacity:0.5;} 50%{opacity:0.9;} }
    @keyframes float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }

    #toast-container { position:fixed; bottom:100px; left:50%; transform:translateX(-50%); z-index:10000; display:flex; flex-direction:column; gap:10px; pointer-events:none; }
    .toast { background:var(--kob-voice-primary); color:#02040a; padding:12px 24px; border-radius:30px; font-family:'JetBrains Mono',monospace; font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:1px; box-shadow:0 10px 25px rgba(0,0,0,0.5); animation:toastIn 0.3s forwards, toastOut 0.3s 2.7s forwards; }
    @keyframes toastIn { from{opacity:0; transform:translateY(20px) scale(0.9);} to{opacity:1; transform:translateY(0) scale(1);} }
    @keyframes toastOut { to{opacity:0; transform:translateY(-20px);} }