/* ─── Design tokens ─── */
:root, [data-theme="light"] {
  --color-bg:              #fafafa;
  --color-surface:         #ffffff;
  --color-surface-2:       #ffffff;
  --color-surface-offset:  #f3f3f3;
  --color-divider:         #dcd9d5;
  --color-border:          #d4d1ca;
  --color-text:            #28251d;
  --color-text-muted:      #6b6a65;
  --color-text-faint:      #bab9b4;
  --color-text-inverse:    #f9f8f4;
  --color-primary:         #01696f;
  --color-primary-hover:   #0c4e54;
  --color-primary-hl:      #cedcd8;
  --color-gold:            #b07a00;
  --color-gold-hl:         #f0e4b8;
  --color-error:           #a12c7b;
  --color-error-hl:        #f3dced;
  --color-success:         #437a22;
  --color-success-hl:      #d4dfcc;
  --color-admin:           #7a39bb;
  --color-admin-hover:     #5f2699;
  --color-admin-hl:        #ede4f8;
  --radius-sm:  .375rem;
  --radius-md:  .5rem;
  --radius-lg:  .75rem;
  --radius-xl:  1rem;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 2px oklch(0.2 0.01 80/.06);
  --shadow-md: 0 4px 12px oklch(0.2 0.01 80/.08);
  --shadow-lg: 0 12px 32px oklch(0.2 0.01 80/.12);
  --t: 180ms cubic-bezier(.16,1,.3,1);
  --font-body:    'DM Sans', sans-serif;
  --font-arabic:  'Noto Naskh Arabic', 'Arial', sans-serif;
  --text-xs: clamp(.75rem,.7rem + .25vw,.875rem);
  --text-sm: clamp(.875rem,.8rem + .35vw,1rem);
  --text-base: clamp(1rem,.95rem + .25vw,1.125rem);
  --text-lg: clamp(1.125rem,1rem + .75vw,1.5rem);
  --text-xl: clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem;
  --space-12:3rem; --space-16:4rem;
}
[data-theme="dark"] {
  --color-bg:              #171614;
  --color-surface:         #1c1b19;
  --color-surface-2:       #201f1d;
  --color-surface-offset:  #252420;
  --color-divider:         #262523;
  --color-border:          #393836;
  --color-text:            #cdccca;
  --color-text-muted:      #797876;
  --color-text-faint:      #5a5957;
  --color-text-inverse:    #2b2a28;
  --color-primary:         #4f98a3;
  --color-primary-hover:   #227f8b;
  --color-primary-hl:      #1e3537;
  --color-gold:            #e8af34;
  --color-gold-hl:         #3a3018;
  --color-error:           #d163a7;
  --color-error-hl:        #3d1d33;
  --color-success:         #6daa45;
  --color-success-hl:      #1e2e16;
  --color-admin:           #a86fdf;
  --color-admin-hover:     #9250d0;
  --color-admin-hl:        #2e1f46;
  --shadow-sm: 0 1px 2px oklch(0 0 0/.2);
  --shadow-md: 0 4px 12px oklch(0 0 0/.3);
  --shadow-lg: 0 12px 32px oklch(0 0 0/.4);
}

/* ─── Base ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;}
body{min-height:100dvh;font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);background:var(--color-bg);line-height:1.6;}
img,svg{display:block;max-width:100%;}
button{cursor:pointer;border:none;background:none;font:inherit;color:inherit;}
input,textarea{font:inherit;color:inherit;}
a,button,[role="button"],input,textarea,select{transition:color var(--t),background var(--t),border-color var(--t),box-shadow var(--t),opacity var(--t);}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm);}
::selection{background:oklch(from var(--color-primary) l c h/.2);}

/* ─── Hidden utility ─── */
.hidden { display: none !important; }

/* ─── Progress bar ─── */
#progress-bar{position:fixed;top:0;left:0;height:2px;background:var(--color-primary);width:0%;z-index:100;transition:width .1s linear;}

