@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* `display: grid/flex` on author CSS overrides the UA rule for [hidden];
   restore it so toggling the `hidden` attribute actually hides elements. */
[hidden] { display: none !important; }

/* One family with dfd.academy and the courses app: Manrope, a violet accent
   and soft rounded panels. The Luxembourg red and blue stay, but as the flag
   they are — they identify the subject and no longer double as the interface
   colour, which is why the buttons and the national palette used to blur into
   one another. */
:root {
  --lux-red: #ED2939;
  --lux-blue: #00a1de;
  --accent: #5b34ea;
  --accent-press: #4a29c9;
  --accent-soft: #efebff;
  --accent-2: #8b6cf6;
  --bg: #f5f5fc;
  --bg-elev: #ffffff;
  --surface: #ffffff;
  --text: #15162b;
  --text-soft: #5c5e7e;
  --border: #e8e9f5;
  --shadow: 0 1px 2px rgba(21, 22, 43, .04), 0 4px 12px rgba(91, 52, 234, .06);
  --shadow-lg: 0 2px 6px rgba(21, 22, 43, .06), 0 16px 32px rgba(91, 52, 234, .10);
  --radius: 20px;
  --radius-sm: 14px;
  --good: #12b76a;
  --hard: #f59e0b;
  --again: #f04438;
  --easy: #5b34ea;
  --maxw: 860px;
}
/* The toggle stays — some people study at night — but the dark side is retuned
   to the same violet rather than the old cyan. */
[data-theme="dark"] {
  --bg: #14131f;
  --bg-elev: #1c1b2b;
  --surface: #221f36;
  --text: #eceaf6;
  --text-soft: #a5a2c0;
  --border: #322e4d;
  --accent: #9b7cff;
  --accent-press: #b09aff;
  --accent-soft: #2a2440;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.5);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0;
}
body {
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  /* The wash was cyan and red — the flag used as wallpaper. It is violet now,
     the same accent the rest of the family uses, and far quieter. */
  background: radial-gradient(1200px 600px at 80% -10%, rgba(91, 52, 234, .07), transparent 60%),
              radial-gradient(1000px 500px at -10% 0%, rgba(139, 108, 246, .05), transparent 55%),
              var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }
.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: 12px; top: 12px; background: var(--surface); padding: 8px 14px; border-radius: 8px; z-index: 100; }

