/* ============================================================
   GjuhaGjermane — Sistemi i dizajnit
   Vanilla CSS, pa varësi. Modern, profesional, i pastër.
   ============================================================ */

:root {
  /* Paleta — blu i thellë (besueshmëri/arsim) + ar i ngrohtë (motivim) */
  --c-bg:        #f6f7fb;
  --c-surface:   #ffffff;
  --c-ink:       #11203b;
  --c-ink-soft:  #4a5878;
  --c-muted:     #8b96ad;
  --c-line:      #e6e9f2;

  --c-primary:   #2c4bff;
  --c-primary-d: #1b32c4;
  --c-primary-l: #eaeeff;

  --c-accent:    #ffb020;   /* ar */
  --c-accent-d:  #d98a00;

  --c-green:     #1faa64;
  --c-green-l:   #e6f6ee;
  --c-red:       #e1465a;
  --c-red-l:     #fdebed;
  --c-amber-l:   #fff4e0;

  --radius:      16px;
  --radius-sm:   10px;
  --radius-lg:   24px;
  --shadow-sm:   0 1px 2px rgba(17,32,59,.06), 0 1px 3px rgba(17,32,59,.04);
  --shadow:      0 6px 24px rgba(17,32,59,.08);
  --shadow-lg:   0 20px 50px rgba(17,32,59,.16);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --maxw: 1180px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--c-ink);
  background: var(--c-bg);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .4em; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
h2 { font-size: clamp(1.4rem, 2.4vw, 2rem); }
h3 { font-size: 1.2rem; }
p  { margin: 0 0 1em; }
a  { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.muted { color: var(--c-muted); }
.center { text-align: center; }
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.stack > * + * { margin-top: 1rem; }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--c-primary);
  display: inline-flex; align-items: center; gap: .5rem; justify-content: center;
  padding: .72rem 1.3rem; border-radius: var(--radius-sm);
  background: var(--bg); color: #fff; font-weight: 600; font-size: .98rem;
  border: 0; cursor: pointer; transition: transform .08s ease, box-shadow .2s ease, background .2s;
  box-shadow: var(--shadow-sm); text-decoration: none;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); text-decoration: none; background: var(--c-primary-d); }