/* ─── Header ─── */
header{position:sticky;top:0;z-index:50;background:oklch(from var(--color-bg) l c h/.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--color-divider);}
.header-inner{max-width:800px;margin-inline:auto;padding:var(--space-2) var(--space-4);display:flex;align-items:center;gap:var(--space-2);}
.logo{display:flex;align-items:center;gap:var(--space-3);text-decoration:none;color:var(--color-text);}
.logo-mark{width:auto;height:26px;flex-shrink:0;color:var(--color-primary);}
.logo-text{font-size:var(--text-sm);font-weight:600;letter-spacing:-.01em;white-space:nowrap;}
.logo-ar{font-family:var(--font-arabic);font-size:var(--text-lg);line-height:1;color:var(--color-primary);}
.header-actions{display:flex;align-items:center;gap:var(--space-1);}
.icon-btn{width:36px;height:36px;min-width:44px;min-height:44px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:var(--color-text-muted);}
.icon-btn:hover{background:var(--color-surface-offset);color:var(--color-text);}
.icon-btn:active{background:var(--color-divider);}
.admin-badge{font-size:var(--text-xs);font-weight:600;padding:.15em .6em;border-radius:var(--radius-full);background:var(--color-admin-hl);color:var(--color-admin);letter-spacing:.04em;text-transform:uppercase;}

/* ─── Kebab menu ─── */
.kebab-menu{position:absolute;top:calc(100% + 4px);right:0;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);min-width:230px;z-index:200;overflow:hidden;}
.kebab-item{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--space-2) var(--space-4);font-size:var(--text-sm);color:var(--color-text);text-align:left;min-height:44px;gap:var(--space-3);}
.kebab-item:hover{background:var(--color-surface-offset);}
.kebab-logout{color:var(--color-error);}
.kebab-divider{height:1px;background:var(--color-divider);margin:var(--space-1) 0;}
.toggle-sm{position:relative;width:34px;height:18px;flex-shrink:0;}
.toggle-sm input{opacity:0;width:0;height:0;position:absolute;}
.toggle-sm .toggle-track{position:absolute;inset:0;background:var(--color-border);border-radius:var(--radius-full);cursor:pointer;transition:background var(--t);}
.toggle-sm input:checked + .toggle-track{background:var(--color-primary);}
.toggle-sm .toggle-thumb{position:absolute;top:1px;left:1px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform var(--t);box-shadow:0 1px 3px oklch(0 0 0/.2);}
.toggle-sm input:checked ~ .toggle-thumb{transform:translateX(16px);}

/* ─── Section switcher dropdown ─── */
.section-menu{position:absolute;top:100%;left:0;margin-top:var(--space-2);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);min-width:180px;z-index:60;max-height:60vh;overflow-y:auto;}
.section-menu-item{display:flex;align-items:center;gap:var(--space-2);width:100%;padding:var(--space-3) var(--space-4);font-size:var(--text-sm);font-weight:500;color:var(--color-text);text-align:left;min-height:44px;}
.section-menu-item:hover{background:var(--color-surface-offset);}
.section-menu-item.active{color:var(--color-primary);font-weight:600;}

/* ─── Search bar ─── */
.search-wrap{max-width:800px;margin-inline:auto;padding:var(--space-4) var(--space-4) var(--space-3);}
.search-field{position:relative;display:flex;align-items:center;gap:var(--space-2);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-2) var(--space-3);flex-wrap:wrap;}
.search-suggestions{position:absolute;top:100%;left:0;right:0;margin-top:var(--space-1);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);z-index:55;max-height:240px;overflow-y:auto;}
.search-suggestion{display:flex;align-items:center;justify-content:space-between;padding:var(--space-2) var(--space-3);font-size:var(--text-sm);cursor:pointer;min-height:40px;gap:var(--space-3);}
.search-suggestion:hover,.search-suggestion.active{background:var(--color-surface-offset);}
.search-suggestion-en{color:var(--color-text);}
.search-suggestion-ar{font-family:var(--font-arabic);color:var(--color-primary);direction:rtl;font-size:var(--text-base);}
.search-field svg{flex-shrink:0;color:var(--color-text-faint);}
.search-field input{flex:1;border:none;background:transparent;font-size:var(--text-sm);outline:none;color:var(--color-text);}
.search-field input::placeholder{color:var(--color-text-faint);}

