:root{
    --bg-void:#05090D;
    --bg-panel:#0B121A;
    --bg-panel-raised:#101B24;
    --bg-panel-hover:#16232E;

    --accent-active:#00E6A8;
    --accent-active-dim:rgba(0,230,168,.14);
    --accent-active-line:rgba(0,230,168,.3);
    --accent-secondary:#FFB238;
    --accent-secondary-dim:rgba(255,178,56,.14);

    --text-primary:#EAF3EF;
    --text-secondary:rgba(234,243,239,.68);
    /* Texto pequeño que sí debe leerse (contraste > 5:1). */
    --text-muted:rgba(234,243,239,.56);
    /* Solo decoración: contraste insuficiente para leer. */
    --text-tertiary:rgba(234,243,239,.36);
    --line-hairline:rgba(0,230,168,.16);

    --font-display:'Goldman',sans-serif;
    --font-body:'DM Sans',sans-serif;

    --radius:3px;
    --max:1180px;
}

*{box-sizing:border-box}

html{
    scroll-behavior:smooth;
    scroll-padding-top:82px;
}

body{
    margin:0;
    background:var(--bg-void);
    color:var(--text-primary);
    font-family:var(--font-body);
    font-size:16px;
    line-height:1.7;
    overflow-x:hidden;
}

::selection{background:var(--accent-active);color:var(--bg-void)}

a{text-decoration:none;color:inherit}

.container{
    width:min(calc(100% - 40px),var(--max));
    margin:auto;
}

/* Foco visible para teclado */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible{
    outline:2px solid var(--accent-active);
    outline-offset:3px;
}

/* ---------- NAVEGACIÓN ---------- */
.site-nav{
    position:sticky;
    top:0;
    z-index:1000;
    background:rgba(5,9,13,.92);
    border-bottom:1px solid var(--line-hairline);
    backdrop-filter:blur(16px);
}

.nav-inner{
    min-height:70px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}

.brand{
    font-family:var(--font-display);
    font-weight:700;
    font-size:1.02rem;
    letter-spacing:-.01em;
    color:var(--text-primary);
}
.brand span{color:var(--accent-active)}

.nav-links{
    display:flex;
    align-items:center;
    gap:26px;
    font-size:.86rem;
    font-weight:500;
    color:var(--text-secondary);
}
.nav-links a{transition:color .2s}
.nav-links a:hover{color:var(--accent-active)}

.nav-download{
    padding:10px 16px;
    border-radius:var(--radius);
    background:var(--accent-active);
    color:var(--bg-void)!important;
    font-weight:700;
}

/* ---------- TIPOGRAFÍA ---------- */
h1,h2,h3{font-family:var(--font-display);color:var(--text-primary)}

h1{
    margin:0;
    font-size:clamp(2.3rem,5vw,4.2rem);
    font-weight:700;
    line-height:1.06;
    letter-spacing:-.03em;
}
h1 em,
.hero h1 span{
    font-style:normal;
    color:var(--accent-active);
}

h2{
    margin:9px 0 14px;
    font-size:clamp(1.8rem,3.4vw,2.8rem);
    font-weight:700;
    line-height:1.12;
    letter-spacing:-.025em;
}

h3{letter-spacing:-.01em}

.eyebrow,
.kicker{
    color:var(--accent-secondary);
    font-size:.8rem;
    font-weight:700;
    letter-spacing:.04em;
}
.eyebrow{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:22px;
}
.eyebrow:before{
    content:"";
    width:28px;
    height:2px;
    background:var(--accent-secondary);
}

/* ---------- BOTONES ---------- */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:50px;
    padding:0 22px;
    border:1px solid transparent;
    border-radius:var(--radius);
    font-family:var(--font-body);
    font-weight:700;
    font-size:.92rem;
    cursor:pointer;
    transition:transform .2s,box-shadow .2s,background .2s,border-color .2s;
}
.btn:disabled{opacity:.6;cursor:not-allowed}

.btn-primary{
    background:var(--accent-active);
    border-color:var(--accent-active);
    color:var(--bg-void);
}
.btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 30px rgba(0,230,168,.3);
}

.btn-secondary{
    border-color:rgba(234,243,239,.22);
    background:transparent;
    color:var(--text-primary);
}
.btn-secondary:hover{
    border-color:var(--accent-active);
    color:var(--accent-active);
    transform:translateY(-2px);
}

