/* ═══════════════════════════════════════════════════════════════
   IELTS Hub — premium redesign
   - Strict brand palette: teal / emerald / cyan / amber / gray
   - Mobile-first responsive
   - Skill identity: Listening=cyan, Reading=teal, Writing=emerald, Speaking=amber
═══════════════════════════════════════════════════════════════ */

.ih{
    --ih-c-listening: var(--color-accent);     /* cyan #06B6D4 */
    --ih-c-reading:   var(--color-primary);    /* teal #14B8A6 */
    --ih-c-writing:   var(--color-secondary);  /* emerald #10B981 */
    --ih-c-speaking:  var(--color-warning);    /* amber #F59E0B */
    --ih-c-lock:      var(--color-locked);     /* gray #94A3B8 */
    max-width:1180px;margin:80px auto 0;padding:0 var(--space-4) var(--space-12);
    font-family:var(--font-sans);color:var(--color-ink);
}
@media (max-width:768px){ .ih{ margin-top:64px; padding:0 var(--space-3) var(--space-10); } }

/* ───────────── PREVIEW BANNER ───────────── */
.ih-preview{
    display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
    background:linear-gradient(135deg,var(--color-warning-soft),#fff);
    border:1px solid color-mix(in srgb,var(--color-warning) 30%,transparent);
    border-radius:var(--radius-lg);padding:12px 16px;margin-bottom:var(--space-4);
    flex-wrap:wrap;
}
.ih-preview__msg{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:#7c2d12;font-weight:var(--fw-semibold)}
.ih-preview__msg i{color:var(--color-warning)}

/* ═══════════════════════════════════════════════
   1. HERO — band meter + greeting + tier badge (clean pro)
═══════════════════════════════════════════════ */
.ih-hero{
    position:relative;overflow:hidden;
    background:
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--color-primary) 12%, transparent), transparent 50%),
        radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--color-accent) 8%, transparent), transparent 55%),
        var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-xl);
    padding:var(--space-5);
    margin-bottom:var(--space-4);
}
.ih-hero::before{
    content:'';position:absolute;inset:0;pointer-events:none;
    background-image:
        linear-gradient(rgba(20,184,166,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20,184,166,0.04) 1px, transparent 1px);
    background-size:24px 24px;
    mask-image: radial-gradient(circle at center, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 75%);
}
.ih-hero__inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr auto;gap:var(--space-5);align-items:center}
.ih-hero__left{min-width:0}
.ih-hero__tier{
    display:inline-flex;align-items:center;gap:6px;
    padding:4px 12px;background:var(--color-primary-soft);
    border-radius:var(--radius-pill);
    font-size:var(--fs-micro);font-weight:var(--fw-bold);
    text-transform:uppercase;letter-spacing:.06em;color:var(--color-primary);
}
.ih-hero__tier i{color:var(--color-warning)}
.ih-hero__greet{
    margin:var(--space-3) 0 var(--space-2);
    font-size:clamp(24px,3vw,32px);font-weight:var(--fw-extrabold);
    letter-spacing:-.02em;line-height:1.15;
    color:var(--color-ink);
}
.ih-hero__greet b{
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ih-hero__sub{
    margin:0;font-size:var(--fs-small);
    color:var(--color-text);line-height:1.6;
}
.ih-hero__sub strong{color:var(--color-ink);font-weight:var(--fw-bold)}
.ih-hero__exam{
    display:inline-flex;align-items:center;gap:6px;
    margin-top:var(--space-3);padding:4px 12px;
    background:var(--color-warning-soft);
    border:1px solid color-mix(in srgb, var(--color-warning) 35%, transparent);
    border-radius:var(--radius-pill);
    font-size:var(--fs-micro);font-weight:var(--fw-semibold);color:var(--color-warning);
}
.ih-hero__exam strong{color:var(--color-warning)}

/* Band meter — circular progress (clean teal on light) */
.ih-meter{
    position:relative;width:180px;height:180px;flex-shrink:0;
}
.ih-meter__svg{width:100%;height:100%;transform:rotate(-90deg)}
.ih-meter__track{stroke:var(--color-line);fill:none;stroke-width:8}
.ih-meter__bar{stroke:var(--color-primary);fill:none;stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset .8s ease}
.ih-meter__core{
    position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;
}
.ih-meter__num{font-size:40px;font-weight:var(--fw-extrabold);line-height:1;color:var(--color-primary)}
.ih-meter__lbl{font-size:var(--fs-micro);color:var(--color-muted);margin-top:4px;letter-spacing:.06em;text-transform:uppercase;font-weight:var(--fw-bold)}
.ih-meter__tgt{font-size:var(--fs-micro);color:var(--color-mute2);margin-top:4px;font-weight:var(--fw-semibold)}

@media (max-width:768px){
    .ih-hero{padding:var(--space-4);border-radius:var(--radius-lg)}
    .ih-hero__inner{grid-template-columns:1fr;gap:var(--space-4);text-align:center}
    .ih-meter{width:140px;height:140px;margin:0 auto}
    .ih-meter__num{font-size:32px}
    .ih-hero__greet{font-size:24px}
}

/* ═══════════════════════════════════════════════
   2. TODAY'S FOCUS — single primary action
═══════════════════════════════════════════════ */
.ih-focus{
    background:var(--color-surface);
    border:1px solid var(--color-border);border-radius:var(--radius-xl);
    padding:20px 22px;margin-bottom:var(--space-5);
    box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
}
.ih-focus::before{
    content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
    background:linear-gradient(180deg,var(--color-primary),var(--color-secondary));
}
.ih-focus__head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-3);margin-bottom:14px;flex-wrap:wrap}
.ih-focus__title{margin:0;font-size:17px;font-weight:var(--fw-extrabold);color:var(--color-ink);letter-spacing:-.01em}
.ih-focus__chip{
    display:inline-flex;align-items:center;gap:6px;
    padding:4px 11px;background:var(--color-primary-soft);color:var(--color-primary);
    border-radius:var(--radius-pill);font-size:11.5px;font-weight:var(--fw-bold);
    letter-spacing:.03em;text-transform:uppercase;
}
.ih-focus__pct{display:inline-flex;align-items:baseline;gap:5px}
.ih-focus__pct b{font-size:22px;font-weight:var(--fw-extrabold);color:var(--color-primary);line-height:1}
.ih-focus__pct span{font-size:11.5px;color:var(--color-muted);font-weight:var(--fw-semibold)}
.ih-focus__bar{height:6px;background:var(--color-soft);border-radius:999px;overflow:hidden;margin-bottom:14px}
.ih-focus__fill{height:100%;background:linear-gradient(90deg,var(--color-primary),var(--color-secondary));border-radius:999px;transition:width .6s ease}