/* ─── Word zoom overlay ─── */
.word-zoom{position:fixed;inset:0;z-index:250;display:flex;align-items:center;justify-content:center;padding:var(--space-4);background:oklch(from var(--color-bg) l c h/.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.word-zoom-card{position:relative;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-10) var(--space-8);width:100%;max-width:400px;text-align:center;box-shadow:var(--shadow-lg);}
.word-zoom-arabic{font-family:var(--font-arabic);font-size:clamp(2.5rem,8vw,4.5rem);font-weight:700;direction:rtl;color:var(--color-text);line-height:1.4;margin-bottom:var(--space-3);}
.word-zoom-translit{font-size:var(--text-base);color:var(--color-text-muted);font-style:italic;margin-bottom:var(--space-2);}
.word-zoom-english{font-size:var(--text-sm);color:var(--color-text-faint);margin-bottom:var(--space-4);}
.word-zoom-audio{width:56px;height:56px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;color:var(--color-primary);background:var(--color-primary-hl);margin:0 auto;}
.word-zoom-audio:hover{background:var(--color-primary);color:var(--color-text-inverse);}
.word-zoom-audio.playing{background:var(--color-primary);color:var(--color-text-inverse);}
.word-zoom-close{position:absolute;top:var(--space-3);right:var(--space-3);width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:var(--color-text-faint);border-radius:var(--radius-md);}
.word-zoom-close:hover{color:var(--color-text);background:var(--color-surface-offset);}
.conj-card{cursor:pointer;}

/* ─── Footer ─── */
.app-footer{max-width:800px;margin-inline:auto;padding:var(--space-8) var(--space-4) var(--space-4);display:flex;justify-content:space-between;align-items:center;font-size:var(--text-xs);color:var(--color-text-faint);flex-wrap:wrap;gap:var(--space-2);}
.footer-links{display:flex;gap:var(--space-3);}
.footer-links a,.footer-link{color:var(--color-text-faint);text-decoration:none;}
.footer-links a:hover,.footer-link:hover{color:var(--color-text-muted);}

/* ─── Active filter ─── */
.active-filter{max-width:800px;margin-inline:auto;padding:0 var(--space-4) var(--space-3);}
.filter-chip{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);background:var(--color-primary-hl);color:var(--color-primary);font-size:var(--text-xs);font-weight:600;cursor:pointer;min-height:32px;border:1px solid var(--color-primary);}
.filter-chip:hover{background:var(--color-primary);color:var(--color-text-inverse);}
.filter-chip svg{flex-shrink:0;}

/* ─── Stats strip ─── */
.stats{max-width:800px;margin-inline:auto;padding:0 var(--space-4) var(--space-3);font-size:var(--text-xs);color:var(--color-text-muted);display:flex;gap:var(--space-4);}
.stats b{color:var(--color-text);font-weight:600;}

/* ─── Main content ─── */
main{max-width:800px;margin-inline:auto;padding:0 var(--space-4) var(--space-16);}

/* ─── Verb section ─── */
.verb-section{margin-bottom:var(--space-8);}
.verb-header{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3);}
.verb-title-de{font-size:var(--text-lg);font-weight:700;letter-spacing:-.02em;}
.verb-title-ar{font-family:var(--font-arabic);font-size:var(--text-xl);font-weight:700;color:var(--color-primary);direction:rtl;}
.verb-tense-label{font-size:var(--text-xs);font-weight:600;padding:.2em .7em;border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.06em;}
.tense-present{background:var(--color-primary-hl);color:var(--color-primary);}
.tense-past{background:var(--color-gold-hl);color:var(--color-gold);}
.tense-plural{background:var(--color-admin-hl);color:var(--color-admin);}

/* ─── Play all button ─── */
.play-all-btn{display:inline-flex;align-items:center;justify-content:center;color:var(--color-primary);flex-shrink:0;padding:var(--space-1);opacity:.7;min-width:44px;min-height:44px;}
.play-all-btn:hover{opacity:1;}
.play-all-btn.playing{opacity:1;animation:pulse-play 1.2s ease-in-out infinite;}
.play-all-btn.paused{opacity:1;color:var(--color-gold);}
@keyframes pulse-play{0%,100%{opacity:1;}50%{opacity:.4;}}