.actions,
.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:13px;
}
.actions{margin-top:20px;gap:10px}

/* ---------- HERO ---------- */
.hero{
    position:relative;
    overflow:hidden;
    padding:82px 0 90px;
    border-bottom:1px solid var(--line-hairline);
    background:
        radial-gradient(ellipse at 18% 30%,rgba(0,230,168,.13),transparent 45%),
        radial-gradient(circle at 88% 12%,rgba(255,178,56,.08),transparent 32%),
        linear-gradient(rgba(0,230,168,.045) 1px,transparent 1px) 0 0/42px 42px,
        linear-gradient(90deg,rgba(0,230,168,.045) 1px,transparent 1px) 0 0/42px 42px,
        var(--bg-void);
}

.hero-grid{
    display:grid;
    grid-template-columns:1.02fr .98fr;
    gap:65px;
    align-items:center;
}

.hero-copy,
.hero-grid > div:first-child > p{
    max-width:650px;
    margin:25px 0 28px;
    color:var(--text-secondary);
    font-size:1.05rem;
}

.hero-note{
    margin-top:18px;
    color:var(--text-muted);
    font-size:.82rem;
}

.hero-card{
    padding:32px;
    border:1px solid var(--line-hairline);
    border-radius:var(--radius);
    background:var(--bg-panel);
}
.hero-card h2{margin-top:0}
.hero-card p{color:var(--text-secondary);font-size:.95rem}

/* ---------- DEMO ---------- */
.demo{
    padding:20px;
    border:1px solid var(--line-hairline);
    border-radius:var(--radius);
    background:var(--bg-panel);
}
.demo-window{
    border:1px solid var(--line-hairline);
    border-radius:var(--radius);
    overflow:hidden;
}
.demo-top{
    padding:13px 16px;
    display:flex;
    align-items:center;
    gap:7px;
    color:var(--text-muted);
    font-size:.74rem;
    background:var(--bg-void);
}
.dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--accent-active-line);
}
.demo-title{margin:auto;color:var(--text-secondary)}
.demo-body{padding:22px;background:var(--bg-panel-raised)}
.prompt-label{
    color:var(--accent-active);
    font-size:.74rem;
    font-weight:700;
    letter-spacing:.04em;
}
.prompt{
    margin-top:9px;
    padding:17px;
    border-radius:var(--radius);
    background:var(--bg-void);
    color:var(--text-primary);
    font-size:.84rem;
    line-height:1.75;
}
.prompt b{color:#fff}
.mark{color:var(--accent-active)}
.output{
    margin-top:13px;
    padding:15px;
    border-radius:var(--radius);
    background:var(--accent-secondary-dim);
    border:1px solid rgba(255,178,56,.25);
    color:var(--text-primary);
    font-size:.8rem;
}
.demo-caption{
    margin-top:12px;
    color:var(--text-muted);
    font-size:.76rem;
    text-align:center;
}

/* ---------- TRUST ---------- */
.trust{
    background:var(--bg-panel);
    border-bottom:1px solid var(--line-hairline);
    padding:19px 0;
}
.trust-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    text-align:center;
}
.trust-item{
    padding:5px 20px;
    border-right:1px solid var(--line-hairline);
}
.trust-item:last-child{border:0}
.trust strong{
    display:block;
    color:var(--accent-active);
    font-family:var(--font-display);
    font-size:1.05rem;
}
.trust span{
    font-size:.78rem;
    color:var(--text-muted);
    letter-spacing:.02em;
}

/* ---------- SECCIONES ---------- */
.section{padding:92px 0}
.section-light,
.section.alt{background:var(--bg-panel)}

.section-head{
    max-width:760px;
    margin-bottom:42px;
}
.section-head p{margin:0;color:var(--text-secondary)}

/* ---------- MUESTRA (sample) ---------- */
.sample-grid{
    display:grid;
    grid-template-columns:1fr .82fr;
    gap:26px;
}
.sample-card{
    padding:30px;
    border:1px solid var(--line-hairline);
    border-radius:var(--radius);
    background:var(--bg-panel);
}
.sample-card.dark{
    background:var(--bg-panel-raised);
    border-color:var(--accent-active-line);
}
.sample-card h3{margin:0 0 12px;font-size:1.15rem}
.sample-card p{color:var(--text-secondary);font-size:.95rem}
.sample-card.dark p{color:var(--text-secondary)}

