<script>
  import { onMount } from 'svelte';

  let hovered = null;
  let activeModal = null;
  let mounted = false;

  onMount(() => { setTimeout(() => { mounted = true; }, 80); });

  const C = {
    bg: '#0A0A0A', bgAlt: '#111111', surface: '#161616',
    card: '#131313', cardHover: '#1A1A1A',
    accent: '#E8C547', green: '#4A8B6E',
    text: '#F5F0E8', muted: '#8A8578', dim: '#5A5650',
    border: '#222220', borderLight: '#2E2E2C',
  };

  const MODALS = {
    quien: {
      title: '¿Quién gasta o recibe?', tech: 'CLASIFICADOR INSTITUCIONAL',
      everyday: 'Es como preguntar "¿quién en la familia maneja plata?". Papá tiene su sueldo, mamá maneja el negocio, el abuelo cobra su renta. Cada uno es una "entidad" distinta con su propio presupuesto.',
      budget: 'El clasificador institucional cataloga a todas las entidades del sector público: ministerios, gobernaciones, municipios, empresas públicas, universidades. Cada una tiene un código único y un presupuesto asignado.',
      example: 'Ejemplo: El Ministerio de Educación (código 040) y el Gobierno Autónomo de La Paz (código 126) son entidades distintas, cada una con sus propios ingresos y gastos.',
      color: '#F5F0E8',
    },
    rubros: {
      title: '¿Qué tipo de ingreso es?', tech: 'CLASIFICADOR DE RECURSOS POR RUBROS',
      everyday: 'María gana un sueldo de su trabajo, cobra alquiler de un cuartito, y un amigo le prestó plata. Son tres tipos distintos de ingreso: laboral, patrimonial, y crédito.',
      budget: 'En el presupuesto, el Estado recibe ingresos tributarios (impuestos = el "sueldo"), regalías por explotación de recursos (= el "alquiler"), y créditos internacionales (= el "préstamo"). El rubro te dice qué naturaleza tiene cada ingreso.',
      example: 'Ejemplo: Los Bs 2.400M que Bolivia recibe por IDH son un rubro distinto a los Bs 800M de crédito del BID, aunque ambos financien al mismo ministerio.',
      color: '#E8C547',
    },
    fuentes: {
      title: '¿Quién pone la plata?', tech: 'CLASIFICADOR DE FUENTES DE FINANCIAMIENTO',
      everyday: 'María sabe que su sueldo se lo paga la empresa TechCorp, el alquiler se lo paga su inquilino Juan, y el préstamo se lo hizo el Banco Nacional. Son las fuentes: quién firma el cheque.',
      budget: 'Las fuentes son los bolsillos específicos: el TGN (Tesoro General de la Nación), recursos propios de cada entidad, crédito externo del BID o Banco Mundial, o donaciones de cooperación.',
      example: 'Ejemplo: Un crédito del BID y uno del Banco Mundial son el mismo rubro (crédito externo) pero distinta fuente. La fuente dice quién exactamente pone la plata.',
      color: '#E8C547',
    },
    objeto: {
      title: '¿En qué se gasta concretamente?', tech: 'CLASIFICADOR POR OBJETO DEL GASTO',
      everyday: 'Cuando María gasta, compra cosas concretas: arroz, paga la luz, le paga al albañil. Cada compra es un "objeto" distinto — algo tangible que se puede listar.',
      budget: 'El Objeto del Gasto es exactamente eso: sueldos, consultorías, materiales de escritorio, combustible, medicamentos. Es la lista del supermercado del Estado.',
      example: 'Ejemplo: El grupo 10000 "Servicios Personales" incluye sueldos y aguinaldos. El 20000 "Servicios No Personales" incluye consultorías y alquileres.',
      color: '#4A8B6E',
    },
    sector: {
      title: '¿A qué sector de la economía va?', tech: 'CLASIFICADOR POR SECTORES ECONÓMICOS',
      everyday: 'Si María contrata un albañil, esa plata va al sector construcción. Si compra medicina, va al sector salud. No importa qué compró — importa qué parte de la economía mueve.',
      budget: 'Este clasificador mide el impacto económico: cuánto va a infraestructura, cuánto a servicios, cuánto a industria. Permite evaluar cómo las decisiones fiscales afectan a cada sector.',
      example: 'Ejemplo: Un hospital nuevo es "construcción" en Objeto del Gasto pero "salud" en Sector Económico. Misma plata, dos lentes distintos.',
      color: '#4A8B6E',
    },
    finalidad: {
      title: '¿Para qué se gasta?', tech: 'CLASIFICADOR POR FINALIDAD Y FUNCIÓN',
      everyday: 'María compró arroz (objeto), pero ¿para qué? Para alimentar a su familia. Compró cemento: para tener casa. El "para qué" es el objetivo final, no el insumo.',
      budget: 'Este clasificador agrupa por propósito: educación, defensa, salud, protección social. No importa si se gastó en sueldos o en cemento — lo que importa es el fin.',
      example: 'Ejemplo: El sueldo de un profesor y la construcción de una escuela son objetos de gasto distintos, pero ambos tienen la misma finalidad: Educación.',
      color: '#4A8B6E',
    },
    donde: {
      title: '¿Dónde se gasta?', tech: 'CLASIFICADOR GEOGRÁFICO',
      everyday: 'María manda plata a su mamá en Cochabamba y paga el alquiler en La Paz. No es lo mismo gastar en la ciudad que en el área rural, en Santa Cruz que en Potosí.',
      budget: 'La dimensión geográfica permite ver cómo se distribuyen los recursos en el territorio: por departamento, municipio o región. Revela las prioridades territoriales del Estado.',
      example: 'Ejemplo: Del presupuesto de Educación, ¿cuánto va a La Paz vs. Beni? Este clasificador responde esa pregunta.',
      color: '#4A8B6E',
    },
  };

  const WIDGETS_INGRESOS = [
    { id: 'rubros', q: '¿Qué tipo de ingreso?', d: 'Impuestos, regalías, ventas, créditos — la naturaleza de cada ingreso', t: 'Recursos por rubros' },
    { id: 'fuentes', q: '¿Quién pone la plata?', d: 'TGN, crédito externo, donaciones — de qué bolsillo sale', t: 'Fuentes de financiamiento' },
  ];

  const WIDGETS_EN_QUE = [
    { id: 'objeto', q: 'Objeto del gasto', d: 'Sueldos, consultorías, materiales — la lista concreta', t: 'Objeto del gasto' },
    { id: 'sector', q: 'Sector económico', d: 'Industria, construcción, servicios — a qué sector va', t: 'Sectores económicos' },
  ];

  const WIDGETS_BOTTOM = [
    { id: 'finalidad', q: '¿Para qué se gasta?', d: 'Educación, salud, defensa — el objetivo final', t: 'Finalidad y función' },
    { id: 'donde', q: '¿Dónde se gasta?', d: 'Departamentos, municipios — distribución territorial', t: 'Geográfico' },
  ];

  $: modal = activeModal ? MODALS[activeModal] : null;

  function openModal(e, id) {
    e.stopPropagation();
    activeModal = id;
  }
  function closeModal() { activeModal = null; }
