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

/* Langufy design foundations */
:root {
  --brand: #00bf8b;
  --green: var(--brand);
  --deep: #08795e;
  --ink: #28332f;
  --muted: #626e68;
  --bg: #f3f4f2;
  --surface: #fdfefd;
  --line: #dfe4df;
  --soft: #edf4ef;
  --mint: #eef4f0;
  --peach: #f5f2ec;
  --lavender: #f1f0f5;
  --blue: #eef2f5;
  --pink: #f6f0f2;
  --yellow: #f5f3ed;
  --radius: 14px;
  --font: 'DM Sans', sans-serif;
  --heading: 'Manrope', sans-serif;
  --shadow: none;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; }
a, button { -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: not-allowed; opacity: .35; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid #5bac92; outline-offset: 4px; }
input::placeholder, textarea::placeholder { color: var(--muted); }
img { max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--heading); font-weight: 750; margin: 0; line-height: 1.4; }
p { margin: 0; }
.icon { width: 21px; height: 21px; vertical-align: middle; flex-shrink: 0; }
.muted { color: var(--muted); }
.small-text { font-size: 12px; }
.positive { color: var(--deep); }
.mint { background: var(--mint); color: #008962; }
.peach { background: var(--peach); color: #b77732; }
.lavender { background: var(--lavender); color: #8b73be; }
.blue { background: var(--blue); color: #5b88b9; }
.pink { background: var(--pink); color: #ba7591; }
.yellow { background: var(--yellow); color: #af923d; }
[hidden] { display: none !important; }

/* Shell */
.sidebar { position: fixed; inset: 0 auto 0 0; width: 242px; background: var(--surface); border-right: 1px solid var(--line); padding: 31px 18px 23px; display: flex; flex-direction: column; overflow-y: auto; z-index: 40; }
.brand { display: flex; align-items: center; gap: 11px; font: 800 30px var(--heading); letter-spacing: -1.5px; margin: 0 17px 44px; }
.brand img { width: 37px; height: 37px; border-radius: 11px; }
.workspace-label, .nav-section-label { color: #8c9c93; font-size: 12px; font-weight: 650; letter-spacing: 1.4px; margin: 0 17px 12px; }
#navigation { display: flex; flex-direction: column; gap: 5px; }
#navigation>a, .sidebar-setting { display: flex; align-items: center; gap: 13px; padding: 12px 16px; border-radius: 10px; color: #5f7368; font-size: 14px; font-weight: 500; transition: background .2s, color .2s; }
#navigation>a>.icon, .sidebar-setting>.icon { width: 20px; height: 20px; }
#navigation>a:hover, .sidebar-setting:hover { background: var(--soft); color: var(--deep); }
#navigation>a.active, .sidebar-setting.active { background: var(--soft); color: var(--deep); font-weight: 650; box-shadow: inset 3px 0 0 var(--brand); }
#navigation>a small { margin-left: auto; background: #eef3ef; padding: 2px 6px; border-radius: 5px; font-size: 12px; color: #7b8f82; }
#navigation>a.active small { background: #ffffff75; color: #12543a; }
.nav-section-label { margin-top: 26px; margin-bottom: 7px; }
.sidebar-bottom { margin-top: auto; padding-top: 38px; }
.sidebar-quote { border: 1px solid #d8eee1; background: var(--bg); border-radius: 8px; padding: 16px; margin: 0 8px 14px; position: relative;  border-color: var(--line);}
.sidebar-quote>span { position: absolute; right: 15px; top: 11px; color: #00ac78; font-size: 24px;  display: none;}
.sidebar-quote>strong { display: block; margin-bottom: 8px; font: 700 12px var(--heading); }
.sidebar-quote p { font-size: 12px; color: #6b8a76; line-height: 1.7; }
.local-badge { display: flex; gap: 7px; align-items: center; color: #90a095; font-size: 12px; margin: 20px 17px 0; }
.local-badge>span { height: 5px; width: 5px; border-radius: 50%; background: var(--brand); }
.workspace { margin-left: 242px; }
.topbar { height: 88px; padding: 0 42px; display: flex; align-items: center; gap: 24px; border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 25; }
.breadcrumb { color: #9aa79e; font-size: 12px; white-space: nowrap; }
.breadcrumb>span { padding: 0 14px; color: #c3cdc6; }
.breadcrumb strong { color: #687d6f; font-weight: 500; }
.header-search { margin-left: auto; display: flex; align-items: center; gap: 10px; width: 304px; background: #f6f8f6; border: 1px solid #e9eeea; border-radius: 10px; padding: 0 12px; }
.header-search .icon { width: 17px; height: 17px; color: #89a293; }
.header-search input { border: 0; outline: none; background: none; width: 100%; min-width: 0; padding: 12px 0; font-size: 12px; }
kbd { font: 12px var(--font); padding: 2px 5px; border: 1px solid #e1e8e2; border-radius: 4px; color: #91a295; background: var(--surface); white-space: nowrap; }
.streak-pill { display: flex; gap: 5px; align-items: center; background: #fff7ec; border: 1px solid #f4e7d4; color: #b57a37; padding: 8px 11px; border-radius: 9px; white-space: nowrap; }
.streak-pill .icon { width: 17px; height: 17px; }
.streak-pill b { font-size: 13px; font-weight: 650; }
.streak-pill>span { font-size: 12px; }
.profile-avatar { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 50%; border: 3px solid #edf8f1; background: #c6f2dd; color: #2e8154; font-size: 12px; font-weight: 600; flex-shrink: 0; }
.mobile-menu { display: none !important; }
#content { max-width: 1490px; margin: auto; padding: 36px 42px 22px; min-height: calc(100vh - 160px); outline: none; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-bottom: 30px; }
.kicker { font-size: 12px; letter-spacing: 1.4px; color: #819b89; font-weight: 650; margin-bottom: 9px; }
h1 { font-size: 30px; letter-spacing: -.8px; font-weight: 700; }
.greeting { display: inline-block; color: var(--brand); font-size: 25px; margin-left: 4px; transform: none; }
.page-subtitle { color: var(--muted); font-size: 14px; line-height: 1.8; margin-top: 9px; }
.date-label { display: flex; align-items: center; gap: 9px; font-size: 12px; color: #7c9180; }
.date-label .icon { width: 17px; height: 17px; color: #91a888; }
.app-footer { display: flex; justify-content: space-between; gap: 20px; color: #8b9b8e; font-size: 12px; max-width: 1490px; margin: auto; padding: 16px 42px 30px; }
.app-footer>a { color: #688c6e; }
.app-footer>a>span { color: var(--brand); margin-left: 8px; }
.preview-note { text-align: center; color: #97a590; font-size: 12px; margin-top: 25px; }

/* Shared controls and surfaces */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 18px; min-height: 44px; border-radius: 8px; border: 1px solid transparent; font-size: 14px; font-weight: 600; white-space: nowrap; transition: background .18s, border-color .18s; }
.btn .icon { width: 18px; height: 18px; }
.btn:hover { transform: none; }
.btn.primary { background: var(--brand); color: #063e2c; }
.btn.primary:hover { background: #00ad7e; box-shadow: none; }
.btn.dark { color: #fff; background: #173f2b; }
.btn.light { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn.light:hover { border-color: #a8d2b8; }
.btn.full { width: 100%; }
.btn.text-btn { background: none; color: var(--deep); font-size: 12px; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; background: none; border-radius: 8px; color: #809b83; width: 34px; height: 34px; transition: background .2s, color .2s; }
.icon-btn .icon { width: 18px; height: 18px; }
.icon-btn:hover { background: var(--soft); color: var(--deep); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel-top { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.panel-top h2 { font-size: 16px; letter-spacing: -.4px; }
.panel-top>div>p { margin-top: 6px; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 5px; background: var(--soft); color: #49855c; font-size: 12px; line-height: 1.4; }
.soft-purple { background: var(--lavender); color: #967fb5; }
.progress { height: 5px; width: 100%; background: #eaf3eb; overflow: hidden; border-radius: 5px; }
.progress>span { display: block; height: 100%; background: var(--brand); border-radius: inherit; transition: width .3s; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.section-head h2 { font-size: 19px; letter-spacing: -.6px; }
.section-head>a { display: flex; gap: 5px; align-items: center; color: var(--deep); font-size: 12px; font-weight: 500; }
.section-head>a .icon { width: 14px; height: 14px; }
.overline { font-size: 12px; letter-spacing: 1.2px; font-weight: 650; color: #5c9068; }

/* Dashboard */
.dashboard-top { display: grid; grid-template-columns: minmax(0, 2.6fr) minmax(245px, 1fr); gap: 23px; }
.welcome-banner { border: 1px solid #00b886; border-radius: var(--radius); background: var(--soft); display: grid; grid-template-columns: 1.45fr 1fr; align-items: center; min-height: 322px; overflow: hidden; padding: 30px 30px 27px; gap: 12px; position: relative;  border-color: var(--line);}
.banner-text { position: relative; z-index: 2; }
.lesson-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: .7px; font-weight: 650; color: var(--deep); padding: 0; border: 0; border-radius: 6px; }
.lesson-label .icon { width: 12px; height: 12px; }
.banner-text h2 { font-size: 31px; line-height: 1.25; letter-spacing: -1.2px; color: var(--ink); margin: 16px 0 14px; }
.banner-text h2>span { color: var(--deep); }
.banner-text>p { font-size: 12px; line-height: 1.85; color: var(--muted); }
.btn.hero-button { background: var(--brand); color: #063e2c; box-shadow: none; min-height: 43px; font-size: 12px; margin-top: 21px; padding: 0 16px; border-radius: 8px; }
.btn.hero-button:hover { background: #00ad7e; box-shadow: none; }
.btn.hero-button .icon { width: 16px; height: 16px; }
.banner-note { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); margin-top: 17px; }
.tiny-avatar { display: grid; place-items: center; font-size: 12px; font-weight: 700; width: 18px; height: 18px; border: 1px solid #08644445; border-radius: 50%; background: var(--surface);  border-color: var(--line); color: var(--deep);}
.banner-cards { position: relative; width: 200px; height: 249px; justify-self: center; margin-top: 1px; }
.banner-card-back { position: absolute; width: 175px; height: 231px; top: 12px; left: 25px; background: #f5d0a1; border: 4px solid #ffe4c5; border-radius: 15px; transform: rotate(11deg);  display: none;}
.banner-card { position: absolute; width: 185px; height: 243px; top: 0; left: 0; padding: 19px; background: var(--surface); border-radius: 12px; transform: none; box-shadow: none; color: var(--ink); animation: none;  border: 1px solid #d9e3dc;}
.banner-card-label { display: flex; align-items: center; justify-content: space-between; color: #94a78d; font-size: 12px; letter-spacing: 1.1px; }
.banner-card-label .icon { width: 13px; height: 13px; color: #94b382; }
.banner-word-symbol { display: block; font-size: 33px; line-height: 1; margin: 13px 0 10px; color: var(--brand); }
.banner-card>b { display: block; font: 750 25px var(--heading); letter-spacing: -1px; }
.banner-card>small { display: block; font-size: 12px; color: #8c9f83; margin-top: 5px; }
.banner-card>small>span { display: inline-block; background: #eff6e9; border-radius: 3px; font-size: 12px; margin-left: 6px; padding: 2px 4px; }
.banner-card hr { height: 1px; border: 0; background: #edf2e8; margin: 15px 0 12px; }
.banner-card>strong { font-size: 12px; font-weight: 600; }
.banner-card>p { color: #8da07f; font-size: 12px; margin-top: 6px; font-style: italic; }
.banner-card-foot { display: none; justify-content: space-between; color: #6d925c; font-size: 12px; margin-top: 17px; }
.banner-card-foot>span>span { padding: 0 5px; }
.banner-card-foot i { color: #afbea2; font-style: normal; }
.banner-spark { position: absolute; right: -20px; top: -9px; color: #087849; font-size: 30px; transform: rotate(10deg);  display: none;}
.daily-goal { padding: 23px 24px; display: flex; align-items: center; flex-direction: column; }
.daily-goal .panel-top { width: 100%; }
.tiny-icon { color: #8caa82; }
.tiny-icon .icon { height: 18px; width: 18px; }
.goal-ring { height: 151px; width: 151px; position: relative; margin: 15px 0 6px; }
.goal-ring>svg { height: 100%; width: 100%; transform: rotate(-90deg); }
.goal-ring circle { fill: none; stroke-width: 7; }
.ring-track { stroke: var(--line); }
.ring-fill { stroke: var(--brand); stroke-dasharray: 241 402; stroke-linecap: round; animation: ring-reveal 1s ease-out; }
.goal-ring>div { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.goal-ring strong { font: 750 32px var(--heading); letter-spacing: -1.2px; }
.goal-ring strong>span { font-size: 16px; font-weight: 500; color: #a3b59a; margin-left: 3px; }
.goal-ring>div>span { color: #92a58a; font-size: 12px; margin-top: 4px; }
.goal-caption { color: #7c9b72; font-size: 12px; display: flex; align-items: center; gap: 6px; }
.goal-status-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--brand); }
.week-row { display: flex; gap: 9px; justify-content: space-between; margin-top: 23px; width: 100%; }
.week-row>div { display: flex; align-items: center; flex-direction: column; gap: 8px; }
.week-row>div>span { color: #92a785; font-size: 12px; }
.week-row b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #f2f6ed; color: #b4c2a7; font-size: 12px; font-weight: 500; }
.week-row b .icon { width: 12px; height: 12px; }
.week-row .complete b { color: #60a974; background: #e5f6e7; }
.week-row .today b { background: var(--brand); color: #08452d; box-shadow: 0 0 0 3px #eff9ed; font-weight: 650; }
.stats-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 23px 0 34px; }
.stat-card { display: flex; align-items: flex-start; gap: 13px; padding: 21px 19px; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; }
.stat-icon { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 10px; flex-shrink: 0; }
.stat-icon .icon { width: 19px; height: 19px; }
.stat-label { font-size: 12px; color: #7e9380; display: block; }
.stat-card strong { font: 750 27px var(--heading); letter-spacing: -1px; display: block; margin: 7px 0 6px; }
.stat-card small { font-size: 12px; color: #8aa07e; line-height: 1.6; display: block; }
.collection-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
.collection-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color .18s; }
.collection-card:hover { transform: none; border-color: #b3c8bb; box-shadow: none; }
.collection-cover { height: 86px; position: relative; overflow: hidden; padding: 20px; border-bottom: 1px solid var(--line);  background: var(--soft); color: var(--deep);}
.collection-tag { font-size: 12px; letter-spacing: .6px; font-weight: 650; position: relative; z-index: 1; opacity: 1;  color: var(--muted);}
.collection-cover-icon { position: absolute; right: 25px; top: 26px; width: 52px; height: 52px; background: none; border: 0; border-radius: 0; display: grid; place-items: center; transform: none; }
.collection-cover-icon>.icon { width: 27px; height: 27px; }
.collection-cover-number { position: absolute; bottom: 9px; left: 19px; font: 500 31px var(--heading); letter-spacing: -2px; opacity: .22;  display: none;}
.collection-body { padding: 20px 21px 17px; }
.collection-card h3 { font-size: 16px; letter-spacing: -.45px; }
.collection-card p { color: #8b9e82; font-size: 12px; margin-top: 5px; }
.collection-meta { display: flex; justify-content: space-between; color: #809e75; font-size: 12px; margin: 21px 0 9px; }
.collection-meta b { color: #279369; font-weight: 600; }
.collection-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #92a985; font-size: 12px; margin-top: 11px; }
.collection-open { display: flex; align-items: center; gap: 2px; color: #739d5f; }
.collection-open .icon { width: 11px; height: 11px; }
.dashboard-bottom { display: grid; grid-template-columns: 1.7fr 1fr; gap: 23px; margin-top: 26px; }
.activity-panel { padding: 24px 26px; }
.chart-period { background: #f6f9f2; border: 1px solid #e9efdf; border-radius: 6px; padding: 5px 8px; font-size: 12px; color: #8ca076; }
.activity-content { display: flex; align-items: center; gap: 27px; padding-top: 25px; }
.activity-total { min-width: 135px; }
.activity-total strong { display: block; font: 750 34px var(--heading); letter-spacing: -1.2px; }
.activity-total strong>span { font: 12px var(--font); letter-spacing: 0; color: #90a67d; margin-left: 8px; }
.activity-total>span { display: block; margin-top: 9px; color: #29935a; font-size: 12px; font-weight: 500; }
.activity-total>span>span { color: #a4b28f; font-weight: 400; margin-left: 2px; }
.mini-chart { flex: 1; height: 105px; display: flex; gap: 17px; align-items: flex-end; padding-bottom: 21px; }
.mini-chart>div { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 100%; flex: 1; }
.mini-chart>div>span { display: block; width: 22px; background: #d9eecf; border-radius: 4px 4px 0 0; transform-origin: bottom; animation: bar-grow .8s ease; }
.mini-chart>div>span.active { background: var(--brand); }
.mini-chart small { position: absolute; bottom: -21px; color: #9aae8a; font-size: 12px; }
.daily-tip { background: var(--soft); border-color: var(--line); padding: 24px 26px; }
.tip-label { display: flex; gap: 7px; align-items: center; font-size: 12px; letter-spacing: 1px; color: #939862; }
.tip-label>.icon { width: 13px; height: 13px; }
.daily-tip h3 { color: var(--ink); font-size: 21px; letter-spacing: -.7px; margin: 16px 0 12px; }
.daily-tip>p { color: #8c9a65; font-size: 12px; line-height: 1.85; }
.daily-tip>p>em { font-size: 12px; }
.daily-tip>a { display: flex; gap: 5px; align-items: center; font-size: 12px; font-weight: 500; color: #749448; margin-top: 17px; }
.daily-tip>a>.icon { width: 13px; height: 13px; }

/* Dictionary and reusable tables */
.dictionary-summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; background: var(--soft); border: 1px solid #cfead5; border-radius: 12px; margin-bottom: 24px;  border-color: var(--line);}
.dictionary-summary>div { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.dictionary-summary strong { color: var(--ink); font-size: 16px; }
.dictionary-summary .icon { width: 20px; height: 20px; color: #43a56d; }
.table-panel { overflow: hidden; }
.table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 25px; }
.input-search { display: flex; align-items: center; gap: 12px; flex: 1; }
.input-search>.icon { color: #8bac84; width: 19px; height: 19px; }
.input-search input { background: none; border: 0; outline: none; min-width: 0; width: 100%; padding: 10px 0; font-size: 14px; }
.filter-tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--line); padding: 0 25px; }
.filter-tabs>button { display: flex; align-items: center; gap: 8px; padding: 14px 0 17px; position: relative; background: none; color: #91a082; font-size: 13px; white-space: nowrap; }
.filter-tabs>button.selected { color: #337e4d; font-weight: 600; }
.filter-tabs>button.selected::after { position: absolute; content: ''; bottom: -1px; left: 0; right: 0; height: 2px; background: var(--brand); }
.filter-tabs small { padding: 2px 5px; font-size: 12px; border-radius: 4px; background: #eaf5e4; color: #74a16b; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; text-align: left; }
thead { background: #f7faf4; }
th { font-size: 12px; letter-spacing: .7px; color: #8fa27f; padding: 15px 25px; font-weight: 550; }
td { font-size: 14px; padding: 16px 25px; border-bottom: 1px solid var(--line); color: #6c835c; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fbfdf8; }
.word-cell { display: flex; align-items: center; gap: 13px; }
.word-cell strong { font-size: 15px; font-weight: 550; color: #3c6344; }
.word-cell small { display: block; color: #9cae8e; font-size: 12px; margin-top: 4px; }
.word-sound { width: 33px; height: 33px; border-radius: 9px; background: #eff8e9; color: #8bb574; }
.word-sound .icon { width: 16px; height: 16px; }
.word-type { display: inline-flex; border: 1px solid #e3edd9; background: #f7fbf1; color: #8b9f79; font-size: 12px; padding: 4px 9px; border-radius: 5px; }
.row-actions { display: flex; gap: 6px; }
.row-actions .icon-btn { width: 30px; height: 30px; }
.row-actions .icon { width: 16px; height: 16px; }
.is-saved { color: #c985a1; }
.is-saved svg { stroke: #c985a1; fill: #fce4ed; }
.table-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); padding: 19px 25px; font-size: 12px; color: #92a682; }
.pagination { display: flex; gap: 6px; align-items: center; }
.pagination>button { background: none; width: 29px; height: 29px; border-radius: 6px; color: #8aa275; font-size: 12px; }
.pagination>button.selected { background: var(--brand); color: #114d31; }
.pagination .icon { width: 14px; height: 14px; }
.table-panel>.panel-top { padding: 23px 25px; border-bottom: 1px solid var(--line); }
.empty-search { text-align: center; padding: 45px 20px; color: #93a882; }

/* Collections and favorites */
.collection-tabs { padding: 0; margin-bottom: 27px; }
.collection-top { display: flex; justify-content: space-between; align-items: flex-start; }
.collection-art { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 12px; }
.collection-art>.icon { width: 26px; height: 26px; }
.collection-art>img { width: 40px; height: 40px; object-fit: contain; }
.personal-card { padding: 24px; }
.personal-card h3 { margin-top: 18px; }
.new-collection-card { display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 28px 20px; background: transparent; border: 1px dashed #c4d8b8; border-radius: var(--radius); color: var(--muted); min-height: 285px;  border-color: #c4cfc6;}
.new-collection-card>span { width: 49px; height: 49px; border-radius: 8px; display: grid; place-items: center; background: var(--soft); color: var(--deep); margin-bottom: 18px; }
.new-collection-card strong { font-size: 14px; font-weight: 550; color: var(--ink); }
.new-collection-card p { font-size: 12px; line-height: 1.9; margin-top: 12px; }
.new-collection-card:hover { background: var(--soft); border-color: #7cbe8f; }
.back-link { display: inline-flex; align-items: center; gap: 6px; color: #799d68; font-size: 12px; margin-bottom: 22px; }
.back-link .icon { width: 14px; height: 14px; }
.collection-detail-banner { padding: 34px; border-radius: var(--radius); display: flex; align-items: center; gap: 26px; }
.detail-art { width: 85px; height: 85px; background: #ffffff85; display: grid; place-items: center; border: 1px solid white; border-radius: 20px; flex-shrink: 0; }
.detail-art .icon { width: 37px; height: 37px; }
.detail-art img { width: 62px; height: 62px; object-fit: contain; }
.collection-detail-banner h1 { margin-top: 7px; }
.collection-detail-banner p { font-size: 13px; margin-top: 9px; opacity: .7; }
.collection-detail-banner p>span { padding: 0 8px; }
.collection-detail-banner>.icon-btn { margin-left: auto; align-self: flex-start; }
.detail-actions { display: flex; gap: 13px; align-items: center; margin: 28px 0; }
.detail-progress { flex: 1; max-width: 230px; margin-right: auto; font-size: 12px; color: #819f70; }
.detail-progress>.progress { margin-top: 9px; }
.favorite-summary { display: flex; align-items: center; gap: 19px; padding: 26px; background: var(--soft); border: 1px solid #f6dde5; border-radius: 14px; margin-bottom: 26px; position: relative; overflow: hidden;  border-color: var(--line);}
.favorite-summary strong { color: var(--ink); font-size: 16px; }
.favorite-summary p { color: var(--muted); font-size: 13px; margin-top: 7px; }
.favorite-decoration { position: absolute; right: 28px; top: -33px; font-size: 110px; color: #f3d5e1; transform: rotate(15deg);  display: none;}
.favorite-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 23px; }
.favorite-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 26px; transition: transform .2s; }
.favorite-card:hover { transform: none;  border-color: #b3c8bb;}
.favorite-card>div { display: flex; align-items: center; justify-content: space-between; }
.favorite-card h2 { font-size: 29px; letter-spacing: -1px; margin: 21px 0 6px; }
.phonetic { color: #96a989; font-size: 13px; }
.favorite-card hr { border: 0; height: 1px; background: var(--line); margin: 24px 0 19px; }
.favorite-card>p { color: #718e5f; font-size: 16px; }
.favorite-card footer { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #98ad85; margin-top: 22px; }

/* Cards and quiz */
.study-layout { display: grid; grid-template-columns: 240px minmax(0,590px); justify-content: center; gap: 40px; margin-top: 37px; }
.study-sidebar { align-self: start; padding: 27px 24px; }
.study-icon { width: 55px; height: 55px; display: grid; place-items: center; border-radius: 13px; margin-bottom: 19px; }
.study-icon .icon { width: 27px; height: 27px; }
.study-sidebar h3 { font-size: 18px; letter-spacing: -.5px; }
.study-sidebar>p { color: #8da27c; font-size: 12px; margin-top: 7px; }
.study-info { display: flex; flex-direction: column; gap: 13px; margin: 28px 0 16px; }
.study-info>span { display: flex; justify-content: space-between; font-size: 12px; color: #92a780; }
.study-info b { color: #72a068; font-weight: 550; }
.study-help { display: flex; gap: 10px; padding-top: 25px; margin-top: 28px; border-top: 1px solid var(--line); color: var(--brand); }
.study-help>span { font-size: 25px; }
.study-help p { font-size: 12px; color: #93a77e; line-height: 1.9; }
.text-link { display: block; text-align: center; color: var(--deep); font-size: 12px; margin-top: 24px; }
.study-status { display: flex; align-items: center; justify-content: space-between; color: #96aa81; font-size: 12px; margin-bottom: 16px; }
.study-status b { font-weight: 600; color: #6b965b; }
.study-card { min-height: 360px; padding: 25px; border-radius: var(--radius); background: var(--surface); border: 1px solid #d2e9c8; box-shadow: none; cursor: pointer; transition: background .3s;  border-color: var(--line);}
.study-card.flipped { background: var(--soft); }
.study-card-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: #9ab187; letter-spacing: 1px; }
.study-word { text-align: center; padding: 5px 0 18px; }
.study-spark { display: block; color: var(--brand); font-size: 44px; margin: 0 0 15px; }
.study-word h2 { font-size: 47px; letter-spacing: -2px; }
.study-word p { color: #94ac7c; font-size: 15px; margin: 12px 0; }
.flip-label { display: flex; align-items: center; gap: 7px; justify-content: center; font-size: 12px; color: #9cb386; margin-top: 17px; }
.flip-label>.icon { width: 14px; height: 14px; }
.study-navigation { display: flex; align-items: center; justify-content: space-between; margin: 16px 0; }
.study-navigation>span { font-size: 12px; color: #9eb288; }
.study-navigation kbd { margin-left: 8px; }
.review-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.review-actions>.btn { min-height: 47px; }
.review-again { background: #fff1dc; border-color: #f1dfbd; color: #b19155; }
.quiz-time { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; color: #83a367; font-size: 13px; background: #eef6e6; border-radius: 8px; }
.quiz-layout { display: grid; grid-template-columns: minmax(0,1fr) 250px; gap: 26px; margin-top: 35px; }
.quiz-area { padding: 30px 34px; }
.quiz-topline { display: flex; justify-content: space-between; font-size: 12px; color: #8aa771; margin-bottom: 17px; }
.quiz-question { text-align: center; padding: 45px 0 31px; }
.quiz-question h2 { font-size: 27px; line-height: 1.5; letter-spacing: -.9px; margin: 15px 0 9px; }
.quiz-question h2>span { color: #429857; }
.quiz-question .btn { margin-top: 6px; }
.answer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.answer-option { background: #fcfdfb; border: 1px solid #e0ebd7; border-radius: 11px; padding: 18px; display: flex; align-items: center; gap: 13px; text-align: left; font-size: 14px; color: #72925a; transition: border-color .2s, background .2s; }
.answer-option>span { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; border: 1px solid #d9e7cc; border-radius: 7px; font-size: 12px; color: #92af78; }
.answer-option:hover, .answer-option.selected { background: #e8f8e6; border-color: var(--brand); }
.answer-option.selected>span { background: var(--brand); border-color: var(--brand); color: #114f31; }
.answer-option.correct { background: #daf5d9; border-color: var(--brand); }
.answer-option.incorrect { background: #fff0e7; border-color: #dfb797; color: #b48460; }
.quiz-answer-feedback { color: #699c53; min-height: 44px; padding-top: 17px; font-size: 12px; line-height: 1.7; }
.quiz-controls { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-top: 21px; border-top: 1px solid var(--line); margin-top: 12px; }
.quiz-progress { text-align: center; padding: 28px 23px; }
.quiz-progress>.stat-icon { height: 53px; width: 53px; margin: auto; }
.quiz-progress h3 { font-size: 18px; letter-spacing: -.5px; margin: 19px 0 9px; }
.quiz-progress>p { font-size: 12px; line-height: 1.8; color: #9aaf80; }
.quiz-step-dots { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; margin: 27px 0; }
.quiz-step-dots>span { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 7px; background: #f1f6e9; color: #a4b98c; font-size: 12px; }
.quiz-step-dots .done { background: #dbf4d5; color: #7bad6c; }
.quiz-step-dots .current { background: var(--brand); color: #0d5030; }
.quiz-step-dots .icon { width: 14px; height: 14px; }
.quiz-score { padding-top: 23px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 15px; font-size: 12px; color: #9ab280; }
.quiz-score>span { display: flex; justify-content: space-between; }
.quiz-score b { color: #74a260; font-weight: 550; }
.quiet-note { text-align: center; font-size: 12px; color: #a3b689; margin: 20px 10px; line-height: 1.8; }
.result-preview-link { display: flex; align-items: center; justify-content: center; gap: 5px; color: var(--deep); font-size: 12px; margin-top: 18px; }
.result-preview-link .icon { width: 14px; height: 14px; }
.result-page { text-align: center; max-width: 730px; margin: 10px auto 30px; position: relative; }
.result-badge { height: 90px; width: 90px; display: grid; place-items: center; margin: 0 auto 28px; background: #fff0b8; color: #c2a23d; border: 8px solid #fff8e1; border-radius: 50%; box-shadow: 0 0 0 8px #f5f7e9; }
.result-badge .icon { width: 37px; height: 37px; }
.result-page>h1 { font-size: 33px; }
.result-page>p:not(.kicker) { max-width: 430px; margin: 14px auto 30px; color: #8ea975; font-size: 13px; line-height: 1.9; }
.result-stats { display: grid; grid-template-columns: repeat(3,1fr); padding: 28px 15px; margin: 30px 0 24px; }
.result-stats>div:not(:last-child) { border-right: 1px solid var(--line); }
.result-stats strong { font: 750 30px var(--heading); letter-spacing: -1px; color: #77a364; }
.result-stats strong>span { font-size: 16px; color: #a6be8c; }
.result-stats p { font-size: 12px; color: #9bb380; margin-top: 8px; }
.result-review { padding: 26px; text-align: left; }
.result-review h3 { font-size: 14px; margin-bottom: 15px; }
.result-review>div { display: flex; align-items: center; gap: 20px; padding: 18px 0; border-top: 1px solid var(--line); }
.result-review>div>span { margin-right: auto; }
.result-review b { font-weight: 550; font-size: 15px; }
.result-review small { display: block; font-size: 12px; color: #a7bc8c; margin-top: 6px; }
.result-review>div>strong { font-size: 13px; color: #8aab6d; font-weight: 400; }
.result-actions { display: flex; justify-content: center; gap: 13px; margin-top: 27px; }
.result-confetti { position: absolute; color: #b7d09e; font-size: 47px; top: 50px; pointer-events: none; }
.result-confetti.one { left: 57px; transform: rotate(-15deg); }
.result-confetti.two { right: 50px; color: #e4cb94; font-size: 35px; top: 120px; }

/* Progress, alphabet and grammar */
.analytics-grid { display: grid; grid-template-columns: 2.3fr 1fr; gap: 25px; margin-bottom: 28px; }
.chart-panel { padding: 27px; }
.chart-legend { display: flex; align-items: center; gap: 6px; color: #97b17e; font-size: 12px; }
.chart-legend>i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.large-chart { display: flex; gap: 20px; height: 247px; margin-top: 35px; padding-bottom: 23px; }
.chart-y { display: flex; flex-direction: column; justify-content: space-between; color: #a6b992; font-size: 12px; }
.chart-area { flex: 1; min-width: 0; position: relative; }
.chart-grid-lines { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; }
.chart-grid-lines>i { border-top: 1px dashed #eaf1e1; }
.chart-area>svg { height: 100%; width: 100%; position: relative; }
.chart-x { display: flex; justify-content: space-between; position: absolute; bottom: -24px; left: 0; right: 0; font-size: 12px; color: #a4b98c; }
.streak-panel { display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 28px 25px; text-align: center; }
.streak-large { height: 61px; width: 61px; border-radius: 17px; display: grid; place-items: center; background: #fff1d9; color: #d8ad67; }
.streak-large .icon { width: 32px; height: 32px; }
.streak-panel h2 { font-size: 34px; margin-top: 17px; }
.streak-panel>p { font-size: 12px; color: #96b17e; margin-top: 7px; }
.streak-message { font-size: 12px; color: #a2b98a; line-height: 1.9; padding-top: 18px; margin-top: 24px; border-top: 1px solid var(--line); width: 100%; }
.table-symbol { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 9px; }
.table-symbol .icon { width: 17px; height: 17px; }
.accuracy-bar { display: flex; align-items: center; gap: 9px; color: #8aaa72; font-size: 12px; }
.accuracy-bar>.progress { width: 63px; }
.select-control, select { background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 12px 14px; font-size: 13px; color: #819e6c; }
.alphabet-intro { display: flex; align-items: center; gap: 25px; padding: 28px 30px; border-radius: 15px; background: var(--soft); border: 1px solid #d5eacd; margin-bottom: 28px;  border-color: var(--line);}
.alphabet-aa { font: 700 49px var(--heading); letter-spacing: -3px; color: #76b782; }
.alphabet-intro h3 { font-size: 17px; }
.alphabet-intro p { font-size: 13px; color: #93ae80; margin-top: 8px; }
.alphabet-intro>span:last-child { display: flex; gap: 8px; margin-left: auto; }
.alphabet-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 17px; }
.letter-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column; align-items: center; padding: 26px 15px 21px; min-height: 164px; position: relative; transition: transform .25s, box-shadow .25s; }
.letter-card:hover { transform: none; box-shadow: none;  border-color: #b3c8bb;}
.letter-sound { position: absolute; right: 12px; top: 12px; color: #afc69b; }
.letter-sound .icon { width: 14px; height: 14px; }
.letter-card strong { font: 700 38px var(--heading); color: #79a763; letter-spacing: -1px; }
.letter-card strong>span { font-size: 28px; color: #b1c99b; margin-left: 3px; }
.letter-phonetic { font-size: 12px; color: #a4be8b; margin-top: 6px; }
.letter-card small { font-size: 12px; color: #97b478; margin-top: 15px; }
.letter-card.vowel { background: var(--soft); border-color: #c4d8cc; }
.letter-card.vowel strong { color: #53a265; }
.letter-modal { text-align: center; padding: 20px 0; }
.letter-modal h2 { font-size: 100px; letter-spacing: -5px; color: #7ba960; margin: 20px 0 0; }
.letter-modal h2>span { font-size: 77px; color: #afca93; }
.letter-modal>p { font-size: 20px; color: #9cbb7e; margin-top: 5px; }
.letter-modal>strong { display: block; font-size: 21px; font-weight: 500; color: #8bb269; margin: 20px 0 29px; }
.verbs-intro { display: flex; align-items: center; gap: 24px; padding: 26px 30px; border-radius: 14px; background: var(--soft); border: 1px solid #e3d7f3; margin-bottom: 27px;  border-color: var(--line);}
.verb-symbol { display: grid; place-items: center; width: 55px; height: 55px; background: var(--surface); color: var(--deep); border-radius: 14px; }
.verb-symbol .icon { width: 28px; height: 28px; }
.verbs-intro h3 { font-size: 25px; color: #9c81b4; letter-spacing: -.5px; }
.verbs-intro h3>span { padding: 0 12px; color: #c8b2de; font-weight: 400; }
.verbs-intro p { font-size: 12px; color: #af96c3; margin-top: 8px; }
.verbs-caption { margin-left: auto; color: #b399c9; font-size: 12px; line-height: 1.8; }
.verbs-table th small { display: block; color: #b0c297; font-size: 12px; font-weight: 400; letter-spacing: 0; margin-top: 6px; }
.verbs-table td strong { font-weight: 550; color: #80a260; }
.verb-past { color: #b191cb; }
.verb-participle { color: #82b59b; }

/* Forms and settings */
.settings-layout { display: grid; grid-template-columns: 170px 1fr; gap: 31px; max-width: 1060px; }
.settings-nav { display: flex; flex-direction: column; gap: 5px; align-self: start; }
.settings-nav>a { padding: 13px 16px; color: #96b07b; font-size: 14px; border-radius: 0;  border-left: 2px solid transparent;}
.settings-nav>a.active { background: transparent; color: var(--deep);  border-left-color: var(--brand); font-weight: 600;}
.settings-panels { display: flex; flex-direction: column; gap: 28px; }
.settings-card { padding: 29px 31px; }
.settings-card>h2 { font-size: 19px; letter-spacing: -.5px; }
.settings-card>p { font-size: 14px; line-height: 1.8; color: #a0b68a; margin-top: 8px; }
.profile-edit { display: flex; align-items: center; gap: 20px; margin: 30px 0; }
.large-avatar { width: 67px; height: 67px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); color: var(--deep); font-size: 24px; position: relative; }
.large-avatar>span { position: absolute; bottom: 0; right: 0; width: 24px; height: 24px; border: 3px solid var(--surface); border-radius: 50%; background: var(--brand); color: #0c5831; display: grid; place-items: center; }
.large-avatar>span .icon { width: 12px; height: 12px; }
.profile-edit strong { font-size: 14px; font-weight: 550; }
.profile-edit p { font-size: 14px; color: #a4bc8b; margin-top: 7px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 19px; }
label:not(.input-search) { display: block; color: #83a468; font-size: 13px; }
label>input:not([type=range]), label>select, label>textarea { display: block; background: var(--surface); border: 1px solid #dbe9cb; border-radius: 8px; padding: 12px 14px; margin-top: 9px; width: 100%; font-size: 14px; resize: vertical;  border-color: #cdd6cf; color: var(--ink);}
label>textarea { line-height: 1.8; }
.settings-actions { display: flex; justify-content: flex-end; margin-top: 25px; }
.goal-options { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; margin: 27px 0; }
.goal-option { padding: 18px 14px; border: 1px solid #dfeacf; border-radius: 8px; background: var(--surface); text-align: left; position: relative; min-height: 132px;  border-color: var(--line);}
.goal-option strong { font: 700 25px var(--heading); letter-spacing: -.5px; color: #8dae6f; }
.goal-option strong>span { font: 12px var(--font); letter-spacing: 0; }
.goal-option small { display: block; font-size: 12px; color: #afc294; margin-top: 10px; }
.goal-option.selected { background: var(--soft); border-color: #7faf96; }
.goal-option .chip { font-size: 12px; letter-spacing: 0; background: none; color: var(--deep); position: static; bottom: -9px; left: 13px; padding: 0;  display: block; width: fit-content; margin-top: 8px;}
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 23px 0; border-top: 1px solid var(--line); }
.setting-row strong { font-size: 14px; font-weight: 550; }
.setting-row p { font-size: 14px; color: #a5ba8c; margin-top: 7px; }
.switch { width: 36px; height: 21px; border-radius: 20px; background: #bac5bc; position: relative; flex-shrink: 0; transition: background .2s; }
.switch::after { content: ''; position: absolute; left: 3px; top: 3px; width: 15px; height: 15px; background: white; border-radius: 50%; box-shadow: 0 1px 3px #486d2410; transition: transform .2s; }
.switch.on { background: var(--brand); }
.switch.on::after { transform: translateX(15px); }
.theme-options { display: flex; gap: 20px; margin-top: 25px; }
.theme-option { background: none; border: 1px solid #dfe9cf; border-radius: 8px; padding: 8px; width: 165px;  border-color: var(--line);}
.theme-option.selected { background: var(--soft); border-color: #7faf96; }
.theme-sample { display: block; height: 81px; border-radius: 6px; border: 1px solid #e5ecda; position: relative; overflow: hidden; background: #f0f2ef;  border-color: var(--line);}
.theme-sample i { position: absolute; inset: 0 auto 0 0; width: 24%; background: white; border-right: 1px solid #e5edda; }
.theme-sample b { position: absolute; top: 20%; left: 34%; right: 10%; height: 30%; background: #d3e6da; border-radius: 3px; }
.theme-sample em { position: absolute; top: 61%; left: 34%; right: 10%; height: 22%; background: white; border-radius: 3px; }
.dark-sample { background: #26322a; border-color: #344334; }
.dark-sample i { background: #1c2a22; border-color: #334631; }
.dark-sample b { background: #3b6750; }
.dark-sample em { background: #354835; }
.theme-option>span:last-child { display: flex; align-items: center; gap: 7px; padding: 12px 5px 5px; color: #9cb780; font-size: 12px; }
.theme-option .icon { width: 15px; height: 15px; }
.add-word-layout { display: grid; grid-template-columns: minmax(0,1.7fr) 1fr; gap: 37px; max-width: 1070px; }
.word-form { padding: 31px; }
.word-form h2 { font-size: 19px; margin-bottom: 27px; }
.word-form>label { margin-bottom: 22px; }
.word-form>.form-grid { margin-bottom: 22px; }
.form-actions { display: flex; justify-content: flex-end; gap: 11px; border-top: 1px solid var(--line); padding-top: 25px; margin-top: 28px; }
.word-form-tip { padding: 26px 6px; }
.word-form-tip>span { color: var(--brand); font-size: 40px; }
.word-form-tip h3 { font-size: 24px; letter-spacing: -.6px; line-height: 1.5; margin: 16px 0; }
.word-form-tip>p { color: #a1b787; font-size: 14px; line-height: 1.9; }
.example-note { padding: 24px; border: 1px solid #dbecc7; background: var(--soft); border-radius: 13px; margin-top: 27px;  border-color: var(--line);}
.example-note strong { font: 700 21px var(--heading); color: #88ac65; }
.example-note p { color: #97b477; font-size: 13px; line-height: 1.8; font-style: italic; margin-top: 13px; }
.example-note small { display: block; color: #aac18a; font-size: 12px; line-height: 1.8; margin-top: 9px; }

/* Dialogs and feedback */
dialog { width: 480px; max-width: calc(100% - 32px); border: 1px solid var(--line); border-radius: 20px; background: var(--surface); color: var(--ink); padding: 36px; box-shadow: 0 25px 100px #20362025; }
dialog::backdrop { background: #203d2e60; backdrop-filter: blur(5px); }
.dialog-close { position: absolute; top: 14px; right: 14px; font-size: 26px; }
.modal-emblem { display: grid; place-items: center; width: 51px; height: 51px; border-radius: 14px; margin-bottom: 21px; }
.modal-emblem .icon { width: 25px; height: 25px; }
#dialog-content>h2 { font-size: 24px; letter-spacing: -.7px; }
#dialog-content>p { font-size: 13px; line-height: 1.9; color: #9fb785; margin: 12px 0 25px; }
.preview-form>label { margin: 20px 0; }
.preview-form>.btn { margin-top: 22px; }
.color-options { display: flex; gap: 14px; margin-top: 13px; }
.color-swatch { width: 33px; height: 33px; border-radius: 50%; border: 3px solid var(--surface); background: var(--swatch); }
.color-swatch.selected { outline: 1px solid #6dba89; outline-offset: 2px; }
.modal-collections { display: flex; flex-direction: column; gap: 11px; }
.modal-collections>button { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 17px; color: #92ad76; font-size: 13px; text-align: left; }
.modal-collections>button>span { flex: 1; }
.modal-collections .icon { width: 18px; height: 18px; }
.modal-label { margin: 23px 0; }
.modal-label input[type=range] { display: block; width: 100%; margin-top: 19px; accent-color: var(--brand); }
.toast { position: fixed; bottom: 27px; left: calc(50% + 121px); transform: translate(-50%,20px); opacity: 0; background: #183f2c; color: white; padding: 15px 23px; border-radius: 11px; box-shadow: 0 8px 30px #183f2c20; z-index: 100; pointer-events: none; font-size: 13px; text-align: center; max-width: 90%; transition: opacity .2s, transform .2s; }
.toast.visible { opacity: 1; transform: translate(-50%,0); }
body:has(dialog[open]) { overflow: hidden; }
.skip { position: fixed; left: 15px; top: -100px; padding: 14px; background: white; border-radius: 8px; z-index: 200; }
.skip:focus { top: 15px; }
.loading-state { text-align: center; padding: 100px 0; }
.loading-state img { border-radius: 13px; }
.loading-state h1 { font-size: 25px; margin-top: 25px; }
.loading-state p { color: var(--muted); margin-top: 13px; }

/* Shared color roles: charcoal text, quiet surfaces and a single brand accent. */
.workspace-label,.nav-section-label,.local-badge,.breadcrumb,.breadcrumb strong,.page-subtitle,.kicker,.date-label,.sidebar-quote p,.goal-ring>div>span,.goal-caption,.week-row>div>span,.stat-label,.stat-card small,.collection-card p,.collection-meta,.collection-bottom,.collection-bottom>.collection-open,.chart-period,.activity-total strong>span,.activity-total>span>span,.mini-chart small,.preview-note,.app-footer,.table-footer,.word-cell small,.word-type,.phonetic,.filter-tabs>button,.detail-progress,.study-info>span,.study-help p,.study-sidebar>p,.study-status,.study-card-head,.study-word p,.flip-label,.study-navigation>span,.quiz-topline,.quiz-progress>p,.quiz-score,.quiet-note,.result-page>p:not(.kicker),.result-stats p,.result-review small,.chart-legend,.chart-x,.chart-y,.streak-panel>p,.streak-message,.alphabet-intro p,.letter-phonetic,.letter-card small,.verbs-table th small,.settings-card>p,.profile-edit p,.goal-option small,.setting-row p,.word-form-tip>p,#dialog-content>p,.daily-tip>p,.daily-tip>p>em,.tip-label,.banner-card-label,.banner-card>small,.banner-card>p,.banner-card-foot,.favorite-card footer,.verbs-intro p,.verbs-caption,.example-note p,.example-note small,.small-text,th,.pagination>button,.back-link,.overline { color:var(--muted); }
.word-cell strong,.favorite-card h2,.study-word h2,.answer-option,.result-stats strong,.result-review>div>strong,.letter-card strong,.verbs-table td strong,.settings-nav>a,.goal-option strong,label:not(.input-search),.theme-option>span:last-child,.modal-collections>button,td,.favorite-card>p,.verbs-intro h3,.verb-past,.verb-participle,.example-note strong { color:var(--ink); }
.collection-meta b,.study-info b,.quiz-question h2>span,.quiz-score b,.accuracy-bar,.filter-tabs>button.selected,.letter-card.vowel strong,.alphabet-aa { color:var(--deep); }
#navigation>a,.sidebar-setting,.btn.light,.icon-btn { color:var(--muted); }
.stat-icon,.collection-art,.study-icon,.table-symbol,.streak-large { background:var(--soft); color:var(--deep); border-radius:8px; }
.header-search,.sidebar-quote,thead,tbody tr:hover,.chart-period,.word-type,.word-sound { background:var(--bg); border-color:var(--line); }
.word-sound,.letter-sound,.header-search .icon,.date-label .icon,.tiny-icon { color:var(--muted); }
.streak-pill { background:var(--bg); color:var(--muted); border-color:var(--line); }
.profile-avatar { background:var(--soft); color:var(--deep); border:1px solid var(--line); }
.chip,.soft-purple,.filter-tabs small { background:var(--soft); color:var(--deep); }
.collection-detail-banner { background:var(--soft); color:var(--ink); border:1px solid var(--line); }
.collection-detail-banner p { color:var(--muted); opacity:1; }
.detail-art { background:var(--surface); border-color:var(--line); border-radius:12px; color:var(--deep); }
.progress,.week-row b { background:var(--line); }
.week-row .complete b { background:var(--soft); color:var(--deep); }
.week-row .today b { box-shadow:none; }
.goal-ring strong>span,.letter-card strong>span,.verbs-intro h3>span { color:var(--muted); }
.mini-chart>div>span { background:#c9ded1; animation:none; }
.ring-fill { animation:none; }
.answer-option { border-color:var(--line); background:var(--surface); }
.answer-option.selected,.answer-option.correct { background:var(--soft); border-color:#7faf96; }
.answer-option>span,.quiz-number-grid button,.quiz-time { background:var(--soft); color:var(--deep); }
.study-card,.favorite-card,.collection-card,.stat-card,.letter-card,.new-collection-card { border-radius:var(--radius); }
.banner-card>small>span { background:var(--soft); color:var(--deep); }
.banner-card hr { background:var(--line); }
.banner-card { height:270px; }
.banner-cards { height:270px; }
.banner-word-symbol { font-size:28px; margin:14px 0; }
.result-confetti { display:none; }
button,a { touch-action:manipulation; }

/* Readable secondary states, including inactive days and keyboard hints. */
.week-row b,.result-stats strong>span,kbd,#navigation>a small { color:var(--muted); }
.activity-total>span,.daily-tip>a,.study-status b { color:var(--deep); }
.pagination>button.selected { color:#063e2c; }
.review-again { background:var(--surface); color:var(--ink); border-color:var(--line); }

/* Motion */
@keyframes ring-reveal { from{stroke-dasharray:0 402} to{stroke-dasharray:241 402} }
@keyframes bar-grow { from{transform:scaleY(.1)} to{transform:scaleY(1)} }
@keyframes page-enter { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:none} }
#content { animation: none; }

/* Responsive layout */
@media(min-width:1550px) {
  .sidebar{width:258px;padding-left:24px;padding-right:24px}.workspace{margin-left:258px}.topbar{padding-left:50px;padding-right:50px}#content{padding:44px 50px 24px}.app-footer{padding-left:50px;padding-right:50px}.page-heading{margin-bottom:34px}h1{font-size: 35px}.welcome-banner {min-height:345px;padding:35px 38px; background: var(--soft); border-color: var(--line);}.banner-text h2 {font-size: 35px; color: var(--ink);}.banner-text>p {font-size: 14px; color: var(--muted);}.btn.hero-button {font-size: 13px;min-height:46px; background: var(--brand); color: #063e2c; box-shadow: none; border-radius: 8px;}.banner-note {font-size: 12px; color: var(--muted);}.banner-cards{width:212px;transform:scale(1.08)}.lesson-label {font-size: 12px; border: 0; padding: 0; color: var(--deep); letter-spacing: .7px;}.daily-goal{padding:27px}.goal-ring{width:169px;height:169px}.goal-caption{font-size: 12px}.stat-card{padding:24px}.stat-label{font-size: 12px}.stat-card strong{font-size: 30px}.stat-card small{font-size: 12px}.collection-cover{height:115px}.collection-body{padding:24px}.collection-card h3{font-size: 18px}.collection-meta{font-size: 12px}.collection-bottom{font-size: 12px}.toast{left:calc(50% + 129px)}
}
@media(max-width:1250px) {
  .sidebar{width:215px;padding:27px 13px}.workspace{margin-left:215px}.brand{font-size: 27px;margin:0 13px 37px}.brand img{height:33px;width:33px}.workspace-label,.nav-section-label{font-size: 12px;margin-left:15px}#navigation>a,.sidebar-setting{font-size: 13px;padding:12px 13px;gap:11px}.topbar{padding:0 28px;gap:18px;height:80px}.header-search{width:240px}.streak-pill>span{display:none}.breadcrumb{font-size: 12px}.breadcrumb>span{padding:0 10px}#content{padding:31px 28px 20px}.page-heading h1{font-size: 28px}.page-subtitle{font-size: 13px}.date-label{font-size: 12px}.dashboard-top{grid-template-columns:minmax(0,2.4fr) minmax(205px,1fr);gap:18px}.welcome-banner {padding:26px 24px;min-height:306px;grid-template-columns:1.5fr 1fr;gap:0; background: var(--soft); border-color: var(--line);}.banner-text h2 {font-size: 27px; color: var(--ink);}.banner-text>p {font-size: 12px; color: var(--muted);}.banner-cards{transform:scale(.83);transform-origin:center center;width:163px;margin-left:4px}.banner-note {font-size: 12px;max-width:230px;line-height:1.5; color: var(--muted);}.lesson-label {font-size: 12px;padding: 0;letter-spacing: .7px; color: var(--deep);}.btn.hero-button {font-size: 12px;padding:0 12px; background: var(--brand); color: #063e2c; box-shadow: none; border-radius: 8px;}.daily-goal{padding:21px 17px}.panel-top h2{font-size: 14px}.goal-ring{width:138px;height:138px;margin:17px 0 7px}.goal-caption{font-size: 12px}.week-row{gap:5px;margin-top:22px}.week-row b{width:21px;height:21px}.week-row>div>span{font-size: 12px}.stats-row{gap:14px}.stat-card{padding:19px 14px;gap:10px}.stat-icon{height:32px;width:32px;border-radius:9px}.stat-icon>.icon{width:17px;height:17px}.stat-label{font-size: 12px}.stat-card strong{font-size: 26px}.stat-card small{font-size: 12px}.collection-grid{gap:18px}.collection-cover{padding:18px;height:98px}.collection-cover-icon {right:20px;top:25px;height:47px;width:47px;border-radius: 0; background: none; border: 0;}.collection-cover-icon>.icon{width:24px;height:24px}.collection-body{padding:19px 17px}.collection-card h3{font-size: 14px}.collection-card p{font-size: 12px}.collection-bottom{font-size: 12px}.collection-meta{font-size: 12px}.collection-open{gap:0}.activity-panel,.daily-tip{padding:22px}.dashboard-bottom{gap:18px}.activity-content{gap:20px}.mini-chart{gap:11px}.activity-total{min-width:115px}.activity-total strong{font-size: 30px}.activity-total>span{font-size: 12px}.daily-tip h3 {font-size: 19px; color: var(--ink);}.daily-tip>p{font-size: 12px}.daily-tip>p>em{font-size: 12px}.tip-label{font-size: 12px;letter-spacing:.5px}.app-footer{padding-left:28px;padding-right:28px}.toast{left:calc(50% + 107px)}.study-layout{grid-template-columns:215px minmax(0,1fr);gap:28px}.quiz-layout{grid-template-columns:minmax(0,1fr) 220px;gap:20px}.quiz-area{padding:27px}.quiz-question h2{font-size: 24px}.answer-option{font-size: 12px;padding:15px 13px;gap:9px}.quiz-progress{padding:26px 18px}.alphabet-grid{grid-template-columns:repeat(5,1fr)}.settings-layout{grid-template-columns:145px 1fr;gap:24px}.settings-card{padding:26px}.goal-option{padding:17px 12px}.goal-option strong>span{font-size: 12px}.goal-option small{font-size: 12px}.analytics-grid{gap:20px}.chart-panel{padding:23px}.streak-panel{padding:25px 19px}th,td{padding-left:20px;padding-right:20px}.favorite-card{padding:23px}.favorite-card h2{font-size: 26px}
}
@media(max-width:1050px) {
  .sidebar{width:198px;padding:25px 12px}.workspace{margin-left:198px}.brand{font-size: 26px;gap:8px}.brand img{height:31px;width:31px}#navigation>a,.sidebar-setting{font-size: 12px;gap:10px;padding:11px 12px}.workspace-label,.nav-section-label{font-size: 12px;letter-spacing:1px}.sidebar-quote{padding:14px;margin-left:4px;margin-right:4px}.sidebar-quote>strong{font-size: 12px}.sidebar-quote>p{font-size: 12px}.sidebar-quote>span{font-size: 20px}.local-badge{font-size: 12px}.topbar{padding:0 23px;gap:14px}.breadcrumb{font-size: 12px}.header-search{width:210px}.header-search input{font-size: 12px}.header-search kbd{display:none}#content{padding-left:23px;padding-right:23px}.date-label{display:none}.page-heading h1{font-size: 27px}.dashboard-top{grid-template-columns:1fr}.welcome-banner {grid-template-columns:1.65fr 1fr;min-height:307px;padding:27px 30px; background: var(--soft); border-color: var(--line);}.banner-text h2 {font-size: 33px; color: var(--ink);}.banner-text>p {font-size: 13px; color: var(--muted);}.lesson-label {font-size: 12px;padding: 0; color: var(--deep); letter-spacing: .7px;}.btn.hero-button {font-size: 12px;padding:0 16px; background: var(--brand); color: #063e2c; box-shadow: none; border-radius: 8px;}.banner-note {font-size: 12px;max-width:none; color: var(--muted);}.banner-cards{width:200px;transform:scale(1);margin:0}.daily-goal{display:grid;grid-template-columns:1fr 140px;grid-template-rows:auto auto auto;min-height:172px;padding:19px 27px}.daily-goal .panel-top{grid-column:1;grid-row:1;justify-content:flex-start;gap:12px;align-self:center}.daily-goal .panel-top h2{font-size: 17px}.daily-goal .tiny-icon{display:none}.goal-ring{grid-column:2;grid-row:1 / 4;width:137px;height:137px;margin:0;justify-self:end}.goal-caption{grid-column:1;grid-row:2;font-size: 12px;margin-top:1px;align-self:start}.daily-goal .week-row{grid-column:1;grid-row:3;margin-top:14px;max-width:300px;gap:10px}.week-row>div>span{font-size: 12px}.week-row b{width:26px;height:26px;font-size: 12px}.stats-row{grid-template-columns:repeat(2,1fr);gap:17px}.stat-card{padding:22px;gap:15px}.stat-icon{width:39px;height:39px}.stat-label{font-size: 12px}.stat-card strong{font-size: 28px}.stat-card small{font-size: 12px}.collection-grid{grid-template-columns:repeat(2,1fr)}.collection-card h3{font-size: 16px}.collection-card p{font-size: 12px}.collection-meta{font-size: 12px}.collection-bottom{font-size: 12px}.home-collections{grid-template-columns:repeat(3,minmax(0,1fr))}.home-collections .collection-card h3{font-size: 13px}.home-collections .collection-card p{font-size: 12px}.home-collections .collection-meta{font-size: 12px}.home-collections .collection-open{font-size:0}.home-collections .collection-bottom{font-size: 12px}.collection-cover-icon {width:42px;height:42px;right:16px;top:33px; transform: none; background: none; border: 0; border-radius: 0;}.collection-tag {font-size: 12px; opacity: 1; letter-spacing: .6px; color: var(--muted);}.collection-cover-number {font-size: 27px; display: none;}.collection-cover{height:98px}.dashboard-bottom{grid-template-columns:1fr}.activity-content{gap:35px}.activity-panel .panel-top h2{font-size: 17px}.activity-total strong{font-size: 33px}.activity-total>span{font-size: 12px}.mini-chart{height:114px;gap:17px}.daily-tip{position:relative;overflow:hidden;padding:25px}.daily-tip h3 {font-size: 23px; color: var(--ink);}.daily-tip .tip-label{font-size: 12px}.daily-tip>p{font-size: 13px}.daily-tip>p>em{font-size: 12px}.daily-tip>a{font-size: 12px}.toast{left:calc(50% + 99px)}.page-heading>.btn{font-size: 12px;padding:0 14px}.study-layout{grid-template-columns:1fr;max-width:590px;margin-left:auto;margin-right:auto}.study-sidebar{display:none}.quiz-layout{grid-template-columns:1fr}.quiz-layout>aside{display:none}.quiz-question{padding:35px 0 27px}.answer-option{padding:17px;font-size: 14px}.favorite-grid{grid-template-columns:repeat(2,1fr)}.analytics-grid{grid-template-columns:1fr}.streak-panel{display:none}.alphabet-grid{grid-template-columns:repeat(4,1fr)}.alphabet-intro{padding:25px;gap:19px}.alphabet-intro h3{font-size: 15px}.alphabet-intro>span:last-child{display:none}.settings-layout{grid-template-columns:1fr;gap:23px}.settings-nav{flex-direction:row;border-bottom:1px solid var(--line);padding-bottom:11px}.settings-nav>a{font-size: 13px}.settings-card{padding:28px}.detail-actions{flex-wrap:wrap}.detail-progress{min-width:100%;max-width:100%;margin-bottom:8px}.detail-actions .btn{flex:1}.collection-detail-banner{padding:28px;gap:21px}.collection-detail-banner h1{font-size: 25px}.add-word-layout{grid-template-columns:1fr}.word-form-tip{display:none}.verbs-caption{display:none}.verbs-intro h3{font-size: 24px}.table-footer{flex-wrap:wrap;font-size: 12px}.pagination{margin-left:auto}
}
@media(max-width:760px) {
  .sidebar{transform:translateX(-100%);visibility:hidden;width:250px;padding:28px 21px;transition:transform .25s,visibility .25s}.menu-open .sidebar{transform:translateX(0);visibility:visible}.sidebar-overlay{position:fixed;inset:0;background:#17372955;backdrop-filter:blur(3px);z-index:35}.brand{font-size: 30px;gap:11px;margin-bottom:37px}.brand img{width:37px;height:37px}#navigation>a,.sidebar-setting{font-size: 14px;padding:12px 15px;gap:13px}.workspace-label,.nav-section-label{font-size: 12px}.sidebar-quote{padding:16px}.sidebar-quote>strong{font-size: 12px}.sidebar-quote>p{font-size: 12px}.sidebar-quote>span{font-size: 24px}.local-badge{font-size: 12px}.workspace{margin-left:0}.topbar{height:70px;padding:0 23px;gap:14px}.mobile-menu{display:inline-flex!important;width:28px}.mobile-menu .icon{width:21px;height:21px}.breadcrumb{font-size: 12px}.header-search{width:230px;min-width:100px;margin-left:auto}.header-search input{font-size: 12px}.profile-avatar{width:33px;height:33px}#content{padding:29px 24px 18px}.page-heading h1{font-size: 28px}.page-subtitle{font-size: 14px}.welcome-banner {min-height:310px;padding:27px 29px; background: var(--soft); border-color: var(--line);}.banner-text h2 {font-size: 32px; color: var(--ink);}.banner-text>p {font-size: 12px; color: var(--muted);}.banner-cards{transform:scale(.95);width:190px}.lesson-label {font-size: 12px; border: 0; padding: 0; color: var(--deep); letter-spacing: .7px;}.btn.hero-button {font-size: 12px; background: var(--brand); color: #063e2c; box-shadow: none; border-radius: 8px;}.banner-note {font-size: 12px; color: var(--muted);}.daily-goal{grid-template-columns:1fr 140px;padding:20px 28px}.daily-goal .week-row{max-width:340px}.stats-row{gap:18px}.stat-card{padding:23px;gap:18px}.collection-grid{gap:19px}.home-collections{grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.home-collections .collection-body{padding:17px 15px}.home-collections .collection-card h3{font-size: 13px}.home-collections .collection-card p{font-size: 12px}.collection-cover{height:100px}.home-collections .collection-cover{padding:17px}.collection-card h3{font-size: 17px}.collection-card p{font-size: 13px}.collection-meta{font-size: 12px}.collection-bottom{font-size: 12px}.home-collections .collection-meta{font-size: 12px}.app-footer{padding:19px 24px 26px}.toast{left:50%}.page-heading>.btn{font-size: 12px}.study-main{width:100%;max-width:550px;margin:auto}.study-card{min-height:355px}.quiz-area{padding:31px}.quiz-question h2{font-size: 27px}.result-page>h1{font-size: 31px}.favorite-card h2{font-size: 28px}.alphabet-grid{grid-template-columns:repeat(5,1fr);gap:13px}.letter-card{padding:25px 13px 19px;min-height:154px}.letter-card strong{font-size: 33px}.letter-card strong>span{font-size: 25px}.letter-phonetic,.letter-card small{font-size: 12px}.settings-panels{max-width:100%}
}
@media(max-width:560px) {
  .topbar{height:66px;padding:0 17px;gap:11px}.breadcrumb{display:none}.header-search{width:auto;min-width:0;flex:1;margin:0;padding:0 9px;border-radius:8px}.header-search input{font-size: 12px;padding:10px 0}.header-search>.icon{width:15px;height:15px}.streak-pill{padding:7px;gap:3px;border-radius:8px}.streak-pill .icon{width:15px;height:15px}.streak-pill b{font-size: 12px}.profile-avatar{width:30px;height:30px;border-width:2px}#content{padding:26px 18px 16px}.page-heading{display:block;margin-bottom:25px}.page-heading h1{font-size: 27px;letter-spacing:-1px}.kicker{font-size: 12px;letter-spacing:1.1px}.greeting {font-size: 25px;}.page-subtitle{font-size: 13px;line-height:1.85;margin-top:8px}.page-heading>.btn,.page-heading>.select-control,.page-heading>.quiz-time{display:inline-flex;margin-top:18px}.dashboard-top{gap:17px}.welcome-banner {display:flex;flex-direction:column;align-items:stretch;padding:27px 24px 24px;gap:0;min-height:0; background: var(--soft); border-color: var(--line);}.banner-text h2 {font-size: 34px;letter-spacing:-1.1px;line-height:1.22;margin:18px 0 15px; color: var(--ink);}.banner-text>p {font-size: 13px;line-height:1.8; color: var(--muted);}.lesson-label {font-size: 12px;padding: 0; color: var(--deep); letter-spacing: .7px;}.btn.hero-button {font-size: 12px;min-height:44px;margin-top:21px;padding:0 16px; background: var(--brand); color: #063e2c; box-shadow: none; border-radius: 8px;}.banner-note {font-size: 12px;line-height:1.7;max-width:none;margin-top:16px; color: var(--muted);}.banner-cards{width:220px;height:185px;align-self:center;margin-top:27px;transform:none;isolation:isolate}.banner-card {width:203px;height:178px;left:0;top:0;padding:18px 20px;transform: none;animation: none;box-shadow: none; border: 1px solid #d9e3dc; border-radius: 12px; background: var(--surface); color: var(--ink);}.banner-card-back {height:168px;width:190px;left:25px;top:5px;transform:rotate(9deg); display: none;}.banner-card-label{font-size: 12px}.banner-card-label .icon{width:14px;height:14px}.banner-word-symbol{position:absolute;right:22px;top:41px;font-size: 26px;margin:0}.banner-card>b{font-size: 25px;margin-top:16px}.banner-card>small{font-size: 12px;margin-top:3px}.banner-card>small>span{font-size: 12px}.banner-card hr{margin:12px 0 9px}.banner-card>strong{font-size: 12px}.banner-card>p{font-size: 12px;margin-top:4px}.banner-card-foot{display:none}.banner-spark {font-size: 25px;right:-24px;top:12px; display: none;}.daily-goal{padding:22px 21px;grid-template-columns:1fr 114px;min-height:158px}.daily-goal .panel-top h2{font-size: 15px}.goal-ring{width:115px;height:115px}.goal-ring strong{font-size: 27px}.goal-ring strong>span{font-size: 14px}.goal-ring>div>span{font-size: 12px}.goal-caption{font-size: 12px;line-height:1.5;max-width:168px}.goal-status-dot{flex-shrink:0}.daily-goal .week-row{max-width:190px;gap:4px;margin-top:13px;padding-right:7px}.week-row>div{gap:6px}.week-row>div>span{font-size: 12px}.week-row b{width:20px;height:20px;font-size: 12px}.week-row b .icon{width:10px;height:10px}.stats-row{gap:12px;margin:18px 0 31px}.stat-card{flex-direction:column;padding:18px 17px;gap:11px;border-radius:13px}.stat-icon{width:34px;height:34px;border-radius:10px}.stat-icon .icon{width:18px;height:18px}.stat-label{font-size: 12px}.stat-card strong{font-size: 28px;margin:6px 0}.stat-card small{font-size: 12px;line-height:1.7}.section-head{gap:15px;margin-bottom:17px}.section-head h2{font-size: 17px;letter-spacing:-.5px}.section-head>a{font-size: 12px;gap:2px}.section-head>a .icon{width:12px;height:12px}.collection-grid,.home-collections{grid-template-columns:1fr;gap:16px}.collection-card {border-radius: var(--radius); transition: border-color .18s;}.collection-cover,.home-collections .collection-cover{height:92px;padding:18px 20px}.collection-cover-icon {width:50px;height:50px;border-radius: 0;right:24px;top:20px; transform: none; background: none; border: 0;}.collection-cover-icon .icon{width:26px;height:26px}.collection-tag {font-size: 12px; opacity: 1; letter-spacing: .6px; color: var(--muted);}.collection-cover-number {font-size: 29px;left:20px;bottom:7px; display: none;}.collection-body,.home-collections .collection-body{padding:20px}.collection-card h3,.home-collections .collection-card h3{font-size: 18px;letter-spacing:-.5px}.collection-card p,.home-collections .collection-card p{font-size: 13px}.collection-meta,.home-collections .collection-meta{font-size: 12px;margin-top:20px}.collection-bottom,.home-collections .collection-bottom{font-size: 12px}.home-collections .collection-open,.collection-open{font-size: 12px;gap:2px}.collection-open .icon{width:13px;height:13px}.activity-panel{padding:21px}.panel-top h2{font-size: 15px}.panel-top .small-text{font-size: 12px}.chart-period{font-size: 12px;padding:5px 6px;white-space:nowrap}.activity-content{gap:20px;padding-top:23px}.activity-total{min-width:95px}.activity-total strong{font-size: 29px}.activity-total strong>span{font-size: 12px;margin-left:5px}.activity-total>span{font-size: 12px;max-width:100px;line-height:1.6}.activity-total>span>span{display:block;margin-left:0}.mini-chart{height:100px;gap:9px}.mini-chart>div>span{width:12px}.mini-chart small{font-size: 12px}.daily-tip{padding:24px}.daily-tip h3 {font-size: 24px; color: var(--ink);}.daily-tip>p{font-size: 13px}.daily-tip>p>em{font-size: 12px}.tip-label{font-size: 12px;letter-spacing:.6px}.preview-note{font-size: 12px;line-height:1.8}.app-footer{font-size: 12px;padding:18px 18px 26px;gap:10px}.dictionary-summary{padding:18px;flex-wrap:wrap;gap:13px}.dictionary-summary>div{font-size: 12px;gap:8px}.dictionary-summary strong{font-size: 14px}.dictionary-summary .icon{width:17px;height:17px}.table-toolbar{padding:17px;gap:12px}.table-toolbar .btn{font-size:0;width:36px;min-height:36px;padding:0}.table-toolbar .btn .icon{width:17px;height:17px}.input-search{gap:9px}.input-search input{font-size: 12px}.input-search .icon{width:17px;height:17px}.filter-tabs{padding:0 17px;gap:23px;overflow-x:auto}.filter-tabs>button{font-size: 12px;padding:15px 0;gap:5px}.filter-tabs small{font-size: 12px}th{font-size: 12px;padding:14px 18px}td{font-size: 13px;padding:15px 18px}.word-cell{gap:10px}.word-cell strong{font-size: 14px}.word-cell small{font-size: 12px}.word-sound{width:29px;height:29px}.word-sound .icon{width:14px;height:14px}.word-type{font-size: 12px;padding:4px 7px}.table-footer{padding:16px;font-size: 12px;gap:13px}.table-footer>span>.muted{display:none}.pagination>button{width:27px;height:27px;font-size: 12px}.table-panel>.panel-top{padding:20px 18px}.collection-tabs{padding:0;gap:23px;margin-bottom:24px}.personal-card{padding:24px}.new-collection-card{min-height:240px}.new-collection-card strong{font-size: 15px}.favorite-summary{padding:23px 20px;gap:15px}.favorite-summary strong{font-size: 15px}.favorite-summary p {font-size: 12px;max-width:225px;line-height:1.7; color: var(--muted);}.favorite-decoration {font-size: 92px;right:-10px;top:-16px; display: none;}.favorite-grid{grid-template-columns:1fr 1fr;gap:12px}.favorite-card{padding:18px 15px}.favorite-card h2{font-size: 22px;overflow-wrap:anywhere;letter-spacing:-.8px;margin:17px 0 7px}.favorite-card .word-type{font-size: 12px;padding:3px 6px}.favorite-card .icon-btn{width:26px;height:26px}.favorite-card .icon-btn .icon{width:15px;height:15px}.favorite-card .phonetic{font-size: 12px}.favorite-card hr{margin:20px 0 16px}.favorite-card>p{font-size: 14px}.favorite-card footer{font-size: 12px;margin-top:18px;gap:6px}.study-layout{margin-top:20px}.study-card{padding:20px;min-height:334px}.study-card-head{font-size: 12px;letter-spacing:.7px}.study-word h2{font-size: 43px}.study-spark{font-size: 38px;margin-bottom:13px}.study-word p{font-size: 14px}.study-status{font-size: 12px}.study-status .chip{font-size: 12px}.flip-label{font-size: 12px}.study-navigation>span{font-size: 12px}.study-navigation kbd{font-size: 12px;margin-left:5px}.review-actions{gap:12px}.review-actions .btn{font-size: 12px;padding:0 11px;gap:7px}.review-actions .icon{width:16px;height:16px}.quiz-layout{margin-top:18px}.quiz-area{padding:24px 20px}.quiz-topline{font-size: 12px}.quiz-question{padding:32px 0 27px}.quiz-question>.overline{font-size: 12px}.quiz-question h2{font-size: 24px;letter-spacing:-.7px}.quiz-question .text-btn{font-size: 12px}.answer-grid{grid-template-columns:1fr;gap:11px}.answer-option{padding:15px;font-size: 14px}.answer-option>span{width:26px;height:26px;font-size: 12px}.quiz-answer-feedback{font-size: 12px;line-height:1.8}.quiz-controls{gap:10px;padding-top:20px}.quiz-controls>.btn{font-size: 12px;padding:0 11px;min-height:41px}.quiz-controls .icon{width:15px;height:15px}.quiz-time{font-size: 12px}.result-page{padding-top:15px}.result-page>h1{font-size: 29px}.result-page>p:not(.kicker){font-size: 13px;padding:0 7px}.result-confetti.one{font-size: 31px;left:8px;top:50px}.result-confetti.two{font-size: 25px;right:2px;top:120px}.result-stats{padding:24px 8px;margin-top:26px}.result-stats strong{font-size: 26px}.result-stats strong>span{font-size: 14px}.result-stats p{font-size: 12px;line-height:1.6}.result-review{padding:22px 19px}.result-review h3{font-size: 13px;line-height:1.6}.result-review>div{gap:12px}.result-review b{font-size: 14px}.result-review small{font-size: 12px}.result-review>div>strong{font-size: 12px}.result-actions .btn{font-size: 12px}.chart-panel{padding:23px 18px}.chart-panel .panel-top h2{font-size: 15px}.chart-panel .small-text{font-size: 12px}.chart-legend{font-size: 12px}.large-chart{gap:15px;height:214px;margin-top:29px}.chart-y,.chart-x{font-size: 12px}.alphabet-intro{padding:23px 19px;gap:18px}.alphabet-aa{font-size: 42px}.alphabet-intro h3{font-size: 14px;line-height:1.6}.alphabet-intro p{font-size: 12px;line-height:1.8}.alphabet-grid{grid-template-columns:repeat(3,1fr);gap:12px}.letter-card{min-height:157px;padding:26px 13px 20px}.letter-card strong{font-size: 36px}.letter-card strong>span{font-size: 27px}.letter-card small,.letter-phonetic{font-size: 12px}.verbs-intro{padding:23px 18px;gap:15px}.verb-symbol{height:43px;width:43px;flex-shrink:0;border-radius:12px}.verb-symbol .icon{width:23px;height:23px}.verbs-intro h3{font-size: 22px}.verbs-intro h3>span{padding:0 5px}.verbs-intro p{font-size: 12px;line-height:1.8}.verbs-table th,.verbs-table th small{font-size: 12px}.settings-nav{gap:5px}.settings-nav>a{font-size: 12px;padding:11px 12px}.settings-card{padding:24px 21px}.settings-card>h2{font-size: 18px}.settings-card>p {font-size: 14px;}.form-grid{grid-template-columns:1fr;gap:20px}.profile-edit{gap:18px}.goal-options{grid-template-columns:1fr;gap:13px;margin-bottom:28px}.goal-option{padding:17px 18px;min-height:88px}.goal-option strong{font-size: 28px}.goal-option strong>span{font-size: 12px;margin-left:5px}.goal-option small{font-size: 12px;margin-top:6px}.goal-option .chip {font-size: 12px;left:auto;right:15px;bottom:15px; position: static; display: block; width: fit-content; background: none; color: var(--deep); padding: 0; margin-top: 8px; letter-spacing: 0;}.setting-row{padding:23px 0;gap:16px}.setting-row strong{font-size: 13px}.setting-row p {font-size: 14px;line-height:1.7}.theme-options{gap:14px}.theme-option{width:50%}.theme-option>span:last-child{font-size: 12px}.word-form{padding:25px 21px}.word-form h2{font-size: 18px}.word-form label{font-size: 13px}.word-form input,.word-form select,.word-form textarea{font-size: 14px}.form-actions>.btn{font-size: 12px}.detail-art{height:60px;width:60px;border-radius:15px}.detail-art>.icon{width:29px;height:29px}.detail-art>img{width:46px;height:46px}.collection-detail-banner{padding:25px 20px;gap:17px}.collection-detail-banner h1{font-size: 23px}.collection-detail-banner .overline{font-size: 12px}.collection-detail-banner p{font-size: 12px;line-height:1.8}.collection-detail-banner>.icon-btn{display:none}.detail-actions{gap:10px;margin:25px 0}.detail-actions .btn{font-size: 12px;gap:7px;padding:0 12px}.detail-actions>.btn:last-child{flex-basis:100%}.detail-actions .icon{width:16px;height:16px}.back-link{font-size: 12px}.toast{font-size: 12px;line-height:1.7;padding:13px 18px;width:max-content;max-width:90%}dialog{padding:30px 24px}#dialog-content>h2{font-size: 23px}#dialog-content>p{font-size: 12px}.modal-collections>button{font-size: 13px}.modal-collections .icon{width:17px;height:17px}
}
@media(max-width:370px) {
  .topbar{gap:8px;padding:0 14px}.topbar .header-search{padding:0 8px;gap:7px}.topbar .header-search input{font-size: 12px}.page-heading h1{font-size: 25px}.banner-text h2 {font-size: 31px; color: var(--ink);}.welcome-banner {padding-left:22px;padding-right:22px; background: var(--soft); border-color: var(--line);}.banner-text>p {font-size: 12px; color: var(--muted);}.btn.hero-button {font-size: 12px; background: var(--brand); color: #063e2c; box-shadow: none; border-radius: 8px;}.banner-note {font-size: 12px; color: var(--muted);}.daily-goal{grid-template-columns:1fr 105px;padding:21px 18px}.goal-ring{height:105px;width:105px}.daily-goal .week-row{max-width:165px;gap:3px}.week-row b{width:18px;height:18px}.stat-card{padding:17px 14px}.stat-card strong{font-size: 25px}.stat-label{font-size: 12px}.section-head h2{font-size: 16px}.activity-panel{padding:20px}.mini-chart{gap:7px}.mini-chart>div>span{width:10px}.favorite-card h2{font-size: 20px}.favorite-card{padding:17px 13px}
}

/* Dark preview keeps the same restrained color hierarchy. */
:root[data-theme=dark] { --bg:#202623; --surface:#282f2b; --ink:#e3e9e4; --muted:#afb9b1; --line:#3e4941; --soft:#303f36; --deep:#6cd6af; --mint:var(--soft); --peach:#403b31; --lavender:#383640; --blue:#303a40; --pink:#40353a; --yellow:#403c30; }
:root[data-theme=dark] label>input:not([type=range]),:root[data-theme=dark] label>select,:root[data-theme=dark] label>textarea { border-color:#59645c; }
:root[data-theme=dark] .banner-card { border-color:var(--line); }
:root[data-theme=dark] .banner-text h2>span { color:var(--deep); }
:root[data-theme=dark] .mini-chart>div>span { background:#506b5c; }
:root[data-theme=dark] .mini-chart>div>span.active { background:var(--brand); }
:root[data-theme=dark] .answer-option.incorrect { background:#483930; border-color:#a58466; }
:root[data-theme=dark] .goal-option.selected,:root[data-theme=dark] .theme-option.selected { border-color:#74ab8d; }
:root[data-theme=dark] .chart-grid-lines>i { border-color:var(--line); }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

@media(max-width:1250px){.banner-note{font-size: 12px}.lesson-label {font-size: 12px; border: 0; padding: 0; color: var(--deep); letter-spacing: .7px;}.goal-caption{font-size: 12px}.btn.hero-button {font-size: 12px; background: var(--brand); color: #063e2c; box-shadow: none; border-radius: 8px;}.goal-ring{width:145px;height:145px}.daily-goal{padding-left:17px;padding-right:17px}.week-row{gap:4px}.week-row>div>span{font-size: 12px}.week-row b{font-size: 12px}.collection-tag {font-size: 12px; opacity: 1; letter-spacing: .6px; color: var(--muted);}.collection-bottom{font-size: 12px}.stat-card{padding:18px 16px;flex-direction:column;gap:10px}.stat-card strong{font-size: 28px}.stat-card small{font-size: 12px}.stat-label{font-size: 12px}.collection-open{font-size: 12px}.collection-cover-icon {top:37px; transform: none; background: none; border: 0; border-radius: 0;}}
@media(min-width:1251px){.stat-card{gap:12px}.stat-card small{font-size: 12px}.collection-bottom{font-size: 12px}.collection-open{font-size: 12px}.banner-note {font-size: 12px; color: var(--muted);}.lesson-label {font-size: 12px; border: 0; padding: 0; color: var(--deep); letter-spacing: .7px;}.banner-text{min-width:0}.btn.hero-button {font-size: 12px; background: var(--brand); color: #063e2c; box-shadow: none; border-radius: 8px;}.banner-text>p {font-size: 13px; color: var(--muted);}.welcome-banner {grid-template-columns:minmax(0,1.45fr) minmax(185px,1fr); background: var(--soft); border-color: var(--line);}}
@media(max-width:1050px){.stat-card{flex-direction:row;padding:22px;gap:15px}.stat-card small{font-size: 12px}.lesson-label {font-size: 12px; border: 0; padding: 0; color: var(--deep); letter-spacing: .7px;}.banner-text>p {font-size: 14px; color: var(--muted);}.btn.hero-button {font-size: 12px; background: var(--brand); color: #063e2c; box-shadow: none; border-radius: 8px;}.banner-note {font-size: 12px; color: var(--muted);}.goal-caption{font-size: 12px}.daily-goal .week-row{gap:12px}.week-row>div>span{font-size: 12px}.week-row b{font-size: 12px}.collection-open{font-size: 12px}.home-collections .collection-meta{font-size: 12px}.home-collections .collection-bottom{font-size: 12px}.home-collections .collection-open{font-size:0}.home-collections .collection-cover-icon {top:43px;width:37px;height:37px;right:14px; transform: none; background: none; border: 0; border-radius: 0;}.home-collections .collection-cover-icon .icon{width:20px;height:20px}.collection-tag {font-size: 12px; opacity: 1; letter-spacing: .6px; color: var(--muted);}.home-collections .collection-cover{height:100px}.home-collections .collection-card p{font-size: 12px;min-height:36px}.home-collections .collection-card h3{font-size: 14px;min-height:40px}}
@media(max-width:760px){.home-collections{grid-template-columns:repeat(2,minmax(0,1fr))}.home-collections>.collection-card:last-child{grid-column:1 / -1}.home-collections .collection-card h3{min-height:0;font-size: 16px}.home-collections .collection-card p{min-height:0;font-size: 13px}.home-collections .collection-cover-icon {top:25px;width:47px;height:47px;right:20px; transform: none; background: none; border: 0; border-radius: 0;}.home-collections .collection-cover-icon .icon{width:24px;height:24px}.home-collections .collection-open{font-size: 12px}.collection-tag {font-size: 12px; opacity: 1; letter-spacing: .6px; color: var(--muted);}.banner-note {font-size: 12px; color: var(--muted);}.lesson-label {font-size: 12px; border: 0; padding: 0; color: var(--deep); letter-spacing: .7px;}.banner-text>p {font-size: 13px; color: var(--muted);}.btn.hero-button {font-size: 12px; background: var(--brand); color: #063e2c; box-shadow: none; border-radius: 8px;}}
@media(max-width:560px){.welcome-banner{gap:0}.banner-cards{height:194px;width:220px}.banner-card {height:187px;width:203px; transform: none; animation: none; box-shadow: none; border: 1px solid #d9e3dc; border-radius: 12px; background: var(--surface); color: var(--ink);}.banner-card-back {height:175px; display: none;}.banner-card-label{font-size: 12px}.banner-card>small{font-size: 12px}.banner-card>small>span{font-size: 12px}.banner-card>p{font-size: 12px}.banner-card>strong{font-size: 13px}.banner-card>b{font-size: 26px}.banner-note {font-size: 12px; color: var(--muted);}.lesson-label {font-size: 12px; border: 0; padding: 0; color: var(--deep); letter-spacing: .7px;}.btn.hero-button {font-size: 12px; background: var(--brand); color: #063e2c; box-shadow: none; border-radius: 8px;}.banner-text>p {font-size: 13px; color: var(--muted);}.daily-goal{grid-template-columns:minmax(0,1fr) 112px;padding:21px}.goal-ring{height:112px;width:112px}.goal-ring>div>span{font-size: 12px}.daily-goal .week-row{max-width:182px;gap:4px}.goal-caption{font-size: 12px;max-width:165px;line-height:1.6}.daily-goal .panel-top h2{font-size: 15px}.week-row>div>span{font-size: 12px}.week-row b{font-size: 12px}.stat-card{flex-direction:column;padding:18px 17px;gap:11px}.stat-card small{font-size: 12px}.section-head>a{font-size: 12px;white-space:nowrap}.collection-grid,.home-collections{grid-template-columns:1fr}.home-collections>.collection-card:last-child{grid-column:auto}.home-collections .collection-card h3{font-size: 18px}.home-collections .collection-card p{font-size: 13px}.home-collections .collection-open{font-size: 12px}.home-collections .collection-cover,.collection-cover{height:92px}.home-collections .collection-cover-icon,.collection-cover-icon{top:20px;width:50px;height:50px;right:24px}.collection-tag {font-size: 12px; opacity: 1; letter-spacing: .6px; color: var(--muted);}.collection-bottom,.home-collections .collection-bottom{font-size: 12px}.chart-period{font-size: 12px}.activity-total>span{font-size: 12px}.activity-total strong>span{font-size: 12px}.mini-chart small{font-size: 12px}.tip-label{font-size: 12px}.goal-option .chip {font-size: 12px; display: block; width: fit-content; background: none; color: var(--deep); padding: 0; margin-top: 8px; letter-spacing: 0;}.app-footer,.preview-note{font-size: 12px}.table-toolbar input{font-size: 13px}.filter-tabs small{font-size: 12px}}

@media(max-width:560px) {
  .banner-cards { width:100%; height:220px; margin-top:26px; }
  .banner-card { width:100%; height:220px; padding:20px; }
  .banner-card>b { margin-top:18px; }
  .banner-card>p { font-size:13px; line-height:1.7; }
  .banner-word-symbol { right:24px; }
  .banner-text h2 { font-size:31px; }
  .goal-option { min-height:110px; }
  .goal-option .chip { margin-top:8px; }
  .settings-card>p,.setting-row p { font-size:14px; }
  .goal-caption { font-size:12px; }
  .daily-goal { grid-template-columns:minmax(0,1fr) 104px; gap:6px; }
  .goal-ring { width:104px; height:104px; }
}

/* Calm application notices, kept outside the changing page surface. */
#admin-entry[hidden],.platform-announcement[hidden],.connection-notice[hidden]{display:none!important}
.platform-announcement{display:flex;align-items:center;gap:12px;margin:22px 36px 0;padding:14px 18px;border:1px solid #c9e4d8;border-radius:14px;background:#edf7f1;color:#315e4b;animation:notice-arrive .3s ease both}
.platform-announcement>svg{width:20px;height:20px;flex:none}.platform-announcement p{margin:0;flex:1;font-size:13px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere}.platform-announcement button{border:0;background:transparent;color:inherit;width:32px;height:32px;font-size:23px;cursor:pointer;border-radius:8px}.platform-announcement button:hover{background:#dcefe3}.platform-announcement button:focus-visible{outline:2px solid #16835e;outline-offset:2px}
.connection-notice{padding:12px 24px;background:#fff3db;color:#6a5026;text-align:center;font-size:13px;line-height:1.6}
@keyframes notice-arrive{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
[data-theme="dark"] .platform-announcement{background:#19352a;border-color:#2d4b3d;color:#b8d7c9}
@media(max-width:700px){.platform-announcement{margin:16px 18px 0;padding:12px;gap:8px}}
@media(prefers-reduced-motion:reduce){.platform-announcement{animation:none}}
[data-motion="paused"] .platform-announcement,[data-motion="reduced"] .platform-announcement{animation:none}