:root{
  --bgA: #0b1026;
  --bgB: #152a6e;
  --surface: rgba(255,255,255,.94);
  --surface2: rgba(255,255,255,.08);
  --ink:#0b1220;
  --muted:#6b7280;
  --muted2: rgba(255,255,255,.78);
  --line: rgba(17,24,39,.12);
  --line2: rgba(255,255,255,.14);
  --radius: 18px;
  --shadow: 0 14px 30px rgba(0,0,0,.22);
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,"Noto Sans Arabic","Noto Sans",sans-serif;
  color: var(--ink);
  background:#fff;
}
a{color:inherit;text-decoration:none}
.app-shell{min-height:100vh; display:flex; flex-direction:column}
.top{
  background: radial-gradient(1200px 600px at 60% 0%, rgba(63,101,255,.28), transparent 55%),
              radial-gradient(900px 500px at 15% 50%, rgba(255,255,255,.12), transparent 55%),
              linear-gradient(140deg, var(--bgA), var(--bgB));
  color:#fff;
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--line2);
}
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.brand{
  display:flex; align-items:center; gap:10px;
}
.brand img{height:26px; width:auto; filter: drop-shadow(0 6px 12px rgba(0,0,0,.22));}
.title{font-size:14px; font-weight:900; letter-spacing:.2px}
.iconbtn{
  width:38px; height:38px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.10);
}
.hero{
  margin-top: 12px;
  border:1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  padding: 12px;
  background: rgba(255,255,255,.08);
}
.hero .h1{font-size:18px; font-weight:950; margin:0}
.hero .muted{color: var(--muted2); font-size:12px; line-height:1.5; margin-top:6px}
.chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  font-size:12px;
  color:#fff;
  background: rgba(255,255,255,.06);
}

.content{
  flex:1;
  padding: 14px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.card{
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
}
.card.dark{
  background: radial-gradient(900px 500px at 20% 0%, rgba(63,101,255,.18), transparent 55%),
              linear-gradient(140deg, #0b1026, #152a6e);
  border-color: rgba(255,255,255,.14);
  color:#fff;
}
.h2{font-size:14px; font-weight:900; margin:0}
.p{color:var(--muted); font-size:12px; line-height:1.55; margin-top:6px}
.p.light{color: var(--muted2)}
.row{display:flex; gap:10px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius: 14px;
  font-weight:900;
  background:#fff;
}
.btn.primary{
  background:#111827;
  color:#fff;
  border-color:#111827;
}
.btn.block{width:100%}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.tile{
  border:1px solid var(--line);
  border-radius: 16px;
  padding:12px;
  background:#1b3968;
  
}
.tile strong{display:block; font-size:12px}
.tile small{color:var(--muted)}
.list{display:flex; flex-direction:column; gap:10px}
.linkrow{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:12px;
  border:1px solid var(--line);
  border-radius: 16px;
  background:#fff;
}
.linkrow .sub{color:var(--muted); font-size:12px; margin-top:4px}
.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:12px;
  color:var(--muted);
}
.progress{
  height:10px;
  border:1px solid var(--line);
  border-radius:999px;
  overflow:hidden;
  background:#f3f4f6;
}
.progress>div{height:100%; width:42%; background:#111827}
.fab{
  position:fixed;
  bottom: 74px;
  inset-inline-start: 14px;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: radial-gradient(50px 50px at 30% 20%, rgba(255,255,255,.35), transparent 55%),
              linear-gradient(140deg, #2f52ff, #00d4ff);
  box-shadow: 0 12px 26px rgba(0,0,0,.26);
  border: 1px solid rgba(255,255,255,.22);
  display:flex; align-items:center; justify-content:center;
  color:#0b1220;
  font-weight:950;
}
.tabbar{
  position:sticky;
  bottom:0;
  background:#fff;
  border-top: 1px solid var(--line);
  display:grid;
  grid-template-columns: repeat(5, 1fr);
}
.tab{
  padding:10px 6px;
  text-align:center;
  font-size:11px;
  color: var(--muted);
}
.tab.active{color:#111827; font-weight:950}
.hr{height:1px; background: rgba(17,24,39,.10); margin:12px 0}



/* ===== ThreeQ Cosmic Home (AI-first) ===== */
.cosmic-shell{
  background:
    radial-gradient(1200px 700px at 70% 10%, rgba(63,101,255,.28), transparent 55%),
    radial-gradient(900px 600px at 20% 40%, rgba(255,255,255,.10), transparent 55%),
    radial-gradient(3px 3px at 12% 22%, rgba(255,255,255,.55) 40%, transparent 45%),
    radial-gradient(2px 2px at 72% 18%, rgba(255,255,255,.35) 40%, transparent 45%),
    radial-gradient(2px 2px at 45% 64%, rgba(255,255,255,.28) 40%, transparent 45%),
    radial-gradient(2px 2px at 86% 72%, rgba(255,255,255,.22) 40%, transparent 45%),
    linear-gradient(140deg, #070b1b, #0f1f56 55%, #0b1026);
  color:#fff;
}
.cosmic-shell .top{
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.cosmic-shell .content{
  padding-top: 10px;
}
.cosmic-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.headerActions{
  display:flex;
  align-items:center;
  gap:10px;
}

.navBtn{
  width:40px;
  height:40px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:18px;
  line-height:1;
}
.navBtn:active{
  transform: translateY(1px);
}


.cosmic-brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.cosmic-brand .logoMark{
  width:38px; height:38px;
  border-radius:16px;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
}
.cosmic-brand .logoMark img{height:22px; width:auto;}
.cosmic-brand .brandText{
  display:flex; flex-direction:column;
  line-height:1.1;
}
.cosmic-brand .brandText .big{
  font-weight:950; font-size:16px; letter-spacing:.2px;
}
.cosmic-brand .brandText .small{
  color: rgba(255,255,255,.75);
  font-size:12px;
  margin-top:3px;
}
.bell{
  width:40px;height:40px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  display:flex; align-items:center; justify-content:center;
}
.heroRow{
  margin-top:12px;
  display:grid;
  grid-template-columns: 118px 1fr;
  gap:12px;
  align-items:center;
}
.botCard{
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  padding:10px;
  position:relative;
  overflow:hidden;
}
.botCard:before{
  content:"";
  position:absolute; inset:-80px -120px auto auto;
  width:220px; height:220px;
  background: radial-gradient(circle at 30% 30%, rgba(0,212,255,.25), transparent 60%);
}
.botFace{
  width:86px; height:86px;
  border-radius:28px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; /* مهم حتى الصورة تنقص داخل البابل */
}


.botFace .botPic{
  width: 58px;
  height: 58px;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 10px 18px rgba(0,0,0,.22);
}

.botFace span{
  font-size:28px;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.22));
}
.speech{
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.10);
  padding:12px;
}
.speech .q{
  font-weight:950;
  font-size:16px;
}

.icon .iconPic{
  width: 26px;
  height: 26px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 6px 12px rgba(0,0,0,.22);
}

.searchbar{
  margin-top:12px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  padding:10px 12px;
  display:flex;
  align-items:center;
  gap:10px;
}
.searchbar .hint{
  color: rgba(255,255,255,.75);
  font-size:12px;
  flex:1;
}
.searchbar .chipBtn{
  width:34px; height:34px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  display:flex; align-items:center; justify-content:center;
}
.cosmic-grid{
  margin-top:12px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
/* 1) احجز مساحة للنص بعيد عن الأيقونة */
.cosmic-tile{
  position: relative;
  padding: 14px;
  padding-bottom: 58px;        /* احجز مساحة تحت للنص إذا بدك الأيقونة تحت */
  min-height: 108px;
}

/* 2) ثبّت الأيقونة عمودياً بالوسط على اليمين */
.cosmic-tile .icon{
  top: 50%;
    position:absolute;
  inset-inline-end: 14px;
  bottom: 14px;               /* خليها تحت */
  width:44px; height:44px;
  border-radius:999px;        /* فقاعة دائرية مثل الصورة */

  transform: translateY(-50%);
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  display:flex; align-items:center; justify-content:center;
  font-size:22px;
  pointer-events:none;
}

.cosmic-tile:before{
  content:"";
  position:absolute; inset:auto auto -90px -70px;
  width:220px; height:220px;
  background: radial-gradient(circle at 40% 40%, rgba(63,101,255,.30), transparent 60%);
}
.cosmic-tile .label{
  font-weight:950;
  font-size:16px;
}
.cosmic-tile .sub{
  margin-top:4px;
  font-size:12px;
  color: rgba(255,255,255,.72);
}

.voicebar{
  margin-top:12px;
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  padding:10px 12px;
  display:flex;
  align-items:center;
  gap:10px;
}
.voicebar .pillLive{
  padding:8px 12px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.12);
  font-weight:950;
}
.voicebar .inputHint{
  flex:1;
  color: rgba(255,255,255,.78);
  font-size:13px;
}
.voicebar .mini{
  width:38px; height:38px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
}
.sos{
  position:fixed;
  bottom: 82px;
  inset-inline-end: 14px;
  width: 64px;
  height: 64px;
  border-radius: 24px;
  background:
    radial-gradient(55px 55px at 30% 20%, rgba(255,255,255,.32), transparent 55%),
    linear-gradient(140deg, rgba(63,101,255,.85), rgba(0,212,255,.55));
  box-shadow: 0 16px 30px rgba(0,0,0,.32);
  border: 1px solid rgba(255,255,255,.18);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#071026;
  font-weight:950;
  gap:2px;
}
.sos small{font-size:10px; opacity:.9}
.tabbar.cosmic{
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  height: 84px;
  padding: 10px 12px;
  border-radius: 26px;
  background: rgba(16, 24, 48, 0.55);
  border: 1px solid rgba(255,255,255,0.16);
  border-top: none;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 18px 60px rgba(0,0,0,0.45);
  z-index: 90;
}

.tabbar.cosmic .tab{
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 18px;
  color: rgba(255,255,255,0.88);
  text-decoration: none;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}

.tabbar.cosmic .tab:hover{
  background: rgba(255,255,255,0.88);
  color: #0b1224;
  transform: translateY(-1px);
}

.tabbar.cosmic .tab:hover .tabLabel{ color: #0b1224; }
.tabbar.cosmic .tab:hover .tabIcon{
  background: rgba(11,18,36,0.08);
  border-color: rgba(11,18,36,0.18);
}

.tabbar.cosmic .tabIcon{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
}

.tabbar.cosmic .tabIcon svg{ width: 22px; height: 22px; opacity: .92; }

.tabbar.cosmic .tabLabel{
  font-size: 12px;
  line-height: 1;
  letter-spacing: .2px;
  color: rgba(255,255,255,0.82);
  white-space: nowrap;
}

.tabbar.cosmic .tab.active{
  background: rgba(74, 140, 255, 0.18);
  color: #ffffff;
}

.tabbar.cosmic .tab.active .tabIcon{
  background: rgba(74, 140, 255, 0.35);
  border-color: rgba(140, 190, 255, 0.42);
  box-shadow: 0 10px 25px rgba(27, 94, 255, 0.25), inset 0 1px 0 rgba(255,255,255,0.28);
}

.tabbar.cosmic .tab.active .tabLabel{ color: #ffffff; font-weight: 800; }

.tabbar.cosmic .tab{color: rgba(255,255,255,.72)}
.tabbar.cosmic .tab.active{color:#fff}



/* ===== Patch v4: layout safety + unified cosmic theme ===== */
:root {
  --tabbar-h: 62px;
  --safe-gap: 14px;
  --ai-icon: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2064%2064%27%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3ClinearGradient%20id%3D%27g%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%271%27%20y2%3D%271%27%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%270%27%20stop-color%3D%27%233f65ff%27/%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%271%27%20stop-color%3D%27%2300d4ff%27/%3E%0A%20%20%20%20%3C/linearGradient%3E%0A%20%20%20%20%3CradialGradient%20id%3D%27r%27%20cx%3D%2730%25%27%20cy%3D%2730%25%27%20r%3D%2770%25%27%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%270%27%20stop-color%3D%27white%27%20stop-opacity%3D%27.55%27/%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%271%27%20stop-color%3D%27white%27%20stop-opacity%3D%270%27/%3E%0A%20%20%20%20%3C/radialGradient%3E%0A%20%20%3C/defs%3E%0A%20%20%3Crect%20x%3D%2710%27%20y%3D%2712%27%20width%3D%2744%27%20height%3D%2740%27%20rx%3D%2718%27%20fill%3D%27url%28%23g%29%27/%3E%0A%20%20%3Crect%20x%3D%2710%27%20y%3D%2712%27%20width%3D%2744%27%20height%3D%2740%27%20rx%3D%2718%27%20fill%3D%27url%28%23r%29%27/%3E%0A%20%20%3Ccircle%20cx%3D%2727%27%20cy%3D%2732%27%20r%3D%275%27%20fill%3D%27%23071026%27/%3E%0A%20%20%3Ccircle%20cx%3D%2741%27%20cy%3D%2732%27%20r%3D%275%27%20fill%3D%27%23071026%27/%3E%0A%20%20%3Cpath%20d%3D%27M24%2041c3%203%2013%203%2016%200%27%20fill%3D%27none%27%20stroke%3D%27%23071026%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27/%3E%0A%20%20%3Cpath%20d%3D%27M19%2018l-4-4M45%2018l4-4%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.7%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27/%3E%0A%20%20%3Ccircle%20cx%3D%2732%27%20cy%3D%2710%27%20r%3D%273%27%20fill%3D%27%2300d4ff%27/%3E%0A%3C/svg%3E");
}

.aiIcon {
  width: 26px;
  height: 26px;
  background-image: var(--ai-icon);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.25));
}

.cosmic-shell .content {
  /* prevent overlap with tabbar */
  padding-bottom: calc(var(--tabbar-h) + 18px);
}

.voicebar {
  position: sticky;
  bottom: calc(var(--tabbar-h) + 10px);
  z-index: 3;
}

.sos {
  bottom: calc(var(--tabbar-h) + 22px);
  z-index: 4;
}

.tabbar.cosmic {
  height: var(--tabbar-h);
  z-index: 5;
}
.tabbar.cosmic .tab {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
}
.tabIcon {
  width:22px; height:22px;
  display:flex; align-items:center; justify-content:center;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  font-size:14px;
}
.tabbar.cosmic .tab.active .tabIcon {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.18);
}

.cosmic-card {
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  padding: 12px;
}

.cosmic-linkrow {
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:12px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
}
.cosmic-linkrow .sub {
  color: rgba(255,255,255,.72);
  font-size:12px;
  margin-top:4px;
}
.cosmic-pill {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.82);
  font-size:12px;
}
.cosmic-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 12px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  color:#fff;
  font-weight:950;
}
.cosmic-btn.primary {
  background: rgba(255,255,255,.92);
  color:#071026;
  border-color: rgba(255,255,255,.92);
}



/* ===== Patch v6: Horizontal tabs (label right, icon left) + full cosmic theme ===== */

/* Make the whole app dark + glassy by default */
:root{
  --surface: rgba(255,255,255,.10);
  --surface2: rgba(255,255,255,.08);
  --ink: #ffffff;
  --muted: rgba(255,255,255,.72);
  --line: rgba(255,255,255,.14);
  --radius: 18px;
  --tabbar-h: 52px;
}

/* override any inline body backgrounds */
body{
  background:#050812 !important;
  color: var(--ink) !important;
}

/* starry / nebula background closer to the reference image */
.app-shell{
  background:
    radial-gradient(1200px 720px at 72% 0%, rgba(120,170,255,.30), transparent 58%),
    radial-gradient(980px 720px at 14% 42%, rgba(0,212,255,.20), transparent 62%),
    radial-gradient(780px 560px at 44% 92%, rgba(200,140,255,.16), transparent 64%),
    linear-gradient(140deg, #060a18, #0d1b49 55%, #090f24);
  color: #fff;
  min-height:100vh;
}

/* make all cards / rows "alive" */
.card, .linkrow, .pill, .chip, .list, .row{
  background:
    radial-gradient(220px 120px at 20% 20%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(140deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 28px rgba(0,0,0,.22);
}

.hr{background: rgba(255,255,255,.12)}

/* buttons */
.btn{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.16);
  color:#fff;
  backdrop-filter: blur(10px);
}
.btn.primary{
  background: rgba(255,255,255,.92);
  color:#071026;
  border-color: rgba(255,255,255,.92);
}

/* global muted text */
.p, .sub, .muted{
  color: rgba(255,255,255,.75) !important;
}

/* Tabbar: smaller, horizontal layout inside each tab item */
.tabbar{
  height: var(--tabbar-h);
  background: rgba(10,14,30,.88);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,.12);
}
.tab{
  display:flex;
  flex-direction: row;          /* label + icon inline */
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 6px 8px;
  color: rgba(255,255,255,.72);
  font-size: 11px;
  min-width:0;
}
.tab .tabLabel{
  text-align:right;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 64px;              /* avoid collisions */
}
.tab .tabIcon{
  width:20px; height:20px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 9px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  flex: 0 0 auto;
  font-size: 13px;
}
.tab.active{
  color:#fff;
  font-weight:950;
}
.tab.active .tabIcon{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.18);
}

/* Keep SOS and voicebar above the tabbar */
.sos{
  bottom: calc(var(--tabbar-h) + 30px) !important;
  z-index: 6;
}
.voicebar{
  bottom: calc(var(--tabbar-h) + 14px) !important;
  z-index: 5;
}



/* ===== Patch v7: Fix tab icons position (icon left of label) ===== */
.tabbar.cosmic .tab{
  /* override old column rule from previous patches */
  flex-direction: row !important; /* RTL: first item appears on the right -> label stays right, icon on left */
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 6px 8px !important;
}

.tabbar.cosmic .tabLabel{
  text-align: right !important;
  font-size: 11px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 64px !important;
}

.tabbar.cosmic .tabIcon{
  width: 20px !important;
  height: 20px !important;
  border-radius: 9px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.06) !important;
  flex: 0 0 auto !important;
}



