:root {
  --ink: #18231f;
  --muted: #6f7773;
  --paper: #f5f2ea;
  --white: #fffef9;
  --green: #173f35;
  --green-2: #2f6858;
  --mint: #dce9df;
  --orange: #d66b39;
  --orange-soft: #f4dfd1;
  --line: #dedbd1;
  --shadow: 0 18px 50px rgba(42, 50, 46, 0.12);
  --serif: Georgia, "Times New Roman", "Noto Serif SC", serif;
  --sans: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 1040px; background: var(--paper); }
body { margin: 0; color: var(--ink); font-family: var(--sans); background: var(--paper); }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 3px solid rgba(214,107,57,.28); outline-offset: 2px; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hidden { display: none !important; }

.app-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 248px; display: flex; flex-direction: column; padding: 30px 22px 24px; color: #f4f2e9; background: var(--green); z-index: 20; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px; margin-bottom: 44px; }
.brand-mark, .mobile-brand { display: grid; place-items: center; width: 42px; height: 42px; color: var(--green); background: #f5eee0; border: 0; font: 700 22px/1 var(--serif); transform: rotate(-3deg); }
.brand strong { display: block; font: 700 21px/1.1 var(--serif); letter-spacing: .08em; }
.brand span { display: block; margin-top: 5px; color: #a8bbb4; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; }
.nav { display: grid; gap: 7px; }
.nav-item, .category-link { width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 0; border-radius: 7px; color: #b9c8c3; background: transparent; cursor: pointer; text-align: left; transition: .2s ease; }
.nav-item svg { width: 18px; }
.nav-item:hover, .nav-item.active, .category-link:hover { color: #fff; background: rgba(255,255,255,.09); }
.nav-item.active { box-shadow: inset 3px 0 var(--orange); }
.nav-item em, .category-link em { margin-left: auto; font-size: 11px; font-style: normal; color: #96aaa3; }
.sidebar-section { margin-top: 36px; }
.sidebar-label { margin: 0 13px 12px; color: #758f86; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.category-link { padding-block: 9px; font-size: 13px; }
.category-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--green-2); }
.category-dot.academic { background: #db7444; }
.category-dot.daily { background: #77a98d; }
.daily-goal { margin-top: auto; padding: 17px 14px; border: 1px solid rgba(255,255,255,.11); background: rgba(255,255,255,.045); }
.goal-top { display: flex; justify-content: space-between; font-size: 11px; }
.goal-top strong { color: #f0c5aa; }
.goal-track { height: 3px; margin: 11px 0; overflow: hidden; background: rgba(255,255,255,.12); }
.goal-track span { display: block; width: 0; height: 100%; background: var(--orange); transition: width .4s ease; }
.daily-goal p { margin: 0; color: #8ea39c; font-size: 10px; line-height: 1.6; }
.connection { display: flex; align-items: center; gap: 8px; padding: 18px 8px 0; color: #7f968e; font-size: 10px; }
.connection > span:first-child { width: 6px; height: 6px; border-radius: 50%; background: #5aa47d; box-shadow: 0 0 0 3px rgba(90,164,125,.13); }

.main { grid-column: 2; min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 15; height: 82px; display: flex; align-items: center; gap: 18px; padding: 0 clamp(34px, 5vw, 76px); border-bottom: 1px solid var(--line); background: rgba(245,242,234,.94); backdrop-filter: blur(16px); }
.mobile-brand { display: none; }
.search-wrap { position: relative; flex: 1; max-width: 660px; }
.search-wrap > svg { position: absolute; left: 16px; top: 50%; width: 18px; transform: translateY(-50%); color: #78817d; }
.search-wrap input { width: 100%; height: 46px; padding: 0 100px 0 46px; border: 1px solid #d5d2c9; border-radius: 4px; color: var(--ink); background: var(--white); font-size: 14px; outline: 0; transition: .2s ease; }
.search-wrap input:focus { border-color: var(--green-2); box-shadow: 0 0 0 3px rgba(47,104,88,.08); }
.search-wrap kbd { position: absolute; right: 10px; top: 50%; padding: 4px 8px; border: 1px solid #ddd9cf; border-bottom-width: 2px; border-radius: 4px; color: #8b918d; background: #f6f4ee; font-size: 9px; transform: translateY(-50%); }
.search-clear { position: absolute; right: 53px; top: 50%; display: grid; place-items: center; border: 0; background: none; transform: translateY(-50%); cursor: pointer; }
.search-clear svg { width: 16px; }
.quick-add, .primary-button, .secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 0; cursor: pointer; transition: .2s ease; }
.quick-add { height: 44px; margin-left: auto; padding: 0 17px; color: white; background: var(--green); font-size: 12px; font-weight: 700; }
.quick-add:hover, .primary-button:hover { background: #245748; transform: translateY(-1px); }
.quick-add svg { width: 16px; }
.view { display: none; padding: 52px clamp(34px, 5vw, 76px) 72px; animation: fade-in .28s ease; }
.view.active { display: block; }
@keyframes fade-in { from { opacity: 0; transform: translateY(5px); } }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 36px; }
.page-heading.compact { align-items: center; }
.eyebrow { margin: 0 0 10px; color: var(--orange); font-size: 9px; font-weight: 800; letter-spacing: .19em; text-transform: uppercase; }
.page-heading h1 { margin: 0; font: 500 clamp(32px,3.2vw,46px)/1.08 var(--serif); letter-spacing: -.035em; }
.page-heading > div > p:last-child { margin: 12px 0 0; color: var(--muted); font-size: 13px; }
.streak { min-width: 120px; padding: 12px 0 8px 18px; border-left: 1px solid var(--line); }
.streak span { display: block; color: var(--muted); font-size: 10px; }
.streak strong { font: 400 20px/1.6 var(--serif); }
.streak b { color: var(--orange); font-size: 30px; }

.mobile-access { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: -12px 0 20px; padding: 14px 17px; border: 1px solid #cad8d1; background: #e8f0eb; }
.mobile-access > div:first-child { display: grid; gap: 4px; }
.mobile-access strong { font-size: 12px; }
.mobile-access span { color: #65736d; font-size: 10px; line-height: 1.45; }
.mobile-access-urls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.mobile-access-urls button { display: grid; gap: 2px; padding: 7px 10px; border: 1px solid #b8cbc2; color: var(--green); background: rgba(255,255,255,.72); cursor: pointer; text-align: left; }
.mobile-access-urls button span { color: var(--green); font: 600 11px/1.2 ui-monospace, Consolas, monospace; }
.mobile-access-urls button small { color: #7b8983; font-size: 8px; }
.mobile-access-note { padding: 5px 0; }
.cloud-status-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; margin: -10px 0 22px; padding: 14px 16px; border: 1px solid var(--line); background: var(--white); }
.cloud-status-icon { display: grid; place-items: center; width: 35px; height: 35px; color: white; background: var(--green); border-radius: 50%; font: 700 12px var(--serif); }
.cloud-status-card > div:nth-child(2) { display: grid; gap: 3px; }
.cloud-status-card strong { font-size: 12px; }
.cloud-status-card span { color: var(--muted); font-size: 10px; }
.cloud-status-card > button { min-height: 34px; padding: 0 12px; border: 1px solid var(--green); color: var(--green); background: transparent; font-size: 10px; font-weight: 700; cursor: pointer; }
.cloud-status-card.connected { border-color: #a8c4b5; background: #edf4ef; }
.cloud-status-card.connected .cloud-status-icon { background: #3f8368; }

.cloud-modal { position: fixed; inset: 0; z-index: 260; display: grid; place-items: center; padding: 24px; }
.cloud-modal-backdrop { position: absolute; inset: 0; background: rgba(16,29,24,.64); backdrop-filter: blur(4px); }
.cloud-dialog { position: relative; width: min(480px, 100%); max-height: calc(100vh - 40px); padding: 38px 40px; overflow-y: auto; background: var(--paper); box-shadow: 0 28px 80px rgba(9,22,17,.28); }
.cloud-dialog h2 { margin: 0; font: 500 29px/1.2 var(--serif); }
.cloud-dialog-intro { margin: 10px 0 24px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.cloud-form { display: grid; gap: 15px; }
.cloud-form label { display: grid; gap: 7px; color: #66706b; font-size: 10px; font-weight: 700; }
.cloud-form input { width: 100%; height: 43px; padding: 0 12px; border: 1px solid #d3d0c7; background: var(--white); outline: 0; font-size: 12px; }
.cloud-form input:focus { border-color: var(--green-2); box-shadow: 0 0 0 3px rgba(47,104,88,.08); }
.cloud-form > p { margin: -5px 0 0; color: #8b918d; font-size: 9px; line-height: 1.6; }
.cloud-auth-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.cloud-link-button { padding: 4px; border: 0; color: var(--green-2); background: none; font-size: 10px; cursor: pointer; }
.cloud-signed { display: grid; gap: 12px; padding: 18px; border: 1px solid #cbd9d2; background: #edf4ef; }
.cloud-signed > span { color: var(--muted); font-size: 9px; }
.cloud-signed > strong { font-size: 14px; overflow-wrap: anywhere; }
.cloud-signed > p { margin: 0 0 5px; color: #65736d; font-size: 10px; line-height: 1.6; }
.cloud-message { min-height: 18px; margin: 14px 0 0; color: var(--orange); font-size: 10px; line-height: 1.5; text-align: center; }

.stats-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 16px; margin-bottom: 18px; }
.stat-card { position: relative; min-height: 154px; padding: 23px 25px; overflow: hidden; border: 1px solid var(--line); background: var(--white); }
.stat-card > span { color: var(--muted); font-size: 11px; }
.stat-card > strong { display: block; margin-top: 8px; font: 500 39px/1 var(--serif); }
.stat-card > p { margin: 10px 0 0; color: #929893; font-size: 10px; }
.stat-card > p b { color: #78a48c; }
.stat-card.dark { color: #f7f5ee; border-color: var(--green); background: var(--green); }
.stat-card.dark > span, .stat-card.dark > p { color: #9eb2ab; }
.mini-bars { position: absolute; right: 24px; bottom: 24px; height: 47px; display: flex; align-items: flex-end; gap: 5px; }
.mini-bars i { width: 5px; background: #5f8477; }
.mini-bars i:nth-child(1) { height: 18px; }.mini-bars i:nth-child(2) { height: 27px; }.mini-bars i:nth-child(3) { height: 21px; }.mini-bars i:nth-child(4) { height: 39px; background: var(--orange); }.mini-bars i:nth-child(5) { height: 31px; }.mini-bars i:nth-child(6) { height: 44px; }.mini-bars i:nth-child(7) { height: 35px; }
.stat-icon { position: absolute; right: 22px; top: 24px; display: grid; place-items: center; width: 42px; height: 42px; }
.stat-icon.academic { color: #ae542c; background: var(--orange-soft); }.stat-icon.daily { color: var(--green-2); background: var(--mint); }

.content-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(270px, .8fr); gap: 18px; }
.panel { border: 1px solid var(--line); background: var(--white); }
.recent-panel { padding: 28px 28px 12px; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; }
.panel h2 { margin: 0; font: 500 25px/1.2 var(--serif); }
.text-button { display: flex; align-items: center; gap: 7px; padding: 4px 0; border: 0; color: var(--green-2); background: none; font-size: 10px; font-weight: 700; cursor: pointer; }
.text-button svg { width: 14px; transition: .2s ease; }.text-button:hover svg { transform: translateX(3px); }
.word-list { display: grid; }
.word-row { display: grid; grid-template-columns: minmax(130px, .9fr) minmax(170px, 1.1fr) auto; align-items: center; gap: 14px; min-height: 72px; border-top: 1px solid #ece9e1; cursor: pointer; }
.word-name strong { display: block; font: 500 19px/1.2 var(--serif); }.word-name span { color: #929792; font-size: 10px; }
.word-meaning { overflow: hidden; color: #555f5a; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; color: #3d5f54; background: #e6eee9; font-size: 9px; font-weight: 700; white-space: nowrap; }
.pill.academic { color: #98512f; background: #f5e2d7; }
.review-promo { position: relative; min-height: 328px; padding: 28px; overflow: hidden; color: white; background: #b95a31; }
.review-promo .eyebrow { color: #f4c7b0; }
.review-promo > h2 { position: relative; margin-top: 114px; font-size: 27px; }
.review-promo > p:not(.eyebrow) { color: #f1caba; font-size: 11px; }
.promo-art { position: absolute; right: 20px; top: 22px; width: 175px; height: 135px; }
.paper { position: absolute; display: grid; place-items: center; width: 80px; height: 102px; border: 1px solid rgba(255,255,255,.35); color: var(--green); background: #f1eadb; box-shadow: 0 12px 25px rgba(61,28,14,.14); font: 700 27px var(--serif); }
.paper-one { right: 80px; top: 12px; transform: rotate(-13deg); }.paper-two { right: 33px; top: 0; color: var(--orange); transform: rotate(8deg); }.paper-three { right: 0; top: 26px; transform: rotate(18deg); }
.primary-button { min-height: 42px; padding: 0 17px; color: white; background: var(--green); font-size: 11px; font-weight: 700; }
.primary-button svg { width: 15px; }
.review-promo .primary-button { width: 100%; margin-top: 10px; color: var(--green); background: #fbf8ef; }
.review-promo .primary-button:hover { background: white; }

.library-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.filter-group { display: flex; gap: 2px; }
.filter { padding: 8px 12px; border: 0; color: var(--muted); background: none; font-size: 11px; cursor: pointer; }
.filter.active { color: white; background: var(--green); }.filter span { opacity: .7; }
.library-search { position: relative; width: 230px; }
.library-search svg { position: absolute; left: 10px; top: 50%; width: 14px; color: #8b918d; transform: translateY(-50%); }
.library-search input { width: 100%; height: 35px; padding: 0 10px 0 34px; border: 1px solid var(--line); background: var(--white); font-size: 11px; outline: 0; }
.tag-filter-row { min-height: 30px; display: flex; gap: 7px; margin: 0 0 14px; }
.tag-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border: 1px solid #d9d5cb; border-radius: 20px; color: #666f6b; background: transparent; font-size: 9px; cursor: pointer; }
.tag-chip.active { color: #fff; border-color: var(--green-2); background: var(--green-2); }
.library-table { border: 1px solid var(--line); background: var(--white); }
.table-head, .library-row { display: grid; grid-template-columns: 1.15fr 1.5fr 1.2fr .75fr 36px; align-items: center; gap: 18px; }
.table-head { min-height: 42px; padding: 0 20px; color: #989d99; background: #f0eee7; font-size: 9px; font-weight: 700; letter-spacing: .08em; }
.library-row { min-height: 82px; margin: 0 20px; border-top: 1px solid #ece9e1; }
.library-row:first-child { border-top: 0; }
.library-word { display: flex; align-items: center; gap: 12px; }
.mini-audio { display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; border: 0; color: var(--green-2); background: var(--mint); cursor: pointer; }.mini-audio svg { width: 14px; }
.library-word strong { display: block; font: 500 17px var(--serif); }.library-word small { color: #949a96; font-size: 9px; }
.library-meaning { overflow: hidden; color: #4b5550; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.library-meta { display: flex; flex-wrap: wrap; gap: 5px; }
.library-meta .tag-chip { cursor: default; }
.library-date { color: #8f9591; font-size: 9px; }
.delete-word { display: grid; place-items: center; width: 28px; height: 28px; border: 0; color: #a0a49f; background: none; cursor: pointer; }.delete-word:hover { color: #b84932; background: #f8e6de; }.delete-word svg { width: 14px; }
.empty-state { padding: 70px 20px; text-align: center; }.empty-state > div { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 18px; color: var(--green); background: var(--mint); font: 700 24px var(--serif); transform: rotate(-5deg); }.empty-state h3 { margin: 0; font: 500 22px var(--serif); }.empty-state p { color: var(--muted); font-size: 12px; }

.review-header { display: flex; align-items: flex-end; justify-content: space-between; max-width: 750px; margin: 0 auto 25px; }.review-header h1 { margin: 0; font: 500 36px var(--serif); }
.review-progress { width: 170px; text-align: right; color: var(--muted); font-size: 10px; }.review-progress > div { height: 3px; margin-top: 8px; background: #ddd9d0; }.review-progress i { display: block; width: 0; height: 100%; background: var(--orange); transition: width .3s ease; }
.review-stage { max-width: 750px; margin: 0 auto; }
.review-card { min-height: 410px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 55px 70px; border: 1px solid var(--line); background: var(--white); box-shadow: var(--shadow); cursor: pointer; text-align: center; transition: transform .25s ease; }.review-card:hover { transform: translateY(-2px); }
.review-category { position: absolute; align-self: flex-start; margin-top: -330px; padding: 5px 10px; color: #98512f; background: #f5e2d7; font-size: 9px; font-weight: 700; }
.audio-button { display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; border: 0; color: var(--green-2); background: var(--mint); font-size: 10px; font-weight: 700; cursor: pointer; }.audio-button svg { width: 15px; }.audio-button.large { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; }
.review-phonetic { margin: 17px 0 6px; color: #89908c; font: 15px var(--serif); }.review-card h2 { margin: 0; font: 500 52px/1.2 var(--serif); letter-spacing: -.03em; }.review-hint { margin-top: 26px; color: #999e9a; font-size: 10px; }.review-answer { width: 100%; margin-top: 23px; padding-top: 21px; border-top: 1px solid var(--line); }.review-answer strong { font: 500 19px var(--serif); }.review-answer p { color: var(--muted); font: italic 12px/1.6 var(--serif); }
.review-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }.review-btn { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 14px; border: 1px solid var(--line); background: var(--white); font-size: 10px; font-weight: 700; cursor: pointer; }.review-btn kbd { color: #999; font-size: 9px; }.review-btn.hard:hover { color: #a9432b; border-color: #d69b89; background: #f9e8e1; }.review-btn.fuzzy:hover { color: #9a6528; border-color: #d6b989; background: #f8efdf; }.review-btn.know:hover { color: var(--green-2); border-color: #92b4a3; background: #e5eee9; }
.review-finished { max-width: 600px; margin: 70px auto; text-align: center; }.finish-mark { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 24px; color: white; background: var(--green); border-radius: 50%; }.finish-mark svg { width: 30px; }.review-finished h2 { margin: 0; font: 500 32px var(--serif); }.review-finished > p:not(.eyebrow) { color: var(--muted); font-size: 12px; }.review-finished .primary-button { margin-top: 14px; }

.search-overlay { position: fixed; inset: 0; z-index: 100; display: flex; justify-content: flex-end; }
.overlay-backdrop { position: absolute; inset: 0; background: rgba(16,29,24,.56); backdrop-filter: blur(3px); animation: overlay-in .2s ease; }
.search-panel { position: relative; width: min(590px, 47vw); height: 100%; padding: 55px 54px; overflow: auto; background: var(--paper); box-shadow: -25px 0 60px rgba(17,31,26,.18); animation: panel-in .28s ease; }
@keyframes overlay-in { from { opacity: 0; } } @keyframes panel-in { from { transform: translateX(35px); opacity: 0; } }
.close-panel { position: absolute; right: 24px; top: 23px; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); background: var(--white); cursor: pointer; }.close-panel svg { width: 16px; }
.lookup-loading, .lookup-error { min-height: 75vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }.loader { width: 38px; height: 38px; margin-bottom: 17px; border: 2px solid #d2d6d2; border-top-color: var(--orange); border-radius: 50%; animation: spin .75s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }.lookup-loading p, .lookup-error p { color: var(--muted); font-size: 12px; }.lookup-error > div { display: grid; place-items: center; width: 50px; height: 50px; color: white; background: var(--orange); font: 700 24px var(--serif); }.lookup-error h2 { font: 500 27px var(--serif); }
.secondary-button { min-height: 40px; padding: 0 16px; border: 1px solid var(--green); color: var(--green); background: transparent; font-size: 11px; font-weight: 700; }
.result-title { display: flex; align-items: center; justify-content: space-between; margin: 28px 0 29px; }.result-title h2 { margin: 0; font: 500 49px/1 var(--serif); letter-spacing: -.04em; }.phonetic-line { display: flex; align-items: center; gap: 12px; margin-top: 13px; color: #7f8783; font: 13px var(--serif); }.result-index { display: grid; place-items: center; width: 64px; height: 74px; color: #9c4d2b; background: var(--orange-soft); font: 700 28px var(--serif); transform: rotate(3deg); }
.meaning-block { padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.meaning-block > span { display: inline-block; margin-bottom: 11px; color: var(--orange); font: italic 11px var(--serif); }.meaning-block h3 { margin: 0; font: 500 23px/1.4 var(--serif); }.meaning-block p { margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
blockquote { position: relative; margin: 24px 0; padding: 3px 0 3px 22px; border-left: 3px solid var(--orange); } blockquote p { margin: 0; font: italic 14px/1.65 var(--serif); } blockquote cite { display: block; margin-top: 8px; color: #898f8b; font: normal 10px/1.5 var(--sans); }
.collect-form { margin-top: 28px; padding-top: 5px; }.form-row { margin-bottom: 22px; }.form-row > label { display: block; margin-bottom: 9px; color: #7e8581; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.segmented { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #d9d5cc; background: var(--white); }.segmented button { height: 40px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; color: #717975; background: transparent; font-size: 11px; cursor: pointer; }.segmented button + button { border-left: 1px solid #d9d5cc; }.segmented button.active { color: var(--green); background: var(--mint); font-weight: 700; }
.tag-input-wrap { min-height: 42px; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid #d9d5cc; background: var(--white); }.tag-input-wrap > svg { width: 15px; color: #8a918d; }.tag-input-wrap input { flex: 1; min-width: 160px; border: 0; outline: 0; background: transparent; font-size: 11px; }.tag-input-wrap #selectedTags { display: contents; }.selected-tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border-radius: 15px; color: #3d5f54; background: var(--mint); font-size: 9px; }.selected-tag button { display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; }.selected-tag svg { width: 10px; height: 10px; }
.suggested-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }.suggested-tags button { padding: 4px 8px; border: 1px solid #ddd9cf; border-radius: 14px; color: #727a76; background: transparent; font-size: 9px; cursor: pointer; }.suggested-tags button:hover { border-color: #92ab9f; color: var(--green-2); }
.collect-button { width: 100%; min-height: 58px; display: grid; grid-template-columns: 28px auto; grid-template-rows: 1fr 1fr; align-items: center; justify-content: center; column-gap: 7px; padding: 9px 20px; border: 0; color: white; background: var(--green); cursor: pointer; transition: .2s ease; }.collect-button:hover { background: #245748; }.collect-button svg { grid-row: 1 / 3; }.collect-button span { align-self: end; font-size: 12px; font-weight: 700; }.collect-button small { align-self: start; color: #9eb2aa; font-size: 8px; }
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 200; display: flex; align-items: center; gap: 10px; padding: 13px 18px; color: white; background: var(--ink); box-shadow: var(--shadow); font-size: 11px; transform: translate(-50%, 90px); opacity: 0; transition: .3s ease; }.toast.show { transform: translate(-50%, 0); opacity: 1; }.toast svg { width: 15px; color: #8fbea6; }

@media (max-width: 1180px) {
  .topbar, .view { padding-left: 36px; padding-right: 36px; }
  .word-row { grid-template-columns: minmax(110px,.85fr) 1fr auto; }
  .search-panel { width: 55vw; }
}

@media (max-width: 760px) {
  html { min-width: 0; }
  body { padding-bottom: 68px; }
  .app-shell { display: block; min-height: calc(100vh - 68px); }
  .main { grid-column: auto; }

  .sidebar { inset: auto 0 0; width: 100%; height: 68px; padding: 0; border-top: 1px solid rgba(255,255,255,.12); }
  .brand, .sidebar-section, .daily-goal, .connection { display: none; }
  .nav { height: 100%; grid-template-columns: repeat(3, 1fr); gap: 0; }
  .nav-item { position: relative; height: 100%; flex-direction: column; justify-content: center; gap: 4px; padding: 6px; border-radius: 0; font-size: 11px; text-align: center; }
  .nav-item.active { box-shadow: inset 0 3px var(--orange); }
  .nav-item svg { width: 20px; height: 20px; }
  .nav-item em { position: absolute; top: 8px; left: calc(50% + 13px); min-width: 17px; padding: 1px 4px; border-radius: 10px; color: white; background: var(--orange); font-size: 8px; }

  .topbar { height: 70px; gap: 9px; padding: 10px 14px; }
  .mobile-brand { display: grid; flex: 0 0 38px; width: 38px; height: 38px; font-size: 19px; }
  .search-wrap { min-width: 0; }
  .search-wrap input { height: 44px; padding: 0 42px 0 39px; font-size: 15px; }
  .search-wrap > svg { left: 13px; width: 17px; }
  .search-wrap kbd { display: none; }
  .search-clear { right: 10px; }
  .quick-add { flex: 0 0 42px; width: 42px; height: 42px; margin: 0; padding: 0; }
  .quick-add span { display: none; }

  .view, .topbar { padding-left: 14px; padding-right: 14px; }
  .view { padding-top: 28px; padding-bottom: 34px; }
  .page-heading { align-items: flex-start; gap: 18px; margin-bottom: 27px; }
  .page-heading h1 { font-size: 32px; }
  .page-heading > div > p:last-child { font-size: 12px; line-height: 1.6; }
  .streak { min-width: 82px; padding-left: 12px; }
  .streak strong { font-size: 15px; }
  .streak b { font-size: 24px; }

  .mobile-access { align-items: stretch; flex-direction: column; margin-top: -8px; padding: 14px; }
  .mobile-access > div:first-child span { font-size: 11px; }
  .mobile-access-urls { justify-content: stretch; }
  .mobile-access-urls button { width: 100%; }
  .mobile-access-urls button span { overflow-wrap: anywhere; font-size: 12px; }

  .cloud-status-card { grid-template-columns: auto 1fr; margin-top: -10px; }
  .cloud-status-card > button { grid-column: 1 / -1; width: 100%; min-height: 40px; }
  .cloud-dialog { padding: 35px 20px 24px; }
  .cloud-dialog h2 { padding-right: 28px; font-size: 25px; }
  .cloud-form input { height: 47px; font-size: 14px; }
  .cloud-auth-actions { grid-template-columns: 1fr; }

  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat-card { min-height: 124px; padding: 18px; }
  .stat-card.dark { grid-column: 1 / -1; }
  .stat-card > strong { font-size: 34px; }
  .stat-icon { right: 15px; top: 16px; }
  .content-grid { grid-template-columns: 1fr; gap: 12px; }
  .recent-panel { padding: 22px 18px 8px; }
  .word-row { grid-template-columns: minmax(100px,.75fr) minmax(0,1.25fr); gap: 10px; min-height: 78px; }
  .word-row .pill { grid-column: 1 / -1; width: max-content; margin-top: -13px; }
  .review-promo { min-height: 310px; }

  .page-heading.compact { align-items: flex-start; }
  .page-heading.compact .primary-button { flex: 0 0 auto; }
  .library-toolbar { align-items: stretch; flex-direction: column; gap: 12px; }
  .filter-group { overflow-x: auto; }
  .filter { flex: 0 0 auto; min-height: 38px; }
  .library-search { width: 100%; }
  .library-search input { height: 42px; font-size: 13px; }
  .tag-filter-row { overflow-x: auto; padding-bottom: 4px; }
  .tag-chip { flex: 0 0 auto; font-size: 10px; }
  .table-head { display: none; }
  .library-table { border: 0; background: transparent; }
  .library-row { grid-template-columns: 1fr auto; grid-template-areas: "word delete" "meaning meaning" "meta date"; gap: 10px; min-height: 0; margin: 0 0 10px; padding: 17px; border: 1px solid var(--line); background: var(--white); }
  .library-row:first-child { border-top: 1px solid var(--line); }
  .library-word { grid-area: word; }
  .library-word strong { font-size: 20px; }
  .library-meaning { grid-area: meaning; overflow: visible; font-size: 13px; white-space: normal; }
  .library-meta { grid-area: meta; }
  .library-date { grid-area: date; align-self: center; text-align: right; }
  .delete-word { grid-area: delete; }

  .review-header { align-items: flex-start; }
  .review-header h1 { font-size: 31px; }
  .review-progress { width: 105px; }
  .review-card { min-height: 365px; padding: 48px 24px; }
  .review-category { margin-top: -292px; }
  .review-card h2 { font-size: clamp(36px, 12vw, 49px); overflow-wrap: anywhere; }
  .review-actions { grid-template-columns: 1fr; }
  .review-btn { font-size: 12px; }

  .search-overlay { justify-content: stretch; }
  .search-panel { width: 100%; padding: 56px 22px 30px; }
  .result-title { margin-top: 20px; }
  .result-title h2 { font-size: clamp(38px, 13vw, 51px); overflow-wrap: anywhere; }
  .result-index { width: 52px; height: 62px; }
  .meaning-block h3 { font-size: 21px; }
  .segmented button { min-height: 46px; }
  .collect-button { min-height: 62px; }
  .toast { bottom: 84px; width: calc(100% - 28px); justify-content: center; }
}

@media (max-width: 390px) {
  .page-heading { flex-direction: column; }
  .streak { display: none; }
  .page-heading.compact { flex-direction: row; }
  .page-heading.compact h1 { font-size: 29px; }
  .page-heading.compact .primary-button { padding-inline: 12px; }
  .stats-grid { grid-template-columns: 1fr; }
  .stat-card.dark { grid-column: auto; }
  .filter-group { margin-right: -14px; }
}