/* Premium visual system */
:root {
  --primary: #1268ff;
  --primary-dark: #07194b;
  --cyan: #13c9f5;
  --purple: #7b56f5;
  --orange: #ff8b32;
  --green: #16b982;
  --text: #0a1742;
  --muted: #68769b;
  --surface: rgba(255, 255, 255, .88);
  --glass: rgba(255, 255, 255, .64);
  --border: rgba(122, 166, 235, .25);
  --shadow-soft: 0 16px 42px rgba(30, 70, 145, .12);
  --shadow-glow: 0 16px 42px rgba(28, 115, 255, .22);
  --radius-lg: 22px;
  --radius-xl: 30px;
  --bg: #eef5ff;
  --ink: var(--text);
  --line: var(--border);
  --accent: var(--primary);
  --accent-dark: #0755d8;
  --accent-soft: rgba(42, 126, 255, .11);
  --card-shadow: var(--shadow-soft);
  --shadow: var(--shadow-soft);
}

body {
  background:
    radial-gradient(circle at 82% 4%, rgba(89, 75, 246, .18), transparent 27rem),
    radial-gradient(circle at 42% 0%, rgba(19, 201, 245, .16), transparent 25rem),
    linear-gradient(145deg, #f9fcff 0%, #edf5ff 54%, #f4efff 100%);
  background-attachment: fixed;
}

body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  opacity: .42;
  background-image: linear-gradient(rgba(64, 122, 220, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(64, 122, 220, .035) 1px, transparent 1px);
  background-size: 34px 34px;
}

body.dark {
  --bg: #071126;
  --surface: rgba(13, 27, 58, .88);
  --glass: rgba(17, 34, 70, .72);
  --text: #f3f7ff;
  --ink: #f3f7ff;
  --muted: #a9b7d4;
  --border: rgba(110, 155, 230, .22);
  --line: var(--border);
  background: radial-gradient(circle at 80% 4%, rgba(112, 73, 255, .22), transparent 30rem), linear-gradient(145deg, #071126, #0b1731 58%, #111335);
}

button, input, select { letter-spacing: -.01em; }
button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid rgba(19, 201, 245, .5); outline-offset: 3px; }

/* Dashboard */
.dashboard { grid-template-columns: 238px minmax(0, 1fr); background: transparent; }
.sidebar {
  z-index: 10;
  border: 1px solid rgba(117, 170, 255, .16);
  border-width: 0 1px 0 0;
  background:
    radial-gradient(circle at 30% 0%, rgba(24, 190, 255, .22), transparent 15rem),
    linear-gradient(175deg, rgba(10, 28, 70, .98), rgba(5, 15, 43, .99) 68%, rgba(20, 13, 62, .98));
  color: #eff7ff;
  padding: 24px 16px 18px;
  box-shadow: 18px 0 48px rgba(3, 15, 44, .18);
}
.brand { grid-template-columns: 52px 1fr; justify-items: start; align-items: center; gap: 11px; color: #fff; text-align: left; font-size: .92rem; line-height: 1.1; }
.brand-mark { width: 52px; height: 52px; border: 1px solid rgba(157, 229, 255, .46); border-radius: 17px; background: linear-gradient(145deg, #13d5ff, #315cff 52%, #7c4df2); font-size: 1.25rem; box-shadow: 0 0 30px rgba(20, 189, 255, .35), inset 0 1px 1px rgba(255,255,255,.55); }
.legacy-nav { display: none; }
.premium-nav { display: grid; gap: 7px; margin-top: 26px; }
.nav-item { min-height: 44px; gap: 12px; border: 1px solid transparent; border-radius: 14px; color: #b8c7e6; padding: 0 13px; font-size: .82rem; font-weight: 750; }
.nav-item span { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 9px; background: rgba(255,255,255,.055); color: #c9dcff; font-size: 1rem; }
.nav-item:hover { border-color: rgba(103, 219, 255, .2); background: rgba(255,255,255,.07); color: #fff; transform: translateX(3px); }
.nav-item.is-active { border-color: rgba(92, 224, 255, .38); background: linear-gradient(100deg, rgba(28, 117, 255, .4), rgba(32, 212, 255, .13)); color: #fff; box-shadow: 0 0 25px rgba(20, 174, 255, .18), inset 0 1px rgba(255,255,255,.12); animation: premium-pulse 3.4s ease-in-out infinite; }
.nav-item.is-active span { background: linear-gradient(145deg, #1c9bff, #4166ff); color: #fff; box-shadow: 0 0 15px rgba(30, 186, 255, .4); }
.sidebar-widgets { gap: 9px; }
.side-widget, .theme-widget { border-color: rgba(128, 181, 255, .18); border-radius: 18px; background: rgba(255,255,255,.06); color: #edf5ff; box-shadow: inset 0 1px rgba(255,255,255,.08); backdrop-filter: blur(12px); }
.motivation-widget { display: none; }
.progress-ring { width: 74px; height: 74px; margin: 10px auto 7px; background: conic-gradient(#28d6ff 0 0%, rgba(255,255,255,.1) 0%); box-shadow: 0 0 22px rgba(40, 214, 255, .2); }
.progress-ring::before { width: 59px; height: 59px; background: #0b1a3a; }
.progress-ring span { color: #fff; font-size: 1.25rem; }
.progress-widget em { color: #50dcff; }.theme-widget { color: #b8c7e6; }.theme-widget button { color: #fff; }

.home-main { padding: 34px clamp(18px, 3vw, 44px) 50px; background: transparent; }
.home-header { align-items: center; margin-bottom: 24px; }
.home-kicker { display: block; margin-bottom: 7px; color: #1971e9; font-size: .72rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.home-header h1 { max-width: 780px; margin-bottom: 8px; background: linear-gradient(100deg, #07194b, #1268ff 48%, #7754ef); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: clamp(2rem, 4vw, 3.65rem); }
.home-header p { color: var(--muted); }
.streak-pill, .icon-button, .avatar-button { border-color: var(--border); background: var(--glass); box-shadow: var(--shadow-soft); backdrop-filter: blur(15px); }
.avatar-button { background: linear-gradient(145deg, #136aff, #7655ef); }
.filters { gap: 14px; margin-bottom: 18px; }
.sheet-search, .filter-button { border-color: var(--border); background: var(--glass); box-shadow: 0 10px 25px rgba(35, 81, 155, .08), inset 0 1px rgba(255,255,255,.85); backdrop-filter: blur(16px); }
.global-search-box > strong { color: #eef8ff; }
.sheet-search { min-height: 52px; border-radius: 18px; }.sheet-search input { font-size: .88rem; }
.filter-button { min-height: 48px; border-radius: 15px; }
.filter-button:hover { box-shadow: var(--shadow-glow); }
.filter-button.is-active { border-color: rgba(77, 211, 255, .55); background: linear-gradient(135deg, #1268ff, #6e52ef); box-shadow: var(--shadow-glow); }
.home-insights { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin: 0 0 22px; }
.home-insights article { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 19px; background: var(--glass); padding: 12px; box-shadow: var(--shadow-soft); backdrop-filter: blur(16px); }
.home-insights article > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; background: linear-gradient(145deg, rgba(26, 121, 255, .16), rgba(108, 76, 241, .18)); color: #176be3; font-size: 1.1rem; }
.home-insights strong,.home-insights small { display:block }.home-insights strong { font-size:.77rem }.home-insights small { margin-top:3px;color:var(--muted);font-size:.62rem }.home-insights b { color:#175ed0;font-size:1.05rem }
.stats-dashboard { margin: 0 0 24px; border: 1px solid rgba(112, 211, 255, .28); border-radius: 26px; background: linear-gradient(145deg, rgba(248, 252, 255, .88), rgba(235, 244, 255, .76)); box-shadow: var(--shadow-soft), inset 0 1px rgba(255,255,255,.86); padding: clamp(16px, 2vw, 24px); backdrop-filter: blur(18px); }
.stats-dashboard-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.stats-dashboard-heading h2 { margin: 0; color: #0b2565; font-size: clamp(1.25rem, 2vw, 1.9rem); line-height: 1; }
.stats-dashboard-heading p:last-child { max-width: 420px; margin: 0; color: var(--muted); font-size: .82rem; font-weight: 750; line-height: 1.35; }
.stats-period-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.stats-period-card { position: relative; overflow: hidden; border: 1px solid rgba(95, 145, 220, .18); border-radius: 22px; background: rgba(255,255,255,.7); box-shadow: 0 16px 36px rgba(22, 66, 130, .1), inset 0 1px rgba(255,255,255,.9); padding: 15px; }
.stats-period-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, #13c9f5, #1268ff, #7b56f5); opacity: .86; }
.stats-period-card header { position: relative; display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
.stats-period-card header > span { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border-radius: 14px; background: linear-gradient(145deg, #1268ff, #7055f2); color: #fff; font-size: 1.15rem; font-weight: 950; box-shadow: 0 10px 22px rgba(28,105,235,.2); }
.stats-period-card header strong { display: block; color: #102c69; font-size: .96rem; font-weight: 950; }
.stats-period-card header small { display: block; margin-top: 2px; color: var(--muted); font-size: .7rem; font-weight: 800; }
.stats-metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
.stats-metric-grid p { display: grid; grid-template-columns: 28px minmax(0,1fr); grid-template-rows: auto auto; align-items: center; gap: 1px 8px; min-width: 0; min-height: 58px; margin: 0; border: 1px solid rgba(110, 155, 220, .15); border-radius: 15px; background: rgba(255,255,255,.64); padding: 8px; }
.stats-metric-grid p > span { grid-row: 1 / 3; display: grid; width: 28px; height: 28px; place-items: center; border-radius: 10px; background: rgba(19, 104, 255, .11); color: #1268ff; font-weight: 950; }
.stats-metric-grid b { min-width: 0; color: #1260d8; font-size: clamp(1.05rem, 1.5vw, 1.35rem); font-weight: 950; line-height: 1; overflow-wrap: anywhere; }
.stats-metric-grid small { min-width: 0; color: #5d6b89; font-size: .66rem; font-weight: 820; line-height: 1.1; overflow-wrap: anywhere; }
.stats-best-score { grid-column: 1 / -1; }
.stats-best-score b { font-size: clamp(.95rem, 1.35vw, 1.18rem); }
.stats-activity-panel { margin-top: 14px; border: 1px solid rgba(95, 145, 220, .18); border-radius: 20px; background: rgba(255,255,255,.58); box-shadow: inset 0 1px rgba(255,255,255,.78); padding: 14px; }
.stats-activity-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.stats-activity-heading strong { display: block; color: #102c69; font-size: .98rem; font-weight: 950; }
.stats-activity-heading small { display: block; margin-top: 2px; color: var(--muted); font-size: .7rem; font-weight: 800; }
.stats-activity-list { display: grid; gap: 8px; max-height: 360px; overflow: auto; margin: 0; padding: 0; list-style: none; }
.stats-activity-list li { display: grid; grid-template-columns: minmax(78px, .35fr) minmax(120px, .7fr) minmax(0, 1.35fr); align-items: center; gap: 10px; min-width: 0; border: 1px solid rgba(110, 155, 220, .15); border-radius: 14px; background: rgba(255,255,255,.68); padding: 9px 10px; }
.stats-activity-list time { color: #1260d8; font-size: .72rem; font-weight: 900; white-space: nowrap; }
.stats-activity-list strong { min-width: 0; color: #102c69; font-size: .78rem; font-weight: 940; overflow-wrap: anywhere; }
.stats-activity-list span { min-width: 0; color: #5d6b89; font-size: .76rem; font-weight: 760; line-height: 1.2; overflow-wrap: anywhere; }
.stats-activity-list .stats-activity-empty { grid-template-columns: 1fr; color: #5d6b89; font-weight: 820; text-align: center; }
.stats-accordion { display: grid; gap: .85rem; width: 100%; }
.stats-panel { overflow: hidden; border: 1px solid rgba(90, 190, 255, .28); border-radius: 24px; background: linear-gradient(135deg, rgba(6, 18, 44, .96), rgba(10, 28, 64, .92)); box-shadow: 0 14px 32px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.08); }
.stats-panel-header { display: grid; width: 100%; grid-template-columns: auto minmax(0,1fr) auto auto; align-items: center; gap: .9rem; border: 0; background: transparent; color: #fff; cursor: pointer; padding: clamp(.78rem, 1.2vw, 1rem) clamp(.9rem, 1.5vw, 1.2rem); text-align: left; appearance: none; }
.stats-panel-header:hover { background: rgba(125, 220, 255, .07); }
.stats-panel-header:focus-visible { outline: 3px solid rgba(125, 244, 255, .65); outline-offset: -5px; }
.stats-panel-icon { display: inline-flex; width: 46px; height: 46px; align-items: center; justify-content: center; border-radius: 14px; background: linear-gradient(135deg, #147cff, #685cff); box-shadow: 0 0 18px rgba(70, 140, 255, .35); color: #fff; font-size: 1.15rem; font-weight: 950; }
.stats-panel-copy { display: grid; min-width: 0; gap: .12rem; }
.stats-panel-title { color: #fff; font-size: clamp(1.05rem, 1.8vw, 1.35rem); font-weight: 950; line-height: 1.05; }
.stats-panel-subtitle { color: rgba(220, 230, 255, .74); font-size: .82rem; font-weight: 760; line-height: 1.2; }
.stats-panel-summary { min-width: 0; color: rgba(220, 240, 255, .86); font-size: clamp(.82rem, 1.15vw, .98rem); font-weight: 850; line-height: 1.2; white-space: nowrap; }
.stats-panel-chevron { color: #7df4ff; font-size: 1.45rem; font-weight: 950; line-height: 1; transition: transform .18s ease; }
.stats-panel.is-open .stats-panel-chevron { transform: rotate(180deg); }
.stats-panel-content { border-top: 1px solid rgba(125, 220, 255, .12); padding: 0 clamp(.9rem, 1.5vw, 1.2rem) clamp(.9rem, 1.5vw, 1.2rem); }
.stats-mini-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; padding-top: .9rem; }
.stats-mini-card { display: grid; grid-template-columns: 32px minmax(0,1fr); grid-template-rows: auto auto; align-items: center; gap: .1rem .65rem; min-width: 0; margin: 0; border: 1px solid rgba(125, 220, 255, .18); border-radius: 18px; background: rgba(255,255,255,.08); padding: .85rem; }
.stats-mini-card > span { grid-row: 1 / 3; display: grid; width: 32px; height: 32px; place-items: center; border-radius: 12px; background: rgba(125, 244, 255, .12); color: #7df4ff; font-weight: 950; }
.stats-mini-value { min-width: 0; color: #fff; font-size: clamp(1.25rem, 2.2vw, 1.8rem); font-weight: 950; line-height: 1; overflow-wrap: anywhere; }
.stats-mini-label { min-width: 0; color: rgba(220, 230, 255, .74); font-size: .78rem; font-weight: 780; line-height: 1.15; overflow-wrap: anywhere; }
.activity-accordion-list { max-height: 280px; padding-top: .9rem; overflow-y: auto; }
.activity-accordion-list li { background: rgba(255,255,255,.08); border-color: rgba(125, 220, 255, .14); }
@media (max-width: 700px) {
  .stats-panel-header { grid-template-columns: auto minmax(0,1fr) auto; gap: .55rem .75rem; }
  .stats-panel-summary { grid-column: 2 / -1; white-space: normal; }
  .stats-panel-icon { width: 40px; height: 40px; border-radius: 13px; }
  .activity-accordion-list li { grid-template-columns: 1fr; gap: .25rem; }
}
.sheet-grid { grid-template-columns: repeat(6, minmax(110px, 1fr)); gap: 14px; }
.search-results-header,
.search-empty,
.search-result-card {
  border-color: var(--border);
  background: var(--glass);
  box-shadow: var(--shadow-soft), inset 0 1px rgba(255,255,255,.75);
  backdrop-filter: blur(16px);
}

.search-result-card img {
  background: rgba(255,255,255,.78);
}

.search-result-copy p {
  color: #31c9ff;
}

.search-result-extra span {
  background: rgba(255,255,255,.1);
  color: #d7eaff;
}

.search-results-header span,
.search-empty p,
.search-result-copy small {
  color: #bdd4f0;
}

.open-search-result {
  border-color: rgba(121, 236, 255, .48);
  background: linear-gradient(135deg, rgba(20, 125, 255, .88), rgba(124, 74, 255, .78));
  color: #fff;
}

.sheet-card { min-height: 164px; border-color: var(--border); border-radius: var(--radius-lg); background: var(--glass); padding: 14px 8px 11px; box-shadow: var(--shadow-soft), inset 0 1px rgba(255,255,255,.82); backdrop-filter: blur(14px); }
.sheet-card::before { content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; background:linear-gradient(130deg,rgba(255,255,255,.5),transparent 34%); opacity:.55 }
.sheet-card:hover { border-color: rgba(55, 173, 255, .42); box-shadow: 0 20px 40px rgba(34, 92, 181, .18), 0 0 28px rgba(50, 194, 255, .12); transform: translateY(-6px) scale(1.01); }
.sheet-icon { width: min(100%, 110px); height: 86px; min-height: 86px; color: #7155ed; font-size: 2.35rem; filter: drop-shadow(0 7px 9px rgba(91,72,220,.18)); }.sheet-title { color: #53658d; }
.home-message,.empty-state { border:1px solid rgba(40,185,255,.25);border-radius:17px;background:rgba(226,246,255,.78);box-shadow:var(--shadow-soft) }

/* Reader */
.reader-view { width: min(1420px, calc(100% - 34px)); padding: 24px 0 60px; animation: premium-fade .45s ease both; }
.back-home { border-color: var(--border); background: var(--glass); box-shadow: var(--shadow-soft); backdrop-filter: blur(15px); }
.reader-hero { grid-template-columns: minmax(0, 1fr) minmax(280px, .34fr); gap: 18px; align-items:start; }
.reader-copy, .sheet-preview, .quiz-panel, .word-card, .zoom-dialog { border-color: var(--border); background: var(--glass); box-shadow: var(--shadow-soft), inset 0 1px rgba(255,255,255,.75); backdrop-filter: blur(18px); }
.reader-copy { position: relative; overflow: hidden; min-height: 500px; justify-content: flex-start; border-radius: var(--radius-xl); padding: clamp(22px, 2.6vw, 34px); }
.reader-copy::after { content:""; position:absolute; z-index:-1; width:360px;height:360px;right:-170px;top:-180px;border-radius:50%;background:radial-gradient(circle,#25d4ff 0,#6553f0 46%,transparent 70%);opacity:.25;filter:blur(8px) }
.section-label { color: #116fe6; letter-spacing: .12em; }
.reader-copy h1 { max-width: 760px; background: linear-gradient(100deg, #07194b, #1268ff 52%, #7554ef); -webkit-background-clip:text;background-clip:text;color:transparent;font-size:clamp(1.55rem,2.8vw,2.8rem);line-height:1.05 }
.reader-copy .sheet-title-block {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  gap: .35rem;
  max-width: min(100%, 820px);
  padding: clamp(1.2rem, 2vw, 1.8rem) clamp(4.5rem, 6vw, 6rem) clamp(1.2rem, 2vw, 1.8rem) clamp(1.4rem, 2.5vw, 2.2rem);
  border: 2px solid rgba(130, 235, 255, .58);
  border-radius: clamp(26px, 3vw, 42px);
  background:
    linear-gradient(135deg, rgba(2, 10, 28, .96), rgba(5, 34, 68, .9)),
    radial-gradient(circle at 15% 8%, rgba(130, 255, 255, .35), transparent 38%),
    radial-gradient(circle at 90% 85%, rgba(120, 95, 255, .28), transparent 36%);
  box-shadow:
    0 26px 65px rgba(0, 0, 0, .45),
    0 0 32px rgba(60, 220, 255, .35),
    0 0 70px rgba(65, 130, 255, .18),
    inset 0 2px 0 rgba(255, 255, 255, .26),
    inset 0 -10px 20px rgba(0, 0, 0, .32);
  overflow: hidden;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.reader-copy .sheet-title-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, .22) 18%, transparent 34%);
  opacity: .65;
  pointer-events: none;
}
.reader-copy .sheet-title-kicker {
  position: relative;
  z-index: 2;
  color: #9ffcff;
  font-size: clamp(.8rem, 1.2vw, 1.1rem);
  font-weight: 950;
  letter-spacing: .22em;
  text-shadow:
    0 0 10px rgba(130, 255, 255, 1),
    0 0 26px rgba(45, 220, 255, .65),
    0 2px 0 rgba(0, 0, 0, .55);
}
.reader-copy .sheet-title-number {
  position: relative;
  z-index: 2;
  color: #fff;
  font-size: clamp(1.15rem, 2vw, 1.9rem);
  font-weight: 950;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, .55),
    0 0 18px rgba(120, 230, 255, .65);
}
.reader-copy .sheet-title-main {
  position: relative;
  z-index: 2;
  max-width: 100%;
  margin: 0;
  background: linear-gradient(180deg, #fff 0%, #b9fbff 18%, #67dcff 38%, #2f7dff 66%, #8f7cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter:
    drop-shadow(0 8px 0 rgba(0, 50, 140, .45))
    drop-shadow(0 18px 26px rgba(0, 0, 0, .5))
    drop-shadow(0 0 22px rgba(95, 220, 255, .65));
  font-size: clamp(3.2rem, 6.5vw, 7.4rem);
  font-weight: 1000;
  letter-spacing: 0;
  line-height: .92;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, .7),
    0 5px 0 rgba(0, 45, 130, .4),
    0 0 30px rgba(80, 220, 255, .75);
}
.reader-copy .sheet-title-sub {
  position: relative;
  z-index: 2;
  color: #f6fcff;
  font-size: clamp(1.5rem, 3vw, 2.8rem);
  font-weight: 950;
  text-shadow:
    0 3px 0 rgba(0, 0, 0, .48),
    0 0 18px rgba(100, 220, 255, .55);
}
.reader-copy .sheet-favorite-button {
  z-index: 10;
  width: clamp(3rem, 4.5vw, 4.2rem);
  height: clamp(3rem, 4.5vw, 4.2rem);
  border: 1px solid rgba(170, 230, 255, .34);
  background: linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04));
  box-shadow:
    0 12px 28px rgba(0, 0, 0, .3),
    inset 0 1px 0 rgba(255, 255, 255, .22);
  color: rgba(220, 240, 255, .9);
  font-size: clamp(2rem, 3.2vw, 3rem);
  text-shadow: 0 0 14px rgba(100, 210, 255, .55);
}
.reader-copy .sheet-favorite-button:hover {
  background: rgba(255, 220, 80, .16);
  color: #ffe066;
  text-shadow:
    0 0 14px rgba(255, 220, 90, .95),
    0 0 34px rgba(255, 180, 40, .65);
}
.reader-copy .sheet-favorite-button.is-favorite,
.reader-copy .sheet-favorite-button[aria-pressed="true"] {
  border-color: rgba(255, 220, 80, .6);
  background: rgba(255, 220, 80, .18);
  color: #ffd43b;
  text-shadow:
    0 0 16px rgba(255, 220, 90, 1),
    0 0 38px rgba(255, 180, 40, .75);
}
.reader-text { color:var(--muted);font-size:1.03rem }
.toolbar {
  display: grid;
  grid-template-columns: minmax(150px, .82fr) minmax(220px, 1.35fr) minmax(165px, .9fr);
  gap: clamp(.8rem, 1.5vw, 1.35rem);
  align-items: end;
  margin-bottom: 18px;
  padding: clamp(1rem, 2vw, 1.45rem);
  border: 1px solid rgba(110, 255, 180, .35);
  border-radius: 32px;
  background:
    radial-gradient(circle at top left, rgba(80, 255, 140, .18), transparent 35%),
    radial-gradient(circle at bottom right, rgba(0, 255, 170, .1), transparent 30%),
    linear-gradient(135deg, rgba(8, 24, 18, .95), rgba(10, 38, 28, .96));
  box-shadow:
    0 0 0 1px rgba(80, 255, 160, .12),
    0 0 18px rgba(60, 255, 150, .18),
    0 12px 28px rgba(0, 0, 0, .35),
    inset 0 1px 0 rgba(255, 255, 255, .1),
    inset 0 -6px 12px rgba(0, 0, 0, .25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.toolbar .field {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: .55rem;
  color: #8dffb8;
  font-weight: 900;
}
.toolbar .field span {
  padding-left: .25rem;
  color: #8dffb8;
  font-size: clamp(.95rem, 1.1vw, 1.18rem);
  letter-spacing: .01em;
  text-shadow: 0 0 8px rgba(90, 255, 170, .45), 0 0 18px rgba(90, 255, 170, .2);
}
.toolbar .field input,
.toolbar .field select {
  width: 100%;
  min-width: 0;
  min-height: 60px;
  border: 1px solid rgba(90, 255, 170, .38);
  border-radius: 24px;
  outline: none;
  background: linear-gradient(180deg, rgba(245, 255, 248, .98), rgba(228, 255, 238, .94));
  box-shadow:
    0 0 0 1px rgba(90, 255, 170, .12),
    0 0 10px rgba(90, 255, 170, .1),
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -3px 8px rgba(80, 180, 110, .1);
  color: #10261a;
  padding: 0 1.2rem;
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  font-weight: 750;
}
.toolbar .field input::placeholder {
  color: #67776d;
  opacity: 1;
}
.toolbar .field select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 3rem;
}
.toolbar .field:has(select)::after {
  content: "⌄";
  position: absolute;
  right: 1rem;
  bottom: 16px;
  color: #1c5b37;
  font-size: 1.4rem;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 0 10px rgba(90, 255, 170, .25);
}
.toolbar .field input:focus,
.toolbar .field select:focus {
  border-color: rgba(90, 255, 170, .95);
  box-shadow:
    0 0 0 4px rgba(90, 255, 170, .18),
    0 0 18px rgba(90, 255, 170, .22),
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -3px 8px rgba(80, 180, 110, .1);
}
.toolbar .field select option {
  color: #10261a;
  background: #f5fff8;
  font-weight: 700;
}
@media (max-width: 980px) {
  .toolbar {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
}
@media (max-width: 640px) {
  .toolbar {
    gap: .75rem;
    padding: .9rem;
    border-radius: 24px;
  }
  .toolbar .field {
    gap: .42rem;
  }
  .toolbar .field span {
    font-size: .95rem;
  }
  .toolbar .field input,
  .toolbar .field select {
    min-height: 54px;
    border-radius: 20px;
    font-size: 1rem;
  }
  .toolbar .field:has(select)::after {
    bottom: 14px;
  }
}
.actions { display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:2px 0 16px }
.activity-button { position:relative;isolation:isolate;min-height:116px;border:1px solid rgba(255,255,255,.36);border-radius:22px;color:#fff;padding:16px 12px;text-align:center;justify-content:center;align-items:center;overflow:hidden;box-shadow:0 12px 25px rgba(28,62,130,.18),inset 0 1px rgba(255,255,255,.45),inset 0 -5px rgba(0,0,0,.08);text-shadow:0 1px 2px rgba(0,0,0,.12);font-size:.88rem;line-height:1.18 }
.activity-button::after { content:"";position:absolute;z-index:-1;inset:-50% auto -50% -70%;width:48%;transform:rotate(18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);transition:transform .55s ease }
.activity-button:hover:not(:disabled) { transform:translateY(-4px);box-shadow:0 17px 30px rgba(28,62,130,.24),0 0 24px rgba(51,181,255,.12) }.activity-button:hover::after{transform:translateX(390%) rotate(18deg)}
.listen-activity { background:linear-gradient(135deg,#0878ff,#1354df) }.quiz-activity { background:linear-gradient(135deg,#071b56,#1849a5) }.replay-activity { background:linear-gradient(135deg,#10a9d4,#087eae) }.eval-activity,.eval-launch-button { background:linear-gradient(135deg,#8359f4,#5938c8) }.qcm-activity,.qcm-launch-button { background:linear-gradient(135deg,#19bd93,#07876e) }.memory-activity,.memory-launch-button { background:linear-gradient(135deg,#ff9a3c,#df5c19) }.random-activity,.warm-button { background:linear-gradient(135deg,#ffb42e,#e47a15) }.zoom-activity { background:linear-gradient(135deg,#7182a7,#495b7e) }.stop-activity { background:linear-gradient(135deg,#fff,#eef3fa);color:#d13e4d;text-shadow:none;border-color:rgba(210,70,85,.18) }
.activity-button:disabled { filter:grayscale(.35);opacity:.46;box-shadow:none }
.quiz-panel { width:100%;grid-template-columns:auto 1fr auto auto;align-items:center;border-radius:20px;padding:16px 18px }.quiz-panel strong{color:#1762d3}.quiz-panel #score{border-radius:999px;background:var(--accent-soft);color:#135ccc;padding:7px 11px;font-weight:900}
.sheet-preview { position:relative;min-height:0;border-radius:18px;padding:8px }.sheet-preview::before{content:none}.sheet-preview img{border-radius:13px;box-shadow:0 12px 26px rgba(20,50,110,.16)}
.learning-rail { display:grid;gap:14px }
.rail-card { border:1px solid var(--border);border-radius:24px;background:var(--glass);padding:18px;box-shadow:var(--shadow-soft),inset 0 1px rgba(255,255,255,.85);backdrop-filter:blur(18px) }
.rail-card h2 { margin:0;color:#07194b;font-size:1.1rem }.rail-card p{margin:10px 0 0;color:var(--muted);font-size:.86rem}.rail-card b{color:#07194b}
.rail-progress>div:first-child { display:flex;align-items:center;gap:9px;margin-bottom:14px }.rail-icon{display:grid;width:32px;height:32px;place-items:center;border-radius:10px;background:rgba(26,119,255,.12);color:#1268ff;font-weight:900}
.rail-ring { display:grid;width:138px;height:138px;place-items:center;margin:0 auto 14px;border-radius:50%;background:conic-gradient(#13d4c7 0 0%, #1268ff 0 0%, rgba(210,224,248,.7) 0%);box-shadow:0 0 26px rgba(19,201,245,.18);position:relative }
.rail-ring::before { content:"";position:absolute;width:108px;height:108px;border-radius:inherit;background:rgba(255,255,255,.88);box-shadow:inset 0 0 18px rgba(40,95,160,.08) }.rail-ring strong,.rail-ring span{position:relative}.rail-ring strong{align-self:end;font-size:1.6rem}.rail-ring span{align-self:start;color:#53658d;font-size:.72rem}
.goal-list { display:grid;gap:10px;margin:14px 0 0;padding:0;list-style:none }.goal-list li{position:relative;overflow:hidden;display:grid;grid-template-columns:31px 1fr auto;align-items:center;gap:9px;border:1px solid rgba(95,145,220,.16);border-radius:14px;background:rgba(255,255,255,.58);padding:9px;font-size:.78rem;font-weight:780;color:#18346d;transition:transform .18s ease, border-color .18s ease, background .18s ease}.goal-list li::before{content:"";position:absolute;inset:auto 0 0;height:3px;background:linear-gradient(90deg,#13c9f5,#16b982);transform:scaleX(var(--goal-progress,0));transform-origin:left;transition:transform .25s ease}.goal-list span{display:grid;width:31px;height:31px;place-items:center;border-radius:10px;background:rgba(19,104,255,.12);color:#1268ff;font-weight:950}.goal-list b{color:#52627f}.goal-list li.is-complete{border-color:rgba(22,185,130,.32);background:linear-gradient(135deg,rgba(231,255,245,.88),rgba(255,255,255,.64));animation:goal-pop .32s ease}.goal-list li.is-complete span,.goal-list li.is-complete b{background:#16b982;color:#fff}.goal-list li.is-complete span{box-shadow:0 8px 18px rgba(22,185,130,.25)}.goal-list li.is-complete b{border-radius:999px;padding:4px 8px}.goal-list li.is-pending span{background:rgba(120,140,175,.13);color:#7b89a8}
.revision-card { background:linear-gradient(145deg,#4835d6,#704ff3);color:#fff;overflow:hidden;position:relative }.revision-card::after{content:"";position:absolute;right:-45px;bottom:-45px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.24),transparent 65%)}.revision-card h2,.revision-card p{color:#fff}.revision-card .ghost-button{margin-top:14px;background:#fff;color:#412dc5}
.reset-progress-button { position:relative;z-index:1;width:100%;min-height:36px;margin-top:10px;border:1px solid rgba(255,255,255,.32);border-radius:12px;background:rgba(255,255,255,.12);color:#fff;font-weight:850;box-shadow:inset 0 1px rgba(255,255,255,.16);transition:.16s ease }
.reset-progress-button:hover { background:rgba(255,255,255,.2);transform:translateY(-1px) }
.word-section { padding-top:42px }.section-heading h2{background:linear-gradient(100deg,#07194b,#1268ff 70%,#7554ef);-webkit-background-clip:text;background-clip:text;color:transparent}.pdf-button{border-color:rgba(77,211,255,.42);background:linear-gradient(135deg,#1268ff,#6e52ef);box-shadow:0 12px 24px rgba(18,104,255,.2),inset 0 1px rgba(255,255,255,.32)}
.word-grid { grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px }.word-card{min-height:370px;border-radius:25px;padding:14px}.word-card:hover,.word-card:focus,.word-card.is-random{box-shadow:0 20px 40px rgba(27,80,170,.18),0 0 26px rgba(25,198,255,.12);transform:translateY(-6px)}.word-picture{border:1px solid rgba(119,166,235,.2);border-radius:19px;background:rgba(255,255,255,.7);overflow:hidden}.word-fr{font-size:1.15rem}.card-actions{grid-template-columns:repeat(auto-fit,minmax(58px,1fr));gap:7px}.card-actions .audio-button{min-height:38px;border:1px solid rgba(60,135,230,.14);background:rgba(31,117,245,.1);font-size:.72rem}

/* Premium dialogs */
.written-eval-dialog,.qcm-dialog,.memory-dialog,.random-word-dialog,.quiz-creator-dialog,.zoom-dialog { border:1px solid rgba(112,211,255,.28);background:linear-gradient(145deg,rgba(248,252,255,.94),rgba(238,245,255,.91));box-shadow:0 35px 100px rgba(4,18,55,.42),0 0 45px rgba(44,193,255,.14);backdrop-filter:blur(22px);animation:premium-modal .3s ease both }
.qcm-dialog { color:#f8fbff;border-color:rgba(76,189,255,.58);background:linear-gradient(155deg,rgba(14,27,55,.96),rgba(8,16,35,.96) 58%,rgba(42,28,63,.96));box-shadow:0 35px 100px rgba(4,18,55,.55),0 0 0 1px rgba(255,185,88,.25),0 0 35px rgba(47,161,255,.28),0 0 48px rgba(255,164,58,.18)}
.written-eval-dialog::backdrop,.qcm-dialog::backdrop,.memory-dialog::backdrop,.random-word-dialog::backdrop,.quiz-creator-dialog::backdrop,.zoom-dialog::backdrop{background:rgba(4,12,34,.72);backdrop-filter:blur(10px)}
.eval-header,.qcm-header,.memory-header,.random-word-header,.quiz-creator-header { border-bottom:1px solid rgba(106,154,225,.18);padding-bottom:18px }.eval-header h2,.qcm-header h2,.memory-header h2,.random-word-header h2,.quiz-creator-header h2{background:linear-gradient(100deg,#0a2467,#1268ff,#7954ef);-webkit-background-clip:text;background-clip:text;color:transparent}.qcm-header h2{background:linear-gradient(100deg,#fff,#6edaff,#ffbf68);-webkit-background-clip:text;background-clip:text;color:transparent}.qcm-header p:not(.section-label){color:#cdd9ef}.qcm-dialog .section-label{color:#73d9ff}
.eval-option-group,.eval-history-panel,.qcm-question-card,.memory-stats { border-color:var(--border);background:rgba(255,255,255,.62);box-shadow:var(--shadow-soft),inset 0 1px rgba(255,255,255,.9);backdrop-filter:blur(15px) }.qcm-question-card{border-color:rgba(104,194,255,.25);background:rgba(18,34,64,.82);box-shadow:inset 0 1px rgba(255,255,255,.08),0 20px 45px rgba(0,0,0,.24)}.qcm-progress-row{background:rgba(255,255,255,.07);color:#fff;border:1px solid rgba(117,196,255,.17)}.qcm-progress-row span{color:#80dcff}
.qcm-dialog .eval-option-group,.qcm-dialog .eval-history-panel{border-color:rgba(212,227,249,.95);background:rgba(248,252,255,.95);color:#07194b;box-shadow:0 18px 38px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.95)}
.qcm-dialog .eval-option-group legend{float:left;width:100%;margin:0 0 14px;padding:0;color:#07194b;text-shadow:0 1px 0 rgba(255,255,255,.65)}
.qcm-dialog .eval-option-group legend + *{clear:both}
.qcm-dialog .eval-choice{border-color:#c6d6eb;background:#f6f9fd;color:#07194b}
.qcm-dialog .eval-choice strong,.qcm-dialog .eval-radio,.qcm-dialog .eval-history-panel strong{color:#07194b}
.qcm-dialog .eval-choice:has(input:checked){border-color:#47b7ff;background:#eaf6ff;box-shadow:0 0 0 2px rgba(71,183,255,.22)}
.qcm-dialog .eval-option-group select{border-color:#d5e0ef;background:#fff;color:#07194b}
.qcm-dialog .eval-history p,.qcm-dialog .eval-history li small{color:#4a5f86}
.eval-choice { border-color:var(--border);background:rgba(248,251,255,.8);box-shadow:0 8px 18px rgba(35,75,145,.07) }.eval-choice:has(input:checked){border-color:rgba(29,158,255,.58);background:linear-gradient(145deg,rgba(221,244,255,.95),rgba(235,230,255,.9));box-shadow:0 14px 30px rgba(26,116,235,.16),0 0 24px rgba(36,197,255,.11)}
.qcm-answer-button { position:relative;counter-increment:qcm-answer;min-height:72px;border-color:var(--border);border-radius:19px;background:rgba(255,255,255,.76);box-shadow:var(--shadow-soft);font-size:1rem }.qcm-answers{counter-reset:qcm-answer}.qcm-answer-button::before{content:counter(qcm-answer,upper-alpha);display:inline-grid;width:34px;height:34px;place-items:center;margin-right:10px;border-radius:11px;background:linear-gradient(145deg,#1b87ff,#6258ed);color:#fff;box-shadow:0 7px 14px rgba(28,105,235,.22)}.qcm-dialog .qcm-answer-button{color:#f8fbff;border-color:rgba(121,177,255,.18);background:rgba(255,255,255,.055);box-shadow:inset 0 1px rgba(255,255,255,.06),0 10px 22px rgba(0,0,0,.16)}.qcm-answer-button:hover:not(:disabled){border-color:#36bfee;box-shadow:var(--shadow-glow);transform:translateY(-3px)}.qcm-answer-button.is-correct{border-color:#35d08b;box-shadow:0 0 26px rgba(22,185,130,.25)}.qcm-answer-button.is-wrong{border-color:#ef6b79;box-shadow:0 0 25px rgba(220,74,90,.2)}
.memory-card-back { background:linear-gradient(145deg,#0d77ff,#493fdb 55%,#8455f2);box-shadow:0 10px 25px rgba(34,71,175,.25),inset 0 1px rgba(255,255,255,.45) }.memory-card-back::before{content:"✦";font-size:clamp(1.5rem,4vw,3rem);text-shadow:0 0 22px rgba(134,235,255,.8)}.memory-card-back::after{inset:-60% -90%;border:0;border-radius:0;background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.28) 50%,transparent 58%);transform:rotate(-15deg)}.memory-card.is-matched .memory-card-front{border-color:#29d78c;box-shadow:0 0 25px rgba(32,213,139,.35)}
.qcm-final-score,.memory-final-result,.eval-result{border-color:rgba(35,205,137,.35);background:linear-gradient(145deg,rgba(226,255,243,.94),rgba(235,255,251,.78));box-shadow:0 18px 45px rgba(23,165,113,.16),0 0 28px rgba(38,220,170,.12)}
.random-card { border-color:var(--border);background:rgba(255,255,255,.68);box-shadow:var(--shadow-soft),inset 0 1px rgba(255,255,255,.9);backdrop-filter:blur(16px) }
.random-image-frame { border:1px solid rgba(119,166,235,.22);background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(232,243,255,.72));box-shadow:inset 0 1px rgba(255,255,255,.8) }
.random-language-pill { background:linear-gradient(145deg,#1268ff,#7055f2);color:#fff;box-shadow:0 10px 22px rgba(28,105,235,.2) }
.random-card-copy > strong { background:linear-gradient(100deg,#07194b,#1268ff 56%,#7b56f5);-webkit-background-clip:text;background-clip:text;color:transparent }
.random-translations { border:1px solid rgba(95,145,220,.16);background:rgba(255,255,255,.6);box-shadow:inset 0 1px rgba(255,255,255,.8) }
.quiz-creator-step,.quiz-creator-placeholder,.quiz-creator-panel,.quiz-creator-sheet-option,.quiz-creator-word-option,.quiz-creator-type-card,.quiz-creator-summary,.quiz-creator-preview-panel div,.quiz-creator-preset-row { border-color:var(--border);background:rgba(255,255,255,.68);box-shadow:var(--shadow-soft),inset 0 1px rgba(255,255,255,.9);backdrop-filter:blur(16px) }
.quiz-creator-step.is-current { border-color:rgba(29,158,255,.58);background:linear-gradient(145deg,rgba(221,244,255,.95),rgba(235,230,255,.9));box-shadow:0 14px 30px rgba(26,116,235,.16),0 0 24px rgba(36,197,255,.11) }
.quiz-creator-step span { background:linear-gradient(145deg,#1268ff,#7055f2);color:#fff;box-shadow:0 8px 18px rgba(28,105,235,.18) }
.quiz-creator-field input,.quiz-creator-field select { border-color:rgba(130,174,235,.32);background:rgba(255,255,255,.82);box-shadow:0 7px 18px rgba(30,75,150,.07) }
.quiz-creator-sheet-option:has(input:checked),.quiz-creator-word-option:has(input:checked),.quiz-creator-type-card:has(input:checked),.quiz-creator-summary { border-color:rgba(29,158,255,.5);background:linear-gradient(145deg,rgba(221,244,255,.9),rgba(238,235,255,.82)) }

@keyframes premium-pulse { 0%,100%{box-shadow:0 0 20px rgba(20,174,255,.15)} 50%{box-shadow:0 0 32px rgba(20,174,255,.28)} }
@keyframes premium-fade { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
@keyframes premium-modal { from{opacity:0;transform:translateY(18px) scale(.985)} to{opacity:1;transform:none} }
@keyframes goal-pop { 0%{transform:scale(.98)} 60%{transform:scale(1.025)} 100%{transform:scale(1)} }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} }

/* Responsive premium layout */
@media (max-width: 1250px) {
  .dashboard{grid-template-columns:92px minmax(0,1fr)}.brand{display:grid;grid-template-columns:1fr;justify-items:center}.brand>span:last-child{display:none}.sidebar{padding-inline:10px}.premium-nav .nav-item{justify-content:center;padding:0;font-size:0}.premium-nav .nav-item span{font-size:1rem}.sidebar-widgets{display:none}.sheet-grid{grid-template-columns:repeat(4,minmax(110px,1fr))}.home-insights{grid-template-columns:repeat(2,minmax(0,1fr))}.stats-period-grid{grid-template-columns:1fr}.stats-metric-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.reader-hero{grid-template-columns:minmax(0,1fr) minmax(260px,.34fr)}.learning-rail{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr))}.actions{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width: 900px) {
  .reader-hero{grid-template-columns:1fr}.reader-copy,.sheet-preview{min-height:auto}.sheet-preview{max-height:220px}.learning-rail{grid-template-columns:1fr}.actions{grid-template-columns:repeat(2,minmax(0,1fr))}.home-insights{display:none}.stats-dashboard-heading{align-items:flex-start;flex-direction:column}.stats-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 680px) {
  .dashboard{display:block}.sidebar{height:76px;padding:7px 8px;background:linear-gradient(100deg,#071839,#10184c);border-top-color:rgba(109,196,255,.25)}.premium-nav{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:0}.premium-nav .nav-item:nth-child(n+8){display:none}.premium-nav .nav-item{min-height:60px;border-radius:12px;font-size:.55rem;gap:1px;display:grid;place-items:center}.premium-nav .nav-item span{width:25px;height:25px;font-size:.9rem}.legacy-nav{display:none}.home-main{padding:22px 12px 98px}.home-header h1{font-size:2rem}.home-kicker{font-size:.62rem}.stats-dashboard{border-radius:20px;padding:13px}.stats-metric-grid{grid-template-columns:1fr}.stats-metric-grid p{min-height:54px}.sheet-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.sheet-card{min-height:158px}.reader-view{width:min(100% - 18px,1420px);padding-top:10px}.reader-copy{border-radius:24px;padding:22px 14px}.sheet-title-row{grid-template-columns:minmax(0,1fr) 104px}.reader-copy .sheet-title-block{width:100%;padding:1rem 4rem 1rem 1rem;border-radius:26px}.reader-copy .sheet-title-main{font-size:clamp(2.5rem,12vw,4.2rem);line-height:1}.reader-copy .sheet-title-sub{font-size:clamp(1.2rem,6vw,1.8rem)}.toolbar,.actions{grid-template-columns:1fr}.activity-button{min-height:56px}.quiz-panel{grid-template-columns:1fr}.sheet-preview{border-radius:18px;padding:8px}.word-grid{grid-template-columns:1fr}.written-eval-dialog,.qcm-dialog,.memory-dialog,.quiz-creator-dialog{border:0}.qcm-answer-button{min-height:60px}.memory-card-back::before{font-size:1.25rem}
  .random-word-dialog{border:0}.random-word-header{align-items:flex-start}.random-image-frame{min-height:220px}.random-word-actions{display:grid;grid-template-columns:1fr}
}

.reader-copy .actions-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.reader-copy .actions .image-action-button {
  width: auto;
  height: auto;
  min-height: 0;
  border: none;
  border-radius: 18px;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  margin: .25rem;
  padding: 0;
  line-height: 0;
  overflow: visible;
  text-shadow: none;
}
.reader-copy .actions .image-action-button::after { content: none; }
.reader-copy .actions .image-action-button img {
  width: clamp(115px, 13vw, 210px);
  max-width: 100%;
  height: auto;
  border: none;
  background: transparent;
  box-shadow: none;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}
.reader-copy .actions .image-action-button:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.03);
  filter: brightness(1.08);
  box-shadow: none;
}
.reader-copy .actions .image-action-button:active:not(:disabled) { transform: translateY(1px) scale(.97); }
.reader-copy .actions .image-action-button:disabled {
  opacity: .48;
  filter: grayscale(.35);
}

@media (max-width: 700px) {
  .reader-copy .actions .image-action-button {
    margin: .18rem;
    justify-self: center;
  }
  .reader-copy .actions .image-action-button img {
    width: clamp(105px, 32vw, 165px);
  }
}

@media (max-width: 420px) {
  .reader-copy .actions .image-action-button img {
    width: clamp(92px, 40vw, 135px);
  }
}

/* Futuristic vocabulary cards */
.word-grid {
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
  gap: clamp(16px, 2vw, 24px);
  align-items: stretch;
}

.word-card.vocab-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 430px;
  padding: 22px 6px;
  border: 0 !important;
  border-radius: 34px;
  background: rgba(2, 14, 32, .82) !important;
  background-image: none !important;
  box-shadow:
    0 0 28px rgba(0, 210, 255, .18),
    inset 0 0 28px rgba(0, 180, 255, .08);
  overflow: hidden;
  backdrop-filter: none;
}

.phone-shell {
  position: relative;
  width: min(100%, 250px);
  aspect-ratio: 848 / 1264;
  margin: 0 auto;
}

.phone-frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.phone-content {
  position: absolute;
  z-index: 2;
  left: 23%;
  right: 23%;
  top: 16%;
  bottom: 16%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(5px, 1vw, 9px);
  box-sizing: border-box;
  padding: 3px 2px 13px;
  min-width: 0;
  min-height: 0;
  overflow: visible;
}

.word-card:hover,
.word-card:focus,
.word-card.is-random {
  box-shadow:
    0 26px 52px rgba(3, 15, 45, .32),
    0 0 32px rgba(0, 213, 255, .58),
    0 0 18px rgba(124, 86, 245, .24);
  transform: translateY(-5px);
}

.word-card.is-correct,
.word-card.is-wrong {
  background: rgba(2, 14, 32, .82) !important;
  background-image: none !important;
}

.word-card.is-correct {
  box-shadow:
    0 22px 44px rgba(2, 12, 36, .22),
    0 0 0 3px rgba(22, 185, 130, .42),
    0 0 30px rgba(22, 185, 130, .28);
}

.word-card.is-wrong {
  box-shadow:
    0 22px 44px rgba(2, 12, 36, .22),
    0 0 0 3px rgba(220, 74, 90, .42),
    0 0 30px rgba(220, 74, 90, .22);
}

.word-card .card-topline {
  display: none;
  min-height: 0;
  justify-content: flex-end;
}

.word-card.is-quiz-target .card-topline {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
}

.word-number {
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 5;
  width: clamp(24px, 2.4vw, 32px);
  height: clamp(24px, 2.4vw, 32px);
  display: none;
  place-items: center;
  border-radius: 999px;
  background: #0869d8;
  color: #fff;
  font-size: clamp(.8rem, 1vw, 1.05rem);
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 0 0 2px rgba(255,255,255,.82), 0 5px 12px rgba(0,0,0,.18);
}

.word-image-zone {
  position: relative;
  width: 100%;
  height: auto;
  flex: 0 0 38%;
  min-height: 0;
  margin: 0;
  border: 1px solid rgba(74, 203, 255, .2);
  border-radius: 16px;
  background: rgba(255, 255, 255, .96);
  box-shadow: inset 0 1px rgba(255, 255, 255, .75);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.word-image-zone .word-image {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 14px;
  background: rgba(255, 255, 255, .96);
  filter: none;
  mix-blend-mode: normal;
  object-fit: contain;
  transform: none;
}

.word-text-zone {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  gap: clamp(3px, .6vw, 6px);
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: visible;
}

.word-language-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  color: #07194b;
  text-shadow: 0 1px rgba(255, 255, 255, .8);
}

.word-language-row span,
.lang-badge {
  display: grid;
  min-width: 34px;
  min-height: 25px;
  place-items: center;
  border: 1px solid rgba(25, 120, 230, .14);
  border-radius: 9px;
  background: rgba(255, 255, 255, .82);
  color: #0755d8;
  padding: 4px 6px;
  font-size: .62rem;
  font-weight: 900;
  box-shadow: 0 5px 12px rgba(7, 85, 216, .08);
}

.word-language-row strong {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  max-width: 100%;
  min-height: 27px;
  border-radius: 9px;
  background: rgba(175, 188, 203, .78);
  padding: 4px 7px;
  color: #07194b;
  font-size: clamp(.52rem, .78vw, .88rem);
  font-weight: 850;
  line-height: 1.08;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
  text-align: center;
}

.word-fr strong {
  font-size: clamp(.58rem, .86vw, .96rem);
}

.word-audio-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 6px;
  min-width: 0;
  min-height: 0;
  margin-left: 0;
  margin-top: 4px;
  margin-bottom: 0;
  padding-bottom: 7px;
  overflow: visible;
  flex-wrap: nowrap;
}

.word-audio-zone .audio-btn {
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: auto;
  min-height: 32px;
  min-width: 0;
  box-sizing: border-box;
  padding: 5px 7px;
  border: 1px solid rgba(24, 152, 245, .28);
  border-radius: 999px;
  background: rgba(232, 246, 255, .78);
  color: #0755d8;
  font-size: .7rem;
  font-weight: 900;
  box-shadow: inset 0 1px rgba(255, 255, 255, .78);
  white-space: normal;
  line-height: 1.05;
}

.word-audio-zone .audio-btn:hover {
  border-color: rgba(19, 201, 245, .55);
  background: rgba(221, 245, 255, .95);
  box-shadow: 0 0 18px rgba(19, 201, 245, .22);
}

@media (max-width: 900px) {
  .word-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .word-card {
    min-height: 0;
  }

  .word-card.vocab-card {
    min-height: 405px;
    padding: 22px 10px;
  }

  .phone-shell {
    width: min(100%, 250px);
  }
}

@media (max-width: 560px) {
  .word-grid {
    grid-template-columns: 1fr;
  }

  .word-card {
    width: min(100%, 330px);
    min-height: 0;
    margin-inline: auto;
  }

  .word-card.vocab-card {
    min-height: 505px;
  }

  .phone-shell {
    width: min(100%, 292px);
  }

  .phone-content {
    left: 23%;
    right: 23%;
    top: 16%;
    bottom: 16%;
    padding-bottom: 14px;
  }

  .word-audio-zone {
    gap: 6px;
    padding-bottom: 8px;
  }

  .word-audio-zone .audio-btn {
    min-height: 32px;
    padding: 5px 7px;
    font-size: .7rem;
  }
}

@media (max-width: 360px) {
  .word-audio-zone {
    gap: 5px;
    padding-bottom: 9px;
  }

  .word-audio-zone .audio-btn {
    min-height: 30px;
    padding: 4px 6px;
    font-size: .66rem;
  }
}

/* Futuristic home cockpit */
body {
  background:
    radial-gradient(circle at 12% 12%, rgba(31, 206, 255, .16), transparent 22rem),
    radial-gradient(circle at 88% 16%, rgba(149, 83, 255, .18), transparent 25rem),
    linear-gradient(145deg, #020611 0%, #071326 48%, #100b24 100%);
}

body::before {
  opacity: .22;
  background-image:
    linear-gradient(rgba(90, 214, 255, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90, 214, 255, .08) 1px, transparent 1px);
  background-size: 46px 46px;
}

.dashboard {
  min-height: 100vh;
  background:
    linear-gradient(90deg, rgba(2, 7, 19, .28), transparent 28%),
    url("/assets/hud-accueil.png") center / cover fixed,
    linear-gradient(145deg, #020611, #071326);
}

.dashboard::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(1, 7, 19, .92) 0 238px, rgba(3, 8, 20, .66) 238px, rgba(3, 8, 20, .78)),
    radial-gradient(circle at 62% 28%, rgba(63, 222, 255, .17), transparent 20rem);
}

.dashboard > * {
  position: relative;
  z-index: 1;
}

.sidebar {
  border-right-color: rgba(105, 224, 255, .26);
  background:
    linear-gradient(180deg, rgba(8, 24, 56, .9), rgba(5, 9, 27, .96)),
    linear-gradient(90deg, rgba(68, 217, 255, .13), transparent);
  box-shadow:
    18px 0 58px rgba(0, 0, 0, .28),
    inset -1px 0 rgba(95, 226, 255, .2);
}

.brand-mark {
  background: linear-gradient(145deg, #62edff, #1178ff 55%, #8b5cff);
  box-shadow: 0 0 24px rgba(71, 218, 255, .55), inset 0 0 16px rgba(255, 255, 255, .28);
}

.home-main {
  position: relative;
  isolation: isolate;
  width: min(100%, 1500px);
  padding: clamp(22px, 3vw, 44px);
}

.home-main::before {
  content: "";
  position: absolute;
  inset: clamp(12px, 2vw, 26px);
  z-index: -1;
  border: 1px solid rgba(105, 226, 255, .28);
  border-radius: 30px;
  background:
    linear-gradient(145deg, rgba(8, 21, 48, .72), rgba(11, 19, 47, .52) 58%, rgba(43, 20, 72, .55)),
    radial-gradient(circle at 75% 18%, rgba(127, 84, 255, .16), transparent 18rem);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, .34),
    0 0 42px rgba(32, 199, 255, .16),
    inset 0 1px rgba(255, 255, 255, .14),
    inset 0 0 45px rgba(40, 205, 255, .08);
  backdrop-filter: blur(18px);
}

.home-kicker {
  color: #6eeaff;
  text-shadow: 0 0 18px rgba(58, 219, 255, .65);
}

.home-header h1 {
  max-width: 940px;
  background: linear-gradient(100deg, #ffffff, #69e6ff 45%, #a889ff 78%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 32px rgba(89, 218, 255, .16);
}

.home-header p,
.home-insights small,
.sheet-title {
  color: #b9c9e8;
}

.streak-pill,
.icon-button,
.avatar-button,
.sheet-search,
.filter-button,
.home-insights article,
.home-message,
.empty-state {
  border-color: rgba(113, 223, 255, .28);
  background: linear-gradient(145deg, rgba(9, 25, 58, .72), rgba(16, 25, 58, .54));
  color: #eef8ff;
  box-shadow:
    0 12px 34px rgba(0, 0, 0, .22),
    0 0 24px rgba(44, 209, 255, .08),
    inset 0 1px rgba(255, 255, 255, .12);
}

.sheet-search {
  border-radius: 18px;
}

.sheet-search span,
.sheet-search input,
.sheet-search input::placeholder {
  color: #d7eaff;
}

.filter-button {
  color: #ddecff;
}

.filter-button:hover,
.filter-button.is-active {
  border-color: rgba(121, 236, 255, .68);
  background: linear-gradient(135deg, rgba(20, 125, 255, .82), rgba(124, 74, 255, .72));
  box-shadow: 0 0 30px rgba(53, 213, 255, .28), inset 0 1px rgba(255, 255, 255, .2);
}

.home-insights article {
  min-height: 82px;
}

.home-insights article > span {
  color: #eafcff;
  background: linear-gradient(145deg, rgba(38, 213, 255, .36), rgba(122, 87, 255, .3));
  box-shadow: inset 0 0 16px rgba(122, 229, 255, .18);
}

.home-insights strong,
.home-insights b {
  color: #ffffff;
}

.stats-dashboard {
  border-color: rgba(113, 223, 255, .3);
  background:
    linear-gradient(145deg, rgba(9, 25, 58, .74), rgba(16, 25, 58, .58)),
    radial-gradient(circle at 78% 12%, rgba(120, 88, 255, .15), transparent 16rem);
  color: #eef8ff;
  box-shadow:
    0 18px 48px rgba(0, 0, 0, .24),
    0 0 28px rgba(44, 209, 255, .1),
    inset 0 1px rgba(255, 255, 255, .14);
}

.stats-dashboard-heading h2,
.stats-period-card header strong,
.stats-metric-grid b {
  color: #ffffff;
}

.stats-dashboard-heading p:last-child,
.stats-period-card header small,
.stats-metric-grid small,
.stats-activity-heading small,
.stats-activity-list span,
.stats-activity-list .stats-activity-empty {
  color: #b9c9e8;
}

.stats-period-card {
  border-color: rgba(113, 223, 255, .24);
  background: linear-gradient(145deg, rgba(12, 30, 68, .74), rgba(11, 19, 45, .6));
  box-shadow:
    0 16px 38px rgba(0, 0, 0, .2),
    inset 0 1px rgba(255, 255, 255, .1);
}

.stats-activity-panel {
  border-color: rgba(113, 223, 255, .22);
  background: rgba(9, 22, 50, .42);
  box-shadow: inset 0 1px rgba(255, 255, 255, .08);
}

.stats-activity-heading strong,
.stats-activity-list strong {
  color: #ffffff;
}

.stats-activity-list li {
  border-color: rgba(113, 223, 255, .16);
  background: rgba(255, 255, 255, .06);
}

.stats-activity-list time {
  color: #7fe7ff;
}

.stats-metric-grid p {
  border-color: rgba(109, 229, 255, .18);
  background: rgba(255, 255, 255, .065);
}

.sheet-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}

.sheet-card {
  isolation: isolate;
  min-height: 186px;
  overflow: hidden;
  border: 1px solid rgba(108, 230, 255, .34);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(8, 24, 54, .86), rgba(13, 19, 45, .78)),
    radial-gradient(circle at 50% 0%, rgba(72, 217, 255, .2), transparent 55%);
  color: #f4fbff;
  padding: 16px 10px 12px;
  box-shadow:
    0 18px 34px rgba(0, 0, 0, .32),
    0 0 18px rgba(37, 211, 255, .12),
    inset 0 0 0 1px rgba(255, 255, 255, .08),
    inset 0 0 26px rgba(44, 214, 255, .06);
}

.sheet-card::before {
  opacity: 1;
  background:
    linear-gradient(90deg, transparent 12%, rgba(97, 232, 255, .95) 22%, transparent 32% 68%, rgba(151, 106, 255, .9) 78%, transparent 88%) top / 100% 2px no-repeat,
    linear-gradient(90deg, transparent 18%, rgba(97, 232, 255, .9) 34%, transparent 46% 54%, rgba(97, 232, 255, .9) 66%, transparent 82%) bottom / 100% 2px no-repeat,
    linear-gradient(180deg, transparent 13%, rgba(97, 232, 255, .85) 22%, transparent 34% 66%, rgba(97, 232, 255, .85) 78%, transparent 87%) left / 2px 100% no-repeat,
    linear-gradient(180deg, transparent 13%, rgba(151, 106, 255, .78) 22%, transparent 34% 66%, rgba(97, 232, 255, .85) 78%, transparent 87%) right / 2px 100% no-repeat,
    linear-gradient(130deg, rgba(255, 255, 255, .13), transparent 34%);
}

.sheet-card.is-available::after {
  right: 11px;
  top: 11px;
  width: 8px;
  height: 8px;
  background: #54f8c8;
  box-shadow: 0 0 12px rgba(84, 248, 200, .8), 0 0 0 3px rgba(84, 248, 200, .12);
}

.sheet-card:hover,
.sheet-card:focus-visible {
  border-color: rgba(152, 241, 255, .78);
  box-shadow:
    0 24px 42px rgba(0, 0, 0, .38),
    0 0 28px rgba(48, 223, 255, .34),
    0 0 42px rgba(125, 85, 255, .16),
    inset 0 0 28px rgba(75, 223, 255, .12);
  transform: translateY(-6px) scale(1.015);
}

.sheet-number {
  color: #7eeeff;
  font-size: .8rem;
  letter-spacing: .14em;
  text-shadow: 0 0 14px rgba(91, 231, 255, .72);
}

.sheet-icon {
  width: min(100%, 128px);
  height: 104px;
  min-height: 104px;
  border: 1px solid rgba(110, 231, 255, .24);
  border-radius: 17px;
  background: rgba(255, 255, 255, .08);
  color: #ffffff;
  filter: drop-shadow(0 0 12px rgba(95, 228, 255, .58));
}

.sheet-icon img {
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}

.sheet-name {
  color: #ffffff;
}

.sheet-status {
  display: inline-grid;
  min-height: 25px;
  place-items: center;
  margin-top: auto;
  border: 1px solid rgba(109, 229, 255, .26);
  border-radius: 999px;
  background: rgba(105, 229, 255, .08);
  color: #9ff3ff;
  padding: 3px 10px;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.audio-button {
  gap: 7px;
}

.audio-button-icon {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.audio-button-icon::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 6px;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 5px -4px 0 1px currentColor, 5px 4px 0 1px currentColor;
  clip-path: polygon(0 0, 52% 0, 100% -66%, 100% 166%, 52% 100%, 0 100%);
}

.audio-button-icon::after {
  content: "";
  position: absolute;
  right: 1px;
  top: 3px;
  width: 8px;
  height: 12px;
  border: 2px solid currentColor;
  border-left: 0;
  border-radius: 0 999px 999px 0;
  opacity: .85;
}

@media (max-width: 1250px) {
  .dashboard::before {
    background:
      linear-gradient(90deg, rgba(1, 7, 19, .9) 0 92px, rgba(3, 8, 20, .68) 92px, rgba(3, 8, 20, .78)),
      radial-gradient(circle at 62% 28%, rgba(63, 222, 255, .15), transparent 20rem);
  }

  .sheet-grid {
    grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
  }
}

@media (max-width: 900px) {
  .home-insights {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .dashboard {
    background:
      linear-gradient(rgba(2, 6, 17, .7), rgba(2, 6, 17, .86)),
      url("/assets/hud-accueil.png") center top / cover fixed,
      #020611;
  }

  .dashboard::before {
    background: linear-gradient(180deg, rgba(2, 7, 19, .7), rgba(3, 8, 20, .86));
  }

  .home-main {
    padding: 16px 10px 104px;
  }

  .sidebar {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    height: 76px;
    display: block;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .brand,
  .sidebar-widgets {
    display: none;
  }

  .home-main::before {
    inset: 8px 6px 88px;
    border-radius: 20px;
  }

  .home-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .header-actions {
    display: none;
  }

  .home-insights {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .stats-activity-list li {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .stats-activity-list time {
    white-space: normal;
  }

  .premium-nav {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(64px, 1fr);
    grid-template-columns: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

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

  .premium-nav .nav-item:nth-child(n+7) {
    display: grid;
  }

  .sheet-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .sheet-card {
    min-height: 166px;
    border-radius: 18px;
  }
}