.formula{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:8px;
    margin:24px 0;
}
.formula div{
    min-height:75px;
    padding:10px;
    border:1px solid var(--line-hairline);
    border-radius:var(--radius);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:var(--bg-panel-raised);
    color:var(--text-primary);
    font-size:.74rem;
    font-weight:700;
}
.formula div:nth-child(2),
.formula div:nth-child(4){
    background:var(--accent-active-dim);
    border-color:var(--accent-active-line);
    color:var(--accent-active);
}
.formula div:nth-child(5){
    background:var(--accent-secondary-dim);
    border-color:rgba(255,178,56,.3);
    color:var(--accent-secondary);
}
.example{
    padding:17px;
    border-left:3px solid var(--accent-active);
    border-radius:0 var(--radius) var(--radius) 0;
    background:var(--bg-panel-raised);
    color:var(--text-secondary);
    font-size:.9rem;
}

/* ---------- HERRAMIENTA / TEXTAREA ---------- */
.prompt-box{margin-top:20px}

.prompt-box textarea,
.tool-body textarea{
    width:100%;
    min-height:180px;
    padding:16px;
    border:1px solid var(--line-hairline);
    border-radius:var(--radius);
    background:var(--bg-void);
    color:var(--text-primary);
    font:400 .95rem/1.65 var(--font-body);
    resize:vertical;
    outline:none;
}
.prompt-box textarea:focus,
.tool-body textarea:focus{
    border-color:var(--accent-active);
    box-shadow:0 0 0 3px var(--accent-active-dim);
}

.prompt-toolbar{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:9px;
    margin-top:12px;
}

.tool-btn{
    border:1px solid rgba(234,243,239,.22);
    background:transparent;
    color:var(--text-primary);
    border-radius:var(--radius);
    padding:10px 15px;
    font:700 .8rem var(--font-body);
    cursor:pointer;
    transition:border-color .2s,color .2s,transform .2s;
}
.tool-btn:hover{
    border-color:var(--accent-active);
    color:var(--accent-active);
    transform:translateY(-1px);
}
.tool-btn.copy-code{
    background:var(--accent-active);
    border-color:var(--accent-active);
    color:var(--bg-void);
}
.tool-btn.copy-code:hover{
    background:#00c993;
    border-color:#00c993;
    color:var(--bg-void);
}

.tool-status{
    min-height:20px;
    margin-top:8px;
    text-align:center;
    color:var(--text-muted);
    font-size:.76rem;
}

.tool{
    border:1px solid var(--line-hairline);
    border-radius:var(--radius);
    overflow:hidden;
    background:var(--bg-panel);
}
.tool-top{
    padding:28px 30px;
    background:var(--bg-panel-raised);
    border-bottom:1px solid var(--line-hairline);
}
.tool-top h2{margin:0 0 8px;font-size:1.55rem}
.tool-top p{margin:0;color:var(--text-secondary);font-size:.92rem}
.tool-body{padding:30px}
.tool-actions{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:9px;
    margin-top:14px;
}
.tool-result{
    display:none;
    margin-top:18px;
    padding:18px;
    border-radius:var(--radius);
    background:var(--bg-panel-raised);
    border-left:3px solid var(--accent-active);
    color:var(--text-secondary);
    white-space:pre-line;
}
.tool-result.show{display:block}
.tool-result-label{
    display:block;
    margin-bottom:8px;
    color:var(--accent-active);
    font-size:.74rem;
    font-weight:700;
    letter-spacing:.04em;
}
.small{
    margin:10px 0 0;
    text-align:center;
    color:var(--text-muted);
    font-size:.76rem;
}

/* ---------- GATE / FORMULARIOS ---------- */
.gate{
    display:grid;
    grid-template-columns:1fr .78fr;
    gap:60px;
    align-items:center;
}
.gate-copy h2{margin-top:8px}

.benefits{
    list-style:none;
    padding:0;
    margin:25px 0 0;
}
.benefits li{
    margin:12px 0;
    color:var(--text-secondary);
    font-size:.95rem;
}
.benefits li:before{
    content:"\2713";
    color:var(--accent-active);
    font-weight:900;
    margin-right:10px;
}

