:root{
    --ai-navy:#0f2340;
    --ai-navy-deep:#0b1a31;
    --ai-card-navy:#132b4f;
    --ai-surface:#fff;
    --ai-subtle:#f7f9fc;
    --ai-field:#f1f4f9;
    --ai-workspace:#eef1f7;
    --ai-ink:#0a1a30;
    --ai-muted:#62718a;
    --ai-faint:#8493a8;
    --ai-line:rgba(10,26,48,.1);
    --ai-cyan:#10c4e3;
    --ai-cyan-dark:#0a7f96;
    --ai-cyan-ink:#04252c;
    --ai-cyan-tint:#e3f8fc;
    --ai-gold:#f2b019;
    --ai-gold-ink:#3a2400;
    --ai-success:#17a34a;
    --ai-danger:#c0343a;
}

html,
body{
    min-width:320px;
    background:var(--ai-workspace);
}

body{
    color:var(--ai-ink);
    font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    overflow-x:hidden;
}

.ai-shell{
    width:100%;
    max-width:1180px;
    margin:0 auto;
    padding:0;
    display:grid;
    gap:18px;
}

.ai-top{
    display:none;
}

.ai-intro{
    min-height:310px;
    padding:34px;
    border:0;
    border-radius:16px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 250px;
    align-content:center;
    gap:22px 30px;
    overflow:hidden;
    color:#fff;
    background:
        radial-gradient(520px 260px at 2% 0%,rgba(16,196,227,.25),transparent 68%),
        linear-gradient(145deg,var(--ai-navy),var(--ai-navy-deep));
}

.ai-intro-copy{
    max-width:680px;
}

