/* =========================================================
   FPA Demo Previews — interactive in-situ mockups
   Design tokens aligned on actin-pro.thedrim.xyz
   ========================================================= */

.fpa-preview { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; color: #1E293B; background: #F8FAFC; padding: 24px 16px 40px; border-radius: 20px; box-shadow: 0 8px 30px rgba(0,0,0,0.04); max-width: 1100px; margin: 32px auto; }
.fpa-preview * { box-sizing: border-box; }
.fpa-preview svg { display: inline-block; vertical-align: middle; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; stroke: currentColor; }

/* --- Header ----------------------------------------------- */
.fpa-preview__header { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.fpa-preview__title { display: flex; gap: 12px; align-items: center; }
.fpa-preview__title h3 { margin: 0; font-size: 20px; font-weight: 900; letter-spacing: -0.02em; color: #1E293B; }
.fpa-preview__title p { margin: 2px 0 0; font-size: 12px; color: #94A3B8; }
.fpa-preview__title-icon { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; }
.fpa-preview__title-icon svg { width: 20px; height: 20px; }
.fpa-preview__title-icon--violet { background: #F5F3FF; color: #8B5CF6; }
.fpa-preview__title-icon--sky { background: #F0F9FF; color: #0EA5E9; }

.fpa-preview__controls { display: flex; flex-wrap: wrap; gap: 8px; }
.fpa-preview__device-toggle { display: inline-flex; background: #fff; border: 1px solid #E2E8F0; border-radius: 12px; overflow: hidden; padding: 2px; }
.fpa-preview__device-toggle button { background: transparent; border: 0; padding: 6px 12px; font: inherit; font-size: 11px; font-weight: 800; color: #64748B; cursor: pointer; border-radius: 10px; display: inline-flex; align-items: center; gap: 6px; transition: all 200ms ease; }
.fpa-preview__device-toggle button svg { width: 14px; height: 14px; }
.fpa-preview__device-toggle button:hover { color: #1E293B; }
.fpa-preview__device-toggle .is-active { background: #003399; color: #fff; }
.fpa-preview__device-toggle .is-active:hover { color: #fff; }

.fpa-preview__chip { background: #fff; border: 1px solid #E2E8F0; border-radius: 12px; padding: 8px 12px; font: inherit; font-size: 11px; font-weight: 800; color: #64748B; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all 200ms ease; }
.fpa-preview__chip svg { width: 13px; height: 13px; }
.fpa-preview__chip:hover { color: #003399; border-color: #003399; }
.fpa-preview__chip:active { transform: scale(0.98); }

.fpa-preview__breadcrumb { font-size: 11px; color: #94A3B8; margin-bottom: 8px; }
.fpa-preview__breadcrumb .is-active { color: #003399; font-weight: 700; }

/* --- Stage + device frame -------------------------------- */
.fpa-preview__stage { display: flex; flex-direction: column; align-items: center; padding: 12px 0; }
.fpa-preview__device-label { font-size: 10px; font-weight: 800; color: #94A3B8; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 10px; display: inline-flex; align-items: center; gap: 6px; }
.fpa-preview__device-label svg { width: 12px; height: 12px; }

.fpa-phone { position: relative; width: 375px; max-width: 100%; height: 812px; background: #000; border-radius: 52px; padding: 14px; box-shadow: 0 50px 100px rgba(0,0,0,0.3); }
.fpa-phone__notch { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 120px; height: 34px; background: #000; border-radius: 999px; z-index: 20; display: flex; align-items: center; justify-content: center; }
.fpa-phone__notch-dot { width: 10px; height: 10px; border-radius: 50%; background: #1E293B; border: 1px solid #334155; }
.fpa-phone__screen { position: relative; width: 100%; height: 100%; background: #F8FAFC; border-radius: 40px; overflow: hidden; display: flex; flex-direction: column; }
.fpa-phone__statusbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 32px 4px; font-size: 13px; font-weight: 600; color: #1E293B; }
.fpa-phone__statusbar-icons { display: inline-flex; gap: 6px; align-items: center; color: #1E293B; }
.fpa-phone__statusbar-icons svg { width: 13px; height: 13px; }
.fpa-phone__homebar { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 134px; height: 5px; background: rgba(30,41,59,0.2); border-radius: 999px; }

/* --- App inner content ------------------------------------ */
.fpa-app { flex: 1; overflow-y: auto; padding: 8px 16px 16px; }
.fpa-app__greeting { display: flex; align-items: center; justify-content: space-between; padding: 16px 0 12px; }
.fpa-app__greeting-left { display: flex; gap: 12px; align-items: center; }
.fpa-app__name { margin: 0; font-size: 18px; font-weight: 900; color: #1E293B; letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 4px; }
.fpa-wave { display: inline-block; animation: fpa-wave 2.5s infinite; transform-origin: 70% 70%; }
@keyframes fpa-wave { 0%, 60%, 100% { transform: rotate(0deg); } 10%, 30% { transform: rotate(14deg); } 20% { transform: rotate(-8deg); } 40% { transform: rotate(-4deg); } 50% { transform: rotate(10deg); } }
.fpa-muted-xs { margin: 0; font-size: 10px; color: #94A3B8; font-weight: 500; }
.fpa-muted-xxs { margin: 0; font-size: 9px; color: #94A3B8; }
.fpa-muted--teal { color: #14B8A6 !important; }
.fpa-link-blue { color: #003399; font-weight: 700; }
.fpa-link-sky { color: #0EA5E9; font-weight: 700; }

/* --- Avatars ---------------------------------------------- */
.fpa-avatar { border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; flex-shrink: 0; }
.fpa-avatar--lg { width: 44px; height: 44px; font-size: 14px; }
.fpa-avatar--sm { width: 36px; height: 36px; font-size: 12px; border-radius: 10px; }
.fpa-avatar--learner { background: linear-gradient(135deg,#0EA5E9,#14B8A6); }
.fpa-avatar--mentor { background: linear-gradient(135deg,#003399,#1A43A4); }

/* --- Bell + badge ----------------------------------------- */
.fpa-bell { position: relative; width: 40px; height: 40px; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.04); border: 0; color: #64748B; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 200ms ease; }
.fpa-bell svg { width: 18px; height: 18px; }
.fpa-bell:hover { color: #003399; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.fpa-bell:active { transform: scale(0.95); }
.fpa-bell__badge { position: absolute; top: -2px; right: -2px; min-width: 15px; height: 15px; padding: 0 3px; background: #EF4444; color: #fff; font-size: 8px; font-weight: 900; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1.5px #fff; }

/* --- Progress card ---------------------------------------- */
.fpa-card-progress { background: linear-gradient(135deg,#003399,#0EA5E9); color: #fff; border-radius: 16px; padding: 18px; margin-bottom: 12px; }
.fpa-card-progress__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.fpa-card-progress__head > span:first-child { font-size: 12px; font-weight: 600; opacity: 0.8; }
.fpa-card-progress__value { font-size: 24px; font-weight: 900; letter-spacing: -0.02em; }
.fpa-card-progress__bar { width: 100%; height: 10px; background: rgba(255,255,255,0.2); border-radius: 999px; overflow: hidden; }
.fpa-card-progress__bar > div { background: #fff; height: 100%; border-radius: 999px; transition: width 600ms ease; }
.fpa-card-progress__meta { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; opacity: 0.7; }

/* --- CTA Next --------------------------------------------- */
.fpa-cta-next { width: 100%; background: #fff; border: 1px solid rgba(0,51,153,0.1); border-radius: 16px; padding: 14px; box-shadow: 0 8px 30px rgba(0,0,0,0.04); position: relative; overflow: hidden; text-align: left; cursor: pointer; display: flex; gap: 10px; margin-bottom: 12px; transition: all 200ms ease; }
.fpa-cta-next:hover { transform: translateY(-1px); box-shadow: 0 12px 36px rgba(0,51,153,0.12); border-color: rgba(0,51,153,0.25); }
.fpa-cta-next:active { transform: scale(0.98); }
.fpa-cta-next__bar { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #003399; border-radius: 0 999px 999px 0; }
.fpa-cta-next__body { padding-left: 6px; display: flex; flex-direction: column; gap: 2px; width: 100%; }
.fpa-cta-next__action { font-size: 14px; font-weight: 900; color: #1E293B; display: flex; justify-content: space-between; align-items: center; }
.fpa-cta-next__action svg { width: 14px; height: 14px; color: #003399; }
.fpa-cta-next__exp { margin: 0; font-size: 11px; color: #94A3B8; }
.fpa-cta-next__link { margin-top: 6px; font-size: 10px; font-weight: 800; color: #003399; display: inline-flex; align-items: center; gap: 4px; }
.fpa-cta-next__link svg { width: 10px; height: 10px; }

.fpa-eyebrow { font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.fpa-eyebrow--blue { color: #003399; }
.fpa-eyebrow--amber { color: #D97706; }
.fpa-eyebrow--sky { color: #0284C7; }

/* --- Mentor row ------------------------------------------- */
.fpa-mentor { background: #fff; border: 1px solid #F1F5F9; border-radius: 16px; padding: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.04); display: flex; align-items: center; gap: 10px; margin-bottom: 12px; cursor: pointer; transition: all 200ms ease; }
.fpa-mentor:hover { transform: translateY(-1px); box-shadow: 0 12px 36px rgba(0,0,0,0.08); }
.fpa-mentor__body { flex: 1; min-width: 0; }
.fpa-mentor__name { margin: 2px 0 0; font-size: 12px; font-weight: 800; color: #334155; }
.fpa-chip-icon { width: 32px; height: 32px; border-radius: 8px; background: rgba(0,51,153,0.06); display: inline-flex; align-items: center; justify-content: center; color: #003399; transition: background 200ms ease; }
.fpa-mentor:hover .fpa-chip-icon { background: rgba(0,51,153,0.14); }
.fpa-chip-icon svg { width: 14px; height: 14px; }

/* --- Mini tiles 2-up -------------------------------------- */
.fpa-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.fpa-mini-tile { background: #F1F5F9; border: 0; border-radius: 12px; padding: 12px; display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer; transition: all 200ms ease; }
.fpa-mini-tile:hover { transform: translateY(-1px); background: #E2E8F0; }
.fpa-mini-tile--teal { background: #F0FDFA; }
.fpa-mini-tile--teal:hover { background: #CCFBF1; }
.fpa-mini-tile svg { width: 16px; height: 16px; color: #64748B; flex-shrink: 0; }
.fpa-mini-tile--teal svg { color: #0F766E; }
.fpa-mini-tile__value { margin: 0; font-size: 11px; font-weight: 800; color: #334155; }
.fpa-mini-tile__value--teal { color: #0F766E; }

/* --- Search input ----------------------------------------- */
.fpa-search { position: relative; margin-bottom: 10px; }
.fpa-search__icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #CBD5E1; }
.fpa-search__icon svg { width: 14px; height: 14px; }
.fpa-search input { width: 100%; padding: 10px 12px 10px 36px; font: inherit; font-size: 12px; background: #fff; border: 1px solid #F1F5F9; border-radius: 12px; color: #334155; box-shadow: 0 8px 30px rgba(0,0,0,0.04); transition: all 200ms ease; }
.fpa-search input:focus { outline: none; border-color: rgba(0,51,153,0.3); box-shadow: 0 0 0 4px rgba(0,51,153,0.05); }

/* --- List head + filters --------------------------------- */
.fpa-list-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.fpa-list-head h2 { margin: 0; font-size: 14px; font-weight: 800; color: #1E293B; }
.fpa-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.fpa-filter { background: #F1F5F9; border: 0; border-radius: 12px; padding: 6px 10px; font: inherit; font-size: 11px; font-weight: 800; color: #64748B; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; transition: all 200ms ease; }
.fpa-filter:hover { transform: translateY(-1px); }
.fpa-filter__count { background: rgba(0,0,0,0.08); padding: 2px 6px; border-radius: 999px; font-size: 9px; font-weight: 900; }
.fpa-filter.is-active.fpa-filter--all { background: #003399; color: #fff; }
.fpa-filter--todo { background: #FFFBEB; color: #D97706; }
.fpa-filter--progress { background: #F0F9FF; color: #0284C7; }
.fpa-filter--done { background: #ECFDF5; color: #059669; }

/* --- Activities list ------------------------------------- */
.fpa-activities { display: flex; flex-direction: column; gap: 10px; }
.fpa-act { width: 100%; background: #fff; border: 1px solid #F1F5F9; border-radius: 16px; padding: 14px; box-shadow: 0 8px 30px rgba(0,0,0,0.04); display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; position: relative; overflow: hidden; cursor: pointer; text-align: left; transition: all 200ms ease; }
.fpa-act:hover { transform: translateY(-1px); box-shadow: 0 12px 36px rgba(0,0,0,0.08); }
.fpa-act:active { transform: scale(0.98); }
.fpa-act__bar { position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 999px 999px 0; }
.fpa-act__bar--green { background: #22C55E; } .fpa-act__bar--amber { background: #F59E0B; } .fpa-act__bar--sky { background: #38BDF8; } .fpa-act__bar--blue { background: #3B82F6; } .fpa-act__bar--slate { background: #CBD5E1; } .fpa-act__bar--purple { background: #A855F7; }
.fpa-act__icon { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; }
.fpa-act__icon svg { width: 18px; height: 18px; }
.fpa-act__icon--green { background: #F0FDF4; color: #16A34A; }
.fpa-act__icon--amber { background: #FFFBEB; color: #D97706; }
.fpa-act__icon--sky { background: #F0F9FF; color: #0284C7; }
.fpa-act__icon--blue { background: #EFF6FF; color: #2563EB; }
.fpa-act__icon--slate { background: #F1F5F9; color: #64748B; }
.fpa-act__icon--purple { background: #FAF5FF; color: #9333EA; }
.fpa-act__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fpa-act__title { font-size: 13px; font-weight: 700; color: #1E293B; line-height: 1.25; }
.fpa-act__status { font-size: 11px; font-weight: 700; }
.fpa-act__status--green { color: #16A34A; } .fpa-act__status--amber { color: #D97706; } .fpa-act__status--sky { color: #0284C7; } .fpa-act__status--blue { color: #2563EB; } .fpa-act__status--slate { color: #64748B; }
.fpa-act__chev { color: #CBD5E1; }
.fpa-act__chev svg { width: 16px; height: 16px; }
.fpa-act__chev--amber { color: #FCD34D; }

/* --- Tip card -------------------------------------------- */
.fpa-tip { background: rgba(254,252,232,0.6); border: 1px solid #FDE68A; border-radius: 16px; padding: 14px; display: flex; gap: 10px; margin-top: 12px; }
.fpa-tip--sky { background: rgba(240,249,255,0.6); border-color: #BAE6FD; }
.fpa-tip__icon { width: 32px; height: 32px; border-radius: 8px; background: #FEF3C7; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: #D97706; }
.fpa-tip__icon svg { width: 16px; height: 16px; }
.fpa-tip__icon--sky { background: #E0F2FE; color: #0284C7; }
.fpa-tip p { margin: 4px 0 0; font-size: 11px; color: #475569; line-height: 1.5; }

/* --- Tab bar --------------------------------------------- */
.fpa-tabbar { flex-shrink: 0; background: #fff; border-top: 1px solid #F1F5F9; padding: 8px 8px 20px; display: flex; justify-content: space-around; align-items: center; }
.fpa-tabbar button { background: transparent; border: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 8px; font: inherit; color: #94A3B8; cursor: pointer; position: relative; transition: color 200ms ease; }
.fpa-tabbar button:hover { color: #64748B; }
.fpa-tabbar button.is-active { color: #003399; }
.fpa-tabbar--sky button.is-active { color: #0EA5E9; }
.fpa-tabbar button.is-active::before { content: ""; position: absolute; top: -2px; left: 50%; transform: translateX(-50%); width: 20px; height: 2px; background: currentColor; border-radius: 999px; }
.fpa-tabbar__icon { font-size: 0; line-height: 1; }
.fpa-tabbar__icon svg { width: 20px; height: 20px; }
.fpa-tabbar__label { font-size: 10px; font-weight: 700; }
.fpa-tabbar__badge { position: absolute; top: 0; right: 8px; min-width: 15px; height: 15px; padding: 0 3px; background: #EF4444; color: #fff; font-size: 8px; font-weight: 900; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1.5px #fff; }

/* --- Trainer: Todo card ---------------------------------- */
.fpa-card-todo { background: #fff; border: 1px solid #F1F5F9; border-radius: 16px; box-shadow: 0 8px 30px rgba(0,0,0,0.04); margin-bottom: 12px; overflow: hidden; }
.fpa-card-todo__head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 6px; }
.fpa-card-todo__list { display: flex; flex-direction: column; padding: 0 12px 12px; gap: 2px; }
.fpa-todo { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; padding: 8px; border: 0; background: transparent; border-radius: 12px; text-align: left; cursor: pointer; transition: background 200ms ease; }
.fpa-todo:hover { background: #F8FAFC; }
.fpa-todo__icon { width: 32px; height: 32px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; }
.fpa-todo__icon svg { width: 14px; height: 14px; }
.fpa-todo__icon--sky { background: #F0F9FF; color: #0EA5E9; }
.fpa-todo__icon--purple { background: #FAF5FF; color: #9333EA; }
.fpa-todo__icon--blue { background: #EFF6FF; color: #2563EB; }
.fpa-todo__body { display: flex; flex-direction: column; min-width: 0; }
.fpa-todo__label { font-size: 12px; font-weight: 800; color: #1E293B; }
.fpa-todo__sub { font-size: 10px; color: #94A3B8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- Trainer: gradient CTAs ------------------------------ */
.fpa-grid-2--cta { margin-bottom: 12px; }
.fpa-cta-grad { border: 0; border-radius: 16px; padding: 12px; color: #fff; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; cursor: pointer; box-shadow: 0 10px 24px rgba(0,51,153,0.15); transition: all 250ms ease; }
.fpa-cta-grad:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0,51,153,0.25); }
.fpa-cta-grad:active { transform: scale(0.98); }
.fpa-cta-grad--blue { background: linear-gradient(135deg,#003399,#38BDF8); }
.fpa-cta-grad--teal { background: linear-gradient(135deg,#0EA5E9,#14B8A6); }
.fpa-cta-grad__ico { width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,0.2); display: inline-flex; align-items: center; justify-content: center; }
.fpa-cta-grad__ico svg { width: 16px; height: 16px; color: #fff; }
.fpa-cta-grad__title { display: block; font-size: 12px; font-weight: 800; }
.fpa-cta-grad__sub { display: block; font-size: 9px; opacity: 0.85; }

/* --- Trainer: KPI grid ----------------------------------- */
.fpa-kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.fpa-kpi { background: #fff; border: 1px solid #F1F5F9; border-radius: 16px; padding: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.04); position: relative; overflow: hidden; }
.fpa-kpi__bar { position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 999px 999px 0; }
.fpa-kpi--blue .fpa-kpi__bar { background: #3B82F6; }
.fpa-kpi--amber .fpa-kpi__bar { background: #F59E0B; }
.fpa-kpi--green .fpa-kpi__bar { background: #22C55E; }
.fpa-kpi--emerald .fpa-kpi__bar { background: #10B981; }
.fpa-kpi__body { padding-left: 6px; }
.fpa-kpi__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.fpa-kpi__label { font-size: 9px; font-weight: 800; color: #94A3B8; letter-spacing: 0.16em; text-transform: uppercase; }
.fpa-kpi__icon { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
.fpa-kpi__icon svg { width: 14px; height: 14px; }
.fpa-kpi--blue .fpa-kpi__icon { background: #EFF6FF; color: #2563EB; }
.fpa-kpi--amber .fpa-kpi__icon { background: #FFFBEB; color: #D97706; }
.fpa-kpi--green .fpa-kpi__icon { background: #F0FDF4; color: #16A34A; }
.fpa-kpi--emerald .fpa-kpi__icon { background: #ECFDF5; color: #059669; }
.fpa-kpi__value { font-size: 20px; font-weight: 900; color: #1E293B; letter-spacing: -0.02em; }
.fpa-kpi__trend { font-size: 9px; font-weight: 800; color: #10B981; }

/* --- Next session ---------------------------------------- */
.fpa-next-session { background: #F1F5F9; border-radius: 12px; padding: 12px; display: flex; align-items: center; gap: 8px; font-size: 11px; color: #64748B; margin-bottom: 12px; }
.fpa-next-session svg { width: 14px; height: 14px; color: #003399; flex-shrink: 0; }
.fpa-next-session strong { color: #334155; font-weight: 800; }

/* --- Panels (stats, checklist, learners, timeline) ------ */
.fpa-panel { background: #fff; border: 1px solid #F1F5F9; border-radius: 16px; padding: 16px; box-shadow: 0 8px 30px rgba(0,0,0,0.04); margin-bottom: 12px; }
.fpa-panel__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.fpa-panel__title { margin: 0 0 10px; font-size: 11px; font-weight: 800; color: #64748B; text-transform: uppercase; letter-spacing: 0.14em; }
.fpa-panel__link { background: transparent; border: 0; font: inherit; font-size: 10px; font-weight: 700; color: #0EA5E9; cursor: pointer; padding: 0; transition: color 200ms ease; }
.fpa-panel__link:hover { color: #003399; }

.fpa-stack-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; margin-bottom: 12px; }
.fpa-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fpa-legend > div { display: flex; align-items: center; gap: 6px; font-size: 10px; color: #64748B; }
.fpa-legend strong { margin-left: auto; color: #334155; font-weight: 800; }
.fpa-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

.fpa-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fpa-checklist li { display: flex; align-items: center; gap: 10px; font-size: 11px; color: #334155; font-weight: 500; }
.fpa-checklist li.is-done { color: #94A3B8; text-decoration: line-through; }
.fpa-check { width: 20px; height: 20px; border-radius: 6px; background: #D1FAE5; color: #059669; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fpa-check svg { width: 12px; height: 12px; }
.fpa-check--empty { background: #F1F5F9; position: relative; color: #CBD5E1; }
.fpa-check--empty::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #CBD5E1; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }

.fpa-alert { width: 100%; background: linear-gradient(90deg,#FFFBEB,#FFEDD5); border: 1px solid #FDE68A; border-radius: 16px; padding: 14px; display: flex; gap: 10px; align-items: center; margin-bottom: 12px; cursor: pointer; text-align: left; transition: all 200ms ease; }
.fpa-alert:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(245,158,11,0.15); }
.fpa-alert__icon { width: 40px; height: 40px; border-radius: 12px; background: #FEF3C7; display: inline-flex; align-items: center; justify-content: center; color: #D97706; }
.fpa-alert__icon svg { width: 18px; height: 18px; }
.fpa-alert__body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.fpa-alert__title { font-size: 13px; font-weight: 800; color: #1E293B; }

.fpa-learners { display: flex; flex-direction: column; gap: 12px; }
.fpa-learner { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 6px; margin: -6px; border-radius: 10px; transition: background 200ms ease; }
.fpa-learner:hover { background: #F8FAFC; }
.fpa-learner__body { flex: 1; }
.fpa-learner__row { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: #334155; }
.fpa-progress-mini { width: 100%; height: 6px; background: #F1F5F9; border-radius: 999px; overflow: hidden; margin-top: 4px; }
.fpa-progress-mini > div { height: 100%; border-radius: 999px; transition: width 600ms ease; }

.fpa-timeline { display: flex; flex-direction: column; gap: 12px; }
.fpa-timeline__item { display: flex; gap: 10px; align-items: flex-start; }
.fpa-timeline__dot { width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fpa-timeline__dot svg { width: 14px; height: 14px; }
.fpa-timeline__dot--purple { background: #FAF5FF; color: #9333EA; }
.fpa-timeline__dot--blue { background: #EFF6FF; color: #2563EB; }
.fpa-timeline__dot--green { background: #F0FDF4; color: #16A34A; }
.fpa-timeline p { margin: 0; font-size: 12px; color: #334155; font-weight: 600; }

/* --- Responsive ------------------------------------------ */
@media (max-width: 480px) {
  .fpa-phone { width: 100%; height: auto; aspect-ratio: 375/812; padding: 10px; border-radius: 38px; }
  .fpa-phone__screen { border-radius: 28px; }
  .fpa-phone__notch { width: 90px; height: 26px; top: 10px; }
}