/* ── ATLASNOVA PREMIUM REDESIGN ── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600&family=DM+Mono:wght@400;500&display=swap');

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }

:root {
  /* Dynamic Glassmorphism Deep Dark Theme */
  --bg: #090e17;
  --bg-gradient: linear-gradient(145deg, #090e17 0%, #0d1627 100%);
  --sf: rgba(22, 32, 50, 0.6); /* Glass surface */
  --sf2: rgba(30, 41, 59, 0.7);
  --sf3: rgba(51, 65, 85, 0.8);
  
  --bd: rgba(255, 255, 255, 0.08); /* Subtle glass borders */
  --bd2: rgba(255, 255, 255, 0.15);
  
  --ink: #F8FAFC;
  --t2: #E2E8F0;
  --t3: #94A3B8;
  --t4: #64748B;
  
  /* Primary Brand: Electric Indigo / Cyan */
  --prm: #4F46E5; 
  --prmd: #4338CA;
  --prlt: rgba(79, 70, 229, 0.15);
  --prbd: rgba(79, 70, 229, 0.4);
  
  --red: #F43F5E; --rlt: rgba(244, 63, 94, 0.15); --rbd: rgba(244, 63, 94, 0.4);
  --gold: #F59E0B; --glt: rgba(245, 158, 11, 0.15); --gbd: rgba(245, 158, 11, 0.4);
  --grn: #10B981; --glt2: rgba(16, 185, 129, 0.15); --gbd2: rgba(16, 185, 129, 0.4);
  --blu: #0EA5E9; --blt: rgba(14, 165, 233, 0.15); --bbd: rgba(14, 165, 233, 0.4);
  
  --r: 16px; --rs: 10px; --rl: 24px; /* More rounded corners typical of premium mobile apps */
  
  --sh: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
  --shm: 0 12px 40px 0 rgba(0, 0, 0, 0.4);
  
  --blur: blur(16px);
  --blur-strong: blur(24px);
}

html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body { 
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif; 
  background: var(--bg-gradient); 
  color: var(--ink); 
  height: 100vh; 
  overflow: hidden; 
  line-height: 1.6;
  position: relative;
}

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.4); }

/* ── 3D AMBIENT BACKGROUND ── */
.app-bg {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
}
.app-orb {
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.5;
  animation: floatOrb 15s ease-in-out infinite alternate;
}
.app-orb.o1 { width: 40vw; height: 40vw; background: rgba(79, 70, 229, 0.3); top: -10vw; left: -10vw; }
.app-orb.o2 { width: 30vw; height: 30vw; background: rgba(14, 165, 233, 0.25); bottom: -5vw; right: -5vw; animation-delay: -5s; animation-direction: alternate-reverse; }
.app-orb.o3 { width: 25vw; height: 25vw; background: rgba(244, 63, 94, 0.15); top: 40%; left: 30%; animation-delay: -8s; }

@keyframes floatOrb {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(30px, 50px) scale(1.1); }
}