/* ===== Patch v8: HARD force tab items inline (label right, icon left) ===== */
.tabbar, .tabbar.cosmic{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
}

.tabbar .tab, .tabbar.cosmic .tab{
  display:flex !important;
  flex-direction: row !important;   /* inline */
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

.tabbar .tab .tabLabel, .tabbar.cosmic .tab .tabLabel{
  order: 1 !important;             /* label first (right in RTL) */
  text-align: right !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 64px !important;
  font-size: 11px !important;
}

.tabbar .tab .tabIcon, .tabbar.cosmic .tab .tabIcon{
  order: 2 !important;             /* icon second (left in RTL) */
  width: 20px !important;
  height: 20px !important;
  border-radius: 9px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.06) !important;
  flex: 0 0 auto !important;
}

/* prevent any accidental vertical stacking from generic styles */
.tabbar .tab > div, .tabbar.cosmic .tab > div{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}



/* ===== Patch v9: Use single ThreeQ logo + global copyright footer ===== */
.brandLogo{
  height: 24px;
  width: auto;
  display:block;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.25));
}
.footer{
  position: sticky;
  bottom: 0;
  z-index: 4;
  padding: 10px 12px calc(var(--tabbar-h) + 10px);
  color: rgba(255,255,255,.70);
  font-size: 11px;
  text-align: center;
  background: transparent;
}
.footer .line{
  height:1px;
  background: rgba(255,255,255,.10);
  margin-bottom: 10px;
}



/* ===== Patch v10: Teachers page components ===== */
.segment{
  display:flex;
  gap:10px;
  padding:10px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
}
.segBtn{
  flex:1;
  text-align:center;
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.80);
  font-weight: 900;
  cursor: pointer;
  user-select:none;
}
.segBtn.active{
  background: rgba(255,255,255,.92);
  color: #071026;
  border-color: rgba(255,255,255,.92);
}
.teacherGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 12px;
}
.teacherCard{
  display:flex;
  gap:12px;
  align-items:center;
  padding:12px;
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(220px 120px at 20% 20%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(140deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 28px rgba(0,0,0,.22);
}
.teacherAvatar{
  width:66px; height:66px;
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  overflow:hidden;
  flex: 0 0 auto;
}
.teacherAvatar img{
  width:100%; height:100%;
  object-fit: cover;
  display:block;
}
.teacherMeta{flex:1; min-width:0;}
.teacherName{
  font-weight: 950;
  font-size: 16px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.teacherSub{
  margin-top:4px;
  color: rgba(255,255,255,.72);
  font-size: 12px;
  line-height: 1.4;
}
.badges{
  margin-top:8px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.85);
  font-size: 12px;
}
.ratingRow{
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.stars{
  display:flex;
  gap:3px;
  align-items:center;
}
.star{
  width:16px; height:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 6px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  font-size: 12px;
}
.rateText{
  color: rgba(255,255,255,.72);
  font-size: 12px;
}
.actions{
  display:flex;
  gap:8px;
}
.smallBtn{
  padding:8px 10px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color:#fff;
  font-weight: 900;
  font-size: 12px;
}
.smallBtn.primary{
  background: rgba(255,255,255,.92);
  color:#071026;
  border-color: rgba(255,255,255,.92);
}

/* Modal rating */
.modalMask{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display:none;
  align-items:center;
  justify-content:center;
  z-index: 20;
  padding: 18px;
}
.modal{
  width: min(420px, 100%);
  border-radius: 24px;
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(220px 120px at 20% 20%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(140deg, rgba(10,14,30,.95), rgba(10,14,30,.82));
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 46px rgba(0,0,0,.35);
  padding: 14px;
  color:#fff;
}
.modalHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.modalTitle{
  font-weight: 950;
  font-size: 16px;
}
.closeX{
  width:36px; height:36px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.ratingPick{
  display:flex;
  gap:8px;
  margin-top: 12px;
}
.pickStar{
  width:44px; height:44px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 18px;
  cursor:pointer;
}
.pickStar.active{
  background: rgba(255,255,255,.92);
  color:#071026;
  border-color: rgba(255,255,255,.92);
}
.textarea{
  margin-top: 12px;
  width:100%;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:#fff;
  padding: 10px 12px;
  min-height: 90px;
  outline:none;
}
.modalActions{
  display:flex;
  gap:10px;
  margin-top:12px;
}
.toast{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + 20px);
  background: rgba(255,255,255,.92);
  color:#071026;
  border-radius: 16px;
  padding: 10px 12px;
  font-weight: 950;
  font-size: 12px;
  display:none;
  z-index: 25;
}



/* ===== Patch v13: Flashcards page ===== */
.flashWrap{ margin-top: 12px; }
.flashTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.flashPill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
  font-size: 12px;
  font-weight: 900;
}
.flashCard{
  position: relative;
  width: 100%;
  min-height: 280px;
  border-radius: 28px;
  border:1px solid rgba(255,255,255,.14);
  transform-style: preserve-3d;
  transition: transform .65s cubic-bezier(.2,.9,.2,1);
  box-shadow: 0 20px 50px rgba(0,0,0,.28);
  background:
    radial-gradient(260px 140px at 20% 20%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(140deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  backdrop-filter: blur(10px);
}

.flashFace{
  position:absolute; inset:0;
  padding: 16px;

  -webkit-backface-visibility: hidden; /* ✅ مهم */
  backface-visibility: hidden;

  -webkit-transform: translateZ(0.1px);
  transform: translateZ(0.1px);

  display:flex;
  flex-direction:column;
  gap:12px;
}


.flashBadgeRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.flashTag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
  font-size: 12px;
  font-weight: 900;
}
.flashLvl{
  color: rgba(255,255,255,.72);
  font-size: 12px;
  font-weight: 900;
}
.flashQ{
  font-size: 18px;
  font-weight: 950;
  line-height: 1.7;
}
.flashA{
  font-size: 14px;
  line-height: 1.85;
  color: rgba(255,255,255,.86);
}
.flashHint{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color: rgba(255,255,255,.70);
  font-size: 12px;
}
.flashBtns{
  margin-top: 12px;
  display:flex;
  gap:10px;
}
.flashBtns .cosmic-btn{ flex:1; }
.progressDots{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top: 10px;
}
.dot{
  width:8px; height:8px;
  border-radius: 99px;
  background: rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.14);
}
.dot.active{
  background: rgba(255,255,255,.90);
  border-color: rgba(255,255,255,.90);
}


/* ===== Patch v16: Fix Arabic direction in flashcards ===== */
.flashQ, .flashA{
  direction: rtl;
  unicode-bidi: plaintext;
  text-align: right;
  letter-spacing: 0;
}



/* ===== Patch v17: Fix flashcards mirrored backface + SOS avatar ===== */

/* Flashcards: make 3D flip stable on iOS/Safari (prevents mirrored text on back face) */
.flashCard3D{
  perspective: 1200px;
    margin-top: 12px;

  -webkit-perspective: 1200px;
}

.flashCard.isFlipped{
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}


/* Base back face */
.flashBack{
  -webkit-backface-visibility: hidden; /* ✅ */
  backface-visibility: hidden;

  -webkit-transform: rotateY(180deg) translateZ(0.1px);
  transform: rotateY(180deg) translateZ(0.1px);
}



/* Keep Arabic readable (direction + bidi) */
.flashQ, .flashA{
  direction: rtl;
  unicode-bidi: plaintext;
  text-align: right;
}

/* SOS avatar image */
.sos .sosPic{
  width: 34px;
  height: 34px;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 10px 18px rgba(0,0,0,.22);
}

/* === FIX: رجّع شكل كروت الـ grid + رتّب الطبقات === */
.cosmic-tile{
  position: relative;
  overflow: hidden;

  /* شكل الكرت */
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(260px 140px at 20% 20%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(140deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 28px rgba(0,0,0,.22);

  /* مساحة للأيقونة (يمين في RTL) */
  padding: 14px;
  padding-inline-end: 78px;
  min-height: 92px;
}

/* خلي اللمعة الخلفية تحت كل شيء */
.cosmic-tile:before{
  content:"";
  position:absolute;
  inset:auto auto -90px -70px;
  width:220px; height:220px;
  background: radial-gradient(circle at 40% 40%, rgba(63,101,255,.30), transparent 60%);
  z-index: 0;
}

/* النص فوق اللمعة */
.cosmic-tile .label,
.cosmic-tile .sub{
  position: relative;
  z-index: 1;
}

/* الأيقونة فوق الكل */
.cosmic-tile .icon{
  position:absolute;
  inset-inline-end: 14px;   /* يمين في RTL */
  top: 50%;
  transform: translateY(-50%);
  width:44px; height:44px;

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.12);

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:22px;
  z-index: 2;
  pointer-events:none;
}
.tabIcon svg{
  width:18px;
  height:18px;
  stroke-width:2;
}

/* ===== Fix: Light pages (non-cosmic) text colors ===== */
.app-shell:not(.cosmic-shell){
  background:#fff;
  color:#0b1220;
}

/* cards on light pages */
.app-shell:not(.cosmic-shell) .card,
.app-shell:not(.cosmic-shell) .tile,
.app-shell:not(.cosmic-shell) .linkrow{
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(17,24,39,.12);
  color:#0b1220;
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
  backdrop-filter: none;
}

/* text on light pages */
.app-shell:not(.cosmic-shell) .h2,
.app-shell:not(.cosmic-shell) .p,
.app-shell:not(.cosmic-shell) .sub,
.app-shell:not(.cosmic-shell) .muted,
.app-shell:not(.cosmic-shell) small{
  color:#0b1220 !important;
}

/* make secondary text slightly muted */
.app-shell:not(.cosmic-shell) .p,
.app-shell:not(.cosmic-shell) .muted,
.app-shell:not(.cosmic-shell) small{
  color: rgba(11,18,32,.70) !important;
}


.tabIcon svg,
.icon svg,
.bell svg,
.navBtn svg{
  width:18px;
  height:18px;
  stroke-width:2;
}

.row {
  flex-direction: row-reverse;
}

.pill.danger {
  background: #263363;
  color: #fff;
  border: none;
}

.muted.text-white{
  color:#fff !important;
}


.app-shell:not(.cosmic-shell) .muted.text-white {
  color: #fff !important;
}

.bgVid{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.bgOverlay{
  position: fixed;
  inset: 0;
  background: rgba(6,10,24,.78);
  z-index: -1;
}








/* ===== Patch v19: Flashcards 2D flip (fix mirrored Arabic on back face) ===== */
.flashCard3D{ perspective:none; -webkit-perspective:none; }
.flashCard{
  transform-style: flat;
  -webkit-transform-style: flat;
}
.flashCard.isFlipped{
  transform: none;
  -webkit-transform: none;
}

.flashFace{
  position:absolute;
  inset:0;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;

  /* make sure old 3D transforms don't leak */
  transform: none;
  -webkit-transform: none;

  transition: opacity .35s ease, transform .35s ease;
}

.flashFront{ opacity:1; transform: translateY(0); pointer-events:auto; }
.flashBack{ opacity:0; transform: translateY(10px); pointer-events:none; }

.flashCard.isFlipped .flashFront{
  opacity:0;
  transform: translateY(-10px);
  pointer-events:none;
}
.flashCard.isFlipped .flashBack{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}

/* Arabic direction safety */
.flashQ, .flashA{
  direction: rtl;
  unicode-bidi: plaintext;
  text-align: right;
}









/* ===== Patch v23: Live session joined uses cosmic components (stable contrast) ===== */
.live-cosmic .live-hero{
  padding: 14px;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 45px rgba(0,0,0,.26);
  backdrop-filter: blur(10px);
}
.live-cosmic .live-hero h1{
  margin: 0;
  font-size: 18px;
  font-weight: 950;
  color: rgba(255,255,255,.95);
}
.live-cosmic .live-hero p{
  margin: 8px 0 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: rgba(255,255,255,.78);
}
.live-cosmic .chipRow{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.live-cosmic .chipRow a, .live-cosmic .chipRow button{
  appearance:none; border:0;
  text-decoration:none;
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
}
.live-cosmic .chipRow a.primary, .live-cosmic .chipRow button.primary{
  background: rgba(255,255,255,.92);
  color: rgba(0,0,0,.78);
}
.live-cosmic .live-blockTitle{
  font-size: 14px;
  font-weight: 950;
  color: rgba(255,255,255,.92);
  margin-bottom: 8px;
}
.live-cosmic .live-frame{
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.28);
  min-height: 160px;
  display:flex; align-items:center; justify-content:center;
  color: rgba(255,255,255,.72);
  font-size: 12px;
}
.live-cosmic .choiceBtn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  font-weight: 900;
  text-align: right;
}
.live-cosmic .choiceBtn .dot{
  width:18px; height:18px; border-radius: 999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
}
.live-cosmic .actionsRow{ display:flex; gap:10px; margin-top:12px; }
.live-cosmic .actionsRow a{ flex:1; text-align:center; }



/* ===== Patch v25: Auth forms ===== */
.field{ display:block; margin-top:12px; }
.label{ font-weight: 900; font-size: 12px; color: rgba(255,255,255,.9); margin-bottom:8px; }
.input{
  width:100%;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  outline: none;
}
.input::placeholder{ color: rgba(255,255,255,.55); }
.hint{ margin-top:8px; font-size: 11px; color: rgba(255,255,255,.70); line-height:1.6; }
.req{ color: #ffd166; font-weight: 950; }
.checkrow{ display:flex; gap:10px; align-items:flex-start; color: rgba(255,255,255,.85); font-size: 12px; line-height:1.6; }
.checkrow input{ margin-top:3px; }



/* ===== Patch v26: Recorded courses (carousel + teacher cards + course content) ===== */

.gradeBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 12px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
}
.gradeBar .label{ font-weight: 950; font-size: 12px; color: rgba(255,255,255,.86); }
.gradeBar .value{ font-weight: 950; color: rgba(255,255,255,.96); }
.gradeBar .gradeSelect{
  width: 180px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
}

.hScrollerWrap{ margin-top: 14px; }
.hScrollerHeader{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px;
}
.hScrollerHeader .title{ font-weight: 950; font-size: 16px; color: rgba(255,255,255,.95); }
.hScrollerHeader .sub{ font-size: 12px; color: rgba(255,255,255,.75); margin-top:4px; }
.hScrollerControls{ display:flex; gap:10px; }
.hBtn{
  width: 40px; height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  display:flex; align-items:center; justify-content:center;
}

.hScroller{
  display:flex;
  gap: 12px;
  overflow-x:auto;
  padding-bottom: 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  direction: rtl; /* start from right */
}
.hScroller::-webkit-scrollbar{ height: 8px; }
.hScroller::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.18);
  border-radius: 999px;
}
.courseCard{
  scroll-snap-align: start;
  min-width: 240px;
  max-width: 240px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 45px rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
  overflow:hidden;
  text-decoration:none;
  color: rgba(255,255,255,.95);
}
.courseCard .img{
  width:100%;
  height: 140px;
  object-fit: cover;
  display:block;
}
.courseCard .body{ padding: 12px 12px 14px 12px; }
.courseCard .name{ font-weight: 950; font-size: 15px; }
.courseCard .meta{ margin-top:6px; font-size: 12px; color: rgba(255,255,255,.75); line-height:1.5; }
.courseCard .tags{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap;}
.tagPill{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.16);
  color: rgba(255,255,255,.85);
  font-size: 11px;
  font-weight: 900;
}

.emptyState{
  margin-top: 16px;
  padding: 16px;
  border-radius: 22px;
  border: 1px dashed rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.78);
  font-size: 12px;
  line-height:1.7;
}

/* Teacher cards */
.segmented{
  display:flex;
  gap:10px;
  padding: 6px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
}
.segBtn{
  flex:1;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(255,255,255,.82);
  font-weight: 950;
  font-size: 12px;
  cursor: pointer;
}
.segBtn.active{
  background: rgba(255,255,255,.92);
  color: rgba(0,0,0,.78);
}

