:root {
 --af-primary:#fa470d;
}
.af-app {
 --af-secondary:#6554c0;--af-bg:#f1f7fc;--af-card:#fff;--af-text:#203352;--af-muted:#60718b;--af-border:#e0e9f2;--af-success:#18865d;--af-warning:#a96707;--af-danger:#ca3651;
 --primary:var(--af-primary);--bg-main:var(--af-bg);--bg-card:var(--af-card);--bg-muted:var(--af-bg);--text-main:var(--af-text);--text-muted:var(--af-muted);--border-color:var(--af-border);--border-subtle:var(--af-border);--radius-card:20px;--radius-card-lg:24px;--radius-md:12px;--shadow-sm:0 3px 12px #24427006;--shadow-md:0 6px 24px #2442700b;
 background:var(--af-bg);color:var(--af-text);font-family:'Plus Jakarta Sans',system-ui,sans-serif;line-height:1.6;
}
html[data-theme=dark] .af-app {--af-bg:#111c30;--af-card:#1b2940;--af-text:#edf3fc;--af-muted:#b2c1d6;--af-border:#33435d;--af-success:#57d6a2;--af-warning:#f4ca77;--af-danger:#ff879d;--bg-card-hover:#24344e;--primary-tint:#fa470d18}
.af-app *, .af-app *::before, .af-app *::after{box-sizing:border-box}
.af-app img{max-width:100%}.af-app button,.af-app input,.af-app select,.af-app textarea{font:inherit}
.af-app :is(a,button,input,select,textarea,[tabindex]):focus-visible{outline:3px solid #087dc1;outline-offset:4px}
.af-skip{position:fixed;top:-100px;left:20px;z-index:999;background:var(--af-card,#fff);padding:12px 20px;border-radius:10px}.af-skip:focus{top:10px}
.af-header{height:80px;display:flex;align-items:center;gap:24px;padding:0 28px;background:var(--af-card);border-bottom:1px solid var(--af-border);position:sticky;top:0;z-index:60}
.af-brand{display:flex;gap:10px;align-items:center;color:var(--af-text);font-size:23px;font-weight:800;letter-spacing:-1px;white-space:nowrap;text-decoration:none}.af-brand small{display:block;font-size:9px;letter-spacing:.7px;color:var(--af-muted);font-weight:700;text-transform:uppercase}
.af-brand-mark{display:grid;place-items:center;width:42px;height:42px;background:#fff0d4;color:#ea4a12;border-radius:14px;transform:rotate(-7deg)}
.af-top-nav{display:flex;align-items:center;gap:6px;margin:auto}.af-top-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:68px;padding:8px 10px;border-radius:12px;color:var(--af-text);font-size:11px;font-weight:800;text-decoration:none}.af-top-nav a:nth-child(3n+2) svg{color:#8a52cb}.af-top-nav a:nth-child(3n) svg{color:#148abd}.af-top-nav a.active,.af-top-nav a:hover{background:var(--af-primary-soft,#fa470d12);color:var(--af-primary)}
.af-header-account{display:flex;align-items:center;gap:14px}.af-user-link{display:flex;align-items:center;gap:9px;color:var(--af-text);font-size:12px;font-weight:800;max-width:210px;text-decoration:none}.af-user-link img{border-radius:50%;border:3px solid #ffe4a0}.af-user-link span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.af-user-link small{display:block;font-size:10px;font-weight:600;color:var(--af-muted)}
.af-mode-button,.af-menu-button,.af-drawer-close{border:1px solid var(--af-border);border-radius:12px;background:var(--af-card);color:var(--af-text);min-width:42px;min-height:42px;cursor:pointer;font-size:22px}.af-menu-button,.af-drawer-close{display:none}
.af-app .app-layout{display:block}.af-app .sidebar{position:fixed;top:80px;bottom:0;left:0;width:206px;background:var(--af-card);border-right:1px solid var(--af-border);color:var(--af-text);z-index:55;padding:18px 12px;overflow-y:auto;height:calc(100dvh - 80px)}
.af-app .main-content{margin-left:206px;min-width:0}.af-app .topbar[hidden]{display:none}.af-app .page-body{padding:24px;max-width:1500px;margin:0 auto;width:100%}
.af-side-identity{text-align:center;border-bottom:1px solid var(--af-border);padding:0 4px 18px;margin-bottom:14px}.af-side-identity a{color:var(--af-text);text-decoration:none}.af-side-identity img{display:block;margin:0 auto 8px;border-radius:50%;border:4px solid #dceffd}.af-side-identity strong{display:block;font-size:13px;overflow-wrap:anywhere}.af-side-identity>span{font-size:10px;color:var(--af-muted)}
.af-side-nav a,.af-side-nav button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 8px;margin:3px 0;border:0;border-radius:11px;background:transparent;color:var(--af-text);font-size:12px;font-weight:700;text-decoration:none;text-align:left;cursor:pointer}.af-side-nav a:hover,.af-side-nav a.active{background:#e7f3ff;color:#1665b4}.af-nav-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#f0ecff;color:#8052c7;flex-shrink:0}.af-nav-icon svg{width:18px;height:18px}.af-side-nav a:nth-child(3n) .af-nav-icon{color:#d84688;background:#ffedf5}.af-side-nav a:nth-child(3n+1) .af-nav-icon{color:#1387aa;background:#e5f7fb}.af-side-nav form{border-top:1px solid var(--af-border);margin-top:14px;padding-top:8px}.af-side-note{background:linear-gradient(135deg,#fff8d9,#fff0e8);color:#6b4e29;border-radius:16px;padding:18px 14px;margin-top:24px}.af-side-note svg{color:#e7a914}.af-side-note strong{display:block;font-size:16px;line-height:1.4;margin:8px 0}.af-side-note p{font-size:11px;margin:0}
.af-app .card,.af-app .stat-card,.af-app .subject-card{border:1px solid var(--af-border);border-radius:20px;box-shadow:var(--shadow-sm);background-color:var(--af-card)}.af-app .card{margin-bottom:20px}.af-app .stat-card{padding:20px;min-width:0}.af-app .stats-grid{gap:14px}.af-app .stat-number{font-size:1.8rem}.af-app .stat-label{font-size:.75rem}.af-app .stat-icon{border-radius:15px;box-shadow:none}
.af-app .btn{border-radius:11px;min-height:44px;padding:10px 18px;font-weight:800;box-shadow:none;white-space:normal;text-align:center}.af-app .btn-primary{background:var(--af-primary);border-color:var(--af-primary);color:#fff}.af-app .btn-secondary{background:var(--af-card);border-color:var(--af-border);color:var(--af-text)}.af-app .btn-exam{background:#167bbd;border-color:#167bbd;color:white}.af-app .btn-success{background:#168257;color:#fff}.af-app .btn-danger{background:#c9344d;color:#fff}.af-app .btn-ghost{background:transparent;color:var(--af-text);border-color:var(--af-border)}
.af-app .form-control{min-height:48px;border-radius:12px;background:var(--af-card);color:var(--af-text);border-color:var(--af-border);max-width:100%}.af-app .form-label{font-size:13px;font-weight:700}.af-app .badge{white-space:normal;line-height:1.5;border-radius:8px}.af-app .alert{border-radius:14px;font-size:13px}.af-app .table th{font-size:11px;background:var(--af-bg);color:var(--af-muted)}.af-app .table td{font-size:12px;overflow-wrap:anywhere}.af-app .table-responsive{border-radius:14px}
.af-banner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:186px;background:linear-gradient(115deg,#d9f3ff,#e7ecff);border:1px solid #c9e6f6;border-radius:22px;margin-bottom:22px;padding:25px 32px;overflow:hidden;color:#193e74}.af-banner--purple{background:linear-gradient(115deg,#eee2ff,#e1edff);border-color:#dfd2f7;color:#57368b}.af-banner--green{background:linear-gradient(115deg,#d8f4e5,#eef8ce);border-color:#cee8d5;color:#226348}.af-banner--pink{background:linear-gradient(115deg,#ffe1ee,#eee4ff);border-color:#f2d1e3;color:#92356a}.af-banner h1{font-size:clamp(25px,2.7vw,38px);line-height:1.2;font-weight:800;letter-spacing:-1.1px;margin:7px 0 10px}.af-banner p{font-size:13px;max-width:600px;margin:0}.af-banner-copy{position:relative;z-index:1;min-width:0}.af-eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:1.8px;font-weight:800}.af-banner-art{width:230px;height:173px;object-fit:contain;flex-shrink:0}.af-banner .btn{margin-top:16px}.af-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--af-border);padding:24px 4px;margin-top:30px;font-size:11px;color:var(--af-muted)}.af-footer strong{font-size:18px;color:var(--af-primary)}.af-footer svg{color:#d69a14}
.af-shortcuts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 22px}.af-shortcut{display:flex;align-items:center;gap:13px;border:1px solid var(--af-border);border-radius:16px;padding:18px;background:var(--af-card);color:var(--af-text);text-decoration:none}.af-shortcut .af-icon{width:34px;height:34px;color:#8c4ed5;flex-shrink:0}.af-shortcut:nth-child(2) .af-icon{color:#168dc1}.af-shortcut:nth-child(3) .af-icon{color:#d84389}.af-shortcut:nth-child(4) .af-icon{color:#ba8208}.af-shortcut strong{font-size:13px;display:block}.af-shortcut small{font-size:10px;color:var(--af-muted)}
/* Profile: shared structure, persisted color accents. */
.af-app .afirin-profile{--profile-card:var(--af-card);--profile-border:var(--af-border);--profile-text:var(--af-text);--profile-soft:var(--profile-primary-soft);--profile-card-bg:var(--af-card);--profile-card-border:var(--af-border);--profile-text-main:var(--af-text);--profile-text-muted:var(--af-muted);--profile-shadow:var(--shadow-sm)}
.af-app .profile-hero-card{border-radius:22px;box-shadow:var(--shadow-sm)}.af-app .profile-cover{height:205px}.af-app .profile-cover-default{background:linear-gradient(110deg,color-mix(in srgb,var(--profile-primary) 85%,#15254a),var(--profile-accent));position:relative}.af-app .profile-cover-default:after{content:'';position:absolute;inset:0;background:url('/assets/afirin-theme/learning-world.svg') right 24px center/270px auto no-repeat;pointer-events:none}.af-cover-copy{position:absolute;left:32px;top:35px;max-width:55%;font-size:28px;line-height:1.3;font-weight:800;color:#fff;letter-spacing:-.8px}.af-cover-copy small{display:block;font-size:12px;font-weight:600;margin-top:10px;letter-spacing:.4px}.af-app .profile-cover-shapes{display:none}.af-app .profile-cover-badge{z-index:2}.af-app .profile-header-body{padding:0 28px 22px}.af-app .profile-avatar-img{width:122px;height:122px}.af-app .profile-avatar-wrapper{margin-top:-53px}.af-app .profile-student-title{font-size:25px}.af-app .profile-stats-bar{margin-top:20px;padding:16px;background:var(--profile-primary-soft);border-radius:14px}.af-app .profile-stat-val{font-size:17px}.af-app .profile-tabs-nav{border-radius:14px;gap:2px;margin:18px 0;flex-wrap:wrap}.af-app .profile-tab-item{font-size:11px;padding:12px 13px;min-height:44px}.af-app .profile-card{padding:20px;border-radius:18px}.af-app .profile-grid-layout{gap:16px}.af-app .profile-card-title{font-size:13px}.af-app .profile-card-action{font-size:10px}.af-app .profile-empty-state{padding:24px 10px}.af-app .profile-empty-text{font-size:12px}.af-app .profile-card .profile-empty-icon{font-size:30px}.af-app .profile-cover-motif{opacity:.1}.af-app .profile-badge-card{box-shadow:none}.af-app .profile-badge-card:nth-child(2n){background:color-mix(in srgb,var(--profile-primary) 7%,var(--af-card))}
.af-parent-profile .profile-cover-default{background:linear-gradient(110deg,#285b70,#7cb7be)}.af-parent-profile[data-profile-theme=pink] .profile-cover-default{background:linear-gradient(110deg,#795170,#bba1c7)}.af-parent-profile .profile-cover-default:after{opacity:.4}.af-parent-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(240px,1fr);gap:20px}.af-child-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.af-child-card{padding:20px;border:1px solid var(--af-border);border-radius:16px;background:var(--af-bg)}.af-child-card img{border-radius:50%;width:55px;height:55px}.af-child-card h3{margin:10px 0;font-size:15px}.af-child-card p{font-size:12px;color:var(--af-muted)}
/* Focused practice / official exams retain existing controls and state. */
.af-app .practice-container,.af-app .exam-container{max-width:1100px;margin:auto}.af-app .question-card,.af-app .exam-question-block{background:color-mix(in srgb,#a3dffc 13%,var(--af-card));border-color:var(--af-border);border-radius:20px;box-shadow:var(--shadow-sm)}.af-app .option-label{background:var(--af-card);border:2px solid var(--af-border);border-radius:13px;min-height:56px;padding:12px 15px;cursor:pointer}.af-app .option-key{background:var(--af-bg);color:var(--af-text);border-radius:50%;font-size:12px}.af-app .option-label.selected{background:color-mix(in srgb,#269ee5 12%,var(--af-card));border-color:#2189c8}.af-app .option-label.selected:after{content:'✓';margin-left:auto;color:#0875b5;font-weight:800}.af-app #jumpNav{flex-wrap:wrap;overflow:visible!important}.af-app .nav-jump-btn{min-width:40px;min-height:40px;flex-shrink:0}.af-app .exam-timer{color:#167bbd;font-variant-numeric:tabular-nums}.af-app .af-exam-status{position:static!important;border-left-color:#188fc4!important;box-shadow:var(--shadow-sm)!important}.af-result{max-width:1100px!important}.af-result>.card:first-child{padding:28px!important}.af-result-score{background:var(--af-bg)!important;box-shadow:none!important;border:1px solid var(--af-border)!important;color:var(--af-text)!important}.af-result-score>div{color:var(--af-text)!important}.af-app .score-circle{background:var(--af-card);border:10px solid color-mix(in srgb,#24ae78 25%,var(--af-card));box-shadow:none}.af-result-ring{display:grid;place-content:center;width:136px;height:136px;margin:0 auto 24px;border-radius:50%;background:radial-gradient(closest-side,var(--af-card) 77%,transparent 79%),conic-gradient(#8760df calc(var(--score)*1%),var(--af-border) 0);font-size:27px;font-weight:800;color:var(--af-text)}.af-result-ring small{font-size:10px;color:var(--af-muted)}
/* All Quiz Arena modes inherit the same card language. */
.af-app .afirin-quiz{--quiz-card-bg:var(--af-card);--quiz-card-border:var(--af-border);--quiz-text-main:var(--af-text);--quiz-text-muted:var(--af-muted);--quiz-hud-bg:var(--af-card);--quiz-bg:var(--af-bg);--quiz-btn-bg:var(--af-card);--quiz-btn-text:var(--af-text);--quiz-btn-border:var(--af-border);--quiz-glow:var(--shadow-sm)}.af-app .quiz-hero{background:linear-gradient(115deg,#d9f3ff,#ffe3f0);border:1px solid var(--af-border);padding:32px;border-radius:22px;box-shadow:none;color:var(--af-text)}.af-app .quiz-hero-title{color:#243a70;background:none;-webkit-text-fill-color:currentColor;font-size:clamp(28px,3vw,42px);text-shadow:none}.af-app .quiz-hero-subtitle{color:#566480}.af-app .quiz-card,.af-app .category-card,.af-app .side-nav-card,.af-app .arena-hud{border-radius:18px;box-shadow:var(--shadow-sm)}.af-app .answers-grid{grid-template-columns:1fr;gap:10px}.af-app .answer-btn{border-radius:13px;min-height:56px;padding:12px 16px;box-shadow:none}.af-app .answer-letter{border-radius:50%;width:32px;height:32px;font-size:13px}.af-app .lifeline-btn{border-radius:12px;min-height:44px}.af-app .hud-timer-badge.urgent{animation:none}.af-app .achievement-card{border-radius:20px;box-shadow:var(--shadow-sm)}.af-app .achievement-card:hover{transform:translateY(-2px)}.af-app .achievement-card.locked{opacity:.8}.af-app .theme-preset-card{min-height:90px}.af-app .theme-preset-card.selected:after{content:'✓ Selected';font-size:11px;font-weight:800}
/* Public home and account creation. */
.af-home .public-header{background:var(--af-card)!important}.af-home .landing-nav{max-width:1500px;padding:16px 32px;gap:20px}.af-home .hero-section{max-width:1380px;margin:24px auto;min-height:0;padding:42px;gap:30px;grid-template-columns:1.15fr 1fr;border-radius:26px;background:linear-gradient(120deg,#fa470d,#ff7839);color:#fff}.af-home .hero-title{font-size:clamp(36px,4vw,59px);color:#fff;line-height:1.08;margin:14px 0}.af-home .hero-title span{color:#fff48c}.af-home .hero-desc{font-size:15px;color:#fff;line-height:1.7}.af-home .hero-pill{background:#fff2;color:#fff;border-color:#fff4}.af-home .hero-section .btn-primary{background:#fff185;color:#66381b;border-color:#fff185}.af-home .hero-section .btn-secondary{background:white;color:#7b3518;border-color:white}.af-home .hero-section>div>div:last-child{color:#fff!important;font-size:11px!important;gap:12px!important}.af-home-art{position:relative;text-align:center}.af-home-art img{width:100%;max-height:340px}.af-home-art>span{font-size:12px;font-weight:800;letter-spacing:3px;color:#fff6bd}.af-home main>section:not(.hero-section){margin-bottom:35px!important;padding-left:32px!important;padding-right:32px!important}.af-home .subject-card{padding:22px;background:color-mix(in srgb,#90d6fb 15%,var(--af-card));box-shadow:none}.af-home .subject-card:nth-child(3n+2){background:color-mix(in srgb,#f296cb 16%,var(--af-card))}.af-home .subject-card:nth-child(3n){background:color-mix(in srgb,#a6dfa7 20%,var(--af-card))}.af-home footer{background:var(--af-card)!important;color:var(--af-text)!important;border-top:1px solid var(--af-border)}
.af-auth{background:radial-gradient(at 0% 20%,#fcdced,transparent 60%),radial-gradient(at 100% 80%,#c9edff,transparent 70%),var(--af-bg);padding:28px}.af-auth .auth-split-container{max-width:1100px;border-radius:28px;box-shadow:0 12px 50px #30548910;border:1px solid var(--af-border);overflow:hidden;min-height:0}.af-auth .auth-left-brand{padding:38px;background:linear-gradient(155deg,#daf1ff,#f4e2fc);color:#244976}.af-auth .auth-left-brand h2{font-size:40px!important;color:#254777}.af-auth .auth-left-brand h2 span{color:#d53383!important}.af-auth .auth-left-brand p{font-size:14px!important;color:#536981!important}.af-auth .auth-left-brand a>span{color:#244976!important}.af-auth .auth-right-form{padding:34px;background:var(--af-card)}.af-auth .auth-brand-pill{background:#fff9d6;color:#806222;border-color:#f1dfa3;font-size:11px}.af-auth .auth-feature-item{color:#39566f;font-size:12px}.af-auth-art{display:block;width:280px;height:auto;margin:14px auto}.af-auth .auth-feature-list{margin-top:18px;gap:10px}.af-auth .selection-card{padding:14px 10px;min-height:78px;border-radius:14px}.af-auth .selection-title{font-size:13px}.af-auth .selection-sub{font-size:10px;white-space:normal}.af-auth .selection-radio:checked+.selection-card .selection-indicator:after{content:'✓';color:var(--primary);font-size:13px}.af-auth .selection-indicator{background:var(--af-card)!important;box-shadow:none!important}.af-auth .form-group{margin-bottom:16px}.af-auth .auth-left-brand>div:last-child{font-size:11px!important}
html[data-theme=dark] .af-app .af-banner{background:linear-gradient(110deg,#234467,#283854);border-color:var(--af-border);color:#e0efff}html[data-theme=dark] .af-app .af-banner--purple{background:linear-gradient(110deg,#3a2d5c,#253d58)}html[data-theme=dark] .af-app .af-banner--green{background:linear-gradient(110deg,#204639,#34452c)}html[data-theme=dark] .af-app .af-side-nav a.active{background:#25476a;color:#c0e6ff}html[data-theme=dark] .af-app .af-side-note{background:#343148;color:#f3dfc1}html[data-theme=dark] .af-app .quiz-hero{background:linear-gradient(110deg,#23425c,#493048)}html[data-theme=dark] .af-app .quiz-hero-title,html[data-theme=dark] .af-app .quiz-hero-subtitle{color:#e4efff}html[data-theme=dark] .af-auth{background:radial-gradient(at 0% 20%,#392c45,transparent 60%),var(--af-bg)}html[data-theme=dark] .af-auth .auth-left-brand{background:linear-gradient(155deg,#223c59,#3e2d48)}html[data-theme=dark] .af-auth .auth-left-brand :is(h2,p,.auth-feature-item),html[data-theme=dark] .af-auth .auth-left-brand a>span{color:#e4eafa!important}
@media(min-width:1200px){.af-app .af-exam-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:22px;align-items:start}.af-exam-layout .af-exam-status{grid-column:2;grid-row:1}.af-exam-layout #examForm{grid-column:1;grid-row:1}.af-exam-status>div:first-child{display:block!important}.af-exam-status>div:first-child>div{flex-wrap:wrap;margin-bottom:20px}.af-app .arena-layout{grid-template-columns:minmax(0,1fr) 235px}.af-app .arena-layout>.side-nav-card{grid-column:2;grid-row:1}.af-app .arena-layout>div:not(.side-nav-card){grid-column:1;grid-row:1}}
@media(min-width:1600px){.af-header{padding-left:38px;padding-right:38px}.af-app .page-body{padding:30px 40px}.af-app .sidebar{width:225px}.af-app .main-content{margin-left:225px}}
@media(max-width:1199px){.af-header{gap:15px;padding:0 18px}.af-top-nav a{min-width:57px;padding:8px 6px;font-size:10px}.af-user-link span{display:none}.af-app .sidebar{width:180px}.af-app .main-content{margin-left:180px}.af-app .page-body{padding:20px}.af-shortcuts{grid-template-columns:repeat(2,minmax(0,1fr))}.af-banner-art{width:175px}.af-home .desktop-nav{gap:14px!important}.af-home .desktop-nav a{font-size:11px!important}}
@media(max-width:1023px){.af-menu-button,.af-drawer-close{display:block}.af-app .sidebar{transform:translateX(-100%);width:240px;transition:transform .2s}.af-app .sidebar.open{transform:translateX(0)}.af-app .main-content{margin-left:0}.af-drawer-close{position:absolute;top:12px;right:10px;min-width:32px;min-height:32px;font-size:16px}.af-app .sidebar-overlay{z-index:54}.af-app .sidebar-overlay.active{display:block}.af-brand{font-size:19px}.af-brand-mark{width:35px;height:35px}.af-top-nav{gap:0}.af-header-account{gap:8px}.af-parent-grid{grid-template-columns:1fr}.af-home .landing-nav{flex-wrap:wrap}.af-home .desktop-nav{order:3;width:100%;justify-content:center}.af-home .hero-section{margin:20px;border-radius:22px}.af-home .hero-section{padding:28px}.af-auth .auth-left-brand{padding:26px}.af-auth .auth-left-brand h2{font-size:31px!important}}
@media(max-width:767px){.af-header{height:66px;padding:0 12px;gap:10px}.af-top-nav{display:none}.af-header-account{margin-left:auto}.af-brand small{font-size:8px;letter-spacing:0}.af-app .sidebar{top:66px;height:calc(100dvh - 66px)}.af-app .page-body{padding:14px}.af-banner{min-height:160px;padding:22px;margin-bottom:16px;gap:0}.af-banner h1{font-size:26px}.af-banner-art{width:120px;height:110px;opacity:.8;margin-right:-12px}.af-banner p{font-size:12px}.af-eyebrow{font-size:8px;letter-spacing:1px}.af-shortcuts{gap:9px}.af-shortcut{padding:13px;gap:8px}.af-shortcut strong{font-size:11px}.af-shortcut small{font-size:9px}.af-shortcut .af-icon{width:25px;height:25px}.af-app .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.af-app .stat-card{padding:14px;gap:10px}.af-app .stat-number{font-size:23px}.af-app .stat-icon{width:36px;height:36px;font-size:18px}.af-app .card{padding:20px!important}.af-app .page-body [style*='grid-template-columns: repeat(auto-fill, minmax(360px'],.af-home [style*='grid-template-columns: repeat(auto-fill']{grid-template-columns:1fr!important}.af-app .page-body [style*='grid-template-columns: 1fr 1fr 1fr']{grid-template-columns:1fr!important}.af-app .page-body h1{font-size:26px!important}.af-app .page-body [style*='display: flex']{min-width:0}.af-app .page-body .card>div[style*='display: flex']{flex-wrap:wrap}.af-app .profile-cover{height:155px}.af-cover-copy{left:22px;top:25px;font-size:21px;max-width:57%}.af-cover-copy small{font-size:10px}.af-app .profile-cover-default:after{background-size:180px;background-position:right -25px center}.af-app .profile-header-body{padding:0 16px 16px}.af-app .profile-avatar-img{width:94px;height:94px}.af-app .profile-avatar-wrapper{margin-top:-38px}.af-app .profile-student-title{font-size:22px}.af-app .profile-header-actions{gap:8px;flex-wrap:wrap;justify-content:flex-end}.af-app .profile-header-actions a{font-size:10px;padding:9px;min-height:40px}.af-app .profile-stats-bar{gap:10px;padding:12px}.af-app .profile-stat-val{font-size:14px}.af-app .profile-stat-label{font-size:9px}.af-app .profile-tabs-nav{gap:0;padding:4px;justify-content:flex-start}.af-app .profile-tab-item{padding:9px;font-size:10px}.af-child-list{grid-template-columns:1fr}.af-app .profile-grid-layout{grid-template-columns:1fr}.af-app .profile-grid-layout>[class*='col-span']{grid-column:1/-1}.af-app .profile-card{padding:17px}.af-app .question-card,.af-app .exam-question-block{padding:20px!important}.af-app .option-label{min-height:55px;font-size:13px}.af-app .option-text{overflow-wrap:anywhere}.af-app .af-exam-status{padding:17px!important}.af-result>.card:first-child{padding:20px!important}.af-footer{font-size:9px;gap:10px}.af-footer svg{display:none}.af-home .hero-section{grid-template-columns:1fr;padding:28px;margin:14px;gap:0}.af-home-art img{max-height:235px}.af-home-art>span{font-size:10px}.af-home main>section:not(.hero-section){padding-left:16px!important;padding-right:16px!important}.af-home .landing-nav{padding:12px 16px;gap:10px}.af-home .landing-nav>a{gap:6px!important}.af-home .desktop-nav{display:none!important}.af-home .landing-nav>div{gap:6px!important}.af-home .landing-nav .btn{padding:8px 10px!important;font-size:11px}.af-home .hero-title{font-size:38px}.af-home .hero-desc{font-size:13px}.af-home .hero-section .btn{font-size:12px}.af-auth{padding:14px}.af-auth .auth-split-container{display:block;border-radius:22px}.af-auth .auth-left-brand{display:block;padding:24px}.af-auth .auth-left-brand h2{font-size:28px!important;margin-bottom:10px!important}.af-auth .auth-left-brand h2 br{display:none}.af-auth .auth-left-brand a{margin-bottom:18px!important}.af-auth .auth-left-brand p,.af-auth .auth-feature-list,.af-auth .auth-left-brand>div:last-child,.af-auth-art{display:none}.af-auth .auth-right-form{padding:24px}.af-auth .auth-brand-pill{margin-bottom:14px}.af-auth .selection-grid{gap:10px}.af-auth .selection-card{flex-wrap:wrap;gap:6px}.af-auth .selection-icon{font-size:24px}.af-auth #gender_helper_text{max-width:150px;text-align:right;font-size:9px!important}}
@media(max-width:374px){.af-app .page-body{padding:10px}.af-brand-mark{display:none}.af-banner{padding:18px}.af-banner-art{display:none}.af-app .stats-grid{grid-template-columns:1fr}.af-app .profile-header-actions{max-width:155px}.af-app .profile-stats-bar{grid-template-columns:repeat(2,1fr)}.af-auth{padding:8px}.af-auth .auth-right-form{padding:18px}.af-auth .selection-card{padding:10px 7px}.af-home .landing-nav>a .brand-badge{display:none}}
@media(prefers-reduced-motion:reduce){.af-app *,.af-app *:before,.af-app *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Final composition and narrow-screen containment. */
.af-app .profile-avatar-wrapper{margin-top:0}.af-app .profile-avatar-row{margin-top:-48px;position:relative;z-index:2}.af-app .profile-header-actions{padding-top:60px}.af-app .profile-btn-primary,.af-app .profile-btn-secondary{border-radius:11px;box-shadow:none;min-height:44px}.af-app .profile-grid-layout>*{min-width:0}.af-home .hero-title span{background:none;-webkit-text-fill-color:#fff48c}.af-app .table-responsive{max-width:100%;overflow-x:auto}.af-home footer{padding:32px!important}.af-home footer :is(a,p,span){color:var(--af-muted)!important}.af-home footer h4{color:var(--af-text)!important}
@media(max-width:767px){.af-app .profile-grid-layout{grid-template-columns:minmax(0,1fr)}.af-app .profile-avatar-row{flex-direction:row;align-items:flex-end;margin-top:-38px;gap:10px}.af-app .profile-header-actions{width:auto;padding-top:45px;max-width:190px}.af-app .profile-stats-bar{grid-template-columns:repeat(2,minmax(0,1fr))}.af-app .profile-card-header{flex-wrap:wrap;gap:8px}.af-home footer>div{grid-template-columns:1fr 1fr!important;gap:20px!important;flex-wrap:wrap}.af-app .table{min-width:0!important;width:100%;table-layout:fixed}.af-app .table th,.af-app .table td{padding:9px 6px!important;font-size:10px!important;white-space:normal!important;overflow-wrap:anywhere}.af-app .table td [style*='display: flex']{flex-wrap:wrap}.af-app .page-body .card [style*='min-width: 200px']{min-width:0!important}.af-app .profile-card .profile-table{min-width:0;width:100%;table-layout:fixed}.af-app .profile-table th,.af-app .profile-table td{font-size:10px;padding:10px 5px;overflow-wrap:anywhere}.af-app .profile-card [style*='display: flex']{flex-wrap:wrap;gap:8px}.af-app .profile-header-body{padding-top:0}.af-home .hero-section .hero-title{font-size:36px}}
.af-exam-status>div:first-child>div{min-width:0}.af-exam-status>div:first-child>div:last-child{flex-wrap:wrap;justify-content:flex-start}.af-app .profile-card-title>.af-icon{width:18px;height:18px;vertical-align:middle;margin-right:5px;color:var(--profile-primary)}
@media(max-width:767px){.af-result [style*='display: flex']{flex-wrap:wrap;gap:10px}.af-app .page-body [style*='grid-template-columns: 1fr 1fr']{grid-template-columns:repeat(2,minmax(0,1fr))!important}.af-app .page-body [style*='grid-template-columns: 1fr 1fr']>*{min-width:0}}
.af-mobile-learning{display:none}.af-app .afirin-achievements{--ach-card-bg:var(--af-card);--ach-card-border:var(--af-border);--ach-text-main:var(--af-text);--ach-text-muted:var(--af-muted)}.af-app .ach-hero{background:linear-gradient(110deg,#fff2c8,#ffead9);border:1px solid #f0dfb7;border-radius:22px;padding:30px}.af-app .ach-hero-title{color:#775018;background:none;-webkit-text-fill-color:currentColor;text-shadow:none}.af-app .ach-hero-subtitle{color:#79633f}.af-app .ach-hud-card,.af-app .ach-showcase-shelf,.af-app .ach-card{border-radius:18px;box-shadow:var(--shadow-sm)}
html[data-theme=dark] .af-app .ach-hero{background:linear-gradient(110deg,#443a29,#463036);border-color:var(--af-border)}html[data-theme=dark] .af-app .ach-hero-title,html[data-theme=dark] .af-app .ach-hero-subtitle{color:#f3dfb4}
@media(max-width:767px){.af-mobile-learning{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}.af-mobile-learning a{padding:9px;background:var(--af-bg);color:var(--af-text);border-radius:10px;font-size:11px;font-weight:700;text-align:center}.af-app .ach-hud-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.af-app .ach-hud-card{padding:14px;min-width:0}}
html[data-theme] .af-app .afirin-profile{--profile-card-bg:var(--af-card);--profile-card-border:var(--af-border);--profile-text-main:var(--af-text);--profile-text-muted:var(--af-muted)}
html[data-theme] .af-app .afirin-quiz{--quiz-card-bg:var(--af-card);--quiz-card-border:var(--af-border);--quiz-text-main:var(--af-text);--quiz-text-muted:var(--af-muted);--quiz-hud-bg:var(--af-card);--quiz-btn-bg:var(--af-card);background:transparent;padding:0}
html[data-theme=dark] .af-app .afirin-profile[data-profile-theme=blue]{--profile-primary:#83b8ff;--profile-primary-soft:#244369}html[data-theme=dark] .af-app .afirin-profile[data-profile-theme=pink]{--profile-primary:#ffa3d1;--profile-primary-soft:#54334c}html[data-theme=dark] .af-app .afirin-profile[data-profile-theme=purple]{--profile-primary:#c7acff}html[data-theme=dark] .af-app .afirin-profile[data-profile-theme=teal]{--profile-primary:#72d9ce}html[data-theme=dark] .af-app .afirin-profile[data-profile-theme=green]{--profile-primary:#74dfb5}html[data-theme=dark] .af-app .afirin-profile[data-profile-theme=sky]{--profile-primary:#80d7fc}
html[data-theme=dark] .af-app .profile-btn-primary{background:#2b619e;color:#fff}html[data-theme=dark] .af-app .afirin-profile[data-profile-theme=pink] .profile-btn-primary{background:#9e3d76}html[data-theme=dark] .af-app .profile-cover-default{background:linear-gradient(110deg,#25416a,var(--profile-accent))}
@media(max-width:1023px){.af-app .arena-layout{display:flex;flex-direction:column}.af-app .arena-layout>.side-nav-card{order:2;width:100%}.af-app .arena-layout>.main-arena-col{order:1;width:100%;min-width:0}.af-app .main-arena-col{display:flex;flex-direction:column}.af-app .main-arena-col>.arena-hud{order:0}.af-app .main-arena-col>.timer-bar-container{order:1}.af-app .main-arena-col>.question-card{order:2}.af-app .main-arena-col>.answers-grid{order:3}.af-app .main-arena-col>.feedback-card{order:4}.af-app .main-arena-col>.lifelines-bar{order:5}.af-app .main-arena-col>.lifeline-panel{order:6}.af-app .main-arena-col>.next-question-wrap{order:7}.af-app .lifelines-bar{margin-top:18px}.af-app .question-text{font-size:18px}.af-app .arena-hud{padding:12px;gap:12px}.af-app .hud-label{font-size:9px}.af-app .hud-value{font-size:13px}}

/* ==========================================================================
   AFIRIN SOCIAL LEARNING FEED THEME (feed.png Recreation)
   ========================================================================== */
.af-social-home {
    background: #f0f6fc;
    color: #1e293b;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Global Sticky Header */
.af-feed-header {
    height: 70px;
    background: #ffffff;
    border-bottom: 1px solid #e2eaf2;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}
.af-feed-header-inner {
    max-width: 1560px;
    margin: 0 auto;
    padding: 0 24px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.af-header-left {
    display: flex;
    align-items: center;
    gap: 28px;
}
.af-header-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #1e293b;
}
/* Shared Afirin Nav Brand (exact parity with /subjects) */
.af-nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
}
.af-nav-brand-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.af-nav-brand .af-brand-title {
    font-size: 20px;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -0.4px;
    display: block;
    line-height: 1.1;
}
.af-nav-brand .af-brand-tagline {
    font-size: 9px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    display: block;
}
.af-brand-icon-wrap {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--af-primary-gradient, linear-gradient(135deg, var(--af-primary) 0%, var(--af-primary-hover) 100%));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--af-primary-text, #ffffff);
    font-size: 20px;
    box-shadow: 0 3px 8px var(--af-primary-glow, rgba(37, 99, 235, 0.25));
}
.af-brand-text {
    display: flex;
    flex-direction: column;
}
.af-brand-title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #1e293b;
    line-height: 1.1;
}
.af-brand-title span {
    color: #fa470d;
}
.af-brand-subtitle {
    font-size: 9px;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.5px;
}
.af-header-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}
.af-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    transition: all 0.15s ease;
}
.af-nav-item svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.2;
    color: #64748b;
}
.af-nav-item:hover {
    color: var(--af-primary-hover);
    background: var(--af-primary-soft, #f1f5f9);
}
.af-nav-item:hover svg {
    color: var(--af-primary-hover);
}
.af-nav-item.active {
    color: var(--af-primary);
    background: var(--af-primary-soft, #f1f5f9);
}
.af-nav-item.active svg {
    color: var(--af-primary);
}

/* Header Right Controls */
.af-header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}
.af-search-box {
    position: relative;
    width: 250px;
}
.af-search-box svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: #94a3b8;
}
.af-search-input {
    width: 100%;
    height: 38px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 0 16px 0 38px;
    font-size: 12px;
    color: #1e293b;
    outline: none;
    transition: all 0.2s ease;
}
.af-search-input:focus {
    background: #ffffff;
    border-color: var(--af-primary);
    box-shadow: 0 0 0 3px var(--af-primary-focus, rgba(59, 130, 246, 0.15));
}
.af-notif-btn {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
}
.af-notif-btn:hover {
    background: var(--af-primary-soft, #f1f5f9);
    color: var(--af-primary);
}
.af-notif-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #ef4444;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
}
.af-user-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px 4px 4px;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    text-decoration: none;
    transition: all 0.15s ease;
}
.af-user-chip:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
}
.af-chip-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}
.af-chip-name {
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
}
.af-chip-points {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #fef3c7;
    color: #b45309;
    border-radius: 12px;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 800;
}

/* Guest Header Join Button & Modern Dropdown */
.af-guest-join-wrap {
    position: relative;
    display: inline-block;
}

.af-join-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 16px;
    border-radius: 999px;
    background: var(--af-primary, #fa470d);
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 14px var(--af-primary-glow, rgba(250, 71, 13, 0.35));
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.af-join-btn:hover,
.af-guest-join-wrap.open .af-join-btn {
    background: var(--af-primary-hover, #e03a04);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px var(--af-primary-glow, rgba(250, 71, 13, 0.45));
}

.af-join-chevron {
    transition: transform 0.2s ease;
}

.af-guest-join-wrap.open .af-join-chevron {
    transform: rotate(180deg);
}

.af-join-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 230px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 18px;
    box-shadow: 0 14px 34px -4px rgba(15, 23, 42, 0.12), 0 4px 12px -2px rgba(15, 23, 42, 0.08);
    padding: 8px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.97);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.af-guest-join-wrap.open .af-join-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.af-join-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    text-decoration: none;
    color: #1e293b;
    transition: all 0.15s ease;
}

.af-join-item:hover {
    background: var(--af-primary-soft, #fff4f0);
    color: var(--af-primary, #fa470d);
}

.af-join-item-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.af-join-icon-register {
    background: var(--af-primary-soft, #fff4f0);
    color: var(--af-primary, #fa470d);
}

.af-join-icon-login {
    background: #eff6ff;
    color: #2563eb;
}

.af-join-item:hover .af-join-item-icon {
    transform: scale(1.08);
}

.af-join-item-text {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.af-join-item-text strong {
    font-size: 13px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
}

.af-join-item:hover .af-join-item-text strong {
    color: var(--af-primary, #fa470d);
}

.af-join-item-text span {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    margin-top: 1px;
}

.af-join-divider {
    height: 1px;
    background: #f1f5f9;
    margin: 4px 6px;
}

/* Guest Sidebar Card */
.af-guest-sidebar-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 22px 14px;
}
.af-guest-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: var(--af-primary-soft, #fff4f0);
    color: var(--af-primary, #fa470d);
    display: grid;
    place-items: center;
    font-size: 24px;
    margin-bottom: 10px;
}
.af-guest-card-desc {
    font-size: 11.5px;
    color: #64748b;
    margin: 6px 0 12px;
    line-height: 1.45;
}

/* 3-Column Desktop Feed Layout */
.af-feed-container {
    max-width: 1560px;
    margin: 0 auto;
    padding: 20px 24px 30px;
    display: grid;
    grid-template-columns: 185px minmax(0, 1fr) 310px;
    gap: 20px;
    align-items: start;
    width: 100%;
}

/* LEFT COLUMN */
.af-left-rail {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.af-profile-card {
    background: #ffffff;
    border: 1px solid #e2eaf2;
    border-radius: 18px;
    padding: 20px 14px 16px;
    text-align: center;
    box-shadow: 0 4px 12px var(--af-primary-glow, rgba(37, 99, 235, 0.04));
}
.af-profile-avatar-wrap {
    position: relative;
    width: 68px;
    height: 68px;
    margin: 0 auto 10px;
}
.af-profile-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--af-primary-border, #e0f2fe);
}
.af-profile-name {
    font-size: 14px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 2px;
}
.af-profile-grade {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 6px;
}
.af-profile-country {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 12px;
}
.af-profile-level-row {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 4px;
}
.af-profile-bar {
    height: 6px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}
.af-profile-bar-fill {
    height: 100%;
    background: var(--af-primary-gradient, linear-gradient(90deg, var(--af-primary), var(--af-primary-hover)));
    border-radius: 999px;
}

/* Left Vertical Navigation */
.af-sidebar-nav {
    background: #ffffff;
    border: 1px solid #e2eaf2;
    border-radius: 18px;
    padding: 10px 8px;
    box-shadow: 0 4px 12px var(--af-primary-glow, rgba(37, 99, 235, 0.04));
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.af-side-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 12px;
    text-decoration: none;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    transition: all 0.15s ease;
}
.af-side-link svg {
    width: 17px;
    height: 17px;
    color: #64748b;
    stroke-width: 2.2;
    flex-shrink: 0;
    transition: color 0.15s ease;
}
.af-side-link:hover {
    background: var(--af-primary-soft, #f1f7ff);
    color: var(--af-primary);
}
.af-side-link:hover svg {
    color: var(--af-primary);
}
.af-side-link.active {
    background: var(--af-primary);
    color: var(--af-primary-text, #ffffff);
}
.af-side-link.active svg {
    color: var(--af-primary-text, #ffffff);
}

/* Left Motivational Mascot Card */
.af-left-mascot-card {
    background: linear-gradient(180deg, var(--af-primary-soft, #dbeafe) 0%, #ffffff 100%);
    border: 1px solid var(--af-primary-border, #bfdbfe);
    border-radius: 18px;
    padding: 16px 12px;
    text-align: center;
    box-shadow: 0 4px 12px var(--af-primary-glow, rgba(37, 99, 235, 0.04));
}
.af-mascot-trophy-icon {
    font-size: 32px;
    margin-bottom: 6px;
    display: block;
}
.af-mascot-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--af-primary-deep, #1e3a8a);
    line-height: 1.25;
    margin-bottom: 12px;
}
.af-mascot-img {
    width: 100%;
    max-width: 135px;
    margin: 0 auto;
    border-radius: 12px;
    display: block;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

/* CENTER COLUMN */
.af-feed-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* Center Hero Banner */
.af-center-hero {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(135deg, #0f172a 0%, var(--af-primary-deep, #1e3a8a) 100%);
    color: #ffffff;
    box-shadow: 0 6px 20px var(--af-primary-glow, rgba(37, 99, 235, 0.15));
    min-height: 175px;
    display: flex;
    align-items: center;
}
.af-hero-bg-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.38;
}
.af-hero-content {
    position: relative;
    z-index: 2;
    padding: 24px 32px;
    max-width: 600px;
}
.af-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    border: 1px solid var(--af-primary-border, rgba(255, 255, 255, 0.3));
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.af-hero-heading {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 6px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.af-hero-sub {
    font-size: 13px;
    font-weight: 600;
    color: #e0f2fe;
    margin-bottom: 16px;
}
.af-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--af-primary);
    color: var(--af-primary-text, #ffffff);
    border: 2px solid var(--af-primary);
    border-radius: 999px;
    padding: 10px 22px;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 4px 14px var(--af-primary-glow, rgba(37, 99, 235, 0.35));
    transition: all 0.2s ease;
}
.af-hero-cta:hover {
    background: var(--af-primary-hover);
    border-color: var(--af-primary-hover);
    color: var(--af-primary-text, #ffffff);
    transform: translateY(-1px);
}
.af-hero-cta:focus {
    box-shadow: 0 0 0 3px var(--af-primary-focus);
    outline: none;
}

/* Post Composer */
.af-composer {
    background: #ffffff;
    border: 1px solid #e2eaf2;
    border-radius: 18px;
    padding: 16px 20px;
    box-shadow: 0 4px 12px var(--af-primary-glow, rgba(37, 99, 235, 0.04));
}
.af-composer-top {
    display: flex;
    gap: 12px;
    align-items: center;
}
.af-composer-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.af-composer-input {
    flex: 1;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 11px 18px;
    font-size: 13px;
    color: #1e293b;
    outline: none;
    transition: all 0.2s ease;
}
.af-composer-input:focus {
    background: #ffffff;
    border-color: var(--af-primary);
    box-shadow: 0 0 0 3px var(--af-primary-focus, rgba(59, 130, 246, 0.12));
}
.af-composer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
    flex-wrap: wrap;
    gap: 10px;
}
.af-composer-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.af-action-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 8px;
    transition: all 0.15s ease;
}
.af-action-pill:hover {
    background: #f1f5f9;
    color: #1e293b;
}
.af-action-pill.photo svg { color: #10b981; }
.af-action-pill.question svg { color: #8b5cf6; }
.af-action-pill.progress svg { color: #0284c7; }
.af-action-pill.feeling svg { color: #f59e0b; }
.af-composer-post-btn {
    background: var(--af-primary);
    color: var(--af-primary-text, #ffffff);
    border: none;
    border-radius: 20px;
    padding: 7px 22px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.15s ease;
}
.af-composer-post-btn:hover {
    background: var(--af-primary-hover);
}

/* Feed Filter Tabs */
.af-feed-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 0;
}
.af-tab-btn {
    background: #ffffff;
    border: 1px solid #e2eaf2;
    border-radius: 20px;
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.15s ease;
}
.af-tab-btn:hover {
    color: var(--af-primary);
    border-color: var(--af-primary-border, #bfdbfe);
    background: var(--af-primary-soft, #eff6ff);
}
.af-tab-btn.active {
    background: var(--af-primary);
    color: var(--af-primary-text, #ffffff);
    border-color: var(--af-primary);
    box-shadow: 0 2px 8px var(--af-primary-glow, rgba(37, 99, 235, 0.2));
}

/* Main Activity Feed Card */
.af-feed-card {
    background: #ffffff;
    border: 1px solid #e2eaf2;
    border-radius: 18px;
    padding: 18px 20px;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.04);
}
.af-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}
.af-card-author {
    display: flex;
    align-items: center;
    gap: 10px;
}
.af-author-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}
.af-author-meta {
    display: flex;
    flex-direction: column;
}
.af-author-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.af-author-name {
    font-size: 13px;
    font-weight: 800;
    color: #1e293b;
}
.af-level-badge {
    background: #fef3c7;
    color: #b45309;
    border-radius: 10px;
    padding: 2px 7px;
    font-size: 10px;
    font-weight: 800;
}
.af-post-time {
    font-size: 11px;
    color: #94a3b8;
}
.af-card-menu-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 18px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
}
.af-card-menu-btn:hover {
    background: #f1f5f9;
    color: #475569;
}
.af-post-content {
    font-size: 13px;
    line-height: 1.55;
    color: #334155;
    margin-bottom: 10px;
}
.af-hashtag {
    display: inline-block;
    background: var(--af-primary-soft, #eff6ff);
    color: var(--af-primary);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 12px;
}
.af-post-media-wrap {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    margin-bottom: 14px;
    background: #f8fafc;
}
.af-post-media-img {
    width: 100%;
    max-height: 380px;
    object-fit: cover;
    display: block;
}
.af-post-stats-row {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 0;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
}
.af-stat-item {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}
.af-stat-item:hover {
    color: var(--af-primary);
}
.af-comment-box {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}
.af-comment-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}
.af-comment-input-wrap {
    flex: 1;
    position: relative;
}
.af-comment-input {
    width: 100%;
    height: 36px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 0 38px 0 14px;
    font-size: 12px;
    color: #1e293b;
    outline: none;
}
.af-comment-input:focus {
    border-color: var(--af-primary);
    background: #ffffff;
    box-shadow: 0 0 0 3px var(--af-primary-focus);
}
.af-comment-send-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--af-primary);
    color: var(--af-primary-text, #ffffff);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}
.af-comment-send-btn:hover {
    background: var(--af-primary-hover);
}
.af-comment-send-btn svg {
    width: 13px;
    height: 13px;
}

/* Latest Questions Section */
.af-section-card {
    background: #ffffff;
    border: 1px solid #e2eaf2;
    border-radius: 18px;
    padding: 18px 20px;
    box-shadow: 0 4px 12px var(--af-primary-glow, rgba(37, 99, 235, 0.04));
}
.af-section-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.af-section-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 800;
    color: #151d48;
    margin: 0;
    letter-spacing: -0.2px;
}
.af-section-heading svg {
    width: 20px;
    height: 20px;
    color: var(--af-primary);
    flex-shrink: 0;
}
.af-heading-bubble-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--af-primary);
}
.af-view-all-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--af-primary);
    text-decoration: none;
    transition: color 0.15s ease;
}
.af-view-all-link:hover {
    color: var(--af-primary-hover);
    text-decoration: underline;
}

/* Latest Questions Row (Pixel-matched) */
.af-question-list {
    display: flex;
    flex-direction: column;
}
.af-question-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid #f1f5f9;
    transition: background-color 0.12s ease;
}
.af-question-row:last-child {
    border-bottom: none;
    padding-bottom: 2px;
}
.af-question-row:first-child {
    padding-top: 2px;
}
.af-q-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.af-q-icon-box.math {
    background: #f43f5e;
}
.af-q-icon-box.science {
    background: #22c55e;
}
.af-q-icon-box.english {
    background: #0ea5e9;
}
.af-q-icon-box.social {
    background: #f97316;
}
.af-q-icon-box.ict {
    background: #7c3aed;
}
.af-q-subject-label {
    width: 110px;
    min-width: 110px;
    font-size: 14px;
    font-weight: 800;
    color: #151d48;
    flex-shrink: 0;
}
.af-q-content-box {
    flex: 1;
    min-width: 0;
    padding-right: 12px;
}
.af-q-text {
    font-size: 14px;
    font-weight: 700;
    color: #151d48;
    line-height: 1.35;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.af-q-time {
    font-size: 12px;
    font-weight: 500;
    color: #94a3b8;
}
.af-q-answer-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--af-primary-soft, #dbeafe);
    color: var(--af-primary);
    font-size: 13.5px;
    font-weight: 700;
    border-radius: 9999px;
    padding: 8px 24px;
    text-decoration: none;
    min-width: 90px;
    flex-shrink: 0;
    border: 1px solid var(--af-primary-border, transparent);
    transition: all 0.15s ease;
}
.af-q-answer-pill:hover {
    background: var(--af-primary);
    color: var(--af-primary-text, #ffffff);
    border-color: var(--af-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px var(--af-primary-glow);
}

/* Popular Practice Sessions Cards (Pixel-matched) */
.af-practice-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.af-prac-card {
    border-radius: 18px;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 148px;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.af-prac-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
}
.af-prac-card.pink {
    background: #fff1f2;
    border: 1px solid #ffe4e6;
}
.af-prac-card.green {
    background: #f0fdf4;
    border: 1px solid #dcfce7;
}
.af-prac-card.purple {
    background: #faf5ff;
    border: 1px solid #f3e8ff;
}
.af-prac-card.orange {
    background: #fffbeb;
    border: 1px solid #fef3c7;
}
.af-prac-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.af-prac-badge {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}
.af-prac-badge.pink {
    background: #f43f5e;
}
.af-prac-badge.green {
    background: #22c55e;
}
.af-prac-badge.purple {
    background: #7c3aed;
}
.af-prac-badge.orange {
    background: #f97316;
}
.af-prac-badge-b {
    color: #ffffff;
    font-size: 17px;
    font-weight: 800;
    font-family: inherit;
    line-height: 1;
}
.af-prac-header-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.af-prac-sub-title {
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
}
.af-prac-sub-title.pink {
    color: #f43f5e;
}
.af-prac-sub-title.green {
    color: #16a34a;
}
.af-prac-sub-title.purple {
    color: #7c3aed;
}
.af-prac-sub-title.orange {
    color: #ea580c;
}
.af-prac-main-title {
    font-size: 14px;
    font-weight: 800;
    color: #151d48;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.af-prac-metric-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 12px;
}
.af-prac-join-btn {
    display: block;
    width: 100%;
    text-align: center;
    border-radius: 10px;
    padding: 7.5px 0;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}
.af-prac-join-btn.pink {
    background: #f472b6;
}
.af-prac-join-btn.pink:hover {
    background: #ec4899;
}
.af-prac-join-btn.cyan {
    background: #38bdf8;
}
.af-prac-join-btn.cyan:hover {
    background: #0ea5e9;
}
.af-prac-join-btn.purple {
    background: #a855f7;
}
.af-prac-join-btn.purple:hover {
    background: #9333ea;
}
.af-prac-join-btn.blue {
    background: #2563eb;
}
.af-prac-join-btn.blue:hover {
    background: #1d4ed8;
}

@media (max-width: 900px) {
    .af-practice-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .af-q-subject-label {
        width: 85px;
        min-width: 85px;
        font-size: 13px;
    }
}
@media (max-width: 640px) {
    .af-practice-grid {
        grid-template-columns: 1fr;
    }
    .af-question-row {
        gap: 10px;
    }
    .af-q-subject-label {
        display: none;
    }
}

/* RIGHT COLUMN */
.af-right-rail {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Right Top Motivational Quote Card */
.af-motivation-card {
    background: linear-gradient(135deg, #e0f2fe 0%, #fef3c7 100%);
    border: 1px solid #bae6fd;
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.04);
}
.af-quote-text {
    font-size: 14px;
    font-weight: 800;
    color: #1e3a8a;
    line-height: 1.25;
    margin-bottom: 12px;
}
.af-sticky-note {
    background: #fef08a;
    border-radius: 10px;
    padding: 12px 14px;
    transform: rotate(-1.5deg);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
    font-size: 12px;
    font-weight: 800;
    color: #854d0e;
    line-height: 1.35;
}

/* My Progress Card */
.af-progress-card {
    background: #ffffff;
    border: 1px solid #e2eaf2;
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.04);
}
.af-progress-dial-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}
.af-progress-circle-wrap {
    position: relative;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
}
.af-progress-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.af-circle-bg {
    fill: none;
    stroke: #e2e8f0;
    stroke-width: 6;
}
.af-circle-fill {
    fill: none;
    stroke: var(--af-primary);
    stroke-width: 6;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s ease;
}
.af-circle-pct {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    color: #1e293b;
}
.af-progress-details {
    min-width: 0;
}
.af-progress-lvl-title {
    font-size: 14px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 2px;
}
.af-progress-pts-sub {
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
}
.af-progress-pills-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
    text-align: center;
}
.af-stat-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.af-pill-val {
    font-size: 12px;
    font-weight: 800;
    color: #1e293b;
}
.af-pill-label {
    font-size: 9px;
    color: #64748b;
    font-weight: 700;
}

/* Top Kids This Week Leaderboard */
.af-widget-card {
    background: #ffffff;
    border: 1px solid #e2eaf2;
    border-radius: 18px;
    padding: 16px 18px;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.04);
}
.af-leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.af-leaderboard-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
}
.af-lb-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.af-lb-rank {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    flex-shrink: 0;
}
.af-lb-rank.gold { background: #fef3c7; color: #b45309; }
.af-lb-rank.silver { background: #f1f5f9; color: #475569; }
.af-lb-rank.bronze { background: #fed7aa; color: #c2410c; }
.af-lb-rank.plain { background: #f8fafc; color: #64748b; }
.af-lb-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}
.af-lb-name {
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
}
.af-lb-score {
    font-size: 11px;
    font-weight: 800;
    color: #475569;
}

/* New Kids Card */
.af-new-kids-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    text-align: center;
}
.af-new-kid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.af-new-kid-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
}
.af-new-kid-name {
    font-size: 11px;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 58px;
}
.af-new-kid-country {
    font-size: 9px;
    color: #64748b;
    white-space: nowrap;
}
.af-kid-follow-btn {
    background: #ffffff;
    border: 1px solid var(--af-primary-border, #bfdbfe);
    color: var(--af-primary);
    border-radius: 12px;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 700;
    text-decoration: none;
    margin-top: 2px;
    transition: all 0.15s ease;
}
.af-kid-follow-btn:hover {
    background: var(--af-primary);
    color: var(--af-primary-text, #ffffff);
    border-color: var(--af-primary);
}

/* AI Study Buddy Card */
.af-study-buddy-card {
    background: linear-gradient(135deg, #e0e7ff 0%, #f3e8ff 100%);
    border: 1px solid #c7d2fe;
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.04);
}
.af-buddy-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.af-buddy-heading {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 800;
    color: #4338ca;
}
.af-buddy-img {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    object-fit: cover;
}
.af-buddy-title {
    font-size: 15px;
    font-weight: 800;
    color: #312e81;
    margin-bottom: 4px;
}
.af-buddy-desc {
    font-size: 11px;
    color: #4b5563;
    line-height: 1.4;
    margin-bottom: 12px;
}
.af-buddy-pills-row {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}
.af-buddy-chip {
    background: #ffffff;
    border: 1px solid #e0e7ff;
    border-radius: 8px;
    padding: 5px 9px;
    font-size: 10px;
    font-weight: 700;
    color: #4338ca;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
}
.af-buddy-input-wrap {
    position: relative;
}
.af-buddy-input {
    width: 100%;
    height: 36px;
    background: #ffffff;
    border: 1px solid #c7d2fe;
    border-radius: 18px;
    padding: 0 36px 0 12px;
    font-size: 11px;
    color: #1e293b;
    outline: none;
}
.af-buddy-input:focus {
    border-color: var(--af-primary);
    box-shadow: 0 0 0 3px var(--af-primary-focus);
}
.af-buddy-send-btn {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--af-primary);
    color: var(--af-primary-text, #ffffff);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}
.af-buddy-send-btn:hover {
    background: var(--af-primary-hover);
}
.af-buddy-send-btn svg {
    width: 12px;
    height: 12px;
}

/* Today's Challenge Widget */
.af-challenge-card {
    background: #ffffff;
    border: 1px solid #e2eaf2;
    border-radius: 18px;
    padding: 16px 18px;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.04);
}
.af-challenge-body {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 10px 0;
}
.af-challenge-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #ffedd5;
    color: #ea580c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.af-challenge-desc {
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.35;
}
.af-challenge-bar-row {
    margin: 10px 0 14px;
}
.af-challenge-bar {
    height: 7px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 4px;
}
.af-challenge-fill {
    width: 35%;
    height: 100%;
    background: var(--af-primary);
    border-radius: 999px;
}
.af-challenge-count {
    font-size: 10px;
    font-weight: 800;
    color: #64748b;
    text-align: right;
}
.af-challenge-cta {
    display: block;
    width: 100%;
    background: var(--af-primary);
    color: var(--af-primary-text, #ffffff);
    text-align: center;
    border-radius: 10px;
    padding: 9px;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    border: 1px solid var(--af-primary);
    box-shadow: 0 3px 8px var(--af-primary-glow);
    transition: all 0.15s ease;
}
.af-challenge-cta:hover {
    background: var(--af-primary-hover);
    border-color: var(--af-primary-hover);
    color: var(--af-primary-text, #ffffff);
}

/* Bottom Celebratory Footer Banner */
.af-bottom-banner {
    max-width: 1560px;
    margin: 10px auto 40px;
    padding: 0 24px;
    width: 100%;
}
.af-bottom-banner-card {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(180deg, #dbeafe 0%, #bbf7d0 100%);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.08);
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 48px;
}
.af-bottom-banner-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
}
.af-bottom-banner-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    flex-wrap: wrap;
    gap: 20px;
}
.af-bottom-left-tag {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    border-radius: 16px;
    padding: 14px 22px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.af-bottom-left-tag h3 {
    font-size: 18px;
    font-weight: 800;
    color: #1e3a8a;
    margin: 0;
}
.af-bottom-left-tag p {
    font-size: 12px;
    font-weight: 700;
    color: var(--af-primary);
    margin: 2px 0 0;
}
.af-bottom-right-note {
    background: #fef08a;
    border-radius: 12px;
    padding: 12px 20px;
    transform: rotate(2deg);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    font-size: 14px;
    font-weight: 800;
    color: #854d0e;
    text-align: center;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media (max-width: 1279px) {
    .af-feed-container {
        grid-template-columns: 180px minmax(0, 1fr);
    }
    .af-right-rail {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .af-study-buddy-card, .af-bottom-banner {
        grid-column: 1 / -1;
    }
}

@media (max-width: 991px) {
    .af-feed-header-inner {
        padding: 0 16px;
    }
    .af-header-nav {
        display: none;
    }
    .af-search-box {
        width: 180px;
    }
    .af-feed-container {
        grid-template-columns: 1fr;
        padding: 14px 16px;
    }
    .af-left-rail {
        display: none;
    }
    .af-right-rail {
        grid-template-columns: 1fr;
    }
    .af-practice-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .af-bottom-banner-card {
        padding: 24px;
    }
}

@media (max-width: 576px) {
    .af-search-box {
        display: none;
    }
    .af-chip-points {
        display: none;
    }
    .af-center-hero {
        min-height: 150px;
    }
    .af-hero-content {
        padding: 18px;
    }
    .af-hero-heading {
        font-size: 22px;
    }
    .af-practice-grid {
        grid-template-columns: 1fr;
    }
    .af-bottom-banner-content {
        flex-direction: column;
        text-align: center;
    }
}

/* Scoped Bootstrap utilities for themed homepage */
.af-social-home .btn-primary {
    --bs-btn-bg: var(--af-primary);
    --bs-btn-border-color: var(--af-primary);
    --bs-btn-hover-bg: var(--af-primary-hover);
    --bs-btn-hover-border-color: var(--af-primary-hover);
    --bs-btn-active-bg: var(--af-primary-deep);
    --bs-btn-active-border-color: var(--af-primary-deep);
    --bs-btn-color: var(--af-primary-text);
    --bs-btn-hover-color: var(--af-primary-text);
    --bs-btn-focus-shadow-rgb: var(--af-primary-rgb);
    background-color: var(--af-primary);
    border-color: var(--af-primary);
    color: var(--af-primary-text);
}
.af-social-home .text-primary {
    color: var(--af-primary) !important;
}
.af-social-home .bg-primary {
    background-color: var(--af-primary) !important;
}
.af-social-home .border-primary {
    border-color: var(--af-primary) !important;
}

/* Authenticated User Header Dropdown */
.af-header-user-wrap {
    position: relative;
    display: inline-block;
}
.af-chip-chevron,
.af-pill-chevron {
    font-size: 11px;
    color: #94a3b8;
    margin-left: 2px;
    transition: transform 0.2s ease;
}
.af-header-user-wrap:hover .af-chip-chevron,
.af-header-user-wrap:hover .af-pill-chevron {
    transform: rotate(180deg);
}
.af-header-user-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 180px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
    padding: 6px;
    z-index: 1000;
}
.af-header-user-wrap:hover .af-header-user-dropdown,
.af-header-user-wrap:focus-within .af-header-user-dropdown {
    display: block;
}
.af-user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    text-decoration: none;
    border-radius: 8px;
    background: transparent;
    border: none;
    width: 100%;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: all 0.15s ease;
}
.af-user-dropdown-item:hover {
    background: #f8fafc;
    color: #1e293b;
}
.af-user-dropdown-item svg {
    color: #64748b;
    flex-shrink: 0;
}
.af-user-dropdown-divider {
    height: 1px;
    background: #f1f5f9;
    margin: 4px 0;
}
.af-dropdown-logout-form {
    margin: 0;
    padding: 0;
}
.af-user-dropdown-item.af-user-dropdown-logout {
    color: #ef4444;
}
.af-user-dropdown-item.af-user-dropdown-logout svg {
    color: #ef4444;
}
.af-user-dropdown-item.af-user-dropdown-logout:hover {
    background: #fef2f2;
    color: #dc2626;
}
.af-user-dropdown-item.af-user-dropdown-logout:hover svg {
    color: #dc2626;
}

/* Sidebar Logout Button */
.af-side-logout-form,
.af-rail-logout-form {
    margin: 0;
    padding: 0;
    width: 100%;
}
.af-side-link.af-side-link-logout,
.af-rail-item.af-rail-item-logout {
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    color: #ef4444 !important;
}
.af-side-link.af-side-link-logout svg,
.af-rail-item.af-rail-item-logout svg {
    color: #ef4444 !important;
}
.af-side-link.af-side-link-logout:hover,
.af-rail-item.af-rail-item-logout:hover {
    background: #fef2f2 !important;
    color: #dc2626 !important;
}
.af-side-link.af-side-link-logout:hover svg,
.af-rail-item.af-rail-item-logout:hover svg {
    color: #dc2626 !important;
}