/**
 * /public/assets/css/foundation-member.css
 * Extracted from public/courses/foundation-member.php inline <style> block.
 * All hex `#fff` migrated to var(--color-on-dark) per CLAUDE.md design system rules.
 */

/* ── Base ─────────────────────────────────────────────────────────────── */
.fm { background: var(--color-bg); padding: var(--space-6) 0 var(--space-16); min-height: calc(100vh - 72px); }
.fm__wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-5); }

/* ── Preview banner ───────────────────────────────────────────────────── */
.fm__preview {
    background: linear-gradient(135deg, var(--color-accent), var(--color-primary));
    color: var(--color-on-dark); border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5);
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
    box-shadow: var(--shadow-md);
}
.fm__preview-msg { font-size: var(--fs-body); font-weight: var(--fw-semibold); display: flex; align-items: center; gap: 10px; }
.fm__preview .btn--invert {
    background: var(--color-on-dark);
    color: var(--color-primary);
    font-weight: var(--fw-bold);
}

/* ── Dashboard header ─────────────────────────────────────────────────── */
.fm__header {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    padding: var(--space-6) 0 var(--space-5); flex-wrap: wrap;
}
.fm__header-greeting { font-size: 28px; font-weight: var(--fw-extrabold); color: var(--color-ink); margin: 0 0 4px; letter-spacing: -.025em; }
.fm__header-sub { font-size: 14px; color: var(--color-muted); margin: 0; }
.fm__header-sub strong { color: var(--color-primary); font-weight: var(--fw-semibold); }
.fm__header-right { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

/* ── CEFR Arc ──────────────────────────────────────────────────────────── */
.fm__cefr-arc-wrap {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-xl); padding: var(--space-3) var(--space-4) var(--space-2);
    display: flex; flex-direction: column; align-items: center;
}
.fm__cefr-arc text { font-family: var(--font-sans); }

/* ── 4-week activity heatmap ───────────────────────────────────────────── */
.fm__heatmap-wrap {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-xl); padding: var(--space-4) var(--space-5);
}
.fm__heatmap-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--space-3);
}
.fm__heatmap-title {
    font-size: 12px; font-weight: var(--fw-extrabold); color: var(--color-muted);
    text-transform: uppercase; letter-spacing: .05em; margin: 0;
    display: flex; align-items: center; gap: 7px;
}
.fm__heatmap-title i { color: var(--color-primary); }
.fm__heatmap-streak {
    display: inline-flex; align-items: center; gap: 5px; font-size: 13px;
}
.fm__heatmap-streak .hm-fire { font-size: 15px; }
.fm__heatmap-streak .hm-num  { font-size: 17px; font-weight: var(--fw-extrabold); color: var(--color-warning); line-height: 1; }
.fm__heatmap-streak .hm-lbl  { font-size: 11px; color: var(--color-muted); }
.fm__heatmap-dow {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 5px;
}
.fm__heatmap-dow-lbl {
    font-size: 9px; color: var(--color-mute2); text-align: center;
    font-weight: var(--fw-semibold); text-transform: uppercase;
}
.fm__heatmap-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.fm__hm-cell {
    aspect-ratio: 1; border-radius: 3px; background: var(--color-line); cursor: default;
}
.fm__hm-cell[data-level="1"] { background: var(--color-primary-soft); }
.fm__hm-cell[data-level="2"] { background: color-mix(in srgb, var(--color-primary) 35%, white); }
.fm__hm-cell[data-level="3"] { background: color-mix(in srgb, var(--color-primary) 62%, white); }
.fm__hm-cell[data-level="4"] { background: var(--color-primary); }
.fm__hm-cell.is-today { outline: 2px solid var(--color-primary); outline-offset: 1px; }