/* ── HEADER (GLASSMORPHISM) ── */
.hdr {
  height: 64px;
  background: rgba(13, 19, 33, 0.65);
  backdrop-filter: var(--blur-strong);
  -webkit-backdrop-filter: var(--blur-strong);
  border-bottom: 1px solid var(--bd);
  display: flex; align-items: center; padding: 0 1.5rem; gap: 1rem;
  z-index: 200; position: fixed; top: 0; left: 0; right: 0;
}
.logo { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.03em; flex-shrink: 0; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.logo span { color: var(--blu); }

.hdr-nav { display: flex; gap: 4px; overflow-x: auto; flex: 1; padding: 0 1rem; }
.hdr-nav::-webkit-scrollbar { display: none; }
.hn {
  padding: 0.4rem 1rem; border: 1px solid transparent; border-radius: 20px; font-size: 0.85rem; font-weight: 600;
  cursor: pointer; transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); white-space: nowrap;
  background: transparent; color: var(--t3); font-family: 'Plus Jakarta Sans', sans-serif;
}
.hn:hover { background: rgba(255,255,255,0.05); color: var(--ink); transform: translateY(-1px); }
.hn.on { background: var(--prm); color: #fff; box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4); border-color: rgba(255,255,255,0.1); }

.hdr-right { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
.prog-row { display: flex; align-items: center; gap: 0.6rem; background: rgba(255,255,255,0.03); padding: 0.3rem 0.8rem; border-radius: 20px; border: 1px solid var(--bd); }
.prog-lbl { font-size: 0.65rem; font-weight: 700; color: var(--t3); letter-spacing: 0.08em; }
.prog-bar { width: 80px; height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; }
.prog-fill { height: 100%; background: linear-gradient(90deg, var(--prm), var(--blu)); border-radius: 3px; transition: width 0.6s cubic-bezier(0.2,0.8,0.2,1); box-shadow: 0 0 10px var(--prm); }
.prog-num { font-size: 0.75rem; font-weight: 800; color: var(--blu); font-family: 'DM Mono', monospace; }

.hdr-user { 
  display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0.8rem 0.35rem 0.35rem; 
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 30px; 
  cursor: pointer; transition: all 0.2s ease; 
}
.hdr-user:hover { background: rgba(255,255,255,0.1); transform: scale(1.02); }
.user-av { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--prm), var(--blu)); color: #fff; font-size: 0.8rem; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,0.3); }
.user-info { display: flex; flex-direction: column; line-height: 1.2; }
.user-name { font-size: 0.75rem; font-weight: 700; color: var(--ink); }
.user-loc { font-size: 0.6rem; color: var(--t3); font-weight: 500; }

/* ── MAIN SECTIONS ── */
.sec { height: 100vh; padding-top: 64px; display: flex; overflow: hidden; } /* Account for fixed header */
.sec.gone { display: none !important; }

/* ── SIDEBAR (GLASSMORPHISM) ── */
.sb {
  width: 280px; flex-shrink: 0; background: rgba(13, 19, 33, 0.4);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border-right: 1px solid var(--bd); display: flex; flex-direction: column; overflow: hidden;
}
.sb-head { padding: 1.2rem 1.2rem 0.8rem; }
.sb-srch { 
  width: 100%; padding: 0.7rem 1rem; border: 1px solid rgba(255,255,255,0.15); border-radius: var(--r); 
  font-size: 0.9rem; font-family: 'Plus Jakarta Sans', sans-serif; color: var(--ink); 
  background: rgba(0,0,0,0.2); outline: none; transition: all 0.2s ease; font-weight: 500; 
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}
.sb-srch:focus { border-color: var(--blu); background: rgba(0,0,0,0.3); box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 0 0 3px rgba(14, 165, 233, 0.2); }
.sb-sc { flex: 1; overflow-y: auto; padding: 0.5rem; }

.usec { margin-bottom: 0.2rem; }
.uh { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1rem; cursor: pointer; user-select: none; border-radius: var(--rs); transition: all 0.2s; border: 1px solid transparent; }
.uh:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.05); }
.udot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.unm { font-size: 0.9rem; font-weight: 700; flex: 1; letter-spacing: -0.01em; }
.umeta { display: flex; align-items: center; gap: 0.5rem; }
.upb { width: 30px; height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; }
.upf { height: 100%; background: currentColor; border-radius: 2px; }
.ucnt { font-size: 0.65rem; color: var(--t3); font-family: 'DM Mono', monospace; font-weight: 600; }
.uchev { font-size: 0.6rem; color: var(--t4); transition: transform 0.2s cubic-bezier(0.2,0.8,0.2,1); }
.usec.open .uchev { transform: rotate(90deg); color: var(--ink); }
.uvl { display: none; padding: 0.2rem 0.2rem 0.5rem 1rem; }
.usec.open .uvl { display: block; animation: slideDown 0.3s cubic-bezier(0.2,0.8,0.2,1); }

@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

.vrow { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.8rem; border-radius: 8px; cursor: pointer; transition: all 0.15s; margin: 2px 0; border: 1px solid transparent; }
.vrow:hover { background: rgba(255,255,255,0.05); transform: translateX(4px); }
.vrow.on { background: rgba(79, 70, 229, 0.15); border-color: rgba(79, 70, 229, 0.3); box-shadow: inset 2px 0 0 var(--prm); }
.vr-ic { font-size: 1rem; }
.vr-i { font-size: 0.85rem; font-weight: 600; flex: 1; color: var(--t2); }
.vrow.on .vr-i { color: var(--ink); font-weight: 700; }
.vr-t { font-size: 0.65rem; color: var(--t4); font-weight: 500; }

