/* IELTS AI — public styles. Mobile-first (360px baseline), Bangla-first UI.
   Identity "Examiner": IELTS red on white, near-black ink. Clean and
   not playful edtech. All plugin-injected controls are tag-qualified + scoped
   so host themes can't restyle them. */

:root {
    --ia-ink:      #17171B;
    --ia-ink-2:    #3A3A42;
    --ia-teal:     #E4002B;
    --ia-teal-2:   #FF3355;
    --ia-amber:    #B4541F;
    --ia-bg:       #FAFAFA;
    --ia-card:     #FFFFFF;
    --ia-line:     #E6E6EA;
    --ia-muted:    #6B6B76;
    --ia-good:     #1A7F4B;
    --ia-warn:     #B4830A;
    --ia-bad:      #C0392B;
    --ia-radius:   6px;
    --ia-shadow:   0 1px 0 rgba(23,23,27,.05), 0 2px 10px rgba(23,23,27,.06);
}

.ia-body {
    margin: 0;
    background: var(--ia-bg);
    color: var(--ia-ink);
    font-family: 'Hind Siliguri', 'Noto Sans Bengali', system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
.ia-body * { box-sizing: border-box; }
.ia-ic { flex: none; vertical-align: -.15em; }

/* ---------------------------------------------------------------- buttons */
.ia-body button.ia-btn,
.ia-body a.ia-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px !important;
    border-radius: 6px !important;
    border: 1.5px solid transparent !important;
    font: 600 15px/1 'Hind Siliguri', system-ui, sans-serif !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
    width: auto;
}
.ia-body .ia-btn--primary {
    background: linear-gradient(135deg, var(--ia-teal), var(--ia-ink-2)) !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(14,124,134,.28);
}
.ia-body .ia-btn--primary:hover { transform: translateY(-1px); }
.ia-body .ia-btn--primary:disabled { opacity: .6; cursor: default; transform: none; }
.ia-body .ia-btn--ghost {
    background: transparent !important;
    color: var(--ia-teal) !important;
    border-color: var(--ia-line) !important;
}
.ia-body .ia-btn--sm { padding: 8px 14px !important; font-size: 13.5px !important; }
.ia-body .ia-btn--lg { padding: 15px 26px !important; font-size: 16.5px !important; }
.ia-body .ia-btn--block { display: flex !important; width: 100% !important; }
.ia-body .ia-btn:focus-visible { outline: 3px solid var(--ia-teal-2); outline-offset: 2px; }

/* ------------------------------------------------------------------ cards */
.ia-card {
    background: var(--ia-card);
    border: 1px solid var(--ia-line);
    border-radius: var(--ia-radius);
    padding: 18px;
    box-shadow: var(--ia-shadow);
    margin-bottom: 14px;
}
.ia-card h3 { margin: 0 0 8px; font-size: 16.5px; }
.ia-card--center { text-align: center; }
.ia-card__ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 11px;
    background: rgba(14,124,134,.10); color: var(--ia-teal); margin-bottom: 10px;
}
.ia-h2 { font-size: 18px; margin: 4px 0 12px; }
.ia-muted { color: var(--ia-muted); font-size: 14px; }
/* Standalone links act as controls, so give them a real tap target. Links that
   sit inside a sentence keep the inline flow (see .ia-shead__s a below). */
.ia-body a.ia-link {
    display: inline-flex !important; align-items: center; gap: 4px;
    min-height: 44px; color: var(--ia-teal) !important;
    font-weight: 600 !important; text-decoration: none !important; font-size: 14px !important;
}
.ia-tag {
    display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .03em;
    color: var(--ia-teal); background: rgba(14,124,134,.10);
    padding: 5px 11px; border-radius: 999px; margin-bottom: 10px;
}

/* Every app screen's title. The mobile top bar used to be the only title, so
   desktop screens had none and their first heading was a sub-section. */
.ia-shead { margin: 0 0 16px; }
.ia-shead__h {
    margin: 0; font-size: clamp(22px, 5vw, 28px); line-height: 1.2;
    letter-spacing: -.015em; font-weight: 700;
}
.ia-shead__s { margin: 5px 0 0; font-size: 14px; color: var(--ia-muted); }
.ia-shead__s a { color: var(--ia-teal); }

/* A single headline number (Progress). Replaces .ia-bandcard, which the
   dashboard rewrite retired. */
.ia-statbar {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    background: linear-gradient(135deg, var(--ia-ink), var(--ia-ink-2));
    color: #fff; border-radius: 16px; padding: 16px 20px; margin-bottom: 14px;
}
.ia-statbar__label { font-size: 14px; color: #BFE3E6; }
.ia-statbar__label .ia-muted { color: #8FB3B6; font-size: 13px; }
.ia-statbar__val { font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }

/* =========================================================================
   LANDING — premium. Full-bleed sections, an "examiner ink" gradient hero,
   and the product's own band report as the hero visual.
   ========================================================================= */
/* The landing runs edge-to-edge; every direct child is a full-width band whose
   CONTENT is centred by side padding. One rule gives full-bleed backgrounds and
   a consistent reading width at any viewport — no negative margins, no boxing. */
.ia-content--full { max-width: none !important; padding: 0 !important; }
.ia-landing { --pad: 16px; --wrap: 1140px; }
.ia-landing > header,
.ia-landing > section,
.ia-landing > footer {
    padding-inline: max(var(--pad), calc((100% - var(--wrap)) / 2));
}
@media (min-width: 720px) { .ia-landing { --pad: 32px; } }

/* ---- nav ---- */
.ia-lnav {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: 12px;
    padding-top: 14px; padding-bottom: 14px;
    background: rgba(245,248,248,.88); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--ia-line);
}
.ia-body a.ia-lnav__brand {
    display: inline-flex !important; align-items: center; gap: 8px;
    font-weight: 800; font-size: 17px; color: var(--ia-ink) !important;
    text-decoration: none !important; margin-right: auto;
}
.ia-lnav__mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 9px; color: #fff;
    background: linear-gradient(135deg, var(--ia-teal), var(--ia-ink-2));
}
.ia-lnav__links { display: none; gap: 20px; }
@media (min-width: 780px) { .ia-lnav__links { display: flex; } }
.ia-lnav__links a { color: var(--ia-muted); text-decoration: none; font-size: 14.5px; font-weight: 600; }
.ia-lnav__links a:hover { color: var(--ia-teal); }