/* ─── Conjugation cards ─── */
.conj-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);}
@media(min-width:601px){.conj-grid .conj-form-ar{font-size:var(--text-lg);}.conj-grid .conj-pronoun-ar{font-size:var(--text-base);}}
@media(max-width:600px){.conj-grid{grid-template-columns:1fr;gap:var(--space-1);}}
.conj-card{background:var(--color-surface);border:1px solid oklch(from var(--color-text) l c h/.08);border-radius:var(--radius-lg);padding:var(--space-2) var(--space-3);display:flex;align-items:center;gap:var(--space-2);}
.conj-card:hover{box-shadow:var(--shadow-sm);}
.conjugate-btn{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:30px;height:30px;min-width:36px;min-height:36px;border-radius:var(--radius-md);color:var(--color-admin);opacity:.5;cursor:pointer;}
.conjugate-btn:hover{opacity:1;background:var(--color-admin-hl);}
.conjugate-btn.generating{opacity:1;animation:spin 1s linear infinite;}
@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
.conj-card-ar-only{direction:rtl;gap:var(--space-3);}.conj-card-ar-only .conj-pronoun-ar{font-size:var(--text-sm);color:var(--color-text-muted);flex-shrink:0;}.conj-card-ar-only .audio-btn{direction:ltr;}
.conj-left{flex:1;min-width:0;overflow-wrap:break-word;word-break:break-word;}
.conj-pronoun-ar{font-family:var(--font-arabic);font-size:var(--text-lg);font-weight:600;direction:rtl;color:var(--color-text);line-height:1.3;}
.conj-pronoun-de{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:.1em;}
.conj-divider{width:1px;align-self:stretch;background:var(--color-divider);flex-shrink:0;}
.conj-right{flex:1;min-width:0;text-align:right;overflow-wrap:break-word;}
.conj-form-ar{font-family:var(--font-arabic);font-size:var(--text-xl);font-weight:700;direction:rtl;color:var(--color-text);line-height:1.3;}
.conj-transliteration{font-size:var(--text-xs);color:var(--color-text-muted);font-style:italic;margin-top:.1em;}
.gender-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-bottom:auto;margin-top:6px;}
.gender-m{background:var(--color-primary);}
.gender-f{background:var(--color-gold);}
.audio-btn{width:30px;height:30px;min-width:44px;min-height:44px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--color-text-faint);opacity:.45;cursor:default;}
.audio-btn.ready{opacity:1;cursor:pointer;color:var(--color-primary);}
.audio-btn.ready:hover{background:var(--color-primary-hl);}
.audio-btn.playing{color:var(--color-primary);background:var(--color-primary-hl);}

/* ─── No results ─── */
.empty-state{text-align:center;padding:var(--space-16) var(--space-8);color:var(--color-text-muted);}
.empty-state h3{color:var(--color-text);font-size:var(--text-lg);margin-bottom:var(--space-2);}