/* ── 2-column layout ──────────────────────────────────────────────────── */
/* 2026-06-07: gộp về 1 cột full-width (sidebar phần lớn rỗng sau khi dọn các block) */
.fm__body { display: flex; flex-direction: column; gap: var(--space-5); }
.fm__main { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.fm__side { display: flex; flex-direction: column; gap: var(--space-4); }
.fm__side:empty { display: none; }

/* ── TODAY'S PLAN hero card — redesigned 2026-06-07 (light theme khớp hero/path cards) ───── */
.fm__plan {
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)), color-mix(in srgb, var(--color-secondary) 8%, var(--color-surface)));
    color: var(--color-ink);
    border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--color-line));
    border-radius: var(--radius-xl); padding: var(--space-6);
    position: relative; overflow: hidden;
    box-shadow: 0 16px 40px -20px color-mix(in srgb, var(--color-primary) 30%, rgba(15,23,42,.18));
}
.fm__plan::before {
    content: ''; position: absolute; top: -120px; right: -90px;
    width: 320px; height: 320px; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 18%, transparent), transparent 70%);
    pointer-events: none;
}
.fm__plan::after {
    content: ''; position: absolute; bottom: -110px; left: -80px;
    width: 260px; height: 260px; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--color-secondary) 16%, transparent), transparent 70%);
    pointer-events: none;
}
.fm__plan__head {
    position: relative; z-index: 1;
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: var(--space-3); margin-bottom: var(--space-4);
}
.fm__plan__badge {
    display: inline-flex; align-items: center; gap: 7px;
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
    color: var(--color-primary); padding: 5px 12px; border-radius: var(--radius-pill);
    font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
    margin-bottom: var(--space-3);
}
.fm__plan__title {
    font-size: clamp(22px, 2.4vw, 28px); font-weight: var(--fw-extrabold); margin: 0;
    color: var(--color-ink); letter-spacing: -.02em; line-height: 1.15;
}
.fm__plan__lead {
    color: var(--color-text);
    font-size: 14px; line-height: 1.6;
    margin: 0 0 var(--space-4); position: relative; z-index: 1; max-width: 60ch;
}
.fm__plan__pct-box {
    flex-shrink: 0; text-align: center; min-width: 96px;
    background: var(--color-surface); border: 1px solid var(--color-line);
    border-radius: var(--radius-md); padding: 10px 18px;
    box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--color-primary) 22%, transparent);
}
.fm__plan__pct-num { font-size: 28px; font-weight: var(--fw-extrabold); color: var(--color-primary); line-height: 1; display: block; }
.fm__plan__pct-label { font-size: 10.5px; color: var(--color-muted); text-transform: uppercase; letter-spacing: .06em; display: block; margin-top: 4px; font-weight: 700; }
.fm__plan__bar { height: 6px; background: var(--color-line); border-radius: var(--radius-pill); overflow: hidden; margin-bottom: var(--space-5); position: relative; z-index: 1; }
.fm__plan__bar-fill { height: 100%; background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); border-radius: var(--radius-pill); transition: width .4s var(--ease); }
.fm__plan__pills { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: var(--space-5); position: relative; z-index: 1; }
.fm__plan__pill {
    background: var(--color-surface); padding: 9px 14px;
    border-radius: var(--radius-md); display: inline-flex; align-items: center; gap: 9px;
    border: 1px solid var(--color-line);
}
.fm__plan__pill-num { font-size: 18px; font-weight: 800; color: var(--color-ink); line-height: 1; font-variant-numeric: tabular-nums; }
.fm__plan__pill-label { font-size: 11px; color: var(--color-muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.fm__plan__cta { display: flex; gap: 10px; flex-wrap: wrap; position: relative; z-index: 1; }
.fm__plan__btn {
    display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 22px;
    border-radius: var(--radius-md); font-size: 14.5px; font-weight: 800;
    text-decoration: none; transition: filter var(--dur-fast) var(--ease), transform .08s var(--ease);
    border: 0; cursor: pointer; font-family: inherit; white-space: nowrap;
}
.fm__plan__btn--primary {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #fff;
    box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--color-primary) 60%, transparent);
}
.fm__plan__btn--primary:hover { filter: brightness(.96); color: #fff; }
.fm__plan__btn--primary:active { transform: scale(.98); }
.fm__plan__btn--ghost { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-line); }
.fm__plan__btn--ghost:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ── Empty plan state ─────────────────────────────────────────────────── */
.fm__empty {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-xl); padding: var(--space-8) var(--space-6);
    text-align: center;
}
.fm__empty-icon {
    width: 64px; height: 64px; border-radius: 50%; margin: 0 auto var(--space-4);
    background: var(--color-primary-soft); color: var(--color-primary);
    display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.fm__empty h3 { font-size: 18px; font-weight: var(--fw-extrabold); margin: 0 0 8px; color: var(--color-ink); }
.fm__empty p { color: var(--color-muted); margin: 0 0 var(--space-5); font-size: 14px; }

/* ── LEARNING PATHS ───────────────────────────────────────────────────── */
.fm__paths { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3); }
@media (max-width: 640px) { .fm__paths { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .fm__paths { grid-template-columns: 1fr; } }
.fm__path {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5);
    display: flex; flex-direction: column; gap: var(--space-3);
    transition: all var(--dur-base) var(--ease); text-decoration: none; color: inherit;
    position: relative; overflow: hidden;
}
.fm__path[data-tone="primary"]   { --fm-tone: var(--color-primary);   --fm-tone-soft: var(--color-primary-soft); }
.fm__path[data-tone="secondary"] { --fm-tone: var(--color-secondary); --fm-tone-soft: var(--color-secondary-soft); }
.fm__path[data-tone="accent"]    { --fm-tone: var(--color-accent);    --fm-tone-soft: var(--color-accent-soft); }
.fm__path[data-tone="ai"]        { --fm-tone: var(--color-secondary); --fm-tone-soft: var(--color-secondary-soft); }
.fm__path::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--fm-tone); opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.fm__path:hover { border-color: color-mix(in srgb, var(--fm-tone) 40%, var(--color-border)); box-shadow: var(--shadow-md); transform: translateY(-2px); color: inherit; }
.fm__path:hover::before { opacity: 1; }
.fm__path__icon {
    width: 44px; height: 44px; border-radius: var(--radius-md);
    background: var(--fm-tone-soft); color: var(--fm-tone);
    display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0;
}
.fm__path__title { font-size: 15.5px; font-weight: var(--fw-extrabold); color: var(--color-ink); margin: 0; line-height: 1.2; }
.fm__path__desc { font-size: 13px; color: var(--color-muted); margin: 0; line-height: var(--lh-normal); flex: 1; }
.fm__path__cta { font-size: 13px; color: var(--fm-tone); font-weight: var(--fw-bold); display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: var(--space-1); }

