@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Manrope:wght@500;600;700&display=swap');

:root { --navy:#10253f; --blue:#1864d8; --cyan:#58d4ea; --ink:#172a43; --muted:#728096; --line:#dce4ef; --surface:#fff; --bg:#f2f6fb; }
* { box-sizing:border-box; }
html, body { margin:0; width:100%; height:100%; overflow:hidden; font-family:'IBM Plex Sans Arabic',sans-serif; color:var(--ink); background:radial-gradient(circle at 85% 5%,#e6f7fb 0,transparent 25rem),var(--bg); }
button, a { font:inherit; }
button { cursor:pointer; }
.app-shell { height:100vh; height:100dvh; overflow:hidden; }
.topbar { height:82px; display:flex; align-items:center; padding:0 clamp(20px,5vw,76px); background:rgba(255,255,255,.88); border-bottom:1px solid var(--line); backdrop-filter:blur(14px); }
.brand { display:flex; gap:12px; align-items:center; color:var(--navy); text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:44px; height:44px; border-radius:14px; background:var(--navy); color:white; font:700 22px Manrope; box-shadow:0 8px 20px #10253f2b; }
.brand strong,.brand small { display:block; }.brand strong{font-size:18px}.brand small{color:var(--muted);font-size:12px;margin-top:1px}
main { width:min(960px,100%); height:calc(100vh - 82px); height:calc(100dvh - 82px); margin:auto; padding:22px clamp(18px,4vw,48px); overflow:hidden; }
.learning-grid { display:grid; grid-template-rows:auto minmax(0,1fr); height:100%; gap:16px; direction:rtl; }
.subject-picker { display:grid; grid-template-columns:120px minmax(260px,390px); align-items:center; gap:14px; }
.subject-picker label { color:var(--navy); font-weight:700; }
.select-shell { position:relative; display:flex; align-items:center; min-height:54px; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 10px 30px #27486610; overflow:hidden; transition:.2s ease; }
.select-shell:focus-within { border-color:var(--blue); box-shadow:0 0 0 4px #1864d815; }
.select-shell.disabled { padding:0 18px; color:var(--muted); }
.select-shell select { width:100%; min-height:52px; padding:0 48px 0 42px; appearance:none; border:0; outline:0; color:var(--navy); background:transparent; font-weight:700; cursor:pointer; }
.select-icon { position:absolute; right:15px; display:grid; place-items:center; width:25px; height:25px; border-radius:8px; color:#fff; background:var(--blue); font:700 11px Manrope; pointer-events:none; }
.select-arrow { position:absolute; left:16px; color:var(--blue); font:700 22px Manrope; pointer-events:none; transform:translateY(-2px); }
.panel-title { display:flex; justify-content:space-between; align-items:center; padding:4px 8px 15px; font-weight:700; color:var(--navy); }
.count { display:grid; place-items:center; min-width:27px; height:27px; padding:0 7px; border-radius:9px; background:#e8f7fb; color:#137a96; font:700 13px Manrope; }
.subjects-list { display:grid; gap:7px; }
.subject-item { width:100%; border:0; border-radius:14px; background:transparent; color:#526174; display:flex; align-items:center; gap:11px; text-align:right; padding:12px; transition:.2s ease; }
.subject-item:hover { background:#f3f7fb; color:var(--navy); transform:translateX(-2px); }
.subject-item.active { background:var(--navy); color:#fff; box-shadow:0 9px 22px #10253f2b; }
.subject-icon { width:26px; height:26px; display:grid; place-items:center; border:1px solid currentColor; border-radius:9px; font:600 13px Manrope; opacity:.85; }
.study-area { min-width:0; min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr) auto auto; }
.study-heading { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:12px; }
.eyebrow { display:block; color:var(--blue); font-weight:700; font-size:13px; margin-bottom:3px; }
h1 { margin:0; color:var(--navy); font-size:clamp(26px,3vw,38px); line-height:1.35; }
.shuffle-button { border:1px solid var(--line); color:var(--navy); background:#fff; border-radius:13px; padding:10px 15px; transition:.2s; }
.shuffle-button:hover:not(:disabled) { border-color:var(--cyan); box-shadow:0 8px 22px #1957a414; }.shuffle-button:disabled{opacity:.45;cursor:not-allowed}
.flashcard { display:block; width:100%; height:100%; min-height:0; padding:0; border:0; border-radius:30px; background:transparent; perspective:1400px; -webkit-perspective:1400px; color:inherit; -webkit-appearance:none; appearance:none; overflow:hidden; }
.card-inner { display:block; width:100%; height:100%; min-height:0; position:relative; transform-style:preserve-3d; -webkit-transform-style:preserve-3d; transition:transform .65s cubic-bezier(.2,.75,.2,1); }
.flashcard.flipped .card-inner { transform:rotateY(180deg); -webkit-transform:rotateY(180deg); }
.card-face { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; transform:translateZ(0); -webkit-transform:translateZ(0); display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:30px; padding:45px; overflow:hidden; transition:opacity .2s linear; }
.card-front { background:linear-gradient(145deg,#fff 15%,#f7fbff); border:1px solid #d9e4f0; box-shadow:0 26px 65px #2748661c; }
.card-front:after,.card-back:after { content:""; position:absolute; width:240px; height:240px; border:55px solid #55d1e815; border-radius:50%; inset:auto -105px -120px auto; }
.card-front { opacity:1; z-index:2; }
.card-back { transform:rotateY(180deg) translateZ(1px); -webkit-transform:rotateY(180deg) translateZ(1px); opacity:0; z-index:1; color:#fff; background:linear-gradient(145deg,#10253f,#19436b); box-shadow:0 28px 70px #10253f42; }
.flashcard.flipped .card-front { opacity:0; pointer-events:none; }
.flashcard.flipped .card-back { opacity:1; z-index:3; }
.card-back:after { border-color:#63dcef18; }
.language-label { position:absolute; top:28px; right:30px; padding:7px 12px; border-radius:10px; background:#e7f7fb; color:#147e97; font-weight:700; font-size:13px; }
.card-back .language-label { color:#bceefa; background:#ffffff12; direction:ltr; font-family:Manrope,sans-serif; }
.sentence { z-index:1; max-width:760px; font-weight:700; font-size:clamp(29px,4vw,48px); line-height:1.6; text-align:center; }
.english { font-family:Manrope,'IBM Plex Sans Arabic',sans-serif; line-height:1.35; letter-spacing:-.02em; }
.flip-hint { position:absolute; bottom:27px; color:var(--muted); font-size:14px; }.card-back .flip-hint{color:#c7d7e7}
.progress-row { display:flex; justify-content:space-between; color:#627186; font-size:14px; margin:12px 2px 6px; }
.progress-track { height:7px; border-radius:9px; background:#dfe8f1; overflow:hidden; direction:rtl; }
.progress-track span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--blue),var(--cyan)); transition:width .3s ease; }
.navigation-row { display:grid; grid-template-columns:150px 1fr 150px; align-items:center; gap:18px; margin-top:12px; }
.nav-button { border-radius:14px; padding:12px 18px; font-weight:700; transition:.2s; }.nav-button:disabled{opacity:.35;cursor:not-allowed}
.nav-button.primary { border:1px solid var(--navy); background:var(--navy); color:white; }.nav-button.secondary{border:1px solid var(--line);background:#fff;color:var(--navy)}
.nav-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 9px 20px #183c6120}
.dots { display:flex; justify-content:center; gap:7px; direction:ltr; }.dots span{width:7px;height:7px;border-radius:50%;background:#c8d2de}.dots span.active{width:24px;border-radius:7px;background:var(--blue)}
.state-card,.loading-card { min-height:320px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:white; border:1px solid var(--line); border-radius:26px; padding:36px; box-shadow:0 20px 55px #27486614; }
.state-card h2{margin:0 0 8px;color:var(--navy)}.state-card p{color:var(--muted)}.state-card button,.state-card a{border:0;border-radius:12px;background:var(--navy);color:#fff;text-decoration:none;padding:10px 18px}.loading-line{color:var(--muted);padding:12px}
@media(max-width:800px){.topbar{height:62px;padding:0 16px}.brand-mark{width:38px;height:38px;border-radius:11px}.brand small{display:none}main{height:calc(100vh - 62px);height:calc(100dvh - 62px);padding:12px}.learning-grid{gap:10px}.subject-picker{grid-template-columns:1fr;gap:4px}.subject-picker label{font-size:14px}.select-shell{width:100%;min-height:48px}.select-shell select{min-height:46px;font-size:16px}.study-heading{align-items:center;margin-bottom:8px}.card-face{padding:38px 24px}.navigation-row{grid-template-columns:1fr 1fr;gap:10px;margin-top:9px}.nav-button{min-height:46px}.dots{display:none}}
@media(max-width:480px){.study-heading{align-items:center}.eyebrow{font-size:12px;margin:0}h1{font-size:22px}.shuffle-button{font-size:0;padding:8px 12px;flex:0 0 auto}.shuffle-button span{font-size:19px}.card-face{border-radius:22px;padding:50px 18px 42px}.flashcard{border-radius:22px}.language-label{top:16px;right:16px}.sentence{font-size:clamp(23px,7.4vw,30px);line-height:1.45}.flip-hint{bottom:15px;font-size:12px}.progress-row{margin-top:8px}.nav-button{padding:8px}.topbar{z-index:10}}
@media(max-width:950px) and (max-height:600px) and (orientation:landscape){.topbar{display:none}.app-shell{height:100dvh}main{width:100%;max-width:none;height:100dvh;padding:7px 10px}.learning-grid{position:relative;gap:5px;padding-top:42px}.subject-picker{position:absolute;inset:0 0 auto auto;z-index:5;display:grid;grid-template-columns:90px 230px;gap:6px;height:38px}.subject-picker label{align-self:center;font-size:13px}.select-shell,.select-shell select{min-height:38px;height:38px}.study-heading{position:absolute;top:0;left:0;z-index:6;width:calc(100% - 335px);height:38px;margin:0}.study-heading .eyebrow{display:none}.study-heading h1{font-size:20px}.shuffle-button{height:38px;padding:5px 10px}.study-area{position:relative;grid-template-rows:minmax(0,1fr) 22px 5px 42px}.study-heading+ .flashcard{grid-row:1}.card-face{border-radius:18px;padding:38px 20px 30px}.flashcard{border-radius:18px}.language-label{top:10px;right:12px;padding:4px 9px}.sentence{font-size:clamp(22px,4vw,34px);line-height:1.3}.flip-hint{bottom:8px}.progress-row{grid-row:2;margin:3px 2px 0;font-size:12px}.progress-track{grid-row:3;height:4px}.navigation-row{grid-row:4;margin-top:4px;grid-template-columns:1fr 1fr}.nav-button{min-height:38px;padding:5px}.dots{display:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.card-inner,.subject-item,.nav-button{transition:none!important}}