/* ---------- Topbar ---------- */
.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 12px clamp(14px, 4vw, 34px);
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 11px; }
.brand-flag {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: linear-gradient(var(--lux-red) 0 33.3%, #fff 33.3% 66.6%, var(--lux-blue) 66.6% 100%);
  box-shadow: var(--shadow); border: 1px solid rgba(0,0,0,.06);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-text strong { font-size: 1.12rem; letter-spacing: -.02em; }
.brand-sub { font-size: .72rem; color: var(--text-soft); }
.tabs { display: flex; gap: 4px; margin: 0 auto; background: var(--bg-elev); padding: 4px; border-radius: 999px; border: 1px solid var(--border); }
.tab {
  border: 0; background: transparent; color: var(--text-soft);
  padding: 8px 16px; border-radius: 999px; cursor: pointer; font-size: .9rem; font-weight: 600;
  transition: .18s;
}
.tab:hover { color: var(--text); }
.tab.is-active { background: var(--accent); color: #fff; box-shadow: 0 4px 14px rgba(0,161,222,.4); }
.icon-btn {
  border: 1px solid var(--border); background: var(--bg-elev); color: var(--text);
  width: 42px; height: 42px; border-radius: 12px; cursor: pointer; font-size: 1.1rem;
  display: grid; place-items: center; transition: .18s; flex: none;
}
.icon-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }

/* ---------- Views ---------- */
main { max-width: var(--maxw); margin: 0 auto; padding: clamp(16px, 3vw, 30px); }
.view { display: none; animation: fade .25s ease; }
.view.is-active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Study toolbar ---------- */
.study-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.chipset { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--border); background: var(--bg-elev); color: var(--text-soft);
  padding: 7px 14px; border-radius: 999px; cursor: pointer; font-weight: 700; font-size: .82rem;
  transition: .16s; user-select: none;
}
.chip small { font-weight: 500; opacity: .7; margin-left: 4px; }
.chip.on { color: #fff; border-color: transparent; }
.chip.on[data-level="A1"] { background: #2bb673; }
.chip.on[data-level="A2"] { background: #00a1de; }
.chip.on[data-level="B1"] { background: #5b6cff; }
.chip.on[data-level="B2"] { background: #9b51e0; }
.study-meta { display: flex; align-items: center; gap: 14px; }
.switch { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; color: var(--text-soft); cursor: pointer; }
.switch input { width: 16px; height: 16px; accent-color: var(--accent); }
.queue-pill { font-size: .8rem; font-weight: 700; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); padding: 6px 12px; border-radius: 999px; }

/* ---------- Flashcard ---------- */
.card-stage { perspective: 1600px; margin: 6px 0 20px; }
.flashcard {
  width: 100%; min-height: 340px; cursor: pointer; outline: none;
}
.flashcard-inner {
  position: relative; width: 100%; min-height: 340px;
  transition: transform .55s cubic-bezier(.2,.8,.2,1); transform-style: preserve-3d;
}
.flashcard.flipped .flashcard-inner { transform: rotateY(180deg); }
.flashcard:focus-visible .flashcard-inner { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: var(--radius); }
.flashcard-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: clamp(22px, 5vw, 40px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.flashcard-front { background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--accent) 5%, var(--surface))); }
.flashcard-back { transform: rotateY(180deg); }
.card-top { position: absolute; top: 16px; left: 18px; right: 18px; display: flex; justify-content: space-between; align-items: center; }
.card-top-right { display: flex; gap: 10px; align-items: center; }
.face-audio {
  border: 1px solid var(--border); background: var(--bg-elev); color: var(--text);
  width: 34px; height: 34px; border-radius: 10px; cursor: pointer; font-size: .95rem;
  display: grid; place-items: center; transition: .16s; flex: none;
}
.face-audio:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.face-audio.playing { border-color: var(--accent); color: var(--accent); }
.pos-tag { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; color: var(--text-soft); background: var(--bg-elev); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); }
.level-tag { font-size: .72rem; font-weight: 800; color: var(--accent); }
.headword { font-size: clamp(2rem, 7vw, 3.4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.headword-answer { color: var(--accent); }
.subword { color: var(--text-soft); margin-top: 6px; font-size: 1rem; font-weight: 600; }
.example { margin-top: 18px; max-width: 30ch; color: var(--text-soft); font-size: 1.02rem; line-height: 1.5; font-style: italic; }
.example b { color: var(--text); font-style: normal; }
.example-answer { color: var(--text); font-style: normal; }
.flip-hint { position: absolute; bottom: 16px; left: 0; right: 0; font-size: .74rem; color: var(--text-soft); opacity: .8; }
.flip-hint kbd { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; font-size: .72rem; }
.translations { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 6px; }
.translations li { font-size: 1.06rem; }
.translations .lang { display: inline-block; min-width: 26px; font-size: .66rem; font-weight: 800; color: var(--accent); text-transform: uppercase; margin-right: 8px; }
.lod-link { font-size: .76rem; font-weight: 800; text-decoration: none; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); padding: 5px 11px; border-radius: 999px; }
.lod-link:hover { background: var(--accent); color: #fff; }

/* ---------- Controls ---------- */
.flip-bar { display: flex; gap: 10px; justify-content: center; }
.btn {
  border: 1px solid var(--border); background: var(--bg-elev); color: var(--text);
  padding: 12px 22px; border-radius: 14px; font-weight: 700; cursor: pointer; font-size: .95rem;
  transition: .16s;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn.primary { background: var(--accent); color: #fff; border-color: transparent; box-shadow: 0 8px 22px rgba(0,161,222,.35); }
.btn.big { padding: 14px 40px; font-size: 1.02rem; }
.btn.danger { background: var(--again); color: #fff; border-color: transparent; }
.grade-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.grade {
  border: 1px solid var(--border); background: var(--bg-elev); border-radius: 14px; padding: 12px 6px;
  cursor: pointer; display: flex; flex-direction: column; gap: 3px; align-items: center; transition: .16s; color: var(--text);
}
.grade b { font-size: .98rem; }
.grade small { font-size: .72rem; color: var(--text-soft); }
.grade:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.grade.again { border-top: 3px solid var(--again); }
.grade.hard  { border-top: 3px solid var(--hard); }
.grade.good  { border-top: 3px solid var(--good); }
.grade.easy  { border-top: 3px solid var(--easy); }

.empty-state { text-align: center; padding: 50px 16px; }
.empty-emoji { font-size: 3rem; }
.empty-state h2 { margin: 8px 0; }
.empty-state p { color: var(--text-soft); max-width: 40ch; margin: 0 auto 18px; }

/* ---------- Browse ---------- */
.browse-toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.search, .select {
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  padding: 11px 14px; border-radius: 12px; font-size: .95rem; font-family: inherit;
}
.search { flex: 1 1 260px; }
.browse-count { color: var(--text-soft); font-size: .85rem; margin: 0 0 12px; }
.word-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.word-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px 16px; box-shadow: var(--shadow); transition: .16s; position: relative;
}
.word-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.wc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.wc-word { font-weight: 800; font-size: 1.12rem; }
.wc-lvl { font-size: .68rem; font-weight: 800; color: var(--accent); }
.wc-en { color: var(--text-soft); margin: 3px 0 8px; }
.wc-ex { font-size: .85rem; font-style: italic; color: var(--text-soft); border-left: 2px solid var(--border); padding-left: 9px; }
.wc-foot { margin-top: 10px; display: flex; justify-content: space-between; align-items: center; }
.wc-cat { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); }
.mini-link { font-size: .72rem; font-weight: 700; text-decoration: none; color: var(--accent); }

/* ---------- Stats ---------- */
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 26px; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 18px; text-align: center; box-shadow: var(--shadow); }
.stat-num { display: block; font-size: 2rem; font-weight: 800; letter-spacing: -.03em; }
.stat-label { color: var(--text-soft); font-size: .8rem; }
.view h3 { margin: 22px 0 12px; }
.level-progress { display: flex; flex-direction: column; gap: 12px; }
.lp-row { display: grid; grid-template-columns: 44px 1fr 70px; gap: 12px; align-items: center; }
.lp-name { font-weight: 800; }
.lp-bar { height: 12px; background: var(--bg-elev); border-radius: 999px; overflow: hidden; border: 1px solid var(--border); }
.lp-fill { height: 100%; border-radius: 999px; transition: width .5s; }
.lp-val { font-size: .8rem; color: var(--text-soft); text-align: right; }
.box-chart { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; align-items: end; height: 150px; }
.box-col { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.box-bar { width: 100%; background: linear-gradient(var(--accent), var(--accent-2)); border-radius: 8px 8px 0 0; min-height: 4px; transition: height .5s; }
.box-lab { font-size: .68rem; color: var(--text-soft); }

/* ---------- Settings ---------- */
.setting-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 20px; margin-bottom: 16px; box-shadow: var(--shadow); }
.setting-block h3 { margin: 0 0 6px; }
.setting-block.danger { border-color: color-mix(in srgb, var(--again) 40%, var(--border)); }
.muted { color: var(--text-soft); font-size: .9rem; line-height: 1.5; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.io-msg { font-size: .85rem; margin: 10px 0 0; color: var(--good); min-height: 1em; }
#newLimit { width: 220px; vertical-align: middle; accent-color: var(--accent); }
#newLimitVal { font-weight: 800; margin-left: 8px; }

/* ---------- Grammar ---------- */
.grammar-head { margin-bottom: 16px; }
.grammar-head h2 { margin: 0 0 4px; }
.grammar-list { display: flex; flex-direction: column; gap: 10px; }
.gram-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); overflow: hidden; }
.gram-item summary { cursor: pointer; padding: 15px 18px; font-weight: 700; font-size: 1.02rem; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.gram-item summary::-webkit-details-marker { display: none; }
.gram-item summary::after { content: "+"; color: var(--accent); font-weight: 800; font-size: 1.2rem; }
.gram-item[open] summary::after { content: "–"; }
.gram-body { padding: 0 18px 16px; color: var(--text); line-height: 1.6; }
.gram-body p { margin: 8px 0; color: var(--text-soft); }
.gram-ul { margin: 8px 0; padding-left: 20px; color: var(--text-soft); }
.gram-ul li { margin: 4px 0; }
.gram-ex { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 9px 12px; margin: 8px 0; background: color-mix(in srgb, var(--accent) 7%, transparent); border-left: 3px solid var(--accent); border-radius: 8px; }
.gex-lb { font-weight: 700; }
.gex-en { color: var(--text-soft); }
.gram-tip { margin: 10px 0; padding: 9px 12px; background: color-mix(in srgb, var(--hard) 14%, transparent); border-radius: 8px; font-size: .9rem; }
.gram-table-wrap { overflow-x: auto; margin: 10px 0; }
.gram-table { border-collapse: collapse; width: 100%; font-size: .92rem; }
.gram-table th, .gram-table td { border: 1px solid var(--border); padding: 7px 10px; text-align: left; }
.gram-table th { background: var(--bg-elev); font-weight: 700; }

/* ---------- Resources ---------- */
.res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.res-card { display: block; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px 18px; box-shadow: var(--shadow); transition: .16s; }
.res-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.res-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.res-name { font-weight: 800; font-size: 1.04rem; line-height: 1.2; }
.res-go { color: var(--accent); font-weight: 800; }
.res-tag { display: inline-block; margin: 6px 0; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); padding: 3px 9px; border-radius: 999px; }
.res-desc { margin: 6px 0 0; color: var(--text-soft); font-size: .9rem; line-height: 1.5; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px);
  background: var(--text); color: var(--bg); padding: 12px 20px; border-radius: 12px;
  box-shadow: var(--shadow-lg); font-weight: 600; font-size: .9rem; opacity: 0; transition: .25s; z-index: 80;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 620px) {
  .brand-sub { display: none; }
  /* Six tabs need 565px and a phone gives the row 357px, so the page itself
     scrolled sideways by 192px. The row scrolls inside itself instead, and the
     tabs keep their own width rather than being squeezed unreadable. */
  .tabs {
    order: 3; width: 100%; margin: 0;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; }
  .topbar { flex-wrap: wrap; }
  .grade small { display: none; }
}
/* ---------- Phone ----------
   Two things were wrong at 390px. The row of six tabs was 565px wide in a
   357px slot, so the browser laid the whole page out at 583px and scaled it
   down: every size below was really about two thirds of what the stylesheet
   says. The tabs now wrap onto two rows, which keeps the page at 390px and
   keeps all six sections visible - a scrolling row would have hidden two of
   them behind a swipe with nothing to hint at it. Second, the targets were
   sized for a mouse; a finger needs 44px. Sizes only, and only here: the
   desktop rules above are untouched. */
@media (max-width: 760px) {
  .tabs { flex-wrap: wrap; justify-content: center; max-width: 100%; }
  .tab { min-height: 44px; }
  .icon-btn { width: 46px; height: 46px; }
  .chip { min-height: 44px; display: inline-flex; align-items: center; }
  /* The box stays 16px; the label around it is what the finger aims at. */
  .switch { min-height: 44px; }
  .lod-link { display: inline-flex; align-items: center; min-height: 44px; }
  .grade { min-height: 44px; }
  .btn, .search, .select { min-height: 44px; }
  /* Nothing readable goes below 12px on a phone. */
  .pos-tag { font-size: 12px; }
  .level-tag { font-size: 12px; }
  .flip-hint, .flip-hint kbd { font-size: 12px; }
  .translations .lang { font-size: 12px; }
  .wc-lvl, .wc-cat, .mini-link { font-size: 12px; }
  .chip small { font-size: 12px; }
  /* The dictionary link in a word card is 38x15 of ink. The negative margin
     keeps the card the same height while the finger gets its 44px. */
  .mini-link {
    display: inline-flex; align-items: center; justify-content: flex-end;
    min-height: 44px; min-width: 44px; margin: -12px -6px -12px 0; padding: 0 6px;
  }
  .res-tag { font-size: 12px; }
  .box-lab { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .flashcard-inner { transition: none; }
  * { animation: none !important; }
}

/* ---------- About (static, under the app) ----------
   Deliberately outside the tab panels: those are display:none until you open
   them, so a crawler or a chat link preview saw the navigation and nothing
   about the deck. Kept quiet enough not to compete with the study card. */
.about {
  max-width: var(--maxw);
  margin: 8px auto 0;
  padding: 28px clamp(16px, 3vw, 30px) 56px;
  border-top: 1px solid var(--border);
  color: var(--text-soft);
  font-size: .95rem;
  line-height: 1.65;
}
.about h2 { margin: 0 0 14px; font-size: 1.15rem; color: var(--text); }
.about h3 { margin: 26px 0 10px; font-size: .95rem; color: var(--text); }
.about p { margin: 0 0 14px; }
.about strong { color: var(--text); }
.about ul { margin: 0 0 14px; padding-left: 20px; }
.about li { margin-bottom: 8px; }