.ai-eyebrow,
.ai-section-kicker{
    display:block;
    color:var(--ai-cyan-dark);
    font-size:12px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.ai-intro .ai-eyebrow{
    color:#5fe6fb;
}

.ai-intro h1{
    max-width:650px;
    margin-top:10px;
    color:#fff;
    font-family:"Sora","Manrope",sans-serif;
    font-size:38px;
    line-height:1.12;
    letter-spacing:-.025em;
    text-wrap:balance;
}

.ai-intro .ai-copy{
    max-width:66ch;
    margin-top:14px;
    color:rgba(255,255,255,.72);
    font-size:14px;
    line-height:1.65;
}

.ai-hero-rating{
    min-height:160px;
    padding:22px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:14px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background:rgba(255,255,255,.06);
}

.ai-hero-rating span{
    color:#5fe6fb;
    font-size:12px;
    font-weight:800;
}

.ai-hero-rating strong{
    margin-top:8px;
    font-family:"Sora","Manrope",sans-serif;
    font-size:38px;
    line-height:1;
}

.ai-hero-rating small{
    margin-top:12px;
    color:rgba(255,255,255,.62);
    font-size:12px;
    line-height:1.45;
}

.ai-intro-actions{
    grid-column:1 / -1;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.ai-status{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
}

.ai-section-nav{
    min-height:52px;
    padding:5px;
    border:1px solid var(--ai-line);
    border-radius:14px;
    display:flex;
    align-items:center;
    gap:4px;
    background:var(--ai-surface);
}

.ai-section-nav a{
    min-height:44px;
    padding:0 18px;
    border-radius:10px;
    display:inline-flex;
    align-items:center;
    color:var(--ai-muted);
    font-size:13px;
    font-weight:800;
    text-decoration:none;
}

.aq2-search{
    min-height:44px;
}

.ai-section-nav a:hover,
.ai-section-nav a:focus-visible,
.ai-section-nav a[aria-current="page"]{
    color:var(--ai-ink);
    background:var(--ai-cyan-tint);
}

.ai-panel{
    padding:24px;
    border:1px solid var(--ai-line);
    border-radius:16px;
    display:grid;
    gap:18px;
    background:var(--ai-surface);
}

.ai-section-heading,
.ai-lab-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
}

.ai-section-heading h2,
.ai-lab-heading h2{
    margin-top:5px;
    color:var(--ai-ink);
    font-family:"Sora","Manrope",sans-serif;
    font-size:20px;
    line-height:1.2;
}

.ai-section-heading > p{
    max-width:380px;
    color:var(--ai-muted);
    font-size:12.5px;
    line-height:1.5;
    text-align:right;
}

.ai-tool-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

.ai-tool-card{
    min-height:126px;
    padding:16px;
    border:1px solid var(--ai-line);
    border-radius:14px;
    display:grid;
    grid-template-columns:42px minmax(0,1fr) auto;
    align-items:start;
    gap:12px;
    color:var(--ai-ink);
    background:var(--ai-subtle);
    text-decoration:none;
}

.ai-tool-card:hover,
.ai-tool-card:focus-visible{
    border-color:rgba(16,196,227,.65);
    background:#f3fbfd;
}

.ai-tool-card.is-primary{
    border-color:rgba(16,196,227,.55);
    background:linear-gradient(145deg,#f5fdff,var(--ai-cyan-tint));
}

.ai-tool-card.is-unavailable{
    border-style:dashed;
    color:var(--ai-muted);
    background:#fafbfd;
}

.ai-tool-icon{
    width:42px;
    height:42px;
    border-radius:12px;
    display:grid;
    place-items:center;
    color:var(--ai-cyan-dark);
    background:rgba(16,196,227,.13);
    font-family:"Sora","Manrope",sans-serif;
    font-size:13px;
    font-weight:800;
}

.ai-tool-card > span:nth-child(2){
    min-width:0;
    display:grid;
    gap:5px;
}

.ai-tool-card strong{
    font-family:"Sora","Manrope",sans-serif;
    font-size:15px;
    line-height:1.3;
}

.ai-tool-card small{
    color:var(--ai-muted);
    font-size:12px;
    line-height:1.45;
}

.ai-tool-card b{
    align-self:center;
    color:var(--ai-cyan-dark);
    font-size:12px;
}

.ai-rating-summary{
    gap:14px;
}

.ai-rating-head{
    align-items:flex-end;
}

.ai-rating-head strong{
    color:var(--ai-cyan-dark);
    font-family:"Sora","Manrope",sans-serif;
    font-size:30px;
}

.ai-stat-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

.ai-stat-card{
    min-height:116px;
    padding:15px;
    border:0;
    border-radius:12px;
    background:var(--ai-subtle);
}

.ai-stat-card strong{
    font-size:24px;
}

.ai-stat-card small,
.ai-stat-list,
.ai-copy,
.ai-note{
    color:var(--ai-muted);
    font-size:12px;
}

.ai-rules{
    border-color:var(--ai-line);
    border-radius:12px;
    background:var(--ai-subtle);
}

.ai-rules summary{
    min-height:48px;
    display:flex;
    align-items:center;
}

.ai-history-day-summary,
.ai-analysis-summary,
.ai-analysis-full-summary{
    min-height:44px;
}

.ai-trainer-panel{
    grid-template-columns:minmax(0,1fr) minmax(260px,380px);
    align-items:center;
}

.ai-trainer-panel .ai-section-heading{
    display:block;
}

.ai-trainer-panel .ai-section-heading > p{
    margin-top:8px;
    text-align:left;
}

.ai-lab-panel{
    gap:20px;
}

.ai-lab-heading{
    align-items:flex-start;
    padding:22px;
    border-radius:14px;
    color:#fff;
    background:linear-gradient(145deg,var(--ai-card-navy),var(--ai-navy-deep));
}

.ai-lab-heading h2{
    color:#fff;
    font-size:24px;
}

.ai-lab-heading .ai-section-kicker{
    color:#5fe6fb;
}

.ai-lab-heading .ai-copy{
    max-width:65ch;
    margin-top:8px;
    color:rgba(255,255,255,.68);
    line-height:1.55;
}

.ai-lab-rule{
    min-height:44px;
    padding:0 13px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    flex:0 0 auto;
    color:#fff;
    background:rgba(255,255,255,.06);
    font-size:12px;
    font-weight:800;
}

.ai-usage-note{
    padding:14px;
    border-color:rgba(16,196,227,.25);
    border-radius:12px;
    background:var(--ai-cyan-tint);
}

.ai-steps{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.ai-step{
    min-width:0;
    align-content:start;
    padding:14px;
    border:1px solid var(--ai-line);
    border-radius:12px;
    background:var(--ai-subtle);
}

.ai-step:last-child{
    grid-column:1 / -1;
}

.ai-step label,
.ai-step-title{
    color:var(--ai-ink);
    font-size:12px;
}

.ai-select,
.ai-textarea{
    min-height:48px;
    border-color:var(--ai-line);
    border-radius:10px;
    color:var(--ai-ink);
    background:var(--ai-surface);
}

.ai-textarea{
    min-height:100px;
}

.ai-select:focus,
.ai-textarea:focus,
.ai-chip:focus-visible{
    outline:2px solid var(--ai-cyan);
    outline-offset:2px;
}

.ai-chips{
    gap:8px;
}

.ai-chip{
    min-height:44px;
    padding:8px 13px;
    border-color:var(--ai-line);
    color:var(--ai-muted);
    background:var(--ai-surface);
}

.ai-chip.is-active{
    border-color:var(--ai-cyan);
    color:var(--ai-cyan-ink);
    background:var(--ai-cyan-tint);
}

.ai-button{
    min-height:48px;
    border:0;
    border-radius:12px;
    color:var(--ai-cyan-ink);
    background:linear-gradient(135deg,var(--ai-cyan),#0a9fbb);
    font-size:13px;
}

.ai-button.secondary{
    border:1px solid var(--ai-line);
    color:var(--ai-ink);
    background:var(--ai-surface);
}

.ai-button:hover:not(:disabled){
    filter:brightness(.97);
}

.ai-button:focus-visible,
.ai-section-nav a:focus-visible,
.ai-tool-card:focus-visible,
.ai-rules summary:focus-visible{
    outline:2px solid var(--ai-cyan);
    outline-offset:2px;
}

.ai-button:disabled{
    opacity:.55;
}

.ai-answer,
.ai-selected-match,
.ai-choice-status,
.ai-history-empty,
.ai-analysis-field,
.ai-analysis-text,
.ai-choice-alternatives{
    border-color:var(--ai-line);
    border-radius:12px;
    color:var(--ai-muted);
    background:var(--ai-subtle);
}

.ai-recommendation{
    border-color:rgba(16,196,227,.3);
    border-radius:14px;
    background:#f4fcfe;
}

.ai-recommendation-title{
    color:var(--ai-cyan-dark);
}

.ai-choice-actions{
    padding:16px;
    border:1px solid var(--ai-line);
    border-radius:14px;
    background:var(--ai-subtle);
}

.ai-history{
    scroll-margin-top:90px;
}

.ai-history-day,
.ai-analysis-card{
    border-color:var(--ai-line);
    border-radius:12px;
    background:var(--ai-subtle);
}

.ai-analysis-pill{
    min-height:28px;
    display:inline-flex;
    align-items:center;
}

.ai-future-panel{
    background:linear-gradient(180deg,#fff,#fafbfd);
}

.future-list{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
}

.future-list li{
    min-height:72px;
    border:1px dashed var(--ai-line);
    border-radius:12px;
    color:var(--ai-muted);
    background:var(--ai-subtle);
}

.future-list span:last-child{
    min-height:28px;
    padding:0 9px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    color:var(--ai-muted);
    background:var(--ai-field);
    font-size:12px;
}

.ai-provider{
    display:none!important;
}

.footer{
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--ai-faint);
    font-size:12px;
}

#ai-match-analysis-panel,
#ai-tools{
    scroll-margin-top:90px;
}

body.is-ai-line-focus .ai-tools-panel,
body.is-ai-line-focus .ai-section-nav{
    display:none;
}

@media(max-width:900px){
    .ai-shell{
        gap:14px;
    }

    .ai-intro{
        grid-template-columns:1fr;
        padding:24px;
    }

    .ai-hero-rating{
        min-height:120px;
    }

    .ai-intro-actions{
        grid-column:auto;
    }

    .ai-trainer-panel{
        grid-template-columns:1fr;
    }

    .future-list{
        grid-template-columns:1fr;
    }
}

@media(max-width:640px){
    .ai-shell{
        gap:12px;
    }

    .ai-top{
        min-height:44px;
        display:flex;
    }

    .ai-top a{
        min-height:44px;
        display:inline-flex;
        align-items:center;
        color:var(--ai-muted);
    }

    .ai-intro,
    .ai-panel{
        border-radius:14px;
    }

    .ai-intro{
        min-height:0;
        padding:20px;
        gap:18px;
    }

    .ai-intro h1{
        font-size:28px;
    }

    .ai-intro-actions{
        display:grid;
        grid-template-columns:1fr;
    }

    .ai-section-nav{
        position:sticky;
        top:64px;
        z-index:20;
        overflow-x:auto;
    }

    .ai-section-nav a{
        flex:1 0 auto;
        justify-content:center;
    }

    .ai-panel{
        padding:18px;
    }

    .ai-section-heading,
    .ai-lab-heading{
        display:grid;
        gap:8px;
    }

    .ai-section-heading > p{
        max-width:none;
        text-align:left;
    }

    .ai-tool-grid,
    .ai-stat-grid,
    .ai-steps,
    .ai-button-row{
        grid-template-columns:1fr;
    }

    .ai-tool-card{
        grid-template-columns:42px minmax(0,1fr);
    }

    .ai-tool-card b{
        grid-column:2;
        justify-self:start;
    }

    .ai-lab-heading{
        padding:18px;
    }

    .ai-lab-rule{
        width:max-content;
        max-width:100%;
    }

    .ai-step:last-child{
        grid-column:auto;
    }

    .ai-field-footer{
        align-items:flex-start;
    }
}

@media(max-width:360px){
    .ai-panel{
        padding:14px;
    }

    .ai-intro{
        padding:16px;
    }

    .ai-intro h1{
        font-size:25px;
    }

    .ai-section-nav a{
        padding:0 12px;
    }
}

@media(prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        scroll-behavior:auto!important;
        transition:none!important;
        animation:none!important;
    }
}