/* My English Quest v9.0.0 — Focused UX Design System
   Final visual layer: shared tokens + low-noise interaction patterns.
   Feature logic stays in feature styles/controllers; this file normalizes presentation. */
:root{
  --ds-canvas:#050b1d;
  --ds-surface:#0b1837;
  --ds-surface-2:#10234d;
  --ds-surface-3:#142a59;
  --ds-border:rgba(112,151,236,.22);
  --ds-border-strong:rgba(111,157,255,.42);
  --ds-text:#f5f8ff;
  --ds-muted:#9eb0d1;
  --ds-subtle:#7f94bc;
  --ds-accent:#2d91ff;
  --ds-accent-2:#9148f7;
  --ds-success:#42d39c;
  --ds-danger:#ff7180;
  --ds-warning:#f3b45d;
  --ds-radius-sm:10px;
  --ds-radius-md:14px;
  --ds-radius-lg:20px;
  --ds-shadow-soft:0 12px 34px rgba(0,0,0,.18);
  --ds-focus:0 0 0 3px rgba(77,139,255,.28);
}

/* Shared surfaces */
.card,
.library-section-panel,
.vocab-detail-panel,
.story-card,
.listening-card{
  border-color:var(--ds-border);
}
.card{box-shadow:none}
.card:hover{border-color:rgba(122,158,235,.27)}