.teacherCard{
  margin-top: 12px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 45px rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
  overflow:hidden;
}
.teacherTop{
  display:flex;
  gap:12px;
  padding: 14px;
  align-items:center;
}
.teacherTop img{
  width: 64px; height: 64px; border-radius: 18px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.18);
}
.teacherInfo .name{ font-weight: 950; font-size: 15px; color: rgba(255,255,255,.95); }
.teacherInfo .sub{ margin-top:4px; font-size: 12px; color: rgba(255,255,255,.74); }
.teacherMeta{
  margin-inline-start:auto;
  text-align:left;
}
.price{ font-weight: 950; font-size: 14px; color: rgba(255,255,255,.95); }
.stars{ margin-top:6px; font-size: 12px; color: rgba(255,255,255,.80); }

.teacherBadges{ display:flex; gap:8px; flex-wrap:wrap; padding: 0 14px 12px 14px; }

.tabs{
  display:flex;
  gap:10px;
  padding: 10px 14px 0 14px;
}
.tabBtn{
  flex:1;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.86);
  font-weight: 950;
  font-size: 12px;
  cursor:pointer;
}
.tabBtn.active{
  background: rgba(255,255,255,.92);
  color: rgba(0,0,0,.78);
  border-color: rgba(255,255,255,.92);
}
.teacherPanel{ padding: 12px 14px 14px 14px; }

.unit{
  margin-top:10px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  overflow:hidden;
}
.unitHead{
  padding: 12px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-weight: 950;
  color: rgba(255,255,255,.92);
  cursor:pointer;
}
.unitBody{ padding: 12px; border-top:1px solid rgba(255,255,255,.10); display:none; }
.unit.open .unitBody{ display:block; }

.lessonRow{
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  margin-top:10px;
}
.lessonRow .t{ font-weight: 950; color: rgba(255,255,255,.92); font-size: 12px;}
.lessonRow .d{ margin-top:6px; color: rgba(255,255,255,.74); font-size: 11px; line-height:1.6;}
.lessonRow .meta{ margin-top:8px; display:flex; justify-content:space-between; color: rgba(255,255,255,.78); font-size: 11px; }
.progress{
  margin-top:8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  overflow:hidden;
}
.progress > span{
  display:block;
  height:100%;
  width: 0%;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
}



/* ===== Patch v27: Course details (light, matches reference screenshots) ===== */
.light-shell{
  background: #f4f6fb;
  color: #0f172a;
}
.light-shell .content{ padding: 16px; gap: 14px; }
.light-shell .footer{ color: rgba(15,23,42,.65); }

.cd-topbar{
  display:flex; align-items:center; justify-content:flex-start;
  padding: 14px 16px 6px 16px;
}
.cd-back{
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  color:#0f172a;
  box-shadow: 0 10px 22px rgba(15,23,42,.08);
  text-decoration:none;
}
.cd-pill{
  margin: 10px 16px 0 16px;
  display:inline-flex; align-items:center; gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #f6ead9;
  color: #b7892e;
  font-weight: 950;
  font-size: 13px;
}
.cd-hero{
  margin: 12px 16px 0 16px;
  border-radius: 26px;
  overflow:hidden;
  position:relative;
  box-shadow: 0 22px 55px rgba(15,23,42,.18);
  background: #0b1026;
  min-height: 160px;
}
.cd-hero img{
  width:100%; height: 180px; object-fit: cover; display:block;
  filter: saturate(1.05) contrast(1.02);
}
.cd-hero::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.10) 60%, rgba(0,0,0,0) 100%);
}
.cd-heroTitle{
  position:absolute; right: 16px; left: 16px; bottom: 16px;
  z-index:2;
  color:#fff;
  font-weight: 950;
  font-size: 22px;
  line-height: 1.25;
  text-shadow: 0 10px 22px rgba(0,0,0,.55);
}
.cd-stars{
  position:absolute; left: 16px; bottom: 62px;
  z-index:2;
  display:flex; align-items:center; gap:8px;
  color: #f6c65b;
  font-weight: 950;
}
.cd-stars .num{
  color:#fff; opacity:.9; font-size: 12px;
  padding: 6px 10px; border-radius: 999px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.16);
}
.cd-metaRow{
  margin: 12px 16px 0 16px;
  display:flex; gap:10px; flex-wrap:wrap;
}
.cd-tag{
  padding: 10px 12px;
  border-radius: 999px;
  background:#fff;
  border: 1px solid rgba(15,23,42,.10);
  color: rgba(15,23,42,.78);
  font-weight: 900;
  font-size: 12px;
}
.cd-tag.gold{ background:#fff7ea; color:#b7892e; border-color: rgba(183,137,46,.20); }

.cd-card{
  margin: 0 16px;
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 22px;
  padding: 14px;
  box-shadow: 0 12px 30px rgba(15,23,42,.07);
}
.cd-cardTitle{
  font-weight: 950;
  font-size: 16px;
  color:#0f172a;
  display:flex; align-items:center; justify-content:space-between;
}
.cd-muted{ color: rgba(15,23,42,.62); font-size: 12px; line-height: 1.7; margin-top: 8px; }
.cd-progressRow{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; }
.cd-progressBar{
  height: 10px; border-radius: 999px; overflow:hidden;
  background: rgba(15,23,42,.08);
}
.cd-progressFill{ height:100%; border-radius: 999px; background: #b7892e; width: 75%; }
.cd-btn{
  width:100%;
  margin-top: 12px;
  display:flex; align-items:center; justify-content:center;
  padding: 14px 14px;
  border-radius: 14px;
  background: #223a7a;
  color:#fff;
  font-weight: 950;
  text-decoration:none;
  box-shadow: 0 14px 30px rgba(34,58,122,.22);
}
.cd-seg{
  margin: 0 16px;
  background: rgba(15,23,42,.06);
  border-radius: 999px;
  padding: 6px;
  display:flex; gap:8px;
}
.cd-seg button{
  flex:1;
  padding: 12px 12px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  font-weight: 950;
  color: rgba(15,23,42,.72);
}
.cd-seg button.active{
  background: #0f1f56;
  color:#fff;
}

.statsGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
.statRow{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: #fbfcff;
}
.statRow .k{ color: rgba(15,23,42,.60); font-weight: 900; font-size: 12px; }
.statRow .v{ color:#0f172a; font-weight: 950; font-size: 13px; }

.teacherCard{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: 14px;
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,.10);
  background: #fff;
  box-shadow: 0 12px 30px rgba(15,23,42,.06);
}
.teacherInfo{ display:flex; align-items:center; gap:12px; }
.teacherAvatar{
  width:56px; height:56px; border-radius: 18px; object-fit: cover;
  border: 1px solid rgba(15,23,42,.12);
}
.teacherName{ font-weight: 950; font-size: 15px; }
.teacherStars{ color:#f6c65b; font-weight: 950; font-size: 13px; margin-top: 6px; }
.rateBtn{
  padding: 12px 12px;
  border-radius: 14px;
  background:#fff7ea;
  color:#b7892e;
  border: 1px solid rgba(183,137,46,.18);
  font-weight: 950;
  text-decoration:none;
  white-space: nowrap;
}

.smallToggle{
  margin-top: 12px;
  display:flex; gap:10px;
}
.smallToggle button{
  flex:1;
  padding: 10px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background:#fff;
  color: rgba(15,23,42,.75);
  font-weight: 950;
}
.smallToggle button.active{
  background:#0f1f56;
  color:#fff;
  border-color:#0f1f56;
}
.avatarStrip{
  margin-top: 10px;
  display:flex; gap:10px; overflow:auto;
  padding-bottom: 4px;
}
.avatarChip{
  width:54px; height:54px; border-radius: 18px;
  border: 2px solid transparent;
  background:#fff;
  overflow:hidden;
  flex: 0 0 auto;
}
.avatarChip img{ width:100%; height:100%; object-fit: cover; }
.avatarChip.active{ border-color:#b7892e; }

.unitCard{
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius: 22px;
  padding: 14px;
  box-shadow: 0 12px 30px rgba(15,23,42,.06);
}
.unitHead{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.unitTitle{ font-weight: 950; font-size: 15px; }
.unitMeta{ color: rgba(15,23,42,.60); font-weight: 900; font-size: 12px; margin-top: 6px; }
.unitToggle{
  display:flex; align-items:center; gap:8px;
  color:#b7892e;
  font-weight: 950;
  font-size: 12px;
  background: transparent;
  border: 0;
}
.lessons{
  margin-top: 12px;
  display:none;
  border-top: 1px solid rgba(15,23,42,.08);
  padding-top: 12px;
  gap: 10px;
  flex-direction: column;
}
.unitCard.open .lessons{ display:flex; }

.lessonRow{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: 12px 12px;
  border-radius: 18px;
  background: #fbfcff;
  border: 1px solid rgba(15,23,42,.08);
}
.lessonLeft{
  display:flex; align-items:flex-start; gap:10px; flex:1;
}
.lessonStatus{
  width:18px; height:18px; border-radius: 999px;
  border: 2px solid rgba(15,23,42,.20);
  display:flex; align-items:center; justify-content:center;
  flex: 0 0 auto;
  margin-top: 2px;
}
.lessonStatus.done{ border-color: #22c55e; background: rgba(34,197,94,.12); color:#16a34a; }
.lessonStatus.todo{ border-color: rgba(15,23,42,.18); background: rgba(15,23,42,.04); color: rgba(15,23,42,.35); }
.lessonTitle{ font-weight: 950; font-size: 13px; color:#0f172a; line-height:1.35; }
.lessonSub{ margin-top: 6px; font-size: 11px; color: rgba(15,23,42,.58); }
.lessonActions{
  display:flex; flex-direction:column; align-items:flex-end; gap:8px;
}
.lessonLink{
  font-size: 12px;
  font-weight: 950;
  color:#223a7a;
  text-decoration:none;
}
.lessonProg{
  width: 110px;
}
.lessonProg .cd-progressBar{ height: 8px; }



/* ===== Patch v28: Course Details Cosmic Theme (unified) ===== */
.cd-cosmic{ color: rgba(255,255,255,.92); }
.cd-cosmic .cd-topbar{ padding: 14px 16px 6px 16px; }
.cd-cosmic .cd-back{
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
  text-decoration:none;
}
.cd-cosmic .cd-pill{
  margin: 10px 16px 0 16px;
  display:inline-flex; align-items:center; gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(246,198,91,.12);
  border: 1px solid rgba(246,198,91,.20);
  color: rgba(246,198,91,.95);
  font-weight: 950;
  font-size: 13px;
  backdrop-filter: blur(10px);
}
.cd-cosmic .cd-hero{
  margin: 12px 16px 0 16px;
  border-radius: 26px;
  overflow:hidden;
  position:relative;
  box-shadow: 0 26px 70px rgba(0,0,0,.34);
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.12);
}
.cd-cosmic .cd-hero img{
  width:100%; height: 180px; object-fit: cover; display:block;
  filter: saturate(1.05) contrast(1.02);
}
.cd-cosmic .cd-hero::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(0,0,0,.70) 0%, rgba(0,0,0,.18) 58%, rgba(0,0,0,0) 100%);
}
.cd-cosmic .cd-heroTitle{
  position:absolute; right: 16px; left: 16px; bottom: 16px;
  z-index:2;
  color: rgba(255,255,255,.96);
  font-weight: 950;
  font-size: 22px;
  line-height: 1.25;
  text-shadow: 0 14px 28px rgba(0,0,0,.55);
}
.cd-cosmic .cd-stars{
  position:absolute; left: 16px; bottom: 62px;
  z-index:2;
  display:flex; align-items:center; gap:8px;
  color: #f6c65b;
  font-weight: 950;
}
.cd-cosmic .cd-stars .num{
  color: rgba(255,255,255,.92);
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.16);
}
.cd-cosmic .cd-metaRow{
  margin: 12px 16px 0 16px;
  display:flex; gap:10px; flex-wrap:wrap;
}
.cd-cosmic .cd-tag{
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.82);
  font-weight: 900;
  font-size: 12px;
  backdrop-filter: blur(10px);
}
.cd-cosmic .cd-tag.gold{
  background: rgba(246,198,91,.12);
  color: rgba(246,198,91,.95);
  border-color: rgba(246,198,91,.22);
}

.cd-cosmic .cd-card{
  margin: 0 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  padding: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
  backdrop-filter: blur(12px);
}
.cd-cosmic .cd-cardTitle{
  font-weight: 950;
  font-size: 16px;
  color: rgba(255,255,255,.94);
  display:flex; align-items:center; justify-content:space-between;
}
.cd-cosmic .cd-muted{
  color: rgba(255,255,255,.72);
  font-size: 12px;
  line-height: 1.8;
  margin-top: 8px;
}
.cd-cosmic #courseProgressText{ color: rgba(255,255,255,.70) !important; }

.cd-cosmic .cd-progressBar{
  height: 10px;
  border-radius: 999px;
  overflow:hidden;
  background: rgba(255,255,255,.10);
}
.cd-cosmic .cd-progressFill{
  height:100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(246,198,91,.95), rgba(183,137,46,.95));
}
.cd-cosmic .cd-btn{
  width:100%;
  margin-top: 12px;
  display:flex; align-items:center; justify-content:center;
  padding: 14px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  color: rgba(0,0,0,.78);
  font-weight: 950;
  text-decoration:none;
  box-shadow: 0 18px 48px rgba(0,0,0,.25);
}

.cd-cosmic .cd-seg{
  margin: 0 16px;
  background: rgba(255,255,255,.08);
  border-radius: 999px;
  padding: 6px;
  display:flex; gap:8px;
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
}
.cd-cosmic .cd-seg button{
  flex:1;
  padding: 12px 12px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  font-weight: 950;
  color: rgba(255,255,255,.78);
}
.cd-cosmic .cd-seg button.active{
  background: rgba(255,255,255,.92);
  color: rgba(0,0,0,.78);
}

.cd-cosmic .statsGrid{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.cd-cosmic .statRow{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
}
.cd-cosmic .statRow .k{ color: rgba(255,255,255,.70); font-weight: 900; font-size: 12px; }
.cd-cosmic .statRow .v{ color: rgba(255,255,255,.92); font-weight: 950; font-size: 13px; }

.cd-cosmic .teacherCard{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: 14px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
  backdrop-filter: blur(12px);
}
.cd-cosmic .teacherAvatar{
  width:56px; height:56px; border-radius: 18px; object-fit: cover;
  border: 1px solid rgba(255,255,255,.14);
}
.cd-cosmic .teacherName{ font-weight: 950; font-size: 15px; color: rgba(255,255,255,.94); }
.cd-cosmic .teacherStars{ color:#f6c65b; font-weight: 950; font-size: 13px; margin-top: 6px; }
.cd-cosmic .rateBtn{
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(246,198,91,.12);
  color: rgba(246,198,91,.95);
  border: 1px solid rgba(246,198,91,.20);
  font-weight: 950;
  text-decoration:none;
  white-space: nowrap;
}

.cd-cosmic .smallToggle{ margin-top: 12px; display:flex; gap:10px; }
.cd-cosmic .smallToggle button{
  flex:1;
  padding: 10px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.80);
  font-weight: 950;
}
.cd-cosmic .smallToggle button.active{
  background: rgba(255,255,255,.92);
  color: rgba(0,0,0,.78);
  border-color: rgba(255,255,255,.92);
}

.cd-cosmic .avatarStrip{
  margin-top: 10px;
  display:flex; gap:10px; overflow:auto;
  padding-bottom: 4px;
}
.cd-cosmic .avatarChip{
  width:54px; height:54px; border-radius: 18px;
  border: 2px solid transparent;
  background: rgba(255,255,255,.06);
  overflow:hidden;
  flex: 0 0 auto;
}
.cd-cosmic .avatarChip img{ width:100%; height:100%; object-fit: cover; }
.cd-cosmic .avatarChip.active{ border-color: rgba(246,198,91,.95); }

.cd-cosmic .unitCard{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  padding: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
  backdrop-filter: blur(12px);
}
.cd-cosmic .unitTitle{ font-weight: 950; font-size: 15px; color: rgba(255,255,255,.94); }
.cd-cosmic .unitMeta{ color: rgba(255,255,255,.70); font-weight: 900; font-size: 12px; margin-top: 6px; }
.cd-cosmic .unitToggle{
  display:flex; align-items:center; gap:8px;
  color: rgba(246,198,91,.95);
  font-weight: 950;
  font-size: 12px;
  background: transparent;
  border: 0;
}
.cd-cosmic .lessons{
  margin-top: 12px;
  display:none;
  border-top: 1px solid rgba(255,255,255,.10);
  padding-top: 12px;
  gap: 10px;
  flex-direction: column;
}
.cd-cosmic .unitCard.open .lessons{ display:flex; }

.cd-cosmic .lessonRow{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: 12px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
}
.cd-cosmic .lessonTitle{ font-weight: 950; font-size: 13px; color: rgba(255,255,255,.94); line-height:1.35; }
.cd-cosmic .lessonSub{ margin-top: 6px; font-size: 11px; color: rgba(255,255,255,.72); }
.cd-cosmic .lessonLink{
  font-size: 12px;
  font-weight: 950;
  color: rgba(255,255,255,.92);
  text-decoration:none;
}
.cd-cosmic .lessonStatus{
  width:18px; height:18px; border-radius: 999px;
  border: 2px solid rgba(255,255,255,.22);
  display:flex; align-items:center; justify-content:center;
  flex: 0 0 auto;
  margin-top: 2px;
}
.cd-cosmic .lessonStatus.done{
  border-color: rgba(34,197,94,.70);
  background: rgba(34,197,94,.14);
  color: rgba(34,197,94,.95);
}
.cd-cosmic .lessonStatus.todo{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.35);
}

/* ===== Patch v29: Phone auth row ===== */
.phoneRow{
  display:flex;
  gap:12px;
  align-items:flex-end;
  flex-wrap: wrap;
}



/* ===== Patch v30: Auth text color fixes on cosmic theme ===== */
.cosmic-shell .cd-muted{
  color: rgba(255,255,255,.72) !important;
}
.cosmic-shell .hint{
  color: rgba(255,255,255,.72) !important;
}
.cosmic-shell .p{
  color: rgba(255,255,255,.78) !important;
}



/* ===== Patch v31: Unified bottom tabbar (icons + labels) ===== */
.tabbar .tab{
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.tabbar .tab .tabLabel{
  text-align:center !important;
  max-width: 78px;
  line-height: 1.05;
}



/* ===== Patch v32: Unified bottom tabbar (match reference screenshot) ===== */
.tabbar.cosmic{
  direction: rtl;
  height: var(--tabbar-h);
  padding: 6px 6px 8px;
  background: rgba(10,14,30,.88);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,.12);
}
.tabbar.cosmic .tab{
  text-decoration:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 5px;
  padding: 6px 4px;
  color: rgba(255,255,255,.55);
}
.tabbar.cosmic .tabLabel{
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}
.tabbar.cosmic .tabIcon{
  width:auto; height:auto;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  font-size: 0;
  display:flex; align-items:center; justify-content:center;
}
.tabbar.cosmic .tabIcon svg{
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .92;
}
.tabbar.cosmic .tab.active{
  color: rgba(255,255,255,.98);
}
.tabbar.cosmic .tab.active .tabLabel{
  font-weight: 950;
}



/* ===== Patch v33: Unified Back Arrow + New Logo (non-splash) ===== */
.app-shell{ position: relative; }

.backArrow{
  font-size: 22px;
  line-height: 1;
  font-weight: 950;
  color: rgba(255,255,255,.92);
  transform: translateY(-1px);
}

.floatingBack{
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 60;
}

.brandLogo{
  height: 24px !important;
  width: 24px !important;
  border-radius: 10px;
}



/* ===== Patch v36: Learn Hub unified 3-option card ===== */
.triActions{
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.triAction{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  text-decoration:none;
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
  backdrop-filter: blur(12px);
}
.triIcon{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  font-weight: 950;
}
.triText{ flex:1; min-width: 0; }
.triTitle{
  font-weight: 950;
  font-size: 14px;
  color: rgba(255,255,255,.94);
}
.triSub{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.triGo{
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(246,198,91,.12);
  border: 1px solid rgba(246,198,91,.20);
  color: rgba(246,198,91,.95);
  font-weight: 950;
}



/* ===== Patch v40: Fix menu contrast (white on white) ===== */
.menu, .menu-panel, .dropdown, .dropdown-menu, .sheet, .sheet-panel, .list-panel, .prototypeMenu, .prototype-menu{
  color: rgba(15,23,42,.95) !important;
}
.menu a, .menu-panel a, .dropdown a, .dropdown-menu a, .sheet a, .sheet-panel a, .list-panel a, .prototypeMenu a, .prototype-menu a{
  color: rgba(15,23,42,.95) !important;
}
.menu .item, .menu-panel .item, .dropdown .item, .dropdown-menu .item, .sheet .item, .sheet-panel .item, .list-panel .item{
  color: rgba(15,23,42,.95) !important;
}
.menu .muted, .menu-panel .muted, .dropdown .muted, .dropdown-menu .muted{
  color: rgba(15,23,42,.65) !important;
}
/* common plain lists used as navigation */
ul.pageList, .pageList, .page-list, .navList, .nav-list{
  background: rgba(255,255,255,.96) !important;
  color: rgba(15,23,42,.95) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
}
ul.pageList a, .pageList a, .page-list a, .navList a, .nav-list a{
  color: rgba(15,23,42,.95) !important;
}



/* ===== Patch v40b: Index viewer list contrast ===== */
.list{
  background: rgba(255,255,255,.96) !important;
  color: rgba(15,23,42,.95) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
}
.list .item{
  color: rgba(15,23,42,.95) !important;
}
.list .item .name{
  color: rgba(15,23,42,.95) !important;
}
.list .item .path, .list .item .meta{
  color: rgba(15,23,42,.70) !important;
}
.list .item:hover{
  background: rgba(15,23,42,.06) !important;
}



/* ===== Patch v43: Teachers pages - deeper glassy space theme ===== */
.teacherCard{
  color: rgba(255,255,255,.92) !important;
  border-color: rgba(255,255,255,.14) !important;
  background:
    radial-gradient(240px 140px at 18% 22%, rgba(98,155,255,.22), transparent 62%),
    radial-gradient(240px 140px at 85% 15%, rgba(160,120,255,.16), transparent 58%),
    linear-gradient(160deg, rgba(12,24,58,.55), rgba(10,16,38,.35)) !important;
  backdrop-filter: blur(14px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(135%) !important;
}
.teacherCard .teacherName{ color: rgba(255,255,255,.98) !important; }
.teacherCard .teacherSub{ color: rgba(255,255,255,.72) !important; }
.teacherCard .rateText{ color: rgba(255,255,255,.72) !important; }
.teacherCard .badge{
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: rgba(255,255,255,.92) !important;
}
.teacherCard .star{
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.92) !important;
}
.teacherCard .rateBtn{
  background: rgba(255,255,255,.92) !important;
  color: rgba(15,23,42,.95) !important;
  border-color: rgba(255,255,255,.45) !important;
}
.teacherCard .rateBtn:hover{
  background: rgba(255,255,255,.98) !important;
}

.glassCard{
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(240px 140px at 18% 22%, rgba(98,155,255,.22), transparent 62%),
    radial-gradient(240px 140px at 85% 15%, rgba(160,120,255,.16), transparent 58%),
    linear-gradient(160deg, rgba(12,24,58,.55), rgba(10,16,38,.35));
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  color: rgba(255,255,255,.92);
  box-shadow: 0 14px 28px rgba(0,0,0,.22);
}


/* Exam Filter */
.exam-filter{ margin-top:12px; }
.filter-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:10px;
}
.field .label{
  font-size:12px;
  opacity:.9;
  margin-bottom:6px;
}
.filter-summary{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}
.dist-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:10px;
}
.dist-note{ font-size:12px; opacity:.8; }
.distbar{
  margin-top:10px;
  height:10px;
  border-radius:999px;
  overflow:hidden;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
}
.distbar .seg{ height:100%; float:left; }
.distbar .seg.easy{ background: rgba(120, 255, 180, .55); }
.distbar .seg.mid{ background: rgba(130, 180, 255, .55); }
.distbar .seg.hard{ background: rgba(255, 160, 160, .55); }

.dist-grid{ margin-top:10px; display:grid; gap:10px; }
.dist-row{
  display:grid;
  grid-template-columns:80px 1fr 92px;
  gap:10px;
  align-items:center;
}
.kname{ font-weight:900; }
.ef-range{
  width:100%;
  accent-color: rgba(170, 200, 255, .95);
}
.pwrap{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
}
.pwrap .input{
  padding-left:26px;
  text-align:center;
}
.pwrap .pct{
  position:absolute;
  left:10px;
  font-weight:900;
  opacity:.9;
  pointer-events:none;
}
.dist-warn{
  margin-top:8px;
  font-size:12px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  display:none;
}


/* Native selects: keep readable on macOS/Safari dropdown */
select.input{ color-scheme: dark; }
select.input option{ color:#0b1222; background:#ffffff; }


/* Floating Scientific Keyboard */
.kbFab{
  position: fixed;
  left: 16px;
  bottom: 86px; /* above bottom tabs */
  z-index: 50;
  width: 52px;
  height: 52px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: rgba(255,255,255,.95);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 35px rgba(0,0,0,.35);
}
.kbFab:active{ transform: scale(.98); }

.kbOverlay{
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  background: rgba(3,8,18,.55);
}
.kbOverlay.open{ display:block; }

.kbPanel{
  position: absolute;
  left: 50%;
  bottom: 90px;
  transform: translateX(-50%);
  width: min(520px, calc(100vw - 24px));
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  padding: 12px;
}

.kbHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 10px;
}
.kbTitle{
  font-weight: 950;
}
.kbClose{
  width: 38px; height: 38px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
}

.kbTabs{
  display:flex;
  gap:8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.kbTab{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  font-weight: 800;
  font-size: 12px;
}
.kbTab.active{
  background: rgba(255,255,255,.22);
}

.kbGrid{
  display:grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
}
.kbKey{
  padding: 10px 0;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.95);
  text-align:center;
  font-weight: 900;
  user-select:none;
}
.kbKey:active{ transform: scale(.98); background: rgba(255,255,255,.14); }

.timerPill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-weight: 900;
}
.timerPill.danger{
  border-color: rgba(255,120,120,.30);
  background: rgba(255,120,120,.12);
}

.examMetaGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.examMetaCard{
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  padding: 12px;
}
.examMetaCard .k{ font-size: 12px; opacity:.85; margin-bottom:6px; }
.examMetaCard .v{ font-weight: 950; }

.statusBadge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
}
.statusBadge.pending{ border-color: rgba(255,200,120,.30); background: rgba(255,200,120,.10); }
.statusBadge.ready{ border-color: rgba(120,255,180,.30); background: rgba(120,255,180,.10); }
.statusBadge.inprogress{ border-color: rgba(130,180,255,.30); background: rgba(130,180,255,.10); }

.uploadBox{
  border: 1px dashed rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
  border-radius: 18px;
  padding: 12px;
}
.uploadBox .hint{ opacity:.85; font-size: 12px; }

.noticeCard{
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  padding: 12px;
  font-size: 13px;
  line-height: 1.5;
}

.notifBadge{
  position:absolute;
  top:-6px;
  left:-6px;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255,80,80,.95);
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 11px;
  font-weight: 950;
  padding: 0 6px;
  border: 2px solid rgba(0,0,0,.25);
}


/* =========================================================
   Cosmic Glass Theme — Global Enforcer (v47)
   الهدف: توحيد كل الصفحات على الثيم الفضائي الزجاجي
   ========================================================= */

:root{
  /* Text */
  --ink: rgba(255,255,255,.96);
  --muted: rgba(255,255,255,.72);

  /* Glass surfaces */
  --surface: rgba(255,255,255,.10);
  --surface2: rgba(255,255,255,.06);
  --stroke: rgba(255,255,255,.18);
}

body{
  background:
    radial-gradient(900px 520px at 20% 10%, rgba(70,130,255,.35), transparent 60%),
    radial-gradient(800px 460px at 80% 30%, rgba(90,230,255,.22), transparent 60%),
    linear-gradient(180deg, #050B1E 0%, #061A3B 42%, #02050E 100%);
  color: var(--ink);
}

/* بعض الصفحات كانت تنقلب إلى ثيم أبيض بسبب fallback قديم */
.app-shell:not(.cosmic-shell){
  background:
    radial-gradient(900px 520px at 20% 10%, rgba(70,130,255,.28), transparent 60%),
    radial-gradient(800px 460px at 80% 30%, rgba(90,230,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(5,11,30,.92) 0%, rgba(6,26,59,.92) 45%, rgba(2,5,14,.94) 100%);
  color: var(--ink);
}

/* تأكيد أن الكروت/السطوح (حتى لو كانت "بيضاء" سابقاً) تُعرض بزجاج */
.card, .panel, .sheet, .modalCard, .drawer, .listCard, .contentCard, .topCard, .metricsCard{
  background: var(--surface) !important;
  border: 1px solid var(--stroke) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--ink);
}

/* نصوص عامة */
.muted, .sub, .hint, .small{
  color: var(--muted) !important;
}

/* إصلاح قائمة الخيارات (Select) — عند hover كانت الخلفية بيضاء والنص أبيض */
select option{
  color: #0b1220;
  background: #ffffff;
}

root{
  --bgA: #0b1026;
  --bgB: #152a6e;
  --surface: rgba(255,255,255,.94);
  --surface2: rgba(255,255,255,.08);
  --ink:#0b1220;
  --muted:#6b7280;
  --muted2: rgba(255,255,255,.78);
  --line: rgba(17,24,39,.12);
  --line2: rgba(255,255,255,.14);
  --radius: 18px;
  --shadow: 0 14px 30px rgba(0,0,0,.22);
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,"Noto Sans Arabic","Noto Sans",sans-serif;
  color: var(--ink);
  background:#fff;
}
a{color:inherit;text-decoration:none}
.app-shell{min-height:100vh; display:flex; flex-direction:column}
.top{
  background: radial-gradient(1200px 600px at 60% 0%, rgba(63,101,255,.28), transparent 55%),
              radial-gradient(900px 500px at 15% 50%, rgba(255,255,255,.12), transparent 55%),
              linear-gradient(140deg, var(--bgA), var(--bgB));
  color:#fff;
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--line2);
}
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.brand{
  display:flex; align-items:center; gap:10px;
}
.brand img{height:26px; width:auto; filter: drop-shadow(0 6px 12px rgba(0,0,0,.22));}
.title{font-size:14px; font-weight:900; letter-spacing:.2px}
.iconbtn{
  width:38px; height:38px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.10);
}
.hero{
  margin-top: 12px;
  border:1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  padding: 12px;
  background: rgba(255,255,255,.08);
}
.hero .h1{font-size:18px; font-weight:950; margin:0}
.hero .muted{color: var(--muted2); font-size:12px; line-height:1.5; margin-top:6px}
.chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  font-size:12px;
  color:#fff;
  background: rgba(255,255,255,.06);
}

