/* ==========================================================================
FIA Prep Portal — Stylesheet
Scope: everything is namespaced under .fia-portal to avoid theme conflicts.
========================================================================== */
.fia-portal,
.fia-portal *,
.fia-portal *::before,
.fia-portal *::after {
box-sizing: border-box;
}
/* ===== Design tokens ===================================================== */
.fia-portal {
/* Brand: deep navy → royal → sky */
--fia-navy-900: #0b1f4d;
--fia-navy-800: #102a6b;
--fia-blue-700: #1a3fa0;
--fia-blue-600: #2455c9;
--fia-blue-500: #3b6ee8;
--fia-blue-400: #5a8bff;
--fia-sky-300: #8fb4ff;
--fia-accent: #00d4ff;
/* Neutrals */
--fia-bg: #f5f7fb;
--fia-surface: #ffffff;
--fia-surface-2: #f0f3fb;
--fia-line: #e3e8f3;
--fia-text: #0f1834;
--fia-text-2: #4a5577;
--fia-text-3: #7a85a3;
/* Subject colors */
--fia-sub-en: #2455c9;
--fia-sub-iq: #00b8d9;
--fia-sub-gk: #f59f00;
--fia-sub-pk: #16a34a;
--fia-sub-is: #7c3aed;
--fia-sub-cp: #ef4444;
/* Gradients */
--fia-grad: linear-gradient(135deg, var(--fia-navy-900) 0%, var(--fia-blue-700) 45%, var(--fia-blue-500) 100%);
--fia-grad-soft: linear-gradient(135deg, #eaf0ff 0%, #f7faff 100%);
--fia-grad-hero: linear-gradient(120deg, #0b1f4d 0%, #1a3fa0 55%, #2455c9 100%);
/* Geometry */
--fia-radius: 16px;
--fia-radius-s: 10px;
--fia-radius-l: 22px;
/* Shadows */
--fia-shadow-1: 0 1px 2px rgba(15, 24, 52, 0.04), 0 1px 3px rgba(15, 24, 52, 0.06);
--fia-shadow-2: 0 8px 24px -10px rgba(15, 24, 52, 0.18), 0 2px 6px rgba(15, 24, 52, 0.06);
--fia-shadow-3: 0 24px 60px -20px rgba(15, 24, 52, 0.35);
/* Type */
--fia-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
/* Motion */
--fia-ease: cubic-bezier(.4, .14, .2, 1);
font-family: var(--fia-font);
color: var(--fia-text);
background: var(--fia-bg);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
border-radius: var(--fia-radius-l);
overflow: hidden;
min-height: 720px;
position: relative;
}
/* ===== Layout shell ====================================================== */
.fia-portal .fia-shell {
display: grid;
grid-template-columns: 264px 1fr;
min-height: 720px;
}
/* ===== Sidebar =========================================================== */
.fia-portal .fia-sidebar {
background: var(--fia-grad);
color: #fff;
padding: 28px 18px;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
}
.fia-portal .fia-sidebar::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(900px 400px at 20% -20%, rgba(255,255,255,0.18), transparent 60%),
radial-gradient(700px 300px at 120% 110%, rgba(0, 212, 255, 0.18), transparent 60%);
pointer-events: none;
}
.fia-portal .fia-brand {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 28px;
position: relative;
z-index: 1;
}
.fia-portal .fia-logo-mark {
width: 42px;
height: 42px;
border-radius: 12px;
background: linear-gradient(135deg, #ffffff 0%, #cfe1ff 100%);
color: var(--fia-navy-900);
display: grid;
place-items: center;
font-weight: 800;
font-size: 20px;
letter-spacing: -0.02em;
box-shadow: inset 0 -2px 0 rgba(0,0,0,0.08), 0 4px 14px rgba(0,0,0,0.18);
}
.fia-portal .fia-brand-text {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.fia-portal .fia-brand-text strong {
font-size: 16px;
font-weight: 700;
letter-spacing: -0.01em;
}
.fia-portal .fia-brand-text span {
font-size: 12px;
color: rgba(255,255,255,0.7);
}
/* Nav */
.fia-portal .fia-nav {
display: flex;
flex-direction: column;
gap: 4px;
position: relative;
z-index: 1;
}
.fia-portal .fia-nav-item {
all: unset;
display: flex;
align-items: center;
gap: 12px;
padding: 11px 14px;
border-radius: 10px;
cursor: pointer;
color: rgba(255,255,255,0.78);
font-size: 14px;
font-weight: 500;
transition: background 0.18s var(--fia-ease), color 0.18s var(--fia-ease), transform 0.18s var(--fia-ease);
position: relative;
}
.fia-portal .fia-nav-item:hover {
background: rgba(255,255,255,0.08);
color: #fff;
}
.fia-portal .fia-nav-item:focus-visible {
outline: 2px solid var(--fia-accent);
outline-offset: 2px;
}
.fia-portal .fia-nav-item.is-active {
background: rgba(255,255,255,0.16);
color: #fff;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
.fia-portal .fia-nav-item.is-active::before {
content: "";
position: absolute;
left: -18px;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 22px;
background: var(--fia-accent);
border-radius: 0 4px 4px 0;
box-shadow: 0 0 12px var(--fia-accent);
}
.fia-portal .fia-nav-icon {
width: 18px;
height: 18px;
display: inline-block;
background: currentColor;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
flex: 0 0 18px;
}
/* SVG icons via mask */
.fia-portal .fia-nav-icon[data-icon="home"] { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.fia-portal .fia-nav-icon[data-icon="grid"] { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.fia-portal .fia-nav-icon[data-icon="book"] { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.fia-portal .fia-nav-icon[data-icon="calendar"] { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.fia-portal .fia-nav-icon[data-icon="check"] { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.fia-portal .fia-nav-icon[data-icon="chart"] { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.fia-portal .fia-nav-icon[data-icon="user"] { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.fia-portal .fia-nav-icon[data-icon="notes"] { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.fia-portal .fia-sidebar-foot {
margin-top: auto;
padding-top: 24px;
position: relative;
z-index: 1;
}
.fia-portal .fia-help-card {
display: flex;
flex-direction: column;
gap: 4px;
padding: 14px;
border-radius: var(--fia-radius-s);
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.12);
font-size: 13px;
}
.fia-portal .fia-help-card strong { color: #fff; font-weight: 600; }
.fia-portal .fia-help-card span { color: rgba(255,255,255,0.7); }
/* ===== Main ============================================================== */
.fia-portal .fia-main {
background: var(--fia-bg);
padding: 24px 28px 36px;
overflow: hidden;
}
/* ===== Header ============================================================ */
.fia-portal .fia-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin-bottom: 22px;
}
.fia-portal .fia-header-title {
margin: 0;
font-size: 24px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--fia-text);
}
.fia-portal .fia-header-sub {
margin: 2px 0 0;
font-size: 14px;
color: var(--fia-text-3);
}
.fia-portal .fia-header-right {
display: flex;
align-items: center;
gap: 14px;
}
.fia-portal .fia-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 12px;
border-radius: 999px;
background: var(--fia-surface);
border: 1px solid var(--fia-line);
color: var(--fia-text-2);
font-size: 13px;
font-weight: 500;
box-shadow: var(--fia-shadow-1);
}
.fia-portal .fia-pill.is-set {
background: var(--fia-grad);
color: #fff;
border-color: transparent;
}
.fia-portal .fia-avatar {
width: 40px;
height: 40px;
border-radius: 999px;
background: var(--fia-grad);
color: #fff;
display: grid;
place-items: center;
font-weight: 700;
box-shadow: var(--fia-shadow-2);
}
/* ===== Panels ============================================================ */
.fia-portal .fia-panel {
display: none;
animation: fia-fade-in 0.32s var(--fia-ease);
}
.fia-portal .fia-panel.is-active {
display: block;
}
@keyframes fia-fade-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.fia-portal .fia-panel-head {
margin-bottom: 20px;
}
/* Hide duplicate heading — the top header bar already shows the tab name */
.fia-portal .fia-panel-head.fia-panel-head--hidden {
display: none;
}
.fia-portal .fia-panel-head h2 {
margin: 0 0 4px;
font-size: 22px;
font-weight: 700;
letter-spacing: -0.02em;
}
.fia-portal .fia-panel-head p {
margin: 0;
color: var(--fia-text-3);
font-size: 14px;
}
/* ── Avg-score card colour states ── */
.fia-portal .fia-stat-card[data-avg-card] { transition: border-color 0.3s, background 0.3s; }
.fia-portal .fia-avg--very-poor { border-color: #dc2626 !important; background: #fff1f2 !important; }
.fia-portal .fia-avg--very-poor .fia-stat-value { color: #dc2626; }
.fia-portal .fia-avg--poor { border-color: #f97316 !important; background: #fff7ed !important; }
.fia-portal .fia-avg--poor .fia-stat-value { color: #ea580c; }
.fia-portal .fia-avg--ok { border-color: #eab308 !important; background: #fefce8 !important; }
.fia-portal .fia-avg--ok .fia-stat-value { color: #ca8a04; }
.fia-portal .fia-avg--good { border-color: #22c55e !important; background: #f0fdf4 !important; }
.fia-portal .fia-avg--good .fia-stat-value { color: #16a34a; }
.fia-portal .fia-avg--excellent { border-color: #10b981 !important; background: #ecfdf5 !important; }
.fia-portal .fia-avg--excellent .fia-stat-value { color: #059669; }
/* ── Streak fire emoji ── */
.fia-portal .fia-streak-fire {
display: inline-block;
font-size: 16px;
transition: transform 0.2s;
}
.fia-portal .fia-fire--cold { opacity: 0.35; filter: grayscale(1); }
.fia-portal .fia-fire--warm { opacity: 0.7; }
.fia-portal .fia-fire--hot { animation: fia-fire-pulse 1.4s ease-in-out infinite; }
.fia-portal .fia-fire--blazing { animation: fia-fire-pulse 0.8s ease-in-out infinite; font-size: 20px; }
@keyframes fia-fire-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.25) rotate(-5deg); }
}
/* ── Subject card variants (mid / strong) ── */
.fia-portal .fia-subj-card--mid {
background: #fffbeb;
border-color: #fde68a;
border-left-color: #f59e0b;
}
.fia-portal .fia-subj-card--strong {
background: #f0fdf4;
border-color: #bbf7d0;
border-left-color: #22c55e;
}
.fia-portal .fia-progress-fill--mid { background: #f59e0b; }
.fia-portal .fia-progress-fill--strong { background: #22c55e; }
/* ── Subject inline badge ── */
.fia-portal .fia-subj-inline-badge {
display: inline-block;
margin-left: 6px;
padding: 2px 8px;
border-radius: 20px;
font-size: 10.5px;
font-weight: 600;
vertical-align: middle;
}
.fia-portal .fia-subj-badge--weak-tag { background: #fef2f2; color: #b91c1c; }
.fia-portal .fia-subj-badge--mid-tag { background: #fef9c3; color: #92400e; }
.fia-portal .fia-subj-badge--strong-tag { background: #dcfce7; color: #15803d; }
/* ── Pct color overrides for non-weak ── */
.fia-portal .fia-weak-subj-pct--mid { color: #d97706; }
.fia-portal .fia-weak-subj-pct--strong { color: #16a34a; }
/* ── Topic chip variants ── */
.fia-portal .fia-topic-chip--mid {
background: #fffbeb;
border-color: #fde68a;
color: #78350f;
}
.fia-portal .fia-topic-chip--mid em { color: #d97706; }
.fia-portal .fia-topic-chip--strong {
background: #f0fdf4;
border-color: #bbf7d0;
color: #14532d;
}
.fia-portal .fia-topic-chip--strong em { color: #16a34a; }
/* ===== Cards & primitives ================================================ */
.fia-portal .fia-card {
background: var(--fia-surface);
border: 1px solid var(--fia-line);
border-radius: var(--fia-radius);
padding: 20px;
box-shadow: var(--fia-shadow-1);
}
.fia-portal .fia-card-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
}
.fia-portal .fia-card-head h3 {
margin: 0;
font-size: 16px;
font-weight: 600;
}
.fia-portal .fia-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
/* Buttons */
.fia-portal .fia-btn {
all: unset;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 11px 18px;
border-radius: 10px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: transform 0.15s var(--fia-ease), box-shadow 0.18s var(--fia-ease), background 0.18s var(--fia-ease);
user-select: none;
}
.fia-portal .fia-btn:focus-visible {
outline: 2px solid var(--fia-blue-500);
outline-offset: 2px;
}
.fia-portal .fia-btn-primary {
background: var(--fia-grad);
color: #fff;
box-shadow: 0 6px 18px -6px rgba(36, 85, 201, 0.55);
}
.fia-portal .fia-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -8px rgba(36, 85, 201, 0.7); }
.fia-portal .fia-btn-primary:active { transform: translateY(0); }
.fia-portal .fia-btn-primary[disabled] { opacity: 0.55; cursor: not-allowed; }
.fia-portal .fia-btn-ghost {
background: var(--fia-surface);
color: var(--fia-blue-700);
border: 1px solid var(--fia-line);
}
.fia-portal .fia-btn-ghost:hover { background: var(--fia-surface-2); }
.fia-portal .fia-btn-sm { padding: 8px 14px; font-size: 13px; }
.fia-portal .fia-btn-mini { padding: 7px 12px; font-size: 12px; border-radius: 8px; background: var(--fia-grad-soft); color: var(--fia-blue-700); border: 1px solid var(--fia-line); }
.fia-portal .fia-btn-mini:hover { background: #e2ecff; }
/* ===== Hero (dashboard) ================================================== */
.fia-portal .fia-hero {
position: relative;
background: var(--fia-grad-hero);
color: #fff;
border-radius: var(--fia-radius-l);
padding: 36px 38px;
margin-bottom: 22px;
overflow: hidden;
box-shadow: var(--fia-shadow-3);
display: grid;
grid-template-columns: 1fr 220px;
align-items: center;
gap: 24px;
}
.fia-portal .fia-hero::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(700px 240px at 100% 0%, rgba(0, 212, 255, 0.35), transparent 60%),
radial-gradient(600px 200px at 0% 100%, rgba(255, 255, 255, 0.18), transparent 60%);
pointer-events: none;
}
.fia-portal .fia-hero-text { position: relative; z-index: 1; }
.fia-portal .fia-eyebrow {
display: inline-block;
padding: 4px 10px;
border-radius: 999px;
background: rgba(255,255,255,0.14);
border: 1px solid rgba(255,255,255,0.18);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 12px;
}
.fia-portal .fia-hero h2 {
margin: 0 0 8px;
font-size: 30px;
line-height: 1.15;
font-weight: 800;
letter-spacing: -0.025em;
}
.fia-portal .fia-hero p {
margin: 0 0 18px;
color: rgba(255,255,255,0.82);
max-width: 520px;
}
.fia-portal .fia-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.fia-portal .fia-hero .fia-btn-ghost {
background: rgba(255,255,255,0.1);
color: #fff;
border-color: rgba(255,255,255,0.2);
}
.fia-portal .fia-hero .fia-btn-ghost:hover { background: rgba(255,255,255,0.16); }
.fia-portal .fia-hero-art {
position: relative;
height: 160px;
display: none;
}
@media (min-width: 900px) {
.fia-portal .fia-hero-art { display: block; }
}
.fia-portal .fia-orb {
position: absolute;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #cfe1ff, #5a8bff 50%, #2455c9);
width: 120px; height: 120px;
top: 10px; right: 10px;
box-shadow: 0 10px 40px rgba(0,212,255,0.4);
animation: fia-float 6s var(--fia-ease) infinite;
}
.fia-portal .fia-orb-2 { width: 60px; height: 60px; top: 90px; right: 110px; opacity: 0.7; animation-delay: -2s; }
.fia-portal .fia-orb-3 { width: 36px; height: 36px; top: 30px; right: 150px; opacity: 0.9; background: radial-gradient(circle at 30% 30%, #fff, var(--fia-accent)); animation-delay: -4s; }
@keyframes fia-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
/* ===== Stats ============================================================= */
.fia-portal .fia-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin-bottom: 22px;
}
.fia-portal .fia-stat-card {
background: var(--fia-surface);
border: 1px solid var(--fia-line);
border-radius: var(--fia-radius);
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 4px;
position: relative;
overflow: hidden;
}
.fia-portal .fia-stat-card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(36,85,201,0.06), transparent 40%);
pointer-events: none;
}
.fia-portal .fia-stat-label { font-size: 12px; color: var(--fia-text-3); text-transform: uppercase; letter-spacing: 0.06em; }
.fia-portal .fia-stat-value { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.fia-portal .fia-stat-delta { font-size: 12px; color: var(--fia-text-3); }
/* ===== Checklist & empty states ========================================== */
.fia-portal .fia-checklist {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.fia-portal .fia-checklist li {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: var(--fia-text-2);
}
.fia-portal .fia-check {
width: 18px; height: 18px;
border-radius: 6px;
border: 1.5px solid var(--fia-line);
background: var(--fia-surface-2);
flex: 0 0 18px;
}
.fia-portal .fia-empty {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 8px;
padding: 18px 12px;
color: var(--fia-text-3);
}
.fia-portal .fia-empty-lg { padding: 36px 12px; gap: 12px; }
.fia-portal .fia-empty-lg h3 { margin: 0; font-size: 18px; color: var(--fia-text); }
.fia-portal .fia-empty-lg p { margin: 0; max-width: 420px; }
.fia-portal .fia-empty-icon {
width: 56px; height: 56px;
border-radius: 16px;
background: var(--fia-grad-soft);
border: 1px dashed #c8d3ec;
}
.fia-portal .fia-empty-icon-chart {
background:
var(--fia-grad-soft),
linear-gradient(transparent 60%, var(--fia-blue-500) 60%);
}
/* ===== Posts grid ======================================================== */
.fia-portal .fia-posts-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.fia-portal .fia-post-card {
all: unset;
box-sizing: border-box;
background: var(--fia-surface);
border: 1px solid var(--fia-line);
border-radius: var(--fia-radius);
padding: 22px 18px 18px;
display: flex;
flex-direction: column;
gap: 8px;
cursor: pointer;
position: relative;
transition: transform 0.18s var(--fia-ease), border-color 0.18s var(--fia-ease), box-shadow 0.18s var(--fia-ease);
animation: fia-rise 0.5s var(--fia-ease) var(--fia-delay, 0ms) both;
overflow: hidden;
}
@keyframes fia-rise {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.fia-portal .fia-post-card::before {
content: "";
position: absolute;
inset: 0;
background: var(--fia-grad-soft);
opacity: 0;
transition: opacity 0.2s var(--fia-ease);
pointer-events: none;
}
.fia-portal .fia-post-card:hover {
transform: translateY(-2px);
border-color: var(--fia-blue-400);
box-shadow: var(--fia-shadow-2);
}
.fia-portal .fia-post-card:hover::before { opacity: 1; }
.fia-portal .fia-post-card.is-selected {
border-color: var(--fia-blue-500);
box-shadow: 0 0 0 4px rgba(58, 110, 232, 0.12), var(--fia-shadow-2);
}
.fia-portal .fia-post-card.is-selected::before { opacity: 1; }
.fia-portal .fia-post-icon {
width: 40px; height: 40px;
border-radius: 12px;
background: var(--fia-grad);
color: #fff;
display: inline-block;
position: relative;
z-index: 1;
box-shadow: 0 6px 14px -6px rgba(36,85,201,0.6);
}
.fia-portal .fia-post-icon::before {
content: "";
position: absolute;
inset: 8px;
background: rgba(255,255,255,0.95);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
/* Different icon glyphs per data-icon attribute */
.fia-portal .fia-post-icon[data-icon="shield"]::before { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.fia-portal .fia-post-icon[data-icon="star"]::before { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.fia-portal .fia-post-icon[data-icon="badge"]::before { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.fia-portal .fia-post-icon[data-icon="briefcase"]::before{ -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.fia-portal .fia-post-icon[data-icon="folder"]::before { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.fia-portal .fia-post-icon[data-icon="file"]::before { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.fia-portal .fia-post-icon[data-icon="keyboard"]::before { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.fia-portal .fia-post-icon[data-icon="car"]::before { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.fia-portal .fia-post-name {
font-size: 16px;
font-weight: 700;
letter-spacing: -0.01em;
position: relative;
z-index: 1;
}
.fia-portal .fia-post-desc {
font-size: 13px;
color: var(--fia-text-3);
position: relative;
z-index: 1;
}
.fia-portal .fia-post-check {
position: absolute;
top: 14px;
right: 14px;
width: 22px;
height: 22px;
border-radius: 999px;
background: var(--fia-grad);
color: #fff;
display: grid;
place-items: center;
font-size: 12px;
font-weight: 700;
transform: scale(0);
transition: transform 0.2s var(--fia-ease);
z-index: 2;
}
.fia-portal .fia-post-card.is-selected .fia-post-check {
transform: scale(1);
}
/* ===== Syllabus accordion ================================================= */
.fia-portal .fia-syllabus {
display: flex;
flex-direction: column;
gap: 10px;
}
.fia-portal .fia-accordion {
background: var(--fia-surface);
border: 1px solid var(--fia-line);
border-radius: var(--fia-radius);
overflow: hidden;
}
.fia-portal .fia-accordion summary {
list-style: none;
cursor: pointer;
padding: 16px 18px;
display: flex;
align-items: center;
gap: 12px;
font-weight: 600;
}
.fia-portal .fia-accordion summary::-webkit-details-marker { display: none; }
.fia-portal .fia-acc-title { flex: 1; }
.fia-portal .fia-acc-caret {
width: 24px;
height: 24px;
border-radius: 8px;
background: var(--fia-grad-soft);
display: grid;
place-items: center;
color: var(--fia-blue-700);
font-weight: 700;
transition: transform 0.2s var(--fia-ease);
}
.fia-portal .fia-accordion[open] .fia-acc-caret {
transform: rotate(45deg);
}
.fia-portal .fia-acc-body {
padding: 0 18px 18px 50px;
color: var(--fia-text-2);
font-size: 14px;
}
/* Dots (subject swatches) */
.fia-portal .fia-dot {
width: 10px; height: 10px; border-radius: 999px;
display: inline-block;
flex: 0 0 10px;
}
.fia-portal .fia-dot-lg { width: 14px; height: 14px; }
.fia-portal .fia-dot.sub-en { background: var(--fia-sub-en); box-shadow: 0 0 0 3px rgba(36,85,201,0.12); }
.fia-portal .fia-dot.sub-iq { background: var(--fia-sub-iq); box-shadow: 0 0 0 3px rgba(0,184,217,0.12); }
.fia-portal .fia-dot.sub-gk { background: var(--fia-sub-gk); box-shadow: 0 0 0 3px rgba(245,159,0,0.12); }
.fia-portal .fia-dot.sub-pk { background: var(--fia-sub-pk); box-shadow: 0 0 0 3px rgba(22,163,74,0.12); }
.fia-portal .fia-dot.sub-is { background: var(--fia-sub-is); box-shadow: 0 0 0 3px rgba(124,58,237,0.12); }
.fia-portal .fia-dot.sub-cp { background: var(--fia-sub-cp); box-shadow: 0 0 0 3px rgba(239,68,68,0.12); }
/* ===== 30 Day Plan ======================================================= */
.fia-portal .fia-distribution {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
background: var(--fia-surface);
border: 1px solid var(--fia-line);
border-radius: var(--fia-radius);
padding: 14px 16px;
margin-bottom: 18px;
}
.fia-portal .fia-distribution-label {
font-size: 13px;
color: var(--fia-text-3);
margin-right: 6px;
font-weight: 500;
}
.fia-portal .fia-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border-radius: 999px;
background: var(--fia-surface-2);
border: 1px solid var(--fia-line);
font-size: 12.5px;
font-weight: 500;
color: var(--fia-text-2);
}
.fia-portal .fia-chip strong {
background: var(--fia-grad);
color: #fff;
padding: 1px 7px;
border-radius: 999px;
font-size: 11.5px;
font-weight: 700;
}
.fia-portal .fia-chip-total { background: var(--fia-grad); color: #fff; border-color: transparent; }
.fia-portal .fia-chip-total strong { background: rgba(255,255,255,0.22); color: #fff; }
.fia-portal .fia-chip.sub-en { color: var(--fia-sub-en); }
.fia-portal .fia-chip.sub-iq { color: var(--fia-sub-iq); }
.fia-portal .fia-chip.sub-gk { color: var(--fia-sub-gk); }
.fia-portal .fia-chip.sub-pk { color: var(--fia-sub-pk); }
.fia-portal .fia-chip.sub-is { color: var(--fia-sub-is); }
.fia-portal .fia-chip.sub-cp { color: var(--fia-sub-cp); }
.fia-portal .fia-chip.sub-en strong { background: var(--fia-sub-en); }
.fia-portal .fia-chip.sub-iq strong { background: var(--fia-sub-iq); }
.fia-portal .fia-chip.sub-gk strong { background: var(--fia-sub-gk); }
.fia-portal .fia-chip.sub-pk strong { background: var(--fia-sub-pk); }
.fia-portal .fia-chip.sub-is strong { background: var(--fia-sub-is); }
.fia-portal .fia-chip.sub-cp strong { background: var(--fia-sub-cp); }
/* Week tabs */
.fia-portal .fia-week-tabs {
display: flex;
gap: 8px;
margin-bottom: 18px;
overflow-x: auto;
scrollbar-width: thin;
padding-bottom: 4px;
}
.fia-portal .fia-week-tab {
all: unset;
cursor: pointer;
background: var(--fia-surface);
border: 1px solid var(--fia-line);
border-radius: 12px;
padding: 12px 16px;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 130px;
transition: all 0.18s var(--fia-ease);
}
.fia-portal .fia-week-tab:hover {
transform: translateY(-1px);
border-color: var(--fia-blue-400);
}
.fia-portal .fia-week-tab strong { font-size: 14px; font-weight: 700; }
.fia-portal .fia-week-tab span { font-size: 12px; color: var(--fia-text-3); }
.fia-portal .fia-week-tab.is-active {
background: var(--fia-grad);
color: #fff;
border-color: transparent;
box-shadow: var(--fia-shadow-2);
}
.fia-portal .fia-week-tab.is-active span { color: rgba(255,255,255,0.78); }
/* Week panels */
.fia-portal .fia-week-panel {
display: none;
animation: fia-fade-in 0.28s var(--fia-ease);
}
.fia-portal .fia-week-panel.is-active { display: block; }
.fia-portal .fia-days-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 14px;
}
.fia-portal .fia-day-card {
background: var(--fia-surface);
border: 1px solid var(--fia-line);
border-radius: var(--fia-radius);
padding: 16px;
display: flex;
flex-direction: column;
gap: 12px;
transition: transform 0.18s var(--fia-ease), box-shadow 0.18s var(--fia-ease), border-color 0.18s var(--fia-ease);
position: relative;
}
.fia-portal .fia-day-card:hover {
transform: translateY(-2px);
box-shadow: var(--fia-shadow-2);
border-color: var(--fia-blue-400);
}
.fia-portal .fia-day-head {
display: flex;
justify-content: space-between;
align-items: center;
}
.fia-portal .fia-day-num {
font-weight: 700;
font-size: 15px;
background: var(--fia-grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.fia-portal .fia-day-tag {
font-size: 11px;
padding: 3px 8px;
border-radius: 999px;
background: var(--fia-grad-soft);
color: var(--fia-blue-700);
font-weight: 600;
}
.fia-portal .fia-day-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.fia-portal .fia-day-list li {
display: grid;
grid-template-columns: 14px 1fr auto;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--fia-text-2);
}
.fia-portal .fia-day-subject { color: var(--fia-text); }
.fia-portal .fia-day-count {
font-weight: 700;
font-size: 12.5px;
color: var(--fia-text);
background: var(--fia-surface-2);
padding: 1px 8px;
border-radius: 999px;
}
/* ===== Tests grid ======================================================== */
.fia-portal .fia-tests-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 14px;
}
.fia-portal .fia-test-card {
background: var(--fia-surface);
border: 1px solid var(--fia-line);
border-radius: var(--fia-radius);
padding: 22px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
transition: transform 0.18s var(--fia-ease), border-color 0.18s var(--fia-ease), box-shadow 0.18s var(--fia-ease);
}
.fia-portal .fia-test-card:hover {
transform: translateY(-2px);
border-color: var(--fia-blue-400);
box-shadow: var(--fia-shadow-2);
}
.fia-portal .fia-test-card h3 { margin: 0; font-size: 16px; font-weight: 700; }
.fia-portal .fia-test-card p { margin: 0; font-size: 13.5px; color: var(--fia-text-3); flex: 1; }
/* ===== Definition list =================================================== */
.fia-portal .fia-deflist {
margin: 0 0 14px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 16px;
}
.fia-portal .fia-deflist dt {
font-size: 12px;
color: var(--fia-text-3);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.fia-portal .fia-deflist dd {
margin: 0;
font-weight: 600;
color: var(--fia-text);
}
/* ===== Mobile bar & responsive =========================================== */
.fia-portal .fia-mobile-bar {
display: none;
align-items: center;
gap: 12px;
padding: 14px 18px;
background: var(--fia-grad);
color: #fff;
position: sticky;
top: 0;
z-index: 5;
}
.fia-portal .fia-mobile-title {
display: flex;
align-items: center;
gap: 10px;
font-weight: 700;
}
.fia-portal .fia-burger {
all: unset;
width: 38px;
height: 38px;
display: grid;
place-items: center;
cursor: pointer;
border-radius: 8px;
background: rgba(255,255,255,0.12);
}
.fia-portal .fia-burger span {
display: block;
width: 18px;
height: 2px;
background: #fff;
border-radius: 2px;
margin: 2px 0;
transition: transform 0.2s var(--fia-ease), opacity 0.2s var(--fia-ease);
}
.fia-portal.is-menu-open .fia-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.fia-portal.is-menu-open .fia-burger span:nth-child(2) { opacity: 0; }
.fia-portal.is-menu-open .fia-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.fia-portal .fia-backdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(11, 31, 77, 0.5);
z-index: 19;
opacity: 0;
transition: opacity 0.2s var(--fia-ease);
}
.fia-portal.is-menu-open .fia-backdrop {
display: block;
opacity: 1;
}
/* ===== Breakpoints ======================================================= */
@media (max-width: 1100px) {
.fia-portal .fia-stats { grid-template-columns: repeat(2, 1fr); }
.fia-portal .fia-posts-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
.fia-portal .fia-shell { grid-template-columns: 1fr; }
.fia-portal .fia-mobile-bar { display: flex; }
.fia-portal .fia-sidebar {
position: fixed;
top: 0; left: 0; bottom: 0;
width: 280px;
transform: translateX(-100%);
transition: transform 0.28s var(--fia-ease);
z-index: 20;
border-radius: 0;
}
.fia-portal.is-menu-open .fia-sidebar { transform: translateX(0); }
.fia-portal .fia-grid-2 { grid-template-columns: 1fr; }
.fia-portal .fia-hero { grid-template-columns: 1fr; padding: 28px 22px; }
.fia-portal .fia-hero h2 { font-size: 24px; }
.fia-portal .fia-main { padding: 18px 16px 28px; }
.fia-portal .fia-posts-grid { grid-template-columns: repeat(2, 1fr); }
.fia-portal .fia-header-title { font-size: 20px; }
}
@media (max-width: 520px) {
.fia-portal { border-radius: 12px; }
.fia-portal .fia-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
.fia-portal .fia-posts-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
.fia-portal .fia-post-card { padding: 16px 14px 14px; }
.fia-portal .fia-hero { padding: 24px 18px; }
.fia-portal .fia-hero h2 { font-size: 22px; }
.fia-portal .fia-deflist { grid-template-columns: 1fr; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.fia-portal *,
.fia-portal *::before,
.fia-portal *::after {
animation-duration: 0.001ms !important;
transition-duration: 0.001ms !important;
}
}
/* ==========================================================================
v1.2.0 additions — components for the new SPA template
========================================================================== */
/* ===== Test runner ======================================================= */
.fia-portal .fia-test-runner {
background: var(--fia-surface);
border-radius: var(--fia-radius);
box-shadow: var(--fia-shadow-2);
padding: 22px;
border: 1px solid var(--fia-line);
}
.fia-portal .fia-test-runner-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 16px;
}
.fia-portal .fia-test-runner-head h2 {
margin: 0 0 4px;
font-size: 22px;
color: var(--fia-text);
}
.fia-portal .fia-test-runner-head p {
margin: 0;
color: var(--fia-text-2);
font-size: 14px;
}
.fia-portal .fia-test-runner-meta {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
.fia-portal .fia-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
background: var(--fia-surface-2);
color: var(--fia-text);
border-radius: 999px;
font-size: 13px;
font-weight: 600;
border: 1px solid var(--fia-line);
}
.fia-portal .fia-pill-timer {
background: linear-gradient(135deg, var(--fia-blue-600), var(--fia-blue-500));
color: #fff;
border-color: transparent;
font-variant-numeric: tabular-nums;
min-width: 80px;
justify-content: center;
}
/* Progress bar (generic, used for plan + runner + tests progress) */
.fia-portal .fia-progress-track {
width: 100%;
height: 8px;
background: var(--fia-surface-2);
border-radius: 999px;
overflow: hidden;
border: 1px solid var(--fia-line);
margin: 4px 0;
}
.fia-portal .fia-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--fia-blue-500), var(--fia-accent));
transition: width 0.4s var(--fia-ease);
border-radius: 999px;
}
/* Question + options */
.fia-portal .fia-question-card {
margin: 20px 0;
padding: 20px;
background: var(--fia-surface-2);
border-radius: var(--fia-radius-s);
border: 1px solid var(--fia-line);
}
.fia-portal .fia-question-text {
font-size: 17px;
line-height: 1.5;
color: var(--fia-text);
font-weight: 600;
margin-bottom: 16px;
}
.fia-portal .fia-option-list {
display: grid;
gap: 10px;
}
.fia-portal .fia-option {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 16px;
background: var(--fia-surface);
border: 2px solid var(--fia-line);
border-radius: var(--fia-radius-s);
cursor: pointer;
transition: all 0.2s var(--fia-ease);
text-align: left;
font-size: 15px;
color: var(--fia-text);
}
.fia-portal .fia-option:hover {
border-color: var(--fia-blue-400);
background: var(--fia-surface);
transform: translateY(-1px);
box-shadow: var(--fia-shadow-1);
}
.fia-portal .fia-option.is-selected {
border-color: var(--fia-blue-600);
background: linear-gradient(135deg, #eaf0ff 0%, #f7faff 100%);
}
.fia-portal .fia-option-letter {
width: 28px;
height: 28px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--fia-surface-2);
border-radius: 50%;
font-weight: 700;
font-size: 13px;
color: var(--fia-text-2);
}
.fia-portal .fia-option.is-selected .fia-option-letter {
background: var(--fia-blue-600);
color: #fff;
}
/* ===== Answer reveal — shown after Next is pressed ======================= */
.fia-portal .fia-option.is-correct {
border-color: #16a34a;
background: #f0fdf4;
}
.fia-portal .fia-option.is-correct .fia-option-letter {
background: #16a34a;
color: #fff;
}
.fia-portal .fia-option.is-wrong {
border-color: #dc2626;
background: #fef2f2;
}
.fia-portal .fia-option.is-wrong .fia-option-letter {
background: #dc2626;
color: #fff;
}
.fia-portal .fia-option:disabled {
cursor: default;
opacity: 1;
}
.fia-portal .fia-option.is-dimmed {
opacity: 0.38;
}
/* ===== Answer callout (shown after reveal) ============================== */
.fia-portal .fia-answer-callout {
margin-top: 12px;
padding: 10px 14px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
}
.fia-portal .fia-answer-callout.is-correct {
background: #f0fdf4;
color: #15803d;
border: 1px solid #86efac;
}
.fia-portal .fia-answer-callout.is-wrong {
background: #fef2f2;
color: #b91c1c;
border: 1px solid #fca5a5;
}
.fia-portal .fia-callout-icon {
font-size: 16px;
}
/* ===== Review — wrong answers only ====================================== */
.fia-portal .fia-review-perfect {
display: flex;
align-items: center;
gap: 10px;
padding: 18px 20px;
background: #f0fdf4;
border: 1px solid #86efac;
border-radius: 10px;
color: #15803d;
font-weight: 600;
font-size: 15px;
margin: 8px 0;
}
/* ===== Result action buttons — row layout ================================ */
.fia-portal .fia-result-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--fia-line);
}
/* ===== Day card tick — absolute top-right (passes only) ================ */
.fia-portal .fia-day-card { position: relative; }
.fia-portal .fia-day-tick {
position: absolute;
top: 10px;
right: 10px;
width: 24px;
height: 24px;
background: #16a34a;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
line-height: 1;
pointer-events: none;
box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
/* ===== Day card lock state ============================================== */
.fia-portal .fia-day-card.is-locked {
opacity: 0.62;
background: #f8f8f8;
border-color: #e2e2e2;
pointer-events: none;
user-select: none;
}
.fia-portal .fia-day-lock {
font-size: 22px;
text-align: center;
margin: 6px 0 2px;
}
.fia-portal .fia-day-lock-msg {
font-size: 11px;
color: #888;
text-align: center;
margin-bottom: 6px;
font-weight: 500;
}
/* ===== Day result block (score + pass/fail + criteria) =============== */
.fia-portal .fia-day-result {
display: flex;
align-items: center;
gap: 8px;
margin: 8px 0 6px;
padding: 7px 10px;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
flex-wrap: wrap;
}
.fia-portal .fia-day-result.is-pass {
background: #dcfce7;
color: #15803d;
border: 1px solid #86efac;
}
.fia-portal .fia-day-result.is-fail {
background: #fee2e2;
color: #b91c1c;
border: 1px solid #fca5a5;
}
.fia-portal .fia-day-result-fraction {
font-size: 13px;
font-weight: 700;
opacity: 0.85;
}
.fia-portal .fia-day-result-score {
font-size: 16px;
font-weight: 800;
min-width: 38px;
}
.fia-portal .fia-day-result-label {
flex: 1;
}
.fia-portal .fia-day-result-criteria {
font-size: 11px;
font-weight: 500;
opacity: 0.75;
margin-left: auto;
}
/* Red tint on failed day cards */
.fia-portal .fia-day-card.is-failed {
border-color: #fca5a5;
background: #fff8f8;
}
.fia-portal .fia-day-card.is-failed .fia-day-num {
color: #b91c1c;
}
/* Runner footer */
.fia-portal .fia-test-runner-foot {
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: flex-end;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--fia-line);
}
.fia-portal .fia-test-runner-foot .fia-btn-submit {
margin-left: auto;
background: var(--fia-sub-pk);
}
/* ===== Test result ====================================================== */
.fia-portal .fia-test-result {
background: var(--fia-surface);
border-radius: var(--fia-radius);
box-shadow: var(--fia-shadow-2);
padding: 22px;
border: 1px solid var(--fia-line);
}
.fia-portal .fia-result-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px;
margin: 16px 0;
}
.fia-portal .fia-result-stat {
padding: 16px;
background: var(--fia-surface-2);
border-radius: var(--fia-radius-s);
border: 1px solid var(--fia-line);
text-align: center;
}
.fia-portal .fia-result-stat-label {
display: block;
font-size: 12px;
color: var(--fia-text-3);
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
}
.fia-portal .fia-result-stat-value {
display: block;
font-size: 26px;
font-weight: 700;
color: var(--fia-text);
}
.fia-portal .fia-result-stat--score .fia-result-stat-value {
color: var(--fia-sub-pk);
}
.fia-portal .fia-result-stat--score.is-fail .fia-result-stat-value {
color: var(--fia-sub-cp);
}
.fia-portal .fia-result-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
margin-top: 16px;
}
/* ===== Tests-tab progress widget ======================================== */
.fia-portal .fia-tests-progress {
background: var(--fia-surface);
border: 1px solid var(--fia-line);
border-radius: var(--fia-radius);
padding: 18px;
margin-bottom: 22px;
box-shadow: var(--fia-shadow-1);
}
.fia-portal .fia-tests-progress-row {
display: flex;
justify-content: space-between;
align-items: center;
margin: 10px 0 4px;
}
.fia-portal .fia-tests-progress-label {
font-size: 13px;
color: var(--fia-text-2);
font-weight: 600;
}
.fia-portal .fia-tests-progress-value {
font-size: 14px;
font-weight: 700;
color: var(--fia-text);
font-variant-numeric: tabular-nums;
}
/* ===== Section titles =================================================== */
.fia-portal .fia-section-title {
font-size: 16px;
font-weight: 700;
margin: 24px 0 12px;
color: var(--fia-text);
}
/* ===== Subject cards (per-post) ========================================= */
.fia-portal .fia-subjects-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 14px;
}
.fia-portal .fia-subject-card {
background: var(--fia-surface);
border-radius: var(--fia-radius);
padding: 16px;
border: 1px solid var(--fia-line);
box-shadow: var(--fia-shadow-1);
transition: box-shadow 0.2s var(--fia-ease);
position: relative;
}
.fia-portal .fia-subject-card:hover {
box-shadow: var(--fia-shadow-2);
}
.fia-portal .fia-subject-head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.fia-portal .fia-subject-head h4 {
margin: 0;
font-size: 16px;
color: var(--fia-text);
}
/* ===== Topic chips ====================================================== */
.fia-portal .fia-topic-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.fia-portal .fia-chip-sm {
padding: 5px 11px;
font-size: 12px;
font-weight: 600;
background: var(--fia-surface-2);
color: var(--fia-text-2);
border: 1px solid var(--fia-line);
border-radius: 999px;
cursor: pointer;
transition: all 0.15s var(--fia-ease);
}
.fia-portal button.fia-chip-sm {
font-family: inherit;
}
.fia-portal .fia-chip-sm:hover {
background: #eaf0ff;
border-color: var(--fia-blue-400);
color: var(--fia-blue-700);
}
.fia-portal .fia-chip-sm.is-active {
background: var(--fia-blue-600);
border-color: var(--fia-blue-600);
color: #fff;
}
/* ===== Plan progress bar (above the days grid) =========================== */
.fia-portal .fia-plan-progress {
display: flex;
align-items: center;
gap: 14px;
margin: 14px 0 22px;
padding: 12px 16px;
background: var(--fia-surface);
border: 1px solid var(--fia-line);
border-radius: var(--fia-radius);
}
.fia-portal .fia-plan-progress .fia-progress-track {
flex: 1;
margin: 0;
}
.fia-portal .fia-plan-progress-label {
font-size: 13px;
font-weight: 600;
color: var(--fia-text-2);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
/* ===== Day card — selected post indication =============================== */
.fia-portal .fia-day-card.is-complete {
border-color: var(--fia-sub-pk);
background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
}
/* ===== Post card — selected indication =================================== */
.fia-portal .fia-post-card.is-selected {
border-color: var(--fia-blue-600);
background: linear-gradient(135deg, #eaf0ff 0%, #f7faff 100%);
}
.fia-portal .fia-post-card.is-selected .fia-post-check {
opacity: 1;
transform: scale(1);
}
.fia-portal .fia-post-check {
position: absolute;
top: 12px;
right: 12px;
width: 22px;
height: 22px;
background: var(--fia-blue-600);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
opacity: 0;
transform: scale(0.6);
transition: all 0.18s var(--fia-ease);
}
/* ===== Recent activity list (dashboard) ================================== */
.fia-portal .fia-recent-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.fia-portal .fia-recent-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 12px;
background: var(--fia-surface-2);
border-radius: var(--fia-radius-s);
border: 1px solid var(--fia-line);
}
.fia-portal .fia-recent-item-main {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.fia-portal .fia-recent-item-title {
font-size: 14px;
font-weight: 600;
color: var(--fia-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fia-portal .fia-recent-item-sub {
font-size: 12px;
color: var(--fia-text-3);
}
.fia-portal .fia-recent-score {
font-weight: 700;
font-size: 14px;
color: var(--fia-blue-700);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.fia-portal .fia-recent-score.is-fail {
color: var(--fia-sub-cp);
}
/* ===== Results list (Results tab) ======================================== */
.fia-portal .fia-results-card {
padding: 0;
overflow: hidden;
}
.fia-portal .fia-results-list {
display: flex;
flex-direction: column;
}
.fia-portal .fia-results-row {
display: grid;
grid-template-columns: 1fr auto auto auto;
gap: 14px;
align-items: center;
padding: 14px 18px;
border-bottom: 1px solid var(--fia-line);
transition: background 0.15s var(--fia-ease);
}
.fia-portal .fia-results-row:last-child {
border-bottom: none;
}
.fia-portal .fia-results-row:hover {
background: var(--fia-surface-2);
}
.fia-portal .fia-results-meta {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.fia-portal .fia-results-title {
font-size: 14.5px;
font-weight: 600;
color: var(--fia-text);
}
.fia-portal .fia-results-sub {
font-size: 12.5px;
color: var(--fia-text-3);
}
.fia-portal .fia-results-score {
font-size: 16px;
font-weight: 700;
color: var(--fia-sub-pk);
font-variant-numeric: tabular-nums;
}
.fia-portal .fia-results-score.is-fail {
color: var(--fia-sub-cp);
}
.fia-portal .fia-results-count {
font-size: 12.5px;
color: var(--fia-text-2);
}
/* ===== Mobile dashboard tightening (additive to existing breakpoints) ==== */
@media (max-width: 860px) {
.fia-portal .fia-hero { padding: 24px 18px; gap: 16px; }
.fia-portal .fia-hero-text h2 { font-size: 22px; line-height: 1.25; }
.fia-portal .fia-hero p { font-size: 14px; }
.fia-portal .fia-hero-actions .fia-btn { padding: 10px 16px; font-size: 14px; }
.fia-portal .fia-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
.fia-portal .fia-stat-card { padding: 14px 14px 12px; }
.fia-portal .fia-stat-value { font-size: 22px; }
.fia-portal .fia-stat-label { font-size: 12px; }
.fia-portal .fia-test-runner-foot { justify-content: space-between; }
.fia-portal .fia-test-runner-foot .fia-btn { padding: 10px 14px; font-size: 13.5px; flex: 1 0 calc(50% - 6px); }
.fia-portal .fia-test-runner-foot .fia-btn-submit { flex: 1 0 100%; margin-left: 0; }
}
@media (max-width: 520px) {
.fia-portal .fia-days-grid { grid-template-columns: 1fr; }
.fia-portal .fia-subjects-grid { grid-template-columns: 1fr; }
.fia-portal .fia-result-stats { grid-template-columns: 1fr 1fr; }
.fia-portal .fia-results-row { grid-template-columns: 1fr auto; }
.fia-portal .fia-results-count { display: none; }
.fia-portal .fia-hero-art { display: none; }
.fia-portal .fia-test-runner { padding: 14px; }
.fia-portal .fia-question-card { padding: 14px; }
.fia-portal .fia-option { padding: 12px 14px; min-height: 48px; }
}
/* Hide section when toggled off via JS */
.fia-portal [hidden] { display: none !important; }
/* ============================================================
* v1.3.0 — Week tabs, modals, result review, danger zone
* ============================================================ */
/* ---------- Plan: weekly view tabs ---------- */
.fia-portal .fia-week-tabs {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 10px;
margin: 18px 0 12px;
}
.fia-portal .fia-week-tab {
appearance: none;
border: 1px solid var(--fia-line);
background: var(--fia-surface);
border-radius: var(--fia-radius-s);
padding: 12px 10px;
cursor: pointer;
display: flex;
flex-direction: column;
gap: 4px;
text-align: left;
font: inherit;
color: var(--fia-text);
transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, background 0.15s ease;
position: relative;
}
.fia-portal .fia-week-tab:hover {
border-color: var(--fia-blue-500);
box-shadow: var(--fia-shadow-2);
transform: translateY(-1px);
}
.fia-portal .fia-week-tab.is-active {
background: var(--fia-grad);
border-color: transparent;
color: #fff;
box-shadow: var(--fia-shadow-2);
}
.fia-portal .fia-week-tab.is-active .fia-week-meta,
.fia-portal .fia-week-tab.is-active .fia-week-label { color: rgba(255, 255, 255, 0.85); }
.fia-portal .fia-week-tab.is-done::after {
content: "✓";
position: absolute;
top: 8px;
right: 10px;
background: var(--fia-sub-pk);
color: #fff;
font-size: 11px;
font-weight: 700;
width: 18px; height: 18px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
}
.fia-portal .fia-week-num {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--fia-blue-600);
}
.fia-portal .fia-week-tab.is-active .fia-week-num { color: #fff; }
.fia-portal .fia-week-label {
font-size: 14px;
font-weight: 600;
color: var(--fia-text);
line-height: 1.25;
}
.fia-portal .fia-week-meta {
font-size: 11.5px;
color: var(--fia-text-3);
}
.fia-portal .fia-plan-week-title {
margin: 14px 0 12px;
font-size: 15px;
color: var(--fia-text-2);
}
/* Day card — completed state already exists in base CSS.
* Add a clear "Retake" treatment so passed days stand out. */
.fia-portal .fia-day-card .fia-btn.is-retake {
background: transparent;
color: var(--fia-blue-600);
border: 1px solid var(--fia-blue-500);
box-shadow: none;
}
.fia-portal .fia-day-card .fia-btn.is-retake:hover {
background: var(--fia-surface-2);
color: var(--fia-navy-900);
}
.fia-portal .fia-day-card.is-complete .fia-day-num::before {
content: "✓ ";
color: var(--fia-sub-pk);
font-weight: 800;
}
/* ---------- Result section: subject bars + weak callout ---------- */
.fia-portal .fia-result-section { margin-top: 24px; }
.fia-portal .fia-subj-bars {
display: flex;
flex-direction: column;
gap: 12px;
}
.fia-portal .fia-subj-bar {
background: var(--fia-surface);
border: 1px solid var(--fia-line);
border-radius: var(--fia-radius-s);
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 6px;
border-left: 4px solid var(--fia-line);
}
.fia-portal .fia-subj-bar.is-strong { border-left-color: var(--fia-sub-pk); }
.fia-portal .fia-subj-bar.is-ok { border-left-color: var(--fia-sub-gk); }
.fia-portal .fia-subj-bar.is-weak { border-left-color: var(--fia-sub-cp); background: #fff8f8; }
.fia-portal .fia-subj-bar-head {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13.5px;
font-weight: 600;
color: var(--fia-text);
}
.fia-portal .fia-subj-bar-head strong { font-size: 14px; }
.fia-portal .fia-subj-bar .fia-progress-track {
height: 8px;
background: var(--fia-surface-2);
border-radius: 999px;
overflow: hidden;
}
.fia-portal .fia-subj-bar .fia-progress-fill {
height: 100%;
border-radius: 999px;
background: var(--fia-blue-500);
transition: width 0.4s ease;
}
.fia-portal .fia-subj-bar.is-strong .fia-progress-fill { background: var(--fia-sub-pk); }
.fia-portal .fia-subj-bar.is-ok .fia-progress-fill { background: var(--fia-sub-gk); }
.fia-portal .fia-subj-bar.is-weak .fia-progress-fill { background: var(--fia-sub-cp); }
.fia-portal .fia-subj-bar small { color: var(--fia-text-3); font-size: 11.5px; }
.fia-portal .fia-weak-flag {
display: inline-block;
background: var(--fia-sub-cp);
color: #fff;
font-size: 10.5px;
font-style: normal;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 2px 7px;
border-radius: 999px;
margin-left: 6px;
}
.fia-portal .fia-weak-callout {
margin-top: 14px;
padding: 12px 14px;
background: #fff5f0;
border-left: 4px solid var(--fia-sub-cp);
border-radius: var(--fia-radius-s);
font-size: 13.5px;
color: var(--fia-text);
}
.fia-portal .fia-weak-callout strong { color: var(--fia-sub-cp); }
/* ---------- Per-question review ---------- */
.fia-portal .fia-review-toggle {
margin-top: 18px;
border: 1px solid var(--fia-line);
border-radius: var(--fia-radius-s);
background: var(--fia-surface);
overflow: hidden;
}
.fia-portal .fia-review-toggle > summary {
list-style: none;
cursor: pointer;
padding: 14px 16px;
font-weight: 600;
font-size: 14px;
color: var(--fia-blue-700);
display: flex;
justify-content: space-between;
align-items: center;
}
.fia-portal .fia-review-toggle > summary::after {
content: "▼";
font-size: 10px;
color: var(--fia-text-3);
transition: transform 0.2s ease;
}
.fia-portal .fia-review-toggle[open] > summary::after { transform: rotate(180deg); }
.fia-portal .fia-review-toggle > summary::-webkit-details-marker { display: none; }
.fia-portal .fia-review-list {
display: flex;
flex-direction: column;
gap: 12px;
padding: 4px 16px 16px;
}
.fia-portal .fia-review-item {
background: var(--fia-surface-2);
border-radius: var(--fia-radius-s);
padding: 14px;
border-left: 4px solid var(--fia-line);
}
.fia-portal .fia-review-item.is-correct { border-left-color: var(--fia-sub-pk); }
.fia-portal .fia-review-item.is-wrong { border-left-color: var(--fia-sub-cp); }
.fia-portal .fia-review-item.is-skipped { border-left-color: var(--fia-text-3); }
.fia-portal .fia-review-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.fia-portal .fia-review-num {
font-size: 12px;
font-weight: 700;
color: var(--fia-text-3);
letter-spacing: 0.05em;
text-transform: uppercase;
}
.fia-portal .fia-review-status {
font-size: 11.5px;
font-weight: 700;
padding: 3px 10px;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.fia-portal .fia-review-status.is-correct { background: rgba(22, 163, 74, 0.12); color: var(--fia-sub-pk); }
.fia-portal .fia-review-status.is-wrong { background: rgba(239, 68, 68, 0.12); color: var(--fia-sub-cp); }
.fia-portal .fia-review-status.is-skipped { background: rgba(122, 133, 163, 0.15); color: var(--fia-text-2); }
.fia-portal .fia-review-q {
font-size: 14.5px;
color: var(--fia-text);
line-height: 1.45;
margin-bottom: 10px;
font-weight: 500;
}
.fia-portal .fia-review-opts {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.fia-portal .fia-review-opt {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: var(--fia-surface);
border: 1px solid var(--fia-line);
border-radius: 10px;
font-size: 13.5px;
color: var(--fia-text);
}
.fia-portal .fia-review-opt.is-correct {
background: rgba(22, 163, 74, 0.08);
border-color: var(--fia-sub-pk);
color: var(--fia-text);
}
.fia-portal .fia-review-opt.is-wrong {
background: rgba(239, 68, 68, 0.08);
border-color: var(--fia-sub-cp);
}
.fia-portal .fia-review-opt.is-picked:not(.is-correct):not(.is-wrong) {
border-color: var(--fia-blue-500);
}
.fia-portal .fia-review-letter {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px; height: 26px;
border-radius: 50%;
background: var(--fia-surface-2);
font-size: 12px;
font-weight: 700;
color: var(--fia-text-2);
flex: 0 0 26px;
}
.fia-portal .fia-review-opt.is-correct .fia-review-letter { background: var(--fia-sub-pk); color: #fff; }
.fia-portal .fia-review-opt.is-wrong .fia-review-letter { background: var(--fia-sub-cp); color: #fff; }
.fia-portal .fia-review-text { flex: 1; line-height: 1.4; }
.fia-portal .fia-review-badge {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 999px;
white-space: nowrap;
}
.fia-portal .fia-review-badge.is-correct { background: var(--fia-sub-pk); color: #fff; }
.fia-portal .fia-review-badge.is-wrong { background: var(--fia-sub-cp); color: #fff; }
/* ---------- Results-list analytics ---------- */
/* ── Performance overview cards ── */
.fia-portal .fia-perf-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 12px;
margin-bottom: 22px;
}
.fia-portal .fia-perf-card {
background: var(--fia-surface);
border: 1px solid var(--fia-line);
border-radius: var(--fia-radius-s);
padding: 14px 16px;
display: flex;
align-items: center;
gap: 12px;
}
.fia-portal .fia-perf-card.is-warn { border-color: #ef4444; background: #fff8f6; }
.fia-portal .fia-perf-card.is-strong { border-color: #22c55e; background: #f0fdf4; }
.fia-portal .fia-perf-card.is-ok { border-color: #f59e0b; background: #fffbeb; }
.fia-portal .fia-perf-card-icon { font-size: 22px; flex-shrink: 0; }
.fia-portal .fia-perf-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fia-portal .fia-perf-card-value {
font-size: 20px; font-weight: 700; color: var(--fia-text); line-height: 1.1;
}
.fia-portal .fia-perf-card.is-warn .fia-perf-card-value { color: #ef4444; }
.fia-portal .fia-perf-card.is-strong .fia-perf-card-value { color: #16a34a; }
.fia-portal .fia-perf-card.is-ok .fia-perf-card-value { color: #d97706; }
.fia-portal .fia-perf-card-label {
font-size: 11.5px; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.06em; color: var(--fia-text-3);
}
.fia-portal .fia-perf-card-sub { font-size: 11.5px; color: var(--fia-text-3); }
/* ── Section blocks in results tab ── */
.fia-portal .fia-section-block { margin-bottom: 24px; }
/* (legacy kept for inline use) */
.fia-portal .fia-results-analysis { margin-bottom: 22px; }
.fia-portal .fia-analysis-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
margin-bottom: 18px;
}
.fia-portal .fia-analysis-grid--compact {
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
flex: 1;
}
.fia-portal .fia-analysis-card {
background: var(--fia-surface);
border: 1px solid var(--fia-line);
border-radius: var(--fia-radius-s);
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 4px;
}
.fia-portal .fia-analysis-card.is-warn { border-color: #ef4444; background: #fff8f6; }
.fia-portal .fia-analysis-card.is-strong { border-color: #22c55e; background: #f0fdf4; }
.fia-portal .fia-analysis-card.is-ok { border-color: #f59e0b; background: #fffbeb; }
.fia-portal .fia-analysis-card.is-neutral { border-color: var(--fia-line); }
.fia-portal .fia-analysis-label {
font-size: 11.5px; text-transform: uppercase;
letter-spacing: 0.06em; color: var(--fia-text-3); font-weight: 600;
}
.fia-portal .fia-analysis-value { font-size: 22px; font-weight: 700; color: var(--fia-text); line-height: 1.1; }
.fia-portal .fia-analysis-card.is-warn .fia-analysis-value { color: #ef4444; }
.fia-portal .fia-analysis-card.is-strong .fia-analysis-value { color: #16a34a; }
.fia-portal .fia-analysis-card.is-ok .fia-analysis-value { color: #d97706; }
.fia-portal .fia-analysis-sub { font-size: 12px; color: var(--fia-text-3); }
/* ── Result score color coding ── */
.fia-portal .fia-results-score {
font-size: 16px;
font-weight: 700;
color: var(--fia-sub-pk);
font-variant-numeric: tabular-nums;
}
.fia-portal .fia-results-score.is-strong { color: #16a34a; }
.fia-portal .fia-results-score.is-ok { color: #d97706; }
.fia-portal .fia-results-score.is-fail { color: #ef4444; }
/* ── Weak subjects section ── */
.fia-portal .fia-section-title--warn {
color: #b91c1c;
}
.fia-portal .fia-weak-subjects {
display: flex;
flex-direction: column;
gap: 14px;
margin-bottom: 22px;
}
.fia-portal .fia-weak-subject-card {
background: #fff8f6;
border: 1px solid #fca5a5;
border-left: 4px solid #ef4444;
border-radius: var(--fia-radius-s);
padding: 14px 16px;
}
.fia-portal .fia-weak-subj-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.fia-portal .fia-weak-subj-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.fia-portal .fia-weak-subj-name {
font-weight: 700;
font-size: 14.5px;
color: var(--fia-text);
}
.fia-portal .fia-weak-subj-stats {
font-size: 12px;
color: var(--fia-text-3);
}
.fia-portal .fia-weak-subj-pct {
font-size: 22px;
font-weight: 700;
color: #ef4444;
}
.fia-portal .fia-progress-track--tall { height: 8px; border-radius: 4px; }
.fia-portal .fia-progress-fill--weak { background: #ef4444; }
/* ── Weak sub-topic chips ── */
.fia-portal .fia-weak-topics {
margin-top: 10px;
}
.fia-portal .fia-weak-topics-label {
font-size: 11.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #b91c1c;
margin-bottom: 6px;
}
.fia-portal .fia-weak-topic-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.fia-portal .fia-topic-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: 20px;
font-size: 12px;
font-weight: 500;
background: var(--fia-surface);
border: 1px solid var(--fia-line);
color: var(--fia-text);
}
.fia-portal .fia-topic-chip em {
font-style: normal;
font-weight: 700;
font-size: 11px;
}
.fia-portal .fia-topic-chip--weak {
background: #fef2f2;
border-color: #fca5a5;
color: #7f1d1d;
}
.fia-portal .fia-topic-chip--weak em { color: #ef4444; }
.fia-portal .fia-weak-topics-hint {
font-size: 12px;
color: var(--fia-text-3);
font-style: italic;
margin-top: 8px;
}
/* ── Subject bar badge ── */
.fia-portal .fia-subj-badge {
display: inline-block;
margin-left: 8px;
padding: 2px 7px;
border-radius: 20px;
font-size: 10.5px;
font-weight: 600;
vertical-align: middle;
}
.fia-portal .fia-subj-badge--strong { background: #dcfce7; color: #15803d; }
.fia-portal .fia-subj-badge--ok { background: #fef9c3; color: #92400e; }
.fia-portal .fia-subj-badge--weak { background: #fef2f2; color: #b91c1c; }
/* ── Empty state after reset ── */
.fia-portal .fia-empty-state {
text-align: center;
color: var(--fia-text-3);
padding: 32px 16px;
font-size: 14px;
}
/* ── Profile logout button ── */
.fia-portal .fia-profile-actions {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--fia-line);
}
.fia-portal .fia-btn-logout {
display: inline-flex;
align-items: center;
padding: 8px 16px;
border-radius: var(--fia-radius-s);
font-size: 13.5px;
font-weight: 600;
color: #b91c1c;
background: #fef2f2;
border: 1px solid #fca5a5;
text-decoration: none;
transition: background 0.15s, border-color 0.15s;
cursor: pointer;
}
.fia-portal .fia-btn-logout:hover {
background: #fee2e2;
border-color: #ef4444;
color: #991b1b;
}
/* ---------- Modals (welcome, reset) ---------- */
.fia-portal .fia-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
}
.fia-portal .fia-modal.is-open { display: flex; }
.fia-portal .fia-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(11, 31, 77, 0.55);
backdrop-filter: blur(2px);
}
.fia-portal .fia-modal-card {
position: relative;
z-index: 1;
background: var(--fia-surface);
border-radius: var(--fia-radius-l);
box-shadow: var(--fia-shadow-3);
max-width: 520px;
width: 100%;
max-height: calc(100vh - 40px);
overflow-y: auto;
animation: fia-modal-in 0.2s ease-out;
}
.fia-portal .fia-modal-card-lg { max-width: 680px; }
@keyframes fia-modal-in {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.fia-portal .fia-modal-close {
position: absolute;
top: 12px;
right: 14px;
width: 32px;
height: 32px;
border-radius: 50%;
border: 0;
background: var(--fia-surface-2);
color: var(--fia-text-2);
font-size: 20px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.fia-portal .fia-modal-close:hover { background: var(--fia-line); color: var(--fia-text); }
.fia-portal .fia-modal-head {
padding: 24px 28px 8px;
}
.fia-portal .fia-modal-head h2 {
margin: 6px 0 8px;
font-size: 22px;
color: var(--fia-text);
line-height: 1.25;
}
.fia-portal .fia-modal-head p {
margin: 0;
color: var(--fia-text-2);
font-size: 14px;
line-height: 1.5;
}
.fia-portal .fia-modal-eyebrow {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fia-blue-600);
background: rgba(36, 85, 201, 0.1);
padding: 4px 10px;
border-radius: 999px;
}
.fia-portal .fia-modal-eyebrow-danger {
color: var(--fia-sub-cp);
background: rgba(239, 68, 68, 0.1);
}
.fia-portal .fia-modal-body { padding: 16px 28px; }
.fia-portal .fia-modal-foot {
padding: 16px 28px 24px;
display: flex;
gap: 10px;
justify-content: flex-end;
flex-wrap: wrap;
}
.fia-portal .fia-modal-hint {
margin-top: 12px;
font-size: 12.5px;
color: var(--fia-text-3);
font-style: italic;
}
/* Form fields inside modals */
.fia-portal .fia-field {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 16px;
}
.fia-portal .fia-field-label {
font-size: 12.5px;
font-weight: 600;
color: var(--fia-text-2);
letter-spacing: 0.02em;
}
.fia-portal .fia-input {
font: inherit;
color: var(--fia-text);
background: var(--fia-surface-2);
border: 1px solid var(--fia-line);
border-radius: var(--fia-radius-s);
padding: 12px 14px;
font-size: 15px;
transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
width: 100%;
box-sizing: border-box;
}
.fia-portal .fia-input:focus {
outline: none;
border-color: var(--fia-blue-500);
background: var(--fia-surface);
box-shadow: 0 0 0 3px rgba(59, 110, 232, 0.15);
}
.fia-portal .fia-input-otp {
font-size: 28px;
letter-spacing: 12px;
text-align: center;
font-weight: 700;
font-feature-settings: "tnum";
padding: 14px;
}
/* Welcome-modal post grid */
.fia-portal .fia-welcome-posts {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 10px;
}
.fia-portal .fia-welcome-post {
appearance: none;
font: inherit;
cursor: pointer;
background: var(--fia-surface);
border: 2px solid var(--fia-line);
border-radius: var(--fia-radius-s);
padding: 14px;
text-align: left;
display: flex;
flex-direction: column;
gap: 4px;
transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.fia-portal .fia-welcome-post:hover {
border-color: var(--fia-blue-400);
transform: translateY(-1px);
box-shadow: var(--fia-shadow-2);
}
.fia-portal .fia-welcome-post.is-selected {
border-color: var(--fia-blue-600);
background: linear-gradient(135deg, #eaf0ff 0%, #f7faff 100%);
}
.fia-portal .fia-welcome-post strong {
font-size: 14.5px;
color: var(--fia-navy-900);
}
.fia-portal .fia-welcome-post span {
font-size: 12px;
color: var(--fia-text-2);
line-height: 1.35;
}
/* ---------- Danger Zone ---------- */
.fia-portal .fia-danger-zone {
margin-top: 18px;
border: 1px dashed var(--fia-sub-cp);
background: #fff8f8;
}
.fia-portal .fia-danger-zone .fia-card-head h3 { color: var(--fia-sub-cp); }
.fia-portal .fia-danger-desc {
font-size: 13.5px;
color: var(--fia-text-2);
line-height: 1.55;
margin: 8px 0 14px;
}
.fia-portal .fia-danger-list {
margin: 8px 0 14px;
padding-left: 22px;
font-size: 13.5px;
color: var(--fia-text);
line-height: 1.6;
}
.fia-portal .fia-danger-list li::marker { color: var(--fia-sub-cp); }
.fia-portal .fia-btn-danger {
background: var(--fia-sub-cp);
color: #fff;
border: 0;
box-shadow: var(--fia-shadow-1);
}
.fia-portal .fia-btn-danger:hover {
background: #d63030;
box-shadow: var(--fia-shadow-2);
}
.fia-portal .fia-btn-lg {
padding: 14px 22px;
font-size: 15.5px;
font-weight: 700;
}
/* Loading spinner state used by JS on buttons */
.fia-portal .fia-btn.is-loading {
pointer-events: none;
opacity: 0.7;
position: relative;
}
.fia-portal .fia-btn.is-loading::after {
content: "";
width: 14px; height: 14px;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
display: inline-block;
margin-left: 8px;
vertical-align: -2px;
animation: fia-spin 0.7s linear infinite;
}
@keyframes fia-spin { to { transform: rotate(360deg); } }
/* ---------- Mobile tweaks for new components ---------- */
@media (max-width: 760px) {
.fia-portal .fia-week-tabs {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.fia-portal .fia-perf-cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.fia-portal .fia-analysis-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.fia-portal .fia-modal { padding: 0; }
.fia-portal .fia-modal-card {
max-width: none;
min-height: 100vh;
max-height: 100vh;
border-radius: 0;
width: 100%;
}
.fia-portal .fia-modal-head { padding: 22px 18px 6px; }
.fia-portal .fia-modal-body { padding: 14px 18px; }
.fia-portal .fia-modal-foot { padding: 12px 18px 22px; }
.fia-portal .fia-welcome-posts { grid-template-columns: 1fr 1fr; }
.fia-portal .fia-input-otp { font-size: 22px; letter-spacing: 8px; }
}
@media (max-width: 480px) {
.fia-portal .fia-week-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fia-portal .fia-perf-cards { grid-template-columns: 1fr; }
.fia-portal .fia-analysis-grid { grid-template-columns: 1fr; }
.fia-portal .fia-welcome-posts { grid-template-columns: 1fr; }
.fia-portal .fia-review-opt { flex-wrap: wrap; }
.fia-portal .fia-review-badge { margin-left: 36px; }
}
/* Body scroll lock used by modals (script.js openModal/closeModal). */
body.fia-no-scroll { overflow: hidden; }
/* ===== Notes tab ========================================================= */
.fia-portal .fia-notes-filters {
display: flex;
gap: 10px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.fia-portal .fia-notes-search-input,
.fia-portal .fia-notes-filter-select {
padding: 8px 12px;
border: 1.5px solid var(--fia-border);
border-radius: var(--fia-radius-s);
font-size: 14px;
background: var(--fia-surface);
color: var(--fia-text);
outline: none;
transition: border-color .18s;
}
.fia-portal .fia-notes-search-input { flex: 1; min-width: 160px; }
.fia-portal .fia-notes-search-input:focus,
.fia-portal .fia-notes-filter-select:focus {
border-color: var(--fia-accent);
}
/* Progress bar */
.fia-portal .fia-notes-progress-wrap {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.fia-portal .fia-notes-progress-bar {
flex: 1;
height: 8px;
background: var(--fia-border);
border-radius: 99px;
overflow: hidden;
}
.fia-portal .fia-notes-progress-fill {
height: 100%;
background: var(--fia-success, #22c55e);
border-radius: 99px;
width: 0;
transition: width .35s ease;
}
.fia-portal .fia-notes-progress-label {
font-size: 13px;
color: var(--fia-muted);
white-space: nowrap;
}
/* Note rows */
.fia-portal .fia-notes-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.fia-portal .fia-note-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
padding: 14px 16px;
background: var(--fia-surface);
border: 1.5px solid var(--fia-border);
border-radius: var(--fia-radius-s);
transition: background .2s, border-color .2s;
}
.fia-portal .fia-note-row.is-read {
background: rgba(34,197,94,.07);
border-color: rgba(34,197,94,.35);
}
.fia-portal .fia-note-row-left {
display: flex;
align-items: flex-start;
gap: 12px;
flex: 1;
min-width: 0;
}
.fia-portal .fia-note-icon { font-size: 22px; flex-shrink: 0; margin-top: 2px; }
.fia-portal .fia-note-info { min-width: 0; }
.fia-portal .fia-note-title { display: block; font-weight: 600; font-size: 15px; color: var(--fia-text); }
.fia-portal .fia-note-subject {
display: inline-block;
margin-top: 3px;
padding: 2px 8px;
border-radius: 99px;
background: var(--fia-accent-light, rgba(99,102,241,.12));
color: var(--fia-accent);
font-size: 11px;
font-weight: 600;
letter-spacing: .03em;
}
.fia-portal .fia-note-desc {
margin: 4px 0 0;
font-size: 13px;
color: var(--fia-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 420px;
}
.fia-portal .fia-note-row-actions {
display: flex;
gap: 8px;
align-items: center;
flex-shrink: 0;
}
.fia-portal .fia-btn-sm { padding: 6px 12px; font-size: 13px; }
.fia-portal .fia-btn-outline {
background: transparent;
border: 1.5px solid var(--fia-border);
color: var(--fia-text);
}
.fia-portal .fia-btn-success {
background: rgba(34,197,94,.12);
border: 1.5px solid rgba(34,197,94,.4);
color: #16a34a;
}
.fia-portal .fia-note-no-pdf { font-size: 12px; color: var(--fia-muted); }
/* PDF modal */
.fia-portal .fia-pdf-modal {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 20px;
}
.fia-portal .fia-pdf-modal[hidden] { display: none; }
.fia-portal .fia-pdf-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(0,0,0,.55);
}
.fia-portal .fia-pdf-modal-card {
position: relative;
z-index: 1;
background: var(--fia-surface);
border-radius: var(--fia-radius);
box-shadow: 0 24px 64px rgba(0,0,0,.25);
display: flex;
flex-direction: column;
width: 100%;
max-width: 900px;
height: calc(100vh - 40px);
overflow: hidden;
}
.fia-portal .fia-pdf-modal-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px;
border-bottom: 1px solid var(--fia-border);
}
.fia-portal .fia-pdf-modal-head h3 { margin: 0; font-size: 16px; }
.fia-portal .fia-pdf-modal-close {
background: none;
border: none;
font-size: 20px;
cursor: pointer;
color: var(--fia-muted);
padding: 4px 8px;
border-radius: 4px;
}
.fia-portal .fia-pdf-modal-close:hover { background: var(--fia-border); }
.fia-portal .fia-pdf-modal-body { flex: 1; overflow: hidden; }
.fia-portal .fia-pdf-modal-body iframe {
width: 100%;
height: 100%;
border: none;
display: block;
}
/* ===== WhatsApp help button ============================================== */
.fia-portal .fia-help-whatsapp {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 8px;
padding: 7px 12px;
border-radius: var(--fia-radius-s);
background: #25d366;
color: #fff;
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: background .18s;
width: 100%;
justify-content: center;
}
.fia-portal .fia-help-whatsapp:hover { background: #1ebe5d; color: #fff; }
/* =========================================================================
STRONG vs WEAK PERFORMANCE GRID
Appended — does NOT modify any existing rules above.
========================================================================= */
/* Container */
.fia-portal .fia-performance-grid {
margin-top: 28px;
margin-bottom: 8px;
}
.fia-portal .fia-perf-grid-head {
margin-bottom: 16px;
}
.fia-portal .fia-perf-grid-title {
font-size: 17px;
font-weight: 700;
color: var(--fia-text-1, #111827);
margin: 0 0 4px;
}
.fia-portal .fia-perf-grid-sub {
font-size: 13px;
color: var(--fia-text-3, #6b7280);
margin: 0;
}
/* Two-column layout — side-by-side on desktop, stacked on mobile */
.fia-portal .fia-perf-grid-cols {
display: flex;
gap: 18px;
align-items: flex-start;
}
/* Each box */
.fia-portal .fia-weak-box,
.fia-portal .fia-strong-box {
flex: 1 1 0;
min-width: 0;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0,0,0,.07);
background: #fff;
transition: box-shadow .2s;
}
.fia-portal .fia-weak-box:hover,
.fia-portal .fia-strong-box:hover {
box-shadow: 0 4px 20px rgba(0,0,0,.12);
}
/* Box headers */
.fia-portal .fia-pgbox-header {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 18px;
}
.fia-portal .fia-pgbox-header--weak {
background: linear-gradient(135deg, #ff4d4d 0%, #c0392b 100%);
color: #fff;
}
.fia-portal .fia-pgbox-header--strong {
background: linear-gradient(135deg, #27ae60 0%, #1a7a45 100%);
color: #fff;
}
.fia-portal .fia-pgbox-icon {
font-size: 26px;
line-height: 1;
flex-shrink: 0;
}
.fia-portal .fia-pgbox-title {
font-size: 15px;
font-weight: 700;
margin: 0 0 3px;
color: #fff;
}
.fia-portal .fia-pgbox-desc {
font-size: 12px;
opacity: .88;
margin: 0;
color: #fff;
}
/* Empty state inside a box */
.fia-portal .fia-pgbox-empty {
padding: 24px 18px;
font-size: 13px;
color: var(--fia-text-3, #6b7280);
text-align: center;
}
/* Body scroll area */
.fia-portal .fia-pgbox-body {
padding: 10px 14px 14px;
display: flex;
flex-direction: column;
gap: 12px;
}
/* ---- Individual subject card inside a box ---- */
.fia-portal .fia-pg-subject-card {
border-radius: 10px;
padding: 13px 14px 11px;
position: relative;
transition: transform .15s, box-shadow .15s;
}
.fia-portal .fia-pg-subject-card:hover {
transform: translateY(-1px);
box-shadow: 0 3px 10px rgba(0,0,0,.09);
}
.fia-portal .fia-pg-subject-card--weak {
background: #fff5f5;
border: 1px solid #fca5a5;
}
.fia-portal .fia-pg-subject-card--strong {
background: #f0fdf4;
border: 1px solid #86efac;
}
/* Subject name + accuracy badge row */
.fia-portal .fia-pg-subject-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 6px;
}
.fia-portal .fia-pg-subject-name {
font-size: 14px;
font-weight: 700;
color: var(--fia-text-1, #111827);
}
.fia-portal .fia-pg-accuracy-badge {
font-size: 13px;
font-weight: 700;
padding: 2px 9px;
border-radius: 20px;
}
.fia-portal .fia-pg-accuracy-badge--weak {
background: #fee2e2;
color: #b91c1c;
}
.fia-portal .fia-pg-accuracy-badge--strong {
background: #dcfce7;
color: #15803d;
}
/* Accuracy label */
.fia-portal .fia-pg-accuracy-label {
font-size: 12.5px;
color: var(--fia-text-2, #374151);
margin: 0 0 7px;
}
.fia-portal .fia-pg-accuracy-label strong {
font-weight: 700;
}
/* Wrong / Correct stat row */
.fia-portal .fia-pg-stat-row {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 9px;
}
.fia-portal .fia-pg-stat {
font-size: 12px;
padding: 2px 8px;
border-radius: 20px;
font-weight: 600;
}
.fia-portal .fia-pg-stat--wrong {
background: #fee2e2;
color: #b91c1c;
}
.fia-portal .fia-pg-stat--correct {
background: #dcfce7;
color: #15803d;
}
/* Animated progress bar */
.fia-portal .fia-pg-bar-track {
height: 7px;
background: rgba(0,0,0,.08);
border-radius: 10px;
overflow: hidden;
margin-bottom: 10px;
}
.fia-portal .fia-pg-bar-fill {
height: 100%;
border-radius: 10px;
width: 0%;
transition: width .7s cubic-bezier(.4,0,.2,1);
}
.fia-portal .fia-pg-bar-fill--weak {
background: linear-gradient(90deg, #ef4444, #dc2626);
}
.fia-portal .fia-pg-bar-fill--strong {
background: linear-gradient(90deg, #22c55e, #16a34a);
}
/* Topic chips */
.fia-portal .fia-pg-topics {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.fia-portal .fia-pg-chip {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11.5px;
padding: 3px 9px;
border-radius: 20px;
font-weight: 600;
cursor: default;
transition: opacity .15s;
}
.fia-portal .fia-pg-chip:hover { opacity: .8; }
.fia-portal .fia-pg-chip em {
font-style: normal;
font-weight: 700;
}
.fia-portal .fia-pg-chip--weak {
background: #fef2f2;
color: #991b1b;
border: 1px solid #fca5a5;
}
.fia-portal .fia-pg-chip--weak em { color: #dc2626; }
.fia-portal .fia-pg-chip--mid {
background: #fffbeb;
color: #92400e;
border: 1px solid #fcd34d;
}
.fia-portal .fia-pg-chip--mid em { color: #d97706; }
.fia-portal .fia-pg-chip--ok {
background: #f0fdf4;
color: #166534;
border: 1px solid #86efac;
}
.fia-portal .fia-pg-chip--ok em { color: #15803d; }
.fia-portal .fia-pg-topics-hint {
font-size: 11.5px;
color: var(--fia-text-3, #6b7280);
margin: 0;
}
/* ---- Mobile: stack columns vertically ----
IMPORTANT: when flex-direction switches to column, the existing
`flex: 1 1 0` on each box means "height: 0, then grow" — but the
parent has no fixed height, so children collapse to 0 and content
overflows invisibly. Override `flex` so boxes size to their content. */
@media (max-width: 640px) {
.fia-portal .fia-perf-grid-cols {
flex-direction: column;
gap: 16px;
}
.fia-portal .fia-weak-box,
.fia-portal .fia-strong-box {
flex: 0 0 auto;
width: 100%;
}
.fia-portal .fia-pgbox-header {
padding: 14px 14px;
}
.fia-portal .fia-pg-subject-card {
padding: 11px 12px 10px;
}
}
/* ---- Dark-mode compatibility (if .fia-portal has dark class or prefers-color-scheme) ---- */
@media (prefers-color-scheme: dark) {
.fia-portal .fia-weak-box,
.fia-portal .fia-strong-box {
background: #1f2937;
}
.fia-portal .fia-pg-subject-card--weak {
background: rgba(239,68,68,.08);
border-color: rgba(239,68,68,.25);
}
.fia-portal .fia-pg-subject-card--strong {
background: rgba(34,197,94,.08);
border-color: rgba(34,197,94,.25);
}
.fia-portal .fia-pg-stat--wrong { background: rgba(239,68,68,.15); color: #fca5a5; }
.fia-portal .fia-pg-stat--correct { background: rgba(34,197,94,.15); color: #86efac; }
.fia-portal .fia-pg-accuracy-badge--weak { background: rgba(239,68,68,.2); color: #fca5a5; }
.fia-portal .fia-pg-accuracy-badge--strong { background: rgba(34,197,94,.2); color: #86efac; }
.fia-portal .fia-pg-chip--weak { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.3); color: #fca5a5; }
.fia-portal .fia-pg-chip--mid { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.3); color: #fcd34d; }
.fia-portal .fia-pg-chip--ok { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.3); color: #86efac; }
}
/* =========================================================================
END STRONG vs WEAK PERFORMANCE GRID
========================================================================= */
/* =========================================================================
NOTES — DOWNLOAD BUTTON + MOBILE RESPONSIVENESS
=========================================================================
Adds the download anchor styling and reflows the notes list, filter bar,
and PDF modal for phones/tablets. Loads after the desktop notes block
above so it cleanly overrides where needed.
========================================================================= */
/* Anchor variant of the action button — make sure it renders identically
to the button siblings (no underline, no inherited link color). */
.fia-portal .fia-note-download-btn,
.fia-portal a.fia-note-download-btn {
text-decoration: none;
cursor: pointer;
}
.fia-portal .fia-note-download-btn:hover {
background: var(--fia-surface-2);
}
/* Tighten icon+label spacing inside the small action buttons so they don't
wrap awkwardly on narrow viewports. */
.fia-portal .fia-note-btn-icon {
display: inline-block;
margin-right: 4px;
line-height: 1;
}
.fia-portal .fia-note-btn-text {
display: inline-block;
}
/* ---- Tablet / small laptop (≤ 860px) -----------------------------------
The 3-button action group starts to crowd the title text. Allow the row
to wrap so the action group sits underneath when needed. */
@media (max-width: 860px) {
.fia-portal .fia-note-row {
flex-wrap: wrap;
}
.fia-portal .fia-note-row-actions {
flex-wrap: wrap;
justify-content: flex-end;
width: 100%;
}
.fia-portal .fia-note-desc {
max-width: 100%;
white-space: normal;
}
}
/* ---- Phone (≤ 640px) ---------------------------------------------------
Stack the whole row vertically. Buttons become equal-width pills that
the user can tap with a thumb. */
@media (max-width: 640px) {
.fia-portal .fia-note-row {
flex-direction: column;
align-items: stretch;
padding: 12px 12px;
gap: 10px;
}
.fia-portal .fia-note-row-left {
gap: 10px;
}
.fia-portal .fia-note-icon {
font-size: 20px;
}
.fia-portal .fia-note-title {
font-size: 14.5px;
line-height: 1.35;
}
.fia-portal .fia-note-desc {
font-size: 12.5px;
max-width: 100%;
white-space: normal;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.fia-portal .fia-note-row-actions {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
width: 100%;
}
.fia-portal .fia-note-row-actions .fia-btn-sm {
width: 100%;
justify-content: center;
padding: 9px 6px;
font-size: 12.5px;
min-height: 38px;
}
/* Filter bar: search + select on their own rows for thumb-friendly width. */
.fia-portal .fia-notes-filters {
flex-direction: column;
gap: 8px;
}
.fia-portal .fia-notes-search-input,
.fia-portal .fia-notes-filter-select {
width: 100%;
min-width: 0;
font-size: 15px; /* ≥16px on iOS prevents zoom-in on focus */
}
/* Progress bar label below the bar so it doesn't squeeze the bar to nothing. */
.fia-portal .fia-notes-progress-wrap {
flex-direction: column;
align-items: stretch;
gap: 6px;
}
.fia-portal .fia-notes-progress-label {
white-space: normal;
text-align: right;
}
/* PDF modal: fullscreen on phones (no wasted side gutters). */
.fia-portal .fia-pdf-modal {
padding: 0;
}
.fia-portal .fia-pdf-modal-card {
max-width: 100%;
height: 100vh;
height: 100dvh; /* keeps the modal usable when iOS toolbars show/hide */
border-radius: 0;
}
.fia-portal .fia-pdf-modal-head {
padding: 12px 14px;
}
.fia-portal .fia-pdf-modal-head h3 {
font-size: 14.5px;
max-width: 80%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fia-portal .fia-pdf-modal-close {
font-size: 22px;
padding: 6px 12px;
min-height: 36px;
min-width: 36px;
}
}
/* ---- Very narrow phone (≤ 380px) --------------------------------------
Hide button text labels and rely on icons. Buttons keep their tap targets
but stop wrapping into ugly two-line pills. */
@media (max-width: 380px) {
.fia-portal .fia-note-row-actions .fia-note-btn-text {
display: none;
}
.fia-portal .fia-note-row-actions .fia-note-btn-icon {
margin-right: 0;
font-size: 16px;
}
.fia-portal .fia-note-row-actions .fia-btn-sm {
padding: 10px 4px;
}
}
/* =========================================================================
END NOTES MOBILE RESPONSIVENESS
========================================================================= */
/* =========================================================================
v1.7.1 — Defensive mobile rules for the weak-subjects analysis card
=========================================================================
Symptom report: on mobile, the "Weak Areas This Test" / "Subject
Performance" cards sometimes look empty or get pushed off-screen because
long subject names + percentage badges don't have room to coexist on one
line. These rules let the header wrap and shrink the percent font so the
whole card stays inside the viewport regardless of subject-name length.
========================================================================= */
@media (max-width: 600px) {
.fia-portal .fia-weak-subj-header {
flex-wrap: wrap;
gap: 6px 12px;
align-items: flex-start;
}
.fia-portal .fia-weak-subj-info {
flex: 1 1 60%;
min-width: 0;
}
.fia-portal .fia-weak-subj-name {
font-size: 14px;
line-height: 1.3;
word-break: break-word;
}
.fia-portal .fia-weak-subj-pct {
font-size: 18px;
flex-shrink: 0;
}
.fia-portal .fia-weak-subject-card {
padding: 12px 12px;
}
/* Per-test result panel: same problem space, same fix. */
.fia-portal .fia-test-result {
padding: 14px;
}
.fia-portal .fia-result-section {
margin-top: 18px;
}
/* Stats grid (already gets 1fr 1fr at 520px) — make sure values shrink
instead of overflowing on very narrow screens. */
.fia-portal .fia-result-stat-value { font-size: 22px; }
.fia-portal .fia-result-stat { padding: 12px 10px; }
}
/* Make the perf-grid columns stack a touch earlier (was 640px). Some
phones in landscape sit between 600 and 700 px wide and were getting
cramped side-by-side weak/strong boxes. Same flex override as the 640px
rule above — see the comment there for why this is required. */
@media (max-width: 760px) {
.fia-portal .fia-perf-grid-cols {
flex-direction: column;
gap: 14px;
}
.fia-portal .fia-weak-box,
.fia-portal .fia-strong-box {
flex: 0 0 auto;
width: 100%;
}
}
/* ──────────────────────────────────────────────────────────────────
* Practice tab — per-card progress tracking (added in 1.7.2)
* Shows users their per-category, per-subject, and per-topic
* progress so they can pick what to work on. All hidden by default
* and revealed by JS only when there's data, so brand-new users
* still see a clean Practice tab.
* ────────────────────────────────────────────────────────────── */
/* Test category cards (Daily / Mock / Weak) — stats strip */
.fia-portal .fia-test-card { position: relative; }
.fia-portal .fia-cat-stats {
display: flex;
gap: 8px;
margin: 10px 0 12px;
padding: 8px 10px;
background: var(--fia-surface-2);
border: 1px solid var(--fia-line);
border-radius: 10px;
flex-wrap: wrap;
}
.fia-portal .fia-cat-stat {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-width: 56px;
line-height: 1.15;
}
.fia-portal .fia-cat-stat-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--fia-ink-mute);
}
.fia-portal .fia-cat-stat-value {
font-size: 15px;
font-weight: 700;
color: var(--fia-ink);
margin-top: 2px;
}
.fia-portal .fia-cat-stat-value.is-weak { color: #dc2626; }
.fia-portal .fia-cat-stat-value.is-ok { color: #d97706; }
.fia-portal .fia-cat-stat-value.is-strong { color: #16a34a; }
/* Subject card — header accuracy badge */
.fia-portal .fia-subject-head {
display: flex;
align-items: center;
gap: 8px;
}
.fia-portal .fia-subject-head h4 {
flex: 1 1 auto;
min-width: 0;
}
.fia-portal .fia-subject-acc {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 2px 8px;
font-size: 11px;
font-weight: 700;
border-radius: 999px;
background: var(--fia-surface-2);
border: 1px solid var(--fia-line);
color: var(--fia-ink-mute);
white-space: nowrap;
}
.fia-portal .fia-subject-acc.is-weak { background: #fee2e2; border-color: #fecaca; color: #b91c1c; }
.fia-portal .fia-subject-acc.is-ok { background: #fef3c7; border-color: #fde68a; color: #b45309; }
.fia-portal .fia-subject-acc.is-strong { background: #dcfce7; border-color: #bbf7d0; color: #15803d; }
/* Subject card — progress strip */
.fia-portal .fia-subject-progress {
margin: 8px 0 10px;
}
.fia-portal .fia-subject-progress-meta {
display: flex;
justify-content: space-between;
font-size: 11px;
color: var(--fia-ink-mute);
margin-bottom: 4px;
gap: 8px;
}
.fia-portal .fia-subject-progress-meta span {
min-width: 0;
}
.fia-portal .fia-subject-progress .fia-progress-track {
height: 6px;
margin: 0;
}
.fia-portal .fia-subject-progress .fia-progress-fill.is-weak {
background: linear-gradient(90deg, #ef4444, #f87171);
}
.fia-portal .fia-subject-progress .fia-progress-fill.is-ok {
background: linear-gradient(90deg, #f59e0b, #fbbf24);
}
.fia-portal .fia-subject-progress .fia-progress-fill.is-strong {
background: linear-gradient(90deg, #16a34a, #22c55e);
}
/* Topic chip — inline accuracy badge */
.fia-portal .fia-chip .fia-chip-acc {
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 6px;
padding: 1px 6px;
font-size: 10px;
font-weight: 700;
line-height: 1.3;
border-radius: 999px;
background: rgba(255, 255, 255, 0.18);
color: inherit;
vertical-align: baseline;
}
/* Color tweaks so the badge stays readable on default (unselected) chips */
.fia-portal .fia-chip:not(.is-active) .fia-chip-acc.is-weak {
background: #fee2e2; color: #b91c1c;
}
.fia-portal .fia-chip:not(.is-active) .fia-chip-acc.is-ok {
background: #fef3c7; color: #b45309;
}
.fia-portal .fia-chip:not(.is-active) .fia-chip-acc.is-strong {
background: #dcfce7; color: #15803d;
}
/* On the active "All topics" chip (blue bg) — use higher-contrast pills */
.fia-portal .fia-chip.is-active .fia-chip-acc.is-weak { background: #fecaca; color: #7f1d1d; }
.fia-portal .fia-chip.is-active .fia-chip-acc.is-ok { background: #fde68a; color: #78350f; }
.fia-portal .fia-chip.is-active .fia-chip-acc.is-strong { background: #bbf7d0; color: #14532d; }
/* Tighten on small screens — the stats strip wraps cleanly */
@media (max-width: 480px) {
.fia-portal .fia-cat-stat-value { font-size: 14px; }
.fia-portal .fia-cat-stat-label { font-size: 9px; }
.fia-portal .fia-subject-acc { font-size: 10px; padding: 2px 6px; }
}
/* ──────────────────────────────────────────────────────────────────
* Resume system — Practice tab (added in 1.7.2)
*
* - .fia-resume-banner Top-of-tab card listing paused tests
* - .fia-inprogress-flag "In progress" ribbon on category /
* subject / day cards & topic chips
* - .fia-btn-save-exit The Save & Exit button in the runner
*
* All visuals stay on-brand with the existing accent + surface tokens.
* ────────────────────────────────────────────────────────────── */
/* Resume banner */
.fia-portal .fia-resume-banner {
margin: 0 0 16px;
padding: 14px 16px;
background: linear-gradient(135deg, #eef2ff 0%, #fef3c7 100%);
border: 1px solid #c7d2fe;
border-radius: 14px;
box-shadow: 0 2px 6px rgba(99, 102, 241, 0.08);
}
.fia-portal .fia-resume-banner-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.fia-portal .fia-resume-banner-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: #fff;
border: 1px solid #c7d2fe;
border-radius: 10px;
font-size: 18px;
flex: 0 0 auto;
}
.fia-portal .fia-resume-banner-head h3 {
margin: 0;
font-size: 15px;
font-weight: 700;
color: var(--fia-ink);
line-height: 1.25;
}
.fia-portal .fia-resume-banner-head p {
margin: 2px 0 0;
font-size: 12.5px;
color: var(--fia-ink-mute);
}
.fia-portal .fia-resume-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.fia-portal .fia-resume-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(199, 210, 254, 0.6);
border-radius: 10px;
}
.fia-portal .fia-resume-item-main {
flex: 1 1 auto;
min-width: 0;
}
.fia-portal .fia-resume-item-title {
display: block;
font-weight: 600;
font-size: 13.5px;
color: var(--fia-ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fia-portal .fia-resume-item-sub {
display: block;
font-size: 11.5px;
color: var(--fia-ink-mute);
margin: 1px 0 4px;
}
.fia-portal .fia-resume-item .fia-progress-track {
height: 5px;
margin: 0;
background: rgba(99, 102, 241, 0.12);
border-color: rgba(99, 102, 241, 0.18);
}
.fia-portal .fia-resume-item .fia-progress-fill {
background: linear-gradient(90deg, #6366f1, #f59e0b);
}
.fia-portal .fia-resume-item-actions {
display: flex;
gap: 6px;
flex: 0 0 auto;
}
.fia-portal .fia-resume-more {
margin: 10px 0 0;
font-size: 11.5px;
color: var(--fia-ink-mute);
font-style: italic;
}
/* "In progress" flags on the cards/chips */
.fia-portal .fia-inprogress-flag {
position: absolute;
top: 8px;
right: 8px;
display: inline-flex;
align-items: center;
padding: 2px 8px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
background: #fef3c7;
color: #92400e;
border: 1px solid #fde68a;
border-radius: 999px;
z-index: 2;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
/* Pulsing dot before the text so it pops without being noisy */
.fia-portal .fia-inprogress-flag::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
margin-right: 5px;
background: #d97706;
border-radius: 50%;
animation: fia-inprogress-pulse 1.6s ease-in-out infinite;
}
@keyframes fia-inprogress-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.7); }
}
/* Cards that have an active test get a subtle accent border */
.fia-portal .fia-test-card.is-in-progress,
.fia-portal .fia-subject-card.is-in-progress,
.fia-portal .fia-day-card.is-in-progress {
border-color: #fde68a;
box-shadow: 0 0 0 1px #fde68a inset;
}
/* Topic chip ribbon — chips are pill-shaped + small, so use a left dot */
.fia-portal .fia-chip.is-in-progress {
position: relative;
padding-left: 18px;
background: #fef3c7;
border-color: #fde68a;
color: #92400e;
}
.fia-portal .fia-chip.is-in-progress::before {
content: '';
position: absolute;
left: 8px;
top: 50%;
width: 6px;
height: 6px;
margin-top: -3px;
background: #d97706;
border-radius: 50%;
animation: fia-inprogress-pulse 1.6s ease-in-out infinite;
}
/* Save & Exit button — neutral-warning vibe, slightly amber */
.fia-portal .fia-btn-save-exit {
color: #b45309;
border-color: #fde68a;
background: #fffbeb;
}
.fia-portal .fia-btn-save-exit:hover {
background: #fef3c7;
border-color: #fcd34d;
}
/* Tighten the resume banner on phones */
@media (max-width: 560px) {
.fia-portal .fia-resume-item {
flex-direction: column;
align-items: stretch;
}
.fia-portal .fia-resume-item-actions {
justify-content: flex-end;
}
.fia-portal .fia-resume-banner {
padding: 12px;
}
}