:root{--sand:#f5efe6;--ink:#1a1410;--gold:#c8922a;--gold-light:#e8b84b;--terracotta:#c4622d;--sage:#6b8f71;--card:#fffaf3;--shadow:rgba(26,20,16,.14);--green:#4f8a57;--red:#b84d43}
*{box-sizing:border-box;margin:0;padding:0} body{min-height:100vh;background:var(--sand);font-family:Outfit,sans-serif;color:var(--ink);padding:20px 14px;background-image:radial-gradient(circle at 12% 16%,rgba(200,146,42,.12),transparent 32%),radial-gradient(circle at 86% 80%,rgba(196,98,45,.10),transparent 36%);overflow-x:hidden;transition:background .25s ease}.arabic{font-family:Amiri,serif;direction:rtl}body.app-mode{background:linear-gradient(180deg,#f7f1e7 0%,#efe7db 100%);background-image:radial-gradient(circle at 8% 10%,rgba(200,146,42,.16),transparent 22%),radial-gradient(circle at 92% 18%,rgba(107,143,113,.14),transparent 24%),radial-gradient(circle at 78% 82%,rgba(196,98,45,.12),transparent 26%),linear-gradient(135deg,rgba(255,255,255,.38) 25%,transparent 25%),linear-gradient(225deg,rgba(255,255,255,.26) 25%,transparent 25%);background-size:auto,auto,auto,34px 34px,34px 34px;background-position:0 0,0 0,0 0,0 0,17px 17px}.home{min-height:calc(100vh - 40px);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;border-radius:28px;background:linear-gradient(145deg,rgba(255,250,243,.72),rgba(245,239,230,.42));box-shadow:0 12px 45px rgba(26,20,16,.10)}.bg-letter{position:absolute;font-family:Amiri,serif;font-weight:700;color:rgba(200,146,42,.10);user-select:none;animation:float 8s ease-in-out infinite}.bg-letter:nth-child(1){font-size:7rem;top:6%;left:8%}.bg-letter:nth-child(2){font-size:9rem;bottom:8%;right:7%;animation-delay:1s}.bg-letter:nth-child(3){font-size:5rem;top:18%;right:18%;animation-delay:2s}.bg-letter:nth-child(4){font-size:6rem;bottom:20%;left:17%;animation-delay:3s}.bg-letter:nth-child(5){font-size:8rem;top:48%;left:45%;animation-delay:4s}@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(4deg)}}.home-card{position:relative;z-index:1;text-align:center;width:min(560px,94vw);padding:42px 24px}.home h1{font-size:3.1rem;letter-spacing:.04em}.home h2{font-size:2rem;color:var(--terracotta);margin-top:4px}.home h3{font-size:3rem;color:var(--gold);margin-top:0}.home p{color:#8a7a6a;margin:16px 0 26px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.home-actions,.top-nav,.category-grid,.subtabs,.controls{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.btn{border:none;border-radius:14px;padding:12px 18px;font-family:Outfit,sans-serif;font-weight:700;cursor:pointer;transition:.16s;letter-spacing:.04em}.btn-dark{background:var(--ink);color:#f0e6d0}.btn-gold{background:var(--gold);color:white}.btn-light{background:rgba(255,250,243,.75);border:2px solid rgba(26,20,16,.12);color:var(--ink)}.btn:hover{transform:translateY(-1px)}.btn:disabled{opacity:.35;cursor:not-allowed;transform:none}.app{display:none;max-width:980px;margin:0 auto}.app-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.top-nav{justify-content:flex-start}.timer{font-weight:800;color:var(--gold);background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,248,239,.82));border:2px solid rgba(200,146,42,.25);border-radius:12px;padding:10px 14px;box-shadow:0 3px 12px var(--shadow)}header{text-align:center;margin:18px 0 22px}header h1{font-family:Amiri,serif;font-size:2.4rem}header p{color:var(--gold);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.82rem}.section{display:none}.section.active{display:block;position:relative}.app{display:none;max-width:980px;margin:0 auto;position:relative;padding:24px;border-radius:30px;background:linear-gradient(160deg,rgba(255,250,243,.86),rgba(255,248,238,.72));box-shadow:0 18px 55px rgba(26,20,16,.12),inset 0 1px 0 rgba(255,255,255,.7);overflow:hidden;border:1px solid rgba(200,146,42,.12)}.app::before,.app::after{content:'';position:absolute;border-radius:999px;pointer-events:none;filter:blur(2px)}.app::before{width:240px;height:240px;top:-80px;right:-70px;background:radial-gradient(circle,rgba(200,146,42,.22) 0%,rgba(200,146,42,0) 70%)}.app::after{width:260px;height:260px;bottom:-110px;left:-80px;background:radial-gradient(circle,rgba(107,143,113,.18) 0%,rgba(107,143,113,0) 72%)}.app-top,header,.section.active{position:relative;z-index:1}.app-top{padding:8px 2px 4px}.app header{background:linear-gradient(135deg,rgba(255,250,243,.88),rgba(255,255,255,.5));border:1px solid rgba(200,146,42,.18);border-radius:22px;padding:18px 20px;margin-bottom:18px;box-shadow:0 6px 20px rgba(26,20,16,.06)}.panel{background:rgba(255,250,243,.76);border:1px solid rgba(200,146,42,.18);border-radius:24px;padding:22px;box-shadow:0 7px 28px rgba(26,20,16,.10);backdrop-filter:blur(4px)}#cardsSection.active .panel{background:linear-gradient(180deg,rgba(255,250,243,.92),rgba(255,244,236,.80))}#listSection.active .panel{background:linear-gradient(180deg,rgba(248,252,248,.92),rgba(240,248,242,.80))}#testSection.active .panel{background:linear-gradient(180deg,rgba(255,249,240,.92),rgba(250,241,231,.82))}#addSection.active .panel{background:linear-gradient(180deg,rgba(248,249,255,.92),rgba(240,243,252,.82))}.category-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));max-width:860px;margin:0 auto;gap:14px}.cat-card{background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,249,242,.72));border:2px solid rgba(26,20,16,.10);border-radius:20px;padding:22px 16px;box-shadow:0 6px 18px rgba(26,20,16,.08);cursor:pointer;text-align:center;transition:.16s}.cat-card:hover{transform:translateY(-3px);border-color:var(--gold)}.cat-ar{font-family:Amiri,serif;font-size:2rem;color:var(--ink)}.cat-en{font-weight:800;color:var(--gold);margin-top:5px}.cat-count{font-size:.78rem;color:#8a7a6a;margin-top:6px}.back-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}.page-label{font-weight:800;color:#8a7a6a}.scene{width:100%;max-width:560px;height:340px;perspective:1000px;cursor:pointer;margin:0 auto 18px}.card{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.4,0,.2,1);border-radius:24px}.card.flipped{transform:rotateY(180deg)}.card-face{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px;box-shadow:0 6px 28px var(--shadow)}.card-front{background:var(--ink);border:2px solid rgba(200,146,42,.34)}.card-front.done{background:var(--green)}.card-back{background:var(--card);transform:rotateY(180deg);border:2px solid rgba(200,146,42,.23)}.badge{position:absolute;top:16px;left:18px;font-size:.74rem;font-weight:800;color:rgba(200,146,42,.82)}.hint{position:absolute;bottom:15px;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:rgba(200,146,42,.60)}.big-ar{font-family:Amiri,serif;font-size:3.4rem;color:#f0e6d0;text-align:center;line-height:1.25}.big-tr{font-size:1.7rem;text-align:center;font-weight:800;color:#f0e6d0}.answer-ar{font-family:Amiri,serif;font-size:3.1rem;text-align:center;color:var(--ink)}.trans{display:flex;gap:12px;justify-content:center;align-items:stretch;flex-wrap:wrap;margin-top:12px}.trans>div{background:rgba(245,239,230,.75);border-radius:14px;padding:10px 12px;min-width:150px;text-align:center}.mini-label{font-size:.66rem;color:#9a8b7a;letter-spacing:.12em;font-weight:800;text-transform:uppercase}.word-en,.word-al{font-size:1rem;font-weight:800}.verb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;width:100%;max-width:520px;margin-top:14px}.verb-cell{background:rgba(245,239,230,.8);border-radius:12px;padding:9px;text-align:center}.verb-cell .arabic{font-size:1.35rem}.progress-wrap{height:6px;background:rgba(26,20,16,.10);border-radius:99px;overflow:hidden;max-width:560px;margin:0 auto 7px}.progress-bar{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-light));width:0}.counter{text-align:center;color:#8a7a6a;font-weight:800;font-size:.84rem;margin-bottom:14px}.list-wrap{display:flex;flex-direction:column;gap:9px}.list-item{background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(253,248,242,.82));border-left:4px solid var(--gold);border-radius:14px;padding:14px 16px;box-shadow:0 3px 12px var(--shadow);cursor:pointer}.list-main{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px}.list-en{font-weight:800}.list-al{color:var(--terracotta);font-size:.9rem}.list-ar{font-family:Amiri,serif;font-size:1.7rem;direction:rtl}.details{display:none;margin-top:12px;padding-top:12px;border-top:1px dashed rgba(200,146,42,.35)}.list-item.open .details{display:block}.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}.detail-box{background:rgba(245,239,230,.7);border-radius:10px;padding:8px}.empty{text-align:center;color:#8a7a6a;padding:28px;font-weight:700}.quiz-card{max-width:650px;margin:0 auto;text-align:center;background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,250,243,.45));padding:18px;border-radius:20px;box-shadow:0 4px 16px rgba(26,20,16,.06)}.quiz-question{font-family:Amiri,serif;font-size:2.8rem;margin:12px 0}.quiz-question.translation{font-family:Outfit,sans-serif;font-size:1.8rem;font-weight:800}.options{display:grid;gap:10px;margin:14px 0}.option{background:var(--card);border:2px solid rgba(26,20,16,.11);border-radius:14px;padding:14px;cursor:pointer;font-weight:800}.option.correct{background:rgba(79,138,87,.18);border-color:var(--green)}.option.wrong{background:rgba(184,77,67,.16);border-color:var(--red)}.feedback{font-weight:800;min-height:24px}.match-board{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:760px;margin:0 auto}.match-col{display:flex;flex-direction:column;gap:9px}.match-tile{background:var(--card);border:2px solid rgba(26,20,16,.1);border-radius:14px;padding:13px;cursor:pointer;font-weight:800;text-align:center}.match-tile.arabic{font-size:1.35rem}.match-tile.selected{border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,146,42,.15)}.match-tile.matched{background:rgba(79,138,87,.18);border-color:var(--green);cursor:default}.search{width:100%;padding:12px 14px;border:2px solid rgba(26,20,16,.12);border-radius:12px;background:var(--card);font-family:Outfit,sans-serif;margin-bottom:14px}.hidden{display:none!important}@media(max-width:620px){.app-top{align-items:flex-start;flex-direction:column}.timer{align-self:flex-end}.scene{height:360px}.big-ar{font-size:2.8rem}.match-board{grid-template-columns:1fr}.category-grid{grid-template-columns:1fr}.home h1{font-size:2.5rem}}
.add-form{max-width:820px;margin:0 auto}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-top:14px}.field{display:flex;flex-direction:column;gap:6px}.field label{font-weight:800;color:#8a7a6a;font-size:.78rem;letter-spacing:.05em}.field input,.field select,.field textarea{border:2px solid rgba(26,20,16,.12);border-radius:12px;background:var(--card);padding:11px 12px;font-family:Outfit,sans-serif;font-size:.95rem}.field textarea{min-height:78px;resize:vertical}.field .arabic-input{font-family:Amiri,serif;font-size:1.25rem;direction:rtl}.form-note{background:rgba(200,146,42,.12);border:1px solid rgba(200,146,42,.25);border-radius:14px;padding:12px 14px;color:#6f5a35;font-weight:700;line-height:1.45;margin:12px 0}.form-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:18px}.small-muted{font-size:.82rem;color:#8a7a6a;line-height:1.45}.saved-word-preview{margin-top:14px;background:rgba(79,138,87,.12);border:1px solid rgba(79,138,87,.25);border-radius:14px;padding:12px;font-weight:800;color:var(--green)}

.api-box{background:rgba(26,20,16,.045);border:1px solid rgba(26,20,16,.10);border-radius:16px;padding:14px;margin:12px 0}.api-box h3{font-family:Amiri,serif;font-size:1.45rem;margin-bottom:6px}.api-status{margin-top:10px;min-height:24px;font-weight:800}.api-status.ok{color:var(--green)}.api-status.bad{color:var(--red)}.api-status.work{color:var(--gold)}
.exam-revision-btn{position:absolute;top:18px;right:18px;z-index:5;text-decoration:none;background:var(--ink);color:#f0e6d0;border:2px solid rgba(200,146,42,.35);border-radius:14px;padding:11px 16px;font-family:Outfit,sans-serif;font-weight:800;letter-spacing:.04em;box-shadow:0 5px 18px rgba(26,20,16,.16);transition:.16s}.exam-revision-btn:hover{transform:translateY(-1px);background:#2e251c}@media(max-width:620px){.exam-revision-btn{top:12px;right:12px;padding:9px 12px;font-size:.82rem}}

.card-front .answer-ar{color:#f0e6d0}.card-front .verb-cell{background:rgba(255,250,243,.12);border:1px solid rgba(200,146,42,.24)}.card-front .verb-cell .arabic{color:#f0e6d0}.card-front .mini-label{color:rgba(232,184,75,.9)}.translation-prompt span{color:var(--gold-light);font-size:1.2rem}.card-back .translation-prompt{color:var(--ink)}.card-back .translation-prompt span{color:var(--terracotta)!important}

/* === Brown / Olive / Cream Special Theme Override ===
   CSS-only: no text and no JavaScript/function changes.
*/
:root{
  --sand:#f4ead8;
  --ink:#332316;
  --gold:#b88735;
  --gold-light:#d8b16a;
  --terracotta:#8e4c2f;
  --sage:#667347;
  --card:#fff8ec;
  --shadow:rgba(51,35,22,.18);
  --green:#586f3f;
  --red:#a14b3c;
  --cream:#fff7e8;
  --olive:#667347;
  --brown:#332316;
  --coffee:#5a3b23;
}
html{scroll-behavior:smooth}
body{
  background:#f4ead8!important;
  background-image:
    radial-gradient(circle at 12% 12%,rgba(102,115,71,.18),transparent 25%),
    radial-gradient(circle at 86% 18%,rgba(184,135,53,.18),transparent 24%),
    radial-gradient(circle at 20% 86%,rgba(90,59,35,.13),transparent 26%),
    linear-gradient(135deg,rgba(255,248,236,.55) 25%,transparent 25%),
    linear-gradient(225deg,rgba(255,248,236,.42) 25%,transparent 25%)!important;
  background-size:auto,auto,auto,38px 38px,38px 38px!important;
  background-position:0 0,0 0,0 0,0 0,19px 19px!important;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.42;
  background-image:
    linear-gradient(30deg,transparent 48%,rgba(90,59,35,.07) 49%,rgba(90,59,35,.07) 51%,transparent 52%),
    linear-gradient(150deg,transparent 48%,rgba(102,115,71,.07) 49%,rgba(102,115,71,.07) 51%,transparent 52%);
  background-size:72px 72px;
  z-index:-1;
}
.home{
  background:
    linear-gradient(145deg,rgba(255,248,236,.92),rgba(240,226,201,.74)),
    radial-gradient(circle at 20% 20%,rgba(102,115,71,.18),transparent 28%)!important;
  border:1px solid rgba(90,59,35,.16)!important;
  box-shadow:0 18px 55px rgba(51,35,22,.16)!important;
}
.home::before,.home::after{
  content:"";
  position:absolute;
  pointer-events:none;
  border:2px solid rgba(102,115,71,.24);
  width:250px;height:250px;
  transform:rotate(45deg);
  border-radius:34px;
}
.home::before{top:-130px;left:-90px}.home::after{right:-120px;bottom:-135px;border-color:rgba(184,135,53,.28)}
.home-card{
  background:rgba(255,248,236,.58);
  border:1px solid rgba(90,59,35,.13);
  border-radius:34px;
  box-shadow:0 18px 45px rgba(51,35,22,.12),inset 0 1px 0 rgba(255,255,255,.65);
  backdrop-filter:blur(8px);
}
.home h1,.home h3,header h1{color:#332316!important;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.home h2{color:#667347!important}.home p,header p{color:#7b5a2f!important}
.bg-letter{color:rgba(90,59,35,.09)!important;text-shadow:0 8px 24px rgba(102,115,71,.08)}
.app{
  background:
    linear-gradient(160deg,rgba(255,248,236,.94),rgba(240,226,201,.82))!important;
  border:1px solid rgba(90,59,35,.16)!important;
  box-shadow:0 22px 70px rgba(51,35,22,.17), inset 0 1px 0 rgba(255,255,255,.72)!important;
}
.app::before{
  background:radial-gradient(circle,rgba(102,115,71,.25) 0%,rgba(102,115,71,0) 70%)!important;
}
.app::after{
  background:radial-gradient(circle,rgba(184,135,53,.22) 0%,rgba(184,135,53,0) 72%)!important;
}
.app header,.panel,.api-box,.form-note{
  background:linear-gradient(145deg,rgba(255,248,236,.88),rgba(246,235,215,.72))!important;
  border:1px solid rgba(90,59,35,.16)!important;
  box-shadow:0 10px 28px rgba(51,35,22,.10)!important;
}
.app header{position:relative;overflow:hidden}
.app header::after{
  content:"";
  position:absolute;
  inset:auto 20% 0 20%;
  height:3px;
  background:linear-gradient(90deg,transparent,#667347,#b88735,#667347,transparent);
  border-radius:99px;
}
.btn{
  border-radius:16px!important;
  box-shadow:0 6px 16px rgba(51,35,22,.10);
}
.btn-dark{
  background:linear-gradient(135deg,#332316,#5a3b23)!important;
  color:#fff7e8!important;
}
.btn-gold{
  background:linear-gradient(135deg,#667347,#b88735)!important;
  color:#fff7e8!important;
}
.btn-light{
  background:rgba(255,248,236,.78)!important;
  border:2px solid rgba(90,59,35,.16)!important;
  color:#332316!important;
}
.btn:hover{box-shadow:0 10px 22px rgba(51,35,22,.16);filter:saturate(1.04)}
.timer,.exam-revision-btn{
  background:linear-gradient(135deg,#332316,#667347)!important;
  color:#fff7e8!important;
  border-color:rgba(255,248,236,.28)!important;
}
.cat-card{
  background:
    linear-gradient(180deg,rgba(255,248,236,.96),rgba(240,226,201,.78))!important;
  border:1px solid rgba(90,59,35,.16)!important;
  box-shadow:0 10px 24px rgba(51,35,22,.10)!important;
  position:relative;
  overflow:hidden;
}
.cat-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 92% 0%,rgba(102,115,71,.18),transparent 34%);
  pointer-events:none;
}
.cat-card:hover{border-color:#667347!important;transform:translateY(-4px) scale(1.01)!important}.cat-ar,.list-ar{color:#332316!important}.cat-en{color:#667347!important}
.scene{filter:drop-shadow(0 16px 30px rgba(51,35,22,.16))}
.card{border-radius:30px!important}.card-face{border-radius:30px!important}
.card-front{
  background:
    radial-gradient(circle at 20% 15%,rgba(184,135,53,.20),transparent 26%),
    linear-gradient(145deg,#332316,#4b321f 54%,#667347)!important;
  border:2px solid rgba(216,177,106,.42)!important;
}
.card-back{
  background:
    linear-gradient(145deg,#fff8ec,#efe2c8)!important;
  border:2px solid rgba(102,115,71,.25)!important;
}
.card-front.done{background:linear-gradient(145deg,#586f3f,#667347)!important}
.big-ar,.big-tr,.card-front .answer-ar,.card-front .verb-cell .arabic{color:#fff7e8!important}.answer-ar{color:#332316!important}.hint,.badge{color:rgba(216,177,106,.9)!important}
.verb-cell,.trans>div,.detail-box{
  background:rgba(255,248,236,.74)!important;
  border:1px solid rgba(90,59,35,.10)!important;
}
.card-front .verb-cell{background:rgba(255,248,236,.12)!important;border-color:rgba(216,177,106,.25)!important}
.progress-wrap{background:rgba(90,59,35,.12)!important}.progress-bar{background:linear-gradient(90deg,#667347,#b88735,#d8b16a)!important}
.list-item,.option,.match-tile,.field input,.field select,.field textarea,.search{
  background:linear-gradient(180deg,rgba(255,248,236,.96),rgba(245,234,213,.84))!important;
  border-color:rgba(90,59,35,.16)!important;
  box-shadow:0 6px 16px rgba(51,35,22,.08)!important;
}
.list-item{border-left:5px solid #667347!important}.list-item:hover,.option:hover,.match-tile:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(51,35,22,.13)!important}
.option.correct,.match-tile.matched{background:rgba(102,115,71,.18)!important;border-color:#667347!important}.option.wrong{background:rgba(142,76,47,.17)!important;border-color:#8e4c2f!important}
#cardsSection.active .panel,#listSection.active .panel,#testSection.active .panel,#addSection.active .panel{
  background:linear-gradient(155deg,rgba(255,248,236,.88),rgba(239,226,200,.70))!important;
}
.mini-label,.counter,.page-label,.field label,.small-muted{color:#7d6a4d!important}.word-al,.translation-prompt span{color:#8e4c2f!important}.word-en{color:#332316!important}


/* === Detailed brown / olive / cream redesign (CSS only, no text/function changes) === */
:root{
  --sand:#f3eadc!important;
  --cream:#fff8ec!important;
  --cream-2:#f8efdf!important;
  --brown:#3b281d!important;
  --brown-2:#5b3d2c!important;
  --olive:#64744b!important;
  --olive-2:#7a8b5b!important;
  --gold:#a8782c!important;
  --gold-light:#c49a45!important;
  --terracotta:#8f4f2e!important;
  --ink:#2b2018!important;
  --card:#fff8ec!important;
  --shadow:rgba(43,32,24,.18)!important;
  --green:#65784d!important;
  --red:#9a4a3d!important;
}
*{scrollbar-color:var(--olive) var(--cream-2)}
body{
  font-family:'Outfit','Noto Kufi Arabic',system-ui,sans-serif!important;
  background:var(--sand)!important;
  background-image:none!important;
  color:var(--ink)!important;
}
body.app-mode{
  background:var(--sand)!important;
  background-image:none!important;
}
.arabic,.big-ar,.answer-ar,.list-ar,.cat-ar,header h1,.home h3,.verb-cell .arabic,.match-tile.arabic,.quiz-question:not(.translation){
  font-family:'Amiri','Aref Ruqaa',serif!important;
  font-weight:700;
}
body::before{
  content:'م  ع  ف  ر  د  ا  ت';
  position:fixed;
  inset:auto 0 18px 0;
  text-align:center;
  font-family:'Amiri',serif;
  font-size:2.4rem;
  letter-spacing:.55em;
  color:rgba(91,61,44,.045);
  pointer-events:none;
  z-index:-1;
}
.home{
  background:var(--cream)!important;
  background-image:none!important;
  border:2px solid rgba(91,61,44,.18)!important;
  box-shadow:0 20px 55px rgba(59,40,29,.16), inset 0 0 0 8px rgba(100,116,75,.055)!important;
}
.home::before,.app::before{
  content:'';
  position:absolute;
  inset:18px;
  border:1px solid rgba(100,116,75,.22);
  border-radius:22px;
  pointer-events:none;
  background:none!important;
  filter:none!important;
  width:auto!important;height:auto!important;top:18px!important;right:18px!important;bottom:18px!important;left:18px!important;
}
.home::after,.app::after{
  content:'✦';
  position:absolute;
  top:28px;
  left:34px;
  width:auto!important;height:auto!important;bottom:auto!important;right:auto!important;
  color:rgba(168,120,44,.55);
  font-size:1.3rem;
  filter:none!important;
  background:none!important;
  pointer-events:none;
}
.bg-letter{color:rgba(100,116,75,.075)!important;text-shadow:0 1px 0 rgba(255,248,236,.65)}
.home-card{
  background:rgba(255,248,236,.72)!important;
  border:1px solid rgba(91,61,44,.14);
  border-radius:30px;
  box-shadow:inset 0 0 0 1px rgba(168,120,44,.16), 0 12px 30px rgba(59,40,29,.10);
}
.home h1{color:var(--brown)!important;font-weight:700!important;letter-spacing:.02em!important}
.home h2{color:var(--olive)!important;font-weight:800!important}
.home h3{color:var(--gold)!important;text-shadow:0 2px 0 rgba(255,255,255,.8)}
.home p,header p,.cat-count,.counter,.page-label,.small-muted,.field label{color:#756351!important}
.app{
  background:var(--cream)!important;
  background-image:none!important;
  border:2px solid rgba(91,61,44,.18)!important;
  border-radius:34px!important;
  box-shadow:0 22px 70px rgba(59,40,29,.18), inset 0 0 0 8px rgba(100,116,75,.05)!important;
}
.app-top{
  background:var(--cream-2)!important;
  border:1px solid rgba(91,61,44,.13);
  border-radius:22px;
  padding:12px!important;
  box-shadow:inset 0 -3px 0 rgba(100,116,75,.08);
}
.app header{
  background:var(--cream-2)!important;
  background-image:none!important;
  border:1px solid rgba(91,61,44,.16)!important;
  border-radius:26px!important;
  box-shadow:inset 0 0 0 1px rgba(168,120,44,.18), 0 8px 22px rgba(59,40,29,.08)!important;
  position:relative;
}
.app header::before,.app header::after{
  content:'◇';
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  color:rgba(100,116,75,.55);
  font-size:1.2rem;
}
.app header::before{left:22px}.app header::after{right:22px}
header h1{color:var(--brown)!important;font-size:2.55rem!important}
.panel{
  background:var(--cream)!important;
  background-image:none!important;
  border:1px solid rgba(91,61,44,.16)!important;
  border-radius:28px!important;
  box-shadow:0 12px 32px rgba(59,40,29,.12), inset 0 0 0 4px rgba(100,116,75,.045)!important;
  position:relative;
}
.panel::before{
  content:'';
  position:absolute;
  inset:10px;
  border:1px dashed rgba(168,120,44,.22);
  border-radius:22px;
  pointer-events:none;
}
#cardsSection.active .panel,#listSection.active .panel,#testSection.active .panel,#addSection.active .panel{background:var(--cream)!important;background-image:none!important}
.btn,.option,.match-tile,.cat-card,.list-item,.search,.field input,.field select,.field textarea,.timer{
  background:var(--cream)!important;
  background-image:none!important;
}
.btn{
  border:1px solid rgba(59,40,29,.22)!important;
  box-shadow:0 4px 0 rgba(59,40,29,.16), inset 0 0 0 1px rgba(255,255,255,.42)!important;
  border-radius:15px!important;
  color:var(--brown)!important;
  position:relative;
}
.btn::before{
  content:'';
  position:absolute;
  inset:4px;
  border:1px solid rgba(100,116,75,.18);
  border-radius:10px;
  pointer-events:none;
}
.btn:hover{transform:translateY(-2px)!important;box-shadow:0 6px 0 rgba(59,40,29,.15), 0 10px 18px rgba(59,40,29,.09)!important}
.btn-dark{
  background:var(--brown)!important;
  color:var(--cream)!important;
  border-color:var(--brown)!important;
}
.btn-dark::before{border-color:rgba(255,248,236,.22)}
.btn-gold{
  background:var(--olive)!important;
  color:var(--cream)!important;
  border-color:#53643f!important;
}
.btn-gold::before{border-color:rgba(255,248,236,.25)}
.btn-light{background:var(--cream-2)!important;color:var(--brown)!important}
.exam-revision-btn{
  background:var(--brown)!important;
  color:var(--cream)!important;
  border:1px solid rgba(255,248,236,.45)!important;
  outline:1px solid rgba(59,40,29,.25);
  outline-offset:3px;
}
.timer{
  color:var(--olive)!important;
  border-color:rgba(100,116,75,.35)!important;
  box-shadow:0 4px 0 rgba(100,116,75,.18)!important;
}
.cat-card{
  border-radius:24px 24px 18px 18px!important;
  border:1px solid rgba(91,61,44,.18)!important;
  box-shadow:0 8px 0 rgba(100,116,75,.12),0 14px 28px rgba(59,40,29,.10)!important;
  position:relative;
  overflow:hidden;
}
.cat-card::before{
  content:'';
  position:absolute;
  inset:8px;
  border:1px solid rgba(168,120,44,.22);
  border-radius:18px;
  pointer-events:none;
}
.cat-card::after{
  content:'•';
  position:absolute;
  top:8px;
  right:13px;
  color:rgba(100,116,75,.45);
  font-size:1.2rem;
}
.cat-card:hover{border-color:var(--olive)!important;box-shadow:0 10px 0 rgba(100,116,75,.16),0 18px 32px rgba(59,40,29,.13)!important}
.cat-ar{color:var(--brown)!important}.cat-en{color:var(--olive)!important;letter-spacing:.03em}
.scene{filter:drop-shadow(0 18px 22px rgba(59,40,29,.14))}
.card{
  border-radius:30px!important;
}
.card-face{
  border-radius:30px!important;
  box-shadow:0 0 0 1px rgba(59,40,29,.18),0 16px 34px rgba(59,40,29,.18),inset 0 0 0 8px rgba(255,248,236,.055)!important;
}
.card-front{
  background:var(--brown)!important;
  border:2px solid rgba(168,120,44,.42)!important;
}
.card-front.done{background:var(--olive)!important}
.card-back{
  background:var(--cream)!important;
  border:2px solid rgba(100,116,75,.30)!important;
}
.card-face::before{
  content:'';
  position:absolute;
  top:12px;left:12px;right:12px;bottom:12px;
  border:1px solid rgba(168,120,44,.30);
  border-radius:24px;
  pointer-events:none;
}
.card-face::after{
  content:'۞';
  position:absolute;
  top:14px;
  right:18px;
  font-size:1rem;
  color:rgba(168,120,44,.55);
}
.big-ar,.big-tr,.card-front .answer-ar{color:var(--cream)!important}.answer-ar{color:var(--brown)!important}.big-tr{font-family:'Outfit',sans-serif!important}
.badge{color:rgba(196,154,69,.95)!important}.hint{color:rgba(196,154,69,.75)!important}
.trans>div,.verb-cell,.detail-box{
  background:var(--cream-2)!important;
  background-image:none!important;
  border:1px solid rgba(91,61,44,.12);
  box-shadow:inset 0 -2px 0 rgba(100,116,75,.08);
}
.word-en{color:var(--brown)!important}.word-al{color:var(--olive)!important}.mini-label{color:#876a45!important}
.card-front .verb-cell{background:rgba(255,248,236,.10)!important;border-color:rgba(196,154,69,.32)!important}.card-front .verb-cell .arabic{color:var(--cream)!important}
.progress-wrap{background:rgba(91,61,44,.14)!important;border:1px solid rgba(91,61,44,.13);height:8px!important}.progress-bar{background:var(--olive)!important;background-image:none!important}
.list-item{
  border-left:0!important;
  border-right:5px solid var(--olive)!important;
  border-radius:18px!important;
  border-top:1px solid rgba(91,61,44,.12);
  border-bottom:1px solid rgba(91,61,44,.12);
  box-shadow:0 5px 0 rgba(100,116,75,.11),0 12px 22px rgba(59,40,29,.08)!important;
}
.list-item:hover{transform:translateX(0) translateY(-2px)!important}
.list-ar{color:var(--brown)!important}.list-al{color:var(--olive)!important}.list-en{color:var(--brown)!important}
.details{border-top:1px dashed rgba(100,116,75,.35)!important}
.quiz-card{background:var(--cream-2)!important;background-image:none!important;border:1px solid rgba(91,61,44,.14)}
.option,.match-tile{
  border:1px solid rgba(91,61,44,.18)!important;
  border-radius:18px!important;
  box-shadow:0 4px 0 rgba(59,40,29,.10)!important;
}
.option:hover,.match-tile:hover{border-color:var(--olive)!important;transform:translateY(-1px)}
.option.correct,.match-tile.matched{background:#eef2e8!important;border-color:var(--olive)!important;color:var(--olive)!important}
.option.wrong{background:#f4e6df!important;border-color:var(--red)!important;color:var(--red)!important}
.match-tile.selected{border-color:var(--gold)!important;box-shadow:0 0 0 3px rgba(168,120,44,.18),0 4px 0 rgba(59,40,29,.10)!important}
.search,.field input,.field select,.field textarea{
  border-color:rgba(91,61,44,.20)!important;
  border-radius:16px!important;
  box-shadow:inset 0 2px 0 rgba(59,40,29,.04)!important;
  color:var(--brown)!important;
}
.search:focus,.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid rgba(100,116,75,.22)!important;border-color:var(--olive)!important}
.api-box,.form-note,.saved-word-preview{
  background:var(--cream-2)!important;
  background-image:none!important;
  border-color:rgba(91,61,44,.15)!important;
  border-radius:20px!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)!important;
}
.api-box h3{color:var(--brown)!important}
.subtabs{padding:6px;border:1px solid rgba(91,61,44,.11);border-radius:20px;background:rgba(248,239,223,.7)}
.back-row{background:rgba(248,239,223,.62);border:1px solid rgba(91,61,44,.10);border-radius:18px;padding:10px}
@media(max-width:620px){
  body{padding:12px 8px!important}.app{padding:14px!important;border-radius:24px!important}.app header::before,.app header::after{display:none}.card-face{padding:24px 18px!important}.home-card{padding:34px 18px!important}
}


/* Remove decorative title lines requested by user */
.app header::before,
.app header::after,
header h1::before,
header h1::after,
#appTitle::before,
#appTitle::after,
.cat-ar::before,
.cat-ar::after{display:none!important;content:none!important}

/* Dark mode option */
.dark-toggle-btn{position:fixed;right:18px;bottom:18px;z-index:9999;background:#3a2a1f;color:#f6efe2;border:2px solid #6f7d46;border-radius:18px;padding:12px 16px;font-family:Outfit,sans-serif;font-weight:900;letter-spacing:.04em;box-shadow:0 10px 24px rgba(27,20,16,.28);cursor:pointer;transition:.16s}.dark-toggle-btn:hover{transform:translateY(-2px);background:#4a3526}.dark-toggle-btn:active{transform:translateY(0)}body.dark-mode{--sand:#14110e;--ink:#f3eadc;--gold:#c9a45a;--gold-light:#dfc47c;--terracotta:#c0845d;--sage:#8fa36c;--card:#201914;--shadow:rgba(0,0,0,.42);--green:#7da06b;--red:#c66d65;background:#14110e!important;background-image:radial-gradient(circle at 15% 12%,rgba(143,163,108,.13),transparent 28%),radial-gradient(circle at 86% 74%,rgba(116,78,49,.20),transparent 32%)!important;color:#f3eadc}body.dark-mode.app-mode{background:#14110e!important;background-image:radial-gradient(circle at 8% 12%,rgba(143,163,108,.14),transparent 28%),radial-gradient(circle at 88% 22%,rgba(111,89,57,.18),transparent 26%),radial-gradient(circle at 50% 90%,rgba(72,88,54,.12),transparent 34%)!important}body.dark-mode .home{background:#19130f!important;border:1px solid rgba(201,164,90,.26);box-shadow:0 20px 60px rgba(0,0,0,.50)}body.dark-mode .home-card,body.dark-mode .app,body.dark-mode .panel,body.dark-mode .cat-card,body.dark-mode .list-item,body.dark-mode .quiz-card,body.dark-mode .card-back,body.dark-mode .option,body.dark-mode .match-tile,body.dark-mode .api-box,body.dark-mode .field input,body.dark-mode .field select,body.dark-mode .field textarea,body.dark-mode .search,body.dark-mode .timer{background:#211914!important;color:#f3eadc!important;border-color:rgba(201,164,90,.30)!important;box-shadow:0 10px 26px rgba(0,0,0,.32)}body.dark-mode .app header{background:#1b1511!important;border-color:rgba(201,164,90,.26)!important}body.dark-mode .card-front{background:#18120f!important;border-color:rgba(143,163,108,.52)!important}body.dark-mode .card-front.done{background:#52673f!important}body.dark-mode .btn-light{background:#241b15!important;color:#f3eadc!important;border-color:rgba(201,164,90,.36)!important}body.dark-mode .btn-dark{background:#0f0c0a!important;color:#f6efe2!important;border-color:rgba(143,163,108,.35)!important}body.dark-mode .btn-gold{background:#6f7d46!important;color:#fff7e8!important}body.dark-mode .cat-en,body.dark-mode header p,body.dark-mode .page-label,body.dark-mode .counter,body.dark-mode .field label,body.dark-mode .small-muted,body.dark-mode .mini-label{color:#c9a45a!important}body.dark-mode .cat-ar,body.dark-mode .list-ar,body.dark-mode .answer-ar,body.dark-mode .arabic,body.dark-mode .quiz-question{color:#f3eadc!important}body.dark-mode .list-al,body.dark-mode .word-al,body.dark-mode .albanian-word,body.dark-mode .translation-prompt span{color:#d29a72!important}body.dark-mode .big-ar,body.dark-mode .big-tr,body.dark-mode .card-front .answer-ar,body.dark-mode .card-front .verb-cell .arabic{color:#fff4df!important}body.dark-mode .trans>div,body.dark-mode .verb-cell,body.dark-mode .detail-box{background:#2a211a!important;border-color:rgba(201,164,90,.20)!important}body.dark-mode .progress-wrap{background:rgba(255,255,255,.13)!important}body.dark-mode .progress-bar{background:#8fa36c!important}body.dark-mode .form-note{background:#261f17!important;color:#dfc47c!important;border-color:rgba(201,164,90,.30)!important}body.dark-mode .saved-word-preview{background:#1f2a1b!important;color:#a9c58b!important;border-color:rgba(143,163,108,.40)!important}body.dark-mode .bg-letter{color:rgba(201,164,90,.10)!important}@media(max-width:620px){.dark-toggle-btn{right:12px;bottom:12px;padding:10px 12px;font-size:.82rem}}


/* Strong full dark mode fix */
html body.dark-mode,html body.dark-mode.app-mode{background:#120f0c!important;color:#efe5d4!important}
body.dark-mode .home,body.dark-mode .app,body.dark-mode .home-card,body.dark-mode header,body.dark-mode .app header,body.dark-mode .panel,body.dark-mode .cat-card,body.dark-mode .card-back,body.dark-mode .list-item,body.dark-mode .quiz-card,body.dark-mode .option,body.dark-mode .match-tile,body.dark-mode .detail-box,body.dark-mode .trans>div,body.dark-mode .verb-cell,body.dark-mode .api-box,body.dark-mode .form-note,body.dark-mode .field input,body.dark-mode .field select,body.dark-mode .field textarea,body.dark-mode .search,body.dark-mode .timer{background:#1e1712!important;color:#efe5d4!important;border-color:#6f7d46!important;box-shadow:0 8px 26px rgba(0,0,0,.45)!important}
body.dark-mode .card-front,body.dark-mode .btn-dark{background:#0f0c09!important;color:#f7eedc!important;border-color:#6f7d46!important}
body.dark-mode .card-front.done{background:#415a35!important}
body.dark-mode .btn-light,body.dark-mode .dark-toggle-btn{background:#261d16!important;color:#f7eedc!important;border-color:#8a7a4e!important}
body.dark-mode .btn-gold{background:#6f7d46!important;color:#fff8e8!important;border-color:#9caf72!important}
body.dark-mode .big-ar,body.dark-mode .big-tr,body.dark-mode .answer-ar,body.dark-mode .arabic,body.dark-mode .cat-ar,body.dark-mode .list-ar,body.dark-mode .quiz-question,body.dark-mode h1,body.dark-mode h2,body.dark-mode h3{color:#f7eedc!important}
body.dark-mode p,body.dark-mode .counter,body.dark-mode .page-label,body.dark-mode .cat-count,body.dark-mode .field label,body.dark-mode .small-muted,body.dark-mode .mini-label{color:#cdbf9d!important}
body.dark-mode .cat-en,body.dark-mode header p,body.dark-mode .word-en{color:#d6b56d!important}
body.dark-mode .list-al,body.dark-mode .word-al,body.dark-mode .albanian-word,body.dark-mode .translation-prompt span{color:#c9956e!important}
body.dark-mode .option.correct{background:#263521!important;border-color:#7da06b!important}
body.dark-mode .option.wrong{background:#3b201c!important;border-color:#c66d65!important}
body.dark-mode .progress-wrap{background:#2e251c!important}
body.dark-mode .progress-bar{background:#7b8f54!important}
body.dark-mode .bg-letter{color:rgba(214,181,109,.12)!important}
body.dark-mode .exam-revision-btn{background:#0f0c09!important;color:#f7eedc!important;border-color:#6f7d46!important}


/* Scroll back-to-top button */
.scroll-top-btn{position:fixed;left:18px;bottom:18px;z-index:9999;width:52px;height:52px;border-radius:18px;border:2px solid rgba(100,116,75,.72);background:#3a2a1f;color:#f6efe2;font-family:Outfit,sans-serif;font-weight:900;font-size:1.25rem;box-shadow:0 10px 24px rgba(27,20,16,.28);cursor:pointer;opacity:0;pointer-events:none;transform:translateY(10px) scale(.94);transition:opacity .2s ease,transform .2s ease,background .16s ease}.scroll-top-btn.show{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}.scroll-top-btn:hover{transform:translateY(-2px) scale(1.02);background:#4a3526}.scroll-top-btn:active{transform:translateY(0) scale(.98)}body.dark-mode .scroll-top-btn{background:#0f0c09!important;color:#f7eedc!important;border-color:#6f7d46!important;box-shadow:0 10px 24px rgba(0,0,0,.44)!important}@media(max-width:620px){.scroll-top-btn{left:12px;bottom:12px;width:46px;height:46px;border-radius:16px;font-size:1.08rem}}

/* Huruf type division */
.huruf-type-group{margin:12px 0;border-radius:20px;background:var(--cream-2,#f8efdf);border:1px solid rgba(91,61,44,.16);box-shadow:0 5px 0 rgba(100,116,75,.10),inset 0 0 0 1px rgba(255,255,255,.30);overflow:hidden}
.huruf-type-head{width:100%;border:0;background:transparent;color:inherit;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;text-align:inherit;font-family:Outfit,sans-serif}
.huruf-type-head:hover{background:rgba(100,116,75,.08)}
.huruf-type-title{font-family:Amiri,serif;direction:rtl;font-size:1.55rem;font-weight:800;color:var(--brown,#3b281d)}
.huruf-type-sub{font-size:.78rem;font-weight:800;color:#756351;letter-spacing:.04em;white-space:nowrap}
.huruf-type-arrow{font-size:1.25rem;font-weight:900;color:var(--olive,#64744b);transition:transform .18s ease}
.huruf-type-body{display:none;padding:0 12px 12px}
.huruf-type-group.open .huruf-type-body{display:block}
.huruf-type-group.open .huruf-type-arrow{transform:rotate(180deg)}
body.dark-mode .huruf-type-group{background:#241b15!important;border-color:#6f7d46!important}
body.dark-mode .huruf-type-head:hover{background:rgba(111,125,70,.18)!important}
body.dark-mode .huruf-type-title{color:#f7eedc!important}
body.dark-mode .huruf-type-sub{color:#cdbf9d!important}
body.dark-mode .huruf-type-arrow{color:#d6b56d!important}



/* Floating Home button next to Dark mode */
.floating-home-btn{position:fixed;right:142px;bottom:18px;z-index:9999;width:46px;height:46px;padding:0;background:#3a2a1f;color:#f6efe2;border:2px solid #6f7d46;border-radius:18px;font-family:Outfit,sans-serif;font-size:1.05rem;line-height:1;font-weight:900;letter-spacing:0;box-shadow:0 10px 24px rgba(27,20,16,.28);cursor:pointer;transition:.16s;display:none;align-items:center;justify-content:center}.floating-home-btn.show{display:flex}.floating-home-btn:hover{transform:translateY(-2px);background:#4a3526}.floating-home-btn:active{transform:translateY(0)}body.dark-mode .floating-home-btn{background:#0f0c09!important;color:#f7eedc!important;border-color:#6f7d46!important;box-shadow:0 10px 24px rgba(0,0,0,.44)!important}@media(max-width:620px){.floating-home-btn{right:112px;bottom:12px;width:42px;height:42px;border-radius:16px;font-size:.98rem}}


/* Group search + special All words tile */
.group-search{max-width:520px;margin:0 auto 18px;display:block;text-align:center;font-weight:800}
.all-words-card{grid-column:1/-1;background:linear-gradient(135deg,#3b281d,#64744b)!important;color:#fff8ec!important;border:2px solid rgba(196,154,69,.75)!important;box-shadow:0 12px 0 rgba(59,40,29,.20),0 22px 38px rgba(59,40,29,.18)!important;min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden}
.all-words-card::before{content:''!important;position:absolute!important;inset:10px!important;border:1px solid rgba(255,248,236,.42)!important;border-radius:18px!important;pointer-events:none!important;background:none!important}
.all-words-card::after{content:'★'!important;position:absolute!important;top:12px!important;right:18px!important;color:#d8b16a!important;font-size:1.45rem!important}
.all-words-card .cat-ar,.all-words-card .cat-en,.all-words-card .cat-count{color:#fff8ec!important;position:relative;z-index:1}
.all-words-card .cat-ar{font-size:2.45rem!important}.all-words-card .cat-en{font-size:1.15rem!important;color:#f0d79c!important}.all-words-card .cat-count{color:#efe5d4!important}
.important-tag{margin-top:10px;padding:6px 12px;border-radius:999px;background:rgba(255,248,236,.16);border:1px solid rgba(255,248,236,.34);color:#fff8ec;font-weight:900;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;position:relative;z-index:1}
body.dark-mode .all-words-card{background:linear-gradient(135deg,#0f0c09,#52673f)!important;border-color:#d6b56d!important;color:#f7eedc!important}
body.dark-mode .all-words-card .cat-ar,body.dark-mode .all-words-card .cat-en,body.dark-mode .all-words-card .cat-count{color:#f7eedc!important}
body.dark-mode .important-tag{background:rgba(214,181,109,.15);border-color:rgba(214,181,109,.38);color:#f7eedc}

/* Final All Words and Home icon adjustments */
.all-words-card{background:#64744b!important;background-image:none!important;color:#fff8ec!important}
.all-words-card:hover{background:#64744b!important;background-image:none!important}
body.dark-mode .all-words-card{background:#52673f!important;background-image:none!important}
.important-tag{display:none!important}
.floating-home-btn{width:54px;height:54px;padding:0!important;display:none;align-items:center;justify-content:center;font-size:1.45rem;line-height:1}
.floating-home-btn.show{display:flex!important}
@media(max-width:620px){.floating-home-btn{width:46px;height:46px;font-size:1.25rem}}



/* Final home icon size fix: actually smaller than before and aligned with Dark mode button */
.floating-home-btn{
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  min-height:38px!important;
  max-width:38px!important;
  max-height:38px!important;
  padding:0!important;
  border-radius:13px!important;
  font-size:1rem!important;
  line-height:1!important;
  display:none;
  align-items:center!important;
  justify-content:center!important;
}
.floating-home-btn.show{display:flex!important}
@media(max-width:620px){
  .floating-home-btn{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    min-height:36px!important;
    max-width:36px!important;
    max-height:36px!important;
    border-radius:12px!important;
    font-size:.95rem!important;
    right:108px!important;
  }
}


/* Exact Home button size requested: 37x37 */
.floating-home-btn{
  width:37px!important;
  height:37px!important;
  min-width:37px!important;
  min-height:37px!important;
  max-width:37px!important;
  max-height:37px!important;
  padding:0!important;
}
@media(max-width:620px){
  .floating-home-btn{
    width:37px!important;
    height:37px!important;
    min-width:37px!important;
    min-height:37px!important;
    max-width:37px!important;
    max-height:37px!important;
  }
}



/* Final fix: match floating Home button height to Dark mode button */
.floating-home-btn{
  width:47px!important;
  height:47px!important;
  min-width:47px!important;
  min-height:47px!important;
  max-width:47px!important;
  max-height:47px!important;
  padding:0!important;
  border:2px solid #6f7d46!important;
  border-radius:18px!important;
  box-sizing:border-box!important;
  display:none;
  align-items:center!important;
  justify-content:center!important;
  font-size:1.05rem!important;
  line-height:1!important;
}
.floating-home-btn.show{display:flex!important}
@media(max-width:620px){
  .floating-home-btn{
    width:43px!important;
    height:43px!important;
    min-width:43px!important;
    min-height:43px!important;
    max-width:43px!important;
    max-height:43px!important;
    right:108px!important;
    bottom:12px!important;
    border-radius:16px!important;
  }
}



/* Final alignment: match vertical centers of Home and Dark mode buttons */
.dark-toggle-btn,
.floating-home-btn{
  bottom:18px!important;
  height:47px!important;
  min-height:47px!important;
  max-height:47px!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.floating-home-btn{
  width:47px!important;
  min-width:47px!important;
  max-width:47px!important;
}
.floating-home-btn:not(.show){display:none!important}
@media(max-width:620px){
  .dark-toggle-btn,
  .floating-home-btn{
    bottom:12px!important;
    height:43px!important;
    min-height:43px!important;
    max-height:43px!important;
    box-sizing:border-box!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  .floating-home-btn{
    width:43px!important;
    min-width:43px!important;
    max-width:43px!important;
  }
  .floating-home-btn:not(.show){display:none!important}
}


/* Final home icon fill/bold adjustment */
.floating-home-btn{
  font-size:1.34rem!important;
  font-weight:1000!important;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",Outfit,sans-serif!important;
  line-height:1!important;
  text-align:center!important;
}
@media(max-width:620px){
  .floating-home-btn{font-size:1.22rem!important;}
}



/* First entrance page with wide Start Learning button */
.pre-home-actions{display:flex;justify-content:center;margin-top:20px}
.start-learning-wide{width:min(430px,88vw);padding:16px 22px!important;font-size:1.05rem!important;line-height:1.35;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center}
.start-learning-wide .arabic{font-size:1.35rem;line-height:1.1}
#home,#bookHome{display:none}
body.on-main-home #home{display:flex}
body.on-main-home #preHome{display:none!important}
body.app-mode #preHome{display:none!important}
body.book-home-mode #preHome,body.book-home-mode #home,body.book-home-mode #app,body.book-home-mode #bookMenu{display:none!important}
body.book-home-mode #bookHome{display:flex!important}
body.book-menu-mode #preHome,body.book-menu-mode #home,body.book-menu-mode #bookHome,body.book-menu-mode #app{display:none!important}
body.book-menu-mode #bookMenu{display:flex!important}
.book-grid{display:grid;grid-template-columns:repeat(2,minmax(140px,1fr));gap:14px;margin-top:18px}
.book-choice{min-height:112px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;border-radius:22px!important}
.book-choice .arabic{font-size:1.65rem;line-height:1.05}
.book-choice span:first-child{font-size:1.1rem;font-weight:900}
@media(max-width:620px){.book-grid{grid-template-columns:1fr}.book-choice{min-height:92px}}



/* Persistent back / forward navigation buttons */
.floating-nav-buttons{
  position:fixed;
  left:18px;
  top:18px;
  z-index:9999;
  display:none;
  gap:8px;
  align-items:center;
}
.floating-nav-buttons.show{display:flex!important}
.floating-nav-btn{
  width:47px;
  height:47px;
  border-radius:16px;
  border:2px solid rgba(100,116,75,.72);
  background:#3a2a1f;
  color:#f6efe2;
  font-family:Outfit,sans-serif;
  font-weight:1000;
  font-size:1.28rem;
  line-height:1;
  box-shadow:0 10px 24px rgba(27,20,16,.28);
  cursor:pointer;
  transition:.16s;
  display:flex;
  align-items:center;
  justify-content:center;
}
.floating-nav-btn:hover:not(:disabled){transform:translateY(-2px);background:#4a3526}
.floating-nav-btn:disabled{opacity:.38;cursor:not-allowed;transform:none}
body.dark-mode .floating-nav-btn{background:#0f0c09!important;color:#f7eedc!important;border-color:#6f7d46!important;box-shadow:0 10px 24px rgba(0,0,0,.44)!important}
@media(max-width:620px){
  .floating-nav-buttons{left:12px;top:12px;gap:6px}
  .floating-nav-btn{width:43px;height:43px;border-radius:15px;font-size:1.14rem}
}



/* Special homepage Books button like the important All words tile */
.home-actions .books-main-btn{
  background:#64744b!important;
  color:#fff8ec!important;
  border:2px solid #53643f!important;
  border-radius:22px!important;
  min-width:190px;
  min-height:78px;
  padding:12px 22px!important;
  display:flex!important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  box-shadow:0 9px 0 rgba(59,40,29,.18),0 18px 34px rgba(59,40,29,.18)!important;
  position:relative;
  overflow:hidden;
}
.home-actions .books-main-btn::before{
  content:'';
  position:absolute;
  inset:7px;
  border:1px solid rgba(255,248,236,.34);
  border-radius:16px;
  pointer-events:none;
}
.home-actions .books-main-btn::after{
  content:'★';
  position:absolute;
  top:7px;
  right:12px;
  color:rgba(255,248,236,.62);
  font-size:.9rem;
}
.home-actions .books-main-btn:hover{
  background:#586a44!important;
  transform:translateY(-3px) scale(1.02)!important;
  box-shadow:0 11px 0 rgba(59,40,29,.18),0 22px 38px rgba(59,40,29,.22)!important;
}
.books-btn-en{font-size:1.05rem;font-weight:950;letter-spacing:.08em;text-transform:uppercase;line-height:1;color:#fff8ec!important}
.books-btn-ar{font-size:1.6rem!important;line-height:1.05;color:#fff8ec!important}
.books-btn-al{font-size:.78rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;opacity:.92;color:#fff8ec!important}
body.dark-mode .home-actions .books-main-btn{
  background:#6f7d46!important;
  color:#fff8ec!important;
  border-color:#9caf72!important;
  box-shadow:0 9px 0 rgba(0,0,0,.32),0 18px 34px rgba(0,0,0,.34)!important;
}
@media(max-width:620px){
  .home-actions .books-main-btn{min-width:100%;min-height:72px}
}

/* Main Words and Books homepage buttons */
.main-study-actions{display:grid!important;grid-template-columns:repeat(2,minmax(190px,1fr));gap:14px;max-width:560px;margin:0 auto}
.home-actions .words-main-btn,.home-actions .books-main-btn{min-height:86px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.home-actions .words-main-btn{background:var(--cream-2,#f8efdf)!important;color:var(--brown,#3b281d)!important;border:2px solid rgba(91,61,44,.22)!important}
.words-btn-en,.books-btn-en{font-size:1.05rem;font-weight:900;letter-spacing:.06em}
.words-btn-ar,.books-btn-ar{font-size:1.85rem;line-height:1.05;font-weight:900}
.words-btn-al,.books-btn-al{font-size:.88rem;font-weight:900;opacity:.9}
body.dark-mode .home-actions .words-main-btn{background:#241b15!important;color:#f7eedc!important;border-color:#8a7a4e!important}
@media(max-width:620px){.main-study-actions{grid-template-columns:1fr}.home-actions .words-main-btn,.home-actions .books-main-btn{min-height:76px}}



/* === Final spacing fix: stop words/translations overlapping === */
.btn,
.cat-card,
.list-item,
.option,
.match-tile,
.trans>div,
.detail-box,
.verb-cell,
.book-choice,
.words-main-btn,
.books-main-btn,
.start-learning-wide{
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  line-height:1.35!important;
}

/* Buttons with Arabic + English + Albanian stacked inside */
.home-actions .words-main-btn,
.home-actions .books-main-btn,
.book-choice,
.start-learning-wide{
  gap:9px!important;
  padding-top:18px!important;
  padding-bottom:18px!important;
  min-height:104px!important;
}
.words-btn-en,.books-btn-en,
.words-btn-al,.books-btn-al,
.book-choice span:first-child,
.start-learning-wide span:not(.arabic){
  display:block!important;
  line-height:1.25!important;
  margin:0!important;
  max-width:100%!important;
}
.words-btn-ar,.books-btn-ar,
.book-choice .arabic,
.start-learning-wide .arabic{
  display:block!important;
  line-height:1.45!important;
  margin:3px 0!important;
  padding:2px 0!important;
  max-width:100%!important;
}

/* Category tiles: give Arabic, English, and count breathing room */
.cat-card{
  padding:28px 18px 24px!important;
  min-height:154px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
}
.cat-ar{
  line-height:1.45!important;
  margin:0!important;
  padding:2px 0!important;
  max-width:100%!important;
}
.cat-en{
  line-height:1.3!important;
  margin-top:0!important;
  max-width:100%!important;
}
.cat-count{
  line-height:1.25!important;
  margin-top:0!important;
}
.all-words-card{
  min-height:176px!important;
  gap:12px!important;
}
.all-words-card .cat-ar{line-height:1.45!important}

/* Flashcard translation blocks: more space between Arabic and translations */
.trans{
  gap:16px!important;
  margin-top:20px!important;
  row-gap:14px!important;
}
.trans>div{
  min-width:170px!important;
  padding:14px 16px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:6px!important;
  justify-content:center!important;
}
.mini-label{
  line-height:1.15!important;
  margin-bottom:2px!important;
}
.word-en,.word-al{
  line-height:1.35!important;
  padding:1px 0!important;
}
.big-ar,.answer-ar{
  line-height:1.55!important;
  padding:4px 8px!important;
  max-width:100%!important;
  overflow-wrap:anywhere!important;
}
.big-tr{
  line-height:1.35!important;
  padding:4px 8px!important;
  max-width:100%!important;
  overflow-wrap:anywhere!important;
}

/* Verb forms and details: prevent cramped cells */
.verb-grid{
  gap:12px!important;
  margin-top:20px!important;
}
.verb-cell{
  min-height:78px!important;
  padding:13px 11px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
}
.verb-cell .arabic{
  line-height:1.45!important;
  padding:2px 0!important;
  overflow-wrap:anywhere!important;
}
.detail-grid{
  gap:12px!important;
}
.detail-box{
  padding:12px 11px!important;
  line-height:1.35!important;
  min-height:62px!important;
}
.detail-box .arabic{
  line-height:1.5!important;
  padding:2px 0!important;
}

/* List rows: keep Arabic and translations apart */
.list-wrap{gap:13px!important}
.list-item{
  padding:18px 18px!important;
}
.list-main{
  gap:18px!important;
  grid-template-columns:minmax(0,1fr) minmax(90px,auto)!important;
}
.list-en{
  line-height:1.35!important;
  margin-bottom:6px!important;
  overflow-wrap:anywhere!important;
}
.list-al{
  line-height:1.35!important;
  margin-top:4px!important;
  overflow-wrap:anywhere!important;
}
.list-ar{
  line-height:1.55!important;
  padding-inline-start:10px!important;
  overflow-wrap:anywhere!important;
  text-align:right!important;
}

/* Quiz/Test buttons: taller buttons and clear line spacing */
.options{
  gap:14px!important;
  margin:18px 0!important;
}
.option{
  min-height:62px!important;
  padding:17px 18px!important;
  line-height:1.4!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
}
.quiz-question{
  line-height:1.5!important;
  padding:8px 6px!important;
}
.quiz-question.translation{
  line-height:1.35!important;
}
.match-board{gap:18px!important}
.match-col{gap:13px!important}
.match-tile{
  min-height:60px!important;
  padding:16px 14px!important;
  line-height:1.45!important;
}
.match-tile.arabic{
  line-height:1.65!important;
}

/* Top navigation and small control buttons: prevent cramped text */
.top-nav,
.controls,
.subtabs,
.back-row{
  gap:12px!important;
  row-gap:12px!important;
}
.top-nav .btn,
.controls .btn,
.subtabs .btn,
.back-row .btn,
.timer-wrap .btn{
  padding:13px 17px!important;
  line-height:1.25!important;
  min-height:47px!important;
}

/* Small screens need more vertical room, not smaller cramped text */
@media(max-width:620px){
  .home-actions .words-main-btn,
  .home-actions .books-main-btn,
  .book-choice,
  .start-learning-wide{
    min-height:96px!important;
    gap:8px!important;
  }
  .cat-card{min-height:132px!important;padding:24px 14px 20px!important}
  .trans{gap:12px!important;margin-top:16px!important}
  .trans>div{min-width:100%!important;padding:13px 14px!important}
  .list-main{grid-template-columns:1fr!important;gap:10px!important;text-align:center!important}
  .list-ar{text-align:center!important;padding-inline-start:0!important}
  .option,.match-tile{min-height:58px!important;padding:15px 12px!important}
  .big-ar{font-size:2.55rem!important;line-height:1.6!important}
  .answer-ar{font-size:2.45rem!important;line-height:1.6!important}
  .big-tr{font-size:1.45rem!important;line-height:1.45!important}
}



/* Final capitalization fix: keep English and Albanian labels readable, not forced uppercase */
.words-btn-en,.books-btn-en,
.words-btn-al,.books-btn-al,
.book-choice span,
.start-learning-wide span,
.home-actions .btn,
.book-mode-actions .btn,
.words-mode-actions .btn{
  text-transform:none!important;
  letter-spacing:.025em!important;
}
.words-btn-en,.books-btn-en{font-size:1.08rem!important;font-weight:900!important;line-height:1.15!important}
.words-btn-al,.books-btn-al{font-size:.95rem!important;font-weight:850!important;line-height:1.2!important}
.home p,header p{ text-transform:none!important; letter-spacing:.035em!important; }
.mini-label{letter-spacing:.06em!important;}


/* Final design consistency fix: Words and Books boxes now share the same frame/inner-line system */
.home-actions .words-main-btn,
.home-actions .books-main-btn{
  min-width:190px!important;
  min-height:104px!important;
  padding:18px 22px!important;
  border:2px solid #53643f!important;
  border-radius:22px!important;
  box-shadow:0 9px 0 rgba(59,40,29,.18),0 18px 34px rgba(59,40,29,.18)!important;
  position:relative!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
}
.home-actions .words-main-btn::before,
.home-actions .books-main-btn::before{
  content:''!important;
  position:absolute!important;
  inset:8px!important;
  border:1px solid rgba(83,100,63,.38)!important;
  border-radius:16px!important;
  pointer-events:none!important;
  background:none!important;
}
.home-actions .words-main-btn::after,
.home-actions .books-main-btn::after{
  display:none!important;
  content:none!important;
}
.home-actions .words-main-btn{
  background:#f8efdf!important;
  color:#3b281d!important;
}
.home-actions .books-main-btn{
  background:#64744b!important;
  color:#fff8ec!important;
}
.home-actions .books-main-btn::before{
  border-color:rgba(255,248,236,.38)!important;
}
.words-btn-en,.words-btn-ar,.words-btn-al{
  color:#3b281d!important;
}
.words-btn-ar{color:#64744b!important;}
.books-btn-en,.books-btn-ar,.books-btn-al{
  color:#fff8ec!important;
}
.home-actions .words-main-btn:hover,
.home-actions .books-main-btn:hover{
  transform:translateY(-3px) scale(1.02)!important;
  box-shadow:0 11px 0 rgba(59,40,29,.18),0 22px 38px rgba(59,40,29,.22)!important;
}
.home-actions .words-main-btn:hover{background:#f4e6cf!important;}
.home-actions .books-main-btn:hover{background:#586a44!important;}

/* Make the inner lines consistent on book selection boxes too */
.book-choice{
  border:2px solid #53643f!important;
  box-shadow:0 8px 0 rgba(59,40,29,.14),0 16px 28px rgba(59,40,29,.12)!important;
  position:relative!important;
  overflow:hidden!important;
}
.book-choice::before{
  content:''!important;
  position:absolute!important;
  inset:8px!important;
  border:1px solid rgba(83,100,63,.32)!important;
  border-radius:16px!important;
  pointer-events:none!important;
  background:none!important;
}
.book-choice::after{display:none!important;content:none!important;}

body.dark-mode .home-actions .words-main-btn,
body.dark-mode .home-actions .books-main-btn,
body.dark-mode .book-choice{
  border-color:#9caf72!important;
  box-shadow:0 9px 0 rgba(0,0,0,.32),0 18px 34px rgba(0,0,0,.34)!important;
}
body.dark-mode .home-actions .words-main-btn{
  background:#241b15!important;
  color:#f7eedc!important;
}
body.dark-mode .home-actions .books-main-btn{
  background:#6f7d46!important;
  color:#fff8ec!important;
}
body.dark-mode .home-actions .words-main-btn::before,
body.dark-mode .book-choice::before{
  border-color:rgba(156,175,114,.38)!important;
}
body.dark-mode .home-actions .books-main-btn::before{
  border-color:rgba(255,248,236,.38)!important;
}
body.dark-mode .words-btn-en,
body.dark-mode .words-btn-ar,
body.dark-mode .words-btn-al{
  color:#f7eedc!important;
}
@media(max-width:620px){
  .home-actions .words-main-btn,
  .home-actions .books-main-btn{min-width:100%!important;min-height:96px!important;}
}



/* Detailed Arabic explanations readability */
.detail-explain{grid-column:1/-1!important;text-align:right!important;direction:rtl!important;padding:14px 16px!important}
.detail-box .arabic{line-height:1.75}


/* Book 3 physical-book subcategories */
.book-subcategory-card .cat-ar{font-size:1.85rem!important;line-height:1.25!important;margin-bottom:8px!important}
.book-subcategory-card .cat-en{font-size:1rem!important;line-height:1.35!important;margin-top:6px!important}
.book-subcategory-card .cat-count{margin-top:10px!important}
.book-subcategory-card{min-height:132px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important}

/* All words tile inside every physical book */
.book-subcategory-card.all-words-card{min-height:150px!important}
.book-subcategory-card.all-words-card .cat-ar{font-size:2.15rem!important}
.book-subcategory-card.all-words-card .cat-en{font-size:1.08rem!important}
.book-subcategory-card.all-words-card .cat-count{color:#efe5d4!important}


/* Subcategory translations + stronger search grouping display */
.huruf-type-title-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:0;flex:1}.subcategory-translation{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;font-family:Outfit,sans-serif;direction:ltr;font-size:.72rem;font-weight:850;color:#756351;line-height:1.25}.subcategory-translation span{white-space:normal}.huruf-type-head{align-items:center!important}.huruf-type-sub{min-width:max-content}@media(max-width:620px){.huruf-type-head{gap:8px}.subcategory-translation{font-size:.68rem;justify-content:flex-end}.huruf-type-title{font-size:1.35rem!important}}body.dark-mode .subcategory-translation{color:#cdbf9d!important}



/* Fixed list form display and searchable subcategory translations */
.list-verb-forms{font-size:1.45rem!important;line-height:1.55!important;max-width:460px!important;text-align:right!important}
.list-plural-form{color:var(--olive,#64744b)!important;font-weight:900!important}
.list-form-separator{color:#876a45!important;font-family:Outfit,sans-serif!important;font-size:1rem!important;padding:0 3px!important}
body.dark-mode .list-plural-form{color:#d6b56d!important}
body.dark-mode .list-form-separator{color:#cdbf9d!important}


/* Home page word-group quick search */
.home-search-box{margin:22px auto 0;max-width:620px;width:100%;position:relative;z-index:3}.home-search-input{margin-bottom:10px!important;text-align:center;font-weight:850}.home-search-results{display:none;max-height:360px;overflow:auto;padding:8px;border-radius:22px;background:rgba(255,248,236,.82);border:1px solid rgba(91,61,44,.16);box-shadow:0 12px 28px rgba(59,40,29,.12)}.home-search-results.show{display:grid;gap:10px}.home-search-card{background:var(--cream,#fff8ec);border:1px solid rgba(91,61,44,.16);border-radius:18px;padding:12px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;text-align:center;box-shadow:0 5px 0 rgba(100,116,75,.08)}.home-search-main{cursor:pointer}.home-search-card .cat-ar{font-size:1.65rem}.home-search-card .cat-en{font-size:.95rem}.home-search-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.home-search-actions .btn{padding:8px 10px!important;font-size:.76rem!important}.group-search{position:relative;z-index:2}.cat-card.hidden{display:none!important}body.dark-mode .home-search-results,body.dark-mode .home-search-card{background:#1e1712!important;border-color:#6f7d46!important;color:#f7eedc!important}@media(max-width:620px){.home-search-card{grid-template-columns:1fr}.home-search-results{max-height:420px}.home-search-actions .btn{flex:1}}



/* Articles section */
.home-actions .articles-main-btn{background:#f3e4c8!important;color:var(--brown,#3b281d)!important;border:2px solid rgba(91,61,44,.22)!important;min-height:96px;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:22px!important;box-shadow:0 9px 0 rgba(59,40,29,.14),0 18px 34px rgba(59,40,29,.12)!important;position:relative;overflow:hidden}.home-actions .articles-main-btn::before{content:'';position:absolute;inset:7px;border:1px solid rgba(100,116,75,.24);border-radius:16px;pointer-events:none}.articles-btn-en{font-size:1.05rem;font-weight:950;letter-spacing:.08em;text-transform:uppercase;line-height:1}.articles-btn-ar{font-size:1.65rem!important;line-height:1.05}.articles-btn-al{font-size:.78rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;opacity:.92}.articles-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:16px;max-width:900px}.article-choice{min-height:130px;text-align:center;display:flex;flex-direction:column;gap:6px;justify-content:center}.article-choice .arabic{font-size:1.55rem;color:var(--brown,#3b281d)}.article-choice .article-topic{font-size:.82rem;color:#756351;font-weight:900}.article-reader{display:none;max-width:980px;margin:0 auto;position:relative;padding:24px;border-radius:30px;background:linear-gradient(160deg,rgba(255,248,236,.94),rgba(240,226,201,.82));border:2px solid rgba(91,61,44,.18);box-shadow:0 22px 70px rgba(59,40,29,.18), inset 0 0 0 8px rgba(100,116,75,.05)}.article-reader-header{text-align:center;background:var(--cream-2,#f8efdf);border:1px solid rgba(91,61,44,.16);border-radius:24px;padding:18px;margin-bottom:16px}.article-reader-title{font-family:Amiri,serif;direction:rtl;font-size:2.35rem;color:var(--brown,#3b281d);font-weight:900}.article-reader-sub{font-weight:900;color:var(--olive,#64744b);margin-top:4px}.article-text{font-family:Amiri,serif;direction:rtl;font-size:1.65rem;line-height:2.15;background:var(--cream,#fff8ec);border:1px solid rgba(91,61,44,.16);border-radius:24px;padding:22px;text-align:right}.article-word{display:inline-block;cursor:pointer;border-radius:8px;padding:0 3px;transition:.12s}.article-word:hover{background:rgba(100,116,75,.16)}.article-word.active{background:rgba(196,154,69,.32);box-shadow:inset 0 -2px 0 rgba(100,116,75,.24)}.article-translation-box{margin-top:14px;background:var(--cream-2,#f8efdf);border:1px solid rgba(91,61,44,.16);border-radius:18px;padding:14px;display:none}.article-translation-box.show{display:block}.article-translation-word{font-family:Amiri,serif;direction:rtl;font-size:1.8rem;font-weight:900;color:var(--brown,#3b281d)}.article-translation-line{display:grid;grid-template-columns:44px 1fr;gap:8px;align-items:center;margin-top:8px;background:rgba(255,248,236,.70);border:1px solid rgba(91,61,44,.10);border-radius:12px;padding:8px}.article-translation-line span{font-size:.72rem;font-weight:1000;color:#876a45}.article-translation-line strong{font-weight:900;color:var(--brown,#3b281d)}.article-tip{margin-top:10px;font-size:.86rem;font-weight:800;color:#756351}.article-nav-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:14px}.article-nav-row .btn{min-width:120px}body.dark-mode .home-actions .articles-main-btn,body.dark-mode .article-reader,body.dark-mode .article-reader-header,body.dark-mode .article-text,body.dark-mode .article-translation-box{background:#1e1712!important;color:#f7eedc!important;border-color:#6f7d46!important}body.dark-mode .article-choice .arabic,body.dark-mode .article-reader-title,body.dark-mode .article-translation-word{color:#f7eedc!important}body.dark-mode .article-reader-sub,body.dark-mode .article-topic{color:#d6b56d!important}body.dark-mode .article-translation-line{background:#2a211a!important;border-color:rgba(214,181,109,.18)!important}body.dark-mode .article-translation-line strong{color:#f7eedc!important}@media(max-width:620px){.article-reader{padding:14px;border-radius:24px}.article-text{font-size:1.35rem;line-height:2.05;padding:16px}.articles-grid{grid-template-columns:1fr}.main-study-actions{grid-template-columns:1fr!important}}



/* Fix Words / Books / Articles home buttons: 3 in one straight aligned row */
.main-study-actions{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(150px,1fr))!important;
  gap:14px!important;
  max-width:780px!important;
  width:100%!important;
  margin:0 auto!important;
  align-items:stretch!important;
}
.home-actions .words-main-btn,.home-actions .books-main-btn,.home-actions .articles-main-btn{
  width:100%!important;
  min-width:0!important;
  min-height:96px!important;
  height:96px!important;
  padding:10px 12px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:center!important;
  gap:4px!important;
  text-align:center!important;
  overflow:hidden!important;
}
.words-btn-en,.books-btn-en,.articles-btn-en{font-size:.92rem!important;font-weight:950!important;letter-spacing:.05em!important;line-height:1.05!important;white-space:nowrap!important}
.words-btn-ar,.books-btn-ar,.articles-btn-ar{font-size:1.45rem!important;line-height:1.08!important;white-space:nowrap!important;display:block!important}
.words-btn-al,.books-btn-al,.articles-btn-al{font-size:.78rem!important;font-weight:900!important;letter-spacing:.04em!important;line-height:1.05!important;white-space:nowrap!important;display:block!important}
@media(max-width:760px){.main-study-actions{grid-template-columns:1fr!important;max-width:420px!important}.home-actions .words-main-btn,.home-actions .books-main-btn,.home-actions .articles-main-btn{height:auto!important;min-height:82px!important}}


/* Article difficulty tabs and page controls */
.article-difficulty-tabs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:16px auto 6px}.article-difficulty-tabs .btn.active{background:var(--olive,#64744b)!important;color:#fff8ec!important}.article-level-label{font-size:.75rem;font-weight:1000;color:var(--olive,#64744b);letter-spacing:.06em;text-transform:uppercase}.article-page-controls{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:14px 0}.article-page-indicator{font-weight:1000;color:#756351;background:rgba(255,248,236,.75);border:1px solid rgba(91,61,44,.14);border-radius:999px;padding:8px 14px}.article-paragraph{margin-bottom:18px}.article-starters-note{margin-top:8px;font-weight:900;color:#756351;font-size:.88rem}.article-starter-chip{display:inline-block;margin:3px;padding:5px 9px;border-radius:999px;background:rgba(100,116,75,.12);border:1px solid rgba(100,116,75,.18)}body.dark-mode .article-difficulty-tabs .btn.active{background:#6f7d46!important;color:#fff8ec!important}body.dark-mode .article-page-indicator,body.dark-mode .article-starter-chip{background:#2a211a!important;color:#f7eedc!important;border-color:rgba(214,181,109,.18)!important}

/* Article popup: full word details + clickable expressions */
.article-expression{border-bottom:2px dotted rgba(100,116,75,.45);background:rgba(196,154,69,.10)}
.article-detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-top:10px}
.article-detail-mini{background:rgba(255,248,236,.70);border:1px solid rgba(91,61,44,.10);border-radius:12px;padding:8px;text-align:center}
.article-detail-mini b{display:block;font-size:.72rem;color:#876a45;margin-bottom:4px;letter-spacing:.04em}
.article-detail-mini .arabic{font-size:1.35rem;line-height:1.35}
.article-popup-note{margin-top:10px;font-weight:800;color:#756351;font-size:.86rem}
body.dark-mode .article-detail-mini{background:#2a211a!important;border-color:rgba(214,181,109,.18)!important}
body.dark-mode .article-popup-note{color:#cdbf9d!important}


/* Bigger, readable article translation/details popup */
.article-translation-box.show{
  display:block!important;
  position:relative!important;
  padding:20px!important;
  border-radius:24px!important;
  margin-top:18px!important;
  box-shadow:0 14px 34px rgba(59,40,29,.16), inset 0 0 0 2px rgba(100,116,75,.06)!important;
}
.article-translation-word{
  font-size:2.35rem!important;
  line-height:1.65!important;
  word-break:normal!important;
  white-space:normal!important;
  text-align:center!important;
  margin-bottom:10px!important;
}
.article-translation-line{
  grid-template-columns:58px 1fr!important;
  padding:11px 13px!important;
  border-radius:15px!important;
  font-size:1.05rem!important;
}
.article-translation-line span{font-size:.82rem!important}
.article-translation-line strong{font-size:1.05rem!important;line-height:1.55!important}
.article-detail-grid{
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))!important;
  gap:12px!important;
  margin-top:14px!important;
}
.article-detail-mini{
  min-height:98px!important;
  padding:12px 13px!important;
  border-radius:16px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
}
.article-detail-mini b{
  font-size:.82rem!important;
  line-height:1.25!important;
  text-transform:uppercase!important;
  letter-spacing:.05em!important;
}
.article-detail-mini .arabic{
  font-size:1.9rem!important;
  line-height:1.75!important;
  direction:rtl!important;
  white-space:normal!important;
  word-break:normal!important;
}
.article-detail-mini div:not(.arabic){
  font-size:1.02rem!important;
  line-height:1.45!important;
  font-weight:850!important;
}
.article-attached-panel{
  margin-top:14px!important;
  background:rgba(100,116,75,.10)!important;
  border:1px solid rgba(100,116,75,.22)!important;
  border-radius:18px!important;
  padding:13px!important;
}
.article-attached-title{
  font-weight:1000!important;
  color:var(--olive,#64744b)!important;
  margin-bottom:8px!important;
  text-align:center!important;
}
.article-attached-equation{
  direction:rtl!important;
  font-family:Amiri,serif!important;
  font-size:2rem!important;
  line-height:1.7!important;
  text-align:center!important;
  color:var(--brown,#3b281d)!important;
}
.article-attached-explain{
  margin-top:8px!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:8px!important;
}
.article-attached-explain div{
  background:rgba(255,248,236,.72)!important;
  border:1px solid rgba(91,61,44,.10)!important;
  border-radius:12px!important;
  padding:8px!important;
  font-weight:850!important;
}
body.dark-mode .article-attached-panel{background:#26301f!important;border-color:rgba(214,181,109,.24)!important}
body.dark-mode .article-attached-title{color:#d6b56d!important}
body.dark-mode .article-attached-equation{color:#f7eedc!important}
body.dark-mode .article-attached-explain div{background:#2a211a!important;border-color:rgba(214,181,109,.18)!important}
@media(max-width:620px){
  .article-translation-box.show{padding:15px!important;border-radius:20px!important}
  .article-translation-word{font-size:2rem!important}
  .article-detail-grid{grid-template-columns:1fr!important}
  .article-detail-mini .arabic{font-size:1.7rem!important}
  .article-attached-explain{grid-template-columns:1fr!important}
  .article-attached-equation{font-size:1.65rem!important}
}


/* Final article popup readability + expression parts */
.article-translation-box.show{max-width:980px!important;margin-left:auto!important;margin-right:auto!important;padding:24px!important}
.article-detail-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))!important;gap:12px!important}
.article-detail-mini{min-height:104px!important;padding:13px!important;display:flex!important;flex-direction:column!important;justify-content:center!important}
.article-detail-mini .arabic{font-size:2.05rem!important;line-height:1.65!important;word-break:normal!important;overflow-wrap:anywhere!important}
.article-detail-mini div:not(.arabic){font-size:1.03rem!important;line-height:1.55!important}
.article-expression-parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-top:10px}
.article-expression-part{background:rgba(255,248,236,.70);border:1px solid rgba(91,61,44,.10);border-radius:12px;padding:10px;line-height:1.65;font-weight:800}
.article-expression-part .arabic{display:block;font-size:1.55rem;margin-bottom:4px}
body.dark-mode .article-expression-part{background:#2a211a!important;border-color:rgba(214,181,109,.18)!important}
@media(max-width:620px){.article-detail-mini .arabic{font-size:1.75rem!important}.article-translation-box.show{padding:16px!important}}



/* Final article spacing + full form visibility fixes */
.article-choice{gap:12px!important;padding:18px 14px!important;min-height:155px!important;line-height:1.35!important;overflow:visible!important}
.article-choice span{display:block!important;position:relative!important;z-index:2!important;margin:0!important;line-height:1.35!important;white-space:normal!important}
.article-choice .arabic{font-size:1.75rem!important;line-height:1.55!important;margin:4px 0!important}
.article-choice .article-topic{font-size:.95rem!important;line-height:1.45!important;margin-top:5px!important}
.article-level-label{font-size:.82rem!important;line-height:1.35!important;margin-bottom:4px!important}
.article-reader-header{padding:22px 18px!important;display:flex!important;flex-direction:column!important;gap:12px!important;align-items:center!important;justify-content:center!important;overflow:visible!important}
.article-reader-title{display:block!important;line-height:1.65!important;margin:0!important;padding:0 8px!important;word-break:normal!important;overflow-wrap:anywhere!important}
.article-reader-sub{display:block!important;line-height:1.7!important;margin:0!important;padding:0 8px!important;max-width:860px!important}
.article-translation-box.show{font-size:1.05rem!important;line-height:1.7!important;overflow:visible!important}
.article-detail-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))!important;gap:14px!important}
.article-detail-mini{min-height:124px!important;padding:16px 14px!important;overflow:visible!important}
.article-detail-mini b{font-size:.88rem!important;line-height:1.35!important;margin-bottom:8px!important}
.article-detail-mini .arabic{font-size:2.35rem!important;line-height:1.85!important;letter-spacing:0!important;word-spacing:2px!important;white-space:normal!important;overflow-wrap:anywhere!important}
.article-attached-base-grid{margin-top:14px!important}
.article-attached-panel{overflow:visible!important;padding:18px!important}
@media(max-width:620px){
  .article-choice{min-height:145px!important;padding:16px 12px!important}
  .article-choice .arabic{font-size:1.45rem!important;line-height:1.7!important}
  .article-reader-title{font-size:1.8rem!important;line-height:1.8!important}
  .article-reader-sub{font-size:.95rem!important;line-height:1.8!important}
  .article-detail-grid{grid-template-columns:1fr!important}
  .article-detail-mini .arabic{font-size:2rem!important;line-height:1.9!important}
}



/* === GLOBAL SPACING RESET FIX: readable everywhere in the web app === */
html,body{line-height:1.45!important;-webkit-text-size-adjust:100%!important;text-size-adjust:100%!important}
*{min-width:0!important}
.arabic,[dir="rtl"]{line-height:1.85!important;word-spacing:.08em!important;letter-spacing:0!important}
button,a,.btn{white-space:normal!important;text-align:center!important;min-width:0!important;max-width:100%!important;overflow-wrap:normal!important;word-break:normal!important;hyphens:none!important}
.home-card,.app,.panel,.article-reader,.article-reader-header,.article-text,.article-translation-box,.quiz-card{overflow:visible!important}
.home h1,.home h2,.home h3,header h1,header p,.article-reader-title,.article-reader-sub{display:block!important;line-height:1.65!important;margin-block:8px!important;padding-block:3px!important;white-space:normal!important;overflow-wrap:normal!important;word-break:normal!important}
.home h1{font-size:clamp(2.15rem,7vw,3.1rem)!important}.home h2{font-size:clamp(1.35rem,5vw,2rem)!important}.home h3{font-size:clamp(2rem,7vw,3rem)!important}
.home p{line-height:1.65!important;margin:18px auto 28px!important;max-width:92%!important;white-space:normal!important}
.home-card{padding:clamp(30px,6vw,48px) clamp(18px,4vw,30px)!important;width:min(720px,94vw)!important}

/* Main 3 buttons: Words / Books / Articles in one clean row without overlap */
.main-study-actions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px!important;max-width:860px!important;width:100%!important;margin:0 auto!important;align-items:stretch!important}
.home-actions .words-main-btn,.home-actions .books-main-btn,.home-actions .articles-main-btn{width:100%!important;min-width:0!important;min-height:142px!important;height:auto!important;padding:24px 18px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:10px!important;line-height:1.3!important;overflow:visible!important}
.words-btn-en,.books-btn-en,.articles-btn-en,.words-btn-al,.books-btn-al,.articles-btn-al{display:block!important;width:100%!important;line-height:1.45!important;white-space:normal!important;text-transform:none!important;letter-spacing:.015em!important;font-size:clamp(.86rem,1.6vw,1.05rem)!important;margin:0!important;padding:0!important}
.words-btn-ar,.books-btn-ar,.articles-btn-ar{display:block!important;width:100%!important;line-height:1.75!important;white-space:normal!important;font-size:clamp(1.45rem,2.4vw,1.95rem)!important;margin:0!important;padding:0!important}

/* Any multi-language button/card gets vertical breathing room */
.book-choice,.article-choice,.cat-card,.all-words-card,.start-learning-wide,.home-actions .btn,.words-mode-actions .btn,.book-mode-actions .btn{height:auto!important;min-height:118px!important;padding:22px 16px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;gap:11px!important;line-height:1.45!important;overflow:visible!important}
.book-choice span,.article-choice span,.cat-card div,.start-learning-wide span{display:block!important;line-height:1.55!important;margin:0!important;padding:0!important;max-width:100%!important;white-space:normal!important;overflow-wrap:normal!important;word-break:normal!important}
.cat-ar,.article-choice .arabic,.book-choice .arabic{font-size:clamp(1.45rem,3.2vw,2.1rem)!important;line-height:1.8!important}.cat-en,.cat-count,.article-topic,.article-level-label{line-height:1.55!important;white-space:normal!important}
.category-grid,.articles-grid,.book-grid{gap:18px!important;align-items:stretch!important}.articles-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))!important}.category-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))!important}

/* Top bars, nav rows, subtabs */
.app-top,.top-nav,.controls,.subtabs,.back-row,.article-nav-row,.article-page-controls,.article-difficulty-tabs{gap:14px!important;row-gap:14px!important;align-items:center!important;line-height:1.4!important}
.top-nav .btn,.controls .btn,.subtabs .btn,.back-row .btn,.article-nav-row .btn,.article-page-controls .btn,.article-difficulty-tabs .btn{min-height:54px!important;padding:14px 18px!important;line-height:1.35!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;flex-wrap:wrap!important}
.timer,.page-label,.counter,.article-page-indicator{line-height:1.45!important;padding:11px 15px!important}

/* Lists: keep Arabic forms away from English/Albanian */
.list-wrap{gap:16px!important}.list-item{padding:20px 18px!important;overflow:visible!important}.list-main{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(160px,auto)!important;gap:22px!important;align-items:center!important}.list-en,.list-al{line-height:1.55!important;margin:0!important;padding:3px 0!important;overflow-wrap:normal!important;word-break:normal!important}.list-ar{line-height:1.9!important;padding:4px 0 4px 12px!important;text-align:right!important;overflow-wrap:normal!important;word-break:normal!important;max-width:100%!important}.details{margin-top:16px!important;padding-top:16px!important}.detail-grid{gap:14px!important;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))!important}.detail-box{padding:14px!important;line-height:1.55!important;min-height:86px!important;overflow:visible!important}.detail-box .arabic,.detail-arabic-value{font-size:clamp(1.35rem,2.3vw,1.75rem)!important;line-height:1.9!important;white-space:normal!important}

/* Cards / forms / translations */
.scene{height:auto!important;min-height:380px!important}.card-face{padding:34px 24px!important;gap:12px!important;overflow:visible!important}.big-ar,.answer-ar{font-size:clamp(2.35rem,6vw,3.45rem)!important;line-height:1.85!important;white-space:normal!important;overflow-wrap:normal!important;word-break:normal!important}.big-tr{line-height:1.55!important;white-space:normal!important}.trans{gap:18px!important;row-gap:18px!important;margin-top:22px!important}.trans>div{min-width:180px!important;padding:16px 18px!important;gap:8px!important;line-height:1.5!important}.word-en,.word-al{line-height:1.55!important}.verb-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;gap:14px!important}.verb-cell{min-height:96px!important;padding:15px!important;gap:8px!important}.verb-cell .arabic{font-size:clamp(1.35rem,2.6vw,1.85rem)!important;line-height:1.95!important}

/* Tests */
.quiz-question{line-height:1.75!important;margin:16px 0!important;padding:10px!important}.quiz-question.translation{line-height:1.5!important}.options{gap:16px!important}.option{min-height:70px!important;padding:18px!important;line-height:1.55!important;white-space:normal!important}.option.arabic{line-height:2!important}.match-board{gap:20px!important}.match-col{gap:14px!important}.match-tile{min-height:70px!important;padding:18px!important;line-height:1.65!important}.match-tile.arabic{line-height:2!important}

/* Article section */
.article-reader{padding:clamp(18px,3vw,30px)!important}.article-reader-header{padding:24px 18px!important;margin-bottom:22px!important;display:flex!important;flex-direction:column!important;gap:10px!important}.article-reader-title{font-size:clamp(2rem,5vw,2.85rem)!important;line-height:1.8!important;margin:0!important}.article-reader-sub{font-size:clamp(.95rem,2.2vw,1.18rem)!important;line-height:1.65!important;margin:0!important;white-space:normal!important}.article-text{font-size:clamp(1.35rem,3.1vw,1.8rem)!important;line-height:2.45!important;padding:clamp(18px,3vw,28px)!important}.article-paragraph{margin-bottom:28px!important}.article-word{line-height:2.05!important;padding:0 5px!important;margin:0 1px!important}.article-translation-box.show{padding:clamp(18px,3vw,30px)!important;margin-top:22px!important}.article-translation-word{font-size:clamp(2rem,5vw,3rem)!important;line-height:1.9!important;margin-bottom:14px!important}.article-translation-line{grid-template-columns:54px minmax(0,1fr)!important;gap:12px!important;padding:12px!important;line-height:1.55!important;margin-top:12px!important}.article-translation-line strong{line-height:1.65!important}.article-detail-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important;gap:16px!important;margin-top:16px!important}.article-detail-mini{min-height:128px!important;padding:16px!important;gap:8px!important;line-height:1.55!important;overflow:visible!important}.article-detail-mini b{line-height:1.35!important;margin-bottom:8px!important;display:block!important}.article-detail-mini .arabic{font-size:clamp(1.75rem,4vw,2.35rem)!important;line-height:2!important;white-space:normal!important;overflow-wrap:normal!important;word-break:normal!important}.article-expression-parts{gap:14px!important}.article-expression-part{padding:14px!important;line-height:1.75!important}.article-expression-part .arabic{line-height:1.9!important}.article-attached-panel{padding:18px!important;margin-top:18px!important}.article-attached-title,.article-attached-equation{line-height:1.75!important}.article-attached-explain{gap:12px!important}.article-attached-explain div{line-height:1.65!important;padding:12px!important}

/* Inputs/search bars */
.search,.group-search,.home-word-search,.field input,.field select,.field textarea{min-height:50px!important;line-height:1.5!important;padding:14px 16px!important;font-size:1rem!important}.field{gap:10px!important}.form-grid{gap:16px!important}.form-actions{gap:14px!important}

@media(max-width:900px){.main-study-actions{grid-template-columns:1fr!important;max-width:460px!important}.home-actions .words-main-btn,.home-actions .books-main-btn,.home-actions .articles-main-btn{min-height:118px!important}.app-top{flex-direction:column!important;align-items:stretch!important}.top-nav{justify-content:center!important}.list-main{grid-template-columns:1fr!important;text-align:center!important;gap:12px!important}.list-ar{text-align:center!important;padding:0!important}.article-detail-grid,.detail-grid{grid-template-columns:1fr!important}}
@media(max-width:620px){body{padding:12px 8px!important}.home{min-height:calc(100vh - 24px)!important;border-radius:22px!important}.home-card{padding:30px 14px!important}.app,.article-reader{padding:14px!important;border-radius:22px!important}.panel{padding:18px 12px!important}.category-grid,.articles-grid,.book-grid{grid-template-columns:1fr!important;gap:14px!important}.cat-card,.article-choice,.book-choice{min-height:112px!important;padding:20px 12px!important}.scene{min-height:420px!important}.card-face{padding:28px 16px!important}.trans>div{min-width:100%!important}.article-text{font-size:1.32rem!important;line-height:2.35!important;padding:16px!important}.article-word{line-height:2.1!important;padding:0 4px!important}.article-translation-line{grid-template-columns:1fr!important;text-align:center!important}.article-detail-mini{min-height:auto!important}.floating-nav-buttons{top:10px!important;left:10px!important}.dark-toggle-btn,.floating-home-btn{bottom:10px!important}}



/* Final hard+ article word separation and richer form popup */
.article-text{word-spacing:5px!important;letter-spacing:0!important}
.article-word{margin-inline:3px!important;margin-block:2px!important;padding:1px 4px!important;line-height:1.95!important;vertical-align:baseline!important}
.article-word + .article-word{margin-inline-start:5px!important}
.article-detail-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))!important;gap:16px!important}
.article-detail-mini{min-height:138px!important;padding:18px 14px!important}
.article-detail-mini .arabic{font-size:2.45rem!important;line-height:2!important;word-spacing:4px!important}
.article-translation-line strong{line-height:1.7!important}
@media(max-width:620px){.article-word{margin-inline:2px!important}.article-detail-mini .arabic{font-size:2rem!important}.article-detail-grid{grid-template-columns:1fr!important}}


/* Perfect article clitic separation and full-form popup */
.article-clitic-combo{display:inline-flex!important;align-items:baseline!important;gap:2px!important;margin-inline:2px!important;vertical-align:baseline!important}
.article-prefix{background:rgba(100,116,75,.12)!important;border:1px solid rgba(100,116,75,.22)!important;color:var(--olive,#64744b)!important;font-size:.82em!important;padding:0 4px!important;margin-inline:1px!important;border-radius:7px!important}
.article-prefix:hover{background:rgba(196,154,69,.22)!important}
.article-detail-mini b{text-transform:none!important}
.article-detail-mini .arabic{direction:rtl!important;unicode-bidi:plaintext!important}
body.dark-mode .article-prefix{background:#26301f!important;color:#d6b56d!important;border-color:rgba(214,181,109,.24)!important}

/* Final translation-only expression parts */
.article-expression-parts-wrap{margin-top:14px;background:rgba(255,248,236,.62);border:1px solid rgba(91,61,44,.12);border-radius:14px;padding:12px}
.article-expression-parts-title{font-weight:1000;color:#876a45;margin-bottom:8px;letter-spacing:.03em}
.article-expression-parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.article-expression-part{background:rgba(255,255,255,.45);border:1px solid rgba(91,61,44,.10);border-radius:12px;padding:9px;line-height:1.6;font-weight:800}
.article-expression-part .arabic{display:block;font-size:1.45rem;margin-bottom:4px;line-height:1.55}
body.dark-mode .article-expression-parts-wrap,body.dark-mode .article-expression-part{background:#2a211a!important;border-color:rgba(214,181,109,.18)!important}
body.dark-mode .article-expression-parts-title{color:#d6b56d!important}



/* === Codex real-site shell and visual polish === */
:root {
  --site-bg: #f7f8fb !important;
  --site-paper: #ffffff !important;
  --site-paper-soft: #f2f6f3 !important;
  --site-ink: #111827 !important;
  --site-muted: #607089 !important;
  --site-line: rgba(17, 24, 39, .12) !important;
  --site-teal: #0f766e !important;
  --site-indigo: #334155 !important;
  --site-coral: #c45b45 !important;
  --site-gold: #b9822d !important;
  --site-green: #52796f !important;
  --site-shadow: 0 18px 50px rgba(15, 23, 42, .10) !important;
  --site-shadow-soft: 0 10px 28px rgba(15, 23, 42, .08) !important;
  --ink: var(--site-ink) !important;
  --gold: var(--site-gold) !important;
  --gold-light: #d5a64e !important;
  --terracotta: var(--site-coral) !important;
  --sage: var(--site-teal) !important;
  --card: var(--site-paper) !important;
  --shadow: rgba(15, 23, 42, .12) !important;
  --green: var(--site-green) !important;
}

html { scroll-behavior: smooth; }

body,
body.app-mode,
body.dark-mode,
body.dark-mode.app-mode {
  min-height: 100vh !important;
  padding: 112px 18px 28px !important;
  background-color: var(--site-bg) !important;
  background-image:
    linear-gradient(rgba(15, 23, 42, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, .045) 1px, transparent 1px),
    linear-gradient(135deg, rgba(15, 118, 110, .10), transparent 44%),
    linear-gradient(315deg, rgba(196, 91, 69, .09), transparent 42%) !important;
  background-size: 42px 42px, 42px 42px, auto, auto !important;
  color: var(--site-ink) !important;
  font-family: Outfit, "Noto Kufi Arabic", system-ui, sans-serif !important;
}

body::before { display: none !important; }
* { letter-spacing: 0 !important; }

.site-header {
  position: fixed;
  inset: 14px 18px auto;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid rgba(17, 24, 39, .10);
  border-radius: 18px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 10px 30px rgba(15, 23, 42, .10);
  backdrop-filter: blur(16px);
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--site-ink);
  text-decoration: none;
  min-width: 190px;
}

.site-brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #0f766e;
  color: #fff;
  font-family: Amiri, serif;
  font-size: 1.6rem;
  font-weight: 700;
}

.site-brand strong,
.site-brand small {
  display: block;
  line-height: 1.2;
}

.site-brand strong {
  font-size: .98rem;
  font-weight: 900;
}

.site-brand small {
  margin-top: 2px;
  color: var(--site-muted);
  font-size: .78rem;
  font-weight: 800;
}

.site-nav {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.site-nav a {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 9px 12px;
  border: 1px solid rgba(17, 24, 39, .10);
  border-radius: 12px;
  background: rgba(242, 246, 243, .92);
  color: var(--site-ink);
  text-decoration: none;
  font-size: .88rem;
  font-weight: 850;
  line-height: 1.2;
}

.site-nav a:hover,
.site-nav a.is-active {
  background: #0f766e;
  color: #fff;
  border-color: #0f766e;
  transform: translateY(-1px);
}

.site-app {
  max-width: 1220px;
  margin: 0 auto;
}

.home,
body.dark-mode .home {
  min-height: calc(100vh - 124px) !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding: 34px !important;
  border: 1px solid rgba(17, 24, 39, .10) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .82) 54%, rgba(255, 255, 255, .30)),
    linear-gradient(135deg, rgba(15, 118, 110, .14), rgba(196, 91, 69, .08)) !important;
  box-shadow: var(--site-shadow) !important;
  overflow: hidden !important;
}

#preHome::after,
#home::after,
#wordsMenu::after,
#bookHome::after,
#bookMenu::after,
#articleHome::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 0 auto !important;
  width: min(56%, 700px) !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, .90), rgba(255, 255, 255, .10) 28%, rgba(255, 255, 255, 0)),
    url("study-hero.png") !important;
  background-size: cover !important;
  background-position: center right !important;
  opacity: .82 !important;
  pointer-events: none !important;
}

.home-card,
body.dark-mode .home-card {
  width: min(620px, 100%) !important;
  align-self: center !important;
  padding: 26px 12px !important;
  text-align: left !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.home-card h1,
.home-card h2,
.home-card h3,
.home-card p {
  text-align: left !important;
}

.home h1,
body.dark-mode .home h1 {
  margin: 0 !important;
  color: var(--site-ink) !important;
  font-size: 3.2rem !important;
  line-height: 1.02 !important;
  font-weight: 900 !important;
}

.home h2 {
  color: var(--site-coral) !important;
  font-size: 1.45rem !important;
  line-height: 1.2 !important;
}

.home h3,
body.dark-mode .home h3 {
  color: var(--site-teal) !important;
  font-size: 2.5rem !important;
  line-height: 1.5 !important;
}

.home p,
header p,
body.dark-mode header p {
  color: var(--site-muted) !important;
  text-transform: none !important;
  font-weight: 800 !important;
}

.bg-letter { opacity: .22 !important; }

.home-actions,
.pre-home-actions,
.words-mode-actions,
.book-mode-actions {
  justify-content: flex-start !important;
}

.main-study-actions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  max-width: 650px !important;
}

.btn,
button,
a.btn {
  border-radius: 12px !important;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease !important;
}

.btn-dark,
body.dark-mode .btn-dark {
  background: #111827 !important;
  color: #fff !important;
  border: 1px solid #111827 !important;
}

.btn-gold,
body.dark-mode .btn-gold {
  background: #0f766e !important;
  color: #fff !important;
  border: 1px solid #0f766e !important;
}

.btn-light,
body.dark-mode .btn-light {
  background: #fff !important;
  color: var(--site-ink) !important;
  border: 1px solid rgba(17, 24, 39, .12) !important;
}

.btn:hover,
.cat-card:hover,
.list-item:hover,
.option:hover,
.match-tile:hover {
  box-shadow: 0 12px 26px rgba(15, 23, 42, .12) !important;
  filter: none !important;
}

.home-actions .words-main-btn,
.home-actions .books-main-btn,
.home-actions .articles-main-btn,
.book-choice,
.article-choice,
.cat-card,
.all-words-card,
.start-learning-wide {
  min-height: 132px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(17, 24, 39, .10) !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: var(--site-shadow-soft) !important;
  color: var(--site-ink) !important;
  position: relative !important;
  overflow: hidden !important;
}

.home-actions .words-main-btn::before,
.home-actions .books-main-btn::before,
.home-actions .articles-main-btn::before,
.book-choice::before,
.article-choice::before,
.cat-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 6px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--site-teal) !important;
}

.home-actions .books-main-btn::before,
.book-choice::before { background: var(--site-indigo) !important; }
.home-actions .articles-main-btn::before,
.article-choice::before { background: var(--site-coral) !important; }

.words-btn-en,
.books-btn-en,
.articles-btn-en,
.words-btn-al,
.books-btn-al,
.articles-btn-al,
.cat-en,
.cat-count,
.article-topic,
.article-level-label {
  color: var(--site-muted) !important;
  text-transform: none !important;
  line-height: 1.45 !important;
}

.words-btn-ar,
.books-btn-ar,
.articles-btn-ar,
.cat-ar,
.book-choice .arabic,
.article-choice .arabic,
.list-ar,
.answer-ar,
.big-ar {
  color: var(--site-ink) !important;
}

.app,
.article-reader,
body.dark-mode .app,
body.dark-mode .article-reader {
  max-width: 1120px !important;
  padding: 24px !important;
  border: 1px solid rgba(17, 24, 39, .10) !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: var(--site-shadow) !important;
}

.app::before,
.app::after { display: none !important; }

.app header,
.panel,
.article-reader-header,
.article-text,
.article-translation-box,
.quiz-card,
.api-box,
.form-note,
body.dark-mode .app header,
body.dark-mode .panel,
body.dark-mode .article-reader-header,
body.dark-mode .article-text,
body.dark-mode .article-translation-box,
body.dark-mode .quiz-card {
  border: 1px solid rgba(17, 24, 39, .10) !important;
  border-radius: 16px !important;
  background: #fff !important;
  color: var(--site-ink) !important;
  box-shadow: var(--site-shadow-soft) !important;
}

.top-nav,
.app-top,
.back-row,
.subtabs,
.controls,
.article-nav-row,
.article-page-controls,
.article-difficulty-tabs {
  gap: 10px !important;
}

.timer,
.page-label,
.counter,
.article-page-indicator {
  border: 1px solid rgba(15, 118, 110, .18) !important;
  border-radius: 999px !important;
  background: #eef7f5 !important;
  color: #0f766e !important;
  box-shadow: none !important;
}

.category-grid,
.articles-grid,
.book-grid {
  gap: 14px !important;
}

.all-words-card,
body.dark-mode .all-words-card {
  background: #0f766e !important;
  color: #fff !important;
}

.all-words-card .cat-ar,
.all-words-card .cat-en,
.all-words-card .cat-count {
  color: #fff !important;
}

.scene {
  max-width: 680px !important;
  min-height: 390px !important;
  filter: none !important;
}

.card-face {
  border-radius: 18px !important;
  box-shadow: var(--site-shadow) !important;
}

.card-front,
body.dark-mode .card-front {
  background:
    linear-gradient(135deg, rgba(15, 118, 110, .92), rgba(51, 65, 85, .98)) !important;
  border: 0 !important;
}

.card-back,
body.dark-mode .card-back {
  background: #fff !important;
  border: 1px solid rgba(17, 24, 39, .10) !important;
}

.card-front .answer-ar,
.card-front .big-ar,
.big-tr,
.card-front .verb-cell .arabic {
  color: #fff !important;
}

.trans > div,
.verb-cell,
.detail-box,
.article-detail-mini,
.article-expression-part,
body.dark-mode .trans > div,
body.dark-mode .verb-cell,
body.dark-mode .detail-box,
body.dark-mode .article-detail-mini {
  border: 1px solid rgba(17, 24, 39, .09) !important;
  border-radius: 12px !important;
  background: #f8fafc !important;
}

.list-wrap { gap: 12px !important; }
.list-item,
.option,
.match-tile,
.field input,
.field select,
.field textarea,
.search,
body.dark-mode .list-item,
body.dark-mode .option,
body.dark-mode .match-tile,
body.dark-mode .field input,
body.dark-mode .field select,
body.dark-mode .field textarea,
body.dark-mode .search {
  border: 1px solid rgba(17, 24, 39, .10) !important;
  border-left: 5px solid var(--site-teal) !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: var(--site-ink) !important;
  box-shadow: var(--site-shadow-soft) !important;
}

.list-en,
.word-en,
.article-translation-line strong {
  color: var(--site-ink) !important;
}

.list-al,
.word-al,
.translation-prompt span {
  color: var(--site-coral) !important;
}

.progress-bar {
  background: linear-gradient(90deg, var(--site-teal), var(--site-coral), var(--site-gold)) !important;
}

.article-text {
  font-size: 1.58rem !important;
  line-height: 2.25 !important;
}

.article-word:hover {
  background: rgba(15, 118, 110, .14) !important;
}

.article-word.active {
  background: rgba(196, 91, 69, .20) !important;
  box-shadow: inset 0 -2px 0 rgba(196, 91, 69, .45) !important;
}

.dark-toggle-btn,
.floating-home-btn,
.scroll-top-btn,
.floating-nav-btn {
  border-radius: 14px !important;
  background: #111827 !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .15) !important;
}

body.dark-mode {
  --site-bg: #0f172a !important;
  --site-paper: #172033 !important;
  --site-paper-soft: #111827 !important;
  --site-ink: #f8fafc !important;
  --site-muted: #cbd5e1 !important;
  --site-line: rgba(255, 255, 255, .14) !important;
}

body.dark-mode .site-header {
  background: rgba(15, 23, 42, .88);
  border-color: rgba(255, 255, 255, .12);
}

body.dark-mode .site-brand,
body.dark-mode .site-nav a {
  color: #f8fafc;
}

body.dark-mode .site-nav a {
  background: rgba(30, 41, 59, .92);
  border-color: rgba(255, 255, 255, .12);
}

body.dark-mode .site-nav a:hover,
body.dark-mode .site-nav a.is-active {
  background: #0f766e;
}

@media (max-width: 900px) {
  body,
  body.app-mode {
    padding-top: 134px !important;
  }

  .site-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .site-nav {
    width: 100%;
    justify-content: flex-start;
  }

  .home,
  body.dark-mode .home {
    padding: 26px 18px !important;
  }

  #preHome::after,
  #home::after,
  #wordsMenu::after,
  #bookHome::after,
  #bookMenu::after,
  #articleHome::after {
    opacity: .18 !important;
    width: 100% !important;
  }

  .home-card {
    width: 100% !important;
  }

  .main-study-actions {
    grid-template-columns: 1fr !important;
    max-width: 460px !important;
  }
}

@media (max-width: 620px) {
  body,
  body.app-mode {
    padding: 210px 10px 18px !important;
  }

  .site-header {
    inset: 8px 10px auto;
    border-radius: 16px;
  }

  .site-brand {
    min-width: 0;
  }

  .site-nav a {
    flex: 1 1 calc(50% - 8px);
    min-height: 38px;
    font-size: .82rem;
  }

  .home h1 {
    font-size: 2.35rem !important;
  }

  .home h2 {
    font-size: 1.2rem !important;
  }

  .home h3 {
    font-size: 2rem !important;
  }

  .app,
  .article-reader {
    padding: 14px !important;
  }
}



/* === Professional production UI pass === */
:root {
  --pro-bg: #f5f7fb !important;
  --pro-ink: #101828 !important;
  --pro-muted: #667085 !important;
  --pro-line: rgba(16, 24, 40, .10) !important;
  --pro-paper: rgba(255, 255, 255, .94) !important;
  --pro-paper-solid: #ffffff !important;
  --pro-teal: #087f73 !important;
  --pro-blue: #214a7a !important;
  --pro-coral: #c25a4a !important;
  --pro-amber: #b7791f !important;
  --pro-violet: #6750a4 !important;
  --pro-shadow: 0 24px 70px rgba(16, 24, 40, .12) !important;
  --pro-shadow-soft: 0 12px 34px rgba(16, 24, 40, .08) !important;
  --site-bg: var(--pro-bg) !important;
  --site-ink: var(--pro-ink) !important;
  --site-muted: var(--pro-muted) !important;
  --site-teal: var(--pro-teal) !important;
  --site-coral: var(--pro-coral) !important;
  --site-gold: var(--pro-amber) !important;
}

body,
body.app-mode,
body.dark-mode,
body.dark-mode.app-mode {
  padding: 104px 24px 32px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.20) 46%, rgba(255,255,255,0)),
    radial-gradient(circle at 16% -6%, rgba(8,127,115,.18), transparent 34%),
    radial-gradient(circle at 88% 0%, rgba(194,90,74,.14), transparent 28%),
    linear-gradient(135deg, #f6f8fc, #eef3f7 52%, #f7f2ed) !important;
  background-attachment: fixed !important;
}

.site-header {
  min-height: 68px;
  padding: 10px 14px;
  border-radius: 20px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(16,24,40,.10);
  box-shadow: 0 18px 48px rgba(16,24,40,.12);
}

.site-brand-mark {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background:
    linear-gradient(135deg, var(--pro-teal), var(--pro-blue));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 24px rgba(8,127,115,.24);
}

.site-brand strong {
  font-size: 1.02rem;
  letter-spacing: 0 !important;
}

.site-brand small {
  color: #667085;
  font-weight: 760;
}

.site-nav {
  align-items: center;
}

.site-nav a {
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 999px;
  background: transparent;
  border-color: transparent;
  color: #344054;
  font-weight: 780;
}

.site-nav a:hover,
.site-nav a.is-active {
  background: #101828;
  border-color: #101828;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(16,24,40,.16);
}

.site-app {
  max-width: 1240px;
}

.home,
body.dark-mode .home {
  min-height: calc(100vh - 136px) !important;
  padding: clamp(24px, 4vw, 54px) !important;
  border-radius: 30px !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.90) 45%, rgba(255,255,255,.36) 74%, rgba(255,255,255,.14) 100%),
    linear-gradient(135deg, rgba(8,127,115,.16), rgba(33,74,122,.09) 43%, rgba(194,90,74,.12)),
    #fff !important;
  border: 1px solid rgba(16,24,40,.10) !important;
  box-shadow: var(--pro-shadow) !important;
}

#preHome::after,
#home::after,
#wordsMenu::after,
#bookHome::after,
#bookMenu::after,
#articleHome::after {
  width: min(54%, 720px) !important;
  opacity: .94 !important;
  filter: saturate(1.03) contrast(1.02) !important;
}

.home-card,
body.dark-mode .home-card {
  width: min(670px, 100%) !important;
  padding: 18px 0 !important;
}

.home h1,
body.dark-mode .home h1 {
  font-size: clamp(2.7rem, 6vw, 5.15rem) !important;
  line-height: .95 !important;
  color: #101828 !important;
  max-width: 10ch;
}

.home h2 {
  color: var(--pro-coral) !important;
  font-size: clamp(1.2rem, 2.2vw, 1.75rem) !important;
  font-weight: 850 !important;
}

.home h3,
body.dark-mode .home h3 {
  color: var(--pro-teal) !important;
  font-size: clamp(2.1rem, 3.2vw, 3.4rem) !important;
}

.home p {
  max-width: 52ch;
  color: #475467 !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
  margin: 18px 0 28px !important;
}

.main-study-actions {
  max-width: 720px !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.home-actions .words-main-btn,
.home-actions .books-main-btn,
.home-actions .articles-main-btn,
.book-choice,
.article-choice,
.cat-card,
.all-words-card,
.start-learning-wide,
a.cat-card,
a.article-choice {
  text-decoration: none !important;
  min-height: 126px !important;
  padding: 22px 18px !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96)) !important;
  border: 1px solid rgba(16,24,40,.10) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.70) inset, var(--pro-shadow-soft) !important;
}

.home-actions .words-main-btn:hover,
.home-actions .books-main-btn:hover,
.home-actions .articles-main-btn:hover,
.book-choice:hover,
.article-choice:hover,
.cat-card:hover,
a.cat-card:hover,
a.article-choice:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 18px 42px rgba(16,24,40,.14) !important;
}

.home-actions .words-main-btn::before,
.cat-card::before { background: linear-gradient(180deg, var(--pro-teal), #52b788) !important; }
.home-actions .books-main-btn::before,
.book-choice::before { background: linear-gradient(180deg, var(--pro-blue), var(--pro-violet)) !important; }
.home-actions .articles-main-btn::before,
.article-choice::before { background: linear-gradient(180deg, var(--pro-coral), var(--pro-amber)) !important; }

.words-btn-en,
.books-btn-en,
.articles-btn-en,
.cat-en {
  color: #101828 !important;
  font-weight: 900 !important;
}

.words-btn-al,
.books-btn-al,
.articles-btn-al,
.cat-count,
.article-topic,
.article-level-label {
  color: #667085 !important;
  font-weight: 760 !important;
}

.words-btn-ar,
.books-btn-ar,
.articles-btn-ar,
.cat-ar,
.book-choice .arabic,
.article-choice .arabic {
  color: #0f172a !important;
}

.home-search-box {
  max-width: 680px !important;
}

.search,
.group-search,
.home-search-input,
.field input,
.field select,
.field textarea {
  min-height: 54px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(16,24,40,.13) !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 1px 2px rgba(16,24,40,.05) !important;
}

.app,
.article-reader,
body.dark-mode .app,
body.dark-mode .article-reader {
  max-width: 1180px !important;
  padding: clamp(18px, 2.5vw, 30px) !important;
  border-radius: 28px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,252,255,.94)) !important;
  border: 1px solid rgba(16,24,40,.10) !important;
  box-shadow: var(--pro-shadow) !important;
}

.pro-study-toolbar {
  position: relative;
  top: auto;
  z-index: 90;
  margin: 0 auto 18px;
  padding: 10px;
  border: 1px solid rgba(16,24,40,.11);
  border-radius: 22px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 18px 44px rgba(16,24,40,.12);
  backdrop-filter: blur(18px);
}

.pro-toolbar-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pro-toolbar-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.pro-toolbar-title strong {
  color: #101828;
  font-size: .95rem;
  font-weight: 900;
  white-space: nowrap;
}

.pro-toolbar-title small {
  color: #667085;
  font-size: .78rem;
  font-weight: 780;
  white-space: nowrap;
}

.pro-toolbar-toggle,
.pro-toolbar-btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 14px;
  border: 1px solid rgba(16,24,40,.12);
  border-radius: 14px;
  background: #fff;
  color: #101828 !important;
  text-decoration: none;
  font-family: Outfit, "Noto Kufi Arabic", system-ui, sans-serif;
  font-size: .9rem;
  font-weight: 880;
  line-height: 1.15;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 8px 18px rgba(16,24,40,.06);
}

.pro-toolbar-toggle:hover,
.pro-toolbar-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(16,24,40,.12);
}

.pro-toolbar-body {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}

.pro-toolbar-modes,
.pro-toolbar-actions {
  display: grid;
  gap: 8px;
}

.pro-toolbar-modes {
  grid-template-columns: repeat(3, minmax(94px, 1fr));
}

.pro-toolbar-actions {
  grid-template-columns: repeat(3, minmax(78px, auto));
}

.pro-toolbar-btn.is-active {
  background: #101828 !important;
  border-color: #101828 !important;
  color: #fff !important;
}

.pro-toolbar-btn[data-pro-mode="list"].is-active {
  background: #087f73 !important;
  border-color: #087f73 !important;
}

.pro-toolbar-btn[data-pro-mode="cards"].is-active {
  background: #214a7a !important;
  border-color: #214a7a !important;
}

.pro-toolbar-btn[data-pro-mode="test"].is-active {
  background: #c25a4a !important;
  border-color: #c25a4a !important;
}

.pro-study-toolbar.is-collapsed {
  padding: 8px 10px;
}

.pro-study-toolbar.is-collapsed .pro-toolbar-body {
  display: none;
}

#app > .app-top,
.timer-wrap,
.timer,
#timerPauseBtn,
.floating-nav-buttons,
.floating-nav-buttons.show,
#floatingNavButtons,
#floatingHomeBtn,
#darkModeToggle {
  display: none !important;
}

.app-top {
  padding: 0 !important;
  border-bottom: 0 !important;
}

.top-nav {
  display: inline-flex !important;
  padding: 5px !important;
  background: #f2f4f7 !important;
  border-radius: 16px !important;
  border: 1px solid rgba(16,24,40,.08) !important;
}

.top-nav .btn {
  min-height: 42px !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

.top-nav .btn-light {
  background: transparent !important;
  border-color: transparent !important;
}

.top-nav .btn-dark {
  background: #101828 !important;
  border-color: #101828 !important;
}

.timer-wrap {
  padding: 5px !important;
  border-radius: 16px !important;
  background: #f2f4f7 !important;
  border: 1px solid rgba(16,24,40,.08) !important;
}

.timer {
  background: #fff !important;
  border-color: transparent !important;
}

button,
.btn,
.site-nav a,
.home-actions button,
.home-search-actions a {
  color: #101828 !important;
}

.btn-dark,
.btn-gold,
.site-nav a.is-active,
.site-nav a:hover {
  color: #fff !important;
}

.app header,
.panel,
.article-reader-header,
.article-text,
.article-translation-box,
.quiz-card {
  border-radius: 22px !important;
  border: 1px solid rgba(16,24,40,.10) !important;
  background: #fff !important;
  box-shadow: 0 10px 30px rgba(16,24,40,.07) !important;
}

.app header {
  padding: 20px !important;
}

.app header h1 {
  font-size: clamp(2rem, 4vw, 3.2rem) !important;
}

.category-grid,
.articles-grid,
.book-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
  gap: 16px !important;
}

.all-words-card {
  background:
    linear-gradient(135deg, #101828, #214a7a 48%, #087f73) !important;
  border-color: rgba(255,255,255,.22) !important;
}

.all-words-card .cat-ar,
.all-words-card .cat-en,
.all-words-card .cat-count {
  color: #fff !important;
}

.all-words-card::before {
  background: linear-gradient(180deg, #fff, rgba(255,255,255,.45)) !important;
}

.back-row {
  align-items: stretch !important;
}

.page-label,
.counter,
.article-page-indicator,
.timer {
  color: #075e55 !important;
  background: #eef9f7 !important;
  font-weight: 850 !important;
}

.list-item {
  border-left-color: var(--pro-blue) !important;
}

.list-en {
  font-size: 1.04rem !important;
}

.list-ar {
  font-size: clamp(1.55rem, 3vw, 2rem) !important;
}

.detail-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
}

.scene {
  max-width: 720px !important;
  min-height: 430px !important;
}

.card-face {
  border-radius: 24px !important;
}

.card-front {
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.16), transparent 26%),
    linear-gradient(135deg, #101828, #214a7a 52%, #087f73) !important;
}

.card-back {
  background:
    radial-gradient(circle at 100% 0%, rgba(8,127,115,.10), transparent 32%),
    #fff !important;
}

.option,
.match-tile {
  border-radius: 16px !important;
  border-left-color: var(--pro-coral) !important;
}

.option.correct,
.match-tile.matched {
  background: #ecfdf3 !important;
  border-color: #12b76a !important;
}

.option.wrong {
  background: #fff1f3 !important;
  border-color: #f04438 !important;
}

.article-reader {
  max-width: 1080px !important;
}

.article-nav-row {
  justify-content: flex-start !important;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(16,24,40,.08);
}

.article-reader-title {
  color: #101828 !important;
}

.article-reader-sub {
  color: var(--pro-teal) !important;
}

.article-text {
  padding: clamp(20px, 3vw, 34px) !important;
  font-size: clamp(1.42rem, 2.5vw, 1.85rem) !important;
  line-height: 2.35 !important;
}

.article-word {
  border-radius: 9px !important;
}

.article-translation-box.show {
  border-left: 6px solid var(--pro-teal) !important;
}

.dark-toggle-btn {
  right: 18px !important;
  bottom: 18px !important;
}

.floating-home-btn,
.floating-nav-buttons,
.scroll-top-btn {
  box-shadow: 0 12px 28px rgba(16,24,40,.20) !important;
}

.floating-home-btn {
  min-width: 58px !important;
}

.floating-nav-btn {
  min-width: 48px !important;
}

body.dark-mode {
  --pro-bg: #0b1020 !important;
  --pro-ink: #f8fafc !important;
  --pro-muted: #cbd5e1 !important;
}

body.dark-mode .home,
body.dark-mode .app,
body.dark-mode .article-reader,
body.dark-mode .pro-study-toolbar,
body.dark-mode .panel,
body.dark-mode .app header,
body.dark-mode .article-reader-header,
body.dark-mode .article-text,
body.dark-mode .article-translation-box,
body.dark-mode .quiz-card,
body.dark-mode .cat-card,
body.dark-mode .book-choice,
body.dark-mode .article-choice,
body.dark-mode .list-item,
body.dark-mode .option,
body.dark-mode .match-tile {
  background: #111827 !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #f8fafc !important;
}

body.dark-mode .home h1,
body.dark-mode .home h2,
body.dark-mode .home h3,
body.dark-mode .pro-toolbar-title strong,
body.dark-mode .pro-toolbar-title small,
body.dark-mode .cat-ar,
body.dark-mode .cat-en,
body.dark-mode .list-en,
body.dark-mode .list-ar,
body.dark-mode .article-reader-title {
  color: #f8fafc !important;
}

body.dark-mode .pro-toolbar-toggle,
body.dark-mode .pro-toolbar-btn,
body.dark-mode .btn-light,
body.dark-mode .site-nav a,
body.dark-mode button {
  background: #1f2937 !important;
  border-color: rgba(255,255,255,.14) !important;
  color: #f8fafc !important;
}

body.dark-mode .pro-toolbar-btn.is-active,
body.dark-mode .btn-dark,
body.dark-mode .btn-gold {
  color: #fff !important;
}

@media (max-width: 980px) {
  body,
  body.app-mode,
  body.dark-mode,
  body.dark-mode.app-mode {
    padding-top: 150px !important;
  }

  .main-study-actions {
    grid-template-columns: 1fr !important;
  }

  .site-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .site-nav {
    justify-content: flex-start;
    width: 100%;
  }

  .pro-study-toolbar {
    top: auto;
  }

  .pro-toolbar-body {
    grid-template-columns: 1fr;
  }

  .pro-toolbar-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #preHome::after,
  #home::after,
  #wordsMenu::after,
  #bookHome::after,
  #bookMenu::after,
  #articleHome::after {
    opacity: .16 !important;
    width: 100% !important;
  }
}

@media (max-width: 620px) {
  body,
  body.app-mode,
  body.dark-mode,
  body.dark-mode.app-mode {
    padding: 154px 10px 18px !important;
  }

  .site-header {
    inset: 8px 10px auto;
    gap: 10px;
    border-radius: 16px;
  }

  .site-brand {
    min-width: 0;
    width: 100%;
  }

  .site-nav {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 7px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .site-nav::-webkit-scrollbar {
    display: none;
  }

  .site-nav a {
    flex: 0 0 auto;
    min-width: 70px;
    padding-inline: 12px;
  }

  .pro-study-toolbar {
    top: auto;
    border-radius: 18px;
  }

  .pro-toolbar-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
  }

  .pro-toolbar-title small {
    display: none;
  }

  .pro-toolbar-toggle {
    min-width: 104px;
  }

  .pro-toolbar-modes,
  .pro-toolbar-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pro-toolbar-btn {
    padding-inline: 8px;
  }

  .top-nav,
  .timer-wrap {
    width: 100%;
  }

  .top-nav .btn {
    flex: 1 1 30%;
  }

  .timer-wrap {
    justify-content: space-between;
  }

  .scene {
    min-height: 460px !important;
  }
}

/* === Final integrated header/control pass === */
body,
body.app-mode,
body.dark-mode,
body.dark-mode.app-mode {
  padding-top: 158px !important;
}

body.header-collapsed,
body.header-collapsed.app-mode,
body.dark-mode.header-collapsed,
body.dark-mode.app-mode.header-collapsed {
  padding-top: 76px !important;
}

.site-header {
  align-items: stretch !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding: 18px 132px 20px 22px !important;
  border-radius: 26px !important;
  background: rgba(255,255,255,.93) !important;
  border: 1px solid rgba(16,24,40,.10) !important;
  max-height: 260px !important;
  overflow: hidden !important;
  clip-path: inset(0 0 0 0) !important;
  transform: none;
  transition: clip-path .38s cubic-bezier(.2,.8,.2,1), box-shadow .24s ease;
  will-change: clip-path;
}

body.header-collapsed .site-header,
body.dark-mode.header-collapsed .site-header,
html body.header-collapsed .site-header,
html body.dark-mode.header-collapsed .site-header {
  max-height: 0 !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-width: 0 !important;
  box-shadow: none !important;
  clip-path: inset(0 0 100% 0) !important;
  transform: none !important;
  overflow: hidden !important;
  pointer-events: none !important;
  visibility: visible !important;
}

.site-header.is-collapsed {
  max-height: 0 !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-width: 0 !important;
  box-shadow: none !important;
  clip-path: inset(0 0 100% 0) !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.site-header-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-header-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  max-height: 190px;
  overflow: hidden;
  transition: max-height .28s ease, opacity .22s ease, transform .22s ease;
}

.site-header.is-collapsed .site-header-panel {
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}

.site-brand {
  min-width: 0 !important;
}

.site-brand-mark {
  width: 54px !important;
  height: 54px !important;
  border-radius: 18px !important;
}

.site-brand strong {
  color: #0b1024 !important;
  font-size: clamp(1.25rem, 2.4vw, 2rem) !important;
  line-height: 1 !important;
}

.site-brand small {
  color: #697386 !important;
  font-size: clamp(.9rem, 1.6vw, 1.18rem) !important;
}

.site-nav {
  justify-content: flex-start !important;
  gap: 12px !important;
}

.site-nav a,
.site-tool-btn {
  min-height: 52px !important;
  padding: 13px 20px !important;
  border-radius: 999px !important;
  color: #0b1024 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  font-size: clamp(.98rem, 1.5vw, 1.24rem) !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}

.site-nav a:hover,
.site-nav a.is-active,
.site-tool-btn:hover {
  background: #0b1024 !important;
  border-color: #0b1024 !important;
  color: #fff !important;
  box-shadow: 0 14px 32px rgba(11,16,36,.18) !important;
}

.site-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}

.site-header-toggle {
  position: fixed !important;
  top: 28px !important;
  right: 40px !important;
  z-index: 10002 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  min-width: 92px !important;
  min-height: 44px !important;
  padding: 0 16px !important;
  border: 1px solid rgba(16,24,40,.12) !important;
  border-radius: 999px !important;
  background: #0b1024 !important;
  color: #fff !important;
  box-shadow: 0 16px 34px rgba(11,16,36,.18) !important;
  font-family: Outfit, system-ui, sans-serif !important;
  font-size: .94rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: top .32s ease, left .32s ease, right .32s ease, transform .32s ease, background .2s ease, color .2s ease, box-shadow .2s ease !important;
}

.site-header-toggle::after {
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  border-right: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;
  transform: rotate(45deg) translateY(-1px) !important;
}

.site-header-toggle[aria-expanded="true"]::after {
  transform: rotate(225deg) translateY(-1px) !important;
}

.site-header-toggle:hover {
  background: #087f73 !important;
  border-color: #087f73 !important;
  transform: translateY(-1px) !important;
}

body.header-collapsed .site-header-toggle {
  top: 10px !important;
  left: 50% !important;
  right: auto !important;
  min-width: 106px !important;
  transform: translateX(-50%) !important;
  box-shadow: 0 14px 34px rgba(11,16,36,.24) !important;
}

body.header-collapsed .site-header-toggle:hover {
  transform: translateX(-50%) translateY(1px) !important;
}

.pro-study-toolbar {
  display: none !important;
}

#preHome {
  display: none !important;
}

.site-app {
  transition: opacity .24s ease, transform .24s ease;
}

body.route-transitioning .site-app {
  opacity: .42;
  transform: translateY(8px);
}

#home,
#bookHome,
#bookMenu,
#articleHome,
#articleReader,
#app,
.section.active {
  animation: proPageIn .28s ease both;
}

@keyframes proPageIn {
  from { opacity: .35; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.all-words-card,
.all-words-card * {
  color: #fff !important;
  text-shadow: 0 1px 10px rgba(0,0,0,.25) !important;
}

.all-words-card .cat-count {
  color: rgba(255,255,255,.92) !important;
}

.site-app a,
.article-reader a,
.article-choice,
.article-word,
#articleDifficultyTabs a {
  text-decoration: none !important;
}

#articleDifficultyTabs,
.article-difficulty-tabs {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 920px !important;
  margin: 0 auto 20px !important;
  align-items: stretch !important;
}

#articleDifficultyTabs .btn,
.article-difficulty-tabs .btn {
  display: flex !important;
  min-width: 0 !important;
  min-height: 74px !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 14px 12px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(16,24,40,.11) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,250,252,.96)) !important;
  color: #0b1024 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: normal !important;
  line-height: 1.16 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.75) inset, 0 12px 28px rgba(16,24,40,.08) !important;
}

#articleHome[data-article-view="gateway"] .articles-grid {
  display: none !important;
}

#articleHome[data-article-view="gateway"] #articleDifficultyTabs {
  max-width: 1080px !important;
  margin-top: 10px !important;
}

#articleHome[data-article-view="level"] #articleDifficultyTabs {
  grid-template-columns: minmax(220px, 420px) !important;
  justify-content: center !important;
  max-width: 460px !important;
}

.article-level-card,
.article-choice {
  --level-color: #087f73;
  --level-color-2: #0b1024;
  --level-soft: rgba(8,127,115,.10);
  --level-line: rgba(8,127,115,.30);
}

.article-level-easy {
  --level-color: #087f73;
  --level-color-2: #0f766e;
  --level-soft: rgba(8,127,115,.11);
  --level-line: rgba(8,127,115,.34);
}

.article-level-medium {
  --level-color: #2563eb;
  --level-color-2: #0f766e;
  --level-soft: rgba(37,99,235,.10);
  --level-line: rgba(37,99,235,.30);
}

.article-level-hard {
  --level-color: #c45b45;
  --level-color-2: #a33f2f;
  --level-soft: rgba(196,91,69,.12);
  --level-line: rgba(196,91,69,.32);
}

.article-level-super {
  --level-color: #0b1024;
  --level-color-2: #6d5dfc;
  --level-soft: rgba(11,16,36,.09);
  --level-line: rgba(11,16,36,.28);
}

#articleDifficultyTabs .article-level-card,
.article-difficulty-tabs .article-level-card {
  border-color: var(--level-line) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,250,252,.96)),
    linear-gradient(135deg, var(--level-soft), transparent) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.58), 0 12px 28px rgba(16,24,40,.08) !important;
  position: relative !important;
  overflow: hidden !important;
}

#articleDifficultyTabs .article-level-card::before,
.article-difficulty-tabs .article-level-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 7px !important;
  border-radius: inherit !important;
  background: linear-gradient(180deg, var(--level-color), var(--level-color-2)) !important;
}

#articleDifficultyTabs .article-level-card .arabic,
.article-difficulty-tabs .article-level-card .arabic {
  color: var(--level-color) !important;
}

#articleDifficultyTabs .article-level-card.active,
#articleDifficultyTabs .article-level-card.btn-gold,
.article-difficulty-tabs .article-level-card.active,
.article-difficulty-tabs .article-level-card.btn-gold {
  background: linear-gradient(135deg, var(--level-color), var(--level-color-2)) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 18px 42px rgba(16,24,40,.18) !important;
}

#articleDifficultyTabs .article-level-card.active::before,
#articleDifficultyTabs .article-level-card.btn-gold::before,
.article-difficulty-tabs .article-level-card.active::before,
.article-difficulty-tabs .article-level-card.btn-gold::before {
  background: rgba(255,255,255,.92) !important;
}

.articles-grid .article-choice {
  border-color: var(--level-line) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,250,252,.96)),
    linear-gradient(135deg, var(--level-soft), transparent) !important;
}

.articles-grid .article-choice::before {
  background: linear-gradient(180deg, var(--level-color), var(--level-color-2)) !important;
}

.articles-grid .article-choice .article-level-label {
  color: var(--level-color) !important;
}

#articleDifficultyTabs .btn span,
.article-difficulty-tabs .btn span {
  display: block !important;
  width: 100% !important;
  overflow-wrap: anywhere !important;
  color: inherit !important;
}

#articleDifficultyTabs .btn .arabic,
.article-difficulty-tabs .btn .arabic {
  color: #087f73 !important;
  font-family: Amiri, serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
}

#articleDifficultyTabs .btn:hover,
.article-difficulty-tabs .btn:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(8,127,115,.34) !important;
  box-shadow: 0 18px 38px rgba(16,24,40,.13) !important;
}

#articleDifficultyTabs .btn.active,
#articleDifficultyTabs .btn.btn-gold,
.article-difficulty-tabs .btn.active,
.article-difficulty-tabs .btn.btn-gold {
  background: linear-gradient(135deg, #0b1024, #087f73) !important;
  border-color: #0b1024 !important;
  color: #fff !important;
}

#articleDifficultyTabs .btn.active .arabic,
#articleDifficultyTabs .btn.btn-gold .arabic,
.article-difficulty-tabs .btn.active .arabic,
.article-difficulty-tabs .btn.btn-gold .arabic {
  color: #fff !important;
}

.article-text a,
.article-text span,
.article-word {
  border-bottom: 0 !important;
  text-decoration: none !important;
}

.article-word {
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease !important;
}

.article-word:hover {
  background: rgba(8,127,115,.13) !important;
  box-shadow: 0 0 0 1px rgba(8,127,115,.18) inset !important;
}

.article-word.active {
  background: rgba(196,91,69,.17) !important;
  box-shadow: 0 0 0 1px rgba(196,91,69,.26) inset !important;
}

.meaning-list {
  display: grid !important;
  gap: 8px !important;
  margin-top: 8px !important;
}

.meaning-row {
  display: grid !important;
  grid-template-columns: minmax(116px, auto) minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 10px !important;
  padding: 9px 10px !important;
  border: 1px solid rgba(16,24,40,.08) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.78) !important;
  color: #0b1024 !important;
}

.meaning-row.is-primary {
  background: rgba(8,127,115,.08) !important;
  border-color: rgba(8,127,115,.20) !important;
}

.meaning-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 24px !important;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  background: #eef4ff !important;
  color: #0b1024 !important;
  font-size: .72rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.meaning-row.is-primary .meaning-badge {
  background: #0b1024 !important;
  color: #fff !important;
}

.meaning-value {
  min-width: 0 !important;
  color: #0b1024 !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere !important;
}

.detail-box.meaning-box,
.trans > .meaning-box {
  min-width: 0 !important;
}

.detail-box.meaning-box {
  grid-column: span 2 !important;
}

.trans.meanings-trans {
  align-items: stretch !important;
}

.meaning-chip {
  display: inline-flex !important;
  width: fit-content !important;
  margin-top: 6px !important;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  background: rgba(8,127,115,.10) !important;
  color: #075e55 !important;
  font-size: .78rem !important;
  font-weight: 900 !important;
}

.derived-source {
  display: grid !important;
  gap: 4px !important;
}

.scroll-top-btn {
  display: none !important;
  position: fixed !important;
  right: 22px !important;
  bottom: 22px !important;
  z-index: 10001 !important;
  min-width: 58px !important;
  min-height: 48px !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: #0b1024 !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  font-weight: 900 !important;
}

.scroll-top-btn.show {
  display: inline-flex !important;
}

body.dark-mode,
body.dark-mode.app-mode,
html body.dark-mode,
html body.dark-mode.app-mode {
  background-color: #071024 !important;
  background-image:
    radial-gradient(circle at 16% -8%, rgba(8,127,115,.24), transparent 36%),
    radial-gradient(circle at 86% -10%, rgba(35,76,132,.28), transparent 32%),
    linear-gradient(135deg, #071024, #0b1730 52%, #0f1d38) !important;
  color: #eef4ff !important;
}

body.dark-mode .site-header {
  background: rgba(8,15,34,.94) !important;
  border-color: rgba(160,178,214,.18) !important;
  box-shadow: 0 18px 52px rgba(0,0,0,.38) !important;
}

body.dark-mode .site-brand strong,
body.dark-mode .site-brand small {
  color: #eef4ff !important;
}

body.dark-mode .site-nav a,
body.dark-mode .site-tool-btn {
  background: transparent !important;
  border-color: transparent !important;
  color: #d9e6ff !important;
}

body.dark-mode .site-nav a:hover,
body.dark-mode .site-nav a.is-active,
body.dark-mode .site-tool-btn:hover {
  background: #eef4ff !important;
  border-color: #eef4ff !important;
  color: #071024 !important;
}

body.dark-mode .site-header-toggle {
  background: #eef4ff !important;
  border-color: #eef4ff !important;
  color: #071024 !important;
  box-shadow: 0 16px 38px rgba(0,0,0,.38) !important;
}

body.dark-mode .site-header-toggle:hover {
  background: #9fc7ff !important;
  border-color: #9fc7ff !important;
  color: #071024 !important;
}

body.dark-mode .home,
body.dark-mode .app,
body.dark-mode .article-reader,
body.dark-mode .panel,
body.dark-mode .app header,
body.dark-mode .article-reader-header,
body.dark-mode .article-text,
body.dark-mode .article-translation-box,
body.dark-mode .quiz-card,
body.dark-mode .cat-card,
body.dark-mode .book-choice,
body.dark-mode .article-choice,
body.dark-mode .list-item,
body.dark-mode .option,
body.dark-mode .match-tile {
  background: #0d1933 !important;
  border-color: rgba(160,178,214,.16) !important;
  color: #eef4ff !important;
}

body.dark-mode .btn-light,
body.dark-mode button {
  background: #132242 !important;
  border-color: rgba(160,178,214,.18) !important;
  color: #eef4ff !important;
}

body.dark-mode .btn-dark,
body.dark-mode .btn-gold {
  background: #eef4ff !important;
  border-color: #eef4ff !important;
  color: #071024 !important;
}

body.dark-mode .scroll-top-btn {
  background: #eef4ff !important;
  color: #071024 !important;
}

body.dark-mode #articleDifficultyTabs .btn,
body.dark-mode .article-difficulty-tabs .btn {
  background: #132242 !important;
  border-color: rgba(160,178,214,.18) !important;
  color: #eef4ff !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.24) !important;
}

body.dark-mode #articleDifficultyTabs .btn .arabic,
body.dark-mode .article-difficulty-tabs .btn .arabic {
  color: #9fc7ff !important;
}

body.dark-mode #articleDifficultyTabs .btn.active,
body.dark-mode #articleDifficultyTabs .btn.btn-gold,
body.dark-mode .article-difficulty-tabs .btn.active,
body.dark-mode .article-difficulty-tabs .btn.btn-gold {
  background: #eef4ff !important;
  border-color: #eef4ff !important;
  color: #071024 !important;
}

body.dark-mode #articleDifficultyTabs .btn.active .arabic,
body.dark-mode #articleDifficultyTabs .btn.btn-gold .arabic,
body.dark-mode .article-difficulty-tabs .btn.active .arabic,
body.dark-mode .article-difficulty-tabs .btn.btn-gold .arabic {
  color: #071024 !important;
}

body.dark-mode #articleDifficultyTabs .article-level-card,
body.dark-mode .article-difficulty-tabs .article-level-card,
body.dark-mode .articles-grid .article-choice {
  background:
    linear-gradient(180deg, rgba(19,34,66,.98), rgba(13,25,51,.98)),
    linear-gradient(135deg, var(--level-soft), transparent) !important;
  border-color: var(--level-line) !important;
  color: #eef4ff !important;
}

body.dark-mode #articleDifficultyTabs .article-level-card .arabic,
body.dark-mode .article-difficulty-tabs .article-level-card .arabic,
body.dark-mode .articles-grid .article-choice .article-level-label {
  color: #9fc7ff !important;
}

body.dark-mode #articleDifficultyTabs .article-level-card.active,
body.dark-mode #articleDifficultyTabs .article-level-card.btn-gold,
body.dark-mode .article-difficulty-tabs .article-level-card.active,
body.dark-mode .article-difficulty-tabs .article-level-card.btn-gold {
  background: linear-gradient(135deg, var(--level-color), var(--level-color-2)) !important;
  border-color: transparent !important;
  color: #fff !important;
}

body.dark-mode #articleDifficultyTabs .article-level-card.active .arabic,
body.dark-mode #articleDifficultyTabs .article-level-card.btn-gold .arabic,
body.dark-mode .article-difficulty-tabs .article-level-card.active .arabic,
body.dark-mode .article-difficulty-tabs .article-level-card.btn-gold .arabic {
  color: #fff !important;
}

body.dark-mode .article-word:hover {
  background: rgba(159,199,255,.14) !important;
  box-shadow: 0 0 0 1px rgba(159,199,255,.22) inset !important;
}

body.dark-mode .article-word.active {
  background: rgba(255,255,255,.14) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.22) inset !important;
}

body.dark-mode .meaning-row {
  background: rgba(19,34,66,.92) !important;
  border-color: rgba(160,178,214,.16) !important;
  color: #eef4ff !important;
}

body.dark-mode .meaning-row.is-primary {
  background: rgba(159,199,255,.10) !important;
  border-color: rgba(159,199,255,.24) !important;
}

body.dark-mode .meaning-badge {
  background: #203456 !important;
  color: #eef4ff !important;
}

body.dark-mode .meaning-row.is-primary .meaning-badge {
  background: #eef4ff !important;
  color: #071024 !important;
}

body.dark-mode .meaning-value {
  color: #eef4ff !important;
}

body.dark-mode .meaning-chip {
  background: rgba(159,199,255,.12) !important;
  color: #9fc7ff !important;
}

/* === Final contrast guarantee for every study box === */
.cat-card:not(.all-words-card),
.book-subcategory-card,
.book-choice,
.article-choice,
.list-item,
.detail-box,
.trans > div,
.verb-cell,
.quiz-card,
.option,
.match-tile,
.article-text,
.article-translation-box,
.panel {
  color: #0b1024 !important;
}

.cat-card:not(.all-words-card) .cat-ar,
.cat-card:not(.all-words-card) .cat-en,
.book-subcategory-card .cat-ar,
.book-subcategory-card .cat-en,
.book-choice .arabic,
.article-choice .arabic,
.list-ar,
.list-en,
.word-en,
.detail-box b,
.detail-box .arabic,
.verb-cell .arabic,
.option,
.match-tile {
  color: #0b1024 !important;
}

.cat-card:not(.all-words-card) .cat-count,
.book-subcategory-card .cat-count,
.list-al,
.word-al,
.article-topic,
.counter,
.page-label {
  color: #475467 !important;
}

.article-choice .article-level-label {
  color: var(--level-color) !important;
}

.card-back,
.card-back .trans,
.card-back .trans > div,
.card-back .word-en,
.card-back .meaning-value {
  color: #0b1024 !important;
}

.all-words-card,
.all-words-card .cat-ar,
.all-words-card .cat-en,
.all-words-card .cat-count,
#articleDifficultyTabs .article-level-card.active,
#articleDifficultyTabs .article-level-card.active span,
.article-difficulty-tabs .article-level-card.active,
.article-difficulty-tabs .article-level-card.active span {
  color: #fff !important;
}

body.dark-mode .cat-card:not(.all-words-card),
body.dark-mode .book-subcategory-card,
body.dark-mode .book-choice,
body.dark-mode .article-choice,
body.dark-mode .list-item,
body.dark-mode .detail-box,
body.dark-mode .trans > div,
body.dark-mode .verb-cell,
body.dark-mode .quiz-card,
body.dark-mode .option,
body.dark-mode .match-tile,
body.dark-mode .article-text,
body.dark-mode .article-translation-box,
body.dark-mode .panel {
  background: #0d1933 !important;
  border-color: rgba(160,178,214,.18) !important;
  color: #eef4ff !important;
}

body.dark-mode .cat-card:not(.all-words-card) .cat-ar,
body.dark-mode .cat-card:not(.all-words-card) .cat-en,
body.dark-mode .book-subcategory-card .cat-ar,
body.dark-mode .book-subcategory-card .cat-en,
body.dark-mode .book-choice .arabic,
body.dark-mode .article-choice .arabic,
body.dark-mode .list-ar,
body.dark-mode .list-en,
body.dark-mode .word-en,
body.dark-mode .detail-box b,
body.dark-mode .detail-box .arabic,
body.dark-mode .verb-cell .arabic,
body.dark-mode .option,
body.dark-mode .match-tile {
  color: #f8fbff !important;
}

body.dark-mode .cat-card:not(.all-words-card) .cat-count,
body.dark-mode .book-subcategory-card .cat-count,
body.dark-mode .list-al,
body.dark-mode .word-al,
body.dark-mode .article-topic {
  color: #b9c8e8 !important;
}

body.dark-mode .counter,
body.dark-mode .page-label,
body.dark-mode .article-page-indicator,
body.dark-mode .timer {
  background: #132242 !important;
  border-color: rgba(160,178,214,.18) !important;
  color: #eef4ff !important;
}

body.dark-mode .card-back,
body.dark-mode .card-back .trans,
body.dark-mode .card-back .trans > div,
body.dark-mode .card-back .word-en,
body.dark-mode .card-back .meaning-value {
  background: #0d1933 !important;
  color: #eef4ff !important;
}

body.dark-mode .all-words-card,
body.dark-mode .all-words-card .cat-ar,
body.dark-mode .all-words-card .cat-en,
body.dark-mode .all-words-card .cat-count,
body.dark-mode #articleDifficultyTabs .article-level-card.active,
body.dark-mode #articleDifficultyTabs .article-level-card.active span,
body.dark-mode .article-difficulty-tabs .article-level-card.active,
body.dark-mode .article-difficulty-tabs .article-level-card.active span {
  color: #fff !important;
}

/* === Final flashcard repair === */
.scene {
  width: min(100%, 760px) !important;
  height: clamp(460px, 58vh, 560px) !important;
  min-height: 460px !important;
  margin: 18px auto 22px !important;
  perspective: 1400px !important;
  filter: drop-shadow(0 22px 34px rgba(16,24,40,.14)) !important;
}

.card {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  position: relative !important;
  transform-style: preserve-3d !important;
  border-radius: 26px !important;
}

.card-face {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
  padding: 64px 34px 54px !important;
  border-radius: 26px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

.card-front {
  background:
    radial-gradient(circle at 18% 16%, rgba(255,255,255,.16), transparent 28%),
    linear-gradient(135deg, #0b1024, #214a7a 54%, #087f73) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: #fff !important;
}

.card-front.done {
  background:
    radial-gradient(circle at 18% 16%, rgba(255,255,255,.14), transparent 28%),
    linear-gradient(135deg, #075e55, #087f73 58%, #2f7a55) !important;
}

.card-back {
  background:
    radial-gradient(circle at 100% 0%, rgba(8,127,115,.08), transparent 34%),
    #ffffff !important;
  border: 1px solid rgba(16,24,40,.12) !important;
  color: #0b1024 !important;
  transform: rotateY(180deg) !important;
}

.card-front .badge,
.card-front .hint,
.card-front .big-ar,
.card-front .big-tr,
.card-front .answer-ar,
.card-front .translation-prompt,
.card-front .translation-prompt span,
.card-front .arabic,
.card-front .mini-label,
.card-front .verb-cell .arabic,
.card-front .meaning-chip {
  color: #fff !important;
}

.card-front .translation-prompt span,
.card-front .mini-label,
.card-front .hint,
.card-front .badge {
  opacity: .88 !important;
}

.card-front .verb-cell,
.card-front .trans > div,
.card-front .meaning-row,
.card-front .meaning-chip {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.22) !important;
  color: #fff !important;
}

.card-back .badge,
.card-back .hint {
  color: #667085 !important;
}

.card-back .answer-ar,
.card-back .big-ar,
.card-back .big-tr,
.card-back .arabic,
.card-back .verb-cell .arabic,
.card-back .word-en,
.card-back .meaning-value {
  color: #0b1024 !important;
}

.card-back .word-al,
.card-back .translation-prompt span {
  color: #c45b45 !important;
}

.big-ar,
.answer-ar {
  max-width: 100% !important;
  margin: 0 !important;
  font-size: clamp(2.4rem, 7vw, 4.1rem) !important;
  line-height: 1.25 !important;
  text-align: center !important;
  overflow-wrap: anywhere !important;
}

.big-tr,
.translation-prompt {
  max-width: 100% !important;
  margin: 0 !important;
  font-size: clamp(1.45rem, 3.2vw, 2.25rem) !important;
  line-height: 1.35 !important;
  text-align: center !important;
  overflow-wrap: anywhere !important;
}

.translation-prompt span {
  display: block !important;
  margin-top: 8px !important;
  font-size: clamp(1.05rem, 2.4vw, 1.42rem) !important;
  line-height: 1.35 !important;
}

.card-face .verb-grid {
  width: 100% !important;
  max-width: 640px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 4px auto 0 !important;
}

.card-face .verb-cell {
  min-width: 0 !important;
  min-height: 86px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 12px !important;
  border-radius: 16px !important;
  text-align: center !important;
}

.card-face .verb-cell .arabic {
  font-size: clamp(1.22rem, 3vw, 1.8rem) !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere !important;
}

.card-face .trans {
  width: 100% !important;
  max-width: 680px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 auto !important;
}

.card-face .trans > div {
  min-width: 0 !important;
  width: 100% !important;
  padding: 13px 14px !important;
  border-radius: 16px !important;
  text-align: center !important;
}

.card-face .meaning-list {
  gap: 6px !important;
  margin-top: 8px !important;
}

.card-face .meaning-row {
  grid-template-columns: minmax(94px, auto) minmax(0, 1fr) !important;
  padding: 7px 8px !important;
}

.card-face .meaning-badge {
  font-size: .66rem !important;
  padding: 4px 7px !important;
}

.card-face .meaning-value,
.card-face .word-en,
.card-face .word-al {
  font-size: .96rem !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere !important;
}

.card-face .badge {
  top: 18px !important;
  left: 20px !important;
  right: auto !important;
  z-index: 3 !important;
  font-size: .78rem !important;
}

.card-face .hint {
  left: 24px !important;
  right: 24px !important;
  bottom: 18px !important;
  z-index: 3 !important;
  text-align: center !important;
  line-height: 1.25 !important;
}

body.dark-mode .card-front {
  background:
    radial-gradient(circle at 18% 16%, rgba(255,255,255,.12), transparent 28%),
    linear-gradient(135deg, #071024, #132242 56%, #087f73) !important;
  border-color: rgba(160,178,214,.20) !important;
  color: #fff !important;
}

body.dark-mode .card-back {
  background:
    radial-gradient(circle at 100% 0%, rgba(159,199,255,.08), transparent 34%),
    #0d1933 !important;
  border-color: rgba(160,178,214,.18) !important;
  color: #eef4ff !important;
}

body.dark-mode .card-front .verb-cell,
body.dark-mode .card-front .trans > div,
body.dark-mode .card-front .meaning-row,
body.dark-mode .card-front .meaning-chip {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.24) !important;
  color: #fff !important;
}

body.dark-mode .card-front .badge,
body.dark-mode .card-front .hint,
body.dark-mode .card-front .big-ar,
body.dark-mode .card-front .big-tr,
body.dark-mode .card-front .answer-ar,
body.dark-mode .card-front .translation-prompt,
body.dark-mode .card-front .translation-prompt span,
body.dark-mode .card-front .arabic,
body.dark-mode .card-front .mini-label,
body.dark-mode .card-front .verb-cell .arabic,
body.dark-mode .card-front .meaning-chip {
  color: #fff !important;
}

body.dark-mode .card-back .verb-cell,
body.dark-mode .card-back .trans > div,
body.dark-mode .card-back .meaning-row {
  background: rgba(19,34,66,.96) !important;
  border-color: rgba(160,178,214,.18) !important;
  color: #eef4ff !important;
}

body.dark-mode .card-back .answer-ar,
body.dark-mode .card-back .big-ar,
body.dark-mode .card-back .big-tr,
body.dark-mode .card-back .arabic,
body.dark-mode .card-back .verb-cell .arabic,
body.dark-mode .card-back .word-en,
body.dark-mode .card-back .meaning-value {
  color: #f8fbff !important;
}

body.dark-mode .card-back .word-al,
body.dark-mode .card-back .translation-prompt span,
body.dark-mode .card-back .hint,
body.dark-mode .card-back .badge {
  color: #b9c8e8 !important;
}

@media (max-width: 980px) {
  body,
  body.app-mode,
  body.dark-mode,
  body.dark-mode.app-mode {
    padding-top: 180px !important;
  }

  body.header-collapsed,
  body.header-collapsed.app-mode,
  body.dark-mode.header-collapsed,
  body.dark-mode.app-mode.header-collapsed {
    padding-top: 76px !important;
  }

  .site-header {
    padding-right: 122px !important;
  }

  .site-header-toggle {
    top: 24px !important;
    right: 30px !important;
  }

  .site-header-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .site-tools {
    justify-content: flex-start;
    margin-left: 0;
  }

  #articleDifficultyTabs,
  .article-difficulty-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  body,
  body.app-mode,
  body.dark-mode,
  body.dark-mode.app-mode {
    padding: 244px 10px 18px !important;
  }

  body.header-collapsed,
  body.header-collapsed.app-mode,
  body.dark-mode.header-collapsed,
  body.dark-mode.app-mode.header-collapsed {
    padding: 70px 10px 18px !important;
  }

  .site-header {
    padding: 56px 14px 14px !important;
    border-radius: 20px !important;
  }

  .site-header-toggle {
    top: 22px !important;
    left: 50% !important;
    right: auto !important;
    min-width: 88px !important;
    min-height: 38px !important;
    padding: 0 14px !important;
    transform: translateX(-50%) !important;
  }

  .site-header-toggle:hover {
    transform: translateX(-50%) translateY(-1px) !important;
  }

  body.header-collapsed .site-header-toggle {
    top: 8px !important;
    transform: translateX(-50%) !important;
  }

  body.header-collapsed .site-header-toggle:hover {
    transform: translateX(-50%) translateY(1px) !important;
  }

  .site-brand-mark {
    width: 48px !important;
    height: 48px !important;
  }

  .site-nav,
  .site-tools {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    width: 100%;
    scrollbar-width: none;
  }

  .site-nav::-webkit-scrollbar,
  .site-tools::-webkit-scrollbar {
    display: none;
  }

  .site-nav a,
  .site-tool-btn {
    flex: 0 0 auto;
    min-width: 74px;
    min-height: 46px !important;
    padding: 11px 14px !important;
  }

  #articleDifficultyTabs,
  .article-difficulty-tabs {
    gap: 9px !important;
  }

  .meaning-row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  .detail-box.meaning-box {
    grid-column: span 1 !important;
  }

  .scene {
    height: clamp(560px, 76vh, 680px) !important;
    min-height: 560px !important;
  }

  .card-face {
    padding: 56px 18px 50px !important;
    justify-content: center !important;
  }

  .card-face .verb-grid,
  .card-face .trans {
    grid-template-columns: 1fr !important;
  }

  .card-face .verb-cell {
    min-height: 74px !important;
  }

  .card-face .meaning-row {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 420px) {
  #articleDifficultyTabs,
  .article-difficulty-tabs {
    grid-template-columns: 1fr !important;
  }
}