/* Millat General English — level picker + level dashboards (2026-10-09). Shares the Millat Reading palette. */
:root{
  --amber-50:#fffaf0; --amber-100:#fef3d9; --amber-200:#fce3a3; --amber-400:#f2b632; --amber-500:#e0a012; --amber-600:#b87e0a;
  --ink-900:#2b2410; --ink-700:#4a4128; --ink-500:#6b6142; --line:#efe2c2; --paper:#fdf8ee; --card:#fffdf8;
  --serif:'Fraunces', Georgia, serif; --sans:'Manrope', -apple-system, 'Segoe UI', sans-serif;
}
*{ box-sizing:border-box; }
body{ margin:0; background:var(--paper); color:var(--ink-900); font-family:var(--sans); -webkit-font-smoothing:antialiased; }
a{ color:inherit; text-decoration:none; }

.ge-top{ position:sticky; top:0; z-index:20; background:rgba(253,248,238,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.ge-top-in{ max-width:1180px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.ge-brand{ display:flex; align-items:center; gap:12px; }
.ge-logo{ width:46px; height:46px; border-radius:14px; display:grid; place-items:center; font-size:22px; background:linear-gradient(135deg,var(--amber-400),var(--amber-600)); box-shadow:0 6px 16px rgba(184,126,10,.3); }
.ge-brand b{ display:block; font-family:var(--serif); font-size:1.35rem; font-weight:600; }
.ge-brand small{ display:block; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-500); font-weight:700; margin-top:2px; }
.ge-nav{ display:flex; gap:18px; align-items:center; font-weight:700; font-size:.95rem; }
.ge-nav a:hover{ color:var(--amber-600); }

.ge-wrap{ max-width:1180px; margin:0 auto; padding:28px 24px 64px; }
.ge-hero{ position:relative; border-radius:28px; overflow:hidden; color:#fff; text-align:center; padding:84px 24px 76px;
  background:linear-gradient(rgba(40,25,5,.55),rgba(40,25,5,.62)), url('/reading/assets/images/hero/library.jpg') center/cover; box-shadow:0 18px 40px rgba(60,40,5,.25); }
.ge-hero .kick{ display:inline-block; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; font-weight:800; color:var(--amber-200); margin-bottom:14px; }
.ge-hero h1{ font-family:var(--serif); font-weight:600; font-size:clamp(2.2rem,5vw,3.8rem); line-height:1.08; margin:0; }
.ge-hero h1 em{ font-style:normal; color:var(--amber-400); }
.ge-hero p{ font-size:1.12rem; margin:18px auto 0; max-width:620px; color:#f6ead2; line-height:1.55; }

.ge-h2{ font-family:var(--serif); font-weight:600; font-size:1.7rem; margin:44px 0 6px; }
.ge-sub{ color:var(--ink-500); margin:0 0 22px; }

/* level picker */
.lv-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.lv-card{ position:relative; background:var(--card); border:1px solid var(--line); border-radius:22px; padding:26px 22px 22px; display:flex; flex-direction:column; gap:10px; transition:transform .18s, box-shadow .18s, border-color .18s; box-shadow:0 4px 14px rgba(120,90,20,.06); }
.lv-card:hover{ transform:translateY(-4px); border-color:var(--amber-400); box-shadow:0 14px 30px rgba(120,90,20,.16); }
.lv-ico{ flex-shrink:0; width:62px; height:62px; border-radius:50%; display:grid; place-items:center; font-size:30px; box-shadow:inset 0 -4px 8px rgba(0,0,0,.15), 0 6px 14px rgba(0,0,0,.12); }
.lv-a1 .lv-ico{ background:radial-gradient(circle at 32% 26%,#c8f5d2,#4caf6f 65%,#2c7a48); }
.lv-a2 .lv-ico{ background:radial-gradient(circle at 32% 26%,#eef3df,#a9c08a 65%,#6f8a52); }
.lv-b1 .lv-ico{ background:radial-gradient(circle at 32% 26%,#f6dc9e,#b87e0a 65%,#855d07); }
.lv-b2 .lv-ico{ background:radial-gradient(circle at 32% 26%,#d6ecf6,#5b9ab8 65%,#2f6a86); }
.lv-code{ font-size:.78rem; font-weight:800; letter-spacing:.14em; color:var(--amber-600); }
.lv-card h3{ font-family:var(--serif); font-weight:600; font-size:1.45rem; margin:0; }
.lv-card p{ margin:0; color:var(--ink-500); line-height:1.5; font-size:.95rem; flex:1; }
.lv-go{ margin-top:6px; font-weight:800; color:var(--amber-600); }
.lv-badge{ position:absolute; top:16px; right:16px; font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; background:var(--amber-100); color:var(--amber-600); padding:4px 9px; border-radius:999px; }

/* level dashboard */
.dash-head{ display:flex; align-items:center; gap:18px; margin:6px 0 26px; }
.dash-head .lv-ico{ width:72px; height:72px; font-size:34px; }
.dash-head h1{ font-family:var(--serif); font-weight:600; font-size:clamp(1.9rem,4vw,2.8rem); margin:0; }
.dash-head p{ margin:4px 0 0; color:var(--ink-500); }
.crumb{ font-weight:700; color:var(--ink-500); font-size:.92rem; }
.crumb a:hover{ color:var(--amber-600); }
.sk-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.sk-card{ position:relative; border-radius:24px; overflow:hidden; color:#fff; min-height:260px; padding:92px 26px 26px; display:flex; flex-direction:column; justify-content:flex-end; gap:8px; transition:transform .18s, box-shadow .18s; box-shadow:0 10px 26px rgba(40,25,5,.18); }
a.sk-card:hover{ transform:translateY(-5px); box-shadow:0 18px 36px rgba(40,25,5,.28); }
.sk-card .sk-ico{ position:absolute; top:22px; left:24px; font-size:44px; filter:drop-shadow(0 4px 8px rgba(0,0,0,.25)); }
.sk-card h3{ font-family:var(--serif); font-weight:600; font-size:1.75rem; margin:0; }
.sk-card p{ margin:0; color:rgba(255,255,255,.88); line-height:1.5; }
.sk-card .sk-go{ margin-top:8px; font-weight:800; display:inline-flex; gap:6px; align-items:center; }
.sk-card .sk-count{ position:absolute; top:24px; right:22px; background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.35); backdrop-filter:blur(4px); padding:5px 11px; border-radius:999px; font-size:.78rem; font-weight:800; }
.sk-read{ background:linear-gradient(160deg,#c98a12,#7a4f05); }
.sk-listen{ background:linear-gradient(160deg,#3f7d9c,#1d4459); }
.sk-shadow{ background:linear-gradient(160deg,#6b4ea3,#33225a); }
.sk-speak{ background:linear-gradient(160deg,#2f8f6b,#14523b); }
.sk-card.soon{ filter:saturate(.35); opacity:.75; cursor:default; }
.sk-card.soon .sk-count{ background:rgba(0,0,0,.25); }

/* shadowing episode list */
.ep-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px; }
.ep-card{ background:var(--card); border:1px solid var(--line); border-radius:18px; overflow:hidden; transition:transform .18s, box-shadow .18s; }
.ep-card:hover{ transform:translateY(-4px); box-shadow:0 14px 28px rgba(120,90,20,.16); }
.ep-thumb{ aspect-ratio:16/9; background-size:cover; background-position:center; position:relative; }
.ep-thumb .play{ position:absolute; inset:0; display:grid; place-items:center; font-size:34px; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.5); }
.ep-tier{ position:absolute; left:10px; top:10px; z-index:2; font-size:.72rem; font-weight:800; padding:4px 9px; border-radius:999px; box-shadow:0 2px 8px rgba(0,0,0,.25); }
.ep-tier.free{ background:#ecfdf3; color:#15803d; }
.ep-tier.premium{ background:linear-gradient(135deg,#f6e3a8,#d4a64a); color:#3a2a0c; }
.ep-thumb .dur{ position:absolute; right:10px; bottom:10px; background:rgba(0,0,0,.7); color:#fff; font-size:.75rem; font-weight:700; padding:3px 7px; border-radius:6px; }
.ep-info{ padding:14px 16px 16px; }
.ep-info b{ display:block; font-family:var(--serif); font-weight:600; font-size:1.12rem; line-height:1.3; }
.ep-info span{ display:block; color:var(--ink-500); font-size:.85rem; margin-top:6px; }
.how{ background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px 22px; margin:0 0 26px; line-height:1.6; color:var(--ink-700); }
.how b{ color:var(--ink-900); }
.how ol{ margin:8px 0 0; padding-left:20px; }

@media (max-width:980px){ .lv-grid{ grid-template-columns:repeat(2,1fr); } .sk-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .sk-card{ min-height:0; } }
@media (max-width:560px){ .sk-grid{ grid-template-columns:1fr; } }
@media (max-width:560px){
  .ge-top-in{ padding:12px 16px; } .ge-nav{ gap:12px; font-size:.88rem; } .ge-nav .hide-sm{ display:none; }
  .ge-wrap{ padding:18px 16px 48px; } .ge-hero{ padding:56px 18px 50px; border-radius:22px; }
  .lv-grid{ grid-template-columns:1fr; }
}

/* shadowing list: centred heading, tap-to-open instructions (2026-10-09) */
.dash-center{ flex-direction:column; text-align:center; gap:0; margin:8px 0 16px; }
.dash-center .lv-ico{ width:84px; height:84px; font-size:40px; }
details.how{ max-width:640px; margin:0 auto 20px; padding:0; overflow:hidden; }
details.how summary{ list-style:none; cursor:pointer; padding:10px 20px; font-weight:800; color:var(--ink-900); text-align:center; }
details.how summary::-webkit-details-marker{ display:none; }
details.how summary::after{ content:" ▾"; color:var(--amber-600); }
details.how[open] summary::after{ content:" ▴"; }
details.how ol{ margin:0; padding:0 22px 18px 42px; }
.ep-list.ep-center{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
@media (max-width:980px){ .ep-list.ep-center{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:720px){ .ep-list.ep-center{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .ep-info b{ font-size:1rem; } }

/* "How to shadow": purple theme, centred steps that appear one by one when opened (2026-10-10) */
details.how{ background:linear-gradient(160deg,#f3edff,#e8defd); border:1px solid #d6c7f7; color:#3d2a6e; }
details.how summary{ color:#3d2a6e; }
details.how summary::after{ color:#6b4ea3; }
details.how ol{ list-style:none; counter-reset:step; padding:2px 22px 20px; margin:0; text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px; }
details.how li{ counter-increment:step; max-width:520px; color:#3d2a6e; line-height:1.55; opacity:0; transform:translateY(10px); }
details.how li::before{ content:counter(step); display:block; width:28px; height:28px; margin:0 auto 6px; border-radius:50%; background:#6b4ea3; color:#fff; font-weight:800; line-height:28px; font-size:.9rem; }
details.how li b{ color:#6b4ea3; }
details.how[open] li{ animation:howIn .45s ease forwards; }
details.how[open] li:nth-child(1){ animation-delay:.05s; }
details.how[open] li:nth-child(2){ animation-delay:.45s; }
details.how[open] li:nth-child(3){ animation-delay:.85s; }
details.how[open] li:nth-child(4){ animation-delay:1.25s; }
@keyframes howIn{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ details.how[open] li{ animation:none; opacity:1; transform:none; } }