/* Shared buttons: one visual language for the whole product. */
button,.button{font-weight:800}
button.primary,.primary{
  border-color:rgba(120,154,255,.46)!important;
  background:linear-gradient(135deg,var(--ds-accent),var(--ds-accent-2))!important;
  color:#fff!important;
  box-shadow:0 8px 22px rgba(55,99,230,.16);
}
button.primary:hover,.primary:hover{filter:brightness(1.06);box-shadow:0 10px 26px rgba(69,102,231,.22)}
button.ghost,.ghost{
  border-color:var(--ds-border)!important;
  background:rgba(8,21,49,.70)!important;
  color:#dce7fb!important;
}
button.ghost:hover,.ghost:hover{border-color:var(--ds-border-strong)!important;background:rgba(18,39,82,.78)!important;color:#fff!important}
button.danger-text,.danger-text{color:#ff9fa7!important}
button:focus-visible,a:focus-visible,[role="button"]:focus-visible,[role="tab"]:focus-visible{outline:none!important;box-shadow:var(--ds-focus)!important}

/* Tabs / segmented controls */
.home-section-tabs,
.library-section-tabs,
.story-mode-tabs,
.saved-story-mode-tabs,
.own-create-mode,
.adventure-section-tabs{
  border-color:var(--ds-border)!important;
  background:rgba(4,13,34,.78)!important;
}
.home-section-tab,
.library-section-tab,
.story-mode-tabs button,
.saved-story-mode-tabs button,
.own-create-mode-btn,
.adventure-section-tab{
  color:var(--ds-muted)!important;
}
.home-section-tab.active,
.library-section-tab.active,
.story-mode-tabs button.active,
.saved-story-mode-tabs button.active,
.own-create-mode-btn.active,
.adventure-section-tab.active,
[role="tab"][aria-selected="true"]{
  color:#fff!important;
  border-color:rgba(112,153,255,.36)!important;
  background:linear-gradient(135deg,rgba(44,118,242,.34),rgba(120,66,225,.28))!important;
  box-shadow:inset 0 0 0 1px rgba(123,160,255,.10)!important;
}

/* Focused Today: NEXT QUEST is the strongest element; everything else recedes. */
.quest-hero-card{padding:20px!important;background:radial-gradient(circle at 92% 4%,rgba(116,68,239,.20),transparent 31%),linear-gradient(145deg,rgba(16,42,93,.94),rgba(15,25,66,.94))!important}
.quest-hero-card .home-welcome{margin-bottom:14px}
.quest-hero-card .home-welcome h2{font-size:clamp(22px,3vw,30px);line-height:1.2;letter-spacing:-.02em}
.review-cta{
  min-height:92px!important;
  border-radius:18px!important;
  border-color:rgba(95,148,255,.38)!important;
  background:linear-gradient(135deg,rgba(27,66,144,.94),rgba(30,38,92,.92))!important;
  box-shadow:0 16px 34px rgba(24,58,157,.16)!important;
}
.review-cta:hover{transform:translateY(-1px);border-color:rgba(103,157,255,.62)!important}
.review-cta-copy small{font-size:9px!important;color:#93bcff!important}
.review-cta-copy b{font-size:18px!important}
.review-cta-copy span{font-size:11px!important;color:#b9ccf0!important}
.today-more-toggle{min-height:42px!important;margin-top:12px!important;background:rgba(7,19,46,.58)!important;color:#a8b9d9!important;font-size:10px!important}
.home-quick-secondary{opacity:.84}

/* Daily plan behaves like a compact actionable checklist, not a second hero. */
.today-plan-card{padding:14px!important;background:linear-gradient(180deg,rgba(10,25,57,.88),rgba(7,18,43,.88))!important}
.today-plan-card>.row{margin-bottom:7px}
.today-plan-card h2{font-size:18px!important;margin:0!important}
.today-plan-card>.row .muted{display:none}
.today-plan-estimate{margin-top:5px!important;font-size:9px!important;padding:4px 7px!important}
.plan-progress{min-width:48px!important;height:36px!important;font-size:15px!important}
.today-plan-list{gap:5px!important}
.today-plan-step{min-height:56px!important;padding:8px 11px!important;border-radius:13px!important;grid-template-columns:30px minmax(0,1fr) auto!important}
.today-plan-step .plan-check{width:25px!important;height:25px!important;font-size:10px!important}
.today-plan-step>span:nth-child(2) b{font-size:12px!important}
.today-plan-step>span:nth-child(2) small{font-size:9px!important;line-height:1.35}
.today-plan-step.is-next{box-shadow:inset 3px 0 0 #4798ff,0 7px 18px rgba(34,70,168,.08)!important}
.today-plan-step.done{animation:dsDonePulse .28s ease-out}
@keyframes dsDonePulse{0%{transform:scale(.992)}55%{transform:scale(1.006)}100%{transform:none}}
@media(prefers-reduced-motion:reduce){.today-plan-step.done{animation:none}.review-cta:hover{transform:none}}

/* Optional content stays visually quiet. */
.compact-weekly-focus,.extra-practice-disclosure{background:rgba(7,18,43,.66)!important;border-color:rgba(111,147,224,.14)!important}
.compact-weekly-focus>summary,.extra-practice-disclosure>summary{min-height:48px}
.compact-weekly-focus>summary b,.extra-practice-disclosure>summary b{font-size:12px}

/* Management/library density: more rows fit without looking cramped. */
.myenglish-browser-card,.vocab-hero{background:linear-gradient(180deg,rgba(10,25,57,.88),rgba(7,18,43,.88))!important}
.library-card-item{padding:12px!important;border-radius:14px!important;margin-bottom:8px!important;background:rgba(10,27,61,.72)!important}
.library-card-item .english{font-size:15px!important;line-height:1.35}
.library-card-item .jp{font-size:11px!important;line-height:1.4}
.library-inline-actions{gap:6px!important;margin-top:8px!important}
.library-primary-actions button{min-height:34px!important;padding:6px 9px!important;font-size:9px!important}
.library-more-actions summary{min-height:34px!important}
.library-search-wrap input,.vocab-search-row input{min-height:44px}

/* Unified empty states: empty screens always explain what to do next. */
.vocab-empty,.saved-story-empty,.empty-state,#listeningEmpty,#situationEmpty{
  border:1px dashed rgba(112,151,236,.22)!important;
  border-radius:14px!important;
  background:rgba(8,20,48,.54)!important;
  color:var(--ds-muted)!important;
}
.vocab-empty{padding:22px!important;text-align:center}
.vocab-empty b,.empty-state h3{color:var(--ds-text)!important}

/* Disclosures use one low-noise language. */
details>summary{border-radius:var(--ds-radius-sm)}
details[open]>summary{color:#eef4ff}

/* Mobile: vocabulary/modal workflows act like bottom sheets. */
@media(max-width:720px){
  .vocab-modal,.vocab-review-modal{align-items:end!important;place-items:end center!important;padding:8px!important}
  .vocab-modal>.dialog-box,.vocab-review-modal>.dialog-box,.vocab-review-box{
    width:100%!important;
    max-width:none!important;
    max-height:calc(100dvh - 16px)!important;
    border-radius:22px 22px 14px 14px!important;
    box-shadow:0 -18px 50px rgba(0,0,0,.34)!important;
  }
  .quest-hero-card{padding:15px!important}
  .review-cta{min-height:82px!important;padding:12px!important}
  .review-cta-copy b{font-size:16px!important}
  .today-plan-card{padding:12px!important}
  .today-plan-step{grid-template-columns:28px minmax(0,1fr) auto!important;min-height:54px!important;padding:8px 9px!important}
  .today-plan-step>span:nth-child(2) small{display:none}
  .library-card-item{padding:10px!important}
}