.content{
  flex:1;
  padding: 14px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.card{
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
}
.card.dark{
  background: radial-gradient(900px 500px at 20% 0%, rgba(63,101,255,.18), transparent 55%),
              linear-gradient(140deg, #0b1026, #152a6e);
  border-color: rgba(255,255,255,.14);
  color:#fff;
}
.h2{font-size:14px; font-weight:900; margin:0}
.p{color:var(--muted); font-size:12px; line-height:1.55; margin-top:6px}
.p.light{color: var(--muted2)}
.row{display:flex; gap:10px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius: 14px;
  font-weight:900;
  background:#fff;
}
.btn.primary{
  background:#111827;
  color:#fff;
  border-color:#111827;
}
.btn.block{width:100%}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.tile{
  border:1px solid var(--line);
  border-radius: 16px;
  padding:12px;
  background:#1b3968;
  
}
.tile strong{display:block; font-size:12px}
.tile small{color:var(--muted)}
.list{display:flex; flex-direction:column; gap:10px}
.linkrow{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:12px;
  border:1px solid var(--line);
  border-radius: 16px;
  background:#fff;
}
.linkrow .sub{color:var(--muted); font-size:12px; margin-top:4px}
.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:12px;
  color:var(--muted);
}
.progress{
  height:10px;
  border:1px solid var(--line);
  border-radius:999px;
  overflow:hidden;
  background:#f3f4f6;
}
.progress>div{height:100%; width:42%; background:#111827}
.fab{
  position:fixed;
  bottom: 74px;
  inset-inline-start: 14px;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: radial-gradient(50px 50px at 30% 20%, rgba(255,255,255,.35), transparent 55%),
              linear-gradient(140deg, #2f52ff, #00d4ff);
  box-shadow: 0 12px 26px rgba(0,0,0,.26);
  border: 1px solid rgba(255,255,255,.22);
  display:flex; align-items:center; justify-content:center;
  color:#0b1220;
  font-weight:950;
}
.tabbar{
  position:sticky;
  bottom:0;
  background:#fff;
  border-top: 1px solid var(--line);
  display:grid;
  grid-template-columns: repeat(5, 1fr);
}
.tab{
  padding:10px 6px;
  text-align:center;
  font-size:11px;
  color: var(--muted);
}
.tab.active{color:#111827; font-weight:950}
.hr{height:1px; background: rgba(17,24,39,.10); margin:12px 0}



/* ===== ThreeQ Cosmic Home (AI-first) ===== */
.cosmic-shell{
  background:
    radial-gradient(1200px 700px at 70% 10%, rgba(63,101,255,.28), transparent 55%),
    radial-gradient(900px 600px at 20% 40%, rgba(255,255,255,.10), transparent 55%),
    radial-gradient(3px 3px at 12% 22%, rgba(255,255,255,.55) 40%, transparent 45%),
    radial-gradient(2px 2px at 72% 18%, rgba(255,255,255,.35) 40%, transparent 45%),
    radial-gradient(2px 2px at 45% 64%, rgba(255,255,255,.28) 40%, transparent 45%),
    radial-gradient(2px 2px at 86% 72%, rgba(255,255,255,.22) 40%, transparent 45%),
    linear-gradient(140deg, #070b1b, #0f1f56 55%, #0b1026);
  color:#fff;
}
.cosmic-shell .top{
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.cosmic-shell .content{
  padding-top: 10px;
}
.cosmic-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.headerActions{
  display:flex;
  align-items:center;
  gap:10px;
}

.navBtn{
  width:40px;
  height:40px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:18px;
  line-height:1;
}
.navBtn:active{
  transform: translateY(1px);
}


.cosmic-brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.cosmic-brand .logoMark{
  width:38px; height:38px;
  border-radius:16px;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
}
.cosmic-brand .logoMark img{height:22px; width:auto;}
.cosmic-brand .brandText{
  display:flex; flex-direction:column;
  line-height:1.1;
}
.cosmic-brand .brandText .big{
  font-weight:950; font-size:16px; letter-spacing:.2px;
}
.cosmic-brand .brandText .small{
  color: rgba(255,255,255,.75);
  font-size:12px;
  margin-top:3px;
}
.bell{
  width:40px;height:40px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  display:flex; align-items:center; justify-content:center;
}
.heroRow{
  margin-top:12px;
  display:grid;
  grid-template-columns: 118px 1fr;
  gap:12px;
  align-items:center;
}
.botCard{
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  padding:10px;
  position:relative;
  overflow:hidden;
}
.botCard:before{
  content:"";
  position:absolute; inset:-80px -120px auto auto;
  width:220px; height:220px;
  background: radial-gradient(circle at 30% 30%, rgba(0,212,255,.25), transparent 60%);
}
.botFace{
  width:86px; height:86px;
  border-radius:28px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; /* مهم حتى الصورة تنقص داخل البابل */
}


.botFace .botPic{
  width: 58px;
  height: 58px;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 10px 18px rgba(0,0,0,.22);
}

.botFace span{
  font-size:28px;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.22));
}
.speech{
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.10);
  padding:12px;
}
.speech .q{
  font-weight:950;
  font-size:16px;
}

.icon .iconPic{
  width: 26px;
  height: 26px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 6px 12px rgba(0,0,0,.22);
}

.searchbar{
  margin-top:12px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  padding:10px 12px;
  display:flex;
  align-items:center;
  gap:10px;
}
.searchbar .hint{
  color: rgba(255,255,255,.75);
  font-size:12px;
  flex:1;
}
.searchbar .chipBtn{
  width:34px; height:34px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  display:flex; align-items:center; justify-content:center;
}
.cosmic-grid{
  margin-top:12px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
/* 1) احجز مساحة للنص بعيد عن الأيقونة */
.cosmic-tile{
  position: relative;
  padding: 14px;
  padding-bottom: 58px;        /* احجز مساحة تحت للنص إذا بدك الأيقونة تحت */
  min-height: 108px;
}

/* 2) ثبّت الأيقونة عمودياً بالوسط على اليمين */
.cosmic-tile .icon{
  top: 50%;
    position:absolute;
  inset-inline-end: 14px;
  bottom: 14px;               /* خليها تحت */
  width:44px; height:44px;
  border-radius:999px;        /* فقاعة دائرية مثل الصورة */

  transform: translateY(-50%);
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  display:flex; align-items:center; justify-content:center;
  font-size:22px;
  pointer-events:none;
}

.cosmic-tile:before{
  content:"";
  position:absolute; inset:auto auto -90px -70px;
  width:220px; height:220px;
  background: radial-gradient(circle at 40% 40%, rgba(63,101,255,.30), transparent 60%);
}
.cosmic-tile .label{
  font-weight:950;
  font-size:16px;
}
.cosmic-tile .sub{
  margin-top:4px;
  font-size:12px;
  color: rgba(255,255,255,.72);
}

.voicebar{
  margin-top:12px;
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  padding:10px 12px;
  display:flex;
  align-items:center;
  gap:10px;
}
.voicebar .pillLive{
  padding:8px 12px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.12);
  font-weight:950;
}
.voicebar .inputHint{
  flex:1;
  color: rgba(255,255,255,.78);
  font-size:13px;
}
.voicebar .mini{
  width:38px; height:38px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
}
.sos{
  position:fixed;
  bottom: 82px;
  inset-inline-end: 14px;
  width: 64px;
  height: 64px;
  border-radius: 24px;
  background:
    radial-gradient(55px 55px at 30% 20%, rgba(255,255,255,.32), transparent 55%),
    linear-gradient(140deg, rgba(63,101,255,.85), rgba(0,212,255,.55));
  box-shadow: 0 16px 30px rgba(0,0,0,.32);
  border: 1px solid rgba(255,255,255,.18);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#071026;
  font-weight:950;
  gap:2px;
}
.sos small{font-size:10px; opacity:.9}
.tabbar.cosmic{
  background: rgba(10,14,30,.88);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,.12);
}
.tabbar.cosmic .tab{color: rgba(255,255,255,.72)}
.tabbar.cosmic .tab.active{color:#fff}



/* ===== Patch v4: layout safety + unified cosmic theme ===== */
:root {
  --tabbar-h: 62px;
  --safe-gap: 14px;
  --ai-icon: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2064%2064%27%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3ClinearGradient%20id%3D%27g%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%271%27%20y2%3D%271%27%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%270%27%20stop-color%3D%27%233f65ff%27/%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%271%27%20stop-color%3D%27%2300d4ff%27/%3E%0A%20%20%20%20%3C/linearGradient%3E%0A%20%20%20%20%3CradialGradient%20id%3D%27r%27%20cx%3D%2730%25%27%20cy%3D%2730%25%27%20r%3D%2770%25%27%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%270%27%20stop-color%3D%27white%27%20stop-opacity%3D%27.55%27/%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%271%27%20stop-color%3D%27white%27%20stop-opacity%3D%270%27/%3E%0A%20%20%20%20%3C/radialGradient%3E%0A%20%20%3C/defs%3E%0A%20%20%3Crect%20x%3D%2710%27%20y%3D%2712%27%20width%3D%2744%27%20height%3D%2740%27%20rx%3D%2718%27%20fill%3D%27url%28%23g%29%27/%3E%0A%20%20%3Crect%20x%3D%2710%27%20y%3D%2712%27%20width%3D%2744%27%20height%3D%2740%27%20rx%3D%2718%27%20fill%3D%27url%28%23r%29%27/%3E%0A%20%20%3Ccircle%20cx%3D%2727%27%20cy%3D%2732%27%20r%3D%275%27%20fill%3D%27%23071026%27/%3E%0A%20%20%3Ccircle%20cx%3D%2741%27%20cy%3D%2732%27%20r%3D%275%27%20fill%3D%27%23071026%27/%3E%0A%20%20%3Cpath%20d%3D%27M24%2041c3%203%2013%203%2016%200%27%20fill%3D%27none%27%20stroke%3D%27%23071026%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27/%3E%0A%20%20%3Cpath%20d%3D%27M19%2018l-4-4M45%2018l4-4%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.7%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27/%3E%0A%20%20%3Ccircle%20cx%3D%2732%27%20cy%3D%2710%27%20r%3D%273%27%20fill%3D%27%2300d4ff%27/%3E%0A%3C/svg%3E");
}

.aiIcon {
  width: 26px;
  height: 26px;
  background-image: var(--ai-icon);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.25));
}

.cosmic-shell .content {
  /* prevent overlap with tabbar */
  padding-bottom: calc(var(--tabbar-h) + 18px);
}

.voicebar {
  position: sticky;
  bottom: calc(var(--tabbar-h) + 10px);
  z-index: 3;
}

.sos {
  bottom: calc(var(--tabbar-h) + 22px);
  z-index: 4;
}

.tabbar.cosmic {
  height: var(--tabbar-h);
  z-index: 5;
}
.tabbar.cosmic .tab {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
}
.tabIcon {
  width:22px; height:22px;
  display:flex; align-items:center; justify-content:center;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  font-size:14px;
}
.tabbar.cosmic .tab.active .tabIcon {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.18);
}

.cosmic-card {
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  padding: 12px;
}

.cosmic-linkrow {
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:12px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
}
.cosmic-linkrow .sub {
  color: rgba(255,255,255,.72);
  font-size:12px;
  margin-top:4px;
}
.cosmic-pill {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.82);
  font-size:12px;
}
.cosmic-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 12px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  color:#fff;
  font-weight:950;
}
.cosmic-btn.primary {
  background: rgba(255,255,255,.92);
  color:#071026;
  border-color: rgba(255,255,255,.92);
}



/* ===== Patch v6: Horizontal tabs (label right, icon left) + full cosmic theme ===== */

/* Make the whole app dark + glassy by default */
:root{
  --surface: rgba(255,255,255,.10);
  --surface2: rgba(255,255,255,.08);
  --ink: #ffffff;
  --muted: rgba(255,255,255,.72);
  --line: rgba(255,255,255,.14);
  --radius: 18px;
  --tabbar-h: 52px;
}

/* override any inline body backgrounds */
body{
  background:#050812 !important;
  color: var(--ink) !important;
}

/* starry / nebula background closer to the reference image */
.app-shell{
  background:
    radial-gradient(1200px 720px at 72% 0%, rgba(120,170,255,.30), transparent 58%),
    radial-gradient(980px 720px at 14% 42%, rgba(0,212,255,.20), transparent 62%),
    radial-gradient(780px 560px at 44% 92%, rgba(200,140,255,.16), transparent 64%),
    linear-gradient(140deg, #060a18, #0d1b49 55%, #090f24);
  color: #fff;
  min-height:100vh;
}

/* make all cards / rows "alive" */
.card, .linkrow, .pill, .chip, .list, .row{
  background:
    radial-gradient(220px 120px at 20% 20%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(140deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 28px rgba(0,0,0,.22);
}

.hr{background: rgba(255,255,255,.12)}

/* buttons */
.btn{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.16);
  color:#fff;
  backdrop-filter: blur(10px);
}
.btn.primary{
  background: rgba(255,255,255,.92);
  color:#071026;
  border-color: rgba(255,255,255,.92);
}

/* global muted text */
.p, .sub, .muted{
  color: rgba(255,255,255,.75) !important;
}

/* Tabbar: smaller, horizontal layout inside each tab item */
.tabbar{
  height: var(--tabbar-h);
  background: rgba(10,14,30,.88);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,.12);
}
.tab{
  display:flex;
  flex-direction: row;          /* label + icon inline */
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 6px 8px;
  color: rgba(255,255,255,.72);
  font-size: 11px;
  min-width:0;
}
.tab .tabLabel{
  text-align:right;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 64px;              /* avoid collisions */
}
.tab .tabIcon{
  width:20px; height:20px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 9px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  flex: 0 0 auto;
  font-size: 13px;
}
.tab.active{
  color:#fff;
  font-weight:950;
}
.tab.active .tabIcon{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.18);
}

/* Keep SOS and voicebar above the tabbar */
.sos{
  bottom: calc(var(--tabbar-h) + 30px) !important;
  z-index: 6;
}
.voicebar{
  bottom: calc(var(--tabbar-h) + 14px) !important;
  z-index: 5;
}



/* ===== Patch v7: Fix tab icons position (icon left of label) ===== */
.tabbar.cosmic .tab{
  /* override old column rule from previous patches */
  flex-direction: row !important; /* RTL: first item appears on the right -> label stays right, icon on left */
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 6px 8px !important;
}

.tabbar.cosmic .tabLabel{
  text-align: right !important;
  font-size: 11px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 64px !important;
}

.tabbar.cosmic .tabIcon{
  width: 20px !important;
  height: 20px !important;
  border-radius: 9px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.06) !important;
  flex: 0 0 auto !important;
}



/* ===== Patch v8: HARD force tab items inline (label right, icon left) ===== */
.tabbar, .tabbar.cosmic{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
}

.tabbar .tab, .tabbar.cosmic .tab{
  display:flex !important;
  flex-direction: row !important;   /* inline */
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

.tabbar .tab .tabLabel, .tabbar.cosmic .tab .tabLabel{
  order: 1 !important;             /* label first (right in RTL) */
  text-align: right !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 64px !important;
  font-size: 11px !important;
}

.tabbar .tab .tabIcon, .tabbar.cosmic .tab .tabIcon{
  order: 2 !important;             /* icon second (left in RTL) */
  width: 20px !important;
  height: 20px !important;
  border-radius: 9px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.06) !important;
  flex: 0 0 auto !important;
}

/* prevent any accidental vertical stacking from generic styles */
.tabbar .tab > div, .tabbar.cosmic .tab > div{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}



/* ===== Patch v9: Use single ThreeQ logo + global copyright footer ===== */
.brandLogo{
  height: 24px;
  width: auto;
  display:block;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.25));
}
.footer{
  position: sticky;
  bottom: 0;
  z-index: 4;
  padding: 10px 12px calc(var(--tabbar-h) + 10px);
  color: rgba(255,255,255,.70);
  font-size: 11px;
  text-align: center;
  background: transparent;
}
.footer .line{
  height:1px;
  background: rgba(255,255,255,.10);
  margin-bottom: 10px;
}