/* AI path card with quota chip */
.fm__path__cta--with-quota {
    display: flex; align-items: center; justify-content: space-between;
}
.fm__path__quota {
    font-size: 11px;
    background: var(--fm-tone-soft);
    color: var(--fm-tone);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-weight: var(--fw-bold);
}

/* ── SIDEBAR STATS ────────────────────────────────────────────────────── */
.fm__stats-card {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-xl); padding: var(--space-5);
}
.fm__stats-title {
    font-size: 13px; font-weight: var(--fw-extrabold); color: var(--color-muted);
    text-transform: uppercase; letter-spacing: .05em; margin: 0 0 var(--space-4);
    display: flex; align-items: center; gap: 7px;
}
.fm__stats-title i { color: var(--color-primary); }
.fm__stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--color-line); border-radius: var(--radius-md); overflow: hidden; }
.fm__stat-cell { background: var(--color-bg); padding: var(--space-4); }
.fm__stat-cell:hover { background: var(--color-surface); }
.fm__stat-num { font-size: 36px; font-weight: var(--fw-extrabold); color: var(--color-ink); line-height: 1; letter-spacing: -.04em; }
.fm__stat-lbl { font-size: 11px; color: var(--color-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: var(--fw-semibold); margin-top: 6px; }
.fm__stat-cell--accent .fm__stat-num { color: var(--color-accent); }
.fm__stat-cell--secondary .fm__stat-num { color: var(--color-secondary); }
.fm__stat-cell--streak .fm__stat-num { color: var(--color-warning); }

/* ── SRS due card ─────────────────────────────────────────────────────── */
.fm__srs-card {
    background: var(--color-surface); border: 1.5px solid var(--color-warning);
    border-radius: var(--radius-xl); padding: var(--space-5);
    display: flex; flex-direction: column; gap: var(--space-3);
}
.fm__srs-head {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: var(--fw-extrabold); color: var(--color-muted);
    text-transform: uppercase; letter-spacing: .05em;
}
.fm__srs-head i { color: var(--color-warning); }
.fm__srs-count {
    font-size: 32px; font-weight: var(--fw-extrabold); color: var(--color-warning);
    line-height: 1; letter-spacing: -.04em;
}
.fm__srs-sub {
    font-size: 12px; color: var(--color-muted); margin: 0;
}
.fm__srs-cta {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--color-warning); color: var(--color-on-dark);
    border-radius: var(--radius-md); padding: 8px 14px;
    font-size: 13px; font-weight: var(--fw-bold); text-decoration: none;
    transition: opacity var(--dur-fast) var(--ease);
    margin-top: var(--space-1);
}
.fm__srs-cta:hover { opacity: .88; color: var(--color-on-dark); }