/* ─── Admin overlay ─── */
.overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:var(--space-4);background:oklch(from var(--color-bg) l c h/.8);backdrop-filter:blur(8px);}
.overlay.hidden{display:none;}
.modal{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-8);width:100%;max-width:440px;box-shadow:var(--shadow-lg);}
.modal h2{font-size:var(--text-lg);font-weight:700;margin-bottom:var(--space-2);}
.modal p{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-6);}
.form-row{margin-bottom:var(--space-4);}
.form-row label{display:block;font-size:var(--text-sm);font-weight:500;margin-bottom:var(--space-2);}
.form-row input,.form-row textarea{width:100%;padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);font-size:var(--text-sm);resize:vertical;}
.form-row input:focus,.form-row textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px oklch(from var(--color-primary) l c h/.15);}
.form-row.error input{border-color:var(--color-error);}
.form-error{font-size:var(--text-xs);color:var(--color-error);margin-top:var(--space-1);}
.modal-actions{display:flex;gap:var(--space-3);margin-top:var(--space-6);}
.btn{padding:var(--space-2) var(--space-5);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:600;cursor:pointer;min-height:44px;}
.btn-primary{background:var(--color-primary);color:var(--color-text-inverse);}
.btn-primary:hover{background:var(--color-primary-hover);}
.btn-ghost{color:var(--color-text-muted);}
.btn-ghost:hover{color:var(--color-text);background:var(--color-surface-offset);}
.btn-admin{background:var(--color-admin);color:#fff;}
.btn-admin:hover{background:var(--color-admin-hover);}
.btn-danger{background:var(--color-error);color:#fff;}
.btn-sm{padding:var(--space-1) var(--space-3);font-size:var(--text-xs);}

/* ─── Admin panel (slide-up tray) ─── */
#admin-panel{position:fixed;bottom:0;left:0;right:0;z-index:150;transform:translateY(100%);transition:transform .35s cubic-bezier(.16,1,.3,1);background:var(--color-surface-2);border-top:1px solid var(--color-border);border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding:var(--space-6) var(--space-4) var(--space-8);max-height:90dvh;overflow-y:auto;}
#admin-panel.open{transform:translateY(0);}
.admin-panel-inner{max-width:700px;margin-inline:auto;}
.admin-panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-6);}
.admin-panel-title{font-size:var(--text-lg);font-weight:700;display:flex;align-items:center;gap:var(--space-2);}
.api-status{font-size:var(--text-xs);padding:.2em .7em;border-radius:var(--radius-full);}
.api-status.ok{background:var(--color-success-hl);color:var(--color-success);}
.api-status.err{background:var(--color-error-hl);color:var(--color-error);}
.api-status.idle{background:var(--color-surface-offset);color:var(--color-text-muted);}
.section-divider{height:1px;background:var(--color-divider);margin:var(--space-6) 0;}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-3) 0;border-bottom:1px solid var(--color-divider);}
.setting-label{font-size:var(--text-sm);font-weight:500;}
.setting-sub{font-size:var(--text-xs);color:var(--color-text-muted);}
.toggle{position:relative;width:44px;height:26px;flex-shrink:0;}
.toggle input{opacity:0;width:0;height:0;position:absolute;}
.toggle-track{position:absolute;inset:0;background:var(--color-border);border-radius:var(--radius-full);cursor:pointer;transition:background var(--t);}
.toggle input:checked + .toggle-track{background:var(--color-admin);}
.toggle-thumb{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform var(--t);box-shadow:0 1px 3px oklch(0 0 0/.2);}
.toggle input:checked ~ .toggle-thumb{transform:translateX(18px);}
.generate-result{background:var(--color-surface-offset);border-radius:var(--radius-lg);padding:var(--space-4);margin-top:var(--space-4);font-size:var(--text-sm);max-height:300px;overflow-y:auto;}
.generate-result pre{white-space:pre-wrap;word-break:break-word;font-family:monospace;font-size:.8rem;color:var(--color-text-muted);}
.loading-pulse{display:flex;gap:var(--space-2);align-items:center;color:var(--color-text-muted);font-size:var(--text-sm);}
.dot{width:7px;height:7px;border-radius:50%;background:var(--color-primary);animation:pulse 1.2s ease-in-out infinite;}
.dot:nth-child(2){animation-delay:.2s;}
.dot:nth-child(3){animation-delay:.4s;}
@keyframes pulse{0%,100%{opacity:.2;transform:scale(.8);}50%{opacity:1;transform:scale(1.2);}}
.verb-list-admin{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-3);}
.verb-tag{display:flex;align-items:center;gap:var(--space-2);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-full);padding:.2em .6em .2em .8em;font-size:var(--text-xs);}
.verb-tag button{color:var(--color-text-faint);line-height:1;}
.verb-tag button:hover{color:var(--color-error);}

/* ─── Vocab category chips ─── */
.vocab-cat-chips{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-2);}
.vocab-cat-chip{font-size:var(--text-xs);font-weight:500;padding:.35em .85em;border-radius:var(--radius-full);border:1px solid var(--color-border);color:var(--color-text-muted);background:var(--color-surface);cursor:pointer;min-height:36px;display:inline-flex;align-items:center;}
.vocab-cat-chip:hover{border-color:var(--color-primary);color:var(--color-primary);}
.vocab-cat-chip.active{background:var(--color-primary-hl);border-color:var(--color-primary);color:var(--color-primary);}

/* ─── Language toggle ─── */
.lang-toggle{display:inline-flex;background:var(--color-surface-offset);border-radius:var(--radius-full);padding:2px;gap:2px;}
.lang-btn{padding:var(--space-1) var(--space-4);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:600;color:var(--color-text-muted);min-height:36px;}
.lang-btn.active{background:var(--color-surface-2);color:var(--color-text);box-shadow:var(--shadow-sm);}