/* ===== Patch v10: Teachers page components ===== */
.segment{
  display:flex;
  gap:10px;
  padding:10px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
}
.segBtn{
  flex:1;
  text-align:center;
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.80);
  font-weight: 900;
  cursor: pointer;
  user-select:none;
}
.segBtn.active{
  background: rgba(255,255,255,.92);
  color: #071026;
  border-color: rgba(255,255,255,.92);
}
.teacherGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 12px;
}
.teacherCard{
  display:flex;
  gap:12px;
  align-items:center;
  padding:12px;
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(220px 120px at 20% 20%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(140deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 28px rgba(0,0,0,.22);
}
.teacherAvatar{
  width:66px; height:66px;
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  overflow:hidden;
  flex: 0 0 auto;
}
.teacherAvatar img{
  width:100%; height:100%;
  object-fit: cover;
  display:block;
}
.teacherMeta{flex:1; min-width:0;}
.teacherName{
  font-weight: 950;
  font-size: 16px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.teacherSub{
  margin-top:4px;
  color: rgba(255,255,255,.72);
  font-size: 12px;
  line-height: 1.4;
}
.badges{
  margin-top:8px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.85);
  font-size: 12px;
}
.ratingRow{
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.stars{
  display:flex;
  gap:3px;
  align-items:center;
}
.star{
  width:16px; height:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 6px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  font-size: 12px;
}
.rateText{
  color: rgba(255,255,255,.72);
  font-size: 12px;
}
.actions{
  display:flex;
  gap:8px;
}
.smallBtn{
  padding:8px 10px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color:#fff;
  font-weight: 900;
  font-size: 12px;
}
.smallBtn.primary{
  background: rgba(255,255,255,.92);
  color:#071026;
  border-color: rgba(255,255,255,.92);
}

/* Modal rating */
.modalMask{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display:none;
  align-items:center;
  justify-content:center;
  z-index: 20;
  padding: 18px;
}
.modal{
  width: min(420px, 100%);
  border-radius: 24px;
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(220px 120px at 20% 20%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(140deg, rgba(10,14,30,.95), rgba(10,14,30,.82));
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 46px rgba(0,0,0,.35);
  padding: 14px;
  color:#fff;
}
.modalHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.modalTitle{
  font-weight: 950;
  font-size: 16px;
}
.closeX{
  width:36px; height:36px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.ratingPick{
  display:flex;
  gap:8px;
  margin-top: 12px;
}
.pickStar{
  width:44px; height:44px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 18px;
  cursor:pointer;
}
.pickStar.active{
  background: rgba(255,255,255,.92);
  color:#071026;
  border-color: rgba(255,255,255,.92);
}
.textarea{
  margin-top: 12px;
  width:100%;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:#fff;
  padding: 10px 12px;
  min-height: 90px;
  outline:none;
}
.modalActions{
  display:flex;
  gap:10px;
  margin-top:12px;
}
.toast{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + 20px);
  background: rgba(255,255,255,.92);
  color:#071026;
  border-radius: 16px;
  padding: 10px 12px;
  font-weight: 950;
  font-size: 12px;
  display:none;
  z-index: 25;
}



/* ===== Patch v13: Flashcards page ===== */
.flashWrap{ margin-top: 12px; }
.flashTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.flashPill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
  font-size: 12px;
  font-weight: 900;
}
.flashCard{
  position: relative;
  width: 100%;
  min-height: 280px;
  border-radius: 28px;
  border:1px solid rgba(255,255,255,.14);
  transform-style: preserve-3d;
  transition: transform .65s cubic-bezier(.2,.9,.2,1);
  box-shadow: 0 20px 50px rgba(0,0,0,.28);
  background:
    radial-gradient(260px 140px at 20% 20%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(140deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  backdrop-filter: blur(10px);
}

.flashFace{
  position:absolute; inset:0;
  padding: 16px;

  -webkit-backface-visibility: hidden; /* ✅ مهم */
  backface-visibility: hidden;

  -webkit-transform: translateZ(0.1px);
  transform: translateZ(0.1px);

  display:flex;
  flex-direction:column;
  gap:12px;
}


.flashBadgeRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.flashTag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
  font-size: 12px;
  font-weight: 900;
}
.flashLvl{
  color: rgba(255,255,255,.72);
  font-size: 12px;
  font-weight: 900;
}
.flashQ{
  font-size: 18px;
  font-weight: 950;
  line-height: 1.7;
}
.flashA{
  font-size: 14px;
  line-height: 1.85;
  color: rgba(255,255,255,.86);
}
.flashHint{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color: rgba(255,255,255,.70);
  font-size: 12px;
}
.flashBtns{
  margin-top: 12px;
  display:flex;
  gap:10px;
}
.flashBtns .cosmic-btn{ flex:1; }
.progressDots{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top: 10px;
}
.dot{
  width:8px; height:8px;
  border-radius: 99px;
  background: rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.14);
}
.dot.active{
  background: rgba(255,255,255,.90);
  border-color: rgba(255,255,255,.90);
}


/* ===== Patch v16: Fix Arabic direction in flashcards ===== */
.flashQ, .flashA{
  direction: rtl;
  unicode-bidi: plaintext;
  text-align: right;
  letter-spacing: 0;
}



/* ===== Patch v17: Fix flashcards mirrored backface + SOS avatar ===== */

/* Flashcards: make 3D flip stable on iOS/Safari (prevents mirrored text on back face) */
.flashCard3D{
  perspective: 1200px;
    margin-top: 12px;

  -webkit-perspective: 1200px;
}

.flashCard.isFlipped{
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}


/* Base back face */
.flashBack{
  -webkit-backface-visibility: hidden; /* ✅ */
  backface-visibility: hidden;

  -webkit-transform: rotateY(180deg) translateZ(0.1px);
  transform: rotateY(180deg) translateZ(0.1px);
}



/* Keep Arabic readable (direction + bidi) */
.flashQ, .flashA{
  direction: rtl;
  unicode-bidi: plaintext;
  text-align: right;
}

/* SOS avatar image */
.sos .sosPic{
  width: 34px;
  height: 34px;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 10px 18px rgba(0,0,0,.22);
}

/* === FIX: رجّع شكل كروت الـ grid + رتّب الطبقات === */
.cosmic-tile{
  position: relative;
  overflow: hidden;

  /* شكل الكرت */
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(260px 140px at 20% 20%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(140deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 28px rgba(0,0,0,.22);

  /* مساحة للأيقونة (يمين في RTL) */
  padding: 14px;
  padding-inline-end: 78px;
  min-height: 92px;
}

/* خلي اللمعة الخلفية تحت كل شيء */
.cosmic-tile:before{
  content:"";
  position:absolute;
  inset:auto auto -90px -70px;
  width:220px; height:220px;
  background: radial-gradient(circle at 40% 40%, rgba(63,101,255,.30), transparent 60%);
  z-index: 0;
}

/* النص فوق اللمعة */
.cosmic-tile .label,
.cosmic-tile .sub{
  position: relative;
  z-index: 1;
}

/* الأيقونة فوق الكل */
.cosmic-tile .icon{
  position:absolute;
  inset-inline-end: 14px;   /* يمين في RTL */
  top: 50%;
  transform: translateY(-50%);
  width:44px; height:44px;

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.12);

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:22px;
  z-index: 2;
  pointer-events:none;
}
.tabIcon svg{
  width:18px;
  height:18px;
  stroke-width:2;
}

/* ===== Fix: Light pages (non-cosmic) text colors ===== */
.app-shell:not(.cosmic-shell){
  background:#fff;
  color:#0b1220;
}

/* cards on light pages */
.app-shell:not(.cosmic-shell) .card,
.app-shell:not(.cosmic-shell) .tile,
.app-shell:not(.cosmic-shell) .linkrow{
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(17,24,39,.12);
  color:#0b1220;
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
  backdrop-filter: none;
}

/* text on light pages */
.app-shell:not(.cosmic-shell) .h2,
.app-shell:not(.cosmic-shell) .p,
.app-shell:not(.cosmic-shell) .sub,
.app-shell:not(.cosmic-shell) .muted,
.app-shell:not(.cosmic-shell) small{
  color:#0b1220 !important;
}

/* make secondary text slightly muted */
.app-shell:not(.cosmic-shell) .p,
.app-shell:not(.cosmic-shell) .muted,
.app-shell:not(.cosmic-shell) small{
  color: rgba(11,18,32,.70) !important;
}


.tabIcon svg,
.icon svg,
.bell svg,
.navBtn svg{
  width:18px;
  height:18px;
  stroke-width:2;
}

.row {
  flex-direction: row-reverse;
}

.pill.danger {
  background: #263363;
  color: #fff;
  border: none;
}

.muted.text-white{
  color:#fff !important;
}


.app-shell:not(.cosmic-shell) .muted.text-white {
  color: #fff !important;
}

.bgVid{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.bgOverlay{
  position: fixed;
  inset: 0;
  background: rgba(6,10,24,.78);
  z-index: -1;
}








/* ===== Patch v19: Flashcards 2D flip (fix mirrored Arabic on back face) ===== */
.flashCard3D{ perspective:none; -webkit-perspective:none; }
.flashCard{
  transform-style: flat;
  -webkit-transform-style: flat;
}
.flashCard.isFlipped{
  transform: none;
  -webkit-transform: none;
}

.flashFace{
  position:absolute;
  inset:0;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;

  /* make sure old 3D transforms don't leak */
  transform: none;
  -webkit-transform: none;

  transition: opacity .35s ease, transform .35s ease;
}

.flashFront{ opacity:1; transform: translateY(0); pointer-events:auto; }
.flashBack{ opacity:0; transform: translateY(10px); pointer-events:none; }

.flashCard.isFlipped .flashFront{
  opacity:0;
  transform: translateY(-10px);
  pointer-events:none;
}
.flashCard.isFlipped .flashBack{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}

/* Arabic direction safety */
.flashQ, .flashA{
  direction: rtl;
  unicode-bidi: plaintext;
  text-align: right;
}









/* ===== Patch v23: Live session joined uses cosmic components (stable contrast) ===== */
.live-cosmic .live-hero{
  padding: 14px;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 45px rgba(0,0,0,.26);
  backdrop-filter: blur(10px);
}
.live-cosmic .live-hero h1{
  margin: 0;
  font-size: 18px;
  font-weight: 950;
  color: rgba(255,255,255,.95);
}
.live-cosmic .live-hero p{
  margin: 8px 0 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: rgba(255,255,255,.78);
}
.live-cosmic .chipRow{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.live-cosmic .chipRow a, .live-cosmic .chipRow button{
  appearance:none; border:0;
  text-decoration:none;
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
}
.live-cosmic .chipRow a.primary, .live-cosmic .chipRow button.primary{
  background: rgba(255,255,255,.92);
  color: rgba(0,0,0,.78);
}
.live-cosmic .live-blockTitle{
  font-size: 14px;
  font-weight: 950;
  color: rgba(255,255,255,.92);
  margin-bottom: 8px;
}
.live-cosmic .live-frame{
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.28);
  min-height: 160px;
  display:flex; align-items:center; justify-content:center;
  color: rgba(255,255,255,.72);
  font-size: 12px;
}
.live-cosmic .choiceBtn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  font-weight: 900;
  text-align: right;
}
.live-cosmic .choiceBtn .dot{
  width:18px; height:18px; border-radius: 999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
}
.live-cosmic .actionsRow{ display:flex; gap:10px; margin-top:12px; }
.live-cosmic .actionsRow a{ flex:1; text-align:center; }



/* ===== Patch v25: Auth forms ===== */
.field{ display:block; margin-top:12px; }
.label{ font-weight: 900; font-size: 12px; color: rgba(255,255,255,.9); margin-bottom:8px; }
.input{
  width:100%;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  outline: none;
}
.input::placeholder{ color: rgba(255,255,255,.55); }
.hint{ margin-top:8px; font-size: 11px; color: rgba(255,255,255,.70); line-height:1.6; }
.req{ color: #ffd166; font-weight: 950; }
.checkrow{ display:flex; gap:10px; align-items:flex-start; color: rgba(255,255,255,.85); font-size: 12px; line-height:1.6; }
.checkrow input{ margin-top:3px; }



/* ===== Patch v26: Recorded courses (carousel + teacher cards + course content) ===== */

.gradeBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 12px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
}
.gradeBar .label{ font-weight: 950; font-size: 12px; color: rgba(255,255,255,.86); }
.gradeBar .value{ font-weight: 950; color: rgba(255,255,255,.96); }
.gradeBar .gradeSelect{
  width: 180px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
}

.hScrollerWrap{ margin-top: 14px; }
.hScrollerHeader{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px;
}
.hScrollerHeader .title{ font-weight: 950; font-size: 16px; color: rgba(255,255,255,.95); }
.hScrollerHeader .sub{ font-size: 12px; color: rgba(255,255,255,.75); margin-top:4px; }
.hScrollerControls{ display:flex; gap:10px; }
.hBtn{
  width: 40px; height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  display:flex; align-items:center; justify-content:center;
}

.hScroller{
  display:flex;
  gap: 12px;
  overflow-x:auto;
  padding-bottom: 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  direction: rtl; /* start from right */
}
.hScroller::-webkit-scrollbar{ height: 8px; }
.hScroller::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.18);
  border-radius: 999px;
}
.courseCard{
  scroll-snap-align: start;
  min-width: 240px;
  max-width: 240px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 45px rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
  overflow:hidden;
  text-decoration:none;
  color: rgba(255,255,255,.95);
}
.courseCard .img{
  width:100%;
  height: 140px;
  object-fit: cover;
  display:block;
}
.courseCard .body{ padding: 12px 12px 14px 12px; }
.courseCard .name{ font-weight: 950; font-size: 15px; }
.courseCard .meta{ margin-top:6px; font-size: 12px; color: rgba(255,255,255,.75); line-height:1.5; }
.courseCard .tags{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap;}
.tagPill{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.16);
  color: rgba(255,255,255,.85);
  font-size: 11px;
  font-weight: 900;
}

.emptyState{
  margin-top: 16px;
  padding: 16px;
  border-radius: 22px;
  border: 1px dashed rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.78);
  font-size: 12px;
  line-height:1.7;
}

/* Teacher cards */
.segmented{
  display:flex;
  gap:10px;
  padding: 6px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
}
.segBtn{
  flex:1;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(255,255,255,.82);
  font-weight: 950;
  font-size: 12px;
  cursor: pointer;
}
.segBtn.active{
  background: rgba(255,255,255,.92);
  color: rgba(0,0,0,.78);
}

.teacherCard{
  margin-top: 12px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 45px rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
  overflow:hidden;
}
.teacherTop{
  display:flex;
  gap:12px;
  padding: 14px;
  align-items:center;
}
.teacherTop img{
  width: 64px; height: 64px; border-radius: 18px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.18);
}
.teacherInfo .name{ font-weight: 950; font-size: 15px; color: rgba(255,255,255,.95); }
.teacherInfo .sub{ margin-top:4px; font-size: 12px; color: rgba(255,255,255,.74); }
.teacherMeta{
  margin-inline-start:auto;
  text-align:left;
}
.price{ font-weight: 950; font-size: 14px; color: rgba(255,255,255,.95); }
.stars{ margin-top:6px; font-size: 12px; color: rgba(255,255,255,.80); }

.teacherBadges{ display:flex; gap:8px; flex-wrap:wrap; padding: 0 14px 12px 14px; }

.tabs{
  display:flex;
  gap:10px;
  padding: 10px 14px 0 14px;
}
.tabBtn{
  flex:1;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.86);
  font-weight: 950;
  font-size: 12px;
  cursor:pointer;
}
.tabBtn.active{
  background: rgba(255,255,255,.92);
  color: rgba(0,0,0,.78);
  border-color: rgba(255,255,255,.92);
}
.teacherPanel{ padding: 12px 14px 14px 14px; }

.unit{
  margin-top:10px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  overflow:hidden;
}
.unitHead{
  padding: 12px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-weight: 950;
  color: rgba(255,255,255,.92);
  cursor:pointer;
}
.unitBody{ padding: 12px; border-top:1px solid rgba(255,255,255,.10); display:none; }
.unit.open .unitBody{ display:block; }

.lessonRow{
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  margin-top:10px;
}
.lessonRow .t{ font-weight: 950; color: rgba(255,255,255,.92); font-size: 12px;}
.lessonRow .d{ margin-top:6px; color: rgba(255,255,255,.74); font-size: 11px; line-height:1.6;}
.lessonRow .meta{ margin-top:8px; display:flex; justify-content:space-between; color: rgba(255,255,255,.78); font-size: 11px; }
.progress{
  margin-top:8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  overflow:hidden;
}
.progress > span{
  display:block;
  height:100%;
  width: 0%;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
}



/* ===== Patch v27: Course details (light, matches reference screenshots) ===== */
.light-shell{
  background: #f4f6fb;
  color: #0f172a;
}
.light-shell .content{ padding: 16px; gap: 14px; }
.light-shell .footer{ color: rgba(15,23,42,.65); }