.vdot { width: 6px; height: 6px; border-radius: 50%; border: 1px solid currentColor; }
.vdot.done { background: var(--grn); border-color: var(--grn); box-shadow: 0 0 8px var(--grn); }
.vdot.part { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 8px var(--gold); }
.vdot.none { border-color: var(--t4); }

/* ── MAIN CONTENT AREA ── */
.main { flex: 1; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; }
.mc { max-width: 900px; margin: 0 auto; padding: 2.5rem 2rem 6rem; }

/* ── DASHBOARD COMPONENT / WELCOME ── */
.w-title { font-size: 3rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.04em; margin-bottom: 0.5rem; text-shadow: 0 4px 20px rgba(0,0,0,0.5); }
.w-title .city { background: linear-gradient(135deg, var(--prm), var(--blu)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.w-sub { font-size: 1.1rem; color: var(--t3); font-weight: 500; margin-bottom: 2rem; max-width: 600px; }

.stat-row { display: flex; gap: 1rem; margin-bottom: 2.5rem; flex-wrap: wrap; }
.stat-chip { 
  display: flex; align-items: center; gap: 0.8rem; padding: 0.6rem 1.2rem; 
  background: var(--sf); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--bd); border-radius: 30px; font-size: 0.85rem; font-weight: 600; color: var(--t2);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2); transition: transform 0.2s;
}
.stat-chip:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.2); }
.stat-chip span { color: var(--ink); font-weight: 800; font-size: 1rem; }

.ugrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-bottom: 2rem; }
.ucard {
   padding: 1.5rem;
   background: var(--sf); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
   border: 1px solid var(--bd); border-radius: var(--rl); cursor: pointer;
   transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
   box-shadow: var(--sh); position: relative; overflow: hidden;
}
.ucard::before {
   content:''; position:absolute; inset:0;
   background:linear-gradient(125deg, transparent, rgba(255,255,255,0.05), transparent);
   transform:skewX(-20deg) translateX(-100%); transition:all 0.6s ease;
}
.ucard:hover {
   background: rgba(30, 41, 59, 0.8);
   border-color: var(--prm); transform: translateY(-5px) scale(1.01);
   box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(79,70,229,0.3) inset;
}
.ucard:hover::before { transform:skewX(-20deg) translateX(100%); }
.uc-n { font-size: 1.1rem; font-weight: 800; margin-bottom: 0.3rem; letter-spacing: -0.02em; color: var(--ink); }
.uc-d { font-size: 0.8rem; color: var(--t3); font-weight: 500; }
.uc-b { margin-top: 1.2rem; height: 6px; background: rgba(0,0,0,0.3); border-radius: 3px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,0.5); }
.uc-bf { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--prm), var(--blu)); box-shadow: 0 0 10px rgba(79,70,229,0.5); }

/* ── DICTIONARY & COMPONENT HERO ── */
.vh { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--bd2); }
.vh-top { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1rem; }
.v-ic { font-size: 3.5rem; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4)); animation: pulse 2s infinite alternate; }
.vinf { font-size: 3.5rem; font-weight: 800; line-height: 1; letter-spacing: -0.05em; margin: 0; text-shadow: 0 4px 15px rgba(0,0,0,0.4); }
.vinf-tr { font-size: 1.2rem; color: var(--t2); font-weight: 500; opacity: 0.9; margin-top: 0.5rem; }
.sfx { color: var(--blu); }

@keyframes pulse { from{transform:scale(1)} to{transform:scale(1.05)} }