.ih-focus__items{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.ih-focus__item{
    display:flex;align-items:center;gap:12px;
    padding:10px 12px;background:var(--color-soft);border-radius:var(--radius-md);
    text-decoration:none;color:inherit;
    transition:all var(--dur-base) var(--ease);
}
.ih-focus__item:hover{background:var(--color-primary-soft);transform:translateX(2px)}
.ih-focus__item-ic{
    width:36px;height:36px;border-radius:8px;
    display:inline-flex;align-items:center;justify-content:center;
    background:#fff;color:var(--color-primary);font-size:14px;flex-shrink:0;
    box-shadow:var(--shadow-sm);
}
.ih-focus__item-body{flex:1;min-width:0}
.ih-focus__item-t{font-size:13.5px;font-weight:var(--fw-semibold);color:var(--color-ink);line-height:1.4;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.ih-focus__item-m{font-size:11.5px;color:var(--color-muted);margin-top:1px}
.ih-focus__item-go{color:var(--color-muted);font-size:13px}

.ih-focus__actions{display:flex;gap:10px;flex-wrap:wrap}
.ih-focus__btn{
    display:inline-flex;align-items:center;gap:7px;
    padding:11px 22px;border-radius:var(--radius-md);
    font-size:13.5px;font-weight:var(--fw-bold);text-decoration:none;
    transition:all var(--dur-base) var(--ease);cursor:pointer;border:0;font-family:inherit;
}
.ih-focus__btn--primary{background:var(--color-primary);color:#fff}
.ih-focus__btn--primary:hover{background:var(--color-primary-hover);color:#fff;transform:translateY(-1px)}
.ih-focus__btn--ghost{background:transparent;color:var(--color-text);border:1px solid var(--color-border)}
.ih-focus__btn--ghost:hover{border-color:var(--color-primary);color:var(--color-primary)}

@media (max-width:768px){ .ih-focus{padding:16px 16px;border-radius:var(--radius-lg)} .ih-focus__title{font-size:15px} }

/* ═══════════════════════════════════════════════
   3. SKILL CARDS — 2x2 grid premium
═══════════════════════════════════════════════ */
.ih-section-head{display:flex;align-items:center;justify-content:space-between;margin:var(--space-6) 0 var(--space-3);gap:12px;flex-wrap:wrap}
.ih-section-head h2{margin:0;font-size:16px;font-weight:var(--fw-extrabold);color:var(--color-ink);letter-spacing:-.01em;display:inline-flex;align-items:center;gap:8px}
.ih-section-head h2 i{color:var(--color-primary);font-size:14px}
.ih-section-head__link{
    display:inline-flex;align-items:center;gap:8px;
    padding:8px 14px;
    font-size:13px;font-weight:var(--fw-bold);
    color:var(--color-primary);
    background:var(--color-primary-soft);
    border:1px solid color-mix(in srgb,var(--color-primary) 25%,transparent);
    border-radius:99px;
    text-decoration:none;
    transition:all var(--dur-base) var(--ease);
}
.ih-section-head__link:hover{
    background:var(--color-primary);color:#fff;
    border-color:var(--color-primary);
    transform:translateY(-1px);
    box-shadow:0 6px 14px -6px color-mix(in srgb,var(--color-primary) 50%,transparent);
}
.ih-section-head__arrow{font-size:11px;transition:transform var(--dur-base) var(--ease)}
.ih-section-head__link:hover .ih-section-head__arrow{transform:translateX(3px)}

.ih-skills{display:flex;flex-direction:column;gap:10px}

/* ── Compact row: mỗi kỹ năng 1 hàng ngang (dashboard) ── */
.ih-skill{
    --c:var(--ih-c-reading);
    position:relative;display:flex;align-items:center;gap:15px;
    background:var(--color-surface);
    border:1px solid var(--color-border);border-radius:var(--radius-lg);
    padding:13px 18px 13px 22px;text-decoration:none;color:inherit;
    transition:all var(--dur-base) var(--ease);overflow:hidden;
}
.ih-skill::before{
    content:'';position:absolute;left:0;top:0;width:4px;height:100%;background:var(--c);
}
.ih-skill:hover{
    border-color:var(--c);transform:translateX(2px);
    box-shadow:0 10px 24px -14px color-mix(in srgb,var(--c) 42%,transparent);
}
.ih-skill--listening{--c:var(--ih-c-listening)}
.ih-skill--reading{--c:var(--ih-c-reading)}
.ih-skill--writing{--c:var(--ih-c-writing)}
.ih-skill--speaking{--c:var(--ih-c-speaking)}

.ih-skill__pre{
    position:absolute;top:7px;right:9px;
    padding:2px 7px;background:var(--color-locked);color:#fff;
    border-radius:var(--radius-sm);font-size:9px;font-weight:var(--fw-bold);letter-spacing:.06em;
}
.ih-skill__ic{
    width:46px;height:46px;border-radius:13px;flex-shrink:0;
    display:inline-flex;align-items:center;justify-content:center;
    background:color-mix(in srgb,var(--c) 14%,#fff);color:var(--c);font-size:19px;
}
.ih-skill__main{flex:1 1 auto;min-width:0}
.ih-skill__t{margin:0;font-size:15px;font-weight:var(--fw-extrabold);color:var(--color-ink);line-height:1.25;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ih-skill__d{font-size:11.5px;color:var(--color-muted);margin-top:2px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ih-skill__weak{
    display:inline-flex;align-items:center;
    padding:2px 7px;background:var(--color-warning-soft);color:var(--color-warning);
    border-radius:var(--radius-sm);font-size:9px;font-weight:var(--fw-bold);
    letter-spacing:.04em;text-transform:uppercase;flex-shrink:0;
}
.ih-skill__prog{flex:0 0 148px;min-width:0}
.ih-skill__bar{height:6px;background:var(--color-soft);border-radius:999px;overflow:hidden;margin-bottom:5px}
.ih-skill__fill{height:100%;background:var(--c);border-radius:999px;transition:width .6s ease}
.ih-skill__meta-l{font-size:11px;color:var(--color-muted)}
.ih-skill__meta-l b{color:var(--color-ink);font-weight:var(--fw-bold)}
.ih-skill__band{
    flex:0 0 auto;text-align:right;line-height:1.05;
    font-size:18px;font-weight:var(--fw-extrabold);color:var(--c);
    display:flex;flex-direction:column;align-items:flex-end;
}
.ih-skill__band-lbl{font-size:9px;color:var(--color-muted);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:.06em;margin-bottom:1px}
.ih-skill__chev{color:var(--color-mute2);font-size:13px;flex-shrink:0;transition:transform var(--dur-base) var(--ease)}
.ih-skill:hover .ih-skill__chev{transform:translateX(3px);color:var(--c)}

/* Card "Kho học liệu" — hàng nhấn gradient teal/cyan */
.ih-skill--library{
    --c:var(--color-primary);
    background:linear-gradient(135deg,var(--color-primary-soft) 0%,var(--color-accent-soft) 100%);
    border-color:color-mix(in srgb,var(--color-primary) 22%,transparent);
    margin-top:4px;
}
.ih-skill--library .ih-skill__ic{
    background:var(--color-primary);color:#fff;
    box-shadow:0 8px 18px -6px color-mix(in srgb,var(--color-primary) 55%,transparent);
}
.ih-skill--library .ih-skill__t{font-size:16px}
.ih-skill--library .ih-skill__d{white-space:normal;font-size:12px}
.ih-skill--library .ih-skill__chev{font-size:15px;color:var(--color-primary)}

@media (max-width:640px){
    .ih-skill{gap:12px;padding:12px 14px 12px 16px}
    .ih-skill__prog{display:none}
    .ih-skill__d{display:none}
    .ih-skill--library .ih-skill__d{display:block}
    .ih-section-head__link{padding:7px 12px;font-size:12.5px}
}

/* ═══════════════════════════════════════════════
   4. MOCK TEST HUB
═══════════════════════════════════════════════ */
.ih-mock{
    background:linear-gradient(135deg,#fff,var(--color-primary-soft));
    border:1px solid color-mix(in srgb,var(--color-primary) 22%,transparent);
    border-radius:var(--radius-xl);
    padding:24px;margin-bottom:var(--space-5);
    box-shadow:var(--shadow-sm);
}
.ih-mock__top{display:flex;align-items:center;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.ih-mock__ic{
    width:54px;height:54px;border-radius:14px;flex-shrink:0;
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--color-primary);color:#fff;font-size:22px;
    box-shadow:0 8px 20px -6px color-mix(in srgb,var(--color-primary) 50%,transparent);
}
.ih-mock__title{margin:0;font-size:17px;font-weight:var(--fw-extrabold);color:var(--color-ink);letter-spacing:-.01em}
.ih-mock__sub{margin:3px 0 0;font-size:12.5px;color:var(--color-muted);line-height:1.5}
.ih-mock__cta{
    margin-left:auto;
    display:inline-flex;align-items:center;gap:7px;
    padding:11px 22px;background:var(--color-primary);color:#fff;
    border-radius:var(--radius-md);font-size:13.5px;font-weight:var(--fw-bold);
    text-decoration:none;transition:all var(--dur-base) var(--ease);
    white-space:nowrap;
}
.ih-mock__cta:hover{background:var(--color-primary-hover);color:#fff;transform:translateY(-1px)}

.ih-mock__intel{
    display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
    padding:14px;background:#fff;border-radius:var(--radius-md);margin-bottom:14px;
}
.ih-mock__cell{text-align:center;padding:4px 6px}
.ih-mock__cell + .ih-mock__cell{border-left:1px solid var(--color-line)}
.ih-mock__num{font-size:22px;font-weight:var(--fw-extrabold);color:var(--color-ink);line-height:1.1}
.ih-mock__num.is-pred{color:var(--color-accent)}
.ih-mock__num.is-up{color:var(--color-secondary)}
.ih-mock__num.is-down{color:var(--color-warning)}
.ih-mock__lbl{font-size:10.5px;color:var(--color-muted);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:.04em;margin-top:3px}

.ih-mock__list{display:flex;flex-direction:column;gap:6px}
.ih-mock__item{
    display:flex;justify-content:space-between;align-items:center;gap:10px;
    padding:8px 12px;background:#fff;border-radius:var(--radius-sm);
    font-size:12.5px;
}
.ih-mock__item-t{font-weight:var(--fw-semibold);color:var(--color-ink);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ih-mock__item-m{font-size:11px;color:var(--color-muted);white-space:nowrap}
.ih-mock__item-m b{color:var(--color-primary);font-weight:var(--fw-bold);font-size:12px}

@media (max-width:640px){
    .ih-mock{padding:18px;border-radius:var(--radius-lg)}
    .ih-mock__cta{margin-left:0;flex:1 0 100%;justify-content:center}
    .ih-mock__intel{grid-template-columns:repeat(3,1fr);padding:10px;gap:6px}
    .ih-mock__num{font-size:18px}
}

/* ═══════════════════════════════════════════════
   5. KNOWLEDGE + VOCAB (2-col grid)
═══════════════════════════════════════════════ */
.ih-grid-2{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;margin-bottom:var(--space-5)}
@media (max-width:768px){ .ih-grid-2{grid-template-columns:1fr} }

.ih-card{
    background:var(--color-surface);border:1px solid var(--color-border);
    border-radius:var(--radius-xl);padding:20px;
    box-shadow:var(--shadow-sm);
}
.ih-card__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:8px}
.ih-card__title{margin:0;font-size:14.5px;font-weight:var(--fw-extrabold);color:var(--color-ink);display:inline-flex;align-items:center;gap:8px}
.ih-card__title i{color:var(--color-primary);font-size:13px}
.ih-card__link{font-size:12px;font-weight:var(--fw-semibold);color:var(--color-primary);text-decoration:none;white-space:nowrap}
.ih-card__link:hover{text-decoration:underline}

/* Pinned sets — premium card grid */
.ih-pinned{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
@media (max-width:1024px){ .ih-pinned{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px} }
@media (max-width:560px){ .ih-pinned{grid-template-columns:1fr;gap:10px} }

.ih-pinned__card{
    --tc:var(--color-locked);
    --tc-soft:color-mix(in srgb, var(--tc) 10%, #fff);
    --tc-deep:color-mix(in srgb, var(--tc) 80%, #000);
    position:relative;display:block;
    padding:18px 18px 16px;
    background:#fff;
    border:1px solid var(--color-line);
    border-radius:var(--radius-xl);
    text-decoration:none;color:inherit;
    box-shadow:var(--shadow-sm);
    transition:all var(--dur-base) var(--ease);
    overflow:hidden;
}
.ih-pinned__card::before{
    content:'';position:absolute;left:0;top:0;height:100%;width:4px;
    background:var(--tc);
}
.ih-pinned__card::after{
    content:'';position:absolute;top:0;right:0;width:80px;height:80px;
    background:radial-gradient(circle at top right, var(--tc-soft), transparent 70%);
    pointer-events:none;opacity:.7;
}
.ih-pinned__card:hover{
    transform:translateY(-3px);
    border-color:var(--tc);
    box-shadow:0 16px 32px -14px color-mix(in srgb, var(--tc) 35%, transparent);
}
.ih-pinned__card:hover::after{opacity:1}
.ih-pinned__card--pre_ielts{--tc:var(--color-locked)}
.ih-pinned__card--beginner{--tc:var(--color-secondary)}
.ih-pinned__card--intermediate{--tc:var(--color-primary)}
.ih-pinned__card--advanced{--tc:var(--color-accent)}

.ih-pinned__head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px;position:relative;z-index:1}
.ih-pinned__emoji{
    width:46px;height:46px;border-radius:12px;flex-shrink:0;
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--tc-soft);
    font-size:24px;line-height:1;
    box-shadow:0 2px 6px -2px color-mix(in srgb, var(--tc) 20%, transparent);
}
.ih-pinned__tier{
    display:inline-flex;align-items:center;
    padding:3px 9px;border-radius:var(--radius-pill);
    background:var(--tc-soft);color:var(--tc-deep);
    font-size:9.5px;font-weight:var(--fw-extrabold);letter-spacing:.06em;text-transform:uppercase;
    white-space:nowrap;
}
.ih-pinned__body{position:relative;z-index:1}
.ih-pinned__name{
    font-size:14.5px;font-weight:var(--fw-extrabold);color:var(--color-ink);
    line-height:1.35;margin-bottom:10px;letter-spacing:-.01em;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    min-height:2.7em;
}
.ih-pinned__bar{height:6px;background:var(--color-soft);border-radius:999px;overflow:hidden;margin-bottom:10px}
.ih-pinned__fill{height:100%;background:linear-gradient(90deg,var(--tc),color-mix(in srgb,var(--tc) 70%, #fff));border-radius:999px;transition:width .6s ease}
.ih-pinned__fill.is-done{background:linear-gradient(90deg,var(--color-secondary),var(--color-primary))}

.ih-pinned__meta{
    display:flex;justify-content:space-between;align-items:baseline;gap:8px;
    font-size:11.5px;color:var(--color-muted);font-weight:var(--fw-semibold);
}
.ih-pinned__meta-l{display:inline-flex;align-items:baseline;gap:4px}
.ih-pinned__meta-l b{color:var(--color-ink);font-weight:var(--fw-extrabold);font-size:14px;font-family:var(--font-mono)}
.ih-pinned__pct{
    font-size:13px;font-weight:var(--fw-extrabold);color:var(--tc);
    font-family:var(--font-mono);
}
.ih-pinned__pct.is-done{color:var(--color-secondary)}
.ih-pinned__pct.is-done::after{content:' ✓'}

.ih-pinned__empty{
    text-align:center;padding:32px 20px;
    font-size:13px;color:var(--color-muted);line-height:1.65;
    background:linear-gradient(135deg, var(--color-soft), #fff);
    border:1px dashed var(--color-border);
    border-radius:var(--radius-lg);
}
.ih-pinned__empty-ic{
    display:inline-flex;align-items:center;justify-content:center;
    width:48px;height:48px;border-radius:50%;
    background:var(--color-primary-soft);color:var(--color-primary);
    font-size:18px;margin-bottom:10px;
}
.ih-pinned__empty a{color:var(--color-primary);font-weight:var(--fw-bold);text-decoration:none}
.ih-pinned__empty a:hover{text-decoration:underline}

/* Vocab card */
.ih-vocab__cells{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.ih-vocab__cell{
    text-align:center;padding:10px 6px;
    background:var(--color-soft);border-radius:var(--radius-md);
}
.ih-vocab__num{font-size:20px;font-weight:var(--fw-extrabold);color:var(--color-ink);line-height:1.1}
.ih-vocab__num.is-mas{color:var(--color-secondary)}
.ih-vocab__num.is-due{color:var(--color-warning)}
.ih-vocab__lbl{font-size:10px;color:var(--color-muted);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:.04em;margin-top:3px}
.ih-vocab__cta{
    display:flex;align-items:center;justify-content:center;gap:7px;
    padding:10px 14px;background:var(--color-primary);color:#fff;
    border-radius:var(--radius-md);font-size:13px;font-weight:var(--fw-bold);
    text-decoration:none;transition:all var(--dur-base) var(--ease);
}
.ih-vocab__cta:hover{background:var(--color-primary-hover);color:#fff}

/* Stats card (compact) */
.ih-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width:640px){ .ih-stats{grid-template-columns:repeat(2,1fr)} }
.ih-stat{
    text-align:center;padding:14px 8px;
    background:var(--color-soft);border-radius:var(--radius-md);
}
.ih-stat__num{font-size:22px;font-weight:var(--fw-extrabold);color:var(--color-ink);line-height:1.1}
.ih-stat__lbl{font-size:10.5px;color:var(--color-muted);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:.04em;margin-top:4px}
.ih-stat--accent .ih-stat__num{color:var(--color-accent)}
.ih-stat--secondary .ih-stat__num{color:var(--color-secondary)}
.ih-stat--warning .ih-stat__num{color:var(--color-warning)}

/* ═══════════════════════════════════════════════
   6. BAND READINESS detail card
═══════════════════════════════════════════════ */
.ih-bands{display:flex;flex-direction:column;gap:10px}
.ih-band-row{display:grid;grid-template-columns:90px 1fr 50px;gap:12px;align-items:center}
.ih-band-row__skill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:var(--fw-semibold);color:var(--color-ink)}
.ih-band-row__skill i{color:var(--c, var(--color-primary));font-size:12px;width:14px}
.ih-band-row__bar{position:relative;height:8px;background:var(--color-soft);border-radius:999px;overflow:hidden}
.ih-band-row__fill{height:100%;background:var(--c, var(--color-primary));border-radius:999px;transition:width .6s ease}
.ih-band-row__fill.is-low{opacity:.6}
.ih-band-row__target{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--color-warning);border-radius:1px}
.ih-band-row__num{font-size:14px;font-weight:var(--fw-extrabold);color:var(--color-ink);text-align:right}

/* ═══════════════════════════════════════════════
   7. HEATMAP — activity 28 days
═══════════════════════════════════════════════ */
.ih-heat{
    background:var(--color-surface);border:1px solid var(--color-border);
    border-radius:var(--radius-xl);padding:20px;margin-bottom:var(--space-4);
    box-shadow:var(--shadow-sm);
}
.ih-heat__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-wrap:wrap;gap:10px}
.ih-heat__title{margin:0;font-size:14.5px;font-weight:var(--fw-extrabold);color:var(--color-ink);display:inline-flex;align-items:center;gap:8px}
.ih-heat__title i{color:var(--color-warning)}
.ih-heat__streak{
    display:inline-flex;align-items:baseline;gap:6px;
    padding:5px 12px;background:var(--color-warning-soft);
    border-radius:var(--radius-pill);font-size:12.5px;color:#7c2d12;font-weight:var(--fw-bold);
}
.ih-heat__streak b{font-size:15px;color:var(--color-warning)}
.ih-heat__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;max-width:380px;margin:0 auto}
@media (max-width:480px){ .ih-heat__grid{gap:3px} }
.ih-heat__cell{aspect-ratio:1;border-radius:4px;background:var(--color-soft);transition:transform .15s ease}
.ih-heat__cell:hover{transform:scale(1.15)}
.ih-heat__cell[data-level="1"]{background:color-mix(in srgb,var(--color-secondary) 25%,#fff)}
.ih-heat__cell[data-level="2"]{background:color-mix(in srgb,var(--color-secondary) 55%,#fff)}
.ih-heat__cell[data-level="3"]{background:color-mix(in srgb,var(--color-secondary) 80%,#fff)}
.ih-heat__cell[data-level="4"]{background:var(--color-secondary)}
.ih-heat__cell.is-today{outline:2px solid var(--color-primary);outline-offset:1px}

/* ═══════════════════════════════════════════════
   8. RECENT ACTIVITY (compact list)
═══════════════════════════════════════════════ */
.ih-recent{display:flex;flex-direction:column;gap:6px}
.ih-recent__item{
    display:flex;align-items:center;gap:12px;
    padding:10px 12px;background:var(--color-soft);border-radius:var(--radius-md);
}
.ih-recent__ic{
    width:32px;height:32px;border-radius:8px;flex-shrink:0;
    display:inline-flex;align-items:center;justify-content:center;
    background:#fff;color:var(--color-primary);font-size:13px;
}
.ih-recent__body{flex:1;min-width:0}
.ih-recent__t{font-size:13px;font-weight:var(--fw-semibold);color:var(--color-ink);line-height:1.3;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.ih-recent__m{font-size:11px;color:var(--color-muted);margin-top:1px}
.ih-recent__time{font-size:11px;color:var(--color-muted);font-weight:var(--fw-semibold)}

/* ═══════════════════════════════════════════════
   9. PLAN UPSELL CARD (for Plus tier)
═══════════════════════════════════════════════ */
.ih-upsell{
    background:linear-gradient(135deg,color-mix(in srgb,var(--color-accent) 8%,#fff),#fff);
    border:1px solid color-mix(in srgb,var(--color-accent) 30%,transparent);
    border-radius:var(--radius-xl);padding:18px 20px;margin-bottom:var(--space-4);
    display:flex;gap:14px;align-items:center;flex-wrap:wrap;
}
.ih-upsell__ic{
    width:42px;height:42px;border-radius:50%;flex-shrink:0;
    background:var(--color-accent);color:#fff;
    display:inline-flex;align-items:center;justify-content:center;font-size:18px;
}
.ih-upsell__body{flex:1;min-width:0}
.ih-upsell__t{margin:0 0 3px;font-size:14px;font-weight:var(--fw-extrabold);color:var(--color-ink)}
.ih-upsell__d{margin:0;font-size:12.5px;color:var(--color-muted);line-height:1.5}
.ih-upsell__btn{
    display:inline-flex;align-items:center;gap:6px;
    padding:9px 16px;background:var(--color-accent);color:#fff;
    border-radius:var(--radius-md);font-size:12.5px;font-weight:var(--fw-bold);
    text-decoration:none;transition:all var(--dur-base) var(--ease);
    white-space:nowrap;
}
.ih-upsell__btn:hover{filter:brightness(1.08);color:#fff;transform:translateY(-1px)}

/* ═══════════════════════════════════════════════
  10. STICKY MOBILE CTA
═══════════════════════════════════════════════ */
.ih-mobile-cta{display:none}
@media (max-width:640px){
    .ih-mobile-cta{
        display:flex;position:fixed;bottom:14px;left:14px;right:14px;
        z-index:90;
        background:var(--color-primary);color:#fff;
        border-radius:var(--radius-pill);padding:13px 20px;
        box-shadow:0 16px 40px -10px color-mix(in srgb,var(--color-primary) 50%,transparent);
        align-items:center;justify-content:center;gap:8px;
        font-size:14px;font-weight:var(--fw-bold);text-decoration:none;
    }
    .ih-mobile-cta:hover{color:#fff}
    .ih{padding-bottom:80px}
}