[hidden], .modal-backdrop[hidden], .word-popover[hidden] {
  display: none !important;
}
:root{color-scheme:light;--ink:#17262c;--muted:#77868b;--paper:#f5f6f3;--card:#fff;--line:#e4e9e6;--forest:#173c36;--green:#a7d5bd;--mint:#e7f3eb;--amber:#eead62;--amber-soft:#fcf1e4;--coral:#cb735c;--shadow:0 12px 40px rgba(23,45,38,.07);--arabic:"IBM Plex Sans Arabic",sans-serif;--latin:"DM Sans",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.6 var(--arabic)}button,input,select{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--amber);outline-offset:2px}.app-shell{min-height:100vh}.rail{position:fixed;inset:0 auto 0 0;width:228px;background:var(--forest);color:#eff7f2;padding:25px 17px;display:flex;flex-direction:column;z-index:5}.brand{display:flex;align-items:center;gap:11px;padding:4px 8px 42px}.brand-mark{width:42px;height:42px;border-radius:14px;background:#c0dfca;color:var(--forest);display:grid;place-items:center;font-size:26px;font-weight:700}.brand-name{font-weight:700;font-size:18px;letter-spacing:.02em}.brand-name small{display:block;font:700 9px var(--latin);letter-spacing:.15em;color:#a9c9b7}.rail-nav{display:grid;gap:7px}.rail-nav a{display:flex;align-items:center;gap:13px;color:#b5c9bd;border-radius:12px;padding:11px 12px;font-size:14px;transition:.2s}.rail-nav a i{width:22px;text-align:center;font-style:normal;font-size:20px}.rail-nav a:hover,.rail-nav a.active{background:#ffffff17;color:white}.rail-nav a.active:before{content:"";position:absolute;right:0;width:3px;height:27px;border-radius:3px;background:var(--amber)}.rail-bottom{margin-top:auto;color:#a3c0af;font-size:11px;display:flex;align-items:center;gap:8px;padding:10px}.pulse-dot{width:7px;height:7px;border-radius:50%;background:#7fcca0;box-shadow:0 0 0 4px #7fcca022}.main-area{margin-left:228px;min-height:100vh;display:flex;flex-direction:column}.topbar{height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,4vw,60px);border-bottom:1px solid var(--line);background:#f8f9f6cc;backdrop-filter:blur(18px);position:sticky;top:0;z-index:4}.breadcrumbs{display:flex;align-items:center;gap:12px;font:600 11px var(--latin);letter-spacing:.11em;color:#9ba6a5}.breadcrumbs b{font-weight:400;color:#c4cbc7}.breadcrumbs strong{font:600 13px var(--arabic);letter-spacing:0;color:var(--ink)}.top-tools{display:flex;align-items:center;gap:17px}.today-label{font-size:12px;color:#5f716f}.today-label i{display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--amber);vertical-align:middle;margin:0 8px}.icon-button{border:1px solid var(--line);width:34px;height:34px;border-radius:10px;background:white;color:var(--forest)}.page-wrap{width:min(1250px,100%);margin:0 auto;padding:30px clamp(20px,4vw,60px) 52px;flex:1}.site-footer{text-align:center;color:#a1aaa8;font-size:11px;padding:14px}.site-footer span{color:var(--amber);padding:0 5px}.loading{min-height:45vh;display:grid;place-content:center;gap:12px;color:var(--muted);text-align:center}.spinner{margin:auto;width:24px;height:24px;border:2px solid #d8e3dc;border-top-color:var(--forest);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.eyebrow{font:700 10px var(--latin);letter-spacing:.16em;text-transform:uppercase;color:#8ba095}.welcome-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:6px 0 24px}.welcome-row h1{font-size:clamp(27px,3vw,38px);line-height:1.25;margin:6px 0 8px;letter-spacing:-.04em}.welcome-row p{color:var(--muted);margin:0;font-size:14px}.date-chip{padding:8px 12px;background:white;border:1px solid var(--line);border-radius:10px;color:#63756c;font-size:12px;white-space:nowrap}.hero-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(230px,.85fr);gap:15px;margin-bottom:16px}.hero-card{position:relative;overflow:hidden;min-height:244px;border-radius:20px;background:var(--forest);color:#f3f8f3;padding:27px 30px;display:flex;flex-direction:column;justify-content:space-between}.hero-card:after{content:"";position:absolute;width:280px;height:280px;left:-35px;bottom:-170px;border:1px solid #ffffff20;border-radius:50%;box-shadow:0 0 0 30px #ffffff08,0 0 0 65px #ffffff06}.hero-kicker{color:#bdd4c3;font-size:11px;letter-spacing:.1em}.hero-card h2{font-size:28px;line-height:1.35;margin:10px 0 8px;max-width:430px}.hero-card p{color:#c0d2c7;margin:0;font-size:13px}.hero-cta{margin-top:19px;align-self:flex-start;position:relative;z-index:1}.btn{border:1px solid var(--line);background:white;color:var(--ink);padding:9px 14px;border-radius:10px;font-size:13px;transition:transform .18s,background .18s,border-color .18s}.btn:hover{transform:translateY(-1px);border-color:#adcbb9}.btn.primary{background:var(--amber);border-color:var(--amber);color:#2a281f;font-weight:700}.btn.primary:hover{background:#f5bb7a}.btn.dark{background:var(--forest);color:white;border-color:var(--forest)}.btn.small{padding:6px 10px;font-size:12px}.continue-card{background:var(--amber-soft);border:1px solid #f5e4ce;border-radius:20px;padding:22px;display:flex;flex-direction:column;justify-content:space-between;min-height:244px}.continue-card .eyebrow{color:#a27042}.continue-card h3{font-size:18px;margin:10px 0 5px}.continue-card p{color:#897c6b;font-size:12px;margin:0}.continue-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:19px}.round-progress{width:47px;height:47px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--coral) var(--progress,0%),#f1dfcc 0);position:relative;font:700 10px var(--latin);color:#734b39}.round-progress:before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--amber-soft)}.round-progress span{position:relative}.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 33px}.stat-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:15px 18px;display:flex;align-items:center;gap:13px}.stat-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--mint);color:var(--forest);font-size:17px}.stat-icon.amber{background:var(--amber-soft);color:#a76830}.stat-card b{display:block;font:700 19px var(--latin);letter-spacing:-.03em}.stat-card small{color:var(--muted);font-size:11px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:10px;margin:0 0 13px}.section-heading h2{margin:3px 0 0;font-size:20px}.section-heading> a,.text-link{font-size:12px;color:#587a65}.subject-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.subject-card{--subject-accent:var(--forest);background:var(--card);border:1px solid var(--line);border-radius:16px;padding:17px;min-height:148px;display:flex;flex-direction:column;transition:.2s;position:relative;overflow:hidden}.subject-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#c4d8cb}.subject-card:before{content:"";position:absolute;inset:auto -16px -27px auto;width:82px;height:82px;border:1px solid color-mix(in srgb,var(--subject-accent),transparent 80%);border-radius:50%;box-shadow:0 0 0 13px color-mix(in srgb,var(--subject-accent),transparent 96%)}.subject-top{display:flex;align-items:center;justify-content:space-between}.subject-icon{width:35px;height:35px;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--subject-accent),white 91%);color:var(--subject-accent);font-size:18px}.subject-code{font:700 10px var(--latin);letter-spacing:.12em;color:#99a7a0}.subject-card h3{font-size:14px;margin:13px 0 2px}.subject-card p{color:var(--muted);font-size:11px;margin:0}.mini-bar{height:4px;background:#edf0ed;border-radius:5px;margin-top:auto;overflow:hidden}.mini-bar span{display:block;height:100%;background:var(--subject-accent);border-radius:5px}.subfoot{display:flex;justify-content:space-between;margin-top:6px;color:#94a19b;font:10px var(--latin)}.two-panel{display:grid;grid-template-columns:1.1fr .9fr;gap:15px;margin-top:30px}.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:19px}.panel h3{margin:0 0 13px;font-size:15px}.method-list{display:grid;gap:12px}.method{display:flex;gap:11px;align-items:flex-start}.method-num{width:25px;height:25px;border-radius:8px;background:#edf4ef;color:#557864;display:grid;place-items:center;font:700 11px var(--latin);flex:none}.method b{display:block;font-size:12px}.method small{display:block;color:var(--muted);font-size:11px;margin-top:2px}.week-card{background:#f8faf7;border:1px solid var(--line);border-radius:12px;padding:13px;margin-bottom:8px}.week-card:last-child{margin:0}.week-card b{font-size:12px}.week-card p{font-size:11px;color:var(--muted);margin:4px 0 0}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:15px 0}.search{border:1px solid var(--line);background:white;border-radius:10px;padding:9px 13px;min-width:230px;flex:1;color:var(--ink)}.filters{display:flex;gap:6px;flex-wrap:wrap}.filter-chip{padding:7px 11px;border:1px solid var(--line);border-radius:999px;background:white;color:#687a71;font-size:11px}.filter-chip.active{background:var(--forest);border-color:var(--forest);color:white}.study-layout{display:grid;grid-template-columns:275px minmax(0,1fr);gap:15px;align-items:start}.pack-list{background:white;border:1px solid var(--line);border-radius:15px;overflow:hidden;max-height:calc(100vh - 150px);overflow-y:auto}.pack-list-head{padding:14px;border-bottom:1px solid var(--line);position:sticky;top:0;background:white;z-index:1}.pack-list-head b{font-size:13px}.pack-list-head small{display:block;color:var(--muted);font-size:10px}.pack-item{width:100%;border:0;border-bottom:1px solid #f0f2ef;text-align:right;background:white;padding:11px 13px;display:flex;align-items:center;gap:10px;color:var(--ink)}.pack-item:hover,.pack-item.active{background:#f1f6f2}.pack-item.active{box-shadow:inset -3px 0 var(--forest)}.pack-item .n{width:27px;height:27px;background:#f1f4f1;border-radius:8px;display:grid;place-items:center;font:700 10px var(--latin);color:#819087;flex:none}.pack-item.active .n{background:var(--forest);color:white}.pack-item b{font-size:11px;display:block}.pack-item small{font:10px var(--latin);color:#9aa5a0}.study-main{min-width:0}.study-intro{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:4px 0 11px}.study-intro h1{font-size:21px;margin:0}.study-intro p{color:var(--muted);font-size:11px;margin:3px 0}.mode-switch{display:flex;background:#e9eeea;padding:3px;border-radius:9px;gap:3px}.mode-switch button{border:0;border-radius:7px;background:transparent;padding:6px 9px;color:#6f7c75;font-size:10px}.mode-switch button.active{background:white;color:var(--forest);box-shadow:0 1px 4px #183c3618}.question-card{background:white;border:1px solid var(--line);border-radius:17px;padding:clamp(16px,3vw,25px);box-shadow:0 5px 20px #1b36300a;min-height:350px}.question-top{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#89958f;font-size:10px}.question-meta{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.tag{border-radius:5px;background:#f1f5f1;color:#71867a;padding:4px 7px;font:10px var(--latin)}.tag.source{background:var(--amber-soft);color:#9f7149}.qcount{font:600 11px var(--latin)}.stem{font:600 clamp(16px,2vw,20px)/1.65 var(--latin);text-align:left;direction:ltr;margin:23px 0 20px}.options{display:grid;gap:8px}.option{width:100%;border:1px solid var(--line);background:white;border-radius:11px;text-align:left;direction:ltr;padding:11px 13px;display:flex;align-items:center;gap:11px;color:var(--ink);transition:.14s}.option:hover:not(:disabled){border-color:#9ebba8;background:#f8faf8}.option-letter{width:25px;height:25px;border-radius:7px;background:#f0f3f0;color:#75847b;display:grid;place-items:center;font:700 11px var(--latin);flex:none}.option-text{font:500 13px/1.55 var(--latin)}.option.selected{border-color:#bc9062;background:#fff8ef}.option.correct{border-color:#83b697;background:#edf7ef}.option.correct .option-letter{background:#59856b;color:white}.option.wrong{border-color:#d98f7b;background:#fff2ef}.option.wrong .option-letter{background:#c77460;color:white}.answer-note{border-radius:11px;margin-top:14px;padding:13px 15px;background:#f1f7f2;border-inline-start:3px solid #77a987}.answer-note.wrong{background:#fff4f1;border-color:var(--coral)}.answer-note h4{font-size:12px;margin:0 0 5px}.answer-note p{font-size:12px;line-height:1.8;margin:3px 0;color:#4c6256}.answer-note .explanation{direction:ltr;text-align:left;font:12px/1.7 var(--latin);color:#596861;margin-top:9px}.question-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:16px}.question-actions .left-actions{display:flex;gap:6px}.flat-button{border:0;background:transparent;color:#87948d;padding:7px;font-size:11px}.flat-button:hover{color:var(--forest)}.progress-line{height:3px;background:#eef1ee;border-radius:5px;margin-top:16px}.progress-line span{display:block;background:#92bea2;height:100%;border-radius:5px}.empty-state{padding:40px;text-align:center;color:var(--muted)}
.library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:11px}.library-card{background:white;border:1px solid var(--line);border-radius:13px;padding:14px;display:flex;gap:11px;align-items:center;transition:.16s}.library-card:hover{border-color:#aec8b7;transform:translateY(-2px)}.file-icon{width:39px;height:44px;border-radius:9px;background:#f1f4ef;color:#678573;display:grid;place-items:center;font:700 9px var(--latin);flex:none}.file-icon.pdf{background:#fff0eb;color:#c56e57}.library-card b{font-size:12px;display:block;line-height:1.45}.library-card small{color:var(--muted);font-size:10px}.library-card .open-arrow{margin-inline-start:auto;color:#9aa7a0;font-size:15px}.progress-subject{display:grid;grid-template-columns:170px 1fr auto;gap:13px;align-items:center;padding:13px 0;border-bottom:1px solid #edf0ed}.progress-subject:last-child{border:0}.progress-subject b{font-size:12px}.progress-subject small{display:block;color:var(--muted);font-size:10px}.progress-bar{height:7px;background:#edf1ed;border-radius:9px;overflow:hidden}.progress-bar span{display:block;height:100%;background:var(--forest);border-radius:9px}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,15px);opacity:0;background:var(--forest);color:white;padding:9px 15px;border-radius:10px;font-size:12px;z-index:10;transition:.2s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}
html.dark{color-scheme:dark;--ink:#e6eee8;--muted:#a0b2a7;--paper:#111d1a;--card:#192823;--line:#2a3d34;--forest:#193a32;--mint:#213b30;--amber-soft:#3a2c1c;--shadow:0 12px 40px #0004}html.dark .topbar{background:#111d1ae8}html.dark .icon-button,html.dark .date-chip,html.dark .stat-card,html.dark .panel,html.dark .subject-card,html.dark .library-card,html.dark .question-card,html.dark .pack-list,html.dark .pack-list-head,html.dark .pack-item,html.dark .option,html.dark .search,html.dark .filter-chip{background:var(--card);color:var(--ink);border-color:var(--line)}html.dark .continue-card{background:#30291f;border-color:#493d2d}html.dark .question-note,html.dark .week-card{background:#1e2a25}html.dark .mode-switch{background:#26382f}html.dark .mode-switch button.active{background:#182720;color:#dce9df}html.dark .option-letter{background:#26372f;color:#afc0b5}html.dark .answer-note{background:#20362a}html.dark .answer-note.wrong{background:#392824}html.dark .subject-card:before{opacity:.35}html.dark .subject-card p,html.dark .library-card small{color:var(--muted)}html.dark .filter-chip.active{background:#37624c;color:white}
@media(max-width:1000px){.rail{width:75px;padding:22px 10px}.main-area{margin-left:75px}.brand{padding:4px 6px 38px}.brand-name,.rail-nav a span,.rail-bottom span:last-child{display:none}.brand-mark{margin:auto}.rail-nav a{justify-content:center;padding:11px}.rail-nav a i{font-size:21px}.rail-bottom{justify-content:center}.rail-nav a.active:before{right:0}.subject-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.topbar{height:57px;padding:0 18px}.page-wrap{padding:24px 18px 35px}.hero-grid{grid-template-columns:1fr}.hero-card,.continue-card{min-height:205px}.continue-card{min-height:150px}.two-panel{grid-template-columns:1fr}.study-layout{grid-template-columns:1fr}.pack-list{max-height:190px;display:flex;overflow:auto}.pack-list-head{display:none}.pack-item{min-width:190px;border-bottom:0;border-left:1px solid #f0f2ef}.pack-item.active{box-shadow:inset 0 -3px var(--forest)}.study-intro{align-items:flex-start;flex-direction:column}.welcome-row{align-items:flex-start;flex-direction:column}.date-chip{display:none}}
@media(max-width:480px){.rail{inset:auto 0 0;width:auto;height:66px;padding:5px 8px;flex-direction:row;border-top:1px solid #ffffff1a}.brand,.rail-bottom{display:none}.rail-nav{display:flex;justify-content:space-around;width:100%;gap:0}.rail-nav a{display:flex;flex-direction:column;gap:0;padding:4px 7px;font-size:9px;flex:1}.rail-nav a span{display:block}.rail-nav a i{font-size:18px}.rail-nav a.active:before{inset:0 auto auto 50%;right:auto;transform:translateX(-50%);width:20px;height:2px}.main-area{margin:0;padding-bottom:65px}.topbar{position:relative}.today-label{font-size:10px}.page-wrap{padding:20px 14px}.hero-card{padding:22px}.hero-card h2{font-size:23px}.stats-row{gap:6px}.stat-card{padding:10px 8px;gap:7px}.stat-icon{width:30px;height:30px;font-size:14px}.stat-card b{font-size:16px}.stat-card small{font-size:9px}.subject-card{padding:13px;min-height:139px}.subject-card h3{font-size:12px}.progress-subject{grid-template-columns:100px 1fr auto;gap:8px}.progress-subject b{font-size:10px}.question-card{padding:14px}.stem{font-size:16px}.option{padding:9px}.option-text{font-size:12px}.site-footer{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* --- USTAZ SMART EXTENSIONS --- */
.hub-link-pill{padding:7px 14px;border-radius:10px;background:#e7f3eb;color:var(--forest);font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:6px;border:1px solid #c0dfca;transition:.18s;text-decoration:none}
.hub-link-pill:hover{background:#c0dfca;color:#102824;transform:translateY(-1px)}
html.dark .hub-link-pill{background:#1f362c;color:#a7d5bd;border-color:#2e4e40}
html.dark .hub-link-pill:hover{background:#2a4a3c}

/* Filter Row */
.filter-row{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 20px}
.filter-btn{padding:7px 14px;border-radius:9px;border:1px solid var(--line);background:white;color:var(--ink);font-size:12px;font-weight:600;cursor:pointer;transition:.15s}
.filter-btn:hover{border-color:var(--forest)}
.filter-btn.active{background:var(--forest);color:white;border-color:var(--forest)}
html.dark .filter-btn{background:var(--card);color:var(--ink);border-color:var(--line)}
html.dark .filter-btn.active{background:#2e5a4e;color:white}

/* Curriculum Grid & Unit Cards */
.curriculum-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px;margin-top:14px}
.unit-card{background:white;border:1px solid var(--line);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:10px;transition:transform .18s,border-color .18s;position:relative;border-top:4px solid var(--unit-accent, #4e7d68)}
.unit-card:hover{transform:translateY(-2px);border-color:#adcbb9;box-shadow:0 8px 24px rgba(23,45,38,.06)}
html.dark .unit-card{background:var(--card);border-color:var(--line);border-top-color:var(--unit-accent, #4e7d68)}
.unit-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px}
.unit-id-badge{font-family:var(--latin);font-weight:700;color:var(--muted);background:var(--paper);padding:3px 8px;border-radius:6px}
html.dark .unit-id-badge{background:#213b30}
.unit-week-badge{color:var(--muted)}
.unit-title-ar{font-size:15px;font-weight:700;line-height:1.45;color:var(--ink);margin:0}
.unit-title-en{font-size:12px;font-family:var(--latin);color:var(--muted);margin:0;line-height:1.35}
.unit-high-yield{font-size:11px;color:#c0745b;background:#fdf2ef;padding:3px 8px;border-radius:6px;display:inline-flex;align-items:center;gap:4px;font-weight:600;align-self:flex-start}
html.dark .unit-high-yield{background:#3a2520;color:#e89f8b}
.unit-actions{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:8px;border-top:1px solid var(--line)}
.unit-actions .btn{flex:1;text-align:center;padding:7px 10px;font-size:12px}

/* Status Select Pill */
.status-select-btn{padding:5px 9px;border-radius:8px;border:1px solid var(--line);background:var(--paper);font-size:11px;font-weight:600;display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.status-select-btn.done{background:#e7f3eb;color:#1e4d3a;border-color:#a7d5bd}
.status-select-btn.doing{background:#fdf5e8;color:#855416;border-color:#f1cb91}
html.dark .status-select-btn{background:#1a2b25;color:var(--ink);border-color:var(--line)}
html.dark .status-select-btn.done{background:#1e3d30;color:#a7d5bd;border-color:#2a5744}
html.dark .status-select-btn.doing{background:#3b2d18;color:#f1cb91;border-color:#5a4321}

/* Dual Modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(10,22,18,.55);backdrop-filter:blur(6px);z-index:90;display:grid;place-items:center;padding:20px}
.dual-modal{background:white;border-radius:20px;max-width:820px;width:100%;max-height:88vh;overflow-y:auto;padding:28px 32px;position:relative;display:flex;flex-direction:column;gap:18px;box-shadow:0 20px 60px rgba(0,0,0,.25)}
html.dark .dual-modal{background:#162420;color:var(--ink);border:1px solid var(--line)}
.modal-close-btn{position:absolute;top:20px;left:20px;width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font-size:20px;display:grid;place-items:center;cursor:pointer}
html.dark .modal-close-btn{background:#22352e}
.modal-head{padding-inline-end:40px}
.modal-head h2{font-size:22px;margin:4px 0 6px;line-height:1.35}
.modal-head p{font-family:var(--latin);color:var(--muted);margin:0;font-size:13px}
.scaffold-box{background:#f3f8f5;border:1px solid #d4e7dc;border-radius:14px;padding:16px 20px;line-height:1.7;font-size:14px;color:#18362e}
html.dark .scaffold-box{background:#1a2e27;border-color:#2a4c3f;color:#dce9e2}
.scaffold-box bdi,.scaffold-box mark{background:#e0ede4;color:#133328;padding:2px 6px;border-radius:6px;cursor:pointer;border-bottom:1.5px dotted #6ba687;font-family:var(--latin);font-weight:600}
html.dark .scaffold-box bdi,html.dark .scaffold-box mark{background:#2a493e;color:#bfe0ce}
.eng-cards-wrap{display:grid;gap:12px}
.eng-card{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 18px}
html.dark .eng-card{background:#1c2d27}
.eng-card h4{margin:0 0 8px;font-family:var(--latin);font-size:14px;color:var(--forest)}
html.dark .eng-card h4{color:#a7d5bd}
.eng-card ul{margin:0;padding-inline-start:20px;font-family:var(--latin);font-size:13px;line-height:1.6}
.eng-card mark{background:#fef3e2;color:#6b4412;padding:1px 5px;border-radius:4px;cursor:pointer;border-bottom:1.5px dotted #dfa255;font-weight:600}
html.dark .eng-card mark{background:#3d2f1c;color:#f3cca0}
.recall-box{background:#fdf8f0;border:1px solid #f2dfc2;border-radius:14px;padding:16px 20px}
html.dark .recall-box{background:#2c2419;border-color:#4a3922}
.recall-q{font-weight:700;color:#704515;font-size:14px;margin-bottom:8px}
html.dark .recall-q{color:#ecc592}
.recall-reveal-btn{padding:6px 12px;border-radius:8px;background:#eed5b0;border:none;color:#4f300c;font-size:12px;font-weight:600;cursor:pointer}
html.dark .recall-reveal-btn{background:#4a3720;color:#f3cca0}
.recall-ans{margin-top:10px;padding:10px 14px;background:white;border-radius:10px;border:1px solid #edd3b0;font-size:13px;line-height:1.6}
html.dark .recall-ans{background:#1b2320;border-color:#4a3922}
.pearl-box{background:#fbfbfb;border-left:4px solid var(--amber);padding:12px 16px;border-radius:0 10px 10px 0;font-size:13px;color:#55625d}
html.dark .pearl-box{background:#1e2d27;color:#b2c4bb}

/* Word Popover */
.word-popover{position:fixed;z-index:100;background:white;border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:0 14px 38px rgba(10,24,20,.18);width:min(320px,90vw);display:flex;flex-direction:column;gap:8px;transform:translate(-50%,-100%);margin-top:-10px;transition:opacity .15s,transform .15s}
html.dark .word-popover{background:#1a2924;border-color:#2e443b;color:var(--ink)}
.word-popover-header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pop-term{font-family:var(--latin);font-size:14px;font-weight:700;color:var(--forest)}
html.dark .pop-term{color:#a7d5bd}
.pop-audio-btn{border:none;background:var(--paper);border-radius:6px;width:26px;height:26px;display:grid;place-items:center;cursor:pointer;font-size:12px}
html.dark .pop-audio-btn{background:#233830}
.pop-close-btn{border:none;background:transparent;cursor:pointer;font-size:18px;color:var(--muted);line-height:1}
.pop-trans{background:#e7f3eb;color:#163e30;padding:6px 10px;border-radius:8px;font-size:13px;font-weight:600}
html.dark .pop-trans{background:#203c31;color:#b7dfcb}
.pop-pearl{font-size:11px;color:var(--muted);line-height:1.5}

/* Interactive Guides Section in Library */
.guides-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px;margin:12px 0 24px}
.guide-card{background:white;border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;gap:12px;align-items:center;transition:transform .18s,border-color .18s;border-right:4px solid var(--amber);text-decoration:none}
.guide-card:hover{transform:translateY(-2px);border-color:#adcbb9;box-shadow:0 8px 24px rgba(23,45,38,.06)}
html.dark .guide-card{background:var(--card);border-color:var(--line)}
.guide-icon{width:42px;height:42px;border-radius:10px;background:#fef4e8;color:#9b6118;display:grid;place-items:center;font-size:20px;flex:none}
html.dark .guide-icon{background:#3a2915;color:#f3cca0}
.guide-card b{display:block;font-size:13px;line-height:1.4}
.guide-card small{font-size:11px;color:var(--muted)}

/* Strategy Page */
.strategy-hero{background:var(--forest);color:white;border-radius:18px;padding:26px 30px;margin-bottom:20px}
.strategy-hero h2{font-size:24px;margin:6px 0 8px}
.strategy-hero p{color:#c0d6c8;margin:0;font-size:13px;line-height:1.6}
.strategy-table-wrap{background:white;border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:24px}
html.dark .strategy-table-wrap{background:var(--card);border-color:var(--line)}
.strategy-table{width:100%;border-collapse:collapse;font-size:13px;text-align:right}
.strategy-table th{background:var(--paper);padding:12px 16px;font-weight:700;color:var(--forest);border-bottom:1px solid var(--line)}
html.dark .strategy-table th{background:#1f332b;color:#a7d5bd}
.strategy-table td{padding:12px 16px;border-bottom:1px solid var(--line);line-height:1.5}
.strategy-table tr:last-child td{border-bottom:none}
.roi-badge{display:inline-block;padding:3px 8px;border-radius:6px;font-size:11px;font-weight:700}
.roi-badge.high{background:#fdf0ec;color:#c0573e}
.roi-badge.mid{background:#fef7ea;color:#a16e1e}
html.dark .roi-badge.high{background:#3b231d;color:#f09f8c}
html.dark .roi-badge.mid{background:#3a2d16;color:#e8be77}

/* Study Helper Banner */
.study-helper-banner{background:#f1f8f4;border:1px solid #cce5d7;border-radius:12px;padding:10px 16px;font-size:12px;color:#1e4537;display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
html.dark .study-helper-banner{background:#1a2f26;border-color:#2a4d3f;color:#bfe0ce}

/* Clickable word hints in study stem */
.stem mark,.option-text mark{background:#fef3e2;color:#6b4412;padding:1px 4px;border-radius:4px;cursor:pointer;border-bottom:1.5px dotted #dfa255}
html.dark .stem mark,html.dark .option-text mark{background:#3d2f1c;color:#f3cca0}

/* --- SEQUENTIAL LESSON PLAYER (PILOT LESSON SYSTEM) --- */
.lesson-hero{background:linear-gradient(135deg,#173c36 0%,#0f2924 100%);color:white;border-radius:20px;padding:26px 30px;margin-bottom:18px;position:relative;overflow:hidden;border:1px solid #2b5a4f}
.lesson-hero-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.lesson-badge{padding:4px 10px;border-radius:8px;font-size:11px;font-weight:700;background:rgba(255,255,255,.12);color:#e2f3ea}
.lesson-badge.hot{background:#eead62;color:#231b0f}
.lesson-badge.ref{background:#1e4e44;color:#a7d5bd;cursor:pointer;border:1px solid #417a6b}
.lesson-hero h1{margin:4px 0 6px;font-size:clamp(22px,2.6vw,30px);line-height:1.3}
.lesson-hero p{margin:0;color:#bfd6ca;font-family:var(--latin);font-size:14px}

/* 6-Station Stepper Bar */
.station-stepper{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-bottom:22px;background:var(--card);padding:10px;border-radius:16px;border:1px solid var(--line);position:sticky;top:70px;z-index:3;box-shadow:0 8px 25px rgba(15,35,28,.06)}
.station-step{border:1px solid var(--line);background:var(--paper);border-radius:12px;padding:10px 11px;text-align:right;display:flex;flex-direction:column;gap:3px;transition:.16s;position:relative}
.station-step:hover{border-color:#8eb9a2;transform:translateY(-1px)}
.station-step.active{background:var(--forest);color:white;border-color:var(--forest);box-shadow:0 6px 18px rgba(23,60,54,.22)}
.station-step.done{border-color:#84be9e;background:#eef8f2}
html.dark .station-step.done{background:#1d352b;border-color:#34634e}
.station-step-num{font-size:10px;font-weight:700;color:var(--muted);display:flex;align-items:center;justify-content:space-between}
.station-step.active .station-step-num{color:#f3cca0}
.station-step-title{font-size:12px;font-weight:700;line-height:1.35}
@media(max-width:920px){.station-stepper{grid-template-columns:repeat(3,1fr);position:static}}
@media(max-width:540px){.station-stepper{grid-template-columns:repeat(2,1fr)}}

/* Station Container & Cards */
.station-box{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px 28px;margin-bottom:20px;box-shadow:0 6px 24px rgba(18,38,32,.04)}
.station-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:20px;flex-wrap:wrap}
.station-head h2{margin:4px 0;font-size:21px;color:var(--ink)}
.station-head p{margin:0;font-size:13px;color:var(--muted)}

/* Big Picture & ILOs */
.big-picture-card{background:linear-gradient(135deg,#eef8f3 0%,#fdf8ef 100%);border:2px solid #b8dec9;border-radius:16px;padding:20px 24px;margin-bottom:20px}
html.dark .big-picture-card{background:linear-gradient(135deg,#1b332a 0%,#2b2419 100%);border-color:#345c4b}
.big-picture-card h3{margin:0 0 8px;color:var(--forest);font-size:16px;display:flex;align-items:center;gap:8px}
html.dark .big-picture-card h3{color:#a7d5bd}
.big-picture-card p{margin:0;font-size:15px;line-height:1.85;font-weight:500;color:var(--ink)}

.ilo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px;margin-bottom:20px}
.ilo-item{background:var(--paper);border:1px solid var(--line);border-radius:11px;padding:11px 14px;font-family:var(--latin);font-size:12.5px;direction:ltr;text-align:left;display:flex;gap:10px;align-items:flex-start}
.ilo-item i{font-style:normal;background:var(--mint);color:var(--forest);padding:2px 7px;border-radius:6px;font-weight:700;font-size:11px;flex:none}

/* Key Terms Table */
.lesson-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:13px;margin:14px 0;background:var(--card)}
.lesson-table{width:100%;border-collapse:collapse;font-size:13px}
.lesson-table th{background:#edf5f0;color:var(--forest);padding:11px 14px;font-weight:700;border-bottom:1px solid var(--line);text-align:right}
html.dark .lesson-table th{background:#1f352c;color:#a7d5bd}
.lesson-table td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.6}
.lesson-table tr:last-child td{border-bottom:none}
.lesson-table.ltr-table{direction:ltr;text-align:left;font-family:var(--latin)}
.lesson-table.ltr-table th{text-align:left;background:#173c36;color:white}

/* Video Hub & Gemini Studio */
.video-hub-grid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:16px;align-items:start;margin-bottom:24px}
@media(max-width:860px){.video-hub-grid{grid-template-columns:1fr}}
.video-playlist{display:grid;gap:8px}
.video-item-btn{width:100%;text-align:right;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:11px 13px;transition:.15s;display:flex;flex-direction:column;gap:4px}
.video-item-btn:hover{border-color:#8cb8a0}
.video-item-btn.active{background:#e7f3eb;border-color:var(--forest);box-shadow:inset -4px 0 var(--forest)}
html.dark .video-item-btn.active{background:#1f382e;border-color:#7cc49f}
.video-frame-box{background:#0d1715;border-radius:16px;overflow:hidden;border:1px solid var(--line);color:white}
.video-iframe-wrap{position:relative;padding-top:56.25%;background:#000}
.video-iframe-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.youtube-file-notice{display:grid;place-content:center;gap:8px;min-height:190px;padding:20px;background:#0f1d29;color:#fff;text-align:center;line-height:1.7}
.youtube-file-notice a{color:#86efac;font-weight:800;text-decoration:underline}
.video-iframe-wrap .youtube-file-notice{position:absolute;inset:0;min-height:0}
.floating-video-pip .youtube-file-notice{min-height:150px;font-size:12px}
.lesson-status-draft{align-self:flex-start;padding:2px 7px;border-radius:999px;background:#fff7ed;color:#9a3412;font-weight:700}
.video-meta-bar{padding:14px 18px;background:#132622;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

.gemini-studio-card{background:linear-gradient(135deg,#182b3a 0%,#14222e 100%);color:#eef6fc;border-radius:18px;padding:22px 26px;border:1px solid #2d4c63;margin-top:22px}
.gemini-studio-card h3{margin:0 0 6px;font-size:18px;color:#8ecdf7}
.gemini-textarea{width:100%;min-height:190px;background:#0d1821;color:#d9ecfa;border:1px solid #2b485e;border-radius:12px;padding:13px;font:12.5px/1.7 var(--arabic);resize:vertical;margin-top:10px}

/* Section Navigation & Cognitive Guide */
.sec-toc-bar{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:18px;padding:12px;background:var(--paper);border-radius:13px;border:1px solid var(--line)}
.sec-pill{padding:6px 11px;border-radius:9px;border:1px solid var(--line);background:var(--card);font-size:12px;font-weight:600;transition:.15s}
.sec-pill:hover,.sec-pill.active{background:var(--forest);color:white;border-color:var(--forest)}

.lesson-sec-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px 26px;margin-bottom:22px;border-top:4px solid var(--forest);scroll-margin-top:145px}
.lesson-sec-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:16px;flex-wrap:wrap}
.lesson-sec-title-en{font:700 19px/1.35 var(--latin);color:var(--ink);margin:0}
.lesson-sec-title-ar{font-size:15px;font-weight:700;color:var(--forest);margin:3px 0 0}
html.dark .lesson-sec-title-ar{color:#9ad1b3}
.source-verify-btn{background:#fdf3e4;color:#8a5212;border:1px solid #efd0a4;padding:7px 12px;border-radius:10px;font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:6px;transition:.15s}
.source-verify-btn:hover{background:#f7e2c2;transform:translateY(-1px)}
html.dark .source-verify-btn{background:#382915;color:#f5cda0;border-color:#594020}

.btn.tiny{padding:3px 8px;font-size:11px;border-radius:7px}
.btn.tiny.ref{background:#fdf3e4;color:#8a5212;border:1px solid #efd0a4;font-weight:600;display:inline-flex;align-items:center;gap:4px;cursor:pointer;transition:.15s}
.btn.tiny.ref:hover{background:#f7e2c2;transform:translateY(-1px)}
html.dark .btn.tiny.ref{background:#382915;color:#f5cda0;border-color:#594020}

.cognitive-guide-box{background:#f2f7fb;border-inline-start:4px solid #0284c7;border-radius:12px;padding:14px 18px;margin-bottom:18px}
html.dark .cognitive-guide-box{background:#162633;border-color:#38bdf8}
.cognitive-guide-box h4{margin:0 0 5px;font-size:13.5px;color:#0369a1;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
html.dark .cognitive-guide-box h4{color:#7dd3fc}
.cognitive-guide-box p{margin:0;font-size:13px;line-height:1.75;color:var(--ink)}

/* Book Content Blocks */
.book-subheading{font:700 15px/1.4 var(--latin);color:var(--forest);background:#eef6f1;padding:8px 13px;border-radius:9px;margin:18px 0 10px;border-inline-start:4px solid var(--forest);direction:ltr;text-align:left}
html.dark .book-subheading{background:#1d342b;color:#a7d5bd;border-color:#72b896}
.book-p,.book-bullet{font:400 14.5px/1.75 var(--latin);direction:ltr;text-align:left;margin:7px 0;color:var(--ink);cursor:pointer}
.book-bullet{padding-inline-start:14px;border-inline-start:2px solid #d5e3dc}
.book-fahaam{background:#eef8f2;border:1px solid #bce0ca;border-inline-start:4px solid #16a34a;border-radius:12px;padding:13px 17px;margin:14px 0;font-size:13.5px;line-height:1.8;color:#133926}
html.dark .book-fahaam{background:#193026;border-color:#2c5943;color:#d6f0e1}
.book-mnemonic{background:#fff8eb;border:1px solid #f5d8a6;border-inline-start:4px solid #d97706;border-radius:12px;padding:13px 17px;margin:14px 0;font-size:13.5px;line-height:1.75;color:#593507}
html.dark .book-mnemonic{background:#302414;border-color:#594121;color:#f7dcb4}
.book-traps{background:#fff1f2;border:1px solid #fecdd3;border-inline-start:4px solid #e11d48;border-radius:12px;padding:14px 18px;margin:14px 0;font:13.5px/1.75 var(--latin);direction:ltr;text-align:left;color:#881337}
html.dark .book-traps{background:#331820;border-color:#612837;color:#fda4af}
.book-extra{background:#f5f3ff;border:1px solid #ddd6fe;border-inline-start:4px solid #7c3aed;border-radius:12px;padding:13px 17px;margin:14px 0;font:13px/1.7 var(--latin);direction:ltr;text-align:left;color:#3b1d7a}
html.dark .book-extra{background:#241c38;border-color:#43336b;color:#ddd6fe}

/* Inline Figure Gallery & Lightbox Trigger */
.figure-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin:16px 0}
.figure-card{background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:.18s}
.figure-card:hover{border-color:var(--forest);box-shadow:0 8px 24px rgba(18,40,34,.1)}
.figure-img-btn{border:0;background:white;padding:10px;display:grid;place-items:center;height:210px;overflow:hidden;position:relative}
.figure-img-btn img{max-width:100%;max-height:190px;object-fit:contain;transition:transform .2s}
.figure-card:hover .figure-img-btn img{transform:scale(1.03)}
.figure-zoom-pill{position:absolute;bottom:8px;left:8px;background:rgba(23,60,54,.88);color:white;padding:4px 9px;border-radius:7px;font-size:11px;font-weight:600}
.figure-caption{padding:11px 14px;font:12px/1.55 var(--latin);direction:ltr;text-align:left;color:var(--muted);border-top:1px solid var(--line);flex:1}
.figure-source-link{padding:0 14px 11px;font:12px/1.6 var(--latin);direction:rtl;text-align:right;color:var(--muted)}
.figure-source-link a{color:var(--forest);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.figure-source-link a:hover{color:var(--gold)}

/* Lightbox Modal */
.lightbox-modal{background:#0f1917;color:white;border-radius:20px;max-width:1020px;width:96%;max-height:92vh;display:flex;flex-direction:column;overflow:hidden;border:1px solid #2b473f;box-shadow:0 24px 70px rgba(0,0,0,.5)}
.lightbox-top{display:flex;align-items:center;justify-content:space-between;padding:13px 20px;background:#162622;border-bottom:1px solid #263f38;gap:10px;flex-wrap:wrap}
.lightbox-stage{flex:1;overflow:auto;display:grid;place-items:center;padding:20px;background:#09100f;min-height:380px}
.lightbox-stage img{max-width:100%;height:auto;border-radius:8px;background:white;padding:8px;transition:width .18s}
.lightbox-foot{padding:14px 20px;background:#162622;border-top:1px solid #263f38;font:13px/1.6 var(--latin);direction:ltr;text-align:left;color:#cfe3d9}

/* Source Verification Drawer (Word + PDF) */
.source-drawer{background:var(--card);color:var(--ink);border-radius:20px;max-width:1060px;width:96%;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);box-shadow:0 24px 70px rgba(0,0,0,.38)}
.source-drawer-head{padding:16px 22px;background:var(--forest);color:white;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.source-drawer-body{padding:20px 24px;overflow-y:auto;flex:1;display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
@media(max-width:860px){.source-drawer-body{grid-template-columns:1fr}}
.source-pane{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:16px;max-height:70vh;overflow-y:auto}
.source-pane h4{margin:0 0 12px;font-size:14px;color:var(--forest);display:flex;align-items:center;justify-content:space-between;gap:8px}
html.dark .source-pane h4{color:#a7d5bd}
.pdf-page-Controls{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pdf-page-img-wrap{background:white;border:1px solid var(--line);border-radius:10px;overflow:hidden;text-align:center}
.pdf-page-img-wrap img{width:100%;height:auto;display:block;cursor:zoom-in}

/* Self-Check & Essay/Case Cards */
.self-check-card{background:var(--paper);border:1px solid var(--line);border-radius:13px;padding:14px 18px;margin-bottom:10px}
.essay-card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:16px 20px;margin-bottom:12px}
.station-handoff-bar{margin-top:24px;padding:18px 22px;background:linear-gradient(135deg,#e7f3eb 0%,#fdf4e6 100%);border:1px solid #b7dcc6;border-radius:16px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
html.dark .station-handoff-bar{background:linear-gradient(135deg,#1b3329 0%,#2d2417 100%);border-color:#345948}

/* --- REFINED STUDY UX ENHANCEMENTS --- */
/* Focus Reading Mode */
body.focus-reading-active .rail, body.focus-reading-active .topbar, body.focus-reading-active .site-footer { display: none !important; }
body.focus-reading-active .main-area { margin-left: 0 !important; width: 100% !important; }
body.focus-reading-active .page-wrap { max-width: 920px !important; padding: 20px 24px 60px !important; }
.focus-exit-bar { position: sticky; top: 12px; z-index: 9; background: rgba(23,60,54,.94); backdrop-filter: blur(10px); color: white; padding: 9px 18px; border-radius: 12px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.2); }

/* Inline Figure Pills */
.inline-fig-pill { display: inline-flex; align-items: center; gap: 5px; background: #e8f3ee; color: #164e3c; border: 1px solid #b9dcce; padding: 2px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 700; cursor: pointer; margin: 0 3px; vertical-align: middle; transition: .15s; font-family: var(--latin); }
.inline-fig-pill:hover { background: #d0ebd8; transform: translateY(-1px); border-color: #82c29e; }
html.dark .inline-fig-pill { background: #1c362d; color: #a9e0c6; border-color: #2b5444; }

/* Flashcard Flip Stage (Station 1) */
.flashcard-stage { display: flex; flex-direction: column; align-items: center; margin: 18px 0; perspective: 1000px; }
.flashcard-box { width: 100%; max-width: 580px; min-height: 250px; cursor: pointer; position: relative; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.4,0,.2,1); }
.flashcard-box.flipped { transform: rotateY(180deg); }
.flashcard-face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 18px; padding: 28px 32px; display: flex; flex-direction: column; justify-content: space-between; border: 2px solid var(--line); box-shadow: 0 10px 30px rgba(23,45,38,.07); background: var(--card); }
.flashcard-face.back { transform: rotateY(180deg); background: linear-gradient(135deg,#f4faf6 0%,#fbfdf9 100%); border-color: #9eccb3; }
html.dark .flashcard-face.back { background: linear-gradient(135deg,#193026 0%,#15231e 100%); border-color: #2e5944; }
.flashcard-actions { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

/* Interactive Drum Spotter Widget */
.tm-spotter-widget { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 18px 22px; margin: 18px 0; }
.tm-spotter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px; }
@media(max-width:768px){ .tm-spotter-grid { grid-template-columns: 1fr; } }
.tm-side-card { background: var(--card); border: 2px solid var(--line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.tm-side-card.active-side { border-color: var(--forest); box-shadow: 0 8px 24px rgba(23,60,54,.1); }
.tm-clock-badge { display: inline-flex; align-items: center; gap: 6px; background: #fef3e2; color: #8c5210; padding: 4px 10px; border-radius: 8px; font-weight: 700; font-size: 12px; }

/* Smart Self-Check Auto-Correction */
.sc-input-wrap { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 260px; position: relative; }
.sc-input { flex: 1; border: 1.5px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: 13px; font-family: var(--latin); transition: border-color .18s; }
.sc-input.correct { border-color: #16a34a !important; background: #f0fdf4 !important; color: #14532d !important; font-weight: 700; }
.sc-input.incorrect { border-color: #f43f5e; background: #fff1f2; }
.sc-status-icon { font-size: 16px; min-width: 20px; }

/* Rubric Checklist for Essays & Cases */
.rubric-box { background: #f8faf9; border: 1px solid #dce8e2; border-radius: 12px; padding: 12px 16px; margin-top: 12px; font-size: 12.5px; }
html.dark .rubric-box { background: #162620; border-color: #27473a; }
.rubric-title { font-weight: 700; color: var(--forest); margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; }
html.dark .rubric-title { color: #a7d5bd; }
.rubric-item { display: flex; align-items: flex-start; gap: 8px; padding: 5px 0; border-bottom: 1px dashed #e3ede7; cursor: pointer; direction: ltr; text-align: left; font-family: var(--latin); line-height: 1.5; }
.rubric-item:last-child { border-bottom: none; }
.rubric-item input[type="checkbox"] { margin-top: 3px; accent-color: var(--forest); cursor: pointer; }
.rubric-item.checked { text-decoration: line-through; color: var(--muted); opacity: .75; }

/* Personal Marginal Notes */
.sec-note-card { background: #fffbe8; border: 1px solid #f2e3a8; border-radius: 10px; padding: 10px 14px; margin-top: 12px; font-size: 12px; color: #5c440a; }
html.dark .sec-note-card { background: #2e2813; border-color: #57481b; color: #f4df9a; }
.sec-note-textarea { width: 100%; min-height: 55px; border: 1px solid #e5d38c; border-radius: 8px; padding: 7px 10px; font: 12px/1.6 var(--arabic); background: white; margin-top: 6px; resize: vertical; }
html.dark .sec-note-textarea { background: #1d1a0d; color: #fbf5dc; border-color: #4f421a; }



/* Ultra-Smooth UI Enhancements */
.inline-fig-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #eef7f2;
  color: #115e45;
  border: 1px solid #b6dec9;
  padding: 2.5px 9px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  margin: 0 4px;
  vertical-align: middle;
  transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: var(--latin);
  box-shadow: 0 1px 3px rgba(17,94,69,0.06);
}
.inline-fig-pill:hover {
  background: #d8f0e2;
  border-color: #72bf94;
  color: #064e3b;
  transform: translateY(-1.5px);
  box-shadow: 0 4px 10px rgba(17,94,69,0.18);
}
.inline-fig-pill:active {
  transform: translateY(0);
}

.gemini-studio-card {
  background: radial-gradient(circle at 10% 10%, #1a2f42 0%, #101c26 90%);
  color: #eef6fc;
  border-radius: 20px;
  padding: 26px 30px;
  border: 1px solid #2d4f6d;
  margin-top: 24px;
  box-shadow: 0 14px 45px rgba(10,24,38,0.22);
}
.gemini-textarea {
  width: 100%;
  min-height: 250px;
  background: #09131a;
  color: #e2f1fc;
  border: 1px solid #244158;
  border-radius: 14px;
  padding: 14px 16px;
  font: 13px/1.75 var(--arabic);
  resize: vertical;
  margin-top: 8px;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.4);
  transition: border-color .2s;
}
.gemini-textarea:focus {
  border-color: #f59e0b;
  outline: none;
}

.toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translate(-50%, 20px);
  opacity: 0;
  background: #112822;
  color: #f0fdf4;
  border: 1px solid #2b5d4b;
  padding: 11px 20px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  z-index: 100;
  transition: all .25s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  box-shadow: 0 16px 40px rgba(0,0,0,0.3);
  backdrop-filter: blur(8px);
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* === GOLDEN LESSON TEMPLATE & CHRONOLOGICAL MAP UPGRADES === */
mark.hy-mark {
  background: #fef3c7;
  color: #92400e;
  padding: 1px 5px;
  border-radius: 5px;
  font-weight: 700;
  border-bottom: 1.5px solid #f59e0b;
}
html.dark mark.hy-mark {
  background: rgba(245, 158, 11, 0.22);
  color: #fde68a;
  border-bottom-color: #f59e0b;
}

.inline-ar-cue {
  margin: 4px 0 12px;
  padding: 7px 12px;
  background: #f0fdf4;
  border-right: 3.5px solid #16a34a;
  border-radius: 8px;
  font: 600 12.8px/1.65 var(--arabic);
  color: #14532d;
  direction: rtl;
  text-align: right;
}
html.dark .inline-ar-cue {
  background: rgba(22, 163, 74, 0.14);
  color: #bbf7d0;
  border-right-color: #22c55e;
}

.inline-pinned-fig {
  margin: 10px 0 16px;
  padding: 14px;
  background: var(--card);
  border: 2px solid #10b981;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.12);
  direction: rtl;
  text-align: right;
}
.inline-pinned-fig img {
  max-height: 320px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  margin: 8px auto;
  border-radius: 8px;
  background: #fff;
  padding: 6px;
  border: 1px solid var(--line);
}

.sec-micro-quiz {
  margin-top: 18px;
  padding: 16px 18px;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1.5px solid #f59e0b;
  border-radius: 14px;
}
html.dark .sec-micro-quiz {
  background: linear-gradient(135deg, #272011 0%, #1f190d 100%);
  border-color: #b45309;
}

.floating-video-pip {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 350px;
  background: #0f1d29;
  color: #fff;
  border: 2px solid #10b981;
  border-radius: 16px;
  overflow: hidden;
  z-index: 95;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}
.floating-video-pip-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #142838;
  font-size: 12px;
  font-weight: 700;
  border-bottom: 1px solid #264258;
  cursor: grab;
  user-select: none;
}
.floating-video-pip-head:active {
  cursor: grabbing;
}
.floating-video-pip video {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  background: #000;
}
.floating-video-pip iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
}

.reader-speed-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px;
  background: #eef7f2;
  border: 1px solid #b8dbca;
  border-radius: 14px;
  margin-bottom: 16px;
}
html.dark .reader-speed-bar {
  background: #152720;
  border-color: #284b3d;
}

/* Pilot Lessons Top Switcher */
.pilot-switcher-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  margin-bottom: 16px;
}
.lesson-picker-intro{display:flex;align-items:baseline;justify-content:space-between;gap:12px;width:100%;flex-wrap:wrap}
.lesson-picker-intro small{font-size:11px;color:var(--muted)}
.lesson-subject-pickers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;width:100%}
.lesson-subject-picker{display:grid;gap:6px;min-width:0;padding:9px 10px;border:1px solid var(--line);border-radius:11px;background:var(--card)}
.lesson-subject-picker-head{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:12px;font-weight:800;color:var(--forest)}
.lesson-subject-picker-head small{font-size:10px;color:var(--muted);font-weight:600;white-space:nowrap}
.lesson-coverage-note{margin:-5px 0 14px;padding:10px 13px;border:1px solid #f3d28b;border-inline-start:4px solid #d97706;border-radius:10px;background:#fff9e8;color:#6e4b12;font-size:13px;line-height:1.75}
html.dark .lesson-coverage-note{background:#342b1d;border-color:#76541d;color:#f5d58f}
.lesson-subject-select{width:100%;min-width:0;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);padding:8px 9px;font-size:12px}
@media(max-width:900px){.lesson-subject-pickers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.lesson-subject-pickers{grid-template-columns:1fr}.lesson-picker-intro{align-items:flex-start;flex-direction:column;gap:3px}}
.pilot-switcher-label {
  font-size: 12px;
  font-weight: 800;
  color: var(--forest);
  margin-inline-end: 6px;
}
.pilot-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
}
.pilot-pill:hover {
  border-color: var(--forest);
  transform: translateY(-1px);
}
.pilot-pill.active {
  background: var(--forest);
  color: #fff;
  border-color: var(--forest);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}

/* Question Arabic Cue */
.question-ar-cue {
  margin: 6px 0 10px;
  padding: 6px 10px;
  background: #f0fdf4;
  border-inline-start: 3px solid #10b981;
  border-radius: 6px;
  font-size: 12.5px;
  color: #166534;
  direction: rtl;
  text-align: right;
}
html.dark .question-ar-cue {
  background: #132b1f;
  color: #86efac;
  border-inline-start-color: #34d399;
}
.qbank-ar-summary{font-size:14px;line-height:1.9;margin-top:12px;padding:11px 13px}
.question-ar-unavailable{margin-top:10px;padding:8px 10px;border-radius:8px;background:#fff8e8;color:#75551a;font-size:12px;direction:rtl;text-align:right}
html.dark .question-ar-unavailable{background:#352d1d;color:#f4d590}
.page-wrap.page-enter{animation:gumloop-page-enter .22s ease both}
@keyframes gumloop-page-enter{from{opacity:.15;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@supports (view-transition-name: gumloop-page){.page-wrap{view-transition-name:gumloop-page}::view-transition-old(gumloop-page){animation:gumloop-page-out .16s ease both}::view-transition-new(gumloop-page){animation:gumloop-page-in .22s ease both}}
@keyframes gumloop-page-out{to{opacity:0;transform:translateY(-4px)}}
@keyframes gumloop-page-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){::view-transition-old(gumloop-page),::view-transition-new(gumloop-page){animation:none!important}}

/* ER Simulator In-Lesson */
.er-sim-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 14px;
}
.er-sim-card {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.er-sim-card.active-scenario {
  border-color: #ef4444;
}
.er-step-box {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  margin-top: 10px;
}

/* ER Clinical Reasoning & Patient Vitals Suite */
.er-vitals-strip {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  background: #0f172a;
  color: #f8fafc;
  padding: 10px 14px;
  border-radius: 10px;
  font-family: var(--latin);
  font-size: 12px;
  margin: 10px 0;
  border-inline-start: 4px solid #ef4444;
}
.er-vital-chip {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.er-vital-chip b { color: #38bdf8; }
.er-vital-chip.alarm b { color: #f87171; }

.er-workup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  margin: 10px 0;
}
.er-workup-btn {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  text-align: right;
  font-size: 12.5px;
  cursor: pointer;
  transition: .15s;
}
.er-workup-btn:hover {
  background: #eff6ff;
  border-color: #3b82f6;
}
.er-workup-btn.active {
  background: #dbeafe;
  border-color: #2563eb;
  color: #1e40af;
  font-weight: 700;
}

.er-safety-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}
.er-safety-badge.trap-triggered {
  background: #fef2f2;
  color: #991b1b;
  border-color: #fca5a5;
}

/* Local Video Upload Box in Station 1 */
.local-media-box {
  margin-top: 12px;
  padding: 12px 14px;
  background: #142838;
  border: 1px dashed #264258;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.book-item-title {
  font-weight: 800;
  margin: 6px 0 2px;
  color: var(--forest);
}

.book-bullets {
  margin: 8px 0 12px;
  padding-inline-start: 24px;
  line-height: 1.8;
}

.book-bullets li {
  margin: 4px 0;
}