.vh-tts { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-top: 1rem; }
.tts-btn {
  padding: 0.6rem 1.2rem; border-radius: var(--rs); font-size: 0.85rem; font-weight: 700; cursor: pointer;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: var(--ink);
  transition: all 0.2s; font-family: 'Plus Jakarta Sans', sans-serif; display: flex; align-items: center; gap: 0.5rem;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.tts-btn:hover { background: var(--prm); border-color: var(--prm); box-shadow: 0 8px 20px rgba(79,70,229,0.4); transform: translateY(-2px); }

.tags { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1rem; }
.tag { padding: 0.3rem 0.8rem; border-radius: 20px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; font-family: 'DM Mono', monospace; }
.tg { background: rgba(255,255,255,0.1); color: var(--t2); border: 1px solid var(--bd); backdrop-filter: blur(4px); }
.tav { background: var(--glt); color: var(--gold); border: 1px solid var(--gbd); box-shadow: 0 0 10px rgba(245,158,11,0.2); }
.tae { background: var(--blt); color: var(--blu); border: 1px solid var(--bbd); box-shadow: 0 0 10px rgba(14,165,233,0.2); }
.tpp { background: var(--rlt); color: var(--red); border: 1px solid var(--rbd); box-shadow: 0 0 10px rgba(244,63,94,0.2); }

/* ── MODERN TABS ── */
.tabs { display: flex; gap: 0.5rem; border-bottom: 1px solid var(--bd2); margin-bottom: 2rem; overflow-x: auto; padding-bottom: 4px; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: 0.8rem 1.5rem; font-size: 0.95rem; font-weight: 700; cursor: pointer; color: var(--t3);
  border: none; background: transparent; transition: all 0.2s; border-radius: 8px; position: relative; white-space: nowrap;
}
.tab::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 3px; border-radius: 3px 3px 0 0; background: var(--prm); transform: scaleX(0); transition: transform 0.3s cubic-bezier(0.2,0.8,0.2,1); }
.tab:hover { color: var(--t2); background: rgba(255,255,255,0.05); }
.tab.on { color: var(--ink); }
.tab.on::after { transform: scaleX(1); }

/* ── DATA TABLES & GRIDS (Glassmorphism) ── */
.cg2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.tbl { background: var(--sf); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--bd); border-radius: var(--rl); overflow: hidden; box-shadow: var(--sh); }
.th { display: flex; align-items: center; padding: 1rem 1.5rem; background: rgba(0,0,0,0.2); border-bottom: 1px solid var(--bd); gap: 0.8rem; }
.thn { font-size: 1rem; font-weight: 800; flex: 1; letter-spacing: -0.01em; color: var(--blu); }
.tht { font-size: 0.75rem; font-weight: 600; color: var(--t3); text-transform: uppercase; letter-spacing: 0.05em; }
.crow { display: flex; align-items: center; padding: 0.8rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.05); gap: 0.8rem; cursor: pointer; transition: background 0.15s; }
.crow:last-child { border-bottom: none; }
.crow:hover { background: rgba(255,255,255,0.08); }
.crow.mk { background: rgba(244, 63, 94, 0.1); border-left: 3px solid var(--red); }
.crow .pr { font-size: 0.8rem; font-weight: 600; color: var(--t3); font-family: 'DM Mono', monospace; min-width: 80px; }
.crow .fm { font-size: 1.1rem; font-weight: 700; flex: 1; letter-spacing: -0.01em; color: var(--ink); }
.crow.mk .fm { color: var(--red); }
.axw { font-weight: 500; color: var(--t4); font-size: 0.95rem; margin-right: 0.2rem; }

.cnote { font-size: 0.85rem; font-weight: 500; color: var(--t2); margin-top: 1rem; padding: 0.8rem 1rem; background: rgba(255,255,255,0.05); border-left: 3px solid var(--prm); border-radius: 0 8px 8px 0; }

/* ── DICTIONARY SPECIFIC CARDS ── */
.dict-card {
  padding: 1.5rem; background: var(--sf); border: 1px solid var(--bd); border-radius: var(--rl); margin-bottom: 1rem;
  backdrop-filter: var(--blur); transition: all 0.3s ease; box-shadow: var(--sh);
}
.dict-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.2); box-shadow: var(--shm); background: rgba(30, 41, 59, 0.8); }

/* ── FLASHCARDS ── */
.fcard { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.4,0,0.2,1); }
.fcard.flp { transform: rotateY(180deg); }
.fc-f, .fc-b { 
  position: absolute; inset: 0; backface-visibility: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; 
  padding: 2rem; background: var(--sf); border: 1px solid var(--bd); border-radius: var(--rl); box-shadow: var(--shm);
  backdrop-filter: var(--blur-strong);
}
.fc-b { transform: rotateY(180deg); background: rgba(79, 70, 229, 0.1); border-color: var(--prm); }
.cfword { font-size: 2.5rem; font-weight: 800; color: var(--ink); margin-bottom: 1rem; text-shadow: 0 4px 10px rgba(0,0,0,0.5); }
.cfipa { font-family: 'DM Mono', monospace; font-size: 1rem; color: var(--t3); background: rgba(255,255,255,0.05); padding: 0.2rem 0.6rem; border-radius: 6px; }
.cftr { font-size: 2rem; font-weight: 700; color: var(--prm); margin-bottom: 1.5rem; }
.cfex { font-size: 1.1rem; color: var(--t2); font-style: italic; text-align: center; line-height: 1.5; padding: 1rem; background: rgba(0,0,0,0.2); border-radius: 12px; }