/* SRS due preview chips */
.fm__srs-words {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.fm__srs-word {
    font-size: 12px;
    background: var(--color-soft);
    border-radius: var(--radius-sm);
    padding: 2px 8px;
    color: var(--color-ink);
    font-weight: var(--fw-semibold);
}
.fm__srs-extra {
    font-size: 12px;
    color: var(--color-muted);
    padding: 2px 0;
}

/* ── ROADMAP card ─────────────────────────────────────────────────────── */
.fm__rm-card {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-xl); padding: var(--space-5);
}
.fm__rm-head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-4);
}
.fm__rm-head-title { font-size: 13px; font-weight: var(--fw-extrabold); color: var(--color-muted); text-transform: uppercase; letter-spacing: .05em; margin: 0; display: flex; align-items: center; gap: 7px; }
.fm__rm-head-title i { color: var(--color-secondary); }
.fm__rm-head a { font-size: 12px; color: var(--color-primary); font-weight: var(--fw-semibold); text-decoration: none; }
.fm__rm-title { font-size: 15px; font-weight: var(--fw-bold); color: var(--color-ink); margin: 0 0 4px; }
.fm__rm-sub { font-size: 12.5px; color: var(--color-muted); margin: 0 0 var(--space-3); }
.fm__rm-progress { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-4); }
.fm__rm-bar { flex: 1; height: 6px; background: var(--color-bg); border-radius: var(--radius-pill); overflow: hidden; border: 1px solid var(--color-line); }
.fm__rm-bar-fill { height: 100%; background: linear-gradient(90deg, var(--color-secondary), var(--color-primary)); border-radius: var(--radius-pill); }
.fm__rm-pct { font-size: 13px; font-weight: var(--fw-extrabold); color: var(--color-secondary); min-width: 32px; text-align: right; }
.fm__rm-cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; height: 42px; background: var(--color-secondary); color: var(--color-on-dark);
    border-radius: var(--radius-md); font-weight: var(--fw-bold); font-size: 14px;
    text-decoration: none; transition: all var(--dur-fast) var(--ease);
}
.fm__rm-cta:hover { background: color-mix(in srgb, var(--color-secondary) 88%, black); color: var(--color-on-dark); transform: translateY(-1px); }
.fm__rm-empty { text-align: center; padding: var(--space-4) 0; }
.fm__rm-empty p { font-size: 13px; color: var(--color-muted); margin: 0 0 var(--space-3); }

