/* TeacherSpace — warm, focused teaching workspace */
@charset "UTF-8";

:root {
  --ink: #183b3a;
  --ink-soft: #49615d;
  --muted: #77847c;
  --teal: #176e65;
  --teal-dark: #12574f;
  --coral: #ca633f;
  --coral-dark: #b65232;
  --cream: #faf9f4;
  --white: #ffffff;
  --sage: #e9eee3;
  --sage-deep: #d1e0c6;
  --sand: #f3e8cf;
  --lavender: #eae5f1;
  --line: #e5e7df;
  --shadow: 0 8px 28px rgba(26, 57, 48, .045);
  --radius: 18px;
  --sidebar-width: 238px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--font); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-dark); }
img { max-width: 100%; display: block; }
svg { display: block; flex-shrink: 0; }
button svg, a svg { width: 19px; height: 19px; }
button { color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { line-height: 1.25; }
h1 { font-size: clamp(26px, 2.3vw, 34px); font-weight: 680; letter-spacing: -.95px; }
h2 { font-size: 21px; font-weight: 650; letter-spacing: -.5px; }
h3 { font-size: 16px; font-weight: 650; letter-spacing: -.25px; }
small { font-size: 12px; }
strong { font-weight: 650; }
[hidden] { display: none !important; }
::selection { background: #cce3d8; color: var(--ink); }
:focus-visible { outline: 3px solid #77b4a2; outline-offset: 3px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid #70ae9e; outline-offset: 1px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; z-index: 40; inset: 0 auto 0 0; width: var(--sidebar-width); display: flex; flex-direction: column; padding: 29px 17px 20px; background: #f0f3eb; border-right: 1px solid #e1e6da; }
.brand { display: flex; align-items: center; gap: 9px; min-height: 45px; padding: 0 8px; margin-bottom: 24px; color: var(--ink); }
.brand-icon { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; object-fit: contain; }
.brand-name { font-size: 18px; letter-spacing: -.6px; font-weight: 740; line-height: 1; white-space: nowrap; }
.brand-name small { display: block; margin-top: 8px; color: #899881; font-size: 9px; font-weight: 400; letter-spacing: .1px; line-height: 1.3; }
.brand-name span { color: var(--teal); }
.nav-group-label { padding: 0 15px; margin: 24px 0 9px; color: #909b8e; font-size: 10px; font-weight: 700; letter-spacing: 1.45px; text-transform: uppercase; }
.sidebar nav { display: grid; gap: 5px; }
.nav-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 11px 15px; border: 0; border-radius: 11px; background: transparent; color: #63756b; font-size: 13px; font-weight: 550; text-align: left; transition: background .16s, color .16s, transform .16s; }
.nav-item svg { width: 19px; height: 19px; stroke-width: 1.7; opacity: .85; }
.nav-item:hover { color: var(--teal); background: #e4eade; }
.nav-item.active { color: #fff; background: var(--teal); box-shadow: 0 3px 8px #176e6514; }
.nav-item.active svg { opacity: 1; }
.nav-item .badge { margin-left: auto; font-size: 9px; }
.nav-item.active .badge { background: #ffffff23; color: #fff; }
.sidebar-footer { margin-top: auto; padding: 24px 9px 0; }
.sidebar-tip { padding: 18px 16px; border: 1px solid #d9e1d3; border-radius: 14px; background: #e7edde; margin-bottom: 24px; }
.sidebar-tip p { font-size: 12px; line-height: 1.6; color: #687b68; margin-top: 7px; }
.sidebar-tip strong { font-size: 13px; }
.profile { display: flex; align-items: center; gap: 10px; padding: 17px 0 0; border-top: 1px solid #dce2d6; }
.profile .avatar { width: 36px; height: 36px; background: #e5c8ad; font-size: 12px; }
.profile strong { display: block; font-size: 12px; line-height: 1.4; }
.profile small { display: block; font-size: 10px; color: var(--muted); }
.profile-info { flex: 1; min-width: 0; }
.parent-mark { width: 26px; height: 26px; flex: 0 0 26px; object-fit: contain; }
.avatar { display: grid; place-items: center; width: 39px; height: 39px; flex: 0 0 39px; border-radius: 50%; background: #e0eadd; color: var(--ink); font-size: 13px; font-weight: 650; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.workspace { margin-left: var(--sidebar-width); min-width: 0; }
.topbar { min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 19px 40px; border-bottom: 1px solid var(--line); background: #faf9f4e8; }
.topbar-title { display: flex; align-items: center; gap: 9px; color: #8c948a; font-size: 12px; white-space: nowrap; }
.topbar-title strong { color: #566c63; font-weight: 550; }
.topbar-title svg { width: 16px; height: 16px; }
.global-search { display: flex; align-items: center; gap: 9px; width: 300px; max-width: 38vw; background: #fff; border: 1px solid #e7e9e1; border-radius: 9px; padding: 10px 13px; color: #a2aa9e; }
.global-search svg { width: 16px; height: 16px; }
.global-search input { background: transparent; border: 0; outline: 0; min-width: 0; width: 100%; color: var(--ink); font-size: 12px; }
.global-search input::placeholder { color: #9ba596; }
.global-search kbd { color: #9aa295; font-size: 10px; border: 1px solid #e6e9e0; border-radius: 4px; padding: 0 4px; white-space: nowrap; }
.topbar-actions { display: flex; align-items: center; gap: 17px; margin-left: auto; }
.topbar-actions .avatar { width: 32px; height: 32px; flex-basis: 32px; font-size: 11px; background: #e5c8ad; }
.notification-button { position: relative; }
.notification-button::after { content: ""; position: absolute; right: 9px; top: 7px; width: 5px; height: 5px; border: 2px solid var(--cream); box-sizing: content-box; border-radius: 50%; background: var(--coral); }
.page { padding: 33px 40px 64px; max-width: 1620px; margin: 0 auto; animation: page-in .28s ease both; }
.page-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 27px; }
.page-heading > div { min-width: 0; }
.eyebrow { margin-bottom: 7px; font-size: 10px; letter-spacing: 1.7px; font-weight: 700; text-transform: uppercase; color: #809084; }
.page-subtitle { margin-top: 10px; color: var(--muted); font-size: 13px; max-width: 660px; line-height: 1.7; }
.date-label { display: flex; align-items: center; gap: 7px; color: #849080; font-size: 11px; padding-top: 6px; white-space: nowrap; }
.date-label svg { width: 15px; height: 15px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 19px; }
.section-heading h2 { font-size: 18px; }
.section-heading p { color: var(--muted); font-size: 12px; margin-top: 6px; }
.section-heading a, .section-heading .text-link { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.text-link { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; color: var(--teal); padding: 0; font-size: 12px; font-weight: 600; }
.text-link svg { width: 14px; height: 14px; }

.hero { display: flex; position: relative; isolation: isolate; overflow: hidden; min-height: 245px; padding: 31px 35px; border-radius: 20px; background: #e8ede0; border: 1px solid #e1e6d9; }
.hero-copy { width: 63%; max-width: 550px; position: relative; z-index: 2; }
.hero .eyebrow { color: #647e67; font-size: 9px; margin-bottom: 14px; }
.hero h2 { font-size: clamp(26px, 2.7vw, 34px); line-height: 1.18; letter-spacing: -1.05px; font-weight: 650; max-width: 435px; }
.hero h2 em { font-style: normal; color: var(--teal); }
.hero-copy p { max-width: 405px; margin-top: 13px; color: #748370; font-size: 12px; line-height: 1.75; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.hero-actions .btn { min-height: 39px; padding: 10px 16px; font-size: 11px; }
.hero-visual { display: grid; place-items: center; width: 36%; position: absolute; right: 17px; top: 20px; bottom: 15px; }
.hero-visual::before { content: ""; width: 175px; height: 175px; background: #d3e0c4; border-radius: 50%; position: absolute; z-index: -1; }
.hero-visual::after { content: ""; width: 219px; height: 219px; border: 1px dashed #9dbd9380; border-radius: 50%; position: absolute; z-index: -1; transform: rotate(20deg); }
.hero-book { width: 190px; height: 190px; object-fit: contain; filter: drop-shadow(0 15px 14px #435b391c); transform: rotate(-8deg); }
.hero-visual > svg { width: 175px; height: 175px; filter: drop-shadow(0 15px 14px #435b391c); }
.hero-decoration { position: absolute; color: #a7bc90; font-size: 22px; }
.quick-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 22px 0 32px; }
.stat { display: flex; align-items: center; gap: 13px; min-height: 88px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.stat-icon { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border-radius: 11px; background: #eef3e7; color: #6e9562; }
.stat-icon svg { width: 18px; height: 18px; stroke-width: 1.6; }
.stat:nth-child(2) .stat-icon { background: #f9eee6; color: var(--coral); }
.stat:nth-child(3) .stat-icon { background: #f0eaf6; color: #9981b3; }
.stat strong { display: block; font-size: 21px; font-weight: 650; line-height: 1.1; }
.stat strong + span { display: block; margin-top: 5px; color: #85917f; font-size: 10px; line-height: 1.4; }
.stat small { display: block; margin-top: 5px; color: #85917f; font-size: 10px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.dashboard-main { min-width: 0; }
.dashboard-aside { display: grid; gap: 21px; min-width: 0; }
.dashboard-aside .panel { padding: 22px; }
.dashboard-aside .section-heading { margin-bottom: 21px; }
.dashboard-aside h2 { font-size: 16px; }
.aside-label { color: #909b88; font-size: 10px; }
.dashboard-section { margin-top: 30px; }
.resource-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.resource-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: #fff; transition: box-shadow .2s, transform .2s, border-color .2s; }
.resource-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px #2a44350c; border-color: #cbd8c7; }
.resource-cover { display: flex; align-items: center; justify-content: center; position: relative; isolation: isolate; overflow: hidden; height: 142px; min-height: 142px; background: var(--sage); }
.resource-cover::before { content: ""; width: 120px; height: 120px; position: absolute; right: -30px; top: -42px; border-radius: 50%; background: #ffffff35; z-index: -1; }
.resource-cover::after { content: ""; width: 95px; height: 95px; position: absolute; left: -34px; bottom: -42px; border-radius: 50%; border: 16px solid #ffffff28; z-index: -1; }
.theme-coral { background: #efd9ce; color: #a66c4e; }
.theme-sage { background: #e1e9d8; color: #66875a; }
.theme-sand { background: #f0e5cd; color: #ac8852; }
.theme-lavender { background: #e7e0ee; color: #9282ab; }
.resource-illustration { display: grid; place-items: center; font-size: 43px; line-height: 1; }
.resource-illustration svg { width: 86px; height: 86px; stroke-width: 1.4; }
.cover-label { position: absolute; left: 13px; top: 12px; padding: 4px 7px; border-radius: 5px; font-size: 8px; font-weight: 650; text-transform: uppercase; letter-spacing: .8px; color: #516345; background: #ffffffab; }
.save-resource { position: absolute; top: 9px; right: 10px; display: grid; place-items: center; width: 29px; height: 29px; border: 0; border-radius: 50%; color: #5f6e5b; background: #ffffffc2; }
.save-resource svg { width: 14px; height: 14px; }
.save-resource.saved { color: var(--coral); background: #fff6ef; }
.save-resource.saved svg { fill: #ca633f25; }
.resource-card-body { display: flex; flex-direction: column; padding: 15px 16px 10px; flex: 1; }
.resource-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 15px 16px 0; color: #96a08e; font-size: 9px; }
.resource-card-body .resource-meta { padding: 0; }
.resource-meta > span + span::before { content: "·"; margin-right: 6px; }
.resource-title { font-size: 14px; line-height: 1.45; font-weight: 650; letter-spacing: -.2px; margin: 8px 16px 0; }
.resource-card-body .resource-title { margin: 8px 0 0; }
.resource-description { color: #8a9583; font-size: 11px; line-height: 1.7; margin: 7px 16px 0; }
.resource-card-body .resource-description { margin: 7px 0 0; }
.resource-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px 16px; margin-top: auto; color: #8e9889; font-size: 9px; }
.resource-footer .avatar { width: 20px; height: 20px; flex-basis: 20px; font-size: 7px; }
.resource-footer .author { display: flex; align-items: center; gap: 6px; }
.resource-footer svg { width: 12px; height: 12px; }
.resource-footer .downloads { display: flex; align-items: center; gap: 4px; }
.chip, .badge { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 4px 9px; border-radius: 6px; background: #edf2e7; color: #728164; font-size: 9px; font-weight: 550; line-height: 1.3; white-space: nowrap; }
.chip svg { width: 11px; height: 11px; }
.badge { padding: 3px 7px; font-size: 10px; }
.badge.coral, .chip.coral { background: #faeae0; color: #be7150; }
.badge.lavender, .chip.lavender { background: #eee9f4; color: #8c78a8; }
.badge.teal, .chip.teal { background: #e0eee9; color: var(--teal); }
.badge.sand, .chip.sand { background: #f5efdf; color: #a3884c; }

.btn { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 42px; padding: 11px 18px; border: 1px solid transparent; border-radius: 9px; font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap; transition: background .16s, border-color .16s, box-shadow .16s, transform .16s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.primary { background: var(--teal); color: #fff; }
.btn.primary:hover { background: var(--teal-dark); box-shadow: 0 3px 10px #176e6520; }
.btn.primary.coral, .btn.coral { color: #fff; background: var(--coral); }
.btn.primary.coral:hover, .btn.coral:hover { background: var(--coral-dark); }
.btn.secondary { color: var(--ink); border-color: #dce3d5; background: #fff; }
.btn.secondary:hover { background: #f1f4ed; border-color: #cad7c6; }
.btn.ghost { background: transparent; color: var(--teal); border-color: transparent; }
.btn.ghost:hover { background: #e8eee1; }
.btn.small { min-height: 33px; padding: 8px 12px; font-size: 10px; border-radius: 7px; }
.btn.full-width { width: 100%; }
.btn svg { width: 16px; height: 16px; stroke-width: 1.8; }
.btn.small svg { width: 13px; height: 13px; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.icon-button { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #798a75; transition: background .16s; }
.icon-button:hover { background: #eef1e8; color: var(--teal); }
.icon-button svg { width: 18px; height: 18px; }
.inline-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 25px; }
.search-field { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 220px; background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 12px 14px; }
.search-field svg { width: 17px; height: 17px; color: #90a18d; }
.search-field input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; }
.search-field input::placeholder { color: #9aa694; }
.select-field { border: 1px solid var(--line); border-radius: 9px; min-height: 44px; padding: 10px 34px 10px 13px; color: #536d5c; background: #fff; font-size: 12px; }
.tabs { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 24px; }
.tab { border: 1px solid transparent; border-radius: 8px; background: transparent; color: #8a9781; padding: 9px 13px; font-size: 11px; font-weight: 550; transition: background .16s, color .16s; }
.tab:hover { color: var(--teal); background: #ecf0e6; }
.tab.active { background: #e5eee0; color: var(--teal); border-color: #d9e5d2; }
.results-count { color: #8b9784; font-size: 11px; margin: -8px 0 18px; }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 230px; gap: 14px; padding: 35px; text-align: center; border: 1px dashed #d2ddca; border-radius: 16px; background: #f5f7ee; color: #89957f; }
.empty-state svg { width: 35px; height: 35px; color: #91ab7f; }
.empty-state h3 { color: var(--ink); }
.empty-state p { max-width: 380px; font-size: 12px; line-height: 1.8; }
.panel { padding: 25px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.panel > h2 { font-size: 18px; margin-bottom: 10px; }
.panel > p { font-size: 12px; color: var(--muted); line-height: 1.8; }
.panel + .panel { margin-top: 20px; }
.dashboard-aside .panel + .panel { margin-top: 0; }
.today-list { display: grid; gap: 17px; }
.today-item { display: flex; gap: 12px; align-items: flex-start; position: relative; }
.today-item > .time { min-width: 31px; padding-top: 2px; font-size: 10px; color: #8d9b86; }
.today-item-content { min-width: 0; padding: 0 0 15px 12px; border-left: 2px solid #d7e5cf; }
.today-item:last-child .today-item-content { padding-bottom: 0; }
.today-item:nth-child(2) .today-item-content { border-left-color: #e9c6ad; }
.today-item:nth-child(3) .today-item-content { border-left-color: #d9c9e5; }
.today-item strong { display: block; font-size: 12px; margin-bottom: 3px; }
.today-item small { color: #8d9885; font-size: 10px; }
.quote-panel { position: relative; padding: 25px 23px; background: #f0e8da; border: 1px solid #eadfcb; border-radius: 17px; }
.quote-panel .quote-icon { font-size: 40px; line-height: 1; color: #cfaf81; }
.quote-panel blockquote { margin: 8px 0 12px; font-size: 14px; font-weight: 500; line-height: 1.8; letter-spacing: -.2px; }
.quote-panel small { color: #a89678; font-size: 10px; }
.community-preview { padding: 21px; }
.community-preview h3 { font-size: 14px; }
.community-preview p { color: #8f9a84; font-size: 11px; line-height: 1.75; margin-top: 8px; }
.avatar-stack { display: flex; padding-left: 4px; margin: 16px 0; }
.avatar-stack .avatar { width: 27px; height: 27px; flex-basis: 27px; font-size: 8px; margin-left: -4px; border: 2px solid #fff; }
.avatar-stack .avatar:nth-child(2) { background: #e2cfbc; }
.avatar-stack .avatar:nth-child(3) { background: #d4cbdf; }
.avatar-stack .avatar:nth-child(4) { background: #eedbc2; }
.avatar-stack .avatar:last-child { background: #f2f4ee; color: #899980; }



.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { display: grid; gap: 7px; min-width: 0; }
.field.full-width { grid-column: 1 / -1; }
.field label { color: #56715f; font-size: 11px; font-weight: 600; }
.field label span { color: #94a189; font-weight: 400; }
.field input, .field select, .field textarea { width: 100%; min-width: 0; border: 1px solid #dfe6d8; border-radius: 8px; background: #fafbf7; color: var(--ink); padding: 11px 12px; font-size: 12px; line-height: 1.55; transition: border-color .15s, box-shadow .15s; }
.field input::placeholder, .field textarea::placeholder { color: #a1ab98; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #99b995; background: #fff; }
.field textarea { min-height: 108px; resize: vertical; }
.field small { color: #98a38e; font-size: 10px; line-height: 1.7; }


.checkbox-row { display: flex; align-items: flex-start; gap: 9px; margin: 15px 0; font-size: 11px; color: #829076; line-height: 1.7; }
.checkbox-row input { accent-color: var(--teal); margin: 3px 0 0; }




.result-section { margin-top: 23px; }
.result-section h3 { font-size: 13px; margin-bottom: 9px; color: var(--teal); }
.result-section p, .result-section ul, .result-section ol { color: #73866c; font-size: 12px; line-height: 1.85; }
.result-section ul, .result-section ol { margin: 8px 0 0; padding-left: 20px; }
.result-section li { padding-left: 4px; margin-bottom: 5px; }
.result-section li::marker { color: #90a581; }
.result-section table { width: 100%; border-collapse: collapse; font-size: 11px; margin-top: 12px; }
.result-section th, .result-section td { padding: 10px; text-align: left; border: 1px solid #e4ebdd; }
.result-section th { background: #f1f5ed; font-weight: 600; }

.notice { display: flex; align-items: flex-start; gap: 10px; padding: 13px 15px; border: 1px solid #e3e7d9; border-radius: 10px; background: #f3f6ed; color: #83916f; font-size: 10px; line-height: 1.7; }
.notice svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }
.notice strong { color: #657c57; }
.notice.coral { border-color: #eddbcc; background: #fcf5ed; color: #ac8a6c; }









.planner-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.planner-toolbar .week-switcher { display: flex; align-items: center; gap: 12px; }
.week-switcher strong { min-width: 140px; text-align: center; font-size: 14px; font-weight: 600; }
.week-grid { display: grid; grid-template-columns: repeat(7, minmax(112px, 1fr)); gap: 10px; align-items: stretch; min-width: 850px; }
.day-column { min-height: 435px; min-width: 0; border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; }
.day-heading { display: flex; justify-content: space-between; align-items: center; gap: 7px; padding: 16px 14px; border-bottom: 1px solid var(--line); font-size: 11px; color: #7a8d70; }
.day-heading strong { display: block; color: #506d57; font-size: 12px; }
.day-heading .day-date { font-size: 18px; color: #93a187; }
.day-column.today { border-color: #a7c497; }
.day-column.today .day-heading { background: #edf4e7; color: var(--teal); }
.day-column.today .day-date { color: var(--teal); }
.day-plans { display: grid; align-content: start; gap: 11px; padding: 12px; }
.plan-item { position: relative; margin: 12px; padding: 13px; border-radius: 9px; border: 1px solid #dce7d4; background: #edf3e7; }
.day-plans .plan-item { margin: 0; }
.plan-item:nth-child(2n) { background: #fbefdf; border-color: #eddcc5; }
.plan-item .plan-time { display: block; font-size: 9px; color: #8a9e7c; margin-bottom: 7px; }
.plan-item h3 { font-size: 12px; line-height: 1.45; }
.plan-item p { font-size: 9px; line-height: 1.7; color: #8b9c7e; margin-top: 5px; }
.plan-item .chip { margin-top: 9px; font-size: 8px; padding: 3px 6px; background: #ffffff95; }
.plan-item.completed { opacity: .55; }
.plan-item.completed h3 { text-decoration: line-through; }
.plan-actions { display: flex; align-items: center; gap: 3px; margin-top: 9px; }
.plan-actions .icon-button { width: 25px; height: 25px; }
.plan-actions svg { width: 13px; height: 13px; }
.day-add { display: flex; align-items: center; justify-content: center; gap: 5px; width: calc(100% - 24px); margin: 12px; padding: 9px; border: 1px dashed #dbe4d2; border-radius: 8px; background: transparent; color: #9cab90; font-size: 10px; }
.day-add:hover { color: var(--teal); background: #f5f8f0; }
.day-add svg { width: 12px; height: 12px; }
.planner-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 21px; color: #96a18d; font-size: 10px; }
.planner-legend span { display: flex; align-items: center; gap: 6px; }
.planner-legend i { width: 7px; height: 7px; border-radius: 50%; background: #b4cda4; }

.tools-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 23px; align-items: start; }
.tool-card { min-width: 0; padding: 26px; background: #fff; border: 1px solid var(--line); border-radius: 18px; }
.tool-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 21px; }
.tool-card-header .tool-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #edf3e6; color: #769466; }
.tool-card:nth-child(2) .tool-icon { background: #f5eee3; color: #b69a6a; }
.tool-card:nth-child(3) .tool-icon { background: #efe8f4; color: #9982ad; }
.tool-card:nth-child(4) .tool-icon { background: #fae9df; color: var(--coral); }
.tool-card-header h2 { font-size: 17px; margin-bottom: 4px; }
.tool-card-header p { font-size: 11px; color: #94a089; }
.timer-display { text-align: center; font-size: clamp(48px, 5vw, 65px); line-height: 1.2; letter-spacing: -2.8px; color: var(--teal); font-weight: 350; font-variant-numeric: tabular-nums; padding: 15px 0 19px; }
.timer-presets { display: flex; justify-content: center; gap: 7px; margin-bottom: 20px; }
.timer-presets button { background: #f4f7ef; color: #8d9c7f; border: 1px solid #e0e8d7; border-radius: 6px; padding: 6px 10px; font-size: 10px; }
.timer-presets button.active { color: var(--teal); background: #e4efd9; border-color: #cbdcbc; }
.tool-card .inline-actions.centered { justify-content: center; }
.name-display { display: grid; place-items: center; min-height: 150px; margin: 13px 0; border-radius: 12px; background: #f5f7ef; color: var(--teal); font-size: 26px; font-weight: 600; letter-spacing: -.7px; text-align: center; padding: 20px; }
.group-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 18px 0 0; }
.group-card { border: 1px solid #e5eadb; border-radius: 10px; padding: 13px; background: #f6f8f1; }
.group-card h3 { font-size: 11px; color: var(--teal); margin-bottom: 7px; }
.group-card p { font-size: 10px; line-height: 1.7; color: #8b9c7b; }
.tool-card textarea { min-height: 83px; }
.wheel-result { min-height: 80px; padding: 20px; display: grid; place-items: center; margin-top: 16px; background: #f6f2ea; border-radius: 10px; text-align: center; font-size: 19px; color: #b29165; }

.community-grid { display: grid; grid-template-columns: minmax(0, 1fr) 285px; gap: 27px; align-items: start; }
.community-feed { min-width: 0; }
.post-card { padding: 23px 25px; background: #fff; border: 1px solid var(--line); border-radius: 16px; margin-bottom: 18px; }
.post-author { display: flex; align-items: center; gap: 11px; margin-bottom: 15px; }
.post-author .avatar { width: 35px; height: 35px; flex-basis: 35px; font-size: 11px; }
.post-author-info { min-width: 0; flex: 1; }
.post-author strong { font-size: 12px; }
.post-author small { display: block; font-size: 9px; color: #9aa58f; margin-top: 3px; }
.post-author .badge { font-size: 8px; }
.post-card h3 { font-size: 15px; line-height: 1.5; margin-bottom: 8px; }
.post-card > p { color: #85957b; font-size: 12px; line-height: 1.85; }
.post-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 13px; }
.post-actions { display: flex; align-items: center; gap: 17px; margin-top: 19px; padding-top: 15px; border-top: 1px solid #eef0e8; }
.post-actions button { display: inline-flex; align-items: center; gap: 6px; border: 0; padding: 0; background: none; color: #92a185; font-size: 10px; }
.post-actions button svg { width: 15px; height: 15px; }
.post-actions button.liked { color: var(--coral); }
.post-actions button.liked svg { fill: #ca633f22; }
.post-actions button:last-child { margin-left: auto; }
.comment-list { display: grid; gap: 13px; margin-top: 17px; padding: 16px; background: #f6f8f0; border-radius: 9px; }
.comment { display: flex; gap: 9px; }
.comment .avatar { width: 26px; height: 26px; flex-basis: 26px; font-size: 8px; }
.comment strong { font-size: 10px; }
.comment p { color: #899a7b; font-size: 11px; margin-top: 3px; line-height: 1.7; }
.comment-form { display: flex; gap: 8px; margin-top: 14px; }
.comment-form input { min-width: 0; flex: 1; border: 1px solid #e0e7d7; border-radius: 7px; padding: 10px; font-size: 11px; background: #fff; color: var(--ink); }
.composer { padding: 20px; margin-bottom: 23px; background: #f0f5e8; border: 1px solid #dce7d2; border-radius: 15px; }
.composer-top { display: flex; gap: 11px; align-items: center; }
.composer-top input { width: 100%; min-width: 0; padding: 12px 14px; border-radius: 8px; border: 1px solid #dee7d4; background: #fff; font-size: 12px; color: var(--ink); }
.community-aside .panel { padding: 21px; }
.community-aside h2 { font-size: 15px; margin-bottom: 17px; }
.group-list { display: grid; gap: 16px; }
.group-list-item { display: flex; align-items: center; gap: 10px; }
.group-list-item .group-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; background: #edf2e3; font-size: 15px; }
.group-list-item strong { font-size: 11px; }
.group-list-item small { display: block; font-size: 9px; color: #9da78f; margin-top: 2px; }
.community-guidelines { margin: 0; padding: 0 0 0 17px; color: #92a183; font-size: 11px; line-height: 1.85; }
.community-guidelines li { margin-bottom: 9px; }

.modal-overlay { position: fixed; z-index: 100; inset: 0; display: flex; align-items: center; justify-content: center; padding: 28px; background: #17362a70; backdrop-filter: blur(5px); animation: fade-in .18s ease both; }
.modal { width: min(100%, 620px); max-height: calc(100dvh - 56px); display: flex; flex-direction: column; border-radius: 20px; background: #fff; border: 1px solid #e6ecde; box-shadow: 0 28px 100px #102b3040; overflow: hidden; animation: modal-in .2s ease both; }
.modal.wide { width: min(100%, 800px); }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 25px 28px 21px; border-bottom: 1px solid #e9ede3; }
.modal-header h2 { font-size: 21px; letter-spacing: -.5px; }
.modal-header p { font-size: 11px; color: #98a18e; margin-top: 6px; }
.modal-header .icon-button { margin-top: -5px; margin-right: -8px; }
.modal-body { padding: 25px 28px; overflow: auto; overscroll-behavior: contain; }
.modal-body .resource-cover { height: 170px; min-height: 170px; border-radius: 13px; margin-bottom: 23px; }
.modal-body p { color: #7e9175; font-size: 12px; line-height: 1.85; }
.modal-body h3 { font-size: 14px; margin: 20px 0 8px; }
.modal-body ul, .modal-body ol { padding-left: 19px; color: #819677; font-size: 12px; line-height: 1.9; }
.modal-footer { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 9px; padding: 18px 28px 23px; border-top: 1px solid #e9ede3; background: #fcfdf9; }
.modal-footer .btn { min-height: 39px; font-size: 11px; }
.toast { position: fixed; z-index: 200; bottom: 24px; left: calc(50% + 119px); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 40px); padding: 13px 21px; border: 1px solid #d7e4cd; border-radius: 10px; background: var(--ink); color: #f0f4e9; box-shadow: 0 8px 30px #193d3420; font-size: 12px; animation: toast-in .2s ease both; }
.toast svg { width: 17px; height: 17px; color: #a1c887; }
.mobile-nav { display: none; }
.mobile-menu-button { display: none; }
#print-root { display: none; }

/* Components connected to the working demo */
.muted { color: #91a085; font-size: 11px; line-height: 1.8; }
.full-width { width: 100%; }
.status-dot { width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: #97b785; box-shadow: 0 0 0 4px #97b78512; }
.demo-badge { color: #87987c; background: #edf2e7; font-size: 9px; padding: 5px 9px; border: 1px solid #e1e9d8; }
.topbar .global-search { flex: 0 1 300px; min-width: 190px; }
.sidebar-footer > .nav-item { padding-inline: 0; min-height: 38px; margin-bottom: 13px; font-size: 11px; }
.sidebar-footer > .nav-item:hover, .sidebar-footer > .nav-item.active { padding-inline: 10px; }
.sidebar-footer .parent-mark { margin: 23px auto 0; width: 26px; height: 26px; }
.profile > div:last-child { min-width: 0; }
.profile strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 125px; }
.hero .badge { margin-bottom: 13px; color: #708668; background: #ffffff73; border: 1px solid #d5e0ca; font-size: 8px; padding: 5px 8px; border-radius: 6px; font-weight: 500; }
.hero-float { display: inline-flex; align-items: center; gap: 7px; position: absolute; z-index: 4; padding: 9px 12px; border: 1px solid #edf1e5; background: #fffffff0; border-radius: 9px; color: #6e8761; font-size: 9px; font-weight: 550; white-space: nowrap; box-shadow: 0 7px 20px #304b2920; }
.hero-float svg { width: 14px; height: 14px; filter: none; stroke-width: 2; }
.float-one { top: 13px; right: 0; transform: rotate(4deg); }
.float-one svg { color: #81a76b; background: #edf5e4; border-radius: 50%; padding: 2px; width: 17px; height: 17px; }
.float-two { bottom: 14px; left: 0; transform: rotate(-3deg); }
.float-two svg { color: var(--coral); }
.hero-orbit { position: absolute; width: 255px; height: 175px; border: 1px solid #bbceb099; border-radius: 50%; transform: rotate(-28deg); pointer-events: none; }
.stat > div { min-width: 0; }
.stat:nth-child(4) .stat-icon { color: #ac9670; background: #f4efdf; }
.title-button { padding: 0; border: 0; background: transparent; color: var(--ink); text-align: left; font: inherit; font-weight: inherit; line-height: inherit; }
.title-button:hover { color: var(--teal); }
.resource-card-body .resource-footer { padding: 14px 0 2px; }
.resource-cover > .chip { position: absolute; top: 12px; left: 12px; background: #ffffffb8; color: inherit; border-radius: 5px; font-size: 8px; padding: 4px 7px; font-weight: 600; }
.favorite-button { position: absolute; top: 8px; right: 9px; width: 28px; height: 28px; background: #ffffffb8; color: #6b7e62; border-radius: 50%; }
.favorite-button svg { width: 14px; height: 14px; }
.favorite-button:hover { background: #fff; color: var(--coral); }
.favorite-button.is-favorite { color: var(--coral); background: #fff6ef; }
.favorite-button.is-favorite svg { fill: #ca633f26; }
.library-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.resource-grid > .empty-state { grid-column: 1 / -1; }
.dashboard-main > .notice { margin-top: 20px; }
.dashboard-aside .panel > .btn { margin-top: 20px; width: 100%; }
.dashboard-aside .quote-panel { padding: 23px; background: #f3ead9; border-color: #e9dfc8; }
.dashboard-aside .quote-panel .eyebrow { display: block; color: #aa9877; font-size: 8px; letter-spacing: 1.3px; }
.dashboard-aside .quote-panel p { color: #716952; font-size: 17px; font-weight: 500; line-height: 1.6; letter-spacing: -.4px; margin: 13px 0; }
.dashboard-aside .quote-panel .muted { color: #b0a080; font-size: 9px; }
.today-item > span:first-child { min-width: 31px; padding-top: 2px; font-size: 10px; color: #8d9b86; }
.page-footer { padding: 0 40px 26px; max-width: 1620px; margin: 0 auto; color: #a5ad9b; font-size: 9px; letter-spacing: .15px; }
.page-footer span { margin: 0 6px; color: #ccd4c1; }
.page > .notice + .community-grid { margin-top: 24px; }




.field textarea[rows="2"] { min-height: 81px; }
.form-error { color: #bb6247; font-size: 11px; line-height: 1.65; margin: 12px 0 0; }
.form-error:empty { display: none; }
.form-error:not(:empty) { background: #fff4ec; border: 1px solid #eddbcc; border-radius: 8px; padding: 10px 12px; }























.tag-list { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 16px 0 21px; }
.modal-body > .resource-meta { padding: 0; margin-bottom: 12px; font-size: 10px; }
.result-section details { margin-top: 15px; border: 1px solid #e6eddd; background: #f7faf2; border-radius: 9px; padding: 12px 15px; }
.result-section summary { cursor: pointer; color: #7f9870; font-size: 11px; font-weight: 550; }
.modal-body form > .field + .field, #profile-form > .field + .field { margin-top: 16px; }
.modal-body form > .form-grid { margin: 16px 0; }
.modal-body form > .notice, .modal-body form > p { margin-top: 17px; }
.modal-body textarea[rows="18"] { min-height: 300px; }
.modal-open { overflow: hidden; }
.planner-scroll { overflow-x: auto; padding-bottom: 12px; overscroll-behavior-x: contain; }
.planner-scroll::-webkit-scrollbar { height: 5px; }
.planner-scroll::-webkit-scrollbar-thumb { background: #cddbc4; border-radius: 5px; }
.planner-scroll::-webkit-scrollbar-track { background: #edf1e6; border-radius: 5px; }
.planner-toolbar h2 { font-size: 17px; }
.day-heading { display: grid; grid-template-columns: 1fr auto; min-height: 75px; padding: 14px 12px; gap: 3px; }
.day-heading > span { font-size: 9px; }
.day-heading > strong { color: #9baa8d; font-size: 20px; font-weight: 500; }
.day-heading > small { grid-column: 1 / -1; font-size: 8px; color: #799c64; line-height: 1; }
.day-column.is-today { border-color: #a9c89b; }
.day-column.is-today .day-heading { background: #edf4e7; color: var(--teal); }
.day-column.is-today .day-heading > strong { color: var(--teal); }
.day-plans .day-add { width: 100%; margin: 0; padding: 10px 5px; font-size: 9px; }
.plan-time { display: block; font-size: 9px; line-height: 1.6; color: #91a280; margin-bottom: 8px; }
.plan-time span { white-space: nowrap; font-size: 8px; color: #a0ac90; }
.tool-symbol { display: grid; place-items: center; width: 39px; height: 39px; margin-bottom: 15px; background: #eaf1e0; color: #7a9b68; border: 1px solid #e1ebd6; border-radius: 12px; }
.tool-symbol svg { width: 18px; height: 18px; }
.tool-card:nth-child(2) .tool-symbol { background: #f2eadb; color: #b29361; border-color: #e9ddc7; }
.tool-card.panel + .panel { margin-top: 0; }
.tool-card > h2 { font-size: 18px; margin-bottom: 7px; }
.tool-card > .inline-actions { margin-top: 20px; }
.tool-card #groups-form { margin-top: 30px; }
.tool-card #groups-form > .btn { margin-top: 17px; }
.tool-card #groups-form .muted { margin-top: 13px; font-size: 10px; }
.tool-card:fullscreen { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 50px; background: var(--cream); border: 0; border-radius: 0; }
.tool-card:fullscreen .timer-display { font-size: clamp(90px, 20vw, 250px); }
.tool-card:fullscreen .field { max-width: 280px; width: 100%; }
.group-card > strong { color: #728e61; font-size: 11px; display: block; margin-bottom: 7px; }
.community-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 21px; }
.community-grid > .post-card { margin-bottom: 0; padding: 23px; }
.community-grid > .panel + .panel { margin-top: 0; }
.post-author > div:nth-child(2) { flex: 1; min-width: 0; }
.post-author > .chip { font-size: 8px; }
.post-card > h2 { font-size: 17px; line-height: 1.5; margin-bottom: 10px; }
.post-card > .post-actions { gap: 16px; }
.post-actions button[aria-pressed="true"] { color: var(--coral); }
.post-actions button[aria-pressed="true"] svg { fill: #ca633f20; }
.post-actions > .icon-button { width: 24px; height: 24px; flex-basis: 24px; padding: 4px; }
.comment-list > div > strong { color: #7b906c; font-size: 10px; }
.comment-list > div > p { margin-top: 4px; color: #8b9e7c; font-size: 11px; line-height: 1.8; }
.settings-grid { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(320px, 1.2fr); gap: 26px; align-items: start; }
.settings-grid > .panel + .panel { margin-top: 0; }
.settings-grid h2 { margin-bottom: 20px; }
.settings-grid p + p { margin-top: 15px; }
.settings-grid .notice { margin-top: 22px; }
.settings-grid .btn { margin-top: 20px; }
.print-document > header { display: flex; justify-content: space-between; gap: 15px; padding-bottom: 13px; border-bottom: 1px solid #dce5d2; margin-bottom: 24px; }
.print-document > header span { font-size: 9pt; color: #8c9b7e; }
.print-document > footer { margin-top: 25px; border-top: 1px solid #dce5d2; padding-top: 10px; font-size: 8pt; color: #8c9b7e; }

@keyframes page-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toast-in { from { opacity: 0; bottom: 15px; } to { opacity: 1; bottom: 24px; } }


@media (min-width: 1550px) {
  .page { padding: 42px 52px 70px; }
  .topbar { padding-inline: 52px; }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; }
  .hero { min-height: 270px; padding: 37px 40px; }
  .resource-cover { height: 160px; }
}

@media (max-width: 1280px) {
  :root { --sidebar-width: 216px; }
  .sidebar { padding-inline: 13px; }
  .brand { padding-inline: 11px; }
  .brand-name { font-size: 17px; }
  .brand-icon { width: 33px; height: 33px; flex-basis: 33px; }
  .topbar { padding-inline: 29px; }
  .page { padding-inline: 29px; }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr) 265px; gap: 22px; }
  .dashboard-aside .panel { padding: 20px; }
  .hero { padding: 28px; min-height: 243px; }
  .hero h2 { font-size: 29px; }
  .hero-visual { right: 3px; width: 33%; }
  .hero-visual::before { width: 143px; height: 143px; }
  .hero-visual::after { width: 180px; height: 180px; }
  .hero-visual > svg, .hero-book { width: 143px; height: 143px; }
  .hero-copy { width: 68%; }
  .quick-stats { gap: 10px; }
  .stat { padding: 16px 14px; gap: 9px; }
  .stat-icon { flex-basis: 32px; height: 32px; border-radius: 9px; }
  .stat strong { font-size: 19px; }
  .stat small { font-size: 9px; }
  .stat strong + span { font-size: 9px; }
  .resource-grid { gap: 13px; }
  .library-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .resource-cover { height: 128px; min-height: 128px; }
  .resource-title { font-size: 13px; }
  .resource-meta, .resource-footer { padding-inline: 13px; }
  .resource-title, .resource-description { margin-inline: 13px; }
  .resource-card-body { padding-inline: 13px; }
  .resource-footer .downloads { display: none; }

  .community-grid { grid-template-columns: minmax(0, 1fr) 245px; gap: 21px; }
  .week-grid { gap: 9px; }
  .day-heading { padding-inline: 10px; }
  .plan-item { margin: 9px; padding: 10px; }
  .day-plans { padding: 9px; }
  .toast { left: calc(50% + 108px); }
}

@media (max-width: 1080px) {
  .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
  .dashboard-aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 7px; }
  .dashboard-aside .quote-panel { display: none; }
  .hero { min-height: 245px; }
  .hero-copy { width: 60%; }
  .hero-visual { width: 36%; right: 22px; }
  .hero-visual::before { width: 172px; height: 172px; }
  .hero-visual::after { width: 211px; height: 211px; }
  .hero-visual > svg, .hero-book { width: 172px; height: 172px; }
  .hero h2 { font-size: 31px; }
  .global-search { width: 245px; }
  .topbar-actions { gap: 9px; }





  .community-grid { grid-template-columns: minmax(0, 1fr); }
  .settings-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .community-aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .community-aside .panel + .panel { margin-top: 0; }
  .week-grid { min-width: 850px; }
  .planner-scroll { overflow-x: auto; padding-bottom: 15px; margin-right: -5px; overscroll-behavior-x: contain; }
  .planner-scroll::-webkit-scrollbar { height: 5px; }
  .planner-scroll::-webkit-scrollbar-thumb { background: #cddbc4; border-radius: 5px; }
  .planner-scroll::-webkit-scrollbar-track { background: #edf1e6; border-radius: 5px; }
  .page:has(.week-grid) { overflow-x: auto; }
}

@media (max-width: 800px) {
  :root { --sidebar-width: 0px; }
  .sidebar { display: none; }
  .sidebar.open { display: flex; width: 238px; box-shadow: 15px 0 70px #17362a25; }
  .workspace { margin-left: 0; padding-bottom: 63px; }
  .topbar { min-height: 66px; padding: 15px 23px; gap: 13px; }
  .topbar-title { font-size: 11px; }
  .topbar-title > span:first-child { display: none; }
  .global-search { max-width: none; width: 240px; margin-left: auto; padding-block: 9px; }
  .topbar-actions { margin-left: 0; }
  .topbar-actions .avatar { display: none; }
  .mobile-menu-button { display: grid; }
  .page { padding: 27px 23px 38px; }
  .page-footer { padding: 0 23px 25px; }
  .page-heading { margin-bottom: 23px; gap: 15px; }
  .page-subtitle { font-size: 12px; }
  .date-label { display: none; }
  .hero { padding: 28px; }
  .hero-copy { width: 63%; }
  .resource-cover { height: 145px; }
  .resource-title { font-size: 14px; }
  .resource-meta, .resource-footer { padding-inline: 16px; }
  .resource-title, .resource-description { margin-inline: 16px; }
  .resource-card-body { padding-inline: 16px; }
  .resource-card-body .resource-title, .resource-card-body .resource-description { margin-inline: 0; }
  .mobile-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-around; padding: 7px 10px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid #dee6d5; background: #fcfdf9f5; backdrop-filter: blur(12px); box-shadow: 0 -6px 30px #244c3e05; }
  .mobile-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 0; border-radius: 8px; padding: 6px 11px; background: transparent; color: #98a18e; font-size: 8px; min-width: 47px; }
  .mobile-nav button svg { width: 18px; height: 18px; }
  .mobile-nav button.active { color: var(--teal); background: #eaf1e4; }
  .mobile-nav .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 44px; min-width: 0; width: auto; flex: 1; padding: 6px 4px; border-radius: 8px; color: #98a18e; font-size: 8px; font-weight: 500; box-shadow: none; }
  .mobile-nav .nav-item > span:not(.badge) { max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-nav .nav-item svg { width: 17px; height: 17px; }
  .mobile-nav .nav-item .badge { display: none; }
  .mobile-nav .nav-item.active { background: #eaf1e4; color: var(--teal); }
  .toast { left: 50%; bottom: 83px; font-size: 11px; }
  @keyframes toast-in { from { opacity: 0; bottom: 74px; } to { opacity: 1; bottom: 83px; } }
  .tools-grid { gap: 17px; }
  .tool-card { padding: 22px; }
  .filter-bar .search-field { flex-basis: 100%; }
}

@media (max-width: 580px) {
  body { font-size: 13px; }
  .topbar { min-height: 62px; padding: 12px 18px; }
  .topbar-title { display: none; }
  .global-search { width: auto; flex: 1; max-width: none; padding-inline: 11px; }
  .global-search kbd { display: none; }
  .topbar-actions { gap: 0; }
  .topbar .global-search { flex: 1; min-width: 0; }
  .demo-badge { font-size: 8px; padding-inline: 6px; }
  .page { padding: 25px 18px 32px; }
  h1 { font-size: 26px; letter-spacing: -.7px; }
  .page-heading { align-items: flex-start; gap: 10px; }
  .page-heading > .btn { min-height: 36px; padding: 9px 11px; font-size: 10px; margin-top: 3px; }
  .page-heading > .btn svg { width: 13px; height: 13px; }
  .eyebrow { font-size: 9px; letter-spacing: 1.45px; }
  .page-subtitle { font-size: 11px; margin-top: 8px; }
  .hero { min-height: 237px; padding: 25px 23px; border-radius: 16px; }
  .hero-copy { width: 72%; }
  .hero h2 { font-size: 27px; letter-spacing: -.8px; line-height: 1.2; }
  .hero .eyebrow { font-size: 8px; letter-spacing: 1.35px; margin-bottom: 12px; }
  .hero-copy p { font-size: 10px; line-height: 1.7; max-width: 215px; }
  .hero-actions { gap: 7px; margin-top: 17px; }
  .hero-actions .btn { min-height: 34px; padding: 9px 11px; font-size: 9px; gap: 5px; }
  .hero-actions .btn svg { width: 13px; height: 13px; }
  .hero-visual { width: 34%; right: -15px; top: 29px; bottom: 30px; opacity: .8; }
  .hero-visual::before { width: 110px; height: 110px; }
  .hero-visual::after { width: 146px; height: 146px; }
  .hero-visual > svg, .hero-book { width: 122px; height: 122px; transform: rotate(-10deg); }
  .quick-stats { gap: 8px; margin: 16px 0 27px; }
  .stat { min-height: 87px; flex-direction: column; gap: 6px; align-items: flex-start; padding: 12px 13px; border-radius: 11px; }
  .stat-icon { display: none; }
  .stat strong { font-size: 23px; }
  .stat small { font-size: 8px; line-height: 1.5; margin-top: 0; }
  .stat strong + span { font-size: 8px; line-height: 1.5; margin-top: 0; }
  .quick-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stat { padding: 12px 10px; }
  .section-heading { margin-bottom: 15px; gap: 10px; }
  .section-heading h2 { font-size: 16px; letter-spacing: -.3px; }
  .section-heading a, .section-heading .text-link { font-size: 9px; }
  .resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resource-cover { height: 124px; min-height: 124px; }
  .resource-illustration { font-size: 37px; }
  .resource-illustration svg { width: 70px; height: 70px; }
  .resource-title { font-size: 12px; margin-inline: 12px; }
  .resource-description { font-size: 9px; margin-inline: 12px; }
  .resource-meta { font-size: 8px; padding: 12px 12px 0; gap: 4px; }
  .resource-card-body { padding-inline: 12px; }
  .resource-footer { font-size: 8px; padding: 12px; }
  .resource-footer .author .avatar { display: none; }
  .cover-label { left: 10px; top: 10px; font-size: 7px; }
  .save-resource { width: 25px; height: 25px; top: 7px; right: 7px; }
  .save-resource svg { width: 12px; height: 12px; }
  .dashboard-aside { grid-template-columns: minmax(0, 1fr); gap: 17px; }
  .dashboard-aside .panel { padding: 21px; }
  .today-list { gap: 13px; }
  .today-item-content { padding-bottom: 10px; }
  .chip { font-size: 8px; padding: 4px 6px; }
  .filter-bar { gap: 8px; margin-bottom: 18px; }
  .search-field { min-width: 0; padding: 11px 12px; }
  .select-field { flex: 1; min-width: 0; padding: 10px 25px 10px 10px; font-size: 10px; min-height: 40px; }
  .filter-bar .btn { min-height: 40px; padding-inline: 11px; font-size: 10px; }
  .tabs { gap: 4px; margin-bottom: 19px; }
  .tab { padding: 8px 9px; font-size: 9px; }
  .panel { padding: 21px; border-radius: 15px; }





  .form-grid { gap: 13px 11px; }
  .field label { font-size: 10px; }
  .field input, .field select, .field textarea { font-size: 11px; padding: 10px; }



  .result-section { margin-top: 20px; }
  .result-section p, .result-section ul, .result-section ol { font-size: 11px; }

  .planner-toolbar { flex-wrap: wrap; gap: 14px; }
  .planner-toolbar h2 { font-size: 14px; }
  .planner-toolbar .btn { font-size: 10px; min-height: 36px; }
  .week-switcher strong { font-size: 12px; min-width: 130px; }
  .week-grid { min-width: 850px; }
  .planner-scroll { margin-right: -18px; padding-right: 18px; }
  .tools-grid { grid-template-columns: minmax(0, 1fr); gap: 17px; }
  .tool-card { padding: 23px; border-radius: 15px; }
  .timer-display { font-size: 58px; padding-top: 12px; }
  .community-grid { gap: 20px; }
  .post-card { padding: 20px; border-radius: 14px; }
  .post-card h3 { font-size: 14px; }
  .post-card > p { font-size: 11px; }
  .post-author { gap: 9px; }
  .post-author .avatar { width: 30px; height: 30px; flex-basis: 30px; font-size: 10px; }
  .post-author strong { font-size: 11px; }
  .post-actions { gap: 12px; }
  .post-actions button { font-size: 9px; }
  .composer { padding: 16px; }
  .composer-top .avatar { width: 31px; height: 31px; flex-basis: 31px; }
  .composer-top input { font-size: 11px; padding-inline: 10px; }
  .community-aside { grid-template-columns: minmax(0, 1fr); gap: 17px; }
  .modal-overlay { padding: 14px; align-items: center; }
  .modal { max-height: calc(100dvh - 28px); border-radius: 16px; }
  .modal-header { padding: 22px 21px 17px; gap: 12px; }
  .modal-header h2 { font-size: 19px; }
  .modal-body { padding: 21px; }
  .modal-footer { padding: 16px 21px 20px; }
  .modal-footer .btn { flex: 1; font-size: 10px; }
  .hero-float { padding: 6px 8px; font-size: 7px; gap: 4px; }
  .hero-float svg { width: 11px; height: 11px; }
  .float-one { top: 1px; right: 7px; }
  .float-two { bottom: 6px; left: -3px; }
  .hero-orbit { width: 157px; height: 106px; }
  .page-footer { font-size: 8px; padding-inline: 18px; }
  .mobile-nav .nav-item { font-size: 7px; }
  .mobile-nav .nav-item > span:not(.badge) { max-width: 45px; }
  .settings-grid { grid-template-columns: minmax(0, 1fr); }
  .toast { width: max-content; max-width: calc(100vw - 28px); padding: 12px 16px; }
}

@media (max-width: 365px) {
  .page { padding-inline: 14px; }
  .hero { padding-inline: 19px; }
  .hero h2 { font-size: 24px; }
  .hero-copy { width: 75%; }
  .hero-visual { opacity: .6; right: -23px; }
  .hero-actions .btn { padding-inline: 8px; }
  .resource-grid { gap: 9px; }
  .resource-title { font-size: 11px; }
  .resource-description { display: none; }
  .mobile-nav button { padding-inline: 7px; min-width: 40px; }
}

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

/* Mobile app presentation at every screen size. A desktop preview is a
   centered phone-sized workspace, and a phone uses its full available width. */
@media screen {
  html { background: #e9eee3; }
  body { background: #e9eee3; font-size: 13px; }
  .app-shell { position: relative; width: 100%; max-width: 480px; min-height: 100dvh; margin: 0 auto; background: var(--cream); box-shadow: 0 0 70px #28432d0c; }
  .sidebar, .sidebar.open { display: none !important; }
  .workspace { width: 100%; min-height: 100dvh; margin-left: 0; padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .topbar { position: sticky; top: 0; z-index: 30; min-height: 74px; padding: 16px 20px; gap: 14px; background: #faf9f4f5; backdrop-filter: blur(12px); border-bottom: 1px solid #e7eadf; }
  .topbar-title, .topbar .global-search, .mobile-menu-button { display: none !important; }
  .topbar-brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--ink); font-size: 19px; font-weight: 740; letter-spacing: -.5px; line-height: 1.15; }
  .topbar-brand img, .topbar-brand .brand-icon { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px; object-fit: contain; }
  .topbar-brand strong { display: block; font-size: 18px; font-weight: 740; letter-spacing: -.5px; }
  .topbar-subtitle { display: block; margin-top: 4px; font-size: 9px; font-weight: 400; color: #99a58f; letter-spacing: .1px; }
  .topbar-actions { flex: 0 0 auto; margin-left: auto; gap: 10px; }
  .topbar-actions .avatar { display: grid; width: 29px; height: 29px; flex-basis: 29px; font-size: 11px; background: #e7d1bb; }
  .demo-badge { padding: 5px 7px; font-size: 8px; border-radius: 5px; color: #8da17a; }
  .page { width: 100%; max-width: 480px; padding: 25px 20px 32px; overflow-x: visible; }
  .page:has(.week-grid) { overflow-x: visible; }
  .page-heading { display: flex; gap: 13px; margin-bottom: 23px; }
  .page-heading h1 { font-size: 27px; line-height: 1.2; letter-spacing: -.8px; font-weight: 680; }
  .eyebrow { font-size: 8px; letter-spacing: 1.4px; margin-bottom: 9px; }
  .page-subtitle { margin-top: 9px; font-size: 11px; line-height: 1.8; max-width: 340px; }
  .page-heading > .btn { margin-top: 2px; min-height: 34px; padding: 9px 11px; font-size: 10px; flex: 0 0 auto; }
  .page-heading > .btn svg { width: 13px; height: 13px; }
  .section-heading { margin-bottom: 17px; align-items: center; gap: 12px; }
  .section-heading h2 { font-size: 17px; letter-spacing: -.3px; }
  .section-heading p { font-size: 10px; line-height: 1.6; margin-top: 6px; }
  .section-heading .text-link { font-size: 9px; }
  .hero { display: block; min-height: 257px; padding: 25px 23px 22px; border-radius: 18px; background: #e7eddd; }
  .hero-copy { width: 100%; max-width: none; }
  .hero .badge { margin-bottom: 16px; padding: 5px 7px; font-size: 7px; font-weight: 500; letter-spacing: .15px; }
  .hero h2 { max-width: 300px; font-size: 27px; line-height: 1.23; letter-spacing: -.85px; }
  .hero-copy p { position: relative; z-index: 2; max-width: 237px; margin-top: 15px; color: #819175; font-size: 10px; line-height: 1.8; }
  .hero-actions { position: relative; z-index: 5; gap: 8px; margin-top: 22px; flex-wrap: nowrap; }
  .hero-actions .btn { min-height: 36px; padding: 10px 12px; border-radius: 8px; font-size: 9px; gap: 6px; }
  .hero-actions .btn svg { width: 13px; height: 13px; }
  .hero-visual { display: grid; width: 110px; height: 115px; left: auto; right: 3px; top: auto; bottom: 42px; opacity: .82; }
  .hero-visual::before { width: 96px; height: 96px; background: #c9dbba; }
  .hero-visual::after { width: 124px; height: 124px; border-color: #a9c59685; }
  .hero-book, .hero-visual > svg { width: 94px; height: 94px; transform: rotate(-9deg); }
  .hero-orbit, .hero-float { display: none; }
  .quick-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin: 19px 0 28px; }
  .stat { display: flex; flex-direction: row; align-items: center; min-height: 78px; padding: 15px 14px; gap: 12px; border-radius: 13px; }
  .stat-icon { display: grid; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; }
  .stat-icon svg { width: 17px; height: 17px; }
  .stat strong { font-size: 23px; font-weight: 630; }
  .stat strong + span, .stat small { margin-top: 5px; font-size: 8px; line-height: 1.4; }
  .dashboard-grid { display: block; }
  .dashboard-aside { display: grid; grid-template-columns: minmax(0, 1fr); gap: 17px; margin-top: 25px; }
  .dashboard-aside .quote-panel { display: block; }
  .dashboard-aside .panel { padding: 22px; }
  .dashboard-aside .quote-panel p { font-size: 19px; }
  .resource-grid, .library-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 13px; }
  .resource-card { display: grid; grid-template-columns: 110px minmax(0, 1fr); border-radius: 14px; }
  .resource-card:hover { transform: none; }
  .resource-cover { height: 100%; min-height: 163px; border-radius: 0; }
  .resource-cover::before { width: 96px; height: 96px; right: -38px; top: -29px; }
  .resource-cover::after { width: 100px; height: 100px; left: -52px; bottom: -35px; }
  .resource-illustration, .resource-illustration svg { width: 57px; height: 57px; font-size: 34px; }
  .resource-cover > .chip { left: 8px; top: 9px; padding: 4px 5px; max-width: 94px; overflow: hidden; font-size: 6px; letter-spacing: 0; }
  .favorite-button { top: auto; right: auto; bottom: 9px; left: 8px; width: 24px; height: 24px; }
  .favorite-button svg { width: 12px; height: 12px; }
  .resource-card-body { min-width: 0; padding: 15px 15px 10px; }
  .resource-card-body .resource-meta { font-size: 8px; line-height: 1.4; padding: 0; }
  .resource-card-body .resource-title { margin: 8px 0 0; font-size: 13px; line-height: 1.45; letter-spacing: -.15px; }
  .resource-card-body .resource-description { display: block; margin: 6px 0 0; font-size: 9px; line-height: 1.7; color: #8c9a80; }
  .resource-card-body .resource-footer { padding: 10px 0 0; font-size: 8px; gap: 5px; }
  .resource-footer > .icon-button { width: 24px; height: 24px; }
  .resource-footer > .icon-button svg { width: 13px; height: 13px; }
  .filter-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 9px; margin-bottom: 23px; }
  .filter-bar .search-field { grid-column: 1 / -1; min-width: 0; padding: 12px 13px; }
  .filter-bar .select-field { width: 100%; min-width: 0; min-height: 40px; padding: 10px 25px 10px 11px; font-size: 10px; }
  .filter-bar > .btn { min-height: 40px; padding: 10px; font-size: 10px; background: #eef3e6; }
  .tabs { gap: 5px; }
  .tab { padding: 9px 10px; font-size: 10px; }
  .panel { padding: 22px; border-radius: 16px; }
  .notice { padding: 13px 14px; font-size: 9px; gap: 8px; line-height: 1.8; }
  .notice svg { width: 15px; height: 15px; }
  .page > .notice + .community-grid { margin-top: 21px; }




  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 12px; }
  .field { gap: 7px; }
  .field label { font-size: 10px; line-height: 1.5; }
  .field input, .field select, .field textarea { min-height: 42px; padding: 11px 10px; font-size: 12px; line-height: 1.5; }
  .field textarea { min-height: 100px; }
  .field textarea[rows="2"] { min-height: 79px; }
  .field.full-width { grid-column: 1 / -1; }







  .result-section { margin-top: 23px; }
  .result-section h3 { font-size: 13px; }
  .result-section p, .result-section li { font-size: 11px; line-height: 1.9; }









  .planner-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 15px; margin-bottom: 21px; }
  .planner-toolbar > .inline-actions { width: 100%; justify-content: space-between; gap: 4px; }
  .planner-toolbar h2 { font-size: 14px; letter-spacing: -.3px; flex: 1; text-align: center; }
  .planner-toolbar .btn { font-size: 9px; min-height: 34px; padding: 9px 10px; }
  .planner-toolbar > .btn { width: 100%; background: #f0f4e9; border-color: #dee8d5; }
  .planner-toolbar .icon-button { width: 28px; height: 28px; }
  .planner-scroll { overflow: visible; margin: 0; padding: 0; }
  .week-grid { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 12px; }
  .day-column { display: grid; grid-template-columns: 73px minmax(0, 1fr); min-height: 104px; min-width: 0; border-radius: 14px; overflow: hidden; }
  .day-heading { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; min-height: 0; gap: 6px; padding: 18px 12px; border-bottom: 0; border-right: 1px solid #e8eddf; background: #f8faf3; }
  .day-heading > span { font-size: 8px; color: #9aa78e; line-height: 1.4; }
  .day-heading > strong { font-size: 25px; font-weight: 550; line-height: 1; }
  .day-heading > small { font-size: 7px; padding: 3px 4px; background: #dfeecf; border-radius: 4px; }
  .day-column.is-today .day-heading { background: #edf4e5; border-right-color: #dce9d0; }
  .day-plans { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 13px; }
  .plan-item, .day-plans .plan-item { width: 100%; margin: 0; padding: 13px; border-radius: 9px; }
  .plan-item h3 { font-size: 12px; line-height: 1.5; }
  .plan-item p { font-size: 9px; line-height: 1.8; }
  .plan-time { margin-bottom: 7px; font-size: 9px; }
  .plan-actions { margin-top: 8px; justify-content: flex-end; gap: 5px; }
  .plan-actions .icon-button { width: 26px; height: 26px; }
  .day-plans .day-add { width: 100%; min-height: 40px; padding: 10px; margin: 0; font-size: 10px; border-radius: 8px; }
  .day-plans:has(> .day-add:only-child) { justify-content: center; }
  .planner-scroll + .notice { margin-top: 20px; }
  .tools-grid, .community-grid, .settings-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .tool-card { padding: 24px; border-radius: 16px; }
  .tool-card > h2 { font-size: 19px; }
  .tool-card > p { font-size: 11px; line-height: 1.8; }
  .tool-symbol { width: 40px; height: 40px; border-radius: 12px; margin-bottom: 16px; }
  .timer-display { padding: 22px 0 25px; font-size: 68px; font-weight: 350; letter-spacing: -3px; }
  .tool-card > .inline-actions { margin-top: 22px; gap: 8px; flex-wrap: wrap; }
  .tool-card > .inline-actions .btn { font-size: 10px; padding: 11px 13px; min-height: 40px; }
  .tool-card > .inline-actions .btn.ghost { flex-basis: 100%; }
  .tool-card #groups-form { margin-top: 27px; }
  .tool-card #groups-form > .btn { width: 100%; min-height: 44px; font-size: 11px; }
  .group-grid { gap: 10px; }
  .group-card { padding: 13px; }
  .group-card > strong { font-size: 11px; }
  .group-card p { font-size: 11px; line-height: 1.8; }
  .community-grid > .post-card { padding: 22px; border-radius: 15px; }
  .post-author { gap: 9px; margin-bottom: 18px; }
  .post-author .avatar { width: 32px; height: 32px; flex-basis: 32px; font-size: 10px; }
  .post-author strong { font-size: 11px; }
  .post-author small { font-size: 8px; line-height: 1.5; }
  .post-author > .chip { font-size: 7px; }
  .post-card > h2 { font-size: 17px; line-height: 1.5; }
  .post-card > p { font-size: 11px; line-height: 1.9; }
  .post-card > .post-actions { gap: 14px; padding-top: 17px; margin-top: 19px; }
  .post-actions button { font-size: 9px; }
  .comment-list { padding: 14px; gap: 14px; }
  .settings-grid > .panel { padding: 23px; }
  .settings-grid h2 { font-size: 18px; margin-bottom: 22px; }
  .settings-grid p { font-size: 11px; line-height: 1.9; }
  #profile-form > .btn { width: 100%; margin-top: 23px; min-height: 44px; }
  .more-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 13px; }
  .more-item { display: flex; align-items: center; gap: 14px; min-height: 86px; padding: 19px 20px; border: 1px solid #e3e9da; border-radius: 15px; background: #fff; color: var(--ink); transition: border-color .16s, background .16s; text-align: left; }
  .more-item:hover { border-color: #cbdbc1; background: #fcfef8; color: var(--ink); }
  .more-item > svg:first-child { width: 24px; height: 24px; color: #7f9d6d; }
  .more-item > .more-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; background: #ecf2e4; border-radius: 12px; color: #7a9b66; }
  .more-item:nth-child(2) > .more-icon { background: #f5ebdd; color: #b59766; }
  .more-item:nth-child(3) > .more-icon { background: #efe8f4; color: #a08ab2; }
  .more-item > div, .more-item > span:not(.more-icon) { flex: 1; min-width: 0; }
  .more-item strong, .more-item h3 { display: block; font-size: 14px; line-height: 1.4; font-weight: 630; }
  .more-item small, .more-item p { display: block; font-size: 10px; color: #96a28c; margin-top: 5px; line-height: 1.6; }
  .more-item > svg:last-child:not(:first-child) { width: 16px; height: 16px; color: #a7b89a; }
  .about-hero { padding: 32px 23px 29px; text-align: center; background: #e9eedf; border: 1px solid #e0e8d3; border-radius: 18px; margin-bottom: 22px; }
  .about-logo { width: 80px; height: 80px; object-fit: contain; margin: 0 auto 23px; }
  .about-hero .eyebrow { color: #99a889; font-size: 8px; margin-bottom: 11px; }
  .about-hero h2, .about-hero h1 { font-size: 25px; line-height: 1.35; letter-spacing: -.7px; }
  .about-hero p { max-width: 290px; margin: 13px auto 0; color: #8b9b7b; font-size: 11px; line-height: 1.8; }
  .about-story { padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: 16px; margin-bottom: 20px; }
  .about-story h2, .about-story h3 { font-size: 18px; letter-spacing: -.35px; margin-bottom: 15px; }
  .about-story p { font-size: 12px; line-height: 1.95; color: #819174; }
  .about-story p + p { margin-top: 17px; }
  .about-story strong { color: #57784b; font-weight: 600; }
  .about-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 20px 0; }
  .about-values > div, .about-values > article, .about-values > section { padding: 19px; border: 1px solid #e1e8d8; border-radius: 13px; background: #f1f5e9; }
  .about-values > :nth-child(2) { background: #f7eddf; border-color: #ecdfc8; }
  .about-values svg { width: 20px; height: 20px; color: #8bab75; margin-bottom: 13px; }
  .about-values > :nth-child(2) svg { color: #b89868; }
  .about-values h3, .about-values strong { display: block; font-size: 12px; margin-bottom: 7px; }
  .about-values p { color: #92a183; font-size: 10px; line-height: 1.8; }
  .page-footer { width: 100%; max-width: 480px; padding: 0 20px 24px; font-size: 8px; line-height: 1.8; color: #b1b9a6; }
  .page-footer span { margin-inline: 5px; }
  .mobile-nav { position: fixed; z-index: 50; left: 50%; right: auto; bottom: 0; transform: translateX(-50%); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch; justify-content: initial; width: 100%; max-width: 480px; min-height: 72px; padding: 7px 8px calc(8px + env(safe-area-inset-bottom)); background: #fbfcf7f5; border-top: 1px solid #dfe7d4; box-shadow: 0 -8px 22px #3d5c3005; backdrop-filter: blur(13px); }
  .mobile-nav .nav-item, .mobile-nav button, .mobile-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: auto; min-width: 0; min-height: 49px; margin: 0 3px; padding: 7px 3px; flex: initial; border: 0; border-radius: 10px; background: transparent; color: #a0ad95; font-size: 9px; font-weight: 500; line-height: 1.2; box-shadow: none; text-align: center; }
  .mobile-nav .nav-item > span:not(.badge), .mobile-nav a > span:not(.badge), .mobile-nav button > span:not(.badge) { max-width: none; overflow: visible; text-overflow: clip; white-space: nowrap; font-size: 9px; }
  .mobile-nav .nav-item svg, .mobile-nav button svg, .mobile-nav a svg { width: 19px; height: 19px; opacity: 1; stroke-width: 1.7; }
  .mobile-nav .badge { display: none; }
  .mobile-nav .nav-item.active, .mobile-nav button.active, .mobile-nav a.active { background: #e7efe0; color: var(--teal); box-shadow: none; }
  .modal-overlay { padding: 14px; align-items: center; backdrop-filter: blur(4px); }
  .modal, .modal.wide { width: min(100%, 444px); max-height: calc(100dvh - 28px); border-radius: 18px; }
  .modal-header { padding: 23px 23px 19px; gap: 13px; }
  .modal-header h2 { font-size: 20px; line-height: 1.35; }
  .modal-body { padding: 23px; }
  .modal-body p, .modal-body li { font-size: 11px; line-height: 1.85; }
  .modal-footer { padding: 17px 23px 23px; gap: 9px; }
  .modal-footer .btn { flex: 1; min-height: 42px; padding-inline: 10px; font-size: 10px; }
  .toast { bottom: calc(91px + env(safe-area-inset-bottom)); left: 50%; max-width: min(428px, calc(100vw - 32px)); padding: 13px 17px; border-radius: 11px; font-size: 11px; line-height: 1.6; }
  .empty-state { min-height: 235px; padding: 26px; }
  .empty-state p { font-size: 11px; }
  @keyframes toast-in { from { opacity: 0; margin-bottom: -7px; } to { opacity: 1; margin-bottom: 0; } }
}

@media screen and (max-width: 370px) {
  .topbar { padding-inline: 16px; }
  .topbar-brand { gap: 8px; }
  .topbar-brand strong { font-size: 17px; }
  .topbar-brand img { width: 31px; height: 31px; flex-basis: 31px; }
  .demo-badge { display: none; }
  .page { padding-inline: 16px; }
  .page-heading h1 { font-size: 25px; }
  .hero { padding-inline: 20px; }
  .hero h2 { font-size: 25px; }
  .hero-copy p { max-width: 207px; font-size: 9px; }
  .hero-visual { right: -10px; width: 91px; opacity: .62; }
  .hero-book { width: 79px; height: 79px; }
  .hero-actions { gap: 6px; }
  .hero-actions .btn { font-size: 8px; padding-inline: 10px; }
  .stat { padding-inline: 11px; gap: 9px; }
  .stat-icon { width: 28px; height: 28px; flex-basis: 28px; }
  .stat strong + span { font-size: 7px; }
  .resource-card { grid-template-columns: 96px minmax(0, 1fr); }
  .resource-card-body { padding-inline: 13px; }
  .resource-card-body .resource-title { font-size: 12px; }
  .resource-cover > .chip { max-width: 83px; }
  .mobile-nav .nav-item > span:not(.badge), .mobile-nav a > span:not(.badge), .mobile-nav button > span:not(.badge) { font-size: 8px; }
  .panel { padding: 20px; }

  .planner-toolbar h2 { font-size: 12px; }
  .day-column { grid-template-columns: 65px minmax(0, 1fr); }
  .day-heading { padding-inline: 10px; }
  .about-values > div, .about-values > article, .about-values > section { padding: 15px; }
}

/* Final mobile reading and touch scale; kept after compact-screen rules. */
@media screen {
  body { font-size: 14px; }
  .topbar-brand, .topbar-brand strong { font-size: 18px; }
  .topbar-subtitle { font-size: 10px; color: #687960; }
  .demo-badge { font-size: 10px; color: #627955; }
  .topbar-actions .avatar { width: 44px; height: 44px; flex-basis: 44px; font-size: 14px; }
  .page-heading h1 { font-size: 27px; }
  .eyebrow, .hero .eyebrow, .about-hero .eyebrow { font-size: 10px; color: #617958; letter-spacing: 1.25px; }
  .page-subtitle { font-size: 14px; line-height: 1.7; color: #65735f; }
  .section-heading p, .section-heading .text-link, .section-heading a, .text-link { font-size: 12px; color: #617958; }
  .section-heading .text-link { min-height: 40px; }
  .btn, .btn.small, .page-heading > .btn, .filter-bar > .btn, .tool-card > .inline-actions .btn, .tool-card #groups-form > .btn, .settings-grid .btn, #profile-form > .btn, .planner-toolbar .btn, .modal-footer .btn { min-height: 44px; padding: 11px 14px; font-size: 14px; line-height: 1.25; }
  .btn svg, .btn.small svg, .page-heading > .btn svg, .hero-actions .btn svg { width: 18px; height: 18px; }
  .icon-button, .plan-actions .icon-button, .resource-footer > .icon-button, .planner-toolbar .icon-button, .post-actions > .icon-button { width: 44px; height: 44px; min-width: 44px; min-height: 44px; flex: 0 0 44px; }
  .icon-button svg, .plan-actions .icon-button svg, .resource-footer > .icon-button svg { width: 19px; height: 19px; }
  .badge, .chip, .post-author > .chip { font-size: 11px; line-height: 1.5; }
  .hero { min-height: 0; padding: 24px 23px; }
  .hero .badge { font-size: 10px; white-space: normal; margin-bottom: 17px; color: #657c5a; }
  .hero h2 { max-width: 305px; font-size: 26px; line-height: 1.25; }
  .hero-copy p { max-width: 225px; font-size: 13px; line-height: 1.75; color: #65785a; }
  .hero-visual { width: 74px; height: 79px; right: 4px; top: 128px; bottom: auto; opacity: .76; }
  .hero-visual::before { width: 69px; height: 69px; }
  .hero-visual::after { width: 88px; height: 88px; }
  .hero-book, .hero-visual > svg { width: 68px; height: 68px; }
  .hero-actions { margin-top: 22px; gap: 9px; flex-wrap: wrap; }
  .hero-actions .btn { flex: 1 0 100%; min-height: 44px; padding: 12px 14px; font-size: 14px; }
  .stat { gap: 10px; padding: 16px 12px; min-height: 85px; }
  .stat-icon { width: 30px; height: 30px; flex-basis: 30px; }
  .stat strong { font-size: 22px; }
  .stat strong + span, .stat small { font-size: 11px; line-height: 1.45; margin-top: 5px; color: #65735f; }
  .resource-card { grid-template-columns: 108px minmax(0, 1fr); }
  .resource-card-body { padding: 17px 16px 12px; }
  .resource-card-body .resource-title { font-size: 16px; line-height: 1.45; margin-top: 9px; }
  .resource-card-body .resource-description { font-size: 13px; line-height: 1.7; margin-top: 8px; color: #65735f; }
  .resource-card-body .resource-meta { font-size: 12px; line-height: 1.5; color: #68795f; }
  .resource-card-body .resource-footer { font-size: 12px; line-height: 1.5; color: #65735f; padding-top: 12px; }
  .resource-cover > .chip { max-width: 94px; font-size: 10px; line-height: 1.4; white-space: normal; padding: 5px 6px; color: #5e714f; }
  .theme-coral > .chip { color: #87533d; }
  .theme-lavender > .chip { color: #716080; }
  .favorite-button { width: 44px; height: 44px; left: 10px; bottom: 12px; }
  .favorite-button svg { width: 19px; height: 19px; }
  .filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search-field input, .global-search input, .filter-bar .select-field, .select-field, .field input, .field select, .field textarea, .comment-form input, .composer-top input { min-height: 44px; font-size: 16px; line-height: 1.5; color: var(--ink); }
  .field label { font-size: 13px; line-height: 1.5; color: #5b7351; }
  .field label span, .field small { color: #65735f; font-size: 12px; }
  .field input::placeholder, .field textarea::placeholder, .search-field input::placeholder { color: #74826b; }
  .search-field { padding-block: 3px !important; }
  .search-field svg { width: 20px; height: 20px; color: #718969; }
  .filter-bar .select-field { padding: 10px 23px 10px 10px; }
  .tab { font-size: 13px; min-height: 44px; padding: 11px 13px; color: #66775b; }
  .notice { font-size: 13px; line-height: 1.75; color: #65735f; padding: 15px; }
  .notice strong { color: #546e47; }
  .notice svg { width: 18px; height: 18px; margin-top: 2px; }
  .muted, .panel > p, .dashboard-aside .panel > p, .today-item-content small { font-size: 13px; color: #65735f; }
  .today-item > span:first-child { min-width: 42px; font-size: 12px; color: #65735f; }
  .today-item strong { font-size: 14px; line-height: 1.5; }
  .dashboard-aside .quote-panel .eyebrow { font-size: 10px; color: #81714f; }
  .dashboard-aside .quote-panel .muted { font-size: 13px; color: #80724f; }
  .result-section p, .result-section ul, .result-section ol, .result-section li { font-size: 13px; line-height: 1.85; color: #65735f; }
  .result-section h3 { font-size: 15px; margin-bottom: 11px; }
  .result-section summary { min-height: 40px; font-size: 13px; color: #617b54; }




  .form-error, .form-error:not(:empty) { font-size: 13px; }
  .planner-toolbar > .inline-actions { flex-wrap: wrap; }
  .planner-toolbar h2 { font-size: 14px; flex: 1; }
  .planner-toolbar > .inline-actions > .btn { flex-basis: 100%; }
  .day-column { grid-template-columns: 77px minmax(0, 1fr); }
  .day-heading { padding-inline: 12px; }
  .day-heading > span { font-size: 11px; color: #65735f; overflow-wrap: anywhere; }
  .day-heading > strong { font-size: 26px; }
  .day-heading > small { font-size: 10px; color: #547843; }
  .day-plans .day-add { min-height: 44px; font-size: 13px; color: #647b55; }
  .plan-item h3 { font-size: 15px; line-height: 1.5; }
  .plan-item p { font-size: 13px; line-height: 1.75; color: #65735f; }
  .plan-time, .plan-time span { font-size: 12px; line-height: 1.5; color: #637a55; }
  .plan-actions { flex-wrap: wrap; }
  .tool-card > p, .tool-card #groups-form .muted { font-size: 13px; color: #65735f; }
  .group-card > strong { font-size: 13px; }
  .group-card p { font-size: 13px; color: #65735f; }
  .post-author strong { font-size: 13px; }
  .post-author small { font-size: 12px; color: #65735f; }
  .post-card > h2 { font-size: 18px; }
  .post-card > p, .comment-list > div > p { font-size: 13px; line-height: 1.85; color: #65735f; }
  .post-actions button { min-height: 44px; font-size: 12px; line-height: 1.5; color: #647c55; }
  .post-actions button svg { width: 18px; height: 18px; }
  .post-card > .post-actions { flex-wrap: wrap; gap: 10px; }
  .comment-list > div > strong { font-size: 13px; }
  .settings-grid p { font-size: 13px; line-height: 1.85; color: #65735f; }
  .more-item { min-height: 97px; }
  .more-item strong, .more-item h3 { font-size: 16px; }
  .more-item small, .more-item p { font-size: 13px; line-height: 1.65; color: #65735f; }
  .about-hero p, .about-story p { font-size: 14px; line-height: 1.85; color: #65735f; }
  .about-story h2 { font-size: 20px; }
  .about-values h3, .about-values strong { font-size: 15px; }
  .about-values p { font-size: 13px; line-height: 1.75; color: #65735f; }
  .about-values > :last-child { grid-column: 1 / -1; }
  .about-signoff { margin-top: 22px; text-align: center; color: #687a5d; font-size: 13px; line-height: 1.7; }
  .back-link { display: flex; align-items: center; gap: 5px; min-height: 40px; margin: 18px 20px -7px; font-size: 12px; color: #617b54; }
  .back-link svg { width: 16px; height: 16px; }
  .mobile-nav { min-height: 78px; padding-top: 7px; }
  .mobile-nav .nav-item, .mobile-nav a, .mobile-nav button { min-height: 52px; gap: 6px; padding-block: 8px; font-size: 11px; color: #64755a; }
  .mobile-nav .nav-item > span:not(.badge), .mobile-nav a > span:not(.badge), .mobile-nav button > span:not(.badge) { font-size: 11px; }
  .mobile-nav .nav-item svg, .mobile-nav a svg, .mobile-nav button svg { width: 21px; height: 21px; }
  .mobile-nav .nav-item.active, .mobile-nav a.active, .mobile-nav button.active { color: #176e65; }
  .page-footer { font-size: 11px; color: #6c7b62; }
  .modal-header h2 { font-size: 21px; }
  .modal-body p, .modal-body li, .modal-body > .resource-meta { font-size: 13px; line-height: 1.85; color: #65735f; }
  .modal-body h3 { font-size: 15px; }
  .modal-body > .tag-list .chip { font-size: 12px; }
  .modal-footer { flex-wrap: wrap; }
  .modal-footer .btn { white-space: normal; }
  .toast { font-size: 13px; }
  .empty-state h3 { font-size: 17px; }
  .empty-state p { font-size: 13px; line-height: 1.8; color: #65735f; }
}

@media screen and (max-width: 370px) {
  .hero-copy p { max-width: 200px; }
  .hero-visual { top: 143px; right: -2px; }
  .resource-card { grid-template-columns: 94px minmax(0, 1fr); }
  .resource-card-body { padding-inline: 13px; }
  .resource-cover > .chip { max-width: 81px; }
  .stat { gap: 8px; padding-inline: 11px; }
  .stat-icon { width: 27px; height: 27px; flex-basis: 27px; }
  .mobile-nav .nav-item > span:not(.badge), .mobile-nav a > span:not(.badge), .mobile-nav button > span:not(.badge) { font-size: 10px; }
  .page-heading { flex-wrap: wrap; }
  .page-heading > .btn { width: 100%; }
}

/* Membership exploration, presented with the same mobile reading scale. */
@media screen {
  .pricing-intro { margin-bottom: 23px; }
  .pricing-intro h2 { font-size: 22px; line-height: 1.35; letter-spacing: -.5px; margin-bottom: 11px; }
  .pricing-intro p { font-size: 14px; line-height: 1.8; color: #65735f; }
  .trial-banner { display: flex; align-items: flex-start; gap: 12px; padding: 20px; margin: 20px 0 25px; border: 1px solid #cbdcbd; border-radius: 15px; background: #edf4e6; }
  .trial-banner > svg { width: 23px; height: 23px; flex: 0 0 23px; margin-top: 2px; color: #6d9658; }
  .trial-banner h2, .trial-banner h3, .trial-banner strong { display: block; font-size: 16px; line-height: 1.45; font-weight: 630; color: #345d35; margin-bottom: 7px; }
  .trial-banner p { color: #65765a; font-size: 14px; line-height: 1.75; }
  .billing-switch { display: flex; align-items: stretch; gap: 5px; padding: 5px; margin: 0 0 23px; border: 1px solid #dde6d3; border-radius: 12px; background: #edf2e5; }
  .billing-switch button { flex: 1; min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 11px 12px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #65775a; font-size: 14px; font-weight: 550; line-height: 1.4; text-align: center; }
  .billing-switch button.active { background: #fff; border-color: #d6e1ca; color: var(--teal); box-shadow: 0 2px 6px #2e4f2910; }
  .billing-switch button svg { width: 18px; height: 18px; }
  .billing-switch button small, .billing-switch button .badge { font-size: 11px; color: #66894f; }
  .plan-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
  .pricing-card, .pricing-card.panel { position: relative; min-width: 0; margin: 0; padding: 25px; border: 1px solid #e0e7d6; border-radius: 18px; background: #fff; box-shadow: 0 7px 20px #253d2604; }
  .plan-grid > .panel + .panel { margin-top: 0; }
  .pricing-card.featured { border: 2px solid #74a987; padding: 24px; background: #fcfef8; box-shadow: 0 9px 25px #4168370b; }
  .pricing-card > h2, .pricing-card > h3 { font-size: 21px; line-height: 1.35; letter-spacing: -.4px; margin-bottom: 8px; }
  .pricing-card > p { font-size: 14px; line-height: 1.75; color: #65735f; }
  .plan-label { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; padding: 5px 9px; border: 1px solid #dce6d2; border-radius: 6px; background: #edf3e6; color: #607c4f; font-size: 11px; font-weight: 550; line-height: 1.4; }
  .pricing-card.featured .plan-label { background: #e2f0df; color: #4e7850; border-color: #c8dfbe; }
  .plan-label svg { width: 14px; height: 14px; }
  .plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; margin: 20px 0 8px; }
  .plan-price strong { font-size: 36px; line-height: 1.2; letter-spacing: -1px; font-weight: 640; color: var(--ink); }
  .plan-price > span { font-size: 14px; line-height: 1.5; color: #65735f; }
  .plan-price small { font-size: 13px; color: #65735f; line-height: 1.6; }
  .plan-price + p, .pricing-card .plan-note { font-size: 13px; line-height: 1.75; color: #6b7d60; margin-top: 8px; }
  .plan-features { display: grid; gap: 14px; margin: 23px 0 25px; padding: 21px 0 0; border-top: 1px solid #e4ebda; list-style: none; }
  .plan-features li { display: flex; align-items: flex-start; gap: 10px; padding: 0; color: #586f4e; font-size: 14px; line-height: 1.6; }
  .plan-features li svg { width: 19px; height: 19px; flex: 0 0 19px; margin-top: 2px; color: #80a569; stroke-width: 2; }
  .pricing-card.featured .plan-features li svg { color: #4c9466; }
  .pricing-card .btn { width: 100%; min-height: 46px; padding: 12px 15px; font-size: 14px; white-space: normal; line-height: 1.4; }
  .pricing-card .btn + p { font-size: 13px; color: #65735f; line-height: 1.75; margin-top: 15px; }
  .plan-summary { margin-top: 21px; padding: 20px; border: 1px solid #e2e8d9; border-radius: 14px; background: #f2f5eb; }
  .plan-summary p, p.plan-summary { font-size: 14px; line-height: 1.8; color: #65735f; }
  .plan-summary strong { font-size: 14px; color: #526d45; }
  .plan-summary svg { width: 20px; height: 20px; color: #83a36c; }
  .pricing-faq { margin-top: 30px; }
  .pricing-faq > h2 { font-size: 20px; letter-spacing: -.35px; margin-bottom: 17px; }
  .pricing-faq details { margin-top: 12px; border: 1px solid #e0e7d6; border-radius: 13px; background: #fff; overflow: hidden; }
  .pricing-faq summary { min-height: 52px; padding: 17px 19px; color: #45633b; font-size: 14px; font-weight: 600; line-height: 1.5; cursor: pointer; }
  .pricing-faq summary::marker { color: #8aaa76; }
  .pricing-faq details[open] summary { border-bottom: 1px solid #edf1e5; margin-bottom: 14px; }
  .pricing-faq details p, .pricing-faq details > div { padding: 0 19px 19px; color: #65735f; font-size: 14px; line-height: 1.8; }
  .pricing-faq details p + p { padding-top: 0; margin-top: -5px; }
  .membership-banner { display: flex; align-items: center; gap: 12px; margin: 18px 0 24px; padding: 18px; border: 1px solid #d6e4ca; border-radius: 14px; background: #f0f5e9; color: #41613a; }
  .membership-banner:hover { color: #34532c; border-color: #bfd6ad; background: #edf4e4; }
  .membership-banner > svg { width: 22px; height: 22px; flex: 0 0 22px; color: #83a46e; }
  .membership-banner > div, .membership-banner > span { flex: 1; min-width: 0; }
  .membership-banner strong { display: block; font-size: 14px; line-height: 1.5; font-weight: 630; }
  .membership-banner p, .membership-banner small { display: block; margin-top: 4px; color: #65735f; font-size: 13px; line-height: 1.65; }
  .membership-banner > svg:last-child:not(:first-child) { width: 18px; height: 18px; flex-basis: 18px; }
  .subscription-status, .subscription-status.panel { padding: 23px; border-radius: 16px; border: 1px solid #d6e3ca; background: #f1f6e9; }
  .subscription-status h2 { font-size: 19px; line-height: 1.4; margin-bottom: 13px; }
  .subscription-status h3 { font-size: 16px; margin-bottom: 10px; }
  .subscription-status p { font-size: 14px; line-height: 1.8; color: #65735f; }
  .subscription-status p + p { margin-top: 14px; }
  .subscription-status .inline-actions { margin-top: 22px; }
  .subscription-status .btn { width: 100%; min-height: 44px; font-size: 14px; white-space: normal; }
  .subscription-status > svg { width: 23px; height: 23px; color: #7c9e68; margin-bottom: 15px; }
}




/* Quieter membership entry points and progressively disclosed guidance. */
@media screen {
  .topbar { gap: 10px; }
  .topbar-actions { gap: 8px; }
  .membership-link { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; gap: 6px; min-height: 44px; padding: 10px; border: 1px solid #d2e3cf; border-radius: 10px; background: #edf4e7; color: #176e65; font-size: 13px; font-weight: 600; line-height: 1.4; white-space: nowrap; }
  .membership-link:hover { color: #12574f; background: #e5efde; border-color: #b8d3b3; }
  .membership-link svg { width: 17px; height: 17px; }
  .membership-teaser { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 18px 0 24px; padding: 20px; border: 1px solid #d4e3cb; border-radius: 15px; background: #edf4e5; color: var(--ink); }
  .membership-teaser:hover { color: var(--ink); background: #e8f0df; border-color: #bfd7b5; }
  .membership-teaser-copy { min-width: 0; flex: 1; }
  .membership-teaser-copy strong { display: block; color: #315d42; font-size: 16px; font-weight: 620; line-height: 1.5; letter-spacing: -.15px; }
  .membership-teaser-copy p { margin-top: 7px; color: #617458; font-size: 14px; line-height: 1.65; }
  .membership-teaser-action { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto; min-height: 44px; padding: 10px 11px; border: 1px solid #c2d8ba; border-radius: 9px; background: #ffffff8a; color: #176e65; font-size: 13px; font-weight: 600; line-height: 1.4; white-space: nowrap; }
  .membership-teaser-action svg { width: 16px; height: 16px; }
  .demo-note, .optional-fields, .teacher-guidance { min-width: 0; margin: 18px 0; border: 1px solid #e0e8d8; border-radius: 11px; background: #f5f8ef; overflow: hidden; }
  .demo-note summary, .optional-fields summary, .teacher-guidance summary { min-height: 46px; padding: 13px 16px; color: #596f50; font-size: 14px; font-weight: 550; line-height: 1.55; cursor: pointer; }
  .demo-note summary::marker, .optional-fields summary::marker, .teacher-guidance summary::marker { color: #91ad7b; }
  .demo-note summary svg, .optional-fields summary svg, .teacher-guidance summary svg { display: inline-block; vertical-align: -3px; width: 17px; height: 17px; margin-right: 4px; }
  .demo-note[open] > summary, .optional-fields[open] > summary, .teacher-guidance[open] > summary { border-bottom: 1px solid #e1e9d9; }
  .demo-note > p, .teacher-guidance > p { padding: 15px 16px 18px; color: #65735f; font-size: 14px; line-height: 1.85; }
  .demo-note > p + p, .teacher-guidance > p + p { padding-top: 0; margin-top: -3px; }
  .optional-fields { background: #fafbf7; }
  .optional-fields .field { margin: 17px 16px; }
  .optional-fields .field label { font-size: 13px; }
  .optional-fields .field textarea { font-size: 16px; min-height: 90px; }
  .optional-fields > .form-grid { padding: 0 16px; margin: 16px 0; }
  .optional-fields > .form-grid > .field { margin: 0; }

  .founder-note { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 19px; padding-top: 19px; border-top: 1px solid #e5ebdd; }
  .founder-note > span, .founder-note > .chip { display: inline-flex; align-items: center; padding: 7px 10px; border: 1px solid #d8e5d0; border-radius: 8px; background: #f0f6e9; color: #5f7a50; font-size: 12px; line-height: 1.5; }
  .founder-note > span:nth-child(2) { background: #f8f0e4; border-color: #ecdec8; color: #8b7350; }
  .founder-note p { flex-basis: 100%; font-size: 14px; line-height: 1.85; color: #65735f; }
  .projects-intro { margin: 28px 0 17px; }
  .projects-intro h2 { font-size: 21px; line-height: 1.4; letter-spacing: -.4px; }
  .projects-intro p { margin-top: 10px; font-size: 14px; line-height: 1.8; color: #65735f; }
  .project-card { position: relative; margin-top: 16px; padding: 0; overflow: hidden; border: 1px solid #e2e8d9; border-radius: 17px; background: #fff; }
  .project-image { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
  .project-copy { padding: 20px; }
  .project-copy .project-meta { margin-top: 0; }

  .hero h2 { max-width: calc(100% - 74px); }
  .hero-visual { top: 24px; right: 12px; width: 64px; height: 72px; opacity: 1; }
  .hero-book { width: 62px; height: 62px; }
  .hero-visual::before { width: 60px; height: 60px; }
  .hero-visual::after { width: 74px; height: 74px; }
  .optional-fields { grid-column: 1 / -1; }
  .plan-features-label { margin: 22px 0 8px; font-size: 14px; font-weight: 600; }
  .sponsor-slot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 24px; padding: 18px; border: 1px dashed #cbd6c8; border-radius: 14px; background: #f3f5ef; }
  .sponsor-slot > span { flex-basis: 100%; font-size: 13px; color: #697569; }
  .sponsor-slot strong { flex: 1 1 180px; font-size: 15px; line-height: 1.5; color: #52644f; }
  .sponsor-slot a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--teal); font-size: 14px; }
  .project-symbol { display: grid; place-items: center; width: 53px; height: 53px; border: 1px solid #e8ddc9; border-radius: 15px; background: #f6eedf; color: #ac8c54; }
  .project-symbol svg { width: 24px; height: 24px; stroke-width: 1.7; }
  .project-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
  .project-meta .chip, .project-meta .badge { padding: 5px 8px; font-size: 11px; color: #6a805a; background: #edf3e5; }
  .project-card h3 { margin: 13px 0 11px; color: var(--ink); font-size: 21px; line-height: 1.4; letter-spacing: -.35px; }
  .project-card p { color: #65735f; font-size: 14px; line-height: 1.85; }
  .project-card p + p { margin-top: 15px; }
}

@media screen and (max-width: 370px) {
  .topbar { padding-inline: 16px; gap: 7px; }
  .topbar-brand { gap: 7px; }
  .topbar-brand strong { font-size: 17px; }
  .topbar-brand img, .topbar-brand .brand-icon { width: 34px; height: 34px; flex-basis: 34px; }
  .topbar-actions { gap: 6px; }
  .membership-link { padding-inline: 7px; gap: 4px; font-size: 12px; }
  .membership-link svg { width: 15px; height: 15px; }
  .membership-teaser { flex-direction: column; align-items: stretch; gap: 13px; padding: 18px; }
  .membership-teaser-action { align-self: flex-start; }
}

/* Library refinements, reusable collections and resource actions on phones. */
@media screen {
  .library-tools { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 16px; min-width: 0; }
  .library-tools > *, .library-refinements > *, .collection-picker > *, .collection-grid > *, .resource-options > *, .print-choices > *, .backup-actions > * { min-width: 0; max-width: 100%; }
  .library-tools .search-field { width: 100%; min-width: 0; min-height: 48px; margin: 0; }
  .library-tools input, .library-tools select, .library-refinements input, .library-refinements select, .collection-picker select { width: 100%; min-width: 0; min-height: 44px; font-size: 16px; }
  .library-tools .field label, .library-refinements .field label, .collection-picker label { font-size: 14px; line-height: 1.5; }
  .library-refinements { margin: 0 0 18px; min-width: 0; border: 1px solid #dce5d4; border-radius: 13px; background: #fff; }
  .library-refinements > summary { min-height: 48px; padding: 13px 16px; color: #426648; font-size: 15px; font-weight: 600; line-height: 1.55; cursor: pointer; overflow-wrap: anywhere; }
  .library-refinements > summary::marker { color: #789a64; }
  .library-refinements[open] > summary { border-bottom: 1px solid #e5ebde; }
  .library-refinements > .form-grid, .library-refinements > .filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 12px; padding: 17px 16px; margin: 0; }
  .library-refinements > .inline-actions { padding: 0 16px 17px; }
  .library-refinements .btn, .active-filter-summary .btn { min-height: 44px; font-size: 14px; white-space: normal; }
  .active-filter-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; min-width: 0; margin: 12px 0 18px; color: #597052; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
  .active-filter-summary p, .active-filter-summary span { min-width: 0; max-width: 100%; }
  .active-filter-summary .chip { font-size: 14px; white-space: normal; overflow-wrap: anywhere; }
  .active-filter-summary button { flex: 0 0 auto; min-height: 44px; }
  .collection-picker { display: grid; gap: 13px; min-width: 0; margin: 19px 0; padding: 17px; border: 1px solid #dce6d4; border-radius: 13px; background: #f5f8ef; }
  .collection-picker p, .collection-picker small { font-size: 14px; line-height: 1.75; color: #5a7151; }
  .collection-picker .field { margin: 0; }
  .collection-picker .field label:has(input[type="checkbox"]), .collection-picker .checkbox-row { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 10px 0; color: #526d49; font-size: 14px; line-height: 1.7; cursor: pointer; overflow-wrap: anywhere; }
  .collection-picker input[type="checkbox"] { flex: 0 0 20px; width: 20px; height: 20px; min-height: 20px; margin: 2px 0 0; accent-color: var(--teal); }
  .collection-picker .btn { white-space: normal; }
  .collection-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 13px; min-width: 0; margin: 18px 0 24px; }
  .collection-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 19px; border: 1px solid #dce5d4; border-radius: 14px; background: #fff; box-shadow: 0 5px 15px #27422c04; text-align: left; }
  button.collection-card:hover, a.collection-card:hover { border-color: #a6c397; background: #f8fbf4; }
  .collection-card.active, .collection-card[aria-pressed="true"] { border-color: var(--teal); background: #edf5e8; }
  .collection-card h3, .collection-card > strong { color: var(--ink); font-size: 17px; line-height: 1.45; overflow-wrap: anywhere; }
  .collection-card p, .collection-card small { color: #5f7357; font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
  .collection-card .inline-actions { margin-top: auto; align-items: stretch; gap: 10px; }
  .collection-card .btn { flex: 1 1 140px; min-width: 0; min-height: 44px; white-space: normal; }
  .collection-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: #5f7357; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
  .collection-meta .chip, .collection-meta .badge { font-size: 14px; white-space: normal; }
  .resource-options { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; margin: 21px 0 8px; padding-top: 18px; border-top: 1px solid #e0e8d8; }
  .resource-options .btn { justify-content: flex-start; width: 100%; min-height: 44px; font-size: 14px; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; }
  .resource-options p, .resource-options small { color: #5f7357; font-size: 14px; line-height: 1.75; }
  .print-choices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; margin: 16px 0; }
  .print-choices .btn { justify-content: flex-start; width: 100%; min-height: 48px; padding: 13px 15px; line-height: 1.5; white-space: normal; text-align: left; }
  .print-choices label { display: flex; align-items: center; gap: 10px; min-height: 44px; padding-block: 8px; font-size: 14px; line-height: 1.5; }
  .print-choices input { flex: 0 0 20px; width: 20px; height: 20px; accent-color: var(--teal); }
  .backup-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 11px; margin: 18px 0; min-width: 0; }
  .backup-actions .btn { flex: 1 1 170px; min-height: 44px; white-space: normal; line-height: 1.5; }
  .file-input-field { min-width: 0; margin: 16px 0; }
  .file-input-field label { display: block; margin-bottom: 8px; color: #4d6a43; font-size: 14px; line-height: 1.6; }
  .file-input-field input[type="file"] { display: block; width: 100%; max-width: 100%; min-width: 0; min-height: 44px; padding: 7px; border: 1px solid #d7e2cc; border-radius: 10px; background: #fafbf7; color: #4c6544; font-size: 16px; }
  .file-input-field input[type="file"]::file-selector-button { min-height: 44px; margin-right: 9px; padding: 10px 12px; border: 1px solid #c6d9bc; border-radius: 7px; background: #edf4e7; color: var(--teal); font: inherit; font-size: 14px; cursor: pointer; }
  .file-input-field p, .file-input-field small { margin-top: 9px; color: #5f7357; font-size: 14px; line-height: 1.75; overflow-wrap: anywhere; }
  .content-adaptations { margin: 22px 0; min-width: 0; padding: 17px; border: 1px solid #dbe5d1; border-radius: 12px; background: #f3f7ed; }
  .content-adaptations h3 { margin: 0 0 10px; font-size: 16px; line-height: 1.5; }
  .content-adaptations h4 { margin: 15px 0 7px; color: #486a40; font-size: 15px; line-height: 1.5; }
  .content-adaptations p, .content-adaptations li { color: #5a7051; font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; }
  .content-adaptations ul, .content-adaptations ol { margin: 10px 0 0; padding-left: 21px; }
  .content-adaptations li + li { margin-top: 7px; }
  .lesson-checklist { min-width: 0; margin: 16px 0; padding: 0; list-style: none; }
  .lesson-checklist li { margin: 0; padding: 0; }
  .lesson-checklist label { display: flex; align-items: flex-start; gap: 11px; min-height: 44px; padding: 11px 0; color: #526d49; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; cursor: pointer; }
  .lesson-checklist input[type="checkbox"] { flex: 0 0 20px; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--teal); }
  .lesson-checklist > p, .lesson-checklist > span { color: #5f7357; font-size: 14px; line-height: 1.75; }
  .inline-state { display: block; min-width: 0; margin: 12px 0; padding: 12px 14px; border: 1px solid #d4e3cd; border-radius: 10px; background: #eff6e9; color: #486b3d; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
  .inline-state.error, .inline-state[role="alert"] { border-color: #e3c9ba; background: #fcf1e9; color: #8b4b2e; }
  .modal-header h2, .resource-title, .title-button, .plan-item h3 { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .title-button { width: 100%; min-height: 44px; font-size: inherit; }
  .resource-card-body .resource-meta, .resource-card-body .resource-footer { font-size: 14px; line-height: 1.6; }
  .resource-card-body .resource-footer { flex-wrap: wrap; }
  .resource-card-body .resource-footer > span { flex: 1 1 100px; min-width: 0; overflow-wrap: anywhere; }
  .resource-card-body .resource-footer > .icon-button { margin-left: auto; }
  .modal-body p, .modal-body li, .modal-body > .resource-meta, .result-section p, .result-section ul, .result-section ol, .result-section li { font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; }
  .modal-body .notice { font-size: 14px; }
  .modal-body details > summary, .result-section details > summary { min-height: 44px; padding: 11px 0; color: #4d7444; font-size: 14px; line-height: 1.6; cursor: pointer; overflow-wrap: anywhere; }
  .modal-body details.demo-note > summary, .modal-body details.teacher-guidance > summary { padding: 13px 16px; }
  details > summary:focus-visible { outline-color: var(--teal); outline-offset: -3px; border-radius: 9px; }
  .library-refinements select:focus-visible, .collection-picker select:focus-visible, .file-input-field input:focus-visible { outline-color: var(--teal); outline-offset: 2px; }
  .lesson-checklist label:has(input:focus-visible) { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 7px; }
  .plan-label, .plan-price small, .pricing-card .plan-note, .pricing-card .btn + p, .billing-switch button small { font-size: 14px; }
  .modal-body .tag-list .chip { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .plan-item.is-complete { border-color: #a9c79c; background: #f2f8ec; }
  .plan-completion { min-width: 0; margin-top: 11px; padding-top: 10px; border-top: 1px solid #e0e9d7; }
  .plan-completion .btn { justify-content: flex-start; width: 100%; max-width: 100%; min-width: 0; min-height: 44px; padding: 10px 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.5; text-align: left; }
  .plan-completion .btn[aria-pressed="true"] { color: #386c39; }
  .plan-completion .btn[aria-pressed="true"] svg { padding: 2px; border-radius: 50%; background: #d7ebcc; color: #386c39; }
}

@media screen and (max-width: 370px) {
  .library-refinements > .form-grid, .library-refinements > .filter-bar { grid-template-columns: minmax(0, 1fr); }
  .collection-card, .collection-picker, .content-adaptations { padding: 16px; }
  .resource-options .btn, .print-choices .btn { padding-inline: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .page { animation: none; }
  .btn, .resource-card { transition: none; }
  .btn:hover, .resource-card:hover { transform: none; }
}

@media print {
  @page { size: A4; margin: 17mm 16mm; }
  html, body { background: #fff !important; color: #1b3830 !important; min-width: 0; font-size: 10pt; line-height: 1.55; }
  .sidebar, .topbar, .mobile-nav, .toast, .modal-overlay, .btn, .icon-button, .inline-actions, .filter-bar, .tabs, .plan-actions, .planner-toolbar, .day-add, .notification-button, .post-actions, .comment-form, .composer, .page-footer { display: none !important; }
  .workspace { margin: 0 !important; padding: 0 !important; }
  .page { max-width: none; padding: 0; animation: none; }
  .page-heading { margin-bottom: 20px; }
  h1 { font-size: 22pt; }
  h2 { font-size: 15pt; }
  h3 { font-size: 11pt; }
  .dashboard-grid, .community-grid, .tools-grid { display: block; }
  .dashboard-aside, .community-aside, .hero-visual { display: none !important; }
  .hero { background: #fff !important; min-height: 0; padding: 20px; border-color: #d5dfcd; }
  .hero-copy { width: 100%; max-width: none; }
  .hero h2 { font-size: 20pt; max-width: none; }
  .hero-copy p { color: #5d7255; max-width: none; }
  .resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
  .resource-card, .post-card, .panel, .tool-card, .plan-item { break-inside: avoid; box-shadow: none; }
  .panel, .tool-card { border-color: #dbe3d2; margin-top: 20px; }
  .resource-cover { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .week-grid { min-width: 0; gap: 6px; }
  .day-column { min-height: 0; }
  .day-heading { font-size: 8pt; padding: 9px 7px; }
  .day-heading strong { font-size: 8pt; }
  .plan-item { padding: 7px; margin: 7px; }
  .plan-item h3 { font-size: 8pt; }
  .plan-item p { font-size: 7pt; }
  .day-plans { padding: 7px; }
  .day-plans .plan-item { margin: 0; }
  .planner-scroll, .page:has(.week-grid) { overflow: visible; }

  .result-section p, .result-section li { font-size: 10pt; color: #435e39; }
  .result-section { break-inside: avoid; }
  .notice { margin-top: 20px; background: #fff; color: #5c7250; border-color: #d9e2cf; }
  #print-root:not(:empty) { display: block !important; }
  body:has(#print-root:not(:empty)) .app-shell { display: none !important; }
  #print-root h1 { margin-bottom: 12px; }
  #print-root h2 { margin: 21px 0 10px; }
  #print-root h3 { margin: 17px 0 8px; }
  #print-root p, #print-root li { font-size: 10pt; line-height: 1.65; }
  #print-root ul, #print-root ol { padding-left: 20px; }
  #print-root section { break-inside: avoid; }
  #print-root table { width: 100%; border-collapse: collapse; margin-top: 15px; }
  #print-root td, #print-root th { border: 1px solid #d9e2cd; padding: 8px; text-align: left; }
  #print-root .print-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; padding-bottom: 15px; border-bottom: 1px solid #dfe5d7; }
  #print-root .print-brand img { width: 28px; height: 28px; object-fit: contain; }
  #print-root .print-footer { margin-top: 24px; font-size: 8pt; color: #839176; border-top: 1px solid #dde4d4; padding-top: 9px; }
  #print-root .student-questions > li { break-inside: avoid; page-break-inside: avoid; margin-bottom: 9mm; }
  #print-root .student-questions > li > p { margin-bottom: 3mm; }
  #print-root .answer-space { display: block; min-height: 20mm; width: 100%; border-bottom: 1px dashed #a3afa0; }
}

/* Ready lesson sets and classroom entry points. */
@media screen {
  .home-shortcuts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:22px 0; }
  .home-shortcuts > a { min-width:0; padding:18px 15px; border:1px solid #dce6d8; border-radius:15px; background:#fff; color:var(--ink); }
  .home-shortcuts > a > span { display:grid; place-items:center; width:38px; height:38px; margin-bottom:12px; border-radius:11px; background:#edf4e7; color:#176e65; }
  .home-shortcuts > a:last-child > span { background:#fff0e8; color:#b26242; }
  .home-shortcuts strong { display:block; font-size:16px; line-height:1.5; }
  .home-shortcuts p { margin-top:7px; color:#65735f; font-size:13px; line-height:1.7; }
  .resource-tier { position:absolute; bottom:14px; left:14px; display:inline-flex; align-items:center; gap:5px; padding:6px 9px; border-radius:8px; background:#fffaf2; color:#895b32; font-size:12px; font-weight:600; }
  .resource-tier svg { width:15px; height:15px; }
  .resource-tier.is-unlocked { background:#e7f1e6; color:#326c49; }
  .library-pack-teaser, .school-room-link { display:flex; align-items:center; gap:12px; margin:20px 0; padding:17px; border:1px solid #d4e1cc; border-radius:13px; background:#eef4e7; color:#315d42; }
  .library-pack-teaser div, .school-room-link div { min-width:0; flex:1; }
  .library-pack-teaser strong, .school-room-link strong { display:block; font-size:15px; line-height:1.5; }
  .library-pack-teaser span, .school-room-link span { display:block; margin-top:5px; color:#65735f; font-size:13px; line-height:1.6; }
  .library-pack-teaser > svg, .school-room-link > svg { flex-shrink:0; width:20px; height:20px; }
  .pack-grid { display:grid; gap:15px; margin:22px 0; }
  .pack-card { min-width:0; padding:23px; background:linear-gradient(135deg,#edf4e6,#fffaf2); border:1px solid #dbe4d2; border-radius:17px; color:var(--ink); }
  .pack-level { display:inline-flex; padding:5px 9px; border-radius:7px; background:#fff9; color:#59724b; font-size:12px; }
  .pack-card h3 { margin:13px 0 9px; font-size:21px; line-height:1.4; }
  .pack-card p { font-size:14px; line-height:1.8; color:#62745b; }
  .pack-count { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:17px; font-size:14px; color:#176e65; font-weight:600; }
  .set-benefits h2 { margin-bottom:18px; font-size:20px; }
  .set-benefits > div { display:flex; align-items:center; gap:10px; margin-top:13px; font-size:14px; line-height:1.6; color:#62745b; }
  .set-benefits svg { width:19px; flex-shrink:0; color:#176e65; }
  .pack-resource-list { display:grid; gap:10px; margin-top:20px; }
  .pack-resource { width:100%; min-width:0; display:flex; align-items:center; justify-content:space-between; gap:13px; padding:15px; border:1px solid #dbe4d3; border-radius:11px; background:#f7faf3; text-align:left; color:var(--ink); }
  .pack-resource > div { min-width:0; }
  .pack-resource strong { display:block; font-size:15px; line-height:1.6; overflow-wrap:anywhere; }
  .pack-resource span { display:block; margin-top:5px; font-size:13px; color:#62745b; line-height:1.6; }
  .pack-resource svg { flex-shrink:0; }
  .premium-preview > p { margin-top:17px; line-height:1.8; }
  .premium-preview > ul { padding-left:21px; margin:20px 0; font-size:14px; line-height:1.9; color:#62745b; }
  .school-plan-card { margin:26px 0; padding:25px; border-color:#b9d5ce; background:linear-gradient(150deg,#e7f1ed,#f7f9f3); }
  .school-plan-card h2 { margin-top:17px; font-size:24px; line-height:1.4; }
  .school-plan-card > p { margin-top:13px; line-height:1.8; font-size:14px; }
  .school-plan-card .inline-actions { display:grid; gap:10px; margin-top:23px; }
  .school-plan-card .inline-actions .btn { width:100%; white-space:normal; }
}

.library-more{display:flex;align-items:center;justify-content:center;gap:16px;padding:24px 0 10px}.library-more span{font-size:12px;color:#62726d}