/* ── DUAL THEME INPUTS ── */
.einp { 
  background: rgba(0,0,0,0.2); border: 1px solid var(--bd2); color: var(--ink); padding: 0.8rem 1rem; 
  border-radius: 12px; font-size: 1rem; font-family: 'Plus Jakarta Sans', sans-serif; transition: all 0.2s; 
}
.einp:focus { outline: none; border-color: var(--prm); box-shadow: 0 0 0 3px rgba(79,70,229,0.3); background: rgba(0,0,0,0.4); }

/* ── FLOATING MOBILE NAVIGATION (MOBILE FIRST) ── */
.bnav {
  display: none; position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  height: 65px; background: rgba(15, 23, 42, 0.85); backdrop-filter: var(--blur-strong); -webkit-backdrop-filter: var(--blur-strong);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 35px; z-index: 1000; align-items: stretch;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6); padding: 0 10px; width: 92%; max-width: 400px;
}
.bn {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  cursor: pointer; border: none; background: transparent; padding: 0.2rem; transition: transform 0.2s;
  position: relative;
}
.bn::before {
  content: ''; position: absolute; inset: 6px 10px; border-radius: 20px; background: rgba(255,255,255,0.08);
  opacity: 0; transform: scale(0.8); transition: all 0.3s cubic-bezier(0.2,0.8,0.2,1); z-index: -1;
}
.bn.on::before { opacity: 1; transform: scale(1); background: rgba(79, 70, 229, 0.2); }
.bn:active { transform: scale(0.92); }
.bn-ic { font-size: 1.4rem; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); transition: transform 0.3s cubic-bezier(0.2,0.8,0.2,1); }
.bn.on .bn-ic { transform: translateY(-2px); }
.bn-lb { font-size: 0.6rem; font-weight: 700; color: var(--t4); letter-spacing: 0.02em; transition: color 0.3s; }
.bn.on .bn-lb { color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.bn-dot { display: none; } /* Removed dots for cleaner pill look */

/* ── RESPONSIVE ADAPTATIONS (MOBILE) ── */
@media(max-width: 768px) {
  .hdr { padding: 0 1rem; height: 60px; }
  .logo { font-size: 1.1rem; }
  .hdr-nav { display: none; } /* Hide top nav links entirely on mobile */
  .hdr-right { gap: 0.5rem; }
  .prog-row { padding: 0.2rem 0.6rem; }
  .prog-bar { width: 50px; }
  .user-info { display: none; } /* Hide user text, keep avatar */
  .hdr-user { border-radius: 50%; padding: 0.2rem; background: transparent; border-color: transparent; }
  
  .sb { display: none; } /* Hide sidebar on mobile */
  .sec { padding-top: 60px; padding-bottom: 100px; } /* Space for floating nav */
  .mc { padding: 1.5rem 1rem; }
  
  .w-title { font-size: 2rem; }
  .w-sub { font-size: 0.95rem; }
  .ugrid, .cg2, .feat-grid, .pgrid { grid-template-columns: 1fr; gap: 1rem; }
  .vinf { font-size: 2.2rem; }
  .bnav { display: flex !important; }
  
  .tabs { margin-inline: -1rem; padding-inline: 1rem; scroll-padding: 1rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tab { padding: 0.7rem 1rem; font-size: 0.85rem; }
  
  .th { padding: 0.8rem 1rem; }
  .crow { padding: 0.75rem 1rem; }
  .crow .pr { min-width: 60px; font-size: 0.75rem; }
  .crow .fm { font-size: 0.95rem; }
  .v-ic { font-size: 2.5rem; }
  .vh-top { gap: 1rem; }
}

@media(min-width: 769px) {
  .bnav { display: none !important; }
}

/* Animations */
.notif {
  position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(20px);
  background: rgba(15, 23, 42, 0.9); backdrop-filter: var(--blur-strong); border: 1px solid var(--bd2);
  color: #fff; padding: 0.8rem 1.5rem; border-radius: 30px; font-weight: 600; font-size: 0.9rem;
  box-shadow: var(--shm); opacity: 0; pointer-events: none; transition: all 0.4s cubic-bezier(0.2,0.8,0.2,1); z-index: 2000;
}
.notif.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: all; }

/* ── DIALOGUE TRANSLATION ROWS ── */
.form-tr { display:block; font-size: 0.75rem; font-weight:500; color:var(--t3); font-style:italic; margin-top:0.2rem; letter-spacing:0; line-height:1.3; }
.form-tr.fa, .form-tr.ar { direction:rtl; text-align:right; font-style:normal; font-family:Arial,sans-serif; font-size:0.8rem; color:var(--blu); opacity:0.9; }

/* ── QUIZ OPTIONS (Grammar) ── */
.qopt {
  padding: .5rem 1.2rem; border-radius: 10px; font-size: .88rem; font-weight: 600;
  font-family: 'Plus Jakarta Sans', sans-serif; cursor: pointer;
  background: var(--sf2); border: 1.5px solid var(--bd); color: var(--t1);
  transition: all .2s cubic-bezier(.2,.8,.2,1);
}
.qopt:hover { border-color: var(--prm); background: rgba(79,70,229,.08); transform: translateY(-1px); }
.qopt.sel { border-color: var(--prm); background: rgba(79,70,229,.12); color: var(--prm); box-shadow: 0 0 0 3px rgba(79,70,229,.1); }
.qopt.ok { border-color: var(--grn) !important; background: var(--glt2) !important; color: var(--grn) !important; }
.qopt.no { border-color: var(--red) !important; background: var(--rlt) !important; color: var(--red) !important; text-decoration: line-through; }
.qopt.dis { pointer-events: none; }

/* ── RESPONSIVE: Mobile bottom nav 8 items ── */
@media (max-width: 767px) {
  .bnav { overflow-x: auto; -webkit-overflow-scrolling: touch; justify-content: flex-start; gap: 0; padding: .35rem .3rem; }
  .bn { min-width: 52px; flex: 0 0 auto; padding: .25rem .15rem; }
  .bn-lb { font-size: .52rem; }
  .bn-ic { font-size: .95rem; }
}

/* ── FEATURE CARD BUTTONS (Grammar / Phrases) ── */
.feat-card {
  display: flex; align-items: center; gap: .85rem;
  width: 100%; padding: 1rem 1.2rem;
  background: var(--sf); border: 1.5px solid var(--bd);
  border-left: 3.5px solid var(--fc, var(--prm));
  border-radius: 16px; cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--t1); text-align: left;
  transition: all .3s cubic-bezier(.2,.8,.2,1);
  position: relative; overflow: hidden;
}
.feat-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent, rgba(255,255,255,.03));
  opacity: 0; transition: opacity .3s;
}
.feat-card:hover {
  transform: translateY(-3px) scale(1.015);
  border-color: var(--fc, var(--prm));
  box-shadow: 0 8px 30px rgba(0,0,0,.3), 0 0 20px color-mix(in srgb, var(--fc, var(--prm)) 15%, transparent);
  background: var(--sf2);
}
.feat-card:hover::before { opacity: 1; }
.feat-card:active { transform: translateY(0) scale(.98); }

.feat-card-icon {
  width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; flex-shrink: 0;
  transition: transform .3s;
}
.feat-card:hover .feat-card-icon { transform: scale(1.1) rotate(-3deg); }

.feat-card-body { flex: 1; min-width: 0; }
.feat-card-title { font-size: .95rem; font-weight: 700; margin-bottom: .2rem; }
.feat-card-sub { font-size: .72rem; font-weight: 500; color: var(--t3); }

.feat-card-arrow {
  font-size: 1.1rem; font-weight: 700; color: var(--t3);
  opacity: .4; transition: all .3s; flex-shrink: 0;
}
.feat-card:hover .feat-card-arrow {
  opacity: 1; color: var(--fc, var(--prm));
  transform: translateX(4px);
}

@media (max-width: 600px) {
  .feat-card { padding: .85rem 1rem; gap: .65rem; }
  .feat-card-icon { width: 40px; height: 40px; font-size: 1.3rem; border-radius: 12px; }
  .feat-card-title { font-size: .88rem; }
}