/* ---- hero ---- */
.ia-hero {
    position: relative; overflow: hidden;
    padding-top: 40px; padding-bottom: 48px;
    background:
        radial-gradient(1100px 420px at 12% -10%, rgba(20,160,172,.16), transparent 60%),
        radial-gradient(900px 380px at 92% 6%, rgba(201,130,27,.12), transparent 62%),
        linear-gradient(180deg, #FFFFFF 0%, var(--ia-bg) 100%);
}
.ia-hero__grid { display: grid; gap: 26px; }
/* Two columns only once there is genuinely room for them — the container, not
   just the viewport, has to be wide enough or the hero reads as cramped. */
@media (min-width: 940px) {
    .ia-hero { padding-top: 64px; padding-bottom: 72px; }
    .ia-hero__grid { grid-template-columns: 1.05fr .95fr; align-items: center; gap: 56px; }
}
.ia-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 700; color: var(--ia-teal);
    background: rgba(14,124,134,.10); padding: 6px 14px; border-radius: 999px;
    border: 1px solid rgba(14,124,134,.18);
}
.ia-hero__h1 {
    font-size: clamp(30px, 7.4vw, 54px); line-height: 1.16; margin: 18px 0 16px;
    text-wrap: balance; letter-spacing: -.015em; font-weight: 800;
}
.ia-grad {
    background: linear-gradient(120deg, var(--ia-teal) 10%, var(--ia-amber) 95%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ia-hero__sub { color: var(--ia-muted); font-size: 16.5px; max-width: 52ch; margin: 0 0 22px; }
.ia-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.ia-hero__note,
.ia-hero__trust {
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    font-size: 13px; color: var(--ia-muted); margin: 0;
}
.ia-hero__note .ia-ic { color: var(--ia-teal); flex: none; }
.ia-hero__trust { margin-top: 8px; }
.ia-hero__trust .ia-ic { color: var(--ia-teal); flex: none; }
.ia-hero__trust strong { color: var(--ia-ink); }

/* ---- the sample band report (hero visual) ---- */
.ia-demo-card {
    background: var(--ia-card); border: 1px solid var(--ia-line);
    border-radius: 20px; padding: 20px;
    box-shadow: 0 2px 0 rgba(23,23,27,.04), 0 12px 30px rgba(23,23,27,.09);
}
@media (min-width: 940px) { .ia-demo-card { padding: 26px; } }
.ia-demo-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ia-demo-card__tag {
    font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: var(--ia-teal); background: rgba(14,124,134,.10); padding: 4px 10px; border-radius: 999px;
}
.ia-demo-card__task { font-size: 12.5px; color: var(--ia-muted); }
.ia-demo-card__ring {
    width: 126px; height: 126px; margin: 0 auto 18px; border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background:
        radial-gradient(closest-side, var(--ia-card) 78%, transparent 79% 100%),
        conic-gradient(var(--ia-teal) var(--band), var(--ia-line) 0);
}
.ia-demo-card__val { font-size: 34px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.ia-demo-card__cap { font-size: 11px; color: var(--ia-muted); margin-top: 3px; }
.ia-demo-card__row {
    display: grid; grid-template-columns: 88px 1fr 30px; align-items: center;
    gap: 9px; font-size: 12.5px; margin-bottom: 8px;
}
.ia-demo-card__row strong { text-align: right; font-variant-numeric: tabular-nums; }
.ia-demo-card__track { height: 7px; background: var(--ia-line); border-radius: 999px; overflow: hidden; }
.ia-demo-card__track i { display: block; height: 100%; border-radius: 999px; }
.ia-demo-card__fix {
    margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--ia-line); font-size: 13px;
}
.ia-demo-card__bad { margin: 0 0 3px; color: var(--ia-muted); text-decoration: line-through; text-decoration-color: rgba(228,0,43,.55); }
.ia-demo-card__good { margin: 0 0 3px; color: var(--ia-ink); font-weight: 600; }
.ia-demo-card__good em { font-style: normal; color: var(--ia-teal); background: rgba(228,0,43,.10); border-radius: 3px; padding: 0 4px; font-weight: 700; }
.ia-demo-card__why { margin: 0; color: var(--ia-muted); font-size: 12px; }

/* ---- stats strip ---- */
.ia-strip {
    padding-top: 22px; padding-bottom: 22px;
    background: var(--ia-ink); color: #fff;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; text-align: center;
}
@media (min-width: 720px) { .ia-strip { grid-template-columns: repeat(4, 1fr); padding-top: 26px; padding-bottom: 26px; } }
.ia-strip strong { display: block; font-size: 22px; font-variant-numeric: tabular-nums; }
.ia-strip span { font-size: 12.5px; color: #A9CACC; }

/* ---- generic landing section ---- */
.ia-section { padding-top: 52px; padding-bottom: 8px; }
.ia-section--alt {
    margin-top: 44px; padding-top: 52px; padding-bottom: 44px;
    background: #EDF4F4; border-top: 1px solid var(--ia-line); border-bottom: 1px solid var(--ia-line);
}
@media (min-width: 940px) {
    .ia-section { padding-top: 72px; }
    .ia-section--alt { margin-top: 64px; padding-top: 72px; padding-bottom: 64px; }
}
.ia-kicker {
    display: block; text-align: center; margin-bottom: 8px;
    font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ia-teal);
}
.ia-sh { font-size: clamp(21px, 5.4vw, 30px); text-align: center; margin: 0 0 8px; letter-spacing: -.01em; }
.ia-sub { text-align: center; color: var(--ia-muted); font-size: 15px; max-width: 54ch; margin: 0 auto 22px; }
.ia-note { text-align: center; color: var(--ia-muted); font-size: 13px; margin: 16px auto 0; max-width: 60ch; }
.ia-grid { display: grid; gap: 14px; }
@media (min-width: 680px) { .ia-grid { grid-template-columns: 1fr 1fr; gap: 18px; } }
/* Four skill cards read better as a single row of four on a real desktop. */
@media (min-width: 1100px) { .ia-skills-4 { grid-template-columns: repeat(4, 1fr); } }

/* ---- skill cards ---- */
.ia-fcard {
    background: var(--ia-card); border: 1px solid var(--ia-line);
    border-radius: var(--ia-radius); padding: 20px; box-shadow: var(--ia-shadow);
}
.ia-fcard__ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 12px; margin-bottom: 12px;
    background: rgba(14,124,134,.10); color: var(--ia-teal);
}
.ia-fcard h3 { margin: 0 0 8px; font-size: 17.5px; display: flex; align-items: center; gap: 8px; }
.ia-fcard__ai {
    font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
    background: linear-gradient(135deg, var(--ia-teal), var(--ia-amber));
    color: #fff; padding: 3px 8px; border-radius: 999px;
}
.ia-fcard p { margin: 0 0 10px; color: var(--ia-muted); font-size: 14.5px; }
.ia-fcard__meta { font-size: 12.5px; color: var(--ia-teal); font-weight: 600; }

/* ---- audience cards ---- */
.ia-aud { display: grid; gap: 12px; }
@media (min-width: 680px)  { .ia-aud { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .ia-aud { grid-template-columns: repeat(4, 1fr); } }
.ia-aud__card {
    background: var(--ia-card); border: 1px solid var(--ia-line);
    border-radius: var(--ia-radius); padding: 18px;
    border-top: 3px solid var(--ia-teal);
}
.ia-aud__card strong { display: block; font-size: 16px; margin-bottom: 5px; }
.ia-aud__card span { font-size: 14px; color: var(--ia-muted); }

/* ---- how it works ---- */
.ia-steps { display: grid; gap: 12px; }
@media (min-width: 780px) { .ia-steps { grid-template-columns: repeat(3, 1fr); } }
.ia-hstep {
    background: var(--ia-card); border: 1px solid var(--ia-line);
    border-radius: var(--ia-radius); padding: 20px; position: relative;
}
.ia-hstep__n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%; margin-bottom: 12px;
    background: linear-gradient(135deg, var(--ia-teal), var(--ia-ink-2));
    color: #fff; font-weight: 800; font-size: 15px;
}
.ia-hstep h3 { margin: 0 0 6px; font-size: 16.5px; }
.ia-hstep p { margin: 0; color: var(--ia-muted); font-size: 14.5px; }

/* ---- band criteria list ---- */
.ia-crit { background: var(--ia-card); border: 1px solid var(--ia-line); border-radius: var(--ia-radius); overflow: hidden; }
.ia-crit__row {
    display: grid; gap: 3px; padding: 14px 18px; border-top: 1px solid var(--ia-line);
}
.ia-crit__row:first-child { border-top: 0; }
.ia-crit__row strong { font-size: 15px; color: var(--ia-teal); }
.ia-crit__row span { font-size: 14px; color: var(--ia-muted); }

/* ---- comparison ---- */
.ia-cmp { display: grid; gap: 12px; }
@media (min-width: 720px) { .ia-cmp { grid-template-columns: 1fr 1fr; } }
.ia-cmp__col { background: var(--ia-card); border: 1px solid var(--ia-line); border-radius: var(--ia-radius); padding: 20px; }
.ia-cmp__col h3 { margin: 0 0 12px; font-size: 16.5px; color: var(--ia-muted); }
.ia-cmp__col ul { margin: 0; padding-left: 18px; }
.ia-cmp__col li { font-size: 14.5px; margin: 8px 0; color: var(--ia-muted); }
.ia-cmp__col--win { border-color: var(--ia-teal); box-shadow: 0 6px 20px rgba(14,124,134,.12); }
.ia-cmp__col--win h3 { color: var(--ia-teal); }
.ia-cmp__col--win li { color: var(--ia-ink); }

/* ---- FAQ ---- */
.ia-faq { max-width: 720px; margin: 0 auto; }
.ia-faq__item {
    background: var(--ia-card); border: 1px solid var(--ia-line);
    border-radius: 12px; padding: 14px 16px; margin-bottom: 9px;
}
.ia-faq__item summary { cursor: pointer; font-weight: 600; font-size: 15px; list-style: none; }
.ia-faq__item summary::-webkit-details-marker { display: none; }
.ia-faq__item summary::after { content: '+'; float: right; color: var(--ia-teal); font-size: 19px; line-height: 1; }
.ia-faq__item[open] summary::after { content: '–'; }
.ia-faq__item p { margin: 10px 0 0; font-size: 14.5px; color: var(--ia-muted); }

/* ---- footer CTA ---- */
.ia-fcta {
    margin-top: 52px; padding-top: 56px; padding-bottom: 56px;
    background: linear-gradient(135deg, var(--ia-ink), var(--ia-teal));
    color: #fff; text-align: center;
}
.ia-fcta h2 { margin: 0 0 8px; font-size: clamp(21px, 5.4vw, 28px); }
.ia-fcta p { margin: 0 0 20px; color: #C4E4E6; font-size: 15.5px; }
.ia-body a.ia-btn--onDark {
    background: #fff !important; color: var(--ia-ink) !important;
    border-color: #fff !important; box-shadow: 0 4px 14px rgba(0,0,0,.18);
}

/* ----------------------------------------------------------------- login */
.ia-login { padding-top: 52px; padding-bottom: 8px; }
@media (min-width: 940px) { .ia-login { padding-top: 72px; } }
.ia-login__grid { display: grid; gap: 24px; align-items: center; }
@media (min-width: 940px) { .ia-login__grid { grid-template-columns: 1fr 440px; gap: 48px; } }
.ia-login__pitch .ia-kicker { text-align: left; }
.ia-login__h { font-size: clamp(22px, 5vw, 30px); margin: 0 0 8px; letter-spacing: -.01em; }
.ia-benefits { list-style: none; margin: 18px 0 0; padding: 0; }
.ia-benefits li { display: flex; align-items: flex-start; gap: 9px; font-size: 15px; margin: 11px 0; }
.ia-benefits .ia-ic { color: var(--ia-teal); margin-top: 3px; flex: none; }
.ia-safe { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; color: var(--ia-muted); margin: 18px 0 0; }
.ia-safe .ia-ic { color: var(--ia-teal); margin-top: 2px; flex: none; }
.ia-login__card {
    background: var(--ia-card); border: 1px solid var(--ia-line);
    border-radius: 18px; padding: 24px; box-shadow: var(--ia-shadow);
    max-width: 440px; margin: 0 auto; width: 100%;
}
.ia-login__card h3 { margin: 0 0 4px; font-size: 21px; }
.ia-label { display: block; font-size: 13.5px; font-weight: 600; margin: 14px 0 6px; }
.ia-body input.ia-input,
.ia-body select.ia-input,
.ia-body textarea.ia-textarea {
    width: 100% !important;
    padding: 13px 14px !important;
    border: 1.5px solid var(--ia-line) !important;
    border-radius: 12px !important;
    font: 400 16px/1.5 'Hind Siliguri', system-ui, sans-serif !important;
    background: #FBFDFD !important;
    color: var(--ia-ink) !important;
}
.ia-body input.ia-input:focus,
.ia-body textarea.ia-textarea:focus,
.ia-body select.ia-input:focus {
    outline: none !important;
    border-color: var(--ia-teal) !important;
    box-shadow: 0 0 0 3px rgba(14,124,134,.14) !important;
}
/* Login wizard step. Deliberately NOT .ia-step — that class is the study-plan
   card (a flex row) and it squeezed this whole form onto one line. */
.ia-fstep { display: block; }
.ia-phone { display: flex !important; align-items: stretch; gap: 8px; }
.ia-phone span {
    flex: none; display: inline-flex; align-items: center; padding: 0 12px;
    background: rgba(14,124,134,.08); border-radius: 12px;
    font-weight: 600; color: var(--ia-teal); font-size: 14.5px;
}
/* The number needs every pixel that's left: grow into the row, and allow
   shrinking below the intrinsic width so a long placeholder can't push it out. */
.ia-phone input.ia-input { flex: 1 1 auto !important; min-width: 0 !important; }
/* The OTP field is the entire second step — make it the obvious target. */
.ia-body input.ia-input--otp {
    text-align: center !important; letter-spacing: .45em !important;
    font-size: 22px !important; font-weight: 700 !important;
    padding-left: 4px !important; padding-right: 0 !important;
}
.ia-body button.ia-linkbtn {
    display: block !important; margin: 12px auto 0 !important; padding: 4px 8px !important;
    background: none !important; border: 0 !important; box-shadow: none !important;
    color: var(--ia-muted) !important; font: 600 13.5px/1.4 'Hind Siliguri', system-ui, sans-serif !important;
    text-decoration: underline !important; cursor: pointer !important; width: auto !important;
}
.ia-body button.ia-linkbtn:hover { color: var(--ia-teal) !important; }
.ia-flow .ia-btn { margin-top: 14px; }
.ia-msg { font-size: 14px; margin: 10px 0 0; min-height: 20px; color: var(--ia-bad); }
.ia-msg[data-kind="ok"]   { color: var(--ia-good); }
.ia-msg[data-kind="warn"] { color: var(--ia-warn); }
.ia-demo { font-size: 13px; color: var(--ia-muted); text-align: center; margin: 12px 0 0; }
.ia-charge {
    font-size: 12.5px; color: var(--ia-muted); text-align: center;
    margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--ia-line);
}
.ia-foot { text-align: center; font-size: 12.5px; color: var(--ia-muted); padding: 26px 0 32px; }
.ia-foot p { margin: 0 0 4px; }
.ia-foot__sub { font-size: 12px; opacity: .85; }

/* ------------------------------------------------------------ app shell */
.ia-main { min-height: 100vh; }
.ia-has-side .ia-main { padding-left: 0; }
@media (min-width: 960px) { .ia-has-side .ia-main { padding-left: 236px; } }
.ia-topbar {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: 12px;
    background: rgba(245,248,248,.92); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--ia-line); padding: 10px 14px;
}
@media (min-width: 960px) { .ia-topbar { display: none; } }
.ia-body button.ia-topbar__menu {
    width: 40px !important; height: 40px !important; min-width: 0;
    display: inline-flex !important; flex-direction: column; gap: 4px;
    align-items: center; justify-content: center;
    background: transparent !important; border: 1px solid var(--ia-line) !important;
    border-radius: 11px !important; padding: 0 !important; cursor: pointer;
}
.ia-topbar__menu span { display: block; width: 16px; height: 2px; background: var(--ia-ink); border-radius: 2px; }
.ia-topbar__title { font-weight: 700; font-size: 16px; }
.ia-content { padding: 16px 14px 60px; max-width: 780px; margin: 0 auto; }
/* These screens are workspaces, not articles: a 780px column on a 1600px
   monitor left the app marooned in empty space. Each widens to the layout it
   actually needs, and the two-column rules below keep line length comfortable
   inside that width. */
