:root {
  --ink: #171717;
  --paper: #ffffff;
  --paper-deep: #f3f3f3;
  --blue: #171717;
  --blue-bright: #343434;
  --sky: #eeece7;
  --yellow: #d8d6d0;
  --coral: #66645f;
  --mint: #e2e0db;
  --white: #ffffff;
  --page-bg: #ffffff;
  --quote-text: #6d6b66;
  --search-border: #171717;
  --search-fill: #ffffff;
  --search-text: #171717;
  --card-border: #171717;
  --card-fill: #ffffff;
  --card-text: #171717;
  --progress-accent: #171717;
  --line: rgba(23, 23, 23, 0.2);
  --shadow: 0 16px 38px rgba(20, 20, 20, 0.08);
  --radius: 20px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; color: var(--ink); background: var(--page-bg); font-family: "DM Sans", "Noto Sans SC", sans-serif; font-size: 16px; line-height: 1.6; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; padding: .6rem 1rem; background: var(--ink); color: white; border-radius: .5rem; }
.skip-link:focus { top: 1rem; }

.site-header { position: sticky; top: 0; z-index: 40; min-height: 78px; padding: 0 clamp(1rem,4vw,4.5rem); display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: clamp(1rem,3vw,2.5rem); background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.brand { display: inline-flex; align-items: center; gap: .65rem; }
.brand-mark { display: grid; place-items: center; width: 2.15rem; height: 2.15rem; border-radius: .65rem; color: var(--white); background: var(--ink); font-family: Fraunces, serif; font-weight: 700; transform: rotate(-4deg); }
.brand-name { font-family: Fraunces, serif; font-size: 1.35rem; font-weight: 700; letter-spacing: -.03em; }
.header-quote { min-width: 0; display: flex; gap: .7rem; align-items: baseline; color: var(--quote-text); font-size: .82rem; font-weight: 400; overflow: hidden; white-space: nowrap; }
.header-quote span { overflow: hidden; text-overflow: ellipsis; }
.header-quote span:last-child { color: color-mix(in srgb, var(--quote-text) 72%, white); font-size: .76rem; }
.header-navigation { display: none; min-width: 0; align-self: stretch; padding-left: clamp(2.5rem, 6vw, 6rem); }
body:not(.is-home) .header-quote { display: none; }
body:not(.is-home) .header-navigation { display: flex; }
.header-menu-list { min-width: 0; height: 100%; margin: 0; padding: 0; display: flex; align-items: stretch; gap: clamp(.15rem,1vw,.8rem); list-style: none; }
.header-menu-item { position: relative; display: flex; align-items: stretch; }
.header-menu-trigger { position: relative; display: flex; align-items: center; padding: 0 clamp(.7rem,1.5vw,1.2rem); font-family: Fraunces, serif; font-size: 1.18rem; font-weight: 700; white-space: nowrap; }
.header-menu-trigger::after { content: ""; position: absolute; left: .55rem; right: .55rem; bottom: 0; height: 2px; background: var(--ink); transform: scaleX(0); transition: transform .2s ease; }
.header-menu-trigger:hover::after, .header-menu-trigger:focus-visible::after, .header-menu-trigger.active::after { transform: scaleX(1); }
.header-dropdown { position: absolute; left: .3rem; top: calc(100% - 1px); z-index: 60; width: max-content; min-width: 148px; padding: .45rem; background: var(--white); border: 1px solid var(--ink); border-radius: 0 0 12px 12px; box-shadow: 5px 6px 0 rgba(23,23,23,.08); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility .18s ease; }
.header-menu-item:hover .header-dropdown, .header-menu-item:focus-within .header-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.header-dropdown a, .header-dropdown button { width: 100%; display: block; padding: .58rem .7rem; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line); text-align: left; font-size: .82rem; cursor: pointer; white-space: nowrap; }
.header-dropdown a:last-child, .header-dropdown button:last-child { border-bottom: 0; }
.header-dropdown a:hover, .header-dropdown a:focus-visible, .header-dropdown button:hover, .header-dropdown button:focus-visible { background: #f3f3f3; outline: 0; }
.header-actions { position: relative; display: flex; align-items: center; gap: .55rem; }
.login-button { min-width: 4.8rem; height: 2.65rem; padding: 0 1.15rem; color: white; background: var(--ink); border: 1px solid var(--ink); border-radius: 999px; font-weight: 700; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.login-button:hover { transform: translateY(-2px); box-shadow: 0 7px 18px rgba(23,23,23,.15); }
.account-control { position: relative; }
.avatar-button, .account-avatar { display: grid; place-items: center; width: 2.65rem; height: 2.65rem; color: white; background: var(--avatar-color, var(--ink)); border: 1px solid var(--ink); border-radius: 50%; font-family: Fraunces, serif; font-size: 1.05rem; font-weight: 700; cursor: pointer; }
.account-panel { position: absolute; top: calc(100% + .7rem); right: 0; z-index: 80; width: min(310px, calc(100vw - 2rem)); padding: .75rem; color: var(--ink); background: white; border: 1.5px solid var(--ink); border-radius: 16px 0 16px 16px; box-shadow: 8px 10px 0 rgba(23,23,23,.08); opacity: 0; visibility: hidden; pointer-events: none; transform: translate(8px,-7px); transition: opacity .2s ease, transform .2s ease, visibility .2s ease; }
.account-panel.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(0,0); }
.account-summary { display: flex; gap: .75rem; align-items: center; padding: .55rem .45rem 1rem; border-bottom: 1px solid var(--line); }
.account-summary .account-avatar { flex: 0 0 auto; width: 2.8rem; height: 2.8rem; cursor: default; }
.account-summary div { min-width: 0; display: grid; }
.account-summary strong, .account-summary small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-summary small { color: #777; }
.account-panel > button { width: 100%; display: grid; gap: .05rem; padding: .75rem .55rem; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line); text-align: left; cursor: pointer; }
.account-panel > button span { font-weight: 700; }
.account-panel > button small { color: #777; }
.account-panel > button:hover, .account-panel > button:focus-visible { background: #f5f5f3; outline: 0; }
.account-panel > .account-logout { color: #8c2929; border-bottom: 0; font-weight: 700; }
[hidden] { display: none !important; }
.icon-button, .close-button { border: 0; background: transparent; cursor: pointer; }
.icon-button { position: relative; display: grid; place-items: center; width: 2.65rem; height: 2.65rem; border: 1px solid var(--line); border-radius: 50%; background: var(--white); transition: transform .2s ease, box-shadow .2s ease; }
.icon-button:hover { transform: translateY(-2px); box-shadow: 0 7px 18px rgba(31,39,63,.12); }
.count-badge { position: absolute; right: -.2rem; top: -.3rem; display: grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .25rem; border-radius: 999px; color: var(--white); background: var(--ink); border: 2px solid var(--paper); font-size: .68rem; font-weight: 700; }
.count-badge.coral { color: var(--white); background: #555; }
.theme-control { position: relative; }
.theme-panel { position: absolute; top: calc(100% + .7rem); right: 0; z-index: 80; width: min(390px, calc(100vw - 2rem)); max-height: min(720px, calc(100vh - 96px)); overflow-y: auto; padding: 1rem; color: var(--ink); background: #fff; border: 1.5px solid var(--ink); border-radius: 16px 0 16px 16px; box-shadow: 8px 10px 0 rgba(23,23,23,.08); opacity: 0; visibility: hidden; pointer-events: none; transform: translate(8px,-7px); transition: opacity .2s ease, transform .2s ease, visibility .2s ease; }
.theme-panel.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(0,0); }
.theme-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
.theme-panel-head h2 { margin: .1rem 0 0; font-family: Fraunces, serif; font-size: 1.55rem; line-height: 1; }
.theme-kicker, .theme-group-title { color: #777; font-size: .65rem; font-weight: 700; letter-spacing: .15em; }
.theme-reset { padding: .4rem .65rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); font-size: .75rem; font-weight: 700; cursor: pointer; }
.theme-reset:hover, .theme-reset:focus-visible { border-color: var(--ink); outline: 0; }
.theme-preset-bar { display: grid; gap: .45rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.theme-preset-bar > label { color: #777; font-size: .68rem; font-weight: 700; letter-spacing: .12em; }
.theme-preset-actions { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .45rem; }
.theme-preset-actions select, .theme-save-form input { width: 100%; min-width: 0; height: 36px; padding: 0 .65rem; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 8px; outline: 0; font-size: .8rem; }
.theme-preset-actions select:focus, .theme-save-form input:focus { border-color: var(--ink); }
.theme-preset-actions button, .theme-save-form button { height: 36px; padding: 0 .7rem; color: #fff; background: var(--ink); border: 1px solid var(--ink); border-radius: 8px; font-size: .75rem; font-weight: 700; cursor: pointer; }
.theme-save-form { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: .4rem; }
.theme-save-form[hidden] { display: none; }
.theme-save-form button:last-child { color: var(--ink); background: transparent; border-color: var(--line); }
.theme-options { display: grid; gap: .85rem; padding-top: .85rem; }
.theme-group { display: grid; gap: .45rem; }
.theme-group + .theme-group { padding-top: .75rem; border-top: 1px solid var(--line); }
.theme-group-title { margin: 0; }
.theme-row { min-height: 34px; display: grid; grid-template-columns: minmax(88px,1fr) auto; align-items: center; gap: .75rem; }
.theme-row-label { font-size: .82rem; font-weight: 600; }
.theme-swatches { display: flex; align-items: center; gap: .4rem; }
.theme-swatch, .custom-color { position: relative; width: 1.45rem; height: 1.45rem; flex: 0 0 1.45rem; border: 1px solid rgba(23,23,23,.28); border-radius: 50%; background: var(--swatch-color,#fff); cursor: pointer; }
.theme-swatch::after, .custom-color::after { content: ""; position: absolute; inset: -4px; border: 1.5px solid transparent; border-radius: 50%; }
.theme-swatch.active::after, .custom-color.active::after { border-color: var(--ink); }
.custom-color { overflow: hidden; display: grid; place-items: center; background: var(--custom-color,#fff); }
.custom-color input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.custom-color span { position: relative; z-index: 1; color: color-mix(in srgb, var(--custom-color,#fff) 20%, black); font-size: 1rem; line-height: 1; pointer-events: none; text-shadow: 0 1px 0 white; }
main { min-height: calc(100vh - 78px); }
.view { display: none; }
.view.active { display: block; animation: view-in .4s ease both; }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } }
.home-hero { width: 100%; margin: 0 auto; padding: clamp(1.75rem,4vw,3.5rem) 0 clamp(2rem,4vw,3.25rem); display: block; }
.home-hero > * { min-width: 0; }
.eyebrow { margin: 0 0 .75rem; color: var(--blue); font-size: .72rem; font-weight: 700; letter-spacing: .18em; }
.inner-heading h1 { max-width: 720px; margin: 0; font-family: Fraunces, serif; font-size: clamp(3.1rem,7vw,6.6rem); line-height: .95; letter-spacing: -.055em; }
.search-shell { position: relative; width: min(75%, 1040px); margin-inline: auto; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.search-shell::before { display: none; }
.search-shell label { display: block; margin-bottom: .65rem; font-size: .75rem; font-weight: 700; letter-spacing: .12em; }
.search-row { display: grid; grid-template-columns: auto 1fr auto; gap: .7rem; align-items: center; padding: .55rem .55rem .55rem 1rem; background: var(--search-fill); border: 2px solid var(--search-border); border-radius: 14px; }
.search-row svg { color: var(--blue); }
.search-row input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--search-text); background: transparent; font-size: 1.05rem; }
.search-row button, .primary-button { border: 0; border-radius: 10px; padding: .78rem 1.15rem; color: white; background: var(--blue); font-weight: 700; cursor: pointer; transition: transform .2s ease, background .2s ease; }
.search-row button:hover, .primary-button:hover { transform: translateY(-2px); background: var(--blue-bright); }
.quick-words { display: flex; flex-wrap: wrap; gap: .35rem .6rem; margin-top: .8rem; color: #79808c; font-size: .78rem; }
.quick-words button { padding: 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--blue); cursor: pointer; }

.study-overview { width: min(75%, 1040px); max-width: none; margin: 0 auto; padding: .25rem 0 4rem; }
.section-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.1rem; }
.section-heading .eyebrow { margin: 0; }
.section-heading > p { margin: 0; color: #707886; font-size: .85rem; }
.module-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 1rem; align-items: start; }
.module-card { position: relative; aspect-ratio: 1.55 / 1; overflow: hidden; padding: 1.15rem; color: var(--card-text); background: var(--card-fill); border: 1.5px solid var(--card-border); border-radius: var(--radius); outline: 0; box-shadow: 4px 4px 0 rgba(23,23,23,.07); transition: transform .25s ease, box-shadow .25s ease; }
.module-card:hover, .module-card:focus-visible { transform: translate(-3px,-3px); box-shadow: 8px 8px 0 rgba(23,23,23,.12); }
.words-card, .grammar-card { grid-column: span 3; }
.listening-card, .reading-card, .writing-card { grid-column: span 2; }
.words-card, .grammar-card, .listening-card, .reading-card, .writing-card { background: var(--card-fill); color: var(--card-text); }
.card-topline { position: absolute; top: 1.15rem; right: 1.15rem; display: flex; justify-content: flex-end; align-items: center; font-size: .68rem; font-weight: 700; letter-spacing: .12em; }
.card-topline > span:first-child { display: none; }
.mini-tag { padding: .25rem .55rem; border: 1px solid currentColor; border-radius: 999px; letter-spacing: .05em; opacity: .8; }
.module-symbol { position: absolute; right: 1.15rem; bottom: .9rem; margin: 0; font-family: Fraunces, serif; font-size: clamp(2.8rem,5vw,4.5rem); font-weight: 700; line-height: 1; letter-spacing: -.08em; opacity: .1; }
.words-card .module-symbol, .grammar-card .module-symbol { margin: 0; font-size: clamp(4rem,7vw,6rem); }
.module-title { position: absolute; left: 1.15rem; top: 1.05rem; transition: transform .28s ease, opacity .2s ease; }
.module-title p { margin: 0 0 .1rem; font-size: .64rem; font-weight: 700; letter-spacing: .16em; opacity: .7; }
.module-title h3 { margin: 0; font-family: Fraunces, serif; font-size: clamp(2.45rem,4vw,3.35rem); line-height: .95; }
.module-menu { position: absolute; left: 1.15rem; right: auto; top: auto; bottom: 1.15rem; width: min(76%, 360px); padding: 0 0 0 .7rem; color: color-mix(in srgb, var(--card-text) 68%, var(--card-fill)); background: transparent; border-left: 2px solid color-mix(in srgb, var(--card-text) 58%, var(--card-fill)); border-radius: 0; opacity: 0; transform: translateY(7px); pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
.module-card:hover .module-menu, .module-card:focus-within .module-menu, .module-card:focus .module-menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
.module-card:hover .module-title, .module-card:focus-within .module-title, .module-card:focus .module-title { opacity: 1; transform: none; }
.module-menu a, .module-menu button { width: 100%; display: flex; justify-content: space-between; gap: 1rem; padding: .55rem; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; }
.module-menu a:last-child, .module-menu button:last-child { border-bottom: 0; }
.module-menu a:hover, .module-menu button:hover { color: var(--blue); }
.module-menu span { color: color-mix(in srgb, var(--card-text) 72%, var(--card-fill)); font-weight: 600; }
.module-menu b { color: color-mix(in srgb, var(--card-text) 50%, var(--card-fill)); font-size: .72rem; font-weight: 500; }
.module-menu a:hover span, .module-menu button:hover span { color: var(--ink); }

.progress-strip { width: min(75%, 1040px); max-width: none; margin: 0 auto 5rem; padding: 1.35rem 0; display: grid; grid-template-columns: 1fr auto auto minmax(150px,.75fr) auto; gap: 2rem; align-items: center; color: var(--progress-accent); background: transparent; border-top: 1px solid color-mix(in srgb, var(--progress-accent) 22%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--progress-accent) 22%, transparent); border-radius: 0; }
.progress-strip h2 { margin: 0; font-family: Fraunces, serif; font-size: 1.5rem; }
.progress-day { color: #666; font-size: .68rem; font-weight: 700; letter-spacing: .15em; }
.metric { display: flex; align-items: baseline; gap: .35rem; }
.metric strong { font-family: Fraunces, serif; font-size: 2rem; color: var(--progress-accent); }
.metric span, .progress-strip p { margin: 0; color: #666; font-size: .78rem; }
.progress-track { height: .5rem; overflow: hidden; background: #e7e7e7; border-radius: 999px; }
.progress-track span { display: block; width: 0; height: 100%; background: var(--progress-accent); border-radius: inherit; transition: width .5s ease; }

.inner-view { max-width: 1180px; margin: 0 auto; padding: 3rem clamp(1rem,5vw,4rem) 6rem; }
.inner-heading { margin-bottom: 2rem; }
.inner-heading h1 { font-size: clamp(2.8rem,6vw,5.2rem); }
.inner-heading > p:last-child { max-width: 620px; color: #616978; }
.back-link { margin-bottom: 2.5rem; padding: 0; border: 0; background: transparent; color: var(--blue); font-weight: 700; cursor: pointer; }
.word-tabs { display: inline-flex; padding: .35rem; margin-bottom: 1.2rem; background: var(--paper-deep); border-radius: 12px; }
.word-tab { min-width: 110px; padding: .65rem 1rem; border: 0; border-radius: 9px; background: transparent; font-weight: 700; cursor: pointer; }
.word-tab.active { color: white; background: var(--ink); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.word-study-card, .review-card, .lesson-card { background: var(--white); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow); }
.word-study-card { padding: clamp(1.25rem,4vw,3rem); }
.study-card-top { display: flex; align-items: center; gap: .75rem; padding-bottom: 1.15rem; border-bottom: 1px solid var(--line); }
.word-progress { flex: 1; min-width: 0; color: #737373; font-size: .68rem; font-weight: 700; letter-spacing: .12em; }
.word-progress i { display: block; width: 4%; max-width: 100%; height: 2px; margin-top: .55rem; background: var(--ink); transition: width .25s ease; }
.word-card-actions { display: flex; gap: .4rem; }
.word-icon-button, .word-sound-button { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: transparent; cursor: pointer; }
.word-icon-button svg, .word-sound-button svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.word-icon-button.active { color: white; background: var(--ink); }
.word-icon-button.active svg { fill: currentColor; }
#study-word { margin: clamp(2rem,5vw,3.7rem) 0 .6rem; color: var(--card-text); font-family: Fraunces, serif; font-size: clamp(3.4rem,8vw,6.7rem); line-height: .88; letter-spacing: -.065em; }
.word-pronunciations { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; color: #666; font-size: .88rem; }
.word-accent { display: inline-flex; align-items: center; gap: .45rem; }
.word-accent b { color: var(--ink); font-size: .62rem; letter-spacing: .1em; }
.word-sound-button { width: 1.65rem; height: 1.65rem; border-color: transparent; }
.word-sound-button:hover { border-color: var(--line); }
.word-sound-button svg { width: .95rem; height: .95rem; }
.word-senses { display: grid; gap: .75rem; margin-top: 2rem; padding: 1.15rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.word-sense { display: grid; grid-template-columns: 3.7rem 1fr; gap: .5rem; align-items: baseline; }
.word-sense b { font-size: .72rem; }
.word-sense b { color: #555; }
.word-sense p { margin: 0; color: var(--card-text); font-size: 1rem; line-height: 1.6; }
.word-analysis, .word-examples { margin-top: 2.6rem; }
.word-analysis h3, .word-section-heading h3 { margin: 0; color: #5f6668; font-family: Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.word-analysis-grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: .9rem; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.analysis-item { min-height: 118px; padding: 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.analysis-item.wide { grid-column: 1 / -1; min-height: auto; }
.analysis-item h4 { margin: 0 0 10px; color: #5f6668; font-family: Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.analysis-item p { margin: 0; color: #6f6f6f; font-family: Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 13px; font-weight: 400; line-height: 1.7; }
.word-collocations { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.word-collocations p { display: block; padding: 13px 14px; background: #f6f6f3; border-radius: 12px; }
.word-collocations b, .word-collocations span { display: block; }
.word-collocations b { color: #171717; font-family: Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 13px; font-weight: 700; line-height: 1.45; }
.word-collocations span { margin-top: 5px; color: #6f6f6f; font-size: 12px; font-weight: 400; line-height: 1.5; }
.word-section-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.text-button { padding: 0; border: 0; color: #777; background: transparent; font-size: .75rem; cursor: pointer; }
.word-examples ol { display: grid; gap: 1.1rem; margin: 1rem 0 0; padding: 0; list-style: none; counter-reset: example; }
.word-examples li { position: relative; padding-left: 2rem; counter-increment: example; }
.word-examples li::before { content: counter(example, decimal-leading-zero); position: absolute; left: 0; top: .1rem; color: #999; font-size: .65rem; letter-spacing: .08em; }
.word-examples li p { margin: 0; color: var(--card-text); font-family: Fraunces, serif; font-size: 1.16rem; line-height: 1.55; }
.word-examples li span { display: block; margin-top: .25rem; color: #777; font-size: .9rem; line-height: 1.6; }
.word-examples.translations-hidden li span { display: none; }
.word-card-head, .review-status, .writing-meta { display: flex; justify-content: space-between; align-items: center; }
.word-study-card.detail-mode .word-card-head { justify-content: flex-end; }
.favorite-group-select { margin-left: auto; padding: .45rem .65rem; border: 1px solid var(--line); border-radius: 999px; background: white; font-size: .75rem; }
.favorite-group-select[hidden] { display: none; }
.word-index, .lesson-kicker { color: var(--blue); font-size: .7rem; font-weight: 700; letter-spacing: .14em; }
.favorite-button { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .75rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; cursor: pointer; }
.favorite-button.active { color: var(--coral); border-color: var(--coral); }
.favorite-button.active svg { fill: currentColor; }
.word-main { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: end; padding: 2.2rem 0; border-bottom: 1px solid var(--line); }
.word-main h2 { margin: 0; font-family: Fraunces, serif; font-size: clamp(3rem,8vw,6rem); line-height: 1; letter-spacing: -.045em; }
.pronunciation { display: flex; gap: .7rem; align-items: center; margin-top: .8rem; color: #555e6c; }
.sound-button { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 0; border-radius: 50%; color: white; background: var(--blue); cursor: pointer; }
.accent-chip { padding: .15rem .45rem; border: 1px solid var(--line); border-radius: 999px; font-size: .65rem; font-weight: 700; }
.word-meaning span { display: inline-block; padding: .2rem .5rem; color: white; background: var(--coral); border-radius: 5px; font-size: .72rem; font-weight: 700; }
.word-meaning p { margin: .5rem 0 0; font-size: 1.18rem; font-weight: 600; }
.word-details { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.detail-block { min-height: 120px; padding: 1.35rem; border-bottom: 1px solid var(--line); }
.detail-block:nth-child(even) { border-left: 1px solid var(--line); }
.detail-block.full-width { grid-column: 1 / -1; min-height: 0; border-left: 0; }
.detail-label { color: var(--blue); font-size: .68rem; font-weight: 700; letter-spacing: .13em; }
.detail-block p { margin: .5rem 0 0; }
.detail-block .example { font-family: Fraunces, serif; font-size: 1.35rem; }
.detail-block .translation { color: #707886; font-size: .9rem; }
.tiny-action { margin-top: .65rem; padding: 0; border: 0; background: transparent; color: var(--coral); font-size: .78rem; font-weight: 700; cursor: pointer; }
.study-actions { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1.5rem; }
.secondary-button { padding: .78rem 1.15rem; border: 1px solid var(--line); border-radius: 10px; background: transparent; font-weight: 700; cursor: pointer; }
.review-card { position: relative; padding: clamp(1.5rem,5vw,4rem); text-align: center; }
.review-status { color: #707886; font-size: .78rem; }
.question-label { margin-top: 2.5rem; color: #707886; }
.review-card h2 { display: inline-block; margin: .3rem .5rem 2rem; font-family: Fraunces, serif; font-size: clamp(3.2rem,8vw,6rem); }
.sound-button.inline { display: inline-grid; transform: translateY(-.7rem); }
.answer-grid { max-width: 700px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.answer-button { min-height: 64px; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); cursor: pointer; transition: border .2s, transform .2s; }
.answer-button:hover { transform: translateY(-2px); border-color: var(--blue); }
.answer-button.correct { color: var(--ink); background: var(--white); border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.answer-button.wrong { color: var(--ink); background: var(--paper-deep); border-color: #777; text-decoration: line-through; }
.review-feedback { min-height: 1.6rem; font-weight: 700; }
.next-question { margin: .5rem auto 0; }

.lesson-view { max-width: 1040px; }
.lesson-card { padding: clamp(1.5rem,5vw,4rem); }
.lesson-card h2 { max-width: 760px; margin: .65rem 0 1.5rem; font-family: Fraunces, serif; font-size: clamp(2rem,4vw,3.5rem); line-height: 1.1; }
#grammar-view { max-width: 1240px; }
.grammar-heading { margin-bottom: 1.25rem; }
.grammar-status { padding: 2rem; color: #666; border: 1px solid var(--line); border-radius: 18px; text-align: center; }
.grammar-status.error { color: #8c2929; }
.grammar-workspace { display: grid; grid-template-columns: minmax(250px, 310px) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.grammar-sidebar, .grammar-detail { background: white; border: 1px solid var(--line); border-radius: 22px; box-shadow: 5px 6px 0 rgba(23,23,23,.05); }
.grammar-sidebar { position: sticky; top: 96px; max-height: calc(100vh - 116px); overflow: auto; padding: 1rem; }
.grammar-sidebar-head { display: flex; justify-content: space-between; align-items: center; padding: .2rem .2rem .9rem; border-bottom: 1px solid var(--line); }
.grammar-sidebar-head strong { color: #777; font-size: .72rem; font-weight: 600; }
.grammar-module { padding: .85rem 0 0; }
.grammar-module + .grammar-module { margin-top: .75rem; border-top: 1px solid var(--line); }
.grammar-module summary { display: grid; grid-template-columns: auto 1fr auto; gap: .55rem; align-items: baseline; cursor: pointer; list-style: none; }
.grammar-module summary::-webkit-details-marker { display: none; }
.grammar-module-number { display: grid; place-items: center; width: 1.55rem; height: 1.55rem; color: white; background: var(--ink); border-radius: 50%; font-family: Fraunces, serif; font-size: .75rem; }
.grammar-module-title { font-family: Fraunces, serif; font-size: 1rem; font-weight: 700; }
.grammar-module-count { color: #888; font-size: .68rem; }
.grammar-topic-list { display: grid; gap: .2rem; padding: .65rem 0 .1rem 2.1rem; }
.grammar-topic-button { width: 100%; padding: .5rem .55rem; color: #666; background: transparent; border: 0; border-radius: 8px; text-align: left; font-size: .78rem; cursor: pointer; }
.grammar-topic-button:hover, .grammar-topic-button:focus-visible { color: var(--ink); background: #f4f3f0; outline: 0; }
.grammar-topic-button.active { color: white; background: var(--ink); }
.grammar-detail { min-height: 620px; padding: clamp(1.3rem,4vw,3rem); }
.grammar-detail-head { padding-bottom: 1.4rem; border-bottom: 1px solid var(--line); }
.grammar-breadcrumb { margin: 0 0 .55rem; color: #777; font-size: .7rem; font-weight: 700; letter-spacing: .08em; }
.grammar-detail h2 { margin: 0; font-family: Fraunces, serif; font-size: clamp(2.2rem,5vw,4.6rem); line-height: 1; letter-spacing: -.035em; }
.grammar-title-en { margin: .45rem 0 0; color: #777; font-family: Fraunces, serif; font-size: 1rem; }
.grammar-summary { max-width: 780px; margin: 1rem 0 0; color: #4f4f4f; }
.grammar-section { padding-top: 1.8rem; }
.grammar-section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.grammar-section-title h3 { margin: 0; font-family: Fraunces, serif; font-size: 1.35rem; }
.grammar-section-title span { color: #888; font-size: .68rem; letter-spacing: .08em; }
.grammar-rule-list, .grammar-pitfall-list { display: grid; gap: .65rem; margin: 0; padding: 0; list-style: none; }
.grammar-rule, .grammar-pitfall { padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 12px; }
.grammar-rule p, .grammar-pitfall p { margin: 0; }
.grammar-pitfall { background: #f5f4f1; }
.grammar-example { margin-top: .65rem; padding-top: .65rem; border-top: 1px solid var(--line); }
.grammar-example strong { display: block; font-family: Fraunces, serif; font-size: 1.05rem; }
.grammar-example span { color: #777; font-size: .82rem; }
.grammar-example-list { display: grid; gap: .65rem; margin: 0; padding: 0; list-style: none; }
.grammar-example-card { display: grid; grid-template-columns: 2rem minmax(0,1fr); gap: .75rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.grammar-example-card > span { color: #999; font-family: Fraunces, serif; font-size: .78rem; }
.grammar-example-card strong { display: block; font-family: Fraunces, serif; font-size: 1.08rem; line-height: 1.45; }
.grammar-example-card p { margin: .18rem 0 0; color: #777; font-size: .82rem; }
.grammar-practice-link { margin-top: 1.2rem; padding: .7rem 1rem; color: white; background: var(--ink); border: 1px solid var(--ink); border-radius: 999px; font-weight: 700; cursor: pointer; }
.grammar-practice-toolbar { display: grid; grid-template-columns: auto minmax(240px, 420px); gap: .8rem; align-items: center; margin-bottom: 1rem; padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: 16px; }
.grammar-practice-toolbar label { font-size: .75rem; font-weight: 700; letter-spacing: .08em; }
.grammar-practice-toolbar select { width: 100%; height: 42px; padding: 0 .75rem; color: var(--ink); background: white; border: 1px solid var(--line); border-radius: 9px; }
.grammar-practice-sheet { padding: clamp(1.2rem,4vw,3rem); background: white; border: 1px solid var(--line); border-radius: 22px; box-shadow: 5px 6px 0 rgba(23,23,23,.05); }
.grammar-practice-head { position: relative; padding: 0 7rem 1.4rem 0; border-bottom: 1px solid var(--line); }
.grammar-practice-head h2 { margin: 0; font-family: Fraunces, serif; font-size: clamp(2.2rem,5vw,4rem); line-height: 1; }
.grammar-practice-head > span { position: absolute; top: .25rem; right: 0; color: #777; font-size: .75rem; }
.grammar-exercise-list { display: grid; gap: .8rem; }
.grammar-practice-sheet .grammar-exercise-list { padding-top: 1.3rem; }
.grammar-exercise { min-width: 0; margin: 0; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; }
.grammar-question { display: flex; gap: .75rem; margin: 0; }
.grammar-question b { flex: 0 0 auto; font-family: Fraunces, serif; }
.grammar-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .45rem; margin-top: .8rem; }
.grammar-option { display: flex; gap: .55rem; align-items: flex-start; padding: .6rem .7rem; background: white; border: 1px solid var(--line); border-radius: 9px; text-align: left; cursor: pointer; }
.grammar-option:hover { border-color: var(--ink); }
.grammar-option:has(input:checked) { color: white; background: var(--ink); border-color: var(--ink); }
.grammar-option input { flex: 0 0 auto; margin-top: .3rem; accent-color: var(--ink); }
.grammar-text-answer { display: grid; gap: .4rem; margin-top: .8rem; color: #666; font-size: .75rem; font-weight: 700; }
.grammar-text-answer input { width: 100%; height: 42px; padding: 0 .75rem; color: var(--ink); background: white; border: 1px solid var(--line); border-radius: 9px; outline: 0; }
.grammar-text-answer input:focus { border-color: var(--ink); }
.grammar-exercise.correct { border-color: #7b9b83; background: #f3f8f4; }
.grammar-exercise.wrong { border-color: #bc8c78; background: #fbf5f1; }
.grammar-result { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--line); font-size: .82rem; }
.grammar-result > strong { color: var(--ink); }
.grammar-result p { margin: .3rem 0 0; color: #555; }
.grammar-submit-row { display: flex; align-items: center; gap: 1rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.grammar-submit-row span { color: #777; font-size: .75rem; }
.grammar-score { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.2rem; padding: 1.1rem 1.25rem; color: white; background: var(--ink); border-radius: 14px; }
.grammar-score > div { display: flex; align-items: baseline; gap: .4rem; }
.grammar-score span { font-size: .75rem; }
.grammar-score strong { font-family: Fraunces, serif; font-size: 2.4rem; line-height: 1; }
.grammar-score small { color: #bbb; }
.grammar-score p { margin: 0; }
.grammar-answer-row { display: flex; align-items: center; gap: .75rem; margin-top: .8rem; }
.grammar-reveal { padding: .45rem .7rem; background: transparent; border: 1px solid var(--ink); border-radius: 999px; font-size: .72rem; font-weight: 700; cursor: pointer; }
.grammar-answer { color: #555; font-size: .78rem; }
.grammar-empty { margin: 0; color: #888; }
.audio-visual { height: 110px; display: flex; gap: .55rem; align-items: center; margin: 2rem 0; padding: 1rem 1.5rem; color: var(--blue); background: var(--sky); border-radius: 18px; }
.audio-visual i { flex: 1; min-width: 4px; height: 20%; background: currentColor; border-radius: 99px; }
.audio-visual i:nth-child(2n) { height: 60%; }.audio-visual i:nth-child(3n) { height: 85%; }.audio-visual.playing i { animation: wave .6s ease-in-out infinite alternate; }.audio-visual.playing i:nth-child(2n) { animation-delay: -.3s; }
@keyframes wave { to { height: 22%; } }
details { margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
summary { font-weight: 700; cursor: pointer; }
.article-card > p { max-width: 760px; font-family: Fraunces, serif; font-size: 1.25rem; line-height: 1.8; }
.reading-prompt { margin-top: 2rem; padding: 1.2rem; display: grid; gap: .3rem; background: var(--yellow); border-radius: 14px; }
.formula { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin: 2rem 0; }
.formula span { padding: 1rem 1.2rem; background: var(--sky); border-radius: 12px; font-weight: 700; }
.formula b { font-size: 2rem; }
.large-example { font-family: Fraunces, serif; font-size: clamp(1.5rem,3vw,2.3rem); }
.mini-exercise { margin-top: 2.5rem; padding: 1.4rem; background: var(--paper); border-radius: 16px; }
.mini-exercise label { display: block; margin-bottom: .8rem; font-weight: 700; }
.mini-exercise div { display: flex; gap: .5rem; }
.mini-exercise input { flex: 1; min-width: 0; padding: .75rem 1rem; border: 1px solid var(--line); border-radius: 9px; }
.mini-exercise button { border: 0; border-radius: 9px; padding: .7rem 1rem; color: white; background: var(--ink); cursor: pointer; }
.mini-exercise span { display: block; margin-top: .5rem; }
.prompt-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.prompt-chips span { padding: .45rem .75rem; background: var(--sky); border-radius: 999px; font-size: .8rem; font-weight: 600; }
.writing-lesson textarea { width: 100%; padding: 1rem; resize: vertical; border: 1px solid var(--line); border-radius: 14px; outline: 0; font-family: "DM Sans", sans-serif; font-size: 1rem; line-height: 1.7; }
.writing-lesson textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(39,88,199,.12); }
.save-status { margin-left: 1rem; color: #277057; font-weight: 700; }

.compact-heading { margin-bottom: 1.5rem; }
#word-library-heading { margin-bottom: 0; }
#word-library-heading .back-link { margin-bottom: 1.5rem; }
.word-detail-navigation .back-link { margin-bottom: 1.25rem; }
.library-toolbar, .word-workspace-toolbar, .collection-toolbar, .mistake-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.library-toolbar > span { color: #666; }
.inline-create-form { margin-bottom: 1rem; padding: .8rem; display: grid; grid-template-columns: auto minmax(180px,1fr) auto auto; gap: .6rem; align-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.inline-create-form[hidden] { display: none; }
.inline-create-form label { font-size: .78rem; font-weight: 700; }
.inline-create-form input { min-width: 0; height: 40px; padding: 0 .8rem; border: 1px solid var(--line); border-radius: 8px; outline: 0; }
.inline-create-form input:focus { border-color: var(--ink); }
.inline-create-form button { height: 40px; padding: 0 .85rem; border: 1px solid var(--ink); border-radius: 8px; background: var(--ink); color: white; font-weight: 700; cursor: pointer; }
.inline-create-form button:last-child { color: var(--ink); background: transparent; border-color: var(--line); }
.library-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.library-card { min-height: 190px; padding: 1.3rem; display: flex; flex-direction: column; justify-content: space-between; color: var(--ink); background: var(--white); border: 1.5px solid var(--ink); border-radius: 18px; box-shadow: 4px 4px 0 rgba(23,23,23,.07); cursor: pointer; text-align: left; transition: transform .2s ease, box-shadow .2s ease; }
.library-card:hover, .library-card:focus-visible { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 rgba(23,23,23,.1); outline: 0; }
.library-card h2 { margin: .25rem 0; font-family: Fraunces, serif; font-size: 2rem; }
.library-card p { margin: 0; color: #6c6c6c; font-size: .88rem; }
.library-card-meta { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: .72rem; font-weight: 700; letter-spacing: .08em; }
.library-card.custom { border-style: dashed; }
.word-workspace-toolbar { justify-content: space-between; padding: .8rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.word-workspace-toolbar[hidden], .word-detail-navigation[hidden], #word-library-heading[hidden] { display: none; }
.current-library-copy { display: flex; align-items: baseline; color: #666; font-size: .88rem; }
.current-library-copy strong { color: var(--ink); font-family: Fraunces, serif; font-size: 1.35rem; }
.toolbar-label { color: #777; font-size: .66rem; font-weight: 700; letter-spacing: .12em; }
.word-workspace-toolbar strong { font-family: Fraunces, serif; font-size: 1.35rem; }
.workspace-actions { display: flex; align-items: center; gap: .5rem; }
.import-button { display: inline-flex; align-items: center; cursor: pointer; }
.custom-library-action[hidden], #word-study-actions[hidden], #word-index[hidden] { display: none; }
.import-button input { display: none; }
.library-switch-button { width: 2.8rem; height: 2.8rem; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 50%; background: var(--white); cursor: pointer; }
.word-library-empty { margin-top: 1rem; }
.review-source-summary { margin-bottom: 1rem; padding: .8rem 1rem; color: #666; border-left: 2px solid var(--ink); font-size: .84rem; }
.article-card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.collection-groups { display: flex; flex-wrap: wrap; gap: .45rem; }
.group-filter { padding: .5rem .75rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; font-size: .8rem; font-weight: 700; cursor: pointer; }
.group-filter.active { color: white; background: var(--ink); border-color: var(--ink); }
.collection-table { overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: 18px; }
.collection-table-head, .collection-row { display: grid; grid-template-columns: 1.1fr 1.4fr .55fr .8fr; gap: 1rem; align-items: center; padding: .9rem 1rem; }
.collection-table-head { color: #777; background: #f5f5f5; font-size: .68rem; font-weight: 700; letter-spacing: .1em; }
.collection-row { width: 100%; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.collection-row:hover { background: #fafafa; }
.collection-row strong { font-family: Fraunces, serif; font-size: 1.05rem; }
.collection-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.collection-empty { padding: 3rem 1rem; text-align: center; color: #777; }
.favorite-detail-card { padding: clamp(1.5rem,4vw,3rem); background: var(--white); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); }
.favorite-detail-card h1 { margin: .25rem 0 1.5rem; font-family: Fraunces, serif; font-size: clamp(2.4rem,5vw,4.5rem); line-height: 1; }
.detail-translation-pair { padding: 1rem 0; border-top: 1px solid var(--line); }
.detail-translation-pair p { margin: .3rem 0; }
.detail-translation-pair p:first-child { font-family: Fraunces, serif; font-size: 1.2rem; }
.detail-translation-pair p:last-child { color: #69717c; }
.favorite-detail-group { margin-top: 1.5rem; padding-top: 1rem; display: flex; align-items: center; gap: .8rem; border-top: 1px solid var(--line); }
.favorite-detail-group label { font-size: .78rem; font-weight: 700; }
.favorite-detail-group select { min-width: 180px; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: white; }
.mistake-legend { display: flex; flex-wrap: wrap; gap: .5rem; }
.mistake-legend span { padding: .35rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.level-low, .mistake-row.level-low { background: #e5f4e8; }
.level-mid, .mistake-row.level-mid { background: #fff0d9; }
.level-high, .mistake-row.level-high { background: #fde2e2; }
.mistake-list { display: grid; gap: .65rem; }
.mistake-row { width: 100%; padding: 1rem 1.1rem; display: grid; grid-template-columns: minmax(130px,.7fr) 1.6fr auto; gap: 1rem; align-items: center; color: var(--ink); border: 1px solid rgba(23,23,23,.18); border-radius: 14px; text-align: left; cursor: pointer; }
.mistake-row strong { font-family: Fraunces, serif; font-size: 1.5rem; }
.mistake-row p { margin: 0; }
.mistake-meta { display: grid; justify-items: end; color: #666; font-size: .72rem; }
.mistake-index { color: var(--ink); font-weight: 700; }
.mistake-history { margin-bottom: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 14px; background: #fafafa; }
.mistake-history[hidden] { display: none; }
.history-entry { padding: .55rem 0; display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); font-size: .82rem; }
.history-entry:last-child { border-bottom: 0; }
.word-dialog { width: min(560px,calc(100vw - 2rem)); padding: 0; border: 1.5px solid var(--ink); border-radius: 18px; box-shadow: 10px 12px 0 rgba(23,23,23,.1); }
.word-dialog::backdrop { background: rgba(23,23,23,.35); }
.word-dialog form { padding: 1.2rem; display: grid; gap: .85rem; }
.dialog-head { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: .75rem; border-bottom: 1px solid var(--line); }
.dialog-head h2 { margin: 0; font-family: Fraunces, serif; font-size: 2rem; }
.dialog-head button { border: 0; background: transparent; font-size: 1.8rem; cursor: pointer; }
.word-dialog label { display: grid; gap: .35rem; font-size: .75rem; font-weight: 700; }
.word-dialog input, .word-dialog textarea { width: 100%; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 9px; outline: 0; resize: vertical; }
.word-dialog input:focus, .word-dialog textarea:focus { border-color: var(--ink); }
.dialog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.dialog-actions { display: flex; justify-content: flex-end; gap: .55rem; padding-top: .5rem; }

.side-panel { position: fixed; inset: 0; z-index: 70; visibility: hidden; }
.side-panel.open { visibility: visible; }
.panel-backdrop { position: absolute; inset: 0; background: rgba(23,32,51,.45); opacity: 0; transition: opacity .25s; }
.panel-sheet { position: absolute; top: 0; right: 0; width: min(480px,100%); height: 100%; overflow-y: auto; padding: 1.5rem; background: var(--white); transform: translateX(100%); transition: transform .3s ease; }
.side-panel.open .panel-backdrop { opacity: 1; }
.side-panel.open .panel-sheet { transform: translateX(0); }
.panel-head { display: flex; justify-content: space-between; align-items: start; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.panel-head h2 { margin: 0; font-family: Fraunces, serif; font-size: 2rem; }
.close-button { font-size: 2rem; line-height: 1; }
.panel-tabs { display: flex; gap: .4rem; margin: 1rem 0; }
.panel-tabs button { padding: .55rem .9rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; cursor: pointer; }
.panel-tabs button.active { color: white; background: var(--ink); }
.collection-list { display: grid; gap: .75rem; }
.collection-item { padding: 1rem; border: 1px solid var(--line); border-radius: 13px; background: var(--paper); }
.collection-item h3 { margin: 0; font-family: Fraunces, serif; font-size: 1.4rem; }
.collection-item p { margin: .2rem 0 0; color: #666e7a; font-size: .87rem; }
.collection-item button { margin-top: .65rem; padding: 0; border: 0; background: transparent; color: var(--coral); font-size: .75rem; font-weight: 700; cursor: pointer; }
.empty-state { padding: 3rem 1rem; text-align: center; color: #737b87; border: 1px dashed var(--line); border-radius: 14px; }
.empty-state strong { display: block; color: var(--ink); font-family: Fraunces, serif; font-size: 1.3rem; }
.toast { position: fixed; left: 50%; bottom: 1.5rem; z-index: 90; padding: .7rem 1rem; color: white; background: var(--ink); border-radius: 999px; box-shadow: var(--shadow); opacity: 0; transform: translate(-50%,20px); pointer-events: none; transition: .25s ease; }
.toast.show { opacity: 1; transform: translate(-50%,0); }

.auth-dialog { width: min(920px, calc(100vw - 2rem)); max-height: min(760px, calc(100vh - 2rem)); padding: 0; overflow: auto; color: var(--ink); background: white; border: 1.5px solid var(--ink); border-radius: 24px; box-shadow: 12px 14px 0 rgba(23,23,23,.13); }
.auth-dialog::backdrop { background: rgba(23,23,23,.42); backdrop-filter: blur(4px); }
.auth-shell { position: relative; display: grid; grid-template-columns: minmax(260px,.8fr) minmax(340px,1.2fr); min-height: 570px; }
.auth-close { position: absolute; top: .9rem; right: 1rem; z-index: 2; width: 2.2rem; height: 2.2rem; color: var(--ink); background: white; border: 1px solid var(--line); border-radius: 50%; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.auth-intro { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: clamp(2rem,5vw,4rem); color: white; background: var(--ink); }
.auth-intro .brand-mark { margin-bottom: auto; color: var(--ink); background: white; }
.auth-intro .eyebrow { color: #bcbcbc; }
.auth-intro h2 { margin: 0; font-family: Fraunces, serif; font-size: clamp(2.3rem,4vw,3.8rem); line-height: .98; }
.auth-intro p:last-child { margin: 1rem 0 0; color: #cfcfcf; }
.auth-content { padding: clamp(2rem,5vw,4.25rem); align-self: center; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 2rem; border-bottom: 1px solid var(--line); }
.auth-tabs button { position: relative; padding: .8rem; color: #777; background: transparent; border: 0; font-family: Fraunces, serif; font-size: 1.35rem; font-weight: 700; cursor: pointer; }
.auth-tabs button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); transform: scaleX(0); }
.auth-tabs button.active { color: var(--ink); }
.auth-tabs button.active::after { transform: scaleX(1); }
.auth-form { display: none; gap: 1rem; }
.auth-form.active { display: grid; }
.auth-form > label, .captcha-row label, .verification-row label { display: grid; gap: .35rem; color: #555; font-size: .75rem; font-weight: 700; }
.auth-form input:not([type="checkbox"]):not([type="radio"]), .auth-form select { width: 100%; min-width: 0; height: 44px; padding: 0 .8rem; color: var(--ink); background: white; border: 1px solid var(--line); border-radius: 9px; outline: 0; }
.auth-form input:focus { border-color: var(--ink); }
.check-row { display: flex !important; align-items: center; grid-template-columns: auto 1fr; color: #666 !important; font-weight: 500 !important; }
.auth-submit { width: 100%; margin-top: .35rem; }
.form-message { min-height: 1.5rem; margin: 0; color: #8c2929; font-size: .8rem; }
.form-message.success { color: #27633d; }
.register-channel { display: flex; justify-content: space-between; align-items: center; color: #555; font-size: .75rem; font-weight: 700; }
.register-channel > div { display: flex; gap: 1rem; }
.captcha-row, .verification-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .65rem; align-items: end; }
#refresh-captcha { width: 150px; height: 48px; padding: 0; overflow: hidden; background: #f3f3f3; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
#captcha-image { display: block; width: 100%; height: 100%; }
.verification-row > button { height: 44px; white-space: nowrap; }

.account-view { max-width: 980px; }
.settings-card { margin-bottom: 1.5rem; padding: clamp(1.3rem,4vw,2.3rem); background: white; border: 1px solid var(--line); border-radius: 20px; box-shadow: 5px 6px 0 rgba(23,23,23,.06); }
.settings-section-title { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.settings-section-title h2 { margin: 0; font-family: Fraunces, serif; font-size: 1.65rem; }
.settings-section-title span { color: #777; font-size: .75rem; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding-top: 1.2rem; }
.settings-grid label { display: grid; gap: .4rem; color: #555; font-size: .76rem; font-weight: 700; }
.settings-grid input, .settings-grid select, .settings-grid textarea { width: 100%; min-width: 0; padding: .7rem .8rem; color: var(--ink); background: white; border: 1px solid var(--line); border-radius: 9px; outline: 0; resize: vertical; }
.settings-grid input:focus, .settings-grid select:focus, .settings-grid textarea:focus { border-color: var(--ink); }
.settings-grid input[type="color"] { min-height: 46px; padding: .25rem; }
.settings-wide { grid-column: 1 / -1; }
.settings-wide small { justify-self: end; color: #888; font-weight: 400; }
.toggle-list { display: grid; gap: .6rem; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.toggle-list label { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .45rem 0; }
.toggle-list label span { display: grid; }
.toggle-list small { color: #777; }
.toggle-list input { width: 1.15rem; height: 1.15rem; }
.settings-actions { display: flex; justify-content: flex-end; gap: .6rem; padding-top: 1.4rem; }

@media (max-width: 900px) {
  .header-quote span:last-child { display: none; }
  body:not(.is-home) .site-header { grid-template-columns: auto minmax(0,1fr) auto; }
  .header-navigation { padding-left: 0; }
  .header-menu-list { width: 100%; justify-content: flex-end; gap: 0; }
  .header-menu-trigger { padding-inline: clamp(.35rem,1.5vw,.7rem); font-size: 1rem; }
  .search-shell, .study-overview, .progress-strip { width: 88%; }
  .module-grid { grid-template-columns: 1fr 1fr; }
  .module-card { grid-column: span 1; aspect-ratio: 1.55 / 1; }
  .progress-strip { margin-inline: auto; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .progress-track { grid-column: 1 / -1; }
  .word-main { grid-template-columns: 1fr; }
  .grammar-workspace { grid-template-columns: minmax(210px, 260px) minmax(0,1fr); }
}

@media (max-width: 600px) {
  .site-header { min-height: 68px; gap: .75rem; padding-inline: .8rem; }
  .header-quote { font-size: .75rem; }
  .header-actions { gap: .3rem; }
  .icon-button { width: 2.35rem; height: 2.35rem; }
  .login-button { min-width: 4.1rem; height: 2.35rem; padding-inline: .8rem; }
  .avatar-button { width: 2.35rem; height: 2.35rem; }
  .auth-only.icon-button { display: none !important; }
  .account-panel { position: fixed; top: 64px; right: .75rem; }
  .theme-panel { position: fixed; top: 64px; right: .75rem; width: min(390px, calc(100vw - 1.5rem)); max-height: calc(100vh - 78px); }
  .home-hero { padding-top: 1.25rem; }
  .search-shell, .study-overview, .progress-strip { width: 92%; }
  .search-shell { min-width: 0; padding: 0; }
  .search-row { grid-template-columns: auto 1fr; }
  .search-row button { grid-column: 1 / -1; }
  .section-heading { align-items: start; }
  .section-heading > p:last-child { display: none; }
  .module-grid { grid-template-columns: 1fr; }
  .module-card { aspect-ratio: 1.4 / 1; min-height: 0; }
  .words-card .module-menu { top: 5.25rem; bottom: auto; }
  .module-card .module-menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .module-card .module-title { opacity: 1; }
  .progress-strip { grid-template-columns: 1fr 1fr; }
  .progress-strip > div:first-child { grid-column: 1 / -1; }
  .progress-strip p { grid-column: 1 / -1; }
  .inner-view { padding-top: 2rem; }
  .word-details { grid-template-columns: 1fr; }
  .detail-block.full-width { grid-column: auto; }
  .detail-block:nth-child(even) { border-left: 0; }
  .study-actions { flex-direction: column; }
  .answer-grid { grid-template-columns: 1fr; }
  .formula { display: grid; }
  .formula b { display: none; }
  .writing-meta { align-items: start; gap: 1rem; }
  .save-status { display: block; margin: .6rem 0 0; }
  .library-toolbar, .collection-toolbar, .mistake-toolbar { align-items: stretch; flex-direction: column; }
  .word-workspace-toolbar { align-items: center; flex-direction: row; }
  .library-grid { grid-template-columns: 1fr; }
  .inline-create-form { grid-template-columns: 1fr 1fr; }
  .inline-create-form label, .inline-create-form input { grid-column: 1 / -1; }
  .workspace-actions { flex-wrap: wrap; }
  .collection-table-head { display: none; }
  .collection-row { grid-template-columns: 1fr auto; gap: .3rem 1rem; }
  .collection-row span:nth-child(2) { grid-column: 1 / -1; }
  .collection-row span:last-child { grid-column: 2; grid-row: 1; }
  .mistake-row { grid-template-columns: 1fr; }
  .mistake-meta { justify-items: start; }
  .dialog-grid { grid-template-columns: 1fr; }
  .word-study-card { padding: 1.35rem; border-radius: 20px; }
  #study-word { margin-top: 2rem; font-size: clamp(3.1rem,17vw,5.2rem); }
  .word-sense { grid-template-columns: 3.2rem 1fr; gap: .35rem; }
  .word-analysis-grid { grid-template-columns: 1fr; }
  .analysis-item.wide { grid-column: auto; }
  .word-collocations { grid-template-columns: 1fr; }
  .word-examples li p { font-size: 1.05rem; }
  .auth-dialog { width: calc(100vw - 1rem); max-height: calc(100vh - 1rem); border-radius: 18px; }
  .auth-shell { grid-template-columns: 1fr; min-height: 0; }
  .auth-intro { min-height: 170px; padding: 1.5rem; justify-content: flex-end; }
  .auth-intro .brand-mark { display: none; }
  .auth-intro h2 { font-size: 2.2rem; }
  .auth-intro p:last-child { margin-bottom: 0; font-size: .82rem; }
  .auth-content { padding: 1.5rem; }
  .captcha-row, .verification-row { grid-template-columns: 1fr; }
  #refresh-captcha { width: 100%; }
  .settings-grid { grid-template-columns: 1fr; }
  .settings-wide { grid-column: auto; }
  .settings-actions { align-items: stretch; flex-direction: column-reverse; }
  .grammar-workspace { grid-template-columns: 1fr; }
  .grammar-sidebar { position: static; max-height: none; }
  .grammar-detail { min-height: 0; padding: 1.2rem; border-radius: 18px; }
  .grammar-options { grid-template-columns: 1fr; }
  .grammar-detail h2 { font-size: clamp(2.2rem,13vw,3.6rem); }
  .grammar-practice-toolbar { grid-template-columns: 1fr; }
  .grammar-practice-sheet { padding: 1.15rem; border-radius: 18px; }
  .grammar-practice-head { padding-right: 0; }
  .grammar-practice-head > span { position: static; display: block; margin-top: .6rem; }
  .grammar-submit-row, .grammar-score { align-items: stretch; flex-direction: column; }
}

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