/* Bildschirme: Anmeldung, Satzliste, Karte (Anhören/Prüfen), Einstellungen. */

/* ---------- Anmeldung (wie login.php der alten Web-App) ---------- */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:calc(env(safe-area-inset-top) + 20px) 20px calc(env(safe-area-inset-bottom) + 20px)}
.authbox{background:#fff;border-radius:16px;box-shadow:0 2px 14px rgba(43,43,58,.1);padding:28px 24px;
  width:100%;max-width:380px;border-left:6px solid var(--edge)}
.authbox .brand{color:var(--ink);font-size:24px}
.authbox .sub{font-size:11px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.18em;margin:4px 0 20px}
.authbox label.field{margin-top:14px}
.authbox .btn{margin-top:18px}
.authbox p{line-height:1.55;margin:0 0 12px}
.authlinks{display:flex;flex-direction:column;gap:10px;margin-top:18px;font-size:14px;text-align:center}
.authfoot{margin-top:18px;text-align:center;font-size:13px}
.authfoot a{color:var(--ink-soft)}
.trial{background:#fff7e8;border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.5;margin-top:14px}
.honey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ok-box{background:#e9f7f1;color:#1d6b4f;border-radius:10px;padding:10px 12px;font-size:14px;line-height:1.5;margin-top:14px}

/* ---------- Kontingent der Testphase ---------- */
.quota{margin-top:14px;font-size:12px;color:var(--ink-soft);font-weight:600;text-align:left}
.quota .bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden;margin-bottom:6px}
.quota .bar i{display:block;height:100%;background:var(--edge);border-radius:3px}
.quota.empty{color:var(--ink);font-weight:500;line-height:1.5}
.quota.empty .bar i{background:var(--accent)}

/* ---------- Satzliste ---------- */
.listhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.topcount{font-size:11px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.item{display:flex;gap:4px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line)}
.item:first-child{border-top:none}
.item .txt{flex:1;min-width:0;font-size:14px;line-height:1.4}
.item .s{font-weight:600;overflow-wrap:anywhere}
.item .t{color:var(--accent);font-weight:500;overflow-wrap:anywhere}
.item .badge{font-size:10px;color:var(--green);text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-top:2px}
.item .badge.new{color:var(--edge)}
.item.editing textarea{font-size:15px;padding:10px}
.empty{text-align:center;color:var(--ink-soft);padding:36px 10px;font-size:14px;line-height:1.6}
.empty .big{font-size:38px;display:block;margin-bottom:10px}

/* ---------- Karte: oben Muttersprache (klein), darunter Lernsprache (groß), Prinzip 5 ---------- */
.flash{text-align:center;min-height:42vh;display:flex;flex-direction:column;justify-content:center;gap:22px;position:relative}
.flash .num{position:absolute;top:14px;right:18px;font-size:12px;color:var(--ink-soft);font-weight:600}
.flash .tag{position:absolute;top:14px;left:18px;font-size:10px;color:var(--edge);font-weight:700;
  text-transform:uppercase;letter-spacing:.1em}
.flash .src{font-size:clamp(19px,5.2vw,26px);font-weight:500;line-height:1.25;overflow-wrap:anywhere}
.flash .tgt{font-size:clamp(24px,7vw,38px);font-weight:700;color:var(--accent);line-height:1.15;overflow-wrap:anywhere}
.flash .divider{height:2px;background:var(--line);width:55%;margin:0 auto;border-radius:2px}
.flash.speaking .tgt{animation:glow 1.4s ease-in-out infinite}
@keyframes glow{50%{opacity:.5}}
.flash .iconbtn{font-size:18px;vertical-align:middle}

.controls{display:flex;gap:14px;align-items:center;justify-content:center;margin-top:6px}
.controls .big{width:72px;height:72px;border-radius:50%;font-size:26px;padding:0}
.controls .big.main{width:84px;height:84px;font-size:30px}
.status{text-align:center;font-size:13px;color:var(--ink);font-weight:600;margin-top:14px;min-height:20px}

/* ---------- Prüfen ---------- */
.learn-meta{font-size:12px;color:var(--ink-soft);text-align:center;margin-bottom:14px;font-weight:600;min-height:18px}
.reveal{filter:blur(9px);opacity:.35;transition:.3s;user-select:none}
.reveal.show{filter:none;opacity:1}
.startcard .src{font-size:22px;font-weight:700}
#revealBtn{margin-bottom:12px}

/* ---------- Einstellungen ---------- */
.setgrid{display:flex;flex-direction:column;gap:12px}
.setgrid .btn{margin-top:4px}
.email{font-weight:600;overflow-wrap:anywhere;margin-bottom:12px}
.danger-zone{border-left-color:var(--red)}