.form-card{
    padding:32px;
    border:1px solid var(--accent-active-line);
    border-radius:var(--radius);
    background:var(--bg-panel);
}
.form-card h3{margin:0 0 7px;font-size:1.3rem}
.form-card .intro{
    margin:0 0 23px;
    color:var(--text-secondary);
    font-size:.88rem;
}
.form-note{
    margin:13px 0 0;
    color:var(--text-muted);
    text-align:center;
    font-size:.76rem;
}

.field{margin-bottom:14px}
.field label{
    display:block;
    margin-bottom:7px;
    color:var(--text-secondary);
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.03em;
}
.field input{
    width:100%;
    padding:13px 14px;
    border-radius:var(--radius);
    border:1px solid var(--line-hairline);
    background:rgba(255,255,255,.03);
    color:var(--text-primary);
    outline:none;
    font:inherit;
    transition:border-color .2s,background .2s;
}
.field input:focus{
    border-color:var(--accent-active);
    background:var(--accent-active-dim);
}
.field input::placeholder{color:var(--text-muted)}

.notice{
    display:none;
    margin-bottom:15px;
    padding:11px 13px;
    border-radius:var(--radius);
    font-size:.84rem;
}
.notice.error{
    color:#ffb4b4;
    border:1px solid rgba(255,120,120,.35);
    background:rgba(255,120,120,.1);
}
.notice.success{
    color:var(--accent-active);
    border:1px solid var(--accent-active-line);
    background:var(--accent-active-dim);
}

.form-btn{
    width:100%;
    border:1px solid var(--accent-active);
    border-radius:var(--radius);
    padding:15px;
    background:var(--accent-active);
    color:var(--bg-void);
    font:inherit;
    font-weight:700;
    cursor:pointer;
    transition:box-shadow .2s,transform .2s;
}
.form-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 30px rgba(0,230,168,.3);
}
.form-btn:disabled{opacity:.7;cursor:not-allowed;transform:none;box-shadow:none}

.hp{
    position:absolute;
    left:-9999px;
    width:1px;
    height:1px;
    overflow:hidden;
}

/* ---------- CTA FINAL / FOOTER ---------- */
.final{
    padding:82px 0;
    border-top:1px solid var(--line-hairline);
    background:
        radial-gradient(ellipse at 50% 0%,rgba(0,230,168,.12),transparent 60%),
        var(--bg-panel);
    text-align:center;
}
.final h2{
    max-width:780px;
    margin:8px auto 15px;
}
.final p{
    max-width:650px;
    margin:0 auto 26px;
    color:var(--text-secondary);
    font-size:.98rem;
}

.footer,
footer{
    padding:27px 0;
    background:var(--bg-void);
    border-top:1px solid var(--line-hairline);
    color:var(--text-muted);
    font-size:.8rem;
}
footer{text-align:center}
.footer-inner{
    width:min(calc(100% - 40px),var(--max));
    margin:auto;
    display:flex;
    justify-content:space-between;
    gap:20px;
}
.footer a:hover{color:var(--accent-active)}

/* ---------- BIBLIOTECA / TARJETAS ---------- */
.library-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:20px;
}
.library-card{
    display:grid;
    grid-template-columns:220px 1fr;
    gap:28px;
    align-items:center;
    padding:28px;
    border:1px solid var(--line-hairline);
    border-radius:var(--radius);
    background:var(--bg-panel);
}
.library-card h2{font-size:1.55rem;margin:12px 0 10px}
.library-card p{color:var(--text-secondary);max-width:680px}

.cover{
    min-height:190px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:25px;
    border:1px solid var(--accent-active-line);
    border-radius:var(--radius);
    background:linear-gradient(145deg,var(--accent-active-dim),var(--bg-panel-raised));
    color:var(--text-primary);
    font-family:var(--font-display);
    font-weight:700;
    line-height:1.2;
    letter-spacing:-.02em;
}
/* Nombre heredado: ahora es la variante ámbar (el morado ya no existe) */
.cover-violet{
    border-color:rgba(255,178,56,.3);
    background:linear-gradient(145deg,var(--accent-secondary-dim),var(--bg-panel-raised));
}

.cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}
.card{
    padding:28px;
    border:1px solid var(--line-hairline);
    border-radius:var(--radius);
    background:var(--bg-panel);
    transition:background .25s,border-color .25s;
}
.card:hover{
    background:var(--bg-panel-raised);
    border-color:var(--accent-active-line);
}
.card h3{margin:12px 0 10px;font-size:1.1rem}
.card p{margin:0;color:var(--text-secondary);font-size:.9rem}

/* Sobre secciones ya en panel, las tarjetas suben un nivel */
.section-light .card,
.section.alt .card,
.info .info-card{background:var(--bg-panel-raised)}

.badge{
    display:inline-block;
    padding:4px 10px;
    border:1px solid var(--accent-active-line);
    border-radius:var(--radius);
    background:var(--accent-active-dim);
    color:var(--accent-active);
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.03em;
}
/* Nombre heredado: variante ámbar */
.badge.violet{
    border-color:rgba(255,178,56,.3);
    background:var(--accent-secondary-dim);
    color:var(--accent-secondary);
}

.grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}
.grid .card{padding:0;overflow:hidden}

.card-top{
    min-height:125px;
    padding:24px;
    background:var(--bg-panel-raised);
    border-bottom:1px solid var(--line-hairline);
    color:var(--text-primary);
    position:relative;
}
.card-top h3{margin:18px 0 0;font-size:1.1rem;line-height:1.2}
.card-body{padding:22px}
.card-body p{margin:0 0 20px;color:var(--text-secondary);font-size:.88rem}
.card-link{color:var(--accent-active);font-size:.86rem;font-weight:700}
.card-link:hover{text-decoration:underline;text-underline-offset:4px}
span.card-link{color:var(--text-muted)}
span.card-link:hover{text-decoration:none}

.tag{
    display:inline-block;
    padding:4px 10px;
    border:1px solid var(--accent-active-line);
    border-radius:var(--radius);
    background:var(--accent-active-dim);
    color:var(--accent-active);
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.03em;
}

.filters{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin-top:28px;
}
.filter{
    border:1px solid var(--line-hairline);
    border-radius:var(--radius);
    padding:9px 14px;
    background:transparent;
    color:var(--text-secondary);
    font:inherit;
    font-size:.84rem;
    font-weight:500;
    cursor:pointer;
    transition:border-color .2s,color .2s,background .2s;
}
.filter:hover{
    border-color:var(--accent-active);
    color:var(--accent-active);
}
.filter.active{
    background:var(--accent-active);
    border-color:var(--accent-active);
    color:var(--bg-void);
    font-weight:700;
}

.info{background:var(--bg-panel)}
.info-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:25px;
}
.info-card{
    padding:30px;
    border:1px solid var(--line-hairline);
    border-radius:var(--radius);
    background:var(--bg-panel-raised);
}
.info-card h3{margin-top:0}
.info-card p{color:var(--text-secondary);font-size:.92rem}

.empty{
    display:none;
    padding:35px;
    border:1px dashed var(--accent-active-line);
    border-radius:var(--radius);
    text-align:center;
    color:var(--text-muted);
}

/* ============================================================
   RESPONSIVE (de mayor a menor)
   ============================================================ */
@media(max-width:900px){
    .hero-grid,
    .sample-grid,
    .gate{grid-template-columns:1fr}

    .demo{max-width:720px;margin:auto}
    .hero{padding-top:58px}

    .cards{grid-template-columns:1fr 1fr}
    .library-card{grid-template-columns:170px 1fr}
}

@media(max-width:850px){
    .grid{grid-template-columns:1fr 1fr}
    .info-grid{grid-template-columns:1fr}
    .section-head{display:block}
    .section-head p{margin-top:15px}
}

@media(max-width:700px){
    .container{width:min(calc(100% - 28px),var(--max))}

    .nav-inner{min-height:62px}
    .nav-links{
        gap:12px;
        flex-wrap:wrap;
        justify-content:flex-end;
    }
    .nav-links a{font-size:.78rem}
    .nav-download{padding:9px 13px;font-size:.78rem}

    .hero{padding:48px 0 60px}
    .hero-actions .btn{width:100%}

    .trust-grid{grid-template-columns:1fr}
    .trust-item{
        border-right:0;
        border-bottom:1px solid var(--line-hairline);
        padding:9px;
    }
    .trust-item:last-child{border-bottom:0}

    .section{padding:68px 0}

    .formula{grid-template-columns:1fr}
    .formula div{min-height:48px}

    .sample-card{padding:22px}
    .form-card{padding:24px}

    .cards,
    .grid,
    .info-grid,
    .library-card{grid-template-columns:1fr}
    .cover{min-height:145px}

    .footer-inner{display:block;text-align:center}
    .footer-inner > *{display:block;margin:4px 0}
}