/* Generic component widths first, so the page-specific rules below win on
   source order (they have equal specificity). */
.ia-content:has(.ia-cards2)    { max-width: 1000px; }
.ia-content:has(.ia-hist)      { max-width: 1060px; }
.ia-content:has(.ia-dash)      { max-width: 1060px; }
.ia-content:has(.ia-reading)   { max-width: 1160px; }
.ia-content:has(.ia-listening) { max-width: 1160px; }
.ia-content:has(.ia-writing)   { max-width: 1160px; }
.ia-content:has(.ia-speaking)  { max-width: 1160px; }
.ia-content:has(.ia-mock)      { max-width: 1060px; }
@media (min-width: 1000px) { .ia-content { padding: 24px 24px 72px; } }

/* Writing / Speaking: the task sits beside the answer box, not above it. The
   answer column is the wider one — it's where the work happens. */
.ia-work { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) {
    .ia-work { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 20px; align-items: start; }
    .ia-work__side { position: sticky; top: 16px; }
    /* Room to actually write, now that the prompt isn't stacked above it. */
    .ia-work .ia-textarea { min-height: clamp(320px, 54vh, 560px) !important; }
    .ia-work .ia-textarea--sm { min-height: clamp(200px, 32vh, 320px) !important; }
}
.ia-work__side > .ia-card:last-child,
.ia-work__main > section:last-child { margin-bottom: 0; }