/* ── TOPICS sidebar ────────────────────────────────────────────────────── */
.fm__topics-card {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-xl); padding: var(--space-5); overflow: hidden;
}
.fm__topics-head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-4);
}
.fm__topics-head-title { font-size: 13px; font-weight: var(--fw-extrabold); color: var(--color-muted); text-transform: uppercase; letter-spacing: .05em; margin: 0; display: flex; align-items: center; gap: 7px; }
.fm__topics-head-title i { color: var(--color-accent); }
.fm__topics-head a { font-size: 12px; color: var(--color-primary); font-weight: var(--fw-semibold); text-decoration: none; }
.fm__topic-row {
    display: flex; flex-direction: column; gap: 5px;
    padding: var(--space-3) 0; border-bottom: 1px solid var(--color-line);
    text-decoration: none; color: inherit;
}
.fm__topic-row:last-child { border-bottom: 0; padding-bottom: 0; }
.fm__topic-row:first-child { padding-top: 0; }
.fm__topic-row-top { display: flex; align-items: center; justify-content: space-between; }
.fm__topic-name { font-size: 13.5px; font-weight: var(--fw-semibold); color: var(--color-text); }
.fm__topic-pct { font-size: 12px; font-weight: var(--fw-bold); color: var(--color-primary); }
.fm__topic-bar { height: 3px; background: var(--color-bg); border-radius: var(--radius-pill); overflow: hidden; }
.fm__topic-bar-fill { height: 100%; background: var(--color-primary); border-radius: var(--radius-pill); }

/* ── SRS FORECAST (main col) ──────────────────────────────────────────── */
.fm__forecast {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-xl); padding: var(--space-5);
}
.fm__forecast-head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4);
}
.fm__forecast-title { font-size: 13px; font-weight: var(--fw-extrabold); color: var(--color-muted); text-transform: uppercase; letter-spacing: .05em; margin: 0; display: flex; align-items: center; gap: 7px; }
.fm__forecast-title i { color: var(--color-accent); }
.fm__forecast-cta { font-size: 12px; color: var(--color-primary); font-weight: var(--fw-semibold); text-decoration: none; }
.fm__forecast__bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; height: 100px; padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-line); }
.fm__forecast__bar {
    display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end;
}
.fm__forecast__bar-fill {
    width: 100%; max-width: 28px;
    background: var(--color-primary-soft); border-radius: 3px 3px 2px 2px;
    min-height: 4px; transition: all var(--dur-base) var(--ease);
}
.fm__forecast__bar.is-today .fm__forecast__bar-fill { background: var(--color-primary); }
.fm__forecast__bar-num { font-size: 10.5px; font-weight: var(--fw-bold); color: var(--color-text); }
.fm__forecast__bar-day { font-size: 10.5px; color: var(--color-muted); margin-top: 5px; font-weight: var(--fw-semibold); }
.fm__forecast__bar.is-today .fm__forecast__bar-day { color: var(--color-primary); font-weight: var(--fw-extrabold); }
.fm__forecast__legend {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 12px; color: var(--color-muted); margin-top: var(--space-3);
}
.fm__forecast__legend strong { color: var(--color-ink); font-weight: var(--fw-bold); }

/* ── NOTEBOOK PREVIEW ─────────────────────────────────────────────────── */
.fm__notebook {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); overflow: hidden;
}
.fm__nb__tabs { display: flex; border-bottom: 1px solid var(--color-line); background: var(--color-bg); }
.fm__nb__tab {
    flex: 1; padding: 14px var(--space-4); font-size: 13.5px; font-weight: var(--fw-bold);
    color: var(--color-muted); text-align: center; cursor: pointer; border: 0; background: transparent;
    transition: all var(--dur-fast) var(--ease); display: flex; align-items: center; justify-content: center; gap: 6px;
    border-bottom: 2px solid transparent;
}
.fm__nb__tab:hover { color: var(--color-text); background: var(--color-surface); }
.fm__nb__tab.is-active { color: var(--color-primary); background: var(--color-surface); border-bottom-color: var(--color-primary); }
.fm__nb__count { font-size: 11px; padding: 2px 8px; background: var(--color-bg); color: var(--color-muted); border-radius: var(--radius-pill); font-weight: var(--fw-extrabold); }
.fm__nb__tab.is-active .fm__nb__count { background: var(--color-primary-soft); color: var(--color-primary); }
.fm__nb__panel { padding: var(--space-4) var(--space-5); display: none; }
.fm__nb__panel.is-active { display: block; }
.fm__nb__list { display: flex; flex-direction: column; gap: 8px; }
.fm__nb__item {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: 10px 12px; border-radius: var(--radius-sm); background: var(--color-bg);
}
.fm__nb__item-word { font-weight: var(--fw-bold); color: var(--color-ink); font-size: 14.5px; }
.fm__nb__item-ipa { font-family: var(--font-mono); font-size: 12px; color: var(--color-muted); margin-left: 6px; }
.fm__nb__item-meaning { font-size: 13px; color: var(--color-text); }
.fm__nb__empty { text-align: center; padding: var(--space-5); color: var(--color-muted); font-size: var(--fs-small); }