/* ─── Toast ─── */
#toast{position:fixed;bottom:var(--space-6);left:50%;transform:translateX(-50%) translateY(8px);background:var(--color-text);color:var(--color-bg);padding:var(--space-2) var(--space-5);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:500;z-index:300;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;white-space:nowrap;}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ─── Login screen ─── */
.login-screen{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:var(--space-4);overflow:hidden;position:relative;}
.floating-letters{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.float-letter{position:absolute;font-family:var(--font-arabic);color:oklch(from var(--color-primary) l c h/.06);font-weight:700;animation:floatUp linear infinite;}
@keyframes floatUp{0%{transform:translateY(100vh) rotate(0deg);opacity:0;}10%{opacity:1;}90%{opacity:1;}100%{transform:translateY(-10vh) rotate(20deg);opacity:0;}}
.login-card{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-8);width:100%;max-width:380px;box-shadow:var(--shadow-lg);z-index:1;position:relative;text-align:center;}
.login-ar-title{font-family:var(--font-arabic);font-size:2.8rem;font-weight:700;color:var(--color-primary);line-height:1.2;margin-bottom:var(--space-1);}
.login-en-title{font-size:1rem;font-weight:600;color:var(--color-text-muted);letter-spacing:.1em;text-transform:uppercase;margin-bottom:var(--space-6);}
.login-card p{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-6);}
.login-card input{width:100%;padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);font-size:var(--text-base);margin-bottom:var(--space-4);}
.login-card input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px oklch(from var(--color-primary) l c h/.15);}
.login-card .btn{width:100%;padding:var(--space-3);font-size:var(--text-base);}
.login-error{font-size:var(--text-sm);color:var(--color-error);margin-bottom:var(--space-3);}

/* ─── Mode toggle ─── */
.mode-toggle{display:flex;background:var(--color-surface-offset);border-radius:var(--radius-full);padding:2px;gap:2px;margin-left:auto;}
.mode-btn{padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);min-height:32px;}
.mode-btn.active{background:var(--color-surface-2);color:var(--color-text);box-shadow:var(--shadow-sm);}

/* ─── Direction toggle ─── */
.dir-toggle{display:inline-flex;background:var(--color-surface-offset);border-radius:var(--radius-full);padding:2px;gap:2px;}
.dir-btn{padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);min-height:32px;}
.dir-btn.active{background:var(--color-surface-2);color:var(--color-text);box-shadow:var(--shadow-sm);}
.mix-btn{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:600;color:var(--color-text-faint);min-height:32px;margin-left:var(--space-2);border:1px solid var(--color-border);}
.mix-btn:hover{color:var(--color-text-muted);border-color:var(--color-text-muted);}
.mix-btn.active{background:var(--color-gold-hl);color:var(--color-gold);border-color:var(--color-gold);}

/* ─── Flashcard styles ─── */
.learn-container { max-width: 500px; margin: var(--space-8) auto; padding: 0 var(--space-4); }
.learn-progress { text-align: center; font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-4); }
.flashcard { perspective: 1000px; cursor: pointer; min-height: 280px; }
.flashcard-inner { position: relative; width: 100%; min-height: 280px; transition: transform 0.5s; transform-style: preserve-3d; }
.flashcard.flipped .flashcard-inner { transform: rotateY(180deg); }
.flashcard-front, .flashcard-back {
  position: absolute; inset: 0; backface-visibility: hidden;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); padding: var(--space-8);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 280px;
}
.flashcard-back { transform: rotateY(180deg); }
.card-translation { font-size: var(--text-xl); font-weight: 700; text-align: center; }
.card-verb-hint { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); }
.card-pronoun { font-family: var(--font-arabic); font-size: var(--text-lg); color: var(--color-text-muted); }
.card-arabic { font-family: var(--font-arabic); font-size: 2.5rem; font-weight: 700; direction: rtl; margin: var(--space-3) 0; }
.card-translit { font-size: var(--text-sm); color: var(--color-text-muted); font-style: italic; }
.card-audio { width: 48px; height: 48px; margin-top: var(--space-4); }
.learn-actions { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-6); }
.learn-flip-btn { flex: 1; max-width: 200px; text-align: center; padding: var(--space-3); }

/* ─── Responsive ─── */
@media(max-width:500px){
  .verb-header{flex-wrap:wrap;}
  .conj-form-ar{font-size:var(--text-lg);}
}