/* Two cards abreast (Account, ব্যান্ড ও প্ল্যান). Columns stretch so the two
   cards end level instead of leaving a ragged hole under the shorter one. */
.ia-cards2 { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) {
    .ia-cards2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
    .ia-cards2 > .ia-card { margin-bottom: 0; display: flex; flex-direction: column; }
    /* Push the last block (logout / danger zone) to the card's foot. */
    .ia-cards2 > .ia-card > .ia-acct__out,
    .ia-cards2 > .ia-card > .ia-danger { margin-top: auto; }
}

/* Reading: passage beside questions on a wide screen (as in the real
   computer-delivered test), stacked on a phone. The passage scrolls inside its
   own card so the two columns move independently. */
.ia-split { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) {
    .ia-split { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); align-items: start; gap: 20px; }
    .ia-split .ia-passage {
        position: sticky; top: 16px;
        max-height: calc(100vh - 32px); overflow-y: auto;
    }
}

.ia-side {
    position: fixed; inset: 0 auto 0 0; width: 236px; z-index: 40;
    background: var(--ia-ink); color: #DCEDEE;
    display: flex; flex-direction: column;
    transform: translateX(-100%); transition: transform .22s ease;
}
.ia-side.is-open { transform: none; }
@media (min-width: 960px) { .ia-side { transform: none; } }
.ia-side__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 14px; }
.ia-side__brand { display: inline-flex; align-items: center; min-height: 44px; gap: 9px; color: #fff; text-decoration: none; font-weight: 700; }
.ia-side__mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 9px;
    background: linear-gradient(135deg, var(--ia-teal), var(--ia-teal-2)); color: #fff;
}
.ia-body button.ia-side__close {
    width: 32px !important; height: 32px !important; min-width: 0; padding: 0 !important;
    border-radius: 50% !important; border: 0 !important;
    background: rgba(255,255,255,.1) !important; color: #fff !important;
    font-size: 20px !important; line-height: 1 !important; cursor: pointer;
}
@media (min-width: 960px) { .ia-side__close { display: none !important; } }
.ia-side__nav { display: flex; flex-direction: column; gap: 2px; padding: 8px; flex: 1; }
.ia-side__link {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 13px; border-radius: 11px;
    color: #B7D2D4; text-decoration: none; font-size: 15px; font-weight: 600;
}
.ia-side__link:hover { background: rgba(255,255,255,.06); color: #fff; }
.ia-side__link.is-active { background: rgba(20,160,172,.20); color: #fff; }
.ia-side__foot { padding: 14px; border-top: 1px solid rgba(255,255,255,.08); }
.ia-side__user { font-size: 13px; color: #9FBFC1; margin-bottom: 8px; }
.ia-side__foot .ia-btn--ghost { color: #DCEDEE !important; border-color: rgba(255,255,255,.18) !important; }
.ia-scrim { position: fixed; inset: 0; background: rgba(23,23,27,.55); z-index: 30; }
@media (min-width: 960px) { .ia-scrim { display: none; } }

/* ------------------------------------------------------------- app screens */
.ia-screen { padding-bottom: 20px; }
/* ---------------------------------------------------------------- dashboard */
.ia-dash__top {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; margin-bottom: 14px;
}
.ia-dash__hi { margin: 0; font-size: 14px; color: var(--ia-muted); }
.ia-dash__h1 { margin: 2px 0 0; font-size: clamp(19px, 4.6vw, 24px); line-height: 1.25; letter-spacing: -.01em; }
.ia-streak {
    flex: none; display: inline-flex; align-items: center; gap: 5px;
    background: rgba(180,131,10,.12); color: #8A6407;
    border-radius: 999px; padding: 7px 12px; font-size: 13.5px; white-space: nowrap;
}
.ia-streak strong { font-size: 15px; font-variant-numeric: tabular-nums; }

/* The one recommended action. Deliberately the only filled CTA on the screen. */
.ia-next {
    background: linear-gradient(135deg, var(--ia-teal), var(--ia-ink));
    color: #fff; border-radius: 18px; padding: 20px; margin-bottom: 16px;
    box-shadow: 0 6px 22px rgba(14,124,134,.24);
}
.ia-next__kicker {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: #BFE3E6; margin-bottom: 8px;
}
.ia-next__why { margin: 0 0 6px; font-size: 15.5px; line-height: 1.55; }
.ia-next__task {
    margin: 0 0 14px; font-size: 14px; color: #DCF0F1;
    background: rgba(255,255,255,.10); border-radius: 10px; padding: 9px 12px;
}
.ia-body a.ia-next__go {
    background: #fff !important; color: var(--ia-ink) !important;
    border-color: #fff !important; box-shadow: 0 4px 14px rgba(0,0,0,.16) !important;
}

/* Every track here is minmax(0,…), never a bare 1fr or auto: grid items default
   to min-width:auto, so one nowrap task title sets a max-content floor and the
   whole column overflows the page. Applies to the columns AND to each column's
   own implicit track. */
.ia-dash__grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) {
    .ia-dash__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
.ia-dash__col { display: grid; gap: 14px; align-content: start; grid-template-columns: minmax(0, 1fr); }

/* Band ring — progress at a glance, with the number as the real value. */
.ia-bandring { display: flex; align-items: center; gap: 18px; }
.ia-ring {
    flex: none; width: 104px; height: 104px; border-radius: 50%;
    display: grid; place-content: center; text-align: center;
    background: conic-gradient(var(--ring, var(--ia-teal)) var(--pct, 0%), var(--ia-line) 0);
    position: relative;
}
.ia-ring::before {
    content: ''; position: absolute; inset: 9px; border-radius: 50%; background: var(--ia-card);
}
.ia-ring__val, .ia-ring__cap { position: relative; display: block; }
.ia-ring__val { font-size: 30px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.ia-ring__cap { font-size: 12.5px; color: var(--ia-muted); margin-top: 3px; }
.ia-bandring__side { min-width: 0; }
.ia-bandring__t { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.ia-bandring__gap { margin: 0 0 8px; font-size: 13.5px; color: var(--ia-muted); }
.ia-bandring__gap.is-met { color: var(--ia-good); font-weight: 600; }
.ia-chip {
    display: inline-block; font-size: 11px; font-weight: 700; border-radius: 999px;
    padding: 2px 7px; vertical-align: middle;
}
.ia-chip--warn { background: rgba(180,131,10,.14); color: #8A6407; }

/* Four skills, Listening included — the old strip showed only three. */
.ia-skillgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
@media (min-width: 620px) and (max-width: 999px) { .ia-skillgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ia-body a.ia-skilltile {
    display: block !important; text-decoration: none !important; color: var(--ia-ink) !important;
    background: var(--ia-card) !important; border: 1px solid var(--ia-line) !important;
    border-radius: 14px !important; padding: 13px !important;
}
.ia-body a.ia-skilltile:hover { border-color: var(--ia-teal) !important; }
.ia-skilltile.is-new { border-style: dashed !important; }
.ia-skilltile__top { display: flex; align-items: center; gap: 6px; color: var(--ia-muted); }
.ia-skilltile__name { font-size: 12.5px; font-weight: 600; }
.ia-skilltile__done {
    margin-left: auto; color: var(--ia-good); display: inline-flex;
}
.ia-skilltile__val {
    display: block; font-size: 26px; font-weight: 800; line-height: 1.15;
    margin: 4px 0 6px; font-variant-numeric: tabular-nums;
}
.ia-skilltile__bar { display: block; height: 5px; background: var(--ia-line); border-radius: 999px; overflow: hidden; }
.ia-skilltile__bar i { display: block; height: 100%; border-radius: 999px; }
.ia-skilltile__meta { display: block; margin-top: 6px; font-size: 12.5px; color: var(--ia-muted); }

/* Today's four items as a list, not four full-height cards. */
.ia-today .ia-h2 { margin-bottom: 6px; }
.ia-body a.ia-todo {
    display: flex !important; align-items: center; gap: 11px;
    padding: 11px 0 !important; border-top: 1px solid var(--ia-line);
    text-decoration: none !important; color: var(--ia-ink) !important;
}
.ia-body a.ia-todo:first-of-type { border-top: 0; }
.ia-todo__ic {
    flex: none; width: 32px; height: 32px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(14,124,134,.10); color: var(--ia-teal);
}
.ia-todo.is-done .ia-todo__ic { background: rgba(26,127,75,.12); color: var(--ia-good); }
.ia-todo__body { min-width: 0; flex: 1 1 auto; }
.ia-todo__name { display: block; font-size: 13px; font-weight: 600; }
.ia-todo__txt {
    display: block; font-size: 13px; color: var(--ia-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ia-todo__go { flex: none; color: var(--ia-muted); }
.ia-todo:hover .ia-todo__go { color: var(--ia-teal); }
.ia-quota {
    display: flex; align-items: center; gap: 8px;
    font-size: 13.5px; color: var(--ia-muted);
    background: var(--ia-card); border: 1px solid var(--ia-line);
    border-radius: 12px; padding: 11px 14px; margin-bottom: 14px;
}
.ia-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--ia-line); }
.ia-row:first-of-type { border-top: 0; }
.ia-row__band {
    flex: none; width: 42px; height: 30px; border-radius: 8px; color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums;
}
.ia-row__txt { font-size: 14px; color: var(--ia-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ia-recent { background: var(--ia-card); border: 1px solid var(--ia-line); border-radius: var(--ia-radius); padding: 16px; }
.ia-dash .ia-quota { margin-bottom: 0; }

/* ---------------------------------------------------------- writing screen */
.ia-prompt__txt { font-size: 16px; margin: 0 0 10px; }
.ia-prompt__meta { font-size: 13px; color: var(--ia-muted); margin: 0; }
.ia-editor { margin-bottom: 16px; }
/* Was a flat 260px min-height, which on a 390px phone left a near-empty box
   filling the screen. Scale with the viewport instead, and cap it so the
   action bar stays reachable without scrolling on a laptop. */
.ia-body textarea.ia-textarea {
    min-height: clamp(200px, 38vh, 340px); resize: vertical; line-height: 1.7;
}
/* A spoken answer is a couple of paragraphs, not an essay — and the Speaking
   screen has the recorder above the box competing for the same screen. */
.ia-body textarea.ia-textarea--sm { min-height: clamp(150px, 26vh, 230px); }
.ia-editor__bar {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px; margin-top: 10px;
}
.ia-wc { font-size: 14px; color: var(--ia-muted); font-variant-numeric: tabular-nums; }
.ia-wc.is-low { color: var(--ia-teal); }
/* The submit is the screen's primary action — full width on a phone, where a
   right-floated button is both easy to miss and awkward to reach. */
@media (max-width: 560px) {
    .ia-editor__bar { flex-direction: column; align-items: stretch; }
    .ia-editor__bar .ia-wc { order: 2; text-align: center; }
    .ia-body .ia-editor__bar .ia-btn { order: 1; width: 100% !important; }
}
.ia-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ia-body a.ia-chip {
    display: inline-flex !important; align-items: center; min-height: 44px !important;
    padding: 7px 15px !important; border-radius: 6px !important;
    background: var(--ia-card) !important; border: 1px solid var(--ia-line) !important;
    font-size: 13.5px !important; color: var(--ia-ink) !important; text-decoration: none !important;
}
.ia-body a.ia-chip:hover { border-color: var(--ia-teal); color: var(--ia-teal); }

/* ------------------------------------------------------- the band result */
.ia-result { margin-top: 8px; opacity: 0; transform: translateY(10px); }
.ia-result.is-in { opacity: 1; transform: none; transition: opacity .45s ease, transform .45s ease; }
@media (prefers-reduced-motion: reduce) { .ia-result, .ia-result.is-in { transition: none; transform: none; opacity: 1; } }

.ia-score { display: flex; justify-content: center; margin: 6px 0 18px; }
.ia-score__ring {
    position: relative; width: 168px; height: 168px; border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background:
        radial-gradient(closest-side, var(--ia-card) 79%, transparent 80% 100%),
        conic-gradient(var(--ia-teal) var(--band), var(--ia-line) 0);
    box-shadow: var(--ia-shadow);
}
.ia-score__val { font-size: 46px; font-weight: 800; color: var(--ia-ink); font-variant-numeric: tabular-nums; line-height: 1; }
.ia-score__cap { font-size: 12.5px; color: var(--ia-muted); margin-top: 4px; }

.ia-bands { background: var(--ia-card); border: 1px solid var(--ia-line); border-radius: var(--ia-radius); padding: 16px; margin-bottom: 14px; }
.ia-bband { margin-bottom: 12px; }
.ia-bband__top { display: flex; justify-content: space-between; font-size: 14.5px; margin-bottom: 5px; }
.ia-bband__top strong { font-variant-numeric: tabular-nums; }
.ia-bband__track { height: 8px; background: var(--ia-line); border-radius: 999px; overflow: hidden; }
.ia-bband__track i { display: block; height: 100%; border-radius: 999px; }
.ia-bfb { font-size: 13.5px; color: var(--ia-muted); margin: 0 0 14px; }

.ia-good h3  { color: var(--ia-ink); }
.ia-improve h3 { color: var(--ia-teal); }
.ia-corr h3  { color: var(--ia-teal); }
.ia-card ul { margin: 0; padding-left: 20px; }
.ia-card li { margin: 6px 0; font-size: 14.5px; }
.ia-corr__row { border-top: 1px solid var(--ia-line); padding: 12px 0; }
.ia-corr__row:first-of-type { border-top: 0; padding-top: 0; }
.ia-corr__bad  { margin: 0 0 4px; font-size: 14.5px; color: var(--ia-bad); text-decoration: line-through; }
.ia-corr__good { margin: 0 0 4px; font-size: 14.5px; color: var(--ia-good); font-weight: 600; }
.ia-corr__why  { margin: 0; font-size: 13px; color: var(--ia-muted); }
.ia-model p { font-size: 15px; margin: 0 0 10px; }

/* -------------------------------------------------------- speaking screen */
.ia-cue { white-space: pre-line; }
.ia-prep { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.ia-prep__t { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ia-amber); font-size: 17px; }
.ia-modes { display: flex; gap: 8px; margin-bottom: 12px; }
.ia-body button.ia-mode {
    flex: 1; padding: 11px 12px !important; border-radius: 12px !important;
    border: 1.5px solid var(--ia-line) !important; background: var(--ia-card) !important;
    color: var(--ia-muted) !important; font: 600 14px 'Hind Siliguri', system-ui, sans-serif !important;
    cursor: pointer; display: inline-flex !important; align-items: center; justify-content: center; gap: 6px;
}
.ia-body button.ia-mode.is-active {
    border-color: var(--ia-teal) !important; color: var(--ia-teal) !important;
    background: rgba(14,124,134,.07) !important;
}
.ia-rec {
    display: flex; align-items: center; gap: 14px;
    background: var(--ia-card); border: 1px solid var(--ia-line);
    border-radius: var(--ia-radius); padding: 14px; margin-bottom: 12px;
}
.ia-body button.ia-recbtn {
    width: 58px !important; height: 58px !important; min-width: 0; padding: 0 !important;
    border-radius: 50% !important; border: 0 !important;
    background: linear-gradient(135deg, var(--ia-teal), var(--ia-ink-2)) !important;
    color: #fff !important; cursor: pointer; flex: none;
    display: inline-flex !important; align-items: center; justify-content: center;
    box-shadow: 0 3px 12px rgba(14,124,134,.3);
}
.ia-body button.ia-recbtn.is-rec {
    background: linear-gradient(135deg, #C0392B, #8E2B22) !important;
    animation: ia-pulse 1.4s ease-in-out infinite;
}
@keyframes ia-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(192,57,43,.45); } 50% { box-shadow: 0 0 0 12px rgba(192,57,43,0); } }
@media (prefers-reduced-motion: reduce) { .ia-body button.ia-recbtn.is-rec { animation: none; } }
.ia-rec__time { display: block; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ia-rec__hint { font-size: 13px; color: var(--ia-muted); }
.ia-bband.is-na .ia-bband__top strong { color: var(--ia-muted); }
.ia-body a.ia-chip.is-on { border-color: var(--ia-teal); color: var(--ia-teal); background: rgba(14,124,134,.07); }

/* --------------------------------------------------------- reading screen */
.ia-rmeta { display: flex; gap: 16px; font-size: 13.5px; color: var(--ia-muted); }
.ia-rmeta span { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.ia-passage { max-height: 46vh; overflow-y: auto; }
.ia-passage p { font-size: 15.5px; line-height: 1.75; margin: 0 0 14px; }
.ia-qs { margin-top: 4px; }
.ia-q {
    background: var(--ia-card); border: 1px solid var(--ia-line);
    border-radius: var(--ia-radius); padding: 16px; margin-bottom: 12px;
}
.ia-q.is-right { border-color: rgba(26,127,75,.45); background: rgba(26,127,75,.04); }
.ia-q.is-wrong { border-color: rgba(192,57,43,.4); background: rgba(192,57,43,.04); }
.ia-q__t { margin: 0 0 4px; font-size: 15.5px; }
.ia-q__n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 7px; margin-right: 6px;
    background: rgba(14,124,134,.10); color: var(--ia-teal);
    font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.ia-q__type { margin: 0 0 10px; font-size: 12.5px; color: var(--ia-muted); letter-spacing: .02em; }
.ia-opts { display: flex; flex-direction: column; gap: 8px; }
/* The whole row is the tap target (44px+), not the 13px native box inside it —
   answering a Reading question on a phone shouldn't need a precise tap. */
.ia-opt {
    display: flex; align-items: center; gap: 11px; cursor: pointer;
    min-height: 46px; padding: 10px 12px;
    border: 1.5px solid var(--ia-line); border-radius: 10px;
    font-size: 14.5px; background: #FBFDFD;
}
.ia-opt:hover { border-color: var(--ia-teal); }
.ia-opt:focus-within { border-color: var(--ia-teal); box-shadow: 0 0 0 3px rgba(14,124,134,.14); }
.ia-opt:has(input:checked) { border-color: var(--ia-teal); background: rgba(14,124,134,.06); }
.ia-body .ia-opt input {
    flex: none; width: 20px !important; height: 20px !important; margin: 0 !important;
    accent-color: var(--ia-teal);
}
.ia-body input.ia-fill { margin-top: 2px; min-height: 46px; }
.ia-q__fb { margin-top: 10px; font-size: 13.5px; display: flex; flex-direction: column; gap: 4px; }
.ia-ok { color: var(--ia-good); }
.ia-no { color: var(--ia-bad); }
.ia-why { color: var(--ia-muted); }

/* ------------------------------------------------------- listening screen */
.ia-player { text-align: center; }
.ia-player__meta {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    flex-wrap: wrap; margin-top: 12px; font-size: 13.5px; color: var(--ia-muted);
}
.ia-speed { display: inline-flex; align-items: center; gap: 7px; }
.ia-body .ia-speed select.ia-input { width: auto !important; padding: 7px 10px !important; font-size: 14px !important; }
.ia-transcript { margin-top: 14px; text-align: left; }
.ia-transcript summary { cursor: pointer; font-size: 13.5px; color: var(--ia-teal); font-weight: 600; }
.ia-transcript p { font-size: 14.5px; line-height: 1.75; color: var(--ia-muted); margin: 10px 0 0; }

/* ------------------------------------------------------ mock + prediction */
.ia-predict { margin-bottom: 6px; }
.ia-provisional {
    text-align: center; font-size: 13.5px; color: var(--ia-warn);
    background: rgba(180,131,10,.08); border-radius: 12px; padding: 10px 14px; margin: 0 0 12px;
}
.ia-targetline { text-align: center; font-size: 15px; font-weight: 600; margin: 0 0 14px; color: var(--ia-muted); }
.ia-targetline.is-met { color: var(--ia-good); }
.ia-skills { background: var(--ia-card); border: 1px solid var(--ia-line); border-radius: var(--ia-radius); padding: 16px; margin-bottom: 14px; }
.ia-plan { margin-bottom: 14px; }
.ia-step {
    display: flex; gap: 12px; background: var(--ia-card);
    border: 1px solid var(--ia-line); border-left-width: 4px;
    border-radius: var(--ia-radius); padding: 14px; margin-bottom: 10px;
}
.ia-step.is-urgent { border-left-color: var(--ia-amber); }
.ia-step:not(.is-urgent) { border-left-color: var(--ia-teal); }
.ia-step__n {
    flex: none; width: 26px; height: 26px; border-radius: 50%;
    background: rgba(14,124,134,.10); color: var(--ia-teal);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px;
}
.ia-step__why { margin: 0 0 10px; font-size: 14.5px; }
.ia-mockgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.ia-body a.ia-mockcard {
    display: flex !important; flex-direction: column; gap: 3px;
    padding: 14px !important; border: 1px solid var(--ia-line) !important;
    border-radius: 12px !important; background: #FBFDFD !important;
    text-decoration: none !important; color: var(--ia-ink) !important;
}
.ia-body a.ia-mockcard:hover { border-color: var(--ia-teal) !important; }
.ia-mockcard strong { font-size: 15px; }
.ia-mockcard .ia-muted { font-size: 12.5px; }

/* ------------------------------------------------------------- progress */
/* History reads as a two-column card grid on a wide screen rather than one
   narrow ribbon down the middle of an empty page. */
@media (min-width: 900px) {
    .ia-hist { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
    .ia-hist .ia-hist__row { margin-bottom: 0; }
}
.ia-hist__row { display: flex; gap: 12px; background: var(--ia-card); border: 1px solid var(--ia-line); border-radius: var(--ia-radius); padding: 14px; margin-bottom: 10px; }
.ia-hist__prompt { margin: 0 0 4px; font-size: 14.5px; }
.ia-hist__meta { margin: 0 0 6px; font-size: 12.5px; color: var(--ia-muted); }
.ia-hist__bands { margin: 0; display: flex; flex-wrap: wrap; gap: 10px; font-size: 12.5px; color: var(--ia-muted); }
.ia-hist__bands strong { color: var(--ia-ink); font-variant-numeric: tabular-nums; }
.ia-kv { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--ia-line); font-size: 14.5px; }
.ia-kv:first-of-type { border-top: 0; }
.ia-kv__note { margin: 6px 0 0; font-size: 12.5px; }

/* Subscription state — never colour alone, the word carries the meaning. */
.ia-badge {
    display: inline-flex; align-items: center; gap: 5px;
    border-radius: 999px; padding: 3px 11px; font-size: 13px; font-weight: 700;
}
.ia-badge.is-on  { background: rgba(26,127,75,.12);  color: var(--ia-good); }
.ia-badge.is-off { background: rgba(192,57,43,.10);  color: var(--ia-bad); }

/* Destructive zone: separated from the card's normal content and from the
   primary actions, per the "don't put delete next to save" rule. */
.ia-danger {
    margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--ia-line);
}
.ia-danger__t { margin: 0 0 3px; font-size: 14.5px; font-weight: 600; }
.ia-danger__s { margin: 0 0 12px; font-size: 13.5px; color: var(--ia-muted); }
.ia-danger__alt { margin: 12px 0 0; font-size: 12.5px; }
.ia-danger--off .ia-danger__s { color: var(--ia-muted); }
.ia-body button.ia-btn--danger {
    background: transparent !important; color: var(--ia-bad) !important;
    border-color: rgba(192,57,43,.42) !important; box-shadow: none !important;
}
.ia-body button.ia-btn--danger:hover {
    background: rgba(192,57,43,.07) !important; border-color: var(--ia-bad) !important;
}
.ia-confirm {
    margin-top: 10px; padding: 12px 14px; border-radius: 12px;
    background: rgba(192,57,43,.05); border: 1px solid rgba(192,57,43,.22);
}
.ia-confirm p { margin: 0 0 10px; font-size: 13.5px; }
.ia-confirm__row { display: flex; flex-wrap: wrap; gap: 8px; }

/* Logout is an account action, not a page-level one — it belongs inside the
   profile card, pushed to the bottom so the two cards end level. */
.ia-acct__out { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ia-line); }

/* ---------------------------------------------------- the six questions
   Ruled list, not cards: the "Examiner" identity leans on hairlines and a
   left rule rather than the floating-card look the sibling build uses, so the
   two pages differ in silhouette as well as palette. */
.ia-qa { display: grid; gap: 0; margin-top: 22px; border-top: 1px solid var(--ia-line); }
.ia-qa__item {
    display: grid; grid-template-columns: minmax(190px, 34%) 1fr; gap: 4px 26px;
    padding: 16px 4px 16px 16px;
    border-bottom: 1px solid var(--ia-line);
    border-left: 3px solid transparent;
    transition: border-color .15s ease, background .15s ease;
}
.ia-qa__item:hover { border-left-color: var(--ia-teal); background: rgba(228,0,43,.03); }
.ia-qa__q { color: var(--ia-ink); font-weight: 700; font-size: 15.5px; line-height: 1.45; }
.ia-qa__a { color: var(--ia-muted); font-size: 14.5px; line-height: 1.6; }
@media (max-width: 640px) {
    .ia-qa__item { grid-template-columns: 1fr; padding: 14px 4px 14px 12px; gap: 5px; }
    .ia-qa__q { font-size: 15px; }
}

/* ------------------------------------------------------------- exam clock
   Sits under the prompt on the Writing screen. Quiet while it runs, loud only
   when the time is gone - a clock that shouts the whole way is a clock people
   turn off. The bar drains left to right so the state reads without reading
   the digits. */
.ia-clock { padding: 14px 16px; }
.ia-clock__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ia-clock__label { font-size: 13px; color: var(--ia-muted); }
.ia-clock__t { font-size: 20px; font-weight: 700; color: var(--ia-ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ia-clock__track { height: 4px; margin-top: 10px; border-radius: 999px; background: var(--ia-line); overflow: hidden; }
.ia-clock__track i { display: block; height: 100%; background: var(--ia-teal); transition: width 1s linear; }
.ia-clock__note { margin: 8px 0 0; font-size: 12px; color: var(--ia-muted); }
.ia-clock.is-running .ia-clock__t { color: var(--ia-ink); }
.ia-clock.is-over .ia-clock__t,
.ia-clock.is-over .ia-clock__note { color: var(--ia-teal); font-weight: 600; }
.ia-clock.is-over .ia-clock__track i { background: var(--ia-teal); }

/* ----------------------------------------------------------- scoring state
   Shown while an AI evaluation is in flight. The bar is a looping sweep, not a
   percentage: we get one response, not progress events, so a filling bar would
   be a made-up number. The sweep says "working", the stage text says what is
   being worked on, and the seconds are real. */
.ia-scoring { margin: 10px 0 0; }
.ia-scoring[hidden] { display: none; }
.ia-scoring__track { height: 4px; border-radius: 999px; background: var(--ia-line); overflow: hidden; }
.ia-scoring__track i {
    display: block; height: 100%; width: 40%; border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--ia-teal), transparent);
    animation: ia-sweep 1.15s ease-in-out infinite;
}
@keyframes ia-sweep {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(320%); }
}
.ia-scoring__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 7px; }
.ia-scoring__stage { font-size: 13px; color: var(--ia-ink-2); }
.ia-scoring__time { font-size: 12px; color: var(--ia-muted); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
    .ia-scoring__track i { animation: none; width: 100%; opacity: .5; }
}