/* ── ROADMAP (deprecated wide card) ─────────────────────────────────── */
.fm__roadmap {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); padding: var(--space-5);
    display: grid; grid-template-columns: 1fr 200px; gap: var(--space-4); align-items: center;
}
@media (max-width: 640px) { .fm__roadmap { grid-template-columns: 1fr; } }
.fm__roadmap__title { font-size: 17px; font-weight: var(--fw-extrabold); color: var(--color-ink); margin: 0 0 4px; }
.fm__roadmap__sub { font-size: 13px; color: var(--color-muted); margin: 0 0 var(--space-3); }
.fm__roadmap__progress { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-2); }
.fm__roadmap__bar { flex: 1; height: 6px; background: var(--color-bg); border-radius: var(--radius-pill); overflow: hidden; }
.fm__roadmap__bar-fill { height: 100%; background: linear-gradient(90deg, var(--color-secondary), var(--color-primary)); border-radius: var(--radius-pill); }
.fm__roadmap__pct { font-size: 13px; font-weight: var(--fw-extrabold); color: var(--color-secondary); }
.fm__roadmap__cta { padding: 10px 18px; background: var(--color-secondary); color: var(--color-on-dark); border-radius: var(--radius-md); font-weight: var(--fw-bold); text-decoration: none; text-align: center; transition: all var(--dur-fast) var(--ease); }
.fm__roadmap__cta:hover { background: color-mix(in srgb, var(--color-secondary) 88%, black); color: var(--color-on-dark); transform: translateY(-1px); }

/* TOPICS (legacy) */
.fm__topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); }
.fm__topic {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
    text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 8px;
    transition: all var(--dur-fast) var(--ease);
}