/* Respeta a quien pide menos movimiento */
@media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,
    *::before,
    *::after{
        transition-duration:.01ms!important;
        animation-duration:.01ms!important;
    }
}

/* ============================================================
   ACTIVIDAD INTERACTIVA (03_recurso) · tema oscuro
   Sustituye al <style> que estaba dentro del HTML de la página 03.
   ============================================================ */
.thinking-tool{
    background:var(--bg-panel);
    border:1px solid var(--line-hairline);
    border-radius:var(--radius);
    overflow:hidden;
}
.thinking-tool-top{
    padding:30px 32px;
    background:var(--bg-panel-raised);
    border-bottom:1px solid var(--line-hairline);
}
.thinking-tool-top h2{margin:0 0 8px}
.thinking-tool-top p{margin:0;color:var(--text-secondary)}

.thinking-tool-body{
    padding:30px;
    background:var(--bg-panel);
}
.thinking-progress{
    display:flex;
    justify-content:space-between;
    gap:15px;
    margin-bottom:18px;
    font-size:.88rem;
    color:var(--text-muted);
}

.thinking-question{
    padding:24px;
    border:1px solid var(--line-hairline);
    border-radius:var(--radius);
    background:var(--bg-panel-raised);
}
.thinking-label{
    display:inline-block;
    margin-bottom:10px;
    font-size:.8rem;
    font-weight:700;
    letter-spacing:.04em;
    color:var(--accent-secondary);
}
.thinking-question h3{margin:0 0 10px;color:var(--text-primary)}
.thinking-question p{margin:0;color:var(--text-secondary)}

.thinking-options{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-top:20px;
}
.thinking-option{
    appearance:none;
    padding:15px 14px;
    border:1px solid rgba(234,243,239,.22);
    border-radius:var(--radius);
    background:transparent;
    color:var(--text-primary);
    font:inherit;
    font-weight:700;
    cursor:pointer;
    transition:border-color .18s,color .18s,background .18s,transform .18s;
}
.thinking-option:hover:not(:disabled),
.thinking-option:focus-visible{
    border-color:var(--accent-active);
    color:var(--accent-active);
    transform:translateY(-1px);
}
.thinking-option:disabled{cursor:default;opacity:.5}
.thinking-option.is-correct{
    opacity:1;
    border-color:var(--accent-active);
    background:var(--accent-active-dim);
    color:var(--accent-active);
}
.thinking-option.is-wrong{
    opacity:1;
    border-color:rgba(255,120,120,.6);
    background:rgba(255,120,120,.1);
    color:#ffb4b4;
}

.thinking-feedback{
    display:none;
    margin-top:18px;
    padding:17px 18px;
    border-left:4px solid var(--accent-active);
    border-radius:var(--radius);
    background:var(--bg-void);
    color:var(--text-secondary);
}
.thinking-feedback.show{display:block}
.thinking-feedback.is-wrong{border-left-color:var(--accent-secondary)}
.thinking-feedback strong{
    display:block;
    margin-bottom:5px;
    color:var(--text-primary);
}

.thinking-next{display:none;margin-top:18px}
.thinking-next.show{display:flex}

.thinking-result{
    display:none;
    text-align:center;
    padding:24px;
    border:1px solid var(--accent-active-line);
    border-radius:var(--radius);
    background:var(--bg-panel-raised);
}
.thinking-result.show{display:block}
.thinking-result h3{margin-top:0;color:var(--text-primary)}
.thinking-result p{color:var(--text-secondary)}
.thinking-score{
    margin:8px 0 12px;
    font-family:var(--font-display);
    font-size:2rem;
    font-weight:700;
    color:var(--accent-active);
}
.thinking-reset{margin-top:16px}

@media(max-width:760px){
    .thinking-options{grid-template-columns:1fr}
    .thinking-tool-body,
    .thinking-tool-top{padding:22px}
}