/* platform-theme.css — منصة المذاكرة | تصميم فقط. يُحمَّل بعد content-media-style.css. */
:root{
  --bg-deep:#0a3d3d;--bg-card:#0f4f4f;--bg-card-hover:#145f5f;--accent:#2dd4a8;--accent-light:#4adeb5;--accent-dark:#1fa382;
  --on-accent:#053a31;--text-primary:#e8f5f0;--text-secondary:#b7d4ce;--text-muted:#8fb5ad;
  --glass-border:rgba(45,212,168,.18);--line:rgba(45,212,168,.12);
  --danger:#ff7b72;--danger-bg:#4a1f22;--warning:#f5b041;--warning-bg:#4d3410;--success:#4ade80;--success-bg:#123f33;
  --radius:18px;--radius-sm:12px;--shadow:0 6px 24px rgba(0,0,0,.28);--ease:.2s ease;
  --bg:var(--bg-deep);--ink:var(--text-primary);--mut:var(--text-secondary);--c:var(--accent);--card:var(--bg-card);color-scheme:dark
}
html{-webkit-text-size-adjust:100%;background:radial-gradient(1100px 500px at 85% -10%,#0e5a55 0,transparent 60%),var(--bg-deep)}
body{font-family:Cairo,system-ui,sans-serif;line-height:1.7;background:transparent;color:var(--text-primary);overflow-x:hidden}
body h2{font-weight:900;letter-spacing:0}
body :where(p,h1,h2,h3,b,span,small){overflow-wrap:anywhere}

/* الرأس والتنقل */
body header.site-header{background:rgba(10,61,61,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--glass-border);box-shadow:0 4px 18px rgba(0,0,0,.25);gap:10px}
body .logo{display:flex;flex-direction:column;font-weight:900;color:var(--text-primary);line-height:1.3}
body .logo small{color:var(--accent-light);font-weight:700}
body .stars{background:rgba(45,212,168,.12);color:var(--accent-light);border:1px solid var(--glass-border);font-weight:900}
body .owner-profile-card{background:rgba(255,255,255,.04);border:1px solid var(--glass-border);box-shadow:none;color:var(--text-primary)}
body .owner-profile-photo{border-color:var(--accent);background:var(--bg-card)}
body .owner-profile-copy span{color:var(--text-secondary)}
body #studentLoginBtn{border-radius:99px}
body nav{background:rgba(10,61,61,.96);backdrop-filter:blur(10px);border-top:1px solid var(--glass-border);box-shadow:0 -4px 18px rgba(0,0,0,.25);justify-content:center}
body nav button{position:relative;color:var(--text-secondary);font-weight:700;max-width:140px;transition:color var(--ease),background var(--ease)}
body nav button b{filter:grayscale(.4);transition:transform var(--ease)}
body nav button:hover{background:rgba(45,212,168,.06)}
body nav button.on{color:var(--accent);background:rgba(45,212,168,.1)}
body nav button.on b{filter:none;transform:translateY(-1px)}
body nav button.on::before{content:"";position:absolute;top:0;inset-inline:28%;height:3px;border-radius:0 0 4px 4px;background:var(--accent)}
body main{padding:18px 16px}
body h2{color:var(--text-primary)}

/* توحيد الألوان مع الحفاظ على حالات وأحداث الأزرار الأصلية */
body :where(button,.btn,[role="button"],input,select,textarea){font:inherit}
body :where(button,.btn,[role="button"]){transition:background-color var(--ease),border-color var(--ease),color var(--ease),transform var(--ease)}
body :where(button,.btn,[role="button"]):focus-visible,body :where(a,input,select,textarea):focus-visible{outline:2px solid var(--accent-light);outline-offset:3px}
body :where(input,select,textarea){max-width:100%;border-radius:var(--radius-sm)}
body :where(img,video,iframe,canvas,svg){max-width:100%}
body :where(.card,.panel,.box,.lesson-card,.deck-card,.exam-card,.stat-card){border-radius:var(--radius)}
body :where(.card,.panel,.lesson-card,.deck-card,.exam-card,.stat-card){border-color:var(--glass-border)}
body a{color:var(--accent-light)}
body a:hover{color:var(--accent)}
@media(max-width:700px){
  body main{padding:14px 10px}
  body header.site-header{flex-wrap:wrap;padding-inline:10px}
  body nav{justify-content:flex-start;overflow-x:auto;overscroll-behavior-inline:contain}
  body nav button{flex:0 0 auto;max-width:none;white-space:nowrap}
  body :where(.modal,.dialog,.popup){max-width:100%;max-height:90dvh;overflow:auto}
}
@media(prefers-reduced-motion:reduce){
  body *,body *::before,body *::after{scroll-behavior:auto;animation-duration:.01ms;animation-iteration-count:1;transition-duration:.01ms}
}


/* ===== تحسينات إضافية من نسخة التصميم المرسلة ===== */
html{-webkit-text-size-adjust:100%}
html{background:radial-gradient(1100px 500px at 85% -10%,#0e5a55 0,transparent 60%),var(--bg-deep)}
body main{padding:18px 16px}
body :where(p,h1,h2,h3,b,span,small){overflow-wrap:anywhere}
body :where(button,.btn,[role="button"],input,select,textarea){font:inherit}
body :where(button,.btn,[role="button"]){transition:background-color var(--ease),border-color var(--ease),color var(--ease),transform var(--ease)}
body :where(button,.btn,[role="button"]):focus-visible,body :where(a,input,select,textarea):focus-visible{outline:2px solid var(--accent-light);outline-offset:3px}
body :where(input,select,textarea){max-width:100%;border-radius:var(--radius-sm)}
body :where(img,video,iframe,canvas,svg){max-width:100%}
body :where(.card,.panel,.box,.lesson-card,.deck-card,.exam-card,.stat-card){border-radius:var(--radius)}
body :where(.card,.panel,.lesson-card,.deck-card,.exam-card,.stat-card){border-color:var(--glass-border)}
body a{color:var(--accent-light)}
body a:hover{color:var(--accent)}
@media(max-width:700px){
  body main{padding:14px 10px}
  body header.site-header{flex-wrap:wrap;padding-inline:10px}
  body nav{justify-content:flex-start;overflow-x:auto;overscroll-behavior-inline:contain}
  body nav button{flex:0 0 auto;max-width:none;white-space:nowrap}
  body :where(.modal,.dialog,.popup){max-width:100%;max-height:90dvh;overflow:auto}
}
@media(prefers-reduced-motion:reduce){
  body *,body *::before,body *::after{scroll-behavior:auto;animation-duration:.01ms;animation-iteration-count:1;transition-duration:.01ms}
}

/* ===== شريط التنقل السفلي: زجاجي وشفاف لإظهار الإضاءات خلفه ===== */
body nav{
  background:rgba(7,42,43,.48);
  -webkit-backdrop-filter:blur(14px) saturate(135%);
  backdrop-filter:blur(14px) saturate(135%);
  border-top:1px solid rgba(74,222,181,.24);
  box-shadow:0 -8px 28px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.035);
  padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));
  gap:6px;
}
body nav button{
  border:1px solid transparent;
  border-radius:14px;
  padding:9px 12px;
  background:rgba(15,79,79,.20);
  color:rgba(232,245,240,.86);
  min-height:44px;
}
body nav button:hover{
  background:rgba(45,212,168,.12);
  border-color:rgba(74,222,181,.16);
  color:#e8fff8;
}
body nav button.on{
  color:#65f0c4;
  background:rgba(45,212,168,.16);
  border-color:rgba(74,222,181,.26);
  box-shadow:inset 0 0 16px rgba(45,212,168,.06),0 2px 12px rgba(0,0,0,.08);
}
body nav button.on::before{
  top:-1px;
  height:2px;
  inset-inline:30%;
  box-shadow:0 0 10px rgba(45,212,168,.55);
  border-radius:0 0 5px 5px;
}
body nav button b{filter:none;opacity:.9}
body nav button.on b{color:var(--accent-light);filter:none}
@media(max-width:700px){
  body nav{
    gap:4px;
    padding:6px 7px calc(6px + env(safe-area-inset-bottom,0px));
    background:rgba(7,42,43,.42);
    -webkit-backdrop-filter:blur(12px) saturate(130%);
    backdrop-filter:blur(12px) saturate(130%);
  }
  body nav button{
    padding:8px 10px;
    min-height:42px;
    border-radius:12px;
    font-size:.9rem;
  }
}
/* خَلّي الحاويات الرئيسية شبه شفافة، مع الحفاظ على وضوح النصوص */
body main{background:transparent}
body :where(.owner-profile-card,.card,.panel,.box,.lesson-card,.deck-card,.exam-card,.stat-card){
  background-color:rgba(15,79,79,.72);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}


/* ===== GLASSMORPHISM شامل لصفحة الطالب فقط ===== */
/* هوية زجاجية موحّدة: خلفية ليلية تركوازية، أسطح شفافة، وحدود مضيئة ناعمة.
   هذه القواعد تخص صفحة الطالب فقط ولا تغيّر أي وظيفة أو سلوك JavaScript. */
body{
  background:
    radial-gradient(ellipse at 12% 10%,rgba(45,212,168,.12),transparent 34%),
    radial-gradient(ellipse at 88% 28%,rgba(20,95,95,.42),transparent 38%),
    linear-gradient(145deg,#062f31 0%,#0a3d3d 48%,#082f34 100%);
  background-attachment:fixed;
}
body header{
  background:rgba(5,35,38,.68);
  -webkit-backdrop-filter:blur(20px) saturate(145%);
  backdrop-filter:blur(20px) saturate(145%);
  border-bottom:1px solid rgba(106,255,216,.17);
  box-shadow:0 8px 32px rgba(0,0,0,.16);
}
body nav{
  background:rgba(5,35,38,.58);
  -webkit-backdrop-filter:blur(22px) saturate(155%);
  backdrop-filter:blur(22px) saturate(155%);
  border-top:1px solid rgba(106,255,216,.2);
}
body main{isolation:isolate}
body #app{color:var(--text-primary)}
body :where(.grid > .card,.student-hero,.student-panel,.student-panels > *, .student-dashboard > *, .stat > div, .recovery-card, .fc, .face, .opt, .mb, .mh, .hint, .pdfbox, .bar, .row){
  border-color:rgba(106,255,216,.2);
}
body .grid > .card,
body .student-hero,
body .student-panel,
body .student-panels > *,
body .student-dashboard > *,
body .stat > div,
body .recovery-card,
body .face,
body .opt,
body .mb,
body .mh,
body .hint,
body .pdfbox{
  background:linear-gradient(145deg,rgba(20,86,83,.58),rgba(5,42,47,.54));
  color:var(--text-primary);
  border:1px solid rgba(106,255,216,.19);
  box-shadow:0 12px 34px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.055);
  -webkit-backdrop-filter:blur(18px) saturate(135%);
  backdrop-filter:blur(18px) saturate(135%);
}
body .grid > .card{
  border-radius:22px;
  padding:17px;
  box-shadow:0 12px 30px rgba(0,0,0,.17),inset 0 1px 0 rgba(255,255,255,.06);
  cursor:pointer;
}
body .grid > .card:hover{
  border-color:rgba(74,222,181,.42);
  box-shadow:0 16px 38px rgba(0,0,0,.23),0 0 22px rgba(45,212,168,.07),inset 0 1px 0 rgba(255,255,255,.08);
  transform:translateY(-3px);
}
body .card h3,body .student-hero h2,body .student-panel h3{color:#effff9}
body .card p,body .student-hero p,body .student-panel p{color:rgba(222,245,239,.78)}
body .tags span,body .student-badge,body .chip{
  background:rgba(255,255,255,.055);
  color:#d8f7ee;
  border:1px solid rgba(106,255,216,.16);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
body .chip.on{
  color:#052f29;
  background:linear-gradient(135deg,#65f0c4,#2dd4a8);
  border-color:rgba(106,255,216,.65);
  box-shadow:0 4px 18px rgba(45,212,168,.2);
}
body .go,body .big,body .btn.pr{
  color:#052f29;
  background:linear-gradient(135deg,#65f0c4,#2dd4a8);
  border:1px solid rgba(160,255,229,.52);
  box-shadow:0 6px 18px rgba(45,212,168,.16),inset 0 1px 0 rgba(255,255,255,.38);
}
body .btn,body .mh button,body .mh a{
  color:#e8f8f3;
  background:rgba(255,255,255,.065);
  border:1px solid rgba(106,255,216,.2);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
body .btn.ok{background:rgba(34,197,94,.19);color:#a8ffc5;border-color:rgba(74,222,128,.48)}
body .btn.no{background:rgba(245,158,11,.16);color:#ffe0a3;border-color:rgba(245,176,65,.4)}
body .mh button.on{color:#052f29;background:linear-gradient(135deg,#65f0c4,#2dd4a8);border-color:transparent}
body .fcard .face{border-radius:26px}
body .face .lt,body .face .sn{color:var(--accent-light)}
body .face .nt{color:rgba(222,245,239,.78)}
body .opts .opt{
  background:rgba(12,68,69,.58);
  color:var(--text-primary);
  border:1px solid rgba(106,255,216,.2);
  border-radius:18px;
}
body .opts .opt:hover{background:rgba(45,212,168,.13);border-color:rgba(106,255,216,.48)}
body .opts .opt.good{background:rgba(34,197,94,.16);border-color:#4ade80;color:#c8ffda}
body .opts .opt.bad{background:rgba(239,68,68,.15);border-color:#ff7b72;color:#ffd6d2}
body .prog{background:rgba(255,255,255,.1);border:1px solid rgba(106,255,216,.1)}
body .prog i{background:linear-gradient(90deg,#1fa382,#65f0c4);box-shadow:0 0 12px rgba(45,212,168,.3)}
body .bar input[type=search],body .bar select,
body .recovery-card input[type=password],body .recovery-card input[type=text],body .recovery-card input[type=email],
body input,body select,body textarea{
  color:#edfff9;
  background:rgba(4,35,39,.52);
  border:1px solid rgba(106,255,216,.22);
  box-shadow:inset 0 1px 4px rgba(0,0,0,.12);
}
body input::placeholder,body textarea::placeholder{color:rgba(205,235,227,.55)}
body .bar select option{background:#0a3d3d;color:#e8f5f0}
body .done{color:#65f0a0}
body .empty{color:rgba(222,245,239,.72)}
body .student-avatar{background:rgba(45,212,168,.13);box-shadow:0 0 28px rgba(45,212,168,.08)}
body .student-badge{border-radius:999px}
body .student-hero{background:linear-gradient(135deg,rgba(19,95,86,.7),rgba(5,42,47,.64))}
body #modal{background:rgba(0,12,15,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
body #modal .mb{background:rgba(7,43,46,.94)}
body #modal .mv{background:#02090b}
body .pdfbox{background:linear-gradient(145deg,rgba(20,86,83,.7),rgba(5,42,47,.7));color:var(--text-primary)}
body .hint{color:#dffcf3}
body .recovery-card{color:var(--text-primary)}
body .recovery-card p,body .recovery-card .lnk{color:var(--text-secondary)}
body .recovery-card input:focus{outline:2px solid rgba(101,240,196,.45);border-color:var(--accent-light)}
body .say{background:linear-gradient(135deg,#65f0c4,#2dd4a8);color:#052f29;box-shadow:0 8px 22px rgba(45,212,168,.18)}
body .stat b{color:var(--accent-light)}
body :where(.student-panel,.student-hero,.recovery-card,.grid > .card,.stat > div,.face,.opt,.mb){
  transition:background-color .22s ease,border-color .22s ease,box-shadow .22s ease,transform .22s ease;
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body .grid > .card,
  body .student-hero,
  body .student-panel,
  body .student-panels > *,
  body .student-dashboard > *,
  body .stat > div,
  body .recovery-card,
  body .face,
  body .opt,
  body .mb,
  body .mh,
  body .hint,
  body .pdfbox,
  body nav,
  body header{
    -webkit-backdrop-filter:blur(20px) saturate(145%);
    backdrop-filter:blur(20px) saturate(145%);
  }
}
@media(max-width:700px){
  body .grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:12px}
  body .grid > .card{padding:14px;border-radius:19px}
  body .student-panels{grid-template-columns:minmax(0,1fr)}
  body .opts{grid-template-columns:minmax(0,1fr);gap:9px}
  body .opts .opt{min-height:68px;font-size:18px}
  body .student-hero{padding:17px;border-radius:21px}
  body .student-panel{padding:14px}
}
@media(prefers-reduced-motion:reduce){
  body :where(.grid > .card,.student-panel,.student-hero,.recovery-card,.face,.opt,.mb){transition:none}
}


/* ===== PRO GLASS HOVER GLOW — STUDENT PAGE ===== */
/* توهج زجاجي راقٍ عند المرور: موحّد على عناصر صفحة الطالب، دون لمس وظائفها. */
body :where(a,button,.btn,.big,.go,.chip,.opt,.card,.face,.student-panel,.student-hero,.student-badge,.stat > div,.recovery-card,.mh a,.mh button,[role="button"],input,select,textarea){
  --hover-glow:rgba(45,212,168,.22);
  position:relative;
  transition:
    color .22s ease,
    background-color .22s ease,
    border-color .22s ease,
    box-shadow .28s ease,
    filter .28s ease,
    transform .22s ease;
}
@media (hover:hover) and (pointer:fine){
  body :where(a,button,.btn,.big,.go,.chip,.opt,.card,.face,.student-panel,.student-hero,.student-badge,.stat > div,.recovery-card,.mh a,.mh button,[role="button"]):hover{
    border-color:rgba(101,240,196,.58);
    box-shadow:
      0 0 0 1px rgba(101,240,196,.08),
      0 0 14px rgba(45,212,168,.16),
      0 0 30px rgba(45,212,168,.09),
      inset 0 1px 0 rgba(255,255,255,.10);
    filter:brightness(1.055);
  }
  body :where(button,.btn,.big,.go,.chip,.opt,.card,.face,.student-panel,.student-hero,.mh a,.mh button,[role="button"]):hover{
    transform:translateY(-2px);
  }
  body nav button:hover{
    color:#eafff8;
    background:rgba(45,212,168,.13);
    box-shadow:0 0 18px rgba(45,212,168,.16),inset 0 1px 0 rgba(255,255,255,.08);
  }
  body input:hover,body select:hover,body textarea:hover{
    border-color:rgba(101,240,196,.48);
    box-shadow:0 0 0 1px rgba(101,240,196,.07),0 0 18px rgba(45,212,168,.09),inset 0 1px 4px rgba(0,0,0,.12);
  }
}
body :where(a,button,.btn,.big,.go,.chip,.opt,.card,.face,.student-panel,.student-hero,.student-badge,.stat > div,.mh a,.mh button,[role="button"],input,select,textarea):focus-visible{
  outline:2px solid rgba(101,240,196,.8);
  outline-offset:3px;
  box-shadow:0 0 0 4px rgba(45,212,168,.1),0 0 24px rgba(45,212,168,.2);
}
body :where(button,.btn,.big,.go,.chip,.opt,.card,.face,.student-panel,.student-hero,.mh a,.mh button,[role="button"]):active{
  transform:translateY(0) scale(.985);
  box-shadow:0 0 16px rgba(45,212,168,.15),inset 0 1px 0 rgba(255,255,255,.08);
}
@media(hover:none),(pointer:coarse){
  body :where(button,.btn,.big,.go,.chip,.opt,.card,.face,.student-panel,.student-hero,.mh a,.mh button,[role="button"]):active{
    border-color:rgba(101,240,196,.5);
    box-shadow:0 0 18px rgba(45,212,168,.14),inset 0 1px 0 rgba(255,255,255,.08);
  }
}
@media(prefers-reduced-motion:reduce){
  body :where(a,button,.btn,.big,.go,.chip,.opt,.card,.face,.student-panel,.student-hero,.student-badge,.stat > div,.recovery-card,.mh a,.mh button,[role="button"],input,select,textarea){
    transition:none;
  }
  body :where(button,.btn,.big,.go,.chip,.opt,.card,.face,.student-panel,.student-hero,.mh a,.mh button,[role="button"]):hover,
  body :where(button,.btn,.big,.go,.chip,.opt,.card,.face,.student-panel,.student-hero,.mh a,.mh button,[role="button"]):active{
    transform:none;
  }
}

/* ===== FIX: RESTORE BACKGROUND LIGHT + PHONE BOTTOM NAV ===== */
/* لا نحذف ولا نستبدل أي جزء من CSS السابق أو كود التصميم المرسل. */
html{
  background:
    radial-gradient(ellipse 68% 42% at 8% 8%,rgba(45,212,168,.19),transparent 72%),
    radial-gradient(ellipse 62% 48% at 94% 38%,rgba(20,160,142,.16),transparent 72%),
    radial-gradient(ellipse 70% 48% at 48% 100%,rgba(45,212,168,.10),transparent 74%),
    linear-gradient(145deg,#062f31 0%,#0a3d3d 48%,#082f34 100%);
  background-color:#082f34;
}
body{
  background:
    radial-gradient(ellipse 55% 38% at 8% 5%,rgba(45,212,168,.17),transparent 72%),
    radial-gradient(ellipse 58% 42% at 94% 32%,rgba(20,160,142,.13),transparent 72%),
    radial-gradient(ellipse 62% 45% at 50% 100%,rgba(45,212,168,.08),transparent 74%),
    linear-gradient(145deg,#062f31 0%,#0a3d3d 48%,#082f34 100%);
  background-attachment:fixed;
}
@media(max-width:700px){
  html,body{background-attachment:scroll}
  /* شريط تنقل سفلي مريح على الموبايل: لا يضغط أسماء الأقسام ولا يكسرها */
  body nav#nav{
    display:flex;
    flex-wrap:nowrap;
    justify-content:flex-start;
    align-items:stretch;
    gap:5px;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    padding:7px 8px calc(7px + env(safe-area-inset-bottom,0px));
    min-height:calc(62px + env(safe-area-inset-bottom,0px));
    background:rgba(5,35,38,.58);
    border-top:1px solid rgba(101,240,196,.3);
    box-shadow:0 -8px 26px rgba(0,0,0,.20),0 0 22px rgba(45,212,168,.07);
    -webkit-backdrop-filter:blur(18px) saturate(150%);
    backdrop-filter:blur(18px) saturate(150%);
  }
  body nav#nav::-webkit-scrollbar{display:none}
  body nav#nav button{
    flex:0 0 auto;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:1px;
    min-width:70px;
    max-width:none;
    min-height:48px;
    padding:5px 8px;
    white-space:nowrap;
    word-break:keep-all;
    overflow-wrap:normal;
    line-height:1.25;
    font-size:11px;
    border:1px solid transparent;
    border-radius:12px;
    background:rgba(15,79,79,.24);
    color:rgba(232,245,240,.9);
    -webkit-tap-highlight-color:transparent;
  }
  body nav#nav button b{
    display:block;
    font-size:18px;
    line-height:1.1;
    margin:0;
  }
  body nav#nav button.on{
    background:rgba(45,212,168,.16);
    color:#65f0c4;
    border-color:rgba(101,240,196,.25);
    box-shadow:0 0 16px rgba(45,212,168,.12),inset 0 1px 0 rgba(255,255,255,.07);
  }
  body nav#nav button.on::before{
    top:-1px;
    inset-inline:24%;
    height:2px;
    box-shadow:0 0 12px rgba(45,212,168,.7);
  }
  body{padding-bottom:calc(78px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:380px){
  body nav#nav button{min-width:66px;padding-inline:6px;font-size:10px}
}