/* ── RECENT ACTIVITY ──────────────────────────────────────────────────── */
.fm__recent { display: flex; flex-direction: column; gap: 6px; }
.fm__recent-item {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); padding: 11px var(--space-4);
    display: flex; align-items: center; gap: var(--space-3);
}
.fm__recent-icon {
    width: 34px; height: 34px; border-radius: var(--radius-sm);
    background: var(--color-secondary-soft); color: var(--color-secondary);
    display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0;
}
.fm__recent-body { flex: 1; min-width: 0; }
.fm__recent-title { font-size: 13.5px; font-weight: var(--fw-semibold); color: var(--color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm__recent-meta { font-size: 11.5px; color: var(--color-muted); margin-top: 1px; }
.fm__recent-time { font-size: 11.5px; color: var(--color-mute2); font-weight: var(--fw-medium); white-space: nowrap; }

/* ── Section label ────────────────────────────────────────────────────── */
.fm__lbl {
    font-size: 12px; font-weight: var(--fw-extrabold); color: var(--color-muted);
    text-transform: uppercase; letter-spacing: .06em;
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.fm__lbl i { color: var(--color-primary); }
.fm__lbl a { font-size: 12px; color: var(--color-primary); font-weight: var(--fw-semibold); text-decoration: none; text-transform: none; letter-spacing: 0; }

/* ── Roadmap hero card ── */
.fm__rm-hero {
    background: linear-gradient(135deg, var(--color-primary-soft) 0%, color-mix(in srgb, var(--color-secondary-soft) 60%, transparent) 100%);
    border: 1.5px solid var(--color-primary);
    border-radius: var(--radius-xl);
    padding: var(--space-6) var(--space-6);
    margin-bottom: var(--space-5);
    box-shadow: var(--shadow-sm);
    position: relative; overflow: hidden;
}
.fm__rm-hero::before {
    content: ''; position: absolute; top: 0; right: 0;
    width: 200px; height: 200px;
    background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 12%, transparent) 0%, transparent 70%);
    pointer-events: none;
}
.fm__rm-hero__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); flex-wrap: wrap; }
.fm__rm-hero__chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; background: var(--color-primary); color: var(--color-on-dark); border-radius: var(--radius-pill); font-size: 11px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .06em; }
.fm__rm-hero__chip i { font-size: 10px; }
.fm__rm-hero__week { font-size: 13px; color: var(--color-muted); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.fm__rm-hero__week strong { color: var(--color-primary-deep); font-weight: var(--fw-extrabold); }
.fm__rm-hero__title { font-size: 22px; font-weight: var(--fw-extrabold); color: var(--color-ink); margin: 0 0 var(--space-3); line-height: 1.25; letter-spacing: -.015em; }
.fm__rm-hero__bar { height: 8px; background: color-mix(in srgb, var(--color-primary) 15%, transparent); border-radius: var(--radius-pill); overflow: hidden; margin-bottom: var(--space-2); }
.fm__rm-hero__bar-fill { height: 100%; background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); border-radius: var(--radius-pill); transition: width var(--dur-base) var(--ease); }
.fm__rm-hero__meta { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--color-muted); margin-bottom: var(--space-4); font-variant-numeric: tabular-nums; }
.fm__rm-hero__meta b { color: var(--color-ink); font-weight: var(--fw-bold); }
.fm__rm-hero__next { display: flex; align-items: center; gap: 8px; padding: var(--space-3) var(--space-4); background: var(--color-surface); border-radius: var(--radius-md); margin-bottom: var(--space-4); border: 1px solid var(--color-border); }
.fm__rm-hero__next-lbl { font-size: 11px; font-weight: var(--fw-bold); color: var(--color-primary); text-transform: uppercase; letter-spacing: .06em; flex-shrink: 0; }
.fm__rm-hero__next-title { font-size: 14px; color: var(--color-ink); font-weight: var(--fw-semibold); flex: 1; }
.fm__rm-hero__cta { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.fm__rm-hero__cta .btn { font-weight: var(--fw-bold); }
.fm__rm-hero__lead { font-size: 13.5px; color: var(--color-text); margin: 0 0 var(--space-4); line-height: 1.55; }

.fm__rm-hero--empty { background: var(--color-surface); border-color: var(--color-border); }
.fm__rm-hero--empty .fm__rm-hero__chip { background: var(--color-soft); color: var(--color-muted); }

/* Roadmap items list (Today's Plan) */
.fm__rm-items { list-style: none; padding: 0; margin: var(--space-3) 0 var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.fm__rm-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: all var(--dur-fast) var(--ease); text-decoration: none; color: var(--color-ink); }
.fm__rm-item:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); transform: translateY(-1px); color: var(--color-ink); }
.fm__rm-item__ic { width: 36px; height: 36px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; background: var(--color-primary-soft); color: var(--color-primary); }
.fm__rm-item__ic[data-type="grammar"]  { background: var(--color-secondary-soft); color: var(--color-secondary-deep); }
.fm__rm-item__ic[data-type="phonics"]  { background: var(--color-accent-soft); color: var(--color-accent-deep); }
.fm__rm-item__ic[data-type="review"]   { background: var(--color-warning-soft); color: var(--color-warning-deep); }
.fm__rm-item__body { flex: 1; min-width: 0; }
.fm__rm-item__title { font-size: 14px; font-weight: var(--fw-semibold); color: var(--color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm__rm-item__meta { font-size: 11.5px; color: var(--color-muted); margin-top: 2px; }
.fm__rm-item__cta { color: var(--color-primary); font-size: 14px; flex-shrink: 0; padding: 4px 8px; }

/* ════════════════════════════════════════════════════════
   MOBILE — member hub (foundation/ielts/toeic shared shell)
   ════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .fm { padding: var(--space-4) 0 var(--space-12); }
    .fm__wrap { padding: 0 var(--space-3); }

    /* Preview banner */
    .fm__preview { padding: 12px 14px; gap: var(--space-2); margin-bottom: var(--space-4); }
    .fm__preview-msg { font-size: 13px; }
    .fm__preview .btn { font-size: 12px; }

    /* Header */
    .fm__header { padding: var(--space-4) 0 var(--space-3); gap: var(--space-2); }
    .fm__header-greeting { font-size: 22px; line-height: 1.25; letter-spacing: -.01em; }
    .fm__header-sub { font-size: 12.5px; line-height: 1.45; }

    /* Roadmap hero */
    .fm__rm-hero {
        padding: var(--space-4);
        margin-bottom: var(--space-4);
        border-radius: var(--radius-lg);
    }
    .fm__rm-hero__top { gap: var(--space-2); margin-bottom: var(--space-2); }
    .fm__rm-hero__chip { font-size: 10px; padding: 3px 10px; }
    .fm__rm-hero__week { font-size: 12px; }
    .fm__rm-hero__title { font-size: 17px; line-height: 1.25; margin-bottom: var(--space-2); }
    .fm__rm-hero__bar { height: 6px; }
    .fm__rm-hero__meta { font-size: 11.5px; margin-bottom: var(--space-3); }
    .fm__rm-hero__next { padding: 9px 12px; gap: 6px; flex-wrap: wrap; margin-bottom: var(--space-3); }
    .fm__rm-hero__next-lbl { font-size: 10px; }
    .fm__rm-hero__next-title { font-size: 13px; flex-basis: 100%; }
    .fm__rm-hero__cta { gap: 6px; }
    .fm__rm-hero__cta .btn {
        flex: 1;
        min-width: 0;
        font-size: 12.5px;
        padding: 8px 10px;
        justify-content: center;
    }
    .fm__rm-hero__lead { font-size: 12.5px; }

    /* Today's plan card */
    .fm__plan { padding: var(--space-4); border-radius: var(--radius-lg); }
    .fm__plan__head { gap: var(--space-2); margin-bottom: var(--space-3); }
    .fm__plan__badge { font-size: 9.5px; padding: 3px 9px; margin-bottom: var(--space-2); }
    .fm__plan__title { font-size: 17px; line-height: 1.2; }
    .fm__plan__lead { font-size: 12.5px; margin-bottom: var(--space-3); }
    .fm__plan__pct-box { padding: 7px 12px; }
    .fm__plan__pct-num { font-size: 20px; }
    .fm__plan__pct-label { font-size: 9px; }
    .fm__plan__bar { margin-bottom: var(--space-3); }
    .fm__plan__cta { gap: 6px; }
    .fm__plan__btn {
        height: 40px;
        padding: 0 14px;
        font-size: 13px;
        flex: 1;
        min-width: 0;
        justify-content: center;
    }

    /* Roadmap items list */
    .fm__rm-items { gap: 6px; margin: var(--space-2) 0 var(--space-3); }
    .fm__rm-item { padding: 10px 12px; gap: 10px; }
    .fm__rm-item__ic { width: 32px; height: 32px; font-size: 13px; }
    .fm__rm-item__title { font-size: 13px; }
    .fm__rm-item__meta { font-size: 11px; }
    .fm__rm-item__cta { font-size: 12px; padding: 2px 6px; }

    /* Section label */
    .fm__lbl { font-size: 11px; margin-bottom: var(--space-2); }

    /* Side stats card */
    .fm__stats-card { padding: var(--space-3); }
    .fm__stats-title { font-size: 11.5px; margin-bottom: var(--space-3); }
    .fm__stat-cell { padding: var(--space-3); }
    .fm__stat-num { font-size: 26px; }
    .fm__stat-lbl { font-size: 10px; }

    /* SRS card */
    .fm__srs-card { padding: var(--space-3); gap: var(--space-2); }
    .fm__srs-count { font-size: 26px; }
    .fm__srs-sub { font-size: 11.5px; }
    .fm__srs-cta { padding: 7px 12px; font-size: 12px; }

    /* Roadmap card (sidebar) */
    .fm__rm-card { padding: var(--space-3); }
    .fm__rm-title { font-size: 14px; }
    .fm__rm-sub { font-size: 11.5px; }
    .fm__rm-cta { height: 38px; font-size: 13px; }
}