:root {
  --ink: #20203a;
  --cream: #fff8ef;
  --paper: #ffffff;
  --green: #5b4fd6;
  --lime: #dfff70;
  --muted: #68677d;
  --line: #dedcf1;
  --orange: #ff8b5e;
  --pink: #ff6fae;
  --sky: #67d7f5;
  --violet: #7c6cf2;
  --success: #22a06b;
  --danger: #df5568;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 8% 8%, rgba(103, 215, 245, .28), transparent 28rem),
    radial-gradient(circle at 92% 12%, rgba(255, 111, 174, .22), transparent 24rem),
    linear-gradient(160deg, #fff9ec 0%, #f5f2ff 48%, #eefbff 100%);
  background-attachment: fixed;
}

.app { position: relative; }
.app::before,.app::after { content:""; position:fixed; z-index:-1; border-radius:50%; filter:blur(2px); opacity:.5; }
.app::before { width:180px; height:180px; left:-72px; top:38%; background:linear-gradient(145deg,var(--lime),var(--sky)); }
.app::after { width:220px; height:220px; right:-90px; bottom:8%; background:linear-gradient(145deg,#ffd36e,var(--pink)); }

.topbar {
  margin-top: 12px;
  padding: 12px 16px;
  border: 1px solid rgba(124,108,242,.16);
  border-radius: 22px;
  background: rgba(255,255,255,.76);
  box-shadow: 0 12px 32px rgba(58,48,128,.10);
  backdrop-filter: blur(16px);
}
.brand { font-size:23px; }
.brand span { background:linear-gradient(145deg,var(--violet),var(--pink)); box-shadow:0 7px 18px rgba(124,108,242,.32); }
.brand-group small { color:var(--muted); }
.language-select select { border-color:#d8d3f2; background:#fff; box-shadow:0 3px 10px rgba(67,54,137,.06); }
.language-select select:focus-visible { outline:3px solid rgba(103,215,245,.55); outline-offset:2px; }
.streak { background:#fff4cf; border-color:#ffd66d; }
.account-button { display:none!important; }

.section-tabs {
  position:relative;
  flex-wrap:wrap;
  gap:4px;
  overflow-x:visible;
  scroll-snap-type:none;
  background:rgba(255,255,255,.7);
  border-color:rgba(124,108,242,.16);
  box-shadow:0 10px 25px rgba(58,48,128,.08);
}
.section-tabs::-webkit-scrollbar { display:none; }
.section-tab { flex:1 1 auto; min-width:0; border:1px solid transparent; background:rgba(255,255,255,.48); box-shadow:0 3px 9px rgba(58,48,128,.06); white-space:normal; overflow-wrap:anywhere; transition:transform .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease; }
.section-tab:hover { transform:translateY(-2px); background:#fff; box-shadow:0 7px 15px rgba(58,48,128,.12); }
.section-tab.active { background:linear-gradient(135deg,var(--violet),#5ab9e8); box-shadow:0 8px 20px rgba(92,80,214,.28); }
.section-tab:is(.story-tab,.poem-tab,.riddle-tab,.joke-tab) { flex:1 1 calc(25% - 3px); display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:9px 8px; border-color:rgba(124,108,242,.24); color:#3e3870; font-weight:850; line-height:1.15; box-shadow:0 6px 16px rgba(58,48,128,.11); }
.story-tab { background:linear-gradient(145deg,#eeebff,#eafaff); }
.poem-tab { background:linear-gradient(145deg,#fff0f7,#fff8dc); border-color:rgba(255,111,174,.3)!important; }
.riddle-tab { background:linear-gradient(145deg,#f2edff,#e9fbff); border-color:rgba(116,87,216,.28)!important; }
.joke-tab { background:linear-gradient(145deg,#fff8d7,#fff0e8); border-color:rgba(255,139,94,.32)!important; }
.section-tab:is(.story-tab,.poem-tab,.riddle-tab,.joke-tab).active { border-color:transparent!important; color:#fff; }
.story-tab.active { background:linear-gradient(135deg,#705ee8,#4ebfe4); }
.poem-tab.active { background:linear-gradient(135deg,#ef609c,#ff9a5e); }
.riddle-tab.active { background:linear-gradient(135deg,#7457d8,#52b9e1); }
.joke-tab.active { background:linear-gradient(135deg,#f47a4e,#e65f9a); }

.dictionary-dropdown>summary,.progress-card,.pairs-game {
  border-color:rgba(124,108,242,.18);
  background:rgba(255,255,255,.86);
  box-shadow:0 10px 28px rgba(58,48,128,.08);
}
.dictionary-dropdown>summary strong { color:var(--violet); }
.dictionary-dropdown>summary::after { color:var(--violet); }
.dictionary-tools { display:grid; grid-template-columns:1fr auto auto; gap:8px; position:sticky; top:0; z-index:3; padding:10px; background:rgba(255,255,255,.96); border-bottom:1px solid var(--line); }
.dictionary-search { min-width:0; padding:11px 14px; border:1px solid #d8d3f2; border-radius:12px; font:600 13px inherit; color:var(--ink); background:#faf9ff; }
.dictionary-search:focus { outline:3px solid rgba(103,215,245,.42); border-color:var(--sky); }
.dictionary-tool-button { border:0; border-radius:11px; padding:10px 13px; background:#eeebff; color:#4438ad; font:800 12px inherit; cursor:pointer; }
.dictionary-tool-button.primary { background:linear-gradient(135deg,var(--violet),#5ab9e8); color:white; }
.dictionary-empty { grid-column:1/-1; padding:28px; text-align:center; color:var(--muted); }
.dictionary-dropdown .filters { overflow:auto; max-height:min(58vh,560px); }
.dictionary-dropdown .filter { border:1px solid transparent; }
.dictionary-dropdown .filter:hover { border-color:#cfc9ff; background:#f8f6ff; }
.dictionary-dropdown .filter.active { background:linear-gradient(135deg,#eeebff,#e8fbff); border-color:#cfc9ff; }
.dictionary-dropdown .filter.active::before { border-color:var(--violet); background:var(--violet); }

.study-toolbar .card-sound-button { position:relative; border:0; background:#eceaf8; color:#5d5b70; box-shadow:none; }
.study-toolbar .card-sound-button[aria-pressed="true"] { background:linear-gradient(135deg,var(--violet),#5ab9e8); color:white; box-shadow:0 7px 16px rgba(92,80,214,.23); }
.study-toolbar .card-sound-button[aria-pressed="false"] { background:#eceaf1; color:#777386; }
.study-toolbar .card-sound-button:focus-visible { outline:3px solid var(--lime); outline-offset:2px; }

.card-face {
  border-color:rgba(124,108,242,.18);
  background:
    radial-gradient(circle at 100% 0,rgba(103,215,245,.19),transparent 32%),
    radial-gradient(circle at 0 100%,rgba(255,111,174,.12),transparent 30%),
    #fff;
  box-shadow:0 22px 55px rgba(58,48,128,.14);
}
.single-face .association { border-radius:26px; background:linear-gradient(145deg,#fff2a8,#c8f4ff); box-shadow:0 10px 24px rgba(77,65,150,.15); }
.single-face .choice { background:#f8f7ff; border-color:#dedaf4; transition:transform .16s ease,box-shadow .16s ease,background .16s ease; }
.single-face .choice:hover:not(:disabled) { transform:translateY(-2px); background:#fff; box-shadow:0 8px 18px rgba(70,57,146,.11); }
.single-face .choice.correct { background:linear-gradient(135deg,#dfff70,#bdf6c8); border-color:#9bd56c; }
.single-face .choice.wrong { background:linear-gradient(135deg,#ff788e,#df5568); }
.quiz-label { color:var(--violet)!important; }
.know { border:0; background:linear-gradient(135deg,#dfff70,#aaf2a0); box-shadow:0 10px 22px rgba(100,174,77,.22); }
.repeat { background:rgba(255,255,255,.76); border-color:#d8d3f2; }
.action { transition:transform .18s ease,box-shadow .18s ease; }
.action:hover { transform:translateY(-2px); box-shadow:0 10px 20px rgba(58,48,128,.10); }

.progress-card { position:relative; overflow:hidden; }
.progress-card::after { content:"🎯"; position:absolute; right:16px; bottom:8px; font-size:34px; opacity:.16; }
.progress-head>b { display:none; }
.progress-track { height:10px; background:#eceaf3; }
.progress-track div { background:linear-gradient(90deg,var(--pink),#ffbd59,var(--lime)); }
.daily-progress-note { display:flex; justify-content:space-between; gap:10px; margin-top:9px!important; font-weight:750; color:#4d477e!important; }
.library-progress { font-size:11px; color:var(--muted); font-weight:600; }

.onboarding-modal { background:rgba(37,28,83,.66); }
.onboarding-panel { background:linear-gradient(155deg,#fff,#fff9e8 52%,#f0f7ff); border-color:rgba(255,255,255,.8); }
.onboarding-mark { background:linear-gradient(145deg,var(--violet),var(--pink)); box-shadow:0 10px 24px rgba(124,108,242,.28); }
.onboarding-grid { grid-template-columns:repeat(3,1fr); }
.onboarding-grid article,.onboarding-grid article:last-child { grid-column:auto; border:0; background:rgba(255,255,255,.76); box-shadow:0 8px 20px rgba(58,48,128,.08); }
.onboarding-grid article:nth-child(1)>span { background:#daf7ff; }
.onboarding-grid article:nth-child(2)>span { background:#f1e9ff; }
.onboarding-grid article:nth-child(3)>span { background:#fff0bd; }
.onboarding-start { background:linear-gradient(135deg,var(--violet),var(--pink)); box-shadow:0 10px 25px rgba(124,108,242,.28); }

*:focus-visible { outline:3px solid var(--sky); outline-offset:3px; }

@media (max-width:720px) {
  .app { padding:0 12px 28px; }
  .topbar { margin-top:7px; padding:9px 10px; border-radius:18px; }
  .brand-group small { display:none; }
  .top-actions { top:54px; }
  .section-tabs { gap:3px; padding:5px; }
  .section-tabs::after { content:none; display:none; }
  .section-tab { padding:8px 6px; font-size:10.5px; }
  .section-tab:is(.story-tab,.poem-tab,.riddle-tab,.joke-tab) { flex-basis:calc(25% - 2.25px); min-height:44px; padding:8px 3px; font-size:clamp(9px,2.65vw,11px); }
  .dictionary-dropdown>summary { align-items:flex-start; padding:10px 12px; }
  .dictionary-dropdown>summary>span { max-width:64%; line-height:1.35; }
  .dictionary-dropdown>summary strong { max-width:32%; }
  .dictionary-tools { grid-template-columns:1fr 1fr; }
  .dictionary-search { grid-column:1/-1; }
  .dictionary-dropdown .filters { max-height:56vh; grid-template-columns:1fr 1fr; }
  .study-toolbar { display:grid; grid-template-columns:repeat(3,1fr); }
  .study-toolbar .card-sound-button { min-width:0; }
  .study-toolbar .card-sound-button span:last-child { overflow:hidden; text-overflow:ellipsis; }
  .card-wrap { height:500px; }
  .single-face { padding:16px; }
  .single-face .association { width:116px; height:70px; }
  .single-face .word-block h2 { font-size:38px; }
  .single-face .choices { gap:6px; }
  .onboarding-grid { grid-template-columns:1fr; }
}

@media (max-width:430px) {
  .topbar { min-height:100px; }
  .brand { font-size:18px; }
  .brand span { width:32px; height:32px; }
  .language-select select { font-size:10px; }
  .study-toolbar .card-sound-button { font-size:10px; padding:8px 5px; }
  .card-wrap { height:505px; }
  .dictionary-dropdown .filters { grid-template-columns:1fr; }
  .actions { gap:8px; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; }
}