</script>

<div class="page" class:mounted>

  <!-- Header -->
  <header>
    <div class="header-left">
      <a href="/" class="back-link">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
      </a>
      <div class="live-dot"></div>
      <span class="header-brand">PRESUPUESTO ABIERTO</span>
    </div>
    <span class="header-right">Explorar</span>
  </header>

  <main>

    <!-- Title -->
    <div class="page-title anim" style="--d:0ms">
      <h1>Elige cómo explorar el presupuesto</h1>
      <p>Cada clasificador es una forma distinta de ver la misma información. Haz clic en <span class="help-inline">?</span> para entender qué es cada uno.</p>
    </div>

    <!-- ═══ ¿QUIÉN? ═══ -->
    <div class="anim" style="--d:100ms">
      <div class="group">
        <div class="group-accent" style="--c: {C.text}"></div>
        <div class="group-header">
          <div class="group-icon" style="--c: {C.text}">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={C.text} stroke-width="1.5" stroke-linecap="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
          </div>
          <div>
            <div class="group-label" style="color:{C.text}">¿QUIÉN?</div>
            <div class="group-sub">La entidad que gasta o recibe</div>
          </div>
        </div>

        <div
          class="widget-card widget-h"
          class:wh={hovered === 'quien'}
          on:mouseenter={() => hovered = 'quien'}
          on:mouseleave={() => hovered = null}
          role="button" tabindex="0"
        >
          <div class="widget-h-left">
            <div class="widget-q" style="font-size:16px">Instituciones públicas</div>
            <div class="widget-desc">Ministerios, gobernaciones, municipios, empresas públicas, universidades</div>
          </div>
          <div class="widget-h-right">
            <span class="widget-tech">INSTITUCIONAL</span>
            <button class="help-btn help-sm" on:click={(e) => openModal(e, 'quien')}>?</button>
            <span class="widget-arrow" class:arrow-show={hovered === 'quien'}>→</span>
          </div>
        </div>
      </div>
    </div>

    <!-- ═══ INGRESOS + GASTOS ═══ -->
    <div class="main-grid">

      <!-- INGRESOS -->
      <div class="anim col-stretch" style="--d:200ms">
        <div class="group group-stretch">
          <div class="group-accent" style="--c: {C.accent}"></div>
          <div class="group-header">
            <div class="group-icon" style="--c: {C.accent}">
              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke={C.accent} stroke-width="2" stroke-linecap="round"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
            </div>
            <div>
              <div class="group-label" style="color:{C.accent}">INGRESOS</div>
              <div class="group-sub">¿De dónde viene la plata?</div>
            </div>
          </div>

          <div class="widgets-stretch">
            {#each WIDGETS_INGRESOS as w}
              <div
                class="widget-card widget-grow"
                class:wh={hovered === w.id}
                on:mouseenter={() => hovered = w.id}
                on:mouseleave={() => hovered = null}
                role="button" tabindex="0"
              >
                <div class="widget-top">
                  <h4 class="widget-q">{w.q}</h4>
                  <button class="help-btn" on:click={(e) => openModal(e, w.id)}>?</button>
                </div>
                <p class="widget-desc widget-desc-grow">{w.d}</p>
                <div class="widget-footer">
                  <span class="widget-tech">{w.t}</span>
                  <span class="widget-arrow" class:arrow-show={hovered === w.id}>→</span>
                </div>
                <div class="widget-glow" style="background:radial-gradient(circle at 50% 50%,{C.accent}06,transparent 70%)"></div>
              </div>
            {/each}
          </div>
        </div>
      </div>

      <!-- GASTOS -->
      <div class="anim col-stretch" style="--d:320ms">
        <div class="group">
          <div class="group-accent" style="--c: {C.green}"></div>
          <div class="group-header">
            <div class="group-icon" style="--c: {C.green}">
              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke={C.green} stroke-width="2" stroke-linecap="round"><path d="M12 5v14M5 12l7 7 7-7"/></svg>
            </div>
            <div>
              <div class="group-label" style="color:{C.green}">GASTOS</div>
              <div class="group-sub">¿Cómo se gasta la plata?</div>
            </div>
          </div>

          <div class="group-widgets">

            <!-- ¿En qué? sub-group -->
            <div class="sub-group">
              <div class="sub-group-accent" style="--c: {C.green}"></div>
              <div class="sub-group-header">
                <div class="sub-group-left">
                  <div class="sub-group-icon" style="--c: {C.green}">
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke={C.green} stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>
                  </div>
                  <div>
                    <div class="sub-group-label">¿En qué se gasta?</div>
                    <div class="sub-group-tag" style="color:{C.green}90">DOS CLASIFICADORES</div>
                  </div>
                </div>
                <button class="help-btn help-sm" on:click={(e) => openModal(e, 'objeto')}>?</button>
              </div>

              <div class="sub-grid">
                {#each WIDGETS_EN_QUE as w}
                  <div
                    class="widget-card sub-card"
                    class:wh={hovered === w.id}
                    on:mouseenter={() => hovered = w.id}
                    on:mouseleave={() => hovered = null}
                    role="button" tabindex="0"
                  >
                    <div class="widget-top">
                      <h4 class="widget-q sub-q">{w.q}</h4>
                      <button class="help-btn help-xs" on:click={(e) => openModal(e, w.id)}>?</button>
                    </div>
                    <p class="widget-desc sub-desc">{w.d}</p>
                    <div class="widget-footer sub-footer">
                      <span class="widget-tech sub-tech">{w.t}</span>
                      <span class="widget-arrow" class:arrow-show={hovered === w.id}>→</span>
                    </div>
                    <div class="widget-glow" style="background:radial-gradient(circle at 50% 50%,{C.green}06,transparent 70%)"></div>
                  </div>
                {/each}
              </div>
            </div>

            <!-- Bottom row -->
            <div class="bottom-grid">
              {#each WIDGETS_BOTTOM as w}
                <div
                  class="widget-card"
                  class:wh={hovered === w.id}
                  on:mouseenter={() => hovered = w.id}
                  on:mouseleave={() => hovered = null}
                  role="button" tabindex="0"
                >
                  <div class="widget-top">
                    <h4 class="widget-q">{w.q}</h4>
                    <button class="help-btn" on:click={(e) => openModal(e, w.id)}>?</button>
                  </div>
                  <p class="widget-desc">{w.d}</p>
                  <div class="widget-footer">
                    <span class="widget-tech">{w.t}</span>
                    <span class="widget-arrow" class:arrow-show={hovered === w.id}>→</span>
                  </div>
                  <div class="widget-glow" style="background:radial-gradient(circle at 50% 50%,{C.green}06,transparent 70%)"></div>
                </div>
              {/each}
            </div>
          </div>
        </div>
      </div>
    </div>

  </main>
</div>

<!-- ═══ MODAL ═══ -->
{#if modal}
  <!-- svelte-ignore a11y-click-events-have-key-events -->
  <div class="modal-overlay" on:click={closeModal} role="dialog" aria-modal="true">
    <!-- svelte-ignore a11y-click-events-have-key-events -->
    <div class="modal-box" on:click|stopPropagation role="document">
      <button class="modal-close" on:click={closeModal}>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg>
      </button>

      <div class="modal-badge" style="background:{modal.color}12;color:{modal.color}">{modal.tech}</div>
      <h2 class="modal-title">{modal.title}</h2>

      <div class="modal-section">
        <div class="modal-icon">👤</div>
        <div>
          <div class="modal-label">EN LA VIDA COTIDIANA</div>
          <p class="modal-text">{modal.everyday}</p>
        </div>
      </div>

      <div class="modal-divider"></div>

      <div class="modal-section">
        <div class="modal-icon">🏛️</div>
        <div>
          <div class="modal-label">EN EL PRESUPUESTO</div>
          <p class="modal-text">{modal.budget}</p>
        </div>
      </div>

      <div class="modal-example" style="border-left-color:{modal.color}">
        <p>{modal.example}</p>
      </div>
    </div>
  </div>
{/if}


<style>
  @import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,300;8..60,400;8..60,600;8..60,700;8..60,900&family=JetBrains+Mono:wght@300;400;500&family=DM+Sans:wght@400;500;600;700&display=swap');

  :global(*) { margin: 0; padding: 0; box-sizing: border-box; }
  :global(::selection) { background: #E8C547; color: #0A0A0A; }
  :global(::-webkit-scrollbar) { width: 5px; }
  :global(::-webkit-scrollbar-track) { background: #0A0A0A; }
  :global(::-webkit-scrollbar-thumb) { background: #5A5650; border-radius: 3px; }

  @keyframes pulseGlow { 0%,100%{opacity:0.4}50%{opacity:0.9} }
  @keyframes mIn { from{opacity:0;transform:translateY(16px) scale(0.97)}to{opacity:1;transform:translateY(0) scale(1)} }

  .page { background: #0A0A0A; color: #F5F0E8; min-height: 100vh; font-family: 'Source Serif 4', Georgia, serif; }

  /* ── Entrance animations ── */
  .anim {
    opacity: 0; transform: translateY(24px);
    transition: all 0.7s cubic-bezier(0.16,1,0.3,1);
    transition-delay: var(--d, 0ms);
  }
  .mounted .anim { opacity: 1; transform: translateY(0); }

  /* ── Header ── */
  header {
    padding: 18px 40px; display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid #222220; position: sticky; top: 0; z-index: 50;
    background: rgba(10,10,10,0.93); backdrop-filter: blur(12px);
  }
  .header-left { display: flex; align-items: center; gap: 12px; }
  .back-link { color: #5A5650; display: flex; align-items: center; transition: color 0.3s; text-decoration: none; }
  .back-link:hover { color: #F5F0E8; }
  .live-dot {
    width: 7px; height: 7px; border-radius: 50%; background: #4A8B6E;
    animation: pulseGlow 2s ease-in-out infinite;
    box-shadow: 0 0 10px rgba(74,139,110,0.37);
  }
  .header-brand { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.2em; color: #8A8578; font-weight: 500; }
  .header-right { font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600; color: #5A5650; letter-spacing: 0.04em; }

  main { max-width: 1120px; margin: 0 auto; padding: 36px 36px 100px; }

  /* ── Page title ── */
  .page-title { margin-bottom: 28px; padding: 0 2px; }
  .page-title h1 { font-size: 28px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; }
  .page-title p { font-family: 'DM Sans', sans-serif; font-size: 14px; color: #5A5650; margin-top: 6px; line-height: 1.5; }
  .help-inline {
    font-family: 'Source Serif 4', serif; font-weight: 700; color: #8A8578;
    border: 1px solid #222220; border-radius: 50%; padding: 0 5px; font-size: 11px;
  }

  /* ── Group (level 1) ── */
  .group {
    background: #111111; border: 1px solid #222220; border-radius: 24px;
    padding: 20px 18px 18px; position: relative; overflow: hidden;
  }
  .group-stretch {
    display: flex; flex-direction: column; height: 100%;
  }
  .group-accent {
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c) 30%, transparent), transparent);
    border-radius: 24px 24px 0 0;
  }
  .group-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 0 4px; }
  .group-icon {
    width: 32px; height: 32px; border-radius: 10px;
    background: color-mix(in srgb, var(--c) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--c) 20%, transparent);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .group-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.18em; font-weight: 600; line-height: 1; }
  .group-sub { font-family: 'DM Sans', sans-serif; font-size: 12px; color: #5A5650; margin-top: 2px; }

  .group-widgets { display: flex; flex-direction: column; gap: 10px; }
  .widgets-stretch { display: flex; flex-direction: column; gap: 10px; flex: 1; }

  /* ── Widget card (level 2) ── */
  .widget-card {
    background: #131313; border: 1px solid #222220; border-radius: 16px;
    padding: 22px; position: relative; overflow: hidden; cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
  }
  .wh {
    background: #1A1A1A; border-color: #2E2E2C; transform: translateY(-1px);
  }
  .widget-grow {
    flex: 1; display: flex; flex-direction: column;
  }

  /* Horizontal variant (¿Quién?) */
  .widget-h {
    display: flex; justify-content: space-between; align-items: center;
  }
  .widget-h-left { flex: 1; }
  .widget-h-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

  .widget-top {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 10px; margin-bottom: 8px; position: relative; z-index: 1;
  }
  .widget-q {
    font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
    line-height: 1.2; font-family: 'DM Sans', sans-serif;
  }
  .widget-desc {
    font-family: 'DM Sans', sans-serif; font-size: 12px; color: #8A8578;
    line-height: 1.5; position: relative; z-index: 1;
  }
  .widget-desc-grow { flex: 1; }
  .widget-footer {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 16px; position: relative; z-index: 1;
  }
  .widget-tech {
    font-family: 'JetBrains Mono', monospace; font-size: 8px;
    letter-spacing: 0.12em; color: #5A5650; text-transform: uppercase;
  }
  .widget-arrow {
    font-family: 'DM Sans', sans-serif; font-size: 13px; color: transparent;
    transform: translateX(-6px);
    transition: all 0.35s cubic-bezier(0.16,1,0.3,1);
  }
  .arrow-show { color: #F5F0E8; transform: translateX(0); }
  .widget-glow {
    position: absolute; inset: 0; pointer-events: none;
    opacity: 0; transition: opacity 0.4s;
  }
  .wh > .widget-glow,
  .wh .widget-glow { opacity: 1; }

  /* ── Sub-group (level 2 container — "¿En qué?") ── */
  .sub-group {
    background: #0E0E0E; border: 1px solid #222220; border-radius: 18px;
    padding: 16px 14px 14px; position: relative; overflow: hidden;
  }
  .sub-group-accent {
    position: absolute; top: 0; left: 15%; right: 15%; height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c) 25%, transparent), transparent);
  }
  .sub-group-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px; padding: 0 4px;
  }
  .sub-group-left { display: flex; align-items: center; gap: 8px; }
  .sub-group-icon {
    width: 26px; height: 26px; border-radius: 8px;
    background: color-mix(in srgb, var(--c) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--c) 18%, transparent);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .sub-group-label {
    font-family: 'DM Sans', sans-serif; font-size: 14px;
    font-weight: 700; color: #F5F0E8; line-height: 1.1;
  }
  .sub-group-tag {
    font-family: 'JetBrains Mono', monospace; font-size: 8px;
    letter-spacing: 0.12em; margin-top: 2px;
  }

  .sub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

  /* ── Sub-widget (level 3) ── */
  .sub-card {
    background: #111111; border-color: #1E1E1C;
    padding: 18px; border-radius: 14px;
  }
  .sub-card.wh { background: #161616; border-color: #2A2A28; }
  .sub-q { font-size: 14px; }
  .sub-desc { font-size: 11px; }
  .sub-footer { margin-top: 12px; }
  .sub-tech { font-size: 7px; }

  .bottom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

  /* ── Main grid — equal height ── */
  .main-grid {
    display: grid; grid-template-columns: 1fr 2fr;
    gap: 16px; margin-top: 16px; align-items: stretch;
  }
  .col-stretch { display: flex; flex-direction: column; }

  /* ── Help button ── */
  .help-btn {
    width: 26px; height: 26px; border-radius: 50%; border: 1px solid #222220;
    background: transparent; color: #5A5650;
    font-family: 'Source Serif 4', serif; font-size: 12px; font-weight: 600;
    cursor: pointer; transition: all 0.3s;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .help-btn:hover { border-color: #E8C547; color: #E8C547; background: rgba(232,197,71,0.08); }
  .help-sm { width: 22px; height: 22px; font-size: 10px; }
  .help-xs { width: 20px; height: 20px; font-size: 9px; }

  /* ── Modal ── */
  .modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.8);
    backdrop-filter: blur(12px);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000; padding: 40px;
  }
  .modal-box {
    background: #141414; border: 1px solid #222220; border-radius: 24px;
    max-width: 520px; width: 100%; padding: 32px 36px; position: relative;
    animation: mIn 0.3s cubic-bezier(0.16,1,0.3,1);
    max-height: 85vh; overflow-y: auto;
  }
  .modal-close {
    position: absolute; top: 16px; right: 16px;
    background: transparent; border: 1px solid #222220; border-radius: 50%;
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    color: #5A5650; cursor: pointer; transition: all 0.2s;
  }
  .modal-close:hover { border-color: #5A5650; color: #F5F0E8; }
  .modal-badge {
    font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.15em;
    border-radius: 6px; padding: 4px 9px; display: inline-block; margin-bottom: 14px;
  }
  .modal-title { font-size: 24px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 24px; }
  .modal-section { display: flex; gap: 14px; }
  .modal-icon {
    font-size: 18px; width: 36px; height: 36px; background: #161616; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    border: 1px solid #222220;
  }
  .modal-label {
    font-family: 'JetBrains Mono', monospace; font-size: 9px;
    letter-spacing: 0.15em; color: #5A5650; margin-bottom: 5px;
  }
  .modal-text { font-family: 'DM Sans', sans-serif; font-size: 13px; line-height: 1.65; color: #8A8578; }
  .modal-divider { height: 1px; background: #222220; margin: 18px 0; margin-left: 50px; }
  .modal-example {
    margin-top: 20px; margin-left: 50px; padding: 14px 18px;
    border-left: 3px solid; background: rgba(232,197,71,0.03);
    border-radius: 0 10px 10px 0;
  }
  .modal-example p {
    font-family: 'DM Sans', sans-serif; font-size: 12px;
    line-height: 1.6; color: #8A8578; font-style: italic;
  }
</style>