.cd-topbar{
  display:flex; align-items:center; justify-content:flex-start;
  padding: 14px 16px 6px 16px;
}
.cd-back{
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  color:#0f172a;
  box-shadow: 0 10px 22px rgba(15,23,42,.08);
  text-decoration:none;
}
.cd-pill{
  margin: 10px 16px 0 16px;
  display:inline-flex; align-items:center; gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #f6ead9;
  color: #b7892e;
  font-weight: 950;
  font-size: 13px;
}
.cd-hero{
  margin: 12px 16px 0 16px;
  border-radius: 26px;
  overflow:hidden;
  position:relative;
  box-shadow: 0 22px 55px rgba(15,23,42,.18);
  background: #0b1026;
  min-height: 160px;
}
.cd-hero img{
  width:100%; height: 180px; object-fit: cover; display:block;
  filter: saturate(1.05) contrast(1.02);
}
.cd-hero::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.10) 60%, rgba(0,0,0,0) 100%);
}
.cd-heroTitle{
  position:absolute; right: 16px; left: 16px; bottom: 16px;
  z-index:2;
  color:#fff;
  font-weight: 950;
  font-size: 22px;
  line-height: 1.25;
  text-shadow: 0 10px 22px rgba(0,0,0,.55);
}
.cd-stars{
  position:absolute; left: 16px; bottom: 62px;
  z-index:2;
  display:flex; align-items:center; gap:8px;
  color: #f6c65b;
  font-weight: 950;
}
.cd-stars .num{
  color:#fff; opacity:.9; font-size: 12px;
  padding: 6px 10px; border-radius: 999px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.16);
}
.cd-metaRow{
  margin: 12px 16px 0 16px;
  display:flex; gap:10px; flex-wrap:wrap;
}
.cd-tag{
  padding: 10px 12px;
  border-radius: 999px;
  background:#fff;
  border: 1px solid rgba(15,23,42,.10);
  color: rgba(15,23,42,.78);
  font-weight: 900;
  font-size: 12px;
}
.cd-tag.gold{ background:#fff7ea; color:#b7892e; border-color: rgba(183,137,46,.20); }

.cd-card{
  margin: 0 16px;
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 22px;
  padding: 14px;
  box-shadow: 0 12px 30px rgba(15,23,42,.07);
}
.cd-cardTitle{
  font-weight: 950;
  font-size: 16px;
  color:#0f172a;
  display:flex; align-items:center; justify-content:space-between;
}
.cd-muted{ color: rgba(15,23,42,.62); font-size: 12px; line-height: 1.7; margin-top: 8px; }
.cd-progressRow{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; }
.cd-progressBar{
  height: 10px; border-radius: 999px; overflow:hidden;
  background: rgba(15,23,42,.08);
}
.cd-progressFill{ height:100%; border-radius: 999px; background: #b7892e; width: 75%; }
.cd-btn{
  width:100%;
  margin-top: 12px;
  display:flex; align-items:center; justify-content:center;
  padding: 14px 14px;
  border-radius: 14px;
  background: #223a7a;
  color:#fff;
  font-weight: 950;
  text-decoration:none;
  box-shadow: 0 14px 30px rgba(34,58,122,.22);
}
.cd-seg{
  margin: 0 16px;
  background: rgba(15,23,42,.06);
  border-radius: 999px;
  padding: 6px;
  display:flex; gap:8px;
}
.cd-seg button{
  flex:1;
  padding: 12px 12px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  font-weight: 950;
  color: rgba(15,23,42,.72);
}
.cd-seg button.active{
  background: #0f1f56;
  color:#fff;
}

.statsGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
.statRow{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: #fbfcff;
}
.statRow .k{ color: rgba(15,23,42,.60); font-weight: 900; font-size: 12px; }
.statRow .v{ color:#0f172a; font-weight: 950; font-size: 13px; }

.teacherCard{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: 14px;
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,.10);
  background: #fff;
  box-shadow: 0 12px 30px rgba(15,23,42,.06);
}
.teacherInfo{ display:flex; align-items:center; gap:12px; }
.teacherAvatar{
  width:56px; height:56px; border-radius: 18px; object-fit: cover;
  border: 1px solid rgba(15,23,42,.12);
}
.teacherName{ font-weight: 950; font-size: 15px; }
.teacherStars{ color:#f6c65b; font-weight: 950; font-size: 13px; margin-top: 6px; }
.rateBtn{
  padding: 12px 12px;
  border-radius: 14px;
  background:#fff7ea;
  color:#b7892e;
  border: 1px solid rgba(183,137,46,.18);
  font-weight: 950;
  text-decoration:none;
  white-space: nowrap;
}

.smallToggle{
  margin-top: 12px;
  display:flex; gap:10px;
}
.smallToggle button{
  flex:1;
  padding: 10px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background:#fff;
  color: rgba(15,23,42,.75);
  font-weight: 950;
}
.smallToggle button.active{
  background:#0f1f56;
  color:#fff;
  border-color:#0f1f56;
}
.avatarStrip{
  margin-top: 10px;
  display:flex; gap:10px; overflow:auto;
  padding-bottom: 4px;
}
.avatarChip{
  width:54px; height:54px; border-radius: 18px;
  border: 2px solid transparent;
  background:#fff;
  overflow:hidden;
  flex: 0 0 auto;
}
.avatarChip img{ width:100%; height:100%; object-fit: cover; }
.avatarChip.active{ border-color:#b7892e; }

.unitCard{
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius: 22px;
  padding: 14px;
  box-shadow: 0 12px 30px rgba(15,23,42,.06);
}
.unitHead{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.unitTitle{ font-weight: 950; font-size: 15px; }
.unitMeta{ color: rgba(15,23,42,.60); font-weight: 900; font-size: 12px; margin-top: 6px; }
.unitToggle{
  display:flex; align-items:center; gap:8px;
  color:#b7892e;
  font-weight: 950;
  font-size: 12px;
  background: transparent;
  border: 0;
}
.lessons{
  margin-top: 12px;
  display:none;
  border-top: 1px solid rgba(15,23,42,.08);
  padding-top: 12px;
  gap: 10px;
  flex-direction: column;
}
.unitCard.open .lessons{ display:flex; }

.lessonRow{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: 12px 12px;
  border-radius: 18px;
  background: #fbfcff;
  border: 1px solid rgba(15,23,42,.08);
}
.lessonLeft{
  display:flex; align-items:flex-start; gap:10px; flex:1;
}
.lessonStatus{
  width:18px; height:18px; border-radius: 999px;
  border: 2px solid rgba(15,23,42,.20);
  display:flex; align-items:center; justify-content:center;
  flex: 0 0 auto;
  margin-top: 2px;
}
.lessonStatus.done{ border-color: #22c55e; background: rgba(34,197,94,.12); color:#16a34a; }
.lessonStatus.todo{ border-color: rgba(15,23,42,.18); background: rgba(15,23,42,.04); color: rgba(15,23,42,.35); }
.lessonTitle{ font-weight: 950; font-size: 13px; color:#0f172a; line-height:1.35; }
.lessonSub{ margin-top: 6px; font-size: 11px; color: rgba(15,23,42,.58); }
.lessonActions{
  display:flex; flex-direction:column; align-items:flex-end; gap:8px;
}
.lessonLink{
  font-size: 12px;
  font-weight: 950;
  color:#223a7a;
  text-decoration:none;
}
.lessonProg{
  width: 110px;
}
.lessonProg .cd-progressBar{ height: 8px; }



/* ===== Patch v28: Course Details Cosmic Theme (unified) ===== */
.cd-cosmic{ color: rgba(255,255,255,.92); }
.cd-cosmic .cd-topbar{ padding: 14px 16px 6px 16px; }
.cd-cosmic .cd-back{
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
  text-decoration:none;
}
.cd-cosmic .cd-pill{
  margin: 10px 16px 0 16px;
  display:inline-flex; align-items:center; gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(246,198,91,.12);
  border: 1px solid rgba(246,198,91,.20);
  color: rgba(246,198,91,.95);
  font-weight: 950;
  font-size: 13px;
  backdrop-filter: blur(10px);
}
.cd-cosmic .cd-hero{
  margin: 12px 16px 0 16px;
  border-radius: 26px;
  overflow:hidden;
  position:relative;
  box-shadow: 0 26px 70px rgba(0,0,0,.34);
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.12);
}
.cd-cosmic .cd-hero img{
  width:100%; height: 180px; object-fit: cover; display:block;
  filter: saturate(1.05) contrast(1.02);
}
.cd-cosmic .cd-hero::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(0,0,0,.70) 0%, rgba(0,0,0,.18) 58%, rgba(0,0,0,0) 100%);
}
.cd-cosmic .cd-heroTitle{
  position:absolute; right: 16px; left: 16px; bottom: 16px;
  z-index:2;
  color: rgba(255,255,255,.96);
  font-weight: 950;
  font-size: 22px;
  line-height: 1.25;
  text-shadow: 0 14px 28px rgba(0,0,0,.55);
}
.cd-cosmic .cd-stars{
  position:absolute; left: 16px; bottom: 62px;
  z-index:2;
  display:flex; align-items:center; gap:8px;
  color: #f6c65b;
  font-weight: 950;
}
.cd-cosmic .cd-stars .num{
  color: rgba(255,255,255,.92);
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.16);
}
.cd-cosmic .cd-metaRow{
  margin: 12px 16px 0 16px;
  display:flex; gap:10px; flex-wrap:wrap;
}
.cd-cosmic .cd-tag{
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.82);
  font-weight: 900;
  font-size: 12px;
  backdrop-filter: blur(10px);
}
.cd-cosmic .cd-tag.gold{
  background: rgba(246,198,91,.12);
  color: rgba(246,198,91,.95);
  border-color: rgba(246,198,91,.22);
}

.cd-cosmic .cd-card{
  margin: 0 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  padding: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
  backdrop-filter: blur(12px);
}
.cd-cosmic .cd-cardTitle{
  font-weight: 950;
  font-size: 16px;
  color: rgba(255,255,255,.94);
  display:flex; align-items:center; justify-content:space-between;
}
.cd-cosmic .cd-muted{
  color: rgba(255,255,255,.72);
  font-size: 12px;
  line-height: 1.8;
  margin-top: 8px;
}
.cd-cosmic #courseProgressText{ color: rgba(255,255,255,.70) !important; }

.cd-cosmic .cd-progressBar{
  height: 10px;
  border-radius: 999px;
  overflow:hidden;
  background: rgba(255,255,255,.10);
}
.cd-cosmic .cd-progressFill{
  height:100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(246,198,91,.95), rgba(183,137,46,.95));
}
.cd-cosmic .cd-btn{
  width:100%;
  margin-top: 12px;
  display:flex; align-items:center; justify-content:center;
  padding: 14px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  color: rgba(0,0,0,.78);
  font-weight: 950;
  text-decoration:none;
  box-shadow: 0 18px 48px rgba(0,0,0,.25);
}

.cd-cosmic .cd-seg{
  margin: 0 16px;
  background: rgba(255,255,255,.08);
  border-radius: 999px;
  padding: 6px;
  display:flex; gap:8px;
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
}
.cd-cosmic .cd-seg button{
  flex:1;
  padding: 12px 12px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  font-weight: 950;
  color: rgba(255,255,255,.78);
}
.cd-cosmic .cd-seg button.active{
  background: rgba(255,255,255,.92);
  color: rgba(0,0,0,.78);
}

.cd-cosmic .statsGrid{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.cd-cosmic .statRow{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
}
.cd-cosmic .statRow .k{ color: rgba(255,255,255,.70); font-weight: 900; font-size: 12px; }
.cd-cosmic .statRow .v{ color: rgba(255,255,255,.92); font-weight: 950; font-size: 13px; }

.cd-cosmic .teacherCard{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: 14px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
  backdrop-filter: blur(12px);
}
.cd-cosmic .teacherAvatar{
  width:56px; height:56px; border-radius: 18px; object-fit: cover;
  border: 1px solid rgba(255,255,255,.14);
}
.cd-cosmic .teacherName{ font-weight: 950; font-size: 15px; color: rgba(255,255,255,.94); }
.cd-cosmic .teacherStars{ color:#f6c65b; font-weight: 950; font-size: 13px; margin-top: 6px; }
.cd-cosmic .rateBtn{
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(246,198,91,.12);
  color: rgba(246,198,91,.95);
  border: 1px solid rgba(246,198,91,.20);
  font-weight: 950;
  text-decoration:none;
  white-space: nowrap;
}

.cd-cosmic .smallToggle{ margin-top: 12px; display:flex; gap:10px; }
.cd-cosmic .smallToggle button{
  flex:1;
  padding: 10px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.80);
  font-weight: 950;
}
.cd-cosmic .smallToggle button.active{
  background: rgba(255,255,255,.92);
  color: rgba(0,0,0,.78);
  border-color: rgba(255,255,255,.92);
}

.cd-cosmic .avatarStrip{
  margin-top: 10px;
  display:flex; gap:10px; overflow:auto;
  padding-bottom: 4px;
}
.cd-cosmic .avatarChip{
  width:54px; height:54px; border-radius: 18px;
  border: 2px solid transparent;
  background: rgba(255,255,255,.06);
  overflow:hidden;
  flex: 0 0 auto;
}
.cd-cosmic .avatarChip img{ width:100%; height:100%; object-fit: cover; }
.cd-cosmic .avatarChip.active{ border-color: rgba(246,198,91,.95); }

.cd-cosmic .unitCard{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  padding: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
  backdrop-filter: blur(12px);
}
.cd-cosmic .unitTitle{ font-weight: 950; font-size: 15px; color: rgba(255,255,255,.94); }
.cd-cosmic .unitMeta{ color: rgba(255,255,255,.70); font-weight: 900; font-size: 12px; margin-top: 6px; }
.cd-cosmic .unitToggle{
  display:flex; align-items:center; gap:8px;
  color: rgba(246,198,91,.95);
  font-weight: 950;
  font-size: 12px;
  background: transparent;
  border: 0;
}
.cd-cosmic .lessons{
  margin-top: 12px;
  display:none;
  border-top: 1px solid rgba(255,255,255,.10);
  padding-top: 12px;
  gap: 10px;
  flex-direction: column;
}
.cd-cosmic .unitCard.open .lessons{ display:flex; }

.cd-cosmic .lessonRow{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: 12px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
}
.cd-cosmic .lessonTitle{ font-weight: 950; font-size: 13px; color: rgba(255,255,255,.94); line-height:1.35; }
.cd-cosmic .lessonSub{ margin-top: 6px; font-size: 11px; color: rgba(255,255,255,.72); }
.cd-cosmic .lessonLink{
  font-size: 12px;
  font-weight: 950;
  color: rgba(255,255,255,.92);
  text-decoration:none;
}
.cd-cosmic .lessonStatus{
  width:18px; height:18px; border-radius: 999px;
  border: 2px solid rgba(255,255,255,.22);
  display:flex; align-items:center; justify-content:center;
  flex: 0 0 auto;
  margin-top: 2px;
}
.cd-cosmic .lessonStatus.done{
  border-color: rgba(34,197,94,.70);
  background: rgba(34,197,94,.14);
  color: rgba(34,197,94,.95);
}
.cd-cosmic .lessonStatus.todo{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.35);
}

/* ===== Patch v29: Phone auth row ===== */
.phoneRow{
  display:flex;
  gap:12px;
  align-items:flex-end;
  flex-wrap: wrap;
}



/* ===== Patch v30: Auth text color fixes on cosmic theme ===== */
.cosmic-shell .cd-muted{
  color: rgba(255,255,255,.72) !important;
}
.cosmic-shell .hint{
  color: rgba(255,255,255,.72) !important;
}
.cosmic-shell .p{
  color: rgba(255,255,255,.78) !important;
}



/* ===== Patch v31: Unified bottom tabbar (icons + labels) ===== */
.tabbar .tab{
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.tabbar .tab .tabLabel{
  text-align:center !important;
  max-width: 78px;
  line-height: 1.05;
}



/* ===== Patch v32: Unified bottom tabbar (match reference screenshot) ===== */
.tabbar.cosmic{
  direction: rtl;
  height: var(--tabbar-h);
  padding: 6px 6px 8px;
  background: rgba(10,14,30,.88);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,.12);
}
.tabbar.cosmic .tab{
  text-decoration:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 5px;
  padding: 6px 4px;
  color: rgba(255,255,255,.55);
}
.tabbar.cosmic .tabLabel{
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}
.tabbar.cosmic .tabIcon{
  width:auto; height:auto;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  font-size: 0;
  display:flex; align-items:center; justify-content:center;
}
.tabbar.cosmic .tabIcon svg{
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .92;
}
.tabbar.cosmic .tab.active{
  color: rgba(255,255,255,.98);
}
.tabbar.cosmic .tab.active .tabLabel{
  font-weight: 950;
}



/* ===== Patch v33: Unified Back Arrow + New Logo (non-splash) ===== */
.app-shell{ position: relative; }

.backArrow{
  font-size: 22px;
  line-height: 1;
  font-weight: 950;
  color: rgba(255,255,255,.92);
  transform: translateY(-1px);
}

.floatingBack{
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 60;
}

.brandLogo{
  height: 24px !important;
  width: 24px !important;
  border-radius: 10px;
}



/* ===== Patch v36: Learn Hub unified 3-option card ===== */
.triActions{
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.triAction{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  text-decoration:none;
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
  backdrop-filter: blur(12px);
}
.triIcon{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  font-weight: 950;
}
.triText{ flex:1; min-width: 0; }
.triTitle{
  font-weight: 950;
  font-size: 14px;
  color: rgba(255,255,255,.94);
}
.triSub{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.triGo{
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(246,198,91,.12);
  border: 1px solid rgba(246,198,91,.20);
  color: rgba(246,198,91,.95);
  font-weight: 950;
}



/* ===== Patch v40: Fix menu contrast (white on white) ===== */
.menu, .menu-panel, .dropdown, .dropdown-menu, .sheet, .sheet-panel, .list-panel, .prototypeMenu, .prototype-menu{
  color: rgba(15,23,42,.95) !important;
}
.menu a, .menu-panel a, .dropdown a, .dropdown-menu a, .sheet a, .sheet-panel a, .list-panel a, .prototypeMenu a, .prototype-menu a{
  color: rgba(15,23,42,.95) !important;
}
.menu .item, .menu-panel .item, .dropdown .item, .dropdown-menu .item, .sheet .item, .sheet-panel .item, .list-panel .item{
  color: rgba(15,23,42,.95) !important;
}
.menu .muted, .menu-panel .muted, .dropdown .muted, .dropdown-menu .muted{
  color: rgba(15,23,42,.65) !important;
}
/* common plain lists used as navigation */
ul.pageList, .pageList, .page-list, .navList, .nav-list{
  background: rgba(255,255,255,.96) !important;
  color: rgba(15,23,42,.95) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
}
ul.pageList a, .pageList a, .page-list a, .navList a, .nav-list a{
  color: rgba(15,23,42,.95) !important;
}



/* ===== Patch v40b: Index viewer list contrast ===== */
.list{
  background: rgba(255,255,255,.96) !important;
  color: rgba(15,23,42,.95) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
}
.list .item{
  color: rgba(15,23,42,.95) !important;
}
.list .item .name{
  color: rgba(15,23,42,.95) !important;
}
.list .item .path, .list .item .meta{
  color: rgba(15,23,42,.70) !important;
}
.list .item:hover{
  background: rgba(15,23,42,.06) !important;
}



/* ===== Patch v43: Teachers pages - deeper glassy space theme ===== */
.teacherCard{
  color: rgba(255,255,255,.92) !important;
  border-color: rgba(255,255,255,.14) !important;
  background:
    radial-gradient(240px 140px at 18% 22%, rgba(98,155,255,.22), transparent 62%),
    radial-gradient(240px 140px at 85% 15%, rgba(160,120,255,.16), transparent 58%),
    linear-gradient(160deg, rgba(12,24,58,.55), rgba(10,16,38,.35)) !important;
  backdrop-filter: blur(14px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(135%) !important;
}
.teacherCard .teacherName{ color: rgba(255,255,255,.98) !important; }
.teacherCard .teacherSub{ color: rgba(255,255,255,.72) !important; }
.teacherCard .rateText{ color: rgba(255,255,255,.72) !important; }
.teacherCard .badge{
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: rgba(255,255,255,.92) !important;
}
.teacherCard .star{
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.92) !important;
}
.teacherCard .rateBtn{
  background: rgba(255,255,255,.92) !important;
  color: rgba(15,23,42,.95) !important;
  border-color: rgba(255,255,255,.45) !important;
}
.teacherCard .rateBtn:hover{
  background: rgba(255,255,255,.98) !important;
}

.glassCard{
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(240px 140px at 18% 22%, rgba(98,155,255,.22), transparent 62%),
    radial-gradient(240px 140px at 85% 15%, rgba(160,120,255,.16), transparent 58%),
    linear-gradient(160deg, rgba(12,24,58,.55), rgba(10,16,38,.35));
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  color: rgba(255,255,255,.92);
  box-shadow: 0 14px 28px rgba(0,0,0,.22);
}


/* Exam Filter */
.exam-filter{ margin-top:12px; }
.filter-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:10px;
}
.field .label{
  font-size:12px;
  opacity:.9;
  margin-bottom:6px;
}
.filter-summary{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}
.dist-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:10px;
}
.dist-note{ font-size:12px; opacity:.8; }
.distbar{
  margin-top:10px;
  height:10px;
  border-radius:999px;
  overflow:hidden;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
}
.distbar .seg{ height:100%; float:left; }
.distbar .seg.easy{ background: rgba(120, 255, 180, .55); }
.distbar .seg.mid{ background: rgba(130, 180, 255, .55); }
.distbar .seg.hard{ background: rgba(255, 160, 160, .55); }

.dist-grid{ margin-top:10px; display:grid; gap:10px; }
.dist-row{
  display:grid;
  grid-template-columns:80px 1fr 92px;
  gap:10px;
  align-items:center;
}
.kname{ font-weight:900; }
.ef-range{
  width:100%;
  accent-color: rgba(170, 200, 255, .95);
}
.pwrap{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
}
.pwrap .input{
  padding-left:26px;
  text-align:center;
}
.pwrap .pct{
  position:absolute;
  left:10px;
  font-weight:900;
  opacity:.9;
  pointer-events:none;
}
.dist-warn{
  margin-top:8px;
  font-size:12px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  display:none;
}


/* Native selects: keep readable on macOS/Safari dropdown */
select.input{ color-scheme: dark; }
select.input option{ color:#0b1222; background:#ffffff; }


/* Floating Scientific Keyboard */
.kbFab{
  position: fixed;
  left: 16px;
  bottom: 86px; /* above bottom tabs */
  z-index: 50;
  width: 52px;
  height: 52px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: rgba(255,255,255,.95);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 35px rgba(0,0,0,.35);
}
.kbFab:active{ transform: scale(.98); }

.kbOverlay{
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  background: rgba(3,8,18,.55);
}
.kbOverlay.open{ display:block; }

.kbPanel{
  position: absolute;
  left: 50%;
  bottom: 90px;
  transform: translateX(-50%);
  width: min(520px, calc(100vw - 24px));
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  padding: 12px;
}

.kbHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 10px;
}
.kbTitle{
  font-weight: 950;
}
.kbClose{
  width: 38px; height: 38px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
}

.kbTabs{
  display:flex;
  gap:8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.kbTab{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  font-weight: 800;
  font-size: 12px;
}
.kbTab.active{
  background: rgba(255,255,255,.22);
}

.kbGrid{
  display:grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
}
.kbKey{
  padding: 10px 0;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.95);
  text-align:center;
  font-weight: 900;
  user-select:none;
}
.kbKey:active{ transform: scale(.98); background: rgba(255,255,255,.14); }

.timerPill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-weight: 900;
}
.timerPill.danger{
  border-color: rgba(255,120,120,.30);
  background: rgba(255,120,120,.12);
}

.examMetaGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.examMetaCard{
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  padding: 12px;
}
.examMetaCard .k{ font-size: 12px; opacity:.85; margin-bottom:6px; }
.examMetaCard .v{ font-weight: 950; }

.statusBadge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
}
.statusBadge.pending{ border-color: rgba(255,200,120,.30); background: rgba(255,200,120,.10); }
.statusBadge.ready{ border-color: rgba(120,255,180,.30); background: rgba(120,255,180,.10); }
.statusBadge.inprogress{ border-color: rgba(130,180,255,.30); background: rgba(130,180,255,.10); }

.uploadBox{
  border: 1px dashed rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
  border-radius: 18px;
  padding: 12px;
}
.uploadBox .hint{ opacity:.85; font-size: 12px; }

.noticeCard{
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  padding: 12px;
  font-size: 13px;
  line-height: 1.5;
}

.notifBadge{
  position:absolute;
  top:-6px;
  left:-6px;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255,80,80,.95);
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 11px;
  font-weight: 950;
  padding: 0 6px;
  border: 2px solid rgba(0,0,0,.25);
}


/* =========================================================
   Cosmic Glass Theme — Global Enforcer (v47)
   الهدف: توحيد كل الصفحات على الثيم الفضائي الزجاجي
   ========================================================= */

:root{
  /* Text */
  --ink: rgba(255,255,255,.96);
  --muted: rgba(255,255,255,.72);

  /* Glass surfaces */
  --surface: rgba(255,255,255,.10);
  --surface2: rgba(255,255,255,.06);
  --stroke: rgba(255,255,255,.18);
}

body{
  background:
    radial-gradient(900px 520px at 20% 10%, rgba(70,130,255,.35), transparent 60%),
    radial-gradient(800px 460px at 80% 30%, rgba(90,230,255,.22), transparent 60%),
    linear-gradient(180deg, #050B1E 0%, #061A3B 42%, #02050E 100%);
  color: var(--ink);
}

/* بعض الصفحات كانت تنقلب إلى ثيم أبيض بسبب fallback قديم */
.app-shell:not(.cosmic-shell){
  background:
    radial-gradient(900px 520px at 20% 10%, rgba(70,130,255,.28), transparent 60%),
    radial-gradient(800px 460px at 80% 30%, rgba(90,230,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(5,11,30,.92) 0%, rgba(6,26,59,.92) 45%, rgba(2,5,14,.94) 100%);
  color: var(--ink);
}

/* تأكيد أن الكروت/السطوح (حتى لو كانت "بيضاء" سابقاً) تُعرض بزجاج */
.card, .panel, .sheet, .modalCard, .drawer, .listCard, .contentCard, .topCard, .metricsCard{
  background: var(--surface) !important;
  border: 1px solid var(--stroke) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--ink);
}

/* نصوص عامة */
.muted, .sub, .hint, .small{
  color: var(--muted) !important;
}

/* إصلاح قائمة الخيارات (Select) — عند hover كانت الخلفية بيضاء والنص أبيض */
select option{
  color: #0b1220;
  background: #ffffff;
}


/* =========================================================
   Cosmic Glass Theme — Lists & Link Rows Fix (v48)
   الهدف: منع (أبيض على أبيض) في صفحات القوائم/الإدارة
   + إصلاح hover: إذا الخلفية صارت بيضاء، النص يصير غامق
   ========================================================= */

/* اجعل أي قائمة/سطر رابط زجاجي فضائي بشكل موحّد */
.list{
  background: var(--surface2) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: 18px !important;
  padding: 12px !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--ink) !important;
}

.linkrow{
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 16px !important;
  color: var(--ink) !important;
}

/* نصوص داخل السطر */
.linkrow .muted,
.linkrow .sub,
.linkrow .hint,
.linkrow .small,
.list .muted,
.list .sub,
.list .hint,
.list .small{
  color: var(--muted) !important;
}

/* hover: تمييز واضح + تباين صحيح */
.linkrow:hover,
.list a:hover,
.list .item:hover,
.list .linkrow:hover{
  background: rgba(255,255,255,.88) !important;
  border-color: rgba(255,255,255,.55) !important;
  color: #0b1220 !important;
}

.linkrow:hover *,
.list a:hover *,
.list .item:hover *,
.list .linkrow:hover *{
  color: #0b1220 !important;
}


/* ==============================
   School Admin – Modern Dashboard
   ============================== */

.schoolHero{padding:18px 18px 14px;}
.schoolId{display:flex;align-items:center;gap:12px;}
.schoolLogoLg{width:56px;height:56px;border-radius:16px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 25px rgba(0,0,0,.25);
  padding:10px;backdrop-filter:blur(10px);
}
.schoolName{font-size:18px;font-weight:800;letter-spacing:.2px;}
.schoolMeta{margin-top:2px;font-size:12px;color:rgba(255,255,255,.72);}

.branchBlock{margin-top:14px;}
.branchLabel{font-size:12px;color:rgba(255,255,255,.75);margin-bottom:8px;}
.branchSeg{overflow:auto;}

.dashGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;}
@media (max-width:420px){.dashGrid{grid-template-columns:1fr;}}

.card.kpiCard{position:relative;overflow:hidden;min-height:112px;}
.card.kpiCard::before{
  content:"";
  position:absolute;
  inset:-40px;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--accent, #7de3ff) 55%, transparent) 0%, transparent 65%);
  opacity:.28;
  pointer-events:none;
}
.card.kpiCard::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.10), transparent 55%);
  opacity:.45;
  pointer-events:none;
}
.card.kpiCard > *{position:relative;z-index:1;}

.kpiTop{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
.kpiLabel{font-size:12px;color:rgba(255,255,255,.76);line-height:1.25;}
.kpiIcon{width:34px;height:34px;border-radius:12px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
  display:grid;place-items:center;
}
.kpiIcon svg{width:18px;height:18px;opacity:.92;}
.kpiValue{margin-top:10px;font-size:26px;font-weight:900;letter-spacing:.3px;}
.kpiMeta{margin-top:4px;font-size:12px;color:rgba(255,255,255,.72);display:flex;align-items:center;gap:8px;flex-wrap:wrap;}

.kpiPair{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.kpiBadge{display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
  font-size:12px;color:rgba(255,255,255,.92);
}
.kpiBadge strong{font-weight:800;}

.ratioBar{margin-top:10px;height:10px;border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.10);
}
.ratioSeg{height:100%;float:left;}
.ratioMale{background:linear-gradient(90deg, rgba(125,227,255,.95), rgba(124,92,255,.9));}
.ratioFemale{background:linear-gradient(90deg, rgba(255,211,107,.95), rgba(255,132,214,.75));}

.actionTiles{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;}
@media (max-width:420px){.actionTiles{grid-template-columns:1fr;}}
.actionTile{display:flex;align-items:center;gap:10px;padding:14px;border-radius:18px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  text-decoration:none;color:inherit;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.actionTile:hover{transform:translateY(-1px);background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.18);}
.actionTileIcon{width:40px;height:40px;border-radius:16px;display:grid;place-items:center;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
}
.actionTileIcon svg{width:18px;height:18px;}
.actionTileText{display:flex;flex-direction:column;gap:2px;}
.actionTileText strong{font-weight:900;}
.actionTileText span{font-size:12px;color:rgba(255,255,255,.72);}

/* ==============================
   School Admin – Charts
   ============================== */

.chartsGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media (max-width:420px){.chartsGrid{grid-template-columns:1fr;}}

.chartHead{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px;}
.chartTitle{font-weight:900;}
.chartSub{font-size:12px;color:rgba(255,255,255,.72);margin-top:2px;}
.chartBadge{display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
  font-size:12px;color:rgba(255,255,255,.88);
}

.donutWrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.donut{width:150px;height:150px;border-radius:50%;
  background:conic-gradient(var(--c1, rgba(125,227,255,.95)) 0 calc(var(--p1, 50)*1%), var(--c2, rgba(255,211,107,.9)) calc(var(--p1, 50)*1%) 100%);
  position:relative;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 14px 30px rgba(0,0,0,.35);
}
.donutInner{position:absolute;inset:18px;border-radius:50%;
  background:rgba(14,18,35,.55);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(10px);
  display:grid;place-items:center;
  text-align:center;
}
.donutCenter strong{display:block;font-size:16px;font-weight:900;}
.donutCenter span{display:block;margin-top:2px;font-size:12px;color:rgba(255,255,255,.72);}

.legend{display:flex;flex-direction:column;gap:10px;min-width:140px;}
.legendItem{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;border-radius:16px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}
.legendLeft{display:flex;align-items:center;gap:8px;}
.legendSwatch{width:12px;height:12px;border-radius:4px;}
.legendLabel{font-size:12px;color:rgba(255,255,255,.82);}
.legendVal{font-weight:900;}

.bars{display:flex;align-items:flex-end;gap:10px;height:170px;padding:6px 4px 0;}
.barCol{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;}
.bar{width:100%;border-radius:14px;position:relative;overflow:hidden;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.10);
}
.barFill{position:absolute;left:0;right:0;bottom:0;height:50%;
  background:linear-gradient(180deg, rgba(125,227,255,.95), rgba(124,92,255,.85));
}
.barFill.alt{background:linear-gradient(180deg, rgba(255,211,107,.95), rgba(255,132,214,.70));}
.barLabel{font-size:11px;color:rgba(255,255,255,.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.barNote{font-size:11px;color:rgba(255,255,255,.55);}

.hBars{display:flex;flex-direction:column;gap:10px;}
.hBarRow{display:grid;grid-template-columns:72px 1fr 42px;align-items:center;gap:10px;}
.hBarName{font-size:12px;color:rgba(255,255,255,.82);}
.hBarTrack{height:12px;border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.10);
}
.hBarFill{height:100%;width:50%;border-radius:999px;
  background:linear-gradient(90deg, rgba(125,227,255,.95), rgba(124,92,255,.85));
}
.hBarFill.alt{background:linear-gradient(90deg, rgba(255,211,107,.95), rgba(255,132,214,.70));}
.hBarVal{font-weight:900;font-size:12px;}

.miniNote{margin-top:10px;font-size:12px;color:rgba(255,255,255,.72);}

/* Hover/readability fixes for glass theme */
.segBtn:not(.isActive):hover,
.tabBtn:not(.isActive):hover,
.chip:hover,
.pill:hover,
.pillBtn:hover,
.iconBtn:hover,
.navBtn:hover,
.linkRow:hover,
.listItem:hover,
.softBtn:hover{
  background:rgba(255,255,255,.12) !important;
  color:rgba(255,255,255,.98) !important;
}

/* Some browsers render dropdown options with low contrast – force readable */
select option{background:#fff;color:#0c1020;}

/* === Unified floating glass tabbar (override) === */
:root{ --tabbar-h: 102px; }

.tabbar.cosmic{
  position: fixed !important;
  left: 16px !important;
  right: 16px !important;
  bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  height: 84px !important;
  padding: 10px 12px !important;
  border-radius: 26px !important;
  background: rgba(16, 24, 48, 0.55) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  border-top: none !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,0.45) !important;
  z-index: 999 !important;
  display: flex !important;
  flex-direction: row-reverse !important; /* RTL order: الرئيسية → … → حسابي */
  gap: 10px !important;
}

.tabbar.cosmic .tab{
  flex: 1 1 0 !important;
  min-width: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border-radius: 18px !important;
  color: rgba(255,255,255,0.88) !important;
  text-decoration: none !important;
  transition: transform .15s ease, background .15s ease, color .15s ease !important;
}

.tabbar.cosmic .tabIcon{
  width: 38px !important;
  height: 38px !important;
  border-radius: 14px !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22) !important;
}

.tabbar.cosmic .tabIcon svg{ width: 22px !important; height: 22px !important; opacity: .92 !important; }

.tabbar.cosmic .tabLabel{
  font-size: 12px !important;
  line-height: 1 !important;
  letter-spacing: .2px !important;
  color: rgba(255,255,255,0.82) !important;
  white-space: nowrap !important;
}

.tabbar.cosmic .tab:hover{
  background: rgba(255,255,255,0.88) !important;
  color: #0b1224 !important;
  transform: translateY(-1px) !important;
}

.tabbar.cosmic .tab:hover .tabLabel{ color: #0b1224 !important; }
.tabbar.cosmic .tab:hover .tabIcon{
  background: rgba(11,18,36,0.08) !important;
  border-color: rgba(11,18,36,0.18) !important;
}

.tabbar.cosmic .tab.active{
  background: rgba(74, 140, 255, 0.18) !important;
  color: #ffffff !important;
}

.tabbar.cosmic .tab.active .tabIcon{
  background: rgba(74, 140, 255, 0.35) !important;
  border-color: rgba(140, 190, 255, 0.42) !important;
  box-shadow: 0 10px 25px rgba(27, 94, 255, 0.25), inset 0 1px 0 rgba(255,255,255,0.28) !important;
}

.tabbar.cosmic .tab.active .tabLabel{ color: #ffffff !important; font-weight: 800 !important; }


/* === Student Home: Bigger astronaut (bot) card === */
.student-home .heroRow .botFace{width:110px;height:110px;border-radius:34px;}
.student-home .heroRow .botPic{width:98px;height:98px;border-radius:26px;}


/* ====== ThreeQ Patch v55: Fix sticky hover (focus) on bottom tabbar + improve contrast ====== */
.tabbar.cosmic .tab { -webkit-tap-highlight-color: transparent; }
.tabbar.cosmic .tab:hover {
  /* keep glassy, not pure white */
  background: rgba(255,255,255,.10) !important;
}
.tabbar.cosmic .tab:active {
  background: rgba(255,255,255,.14) !important;
}
.tabbar.cosmic .tab:focus,
.tabbar.cosmic .tab:focus-visible,
.tabbar.cosmic .tab:focus-within{
  /* do NOT keep the hover white after click; keep normal glass */
  background: rgba(255,255,255,.06) !important;
  outline: none;
}
.tabbar.cosmic .tab:focus-visible{
  outline: 2px solid rgba(255,255,255,.25);
  outline-offset: 2px;
}
/* When background becomes lighter (hover/active), switch text/icon to dark for readability */
.tabbar.cosmic .tab:hover .tabLabel,
.tabbar.cosmic .tab:hover .tabIcon,
.tabbar.cosmic .tab:active .tabLabel,
.tabbar.cosmic .tab:active .tabIcon{
  color: rgba(10,16,28,.92) !important;
  fill: rgba(10,16,28,.92) !important;
}
/* Prevent 'stuck' appearance after clicking a tab link in desktop browsers */
.tabbar.cosmic .tab:visited{
  color: inherit;
}