.btn:active { transform: translateY(0); }
.btn-lg { padding: .95rem 1.8rem; font-size: 1.05rem; }
.btn-block { width: 100%; }
.btn-accent { --bg: var(--c-accent); color: #3a2600; }
.btn-accent:hover { background: var(--c-accent-d); color:#3a2600; }
.btn-ghost { background: transparent; color: var(--c-ink); box-shadow: none; border: 1px solid var(--c-line); }
.btn-ghost:hover { background: #fff; color: var(--c-ink); }
.btn-danger { --bg: var(--c-red); }
.btn-danger:hover { background:#c5374a; }
.btn-sm { padding: .45rem .85rem; font-size: .85rem; }

/* ---------- Cards ---------- */
.card {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-sm);
}
.card-pad-lg { padding: 2rem; }
.grid { display: grid; gap: 1.25rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 880px){ .grid-2,.grid-3,.grid-4 { grid-template-columns: 1fr; } }

/* ---------- Badges / chips ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600;
  background: var(--c-primary-l); color: var(--c-primary-d);
}
.badge-green { background: var(--c-green-l); color: var(--c-green); }
.badge-amber { background: var(--c-amber-l); color: var(--c-accent-d); }
.badge-red { background: var(--c-red-l); color: var(--c-red); }
.level-pill {
  display:inline-flex;width:42px;height:42px;align-items:center;justify-content:center;
  border-radius:12px;font-weight:800;background:var(--c-primary);color:#fff;font-size:.95rem;
}

/* ---------- Top navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.85); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-line);
}
.nav-inner { display: flex; align-items: center; gap: 1rem; height: 66px; }
.brand { display:flex; align-items:center; gap:.6rem; font-weight: 800; font-size: 1.15rem; color: var(--c-ink); }
.brand:hover { text-decoration: none; }
.brand-logo {
  width: 38px; height: 38px; border-radius: 11px;
  background: linear-gradient(135deg, var(--c-primary), #6f86ff);
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800;
  box-shadow: var(--shadow-sm);
}
.nav-links { display: flex; gap: .35rem; margin-left: auto; align-items: center; }
.nav-links a {
  padding: .5rem .85rem; border-radius: 9px; color: var(--c-ink-soft); font-weight: 600; font-size: .92rem;
}
.nav-links a:hover { background: var(--c-bg); color: var(--c-ink); text-decoration: none; }
.nav-links a.active { background: var(--c-primary-l); color: var(--c-primary-d); }
.nav-toggle { display:none; background:none;border:0;font-size:1.5rem;cursor:pointer;color:var(--c-ink); }
@media (max-width: 820px){
  .nav-toggle { display:block; margin-left:auto; }
  .nav-links { display:none; position:absolute; top:66px; left:0; right:0; flex-direction:column;
    background:#fff; padding:.75rem; border-bottom:1px solid var(--c-line); box-shadow: var(--shadow); }
  .nav-links.open { display:flex; }
  .nav-links a { width:100%; }
}

/* ---------- Layout shell ---------- */
.page { padding: 2rem 0 4rem; }
.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.page-head h1 { margin: 0; }

/* ---------- Forms ---------- */
label { font-weight: 600; font-size: .9rem; color: var(--c-ink); display:block; margin-bottom:.35rem; }
.input, input[type=text], input[type=password], input[type=email], input[type=date],
input[type=number], select, textarea {
  width: 100%; padding: .7rem .85rem; border: 1.5px solid var(--c-line);
  border-radius: var(--radius-sm); font: inherit; color: var(--c-ink); background:#fff;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus, input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-l);
}
textarea { resize: vertical; min-height: 120px; }
.field { margin-bottom: 1.1rem; }
.help { font-size: .82rem; color: var(--c-muted); margin-top: .3rem; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border:1px solid var(--c-line); border-radius: var(--radius); }
table.data { width: 100%; border-collapse: collapse; background:#fff; }
table.data th, table.data td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--c-line); font-size:.92rem; }
table.data th { background: #fbfcfe; font-weight: 700; color: var(--c-ink-soft); font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; }
table.data tr:last-child td { border-bottom: 0; }
table.data tr:hover td { background: #fafbff; }

/* ---------- Alerts / flash ---------- */
.alert { padding: .85rem 1.1rem; border-radius: var(--radius-sm); margin-bottom: 1rem; font-weight: 500; border:1px solid transparent; }
.alert-success { background: var(--c-green-l); color: #0f7a45; border-color:#bfe8d2; }
.alert-error   { background: var(--c-red-l); color: #b32434; border-color:#f6c9cf; }
.alert-info    { background: var(--c-primary-l); color: var(--c-primary-d); border-color:#cdd6ff; }

/* ---------- Progress ---------- */
.progress { height: 10px; background: var(--c-line); border-radius: 999px; overflow: hidden; }
.progress > span { display:block; height:100%; background: linear-gradient(90deg,var(--c-primary),#6f86ff); border-radius:999px; }

/* ---------- Module / lesson cards ---------- */
.tile {
  display:flex; flex-direction:column; gap:.6rem; text-decoration:none; color:inherit;
  background:#fff; border:1px solid var(--c-line); border-radius:var(--radius); padding:1.3rem;
  transition: transform .12s, box-shadow .2s, border-color .2s; height:100%;
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color:#cdd6ff; text-decoration:none; }
.tile-icon { font-size: 1.8rem; width:54px;height:54px;border-radius:14px;background:var(--c-primary-l);
  display:flex;align-items:center;justify-content:center; }
.tile h3 { margin:0; }
.tile .muted { font-size: .88rem; }

/* ---------- Stat cards ---------- */
.stat { background:#fff;border:1px solid var(--c-line);border-radius:var(--radius);padding:1.3rem; }
.stat .num { font-size: 2rem; font-weight: 800; color: var(--c-ink); line-height:1; }
.stat .lbl { color: var(--c-muted); font-size:.85rem; margin-top:.4rem; }

/* ---------- Lesson body content ---------- */
.lesson-body { font-size: 1.05rem; }
.lesson-body table.lesson-table { border-collapse: collapse; margin: 1rem 0; width:100%; }
.lesson-body .lesson-table th, .lesson-body .lesson-table td { border:1px solid var(--c-line); padding:.55rem .8rem; text-align:left; }
.lesson-body .lesson-table th { background: var(--c-primary-l); }
.lesson-body .tip { background: var(--c-amber-l); border-left:4px solid var(--c-accent); padding:.8rem 1rem; border-radius:8px; margin:1rem 0; }
.lesson-body ul, .lesson-body ol { padding-left: 1.3rem; }
.lesson-body li { margin:.3rem 0; }

/* ---------- Auth (login) ---------- */
.auth-wrap { min-height: 100vh; display:grid; grid-template-columns: 1fr 1fr; }
.auth-side { background: linear-gradient(155deg,#1b32c4,#2c4bff 55%,#6f86ff); color:#fff; padding:3rem; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; }
.auth-side::after{content:"";position:absolute;inset:auto -80px -100px auto;width:340px;height:340px;background:rgba(255,255,255,.08);border-radius:50%;}
.auth-side h2 { color:#fff; font-size: 2rem; }
.auth-main { display:flex; align-items:center; justify-content:center; padding: 2rem; }
.auth-card { width:100%; max-width: 400px; }
.auth-feat { display:flex; gap:.7rem; align-items:flex-start; margin-bottom:1rem; position:relative; z-index:1; }
.auth-feat .ico { background:rgba(255,255,255,.18); width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
@media (max-width: 820px){ .auth-wrap { grid-template-columns: 1fr; } .auth-side { display:none; } }

/* ---------- Flashcard ---------- */
.flashcard { perspective: 1200px; }
.flashcard-inner { position: relative; transition: transform .5s; transform-style: preserve-3d; min-height: 220px; cursor:pointer; }
.flashcard.flipped .flashcard-inner { transform: rotateY(180deg); }
.flashcard-face { position:absolute; inset:0; backface-visibility:hidden; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.5rem; border-radius:var(--radius); border:1px solid var(--c-line);
  background:#fff; padding:2rem; text-align:center; }
.flashcard-back { transform: rotateY(180deg); background: var(--c-primary-l); }
.flashcard .word { font-size: 1.8rem; font-weight: 800; }

/* ---------- Quiz ---------- */
.option {
  display:block; width:100%; text-align:left; padding:.8rem 1rem; margin:.5rem 0;
  border:1.5px solid var(--c-line); border-radius:var(--radius-sm); background:#fff; cursor:pointer; font:inherit;
  transition: border-color .15s, background .15s;
}
.option:hover { border-color: var(--c-primary); background: var(--c-primary-l); }
.option.correct { border-color: var(--c-green); background: var(--c-green-l); }
.option.wrong { border-color: var(--c-red); background: var(--c-red-l); }
.option.selected { border-color: var(--c-primary); background: var(--c-primary-l); }

/* ---------- Chat ---------- */
.chat-box { display:flex; flex-direction:column; gap:.8rem; max-height: 52vh; overflow-y:auto; padding:.5rem; }
.bubble { max-width: 80%; padding:.7rem 1rem; border-radius: 16px; line-height:1.5; white-space:pre-wrap; }
.bubble.user { align-self:flex-end; background:var(--c-primary); color:#fff; border-bottom-right-radius:4px; }
.bubble.assistant { align-self:flex-start; background:#fff; border:1px solid var(--c-line); border-bottom-left-radius:4px; }

/* ---------- Butoni i zërit (TTS) ---------- */
.speak-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.3rem;
  width:34px; height:34px; padding:0; border-radius:50%;
  border:1.5px solid var(--c-line); background:#fff; cursor:pointer;
  font-size:1rem; color:var(--c-primary-d); line-height:1; transition:background .15s,border-color .15s,transform .08s;
}
.speak-btn:hover { background:var(--c-primary-l); border-color:var(--c-primary); }
.speak-btn:active { transform:scale(.92); }
.speak-btn.wide { width:auto; height:auto; border-radius:var(--radius-sm); padding:.45rem .85rem; font-size:.88rem; font-weight:600; }

/* ---------- Luajtësi Hören ---------- */
.horen {
  background:linear-gradient(135deg,#eef2ff,#fff); border:1px solid #cdd6ff;
  border-radius:var(--radius); padding:1.4rem 1.5rem; margin-bottom:1.25rem; text-align:center;
}
.horen .horen-icon { font-size:2.4rem; }
.horen-controls { display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin:.9rem 0 .4rem; }
.horen-status { font-size:.86rem; color:var(--c-muted); min-height:1.2em; }
.horen-script { text-align:left; margin-top:1rem; background:#fff; border:1px dashed var(--c-line); border-radius:var(--radius-sm); padding:1rem; white-space:pre-wrap; }

/* ---------- Lista e frazave / Redemittel ---------- */
.phrase {
  display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  padding:.7rem .9rem; border:1px solid var(--c-line); border-radius:var(--radius-sm); background:#fff; margin:.5rem 0;
}
.phrase .de { font-weight:600; }
.phrase .sq { color:var(--c-muted); font-size:.9rem; }

/* ---------- Regjistruesi i zërit (Sprechen) ---------- */
.recorder { background:#fbfcfe; border:1px solid var(--c-line); border-radius:var(--radius); padding:1.3rem; }
.rec-dot { display:inline-block; width:11px; height:11px; border-radius:50%; background:var(--c-red); margin-right:.4rem; }
.rec-dot.live { animation: recpulse 1s infinite; }
@keyframes recpulse { 0%,100%{opacity:1} 50%{opacity:.25} }

/* ---------- Footer ---------- */
.footer { border-top:1px solid var(--c-line); padding: 2rem 0; color: var(--c-muted); font-size:.9rem; background:#fff; }

/* ---------- Misc ---------- */
.flex { display:flex; gap:.6rem; align-items:center; }
.flex-wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.tag-row { display:flex; gap:.4rem; flex-wrap:wrap; }
hr.sep { border:0; border-top:1px solid var(--c-line); margin:1.5rem 0; }
.text-sm { font-size:.88rem; }
.hidden { display:none; }

/* Paraqitje me anësore (Shkrim / Të folur) — responsive */
.split { display:grid; grid-template-columns:280px 1fr; gap:1.5rem; align-items:start; }

/* ============================================================
   PWA — butoni "Instalo aplikacionin"
   ============================================================ */
.install-fab {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 200;
  background: var(--c-primary); color:#fff; border:0; cursor:pointer;
  padding:.7rem 1.2rem; border-radius:999px; font-weight:700; font-size:.95rem;
  box-shadow: var(--shadow-lg); animation: fabIn .3s ease;
}
.install-fab:hover { background: var(--c-primary-d); }
@keyframes fabIn { from{opacity:0; transform:translate(-50%,12px)} to{opacity:1; transform:translate(-50%,0)} }
/* Në mënyrën e instaluar (standalone) fshihe butonin */
@media (display-mode: standalone) { .install-fab { display:none !important; } }

/* ============================================================
   OPTIMIZIM PËR CELULAR (mobile-first tweaks)
   ============================================================ */
/* Tap pa vonesë / pa zmadhim aksidental */
a, button, .btn, .tile, .option, select, input, label.option { touch-action: manipulation; }
button, .btn { -webkit-tap-highlight-color: transparent; }

/* Hapësira të sigurta (notch / home indicator) */
@supports (padding: max(0px)) {
  .container { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
  .footer { padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }
  .nav-links { padding-bottom: env(safe-area-inset-bottom); }
}

@media (max-width: 640px) {
  html { font-size: 15px; }
  .page { padding: 1.1rem 0 5rem; }
  .container { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
  h1 { font-size: 1.55rem; }
  h2 { font-size: 1.3rem; }

  .card { padding: 1.15rem; border-radius: 14px; }
  .card-pad-lg { padding: 1.25rem; }

  /* Anësoret bëhen kolona të plota */
  .split { grid-template-columns: 1fr; gap: 1rem; }

  /* Koka e faqes vertikale */
  .page-head { flex-direction: column; align-items: stretch; gap:.5rem; }

  /* Butona më të mëdhenj për gisht */
  .btn { padding: .8rem 1.2rem; font-size: 1rem; }
  .btn-sm { padding: .55rem 1rem; font-size:.9rem; }
  .btn-block-mobile, .page-head .btn { width: 100%; }
  .speak-btn { width: 40px; height: 40px; font-size: 1.05rem; }
  .speak-btn.wide { width:auto; height:auto; }

  /* Opsionet e kuizit më të rehatshme */
  .option { padding: .95rem 1rem; }

  /* Navigimi: lidhjet sa gjerësia, prek-miqësore */
  .nav-links a { padding: .85rem 1rem; font-size: 1rem; }
  .nav-inner { height: 58px; }

  /* Tabela: pak më kompakte */
  table.data th, table.data td { padding: .6rem .7rem; font-size:.88rem; }

  /* Flashcard pak më e ulët */
  .flashcard-inner { min-height: 200px; }
  .flashcard .word { font-size: 1.5rem; }

  /* Chat bubble më e gjerë */
  .bubble { max-width: 92%; }

  /* Provimi: timeri dhe titulli në një kolonë */
  .stat .num { font-size: 1.7rem; }
}

/* Ekrane shumë të vegjël */
@media (max-width: 380px) {
  .nav .brand { font-size: 1rem; }
  .brand-logo { width: 32px; height: 32px; }
}