:root {
  --ink: #17231d;
  --muted: #66736c;
  --subtle: #7b8881;
  --line: #dfe6e2;
  --line-strong: #cbd6d0;
  --paper: #f4f7f5;
  --white: #ffffff;
  --green: #176245;
  --green-dark: #104b35;
  --green-soft: #e7f2eb;
  --amber: #a46f18;
  --amber-soft: #fff6dc;
  --danger: #ad3e3e;
  --shadow: 0 10px 30px rgba(25, 48, 37, .07);
}

* { letter-spacing: 0; }
html { background: var(--paper); }
body { color: var(--ink); background: var(--paper); font-size: 14px; line-height: 1.55; }
button, input, select, textarea { color: inherit; font: inherit; }
button { touch-action: manipulation; }
svg.ui-icon { width: 1em; height: 1em; display: block; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[data-icon] { display: inline-flex; align-items: center; justify-content: center; }

.app-shell { min-height: 100dvh; }
.sidebar { width: 224px; height: 100dvh; position: sticky; top: 0; padding: 24px 14px 18px; background: #eef3f0; border-right: 1px solid var(--line); }
.brand { gap: 11px; padding: 0 10px 22px; font-size: 19px; }
.brand-mark { width: 34px; height: 34px; border-radius: 8px; background: var(--green); font-size: 16px; box-shadow: none; }
.workspace { min-height: 48px; height: auto; margin: 0 2px 22px; padding: 9px 11px; border-color: var(--line); color: #4c5d54; font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.status-dot { flex: 0 0 auto; background: #49a675; }
.nav { gap: 4px; }
.nav-item { height: 42px; gap: 11px; padding: 0 12px; border-radius: 7px; color: #53645b; font-size: 13px; font-weight: 500; }
.nav-item .nav-icon { width: 19px; font-size: 19px; }
.nav-item .nav-icon svg { width: 19px; height: 19px; }
.nav-item .nav-label { width: auto; font-size: 13px; text-align: left; }
.nav-item:hover { background: rgba(255,255,255,.7); }
.nav-item.active { color: var(--green); background: var(--white); box-shadow: 0 4px 16px rgba(25, 48, 37, .06); }
.sidebar-section-title { margin: 28px 12px 10px; color: #718078; font-size: 11px; font-weight: 700; text-transform: none; }
.sidebar-tags { gap: 2px; }
.tag-link { min-height: 36px; padding: 7px 12px; color: #5f6f67; font-size: 12px; }
.tag-link b { color: #718078; font-size: 11px; }

.main { min-width: 0; }
.topbar { height: 64px; position: sticky; top: 0; z-index: 30; padding: 0 32px; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.breadcrumb strong { color: var(--ink); font-size: 14px; font-weight: 700; }
.top-actions { gap: 8px; }
.icon-btn, .small-icon-btn, .dialog-close { display: inline-grid; place-items: center; color: #58675f; background: transparent; }
.icon-btn { width: 38px; height: 38px; border-radius: 7px; font-size: 19px; }
.icon-btn:hover, .small-icon-btn:hover, .dialog-close:hover { color: var(--green); background: var(--green-soft); }
.primary-btn, .secondary-btn { min-height: 40px; height: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 15px; border-radius: 7px; font-size: 13px; font-weight: 700; }
.primary-btn { color: #fff; background: var(--green); box-shadow: none; }
.primary-btn:hover { background: var(--green-dark); }
.secondary-btn { color: var(--green); background: #fff; border: 1px solid var(--line-strong); }
.primary-btn svg, .secondary-btn svg { width: 17px; height: 17px; }
.avatar { width: 34px; height: 34px; margin-left: 2px; color: #755a20; background: #f1e4bd; font-size: 12px; }

.view { max-width: 1220px; padding: 34px 32px 56px; }
.hero { align-items: center; min-height: 134px; padding: 2px 0 26px; border-bottom: 1px solid var(--line); }
.hero h1, .page-head h1 { margin: 0; color: var(--ink); font-size: 32px; line-height: 1.25; font-weight: 760; }
.hero h1 span { color: var(--green); }
.hero p:not(.eyebrow), .page-head p:not(.eyebrow) { max-width: 620px; margin: 10px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.focus-box { min-width: 228px; padding: 16px 18px; border: 1px solid #cfe0d6; border-left: 3px solid var(--green); border-radius: 7px; background: var(--green-soft); }
.focus-box small { color: #52645a; font-size: 12px; font-weight: 700; }
.focus-box div { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; }
.focus-box strong { margin: 0; color: var(--green); font-size: 30px; font-family: inherit; }
.focus-box span, .focus-box p { color: var(--muted); font-size: 12px; }
.focus-box p { margin: 4px 0 0; }

.quick-capture { max-width: none; height: 56px; display: flex; align-items: center; gap: 12px; margin-top: 22px; padding: 7px 8px 7px 16px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; box-shadow: 0 5px 18px rgba(25,48,37,.04); }
.quick-capture > [data-icon] { color: var(--green); font-size: 20px; }
.quick-capture input { height: 40px; min-width: 0; padding: 0; border: 0; background: transparent; font-size: 14px; }
.quick-capture input:focus { box-shadow: none; }
.quick-capture .primary-btn { min-width: 136px; }

.overview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 20px; border: 1px solid var(--line); border-radius: 8px; background: #fff; overflow: hidden; }
.overview-card { min-height: 76px; display: flex; align-items: center; gap: 13px; padding: 14px 20px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent; }
.overview-card:last-child { border-right: 0; }
.overview-card > [data-icon] { width: 34px; height: 34px; border-radius: 7px; color: var(--green); background: var(--green-soft); font-size: 17px; }
.overview-card small { display: block; color: var(--muted); font-size: 12px; }
.overview-card strong { display: block; margin-top: 1px; color: var(--ink); font: 750 22px/1.1 inherit; }
.section-head { margin-top: 30px; align-items: center; }
.section-head h2 { margin: 0; font-size: 19px; line-height: 1.3; }
.section-head p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.text-btn { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 8px; color: var(--green); font-size: 12px; }
.text-btn svg { width: 15px; height: 15px; }
.recent-grid { gap: 14px; margin-top: 14px; }
.recent-card { min-height: 154px; padding: 16px; border-color: var(--line); border-radius: 8px; box-shadow: none; }
.recent-card:hover { border-color: #93b7a3; box-shadow: 0 8px 24px rgba(25,48,37,.07); transform: translateY(-1px); }
.note-tag { color: #805d18; background: var(--amber-soft); font-size: 11px; }
.recent-card time, .recent-card footer { color: var(--muted); font-size: 11px; }
.recent-card h3 { margin: 14px 0 6px; font-size: 15px; }
.recent-card p { height: 38px; color: var(--muted); font-size: 12px; }

.page-head { min-height: 80px; align-items: center; }
.page-head h1 { font-size: 28px; }
.page-head p:not(.eyebrow) { margin-top: 5px; font-size: 13px; }
.notes-layout { grid-template-columns: 276px minmax(0,1fr); gap: 18px; min-height: calc(100dvh - 190px); margin-top: 18px; }
.note-list-panel { padding-right: 17px; }
.note-list-heading { height: 40px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.note-list-heading strong { font-size: 13px; }
.small-icon-btn { width: 34px; height: 34px; border-radius: 7px; font-size: 18px; }
.search-field { height: 42px; padding: 0 11px; border-color: var(--line-strong); border-radius: 7px; color: var(--subtle); }
.search-field [data-icon] { font-size: 16px; }
.search-field input { height: 40px; font-size: 13px; }
.filter-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 10px 0 8px; }
.filter { min-width: 0; min-height: 34px; padding: 0 4px; color: var(--muted); font-size: 12px; }
.filter.active, .filter:hover { color: var(--green); background: var(--green-soft); }
.note-list { max-height: calc(100dvh - 334px); gap: 4px; scrollbar-width: thin; }
.note-list-item { min-height: 76px; padding: 11px 12px; border: 1px solid transparent; border-radius: 7px; }
.note-list-item:hover { background: #edf4f0; }
.note-list-item.active { border-color: #cfe0d6; background: var(--green-soft); }
.note-list-item strong { color: var(--ink); font-size: 13px; }
.note-list-item small { color: var(--muted); font-size: 11px; }
.note-list-item time { color: var(--subtle); font-size: 10px; }
.note-search-empty { padding: 18px 8px; color: var(--muted); font-size: 12px; text-align: center; }

.editor-panel { min-height: calc(100dvh - 190px); padding: 20px 28px 15px; border-color: var(--line); border-radius: 8px; box-shadow: 0 8px 28px rgba(25,48,37,.05); }
.mobile-note-back { display: none; }
.editor-meta { min-height: 38px; }
.editor-meta select { min-height: 34px; height: 34px; padding: 0 9px; color: #795817; background: var(--amber-soft); font-size: 12px; }
.editor-meta > span { color: var(--muted); font-size: 11px; }
.editor-meta .icon-btn { width: 36px; height: 36px; }
.note-title { margin: 22px 0 12px; font-size: 27px; line-height: 1.35; }
.editor-toolbar { height: 48px; flex-wrap: nowrap; gap: 4px; padding: 5px 0; border-color: var(--line); overflow: visible; }
.editor-toolbar > button, .editor-more summary { width: 38px; height: 38px; display: inline-grid; place-items: center; padding: 0; border-radius: 6px; color: #52625a; font-size: 14px; cursor: pointer; }
.editor-toolbar > button:hover, .editor-more summary:hover { color: var(--green); background: var(--green-soft); }
.editor-toolbar [data-icon] { display: inline-flex; }
.editor-toolbar .toolbar-spacer { display: block; flex: 1; }
.editor-toolbar #addCloze { width: auto; min-width: 76px; display: inline-flex; gap: 6px; padding: 0 10px; white-space: nowrap; }
.editor-toolbar #addCloze > span { flex: 0 0 auto; }
.editor-toolbar #addCloze svg { width: 17px; height: 17px; }
.toolbar-spacer { flex: 1; }
.editor-more { position: relative; }
.editor-more summary { list-style: none; }
.editor-more summary::-webkit-details-marker { display: none; }
.editor-more-menu { width: 164px; position: absolute; z-index: 20; top: 44px; right: 0; display: grid; gap: 2px; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow); }
.editor-more-menu button { min-height: 38px; display: flex; align-items: center; gap: 9px; padding: 0 10px; border-radius: 6px; color: #405149; font-size: 12px; text-align: left; }
.editor-more-menu button:hover { background: var(--paper); }
.editor-more-menu svg { width: 16px; height: 16px; }
.danger-btn { color: var(--danger) !important; }
.note-content { min-height: 300px; padding-top: 20px; color: #35453d; font-size: 15px; line-height: 1.9; }
.note-content:empty::before { color: #87938d; }
.editor-footer { min-height: 34px; color: var(--muted); font-size: 11px; }
.editor-footer span:last-child { display: inline-flex; align-items: center; gap: 6px; }
.sync-dot { width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: #48a675; }

.review-panel { max-width: 820px; margin: 24px auto 0; }
.product-empty { min-height: 380px; display: grid; place-items: center; align-content: center; padding: 40px 24px; border: 1px dashed var(--line-strong); border-radius: 8px; background: rgba(255,255,255,.5); text-align: center; }
.product-empty > .empty-icon { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 16px; border-radius: 8px; color: var(--green); background: var(--green-soft); font-size: 25px; }
.product-empty h2 { margin: 0; font-size: 19px; }
.product-empty p { max-width: 420px; margin: 8px 0 20px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.review-shell { display: grid; gap: 14px; }
.review-progress { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.review-progress span { color: var(--muted); font-size: 12px; }
.review-progress strong { color: var(--green); font-size: 13px; }
.review-card-product { padding: 28px 30px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow); }
.review-card-top { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.review-card-top .note-tag { margin-right: auto; }
.review-card-product h2 { margin: 30px 0 12px; font-size: 20px; }
.review-prompt { min-height: 100px; display: grid; place-items: center; padding: 24px; border-radius: 7px; background: var(--paper); color: #34453c; font-size: 17px; line-height: 1.8; text-align: center; }
.review-blank { min-width: 88px; display: inline-block; color: var(--amber); border-bottom: 2px solid #d7aa4d; }
.review-answer { color: var(--green); background: var(--green-soft); border-bottom-color: #8fbea3; }
.review-controls { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.review-ratings { display: none; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.review-ratings.visible { display: grid; }
.review-ratings button { min-height: 42px; border: 1px solid var(--line); border-radius: 7px; background: #fff; font-size: 12px; }
.review-ratings button:hover { color: var(--green); border-color: #9ec2ad; background: var(--green-soft); }

.materials-grid { grid-template-columns: 1fr; gap: 8px; margin-top: 24px; }
.material-row { min-height: 76px; display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 13px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.material-type-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 7px; color: var(--green); background: var(--green-soft); font-size: 20px; }
.material-body { min-width: 0; }
.material-body h3 { margin: 0; overflow: hidden; color: var(--ink); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.material-body p { margin: 3px 0 0; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.material-actions { display: flex; gap: 4px; }
.material-actions a, .material-actions button { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 6px; color: #596a61; }
.material-actions a:hover, .material-actions button:hover { color: var(--green); background: var(--green-soft); }
.material-actions .remove-material:hover { color: var(--danger); background: #fbeeee; }
.material-actions svg { width: 17px; height: 17px; }

.app-dialog { width: min(520px, calc(100% - 28px)); max-height: min(680px, calc(100dvh - 36px)); padding: 0; overflow: auto; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 24px 80px rgba(20,40,30,.22); }
.app-dialog::backdrop { background: rgba(18,30,24,.38); backdrop-filter: blur(3px); }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 22px 22px 16px; }
.dialog-head h2 { margin: 0; font-size: 21px; }
.dialog-head p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.dialog-close { width: 36px; height: 36px; border-radius: 7px; font-size: 19px; }
.dialog-search { height: 46px; display: flex; align-items: center; gap: 9px; margin: 0 22px 14px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 7px; color: var(--muted); }
.dialog-search input { width: 100%; height: 42px; padding: 0; border: 0; outline: 0; font-size: 14px; }
.search-results { min-height: 150px; display: grid; align-content: start; gap: 4px; padding: 0 14px 16px; }
.search-result { width: 100%; min-height: 58px; display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 10px; padding: 8px; border-radius: 7px; color: inherit; text-align: left; text-decoration: none; }
.search-result:hover { background: var(--paper); }
.search-result > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 6px; color: var(--green); background: var(--green-soft); }
.search-result strong, .search-result small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-result strong { font-size: 13px; }
.search-result small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.search-results-empty { padding: 42px 16px; color: var(--muted); font-size: 13px; text-align: center; }
.material-dialog form { padding-bottom: 20px; }
.material-dialog form > label { display: grid; gap: 6px; margin: 0 22px 14px; color: #4c5c54; font-size: 12px; font-weight: 650; }
.material-dialog input, .material-dialog select, .material-dialog textarea { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: 7px; outline: 0; background: #fff; font-size: 13px; font-weight: 400; resize: vertical; }
.material-dialog input:focus, .material-dialog select:focus, .material-dialog textarea:focus { border-color: #79a98e; box-shadow: 0 0 0 3px rgba(23,98,69,.1); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin: 20px 22px 0; padding-top: 16px; border-top: 1px solid var(--line); }

.auth-gate { background: var(--paper); }
.auth-card { border-radius: 8px; border-color: var(--line); box-shadow: 0 20px 60px rgba(20,40,30,.12); }
.auth-card p, .auth-card small { color: var(--muted); }
.auth-card label { color: #4f5f56; font-size: 12px; }
.auth-card input { min-height: 44px; border-color: var(--line-strong); border-radius: 7px; }

@media (max-width: 900px) and (min-width: 861px) {
  .notes-layout { grid-template-columns: 238px minmax(0,1fr); }
  .view { padding-right: 24px; padding-left: 24px; }
}

@media (max-width: 860px) {
  html, body { max-width: 100%; overflow-x: clip; }
  .app-shell { display: block; }
  .main { width: 100%; padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .sidebar { width: 100%; height: calc(64px + env(safe-area-inset-bottom)); position: fixed; inset: auto 0 0; z-index: 50; display: block; padding: 5px 8px env(safe-area-inset-bottom); border: 0; border-top: 1px solid var(--line); background: rgba(255,255,255,.97); backdrop-filter: blur(14px); transition: transform .2s ease; }
  .brand, .workspace, .sidebar-section-title, .sidebar-tags { display: none !important; }
  .nav { height: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
  .nav-item { min-width: 0; height: 54px; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 3px 2px; border-radius: 7px; color: #66746c; font-size: 10px; }
  .nav-item .nav-icon { width: auto; font-size: 20px; }
  .nav-item .nav-icon svg { width: 20px; height: 20px; }
  .nav-item .nav-label { width: auto; font-size: 10px; line-height: 1.15; text-align: center; }
  .nav-item.active { background: var(--green-soft); box-shadow: none; }
  .topbar { height: 58px; padding: 0 12px 0 15px; }
  .breadcrumb strong { font-size: 13px; }
  .top-actions { gap: 3px; }
  .top-actions .icon-btn, .top-actions .primary-btn { width: 42px; min-width: 42px; height: 42px; min-height: 42px; padding: 0; display: grid; place-items: center; }
  .top-actions .primary-btn::before { content: none; }
  .top-actions .button-label, .top-actions .avatar { display: none; }
  .view { width: 100%; max-width: none; padding: 22px 14px calc(36px + env(safe-area-inset-bottom)); }
  .hero { min-height: 0; display: grid; grid-template-columns: minmax(0,1fr) 116px; align-items: end; gap: 14px; padding: 0 0 20px; }
  .hero h1 { font-size: 27px; line-height: 1.3; }
  .hero p:not(.eyebrow) { margin-top: 8px; font-size: 13px; line-height: 1.6; }
  .focus-box { min-width: 0; padding: 12px; }
  .focus-box small, .focus-box span, .focus-box p { font-size: 10px; }
  .focus-box strong { font-size: 25px; }
  .focus-box p { display: none; }
  .quick-capture { height: 54px; margin-top: 16px; padding-left: 13px; }
  .quick-capture input { font-size: 13px; }
  .quick-capture .primary-btn { min-width: 44px; width: 44px; padding: 0; }
  .quick-capture .primary-btn > span:last-child { display: none; }
  .overview-grid { grid-template-columns: repeat(3, minmax(0,1fr)); margin-top: 14px; }
  .overview-card { min-width: 0; min-height: 72px; display: block; padding: 12px 9px; text-align: center; }
  .overview-card > [data-icon] { display: none; }
  .overview-card small { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
  .overview-card strong { margin-top: 4px; font-size: 20px; }
  .section-head { margin-top: 24px; }
  .section-head h2 { font-size: 18px; }
  .section-head p { font-size: 11px; }
  .recent-grid { grid-template-columns: 1fr; }
  .recent-card { min-height: 128px; }
  .recent-card:nth-child(n+3) { display: none; }
  .page-head { min-height: 0; display: flex; align-items: flex-end; }
  .page-head h1 { font-size: 26px; }
  .page-head p:not(.eyebrow) { font-size: 12px; }
  .page-head > .secondary-btn { min-height: 42px; flex: 0 0 auto; margin: 0; }

  .notes-layout { display: block; min-height: 0; margin-top: 18px; }
  .note-list-panel { margin: 0; padding: 0; border: 0; }
  .note-list-heading { height: 42px; }
  .note-list { max-height: none; overflow: visible; }
  .note-list-item { min-height: 78px; }
  #notesView.mobile-list-mode .editor-panel { display: none; }
  #notesView.mobile-editor-mode { padding: 0; }
  #notesView.mobile-editor-mode .page-head, #notesView.mobile-editor-mode .note-list-panel { display: none; }
  #notesView.mobile-editor-mode .notes-layout { margin: 0; }
  #notesView.mobile-editor-mode .editor-panel { display: flex; min-height: calc(100dvh - 58px); margin: 0; padding: 12px 15px calc(18px + env(safe-area-inset-bottom)); border: 0; border-radius: 0; box-shadow: none; }
  body.mobile-note-editing .sidebar { transform: translateY(120%); pointer-events: none; }
  body.mobile-note-editing .main { padding-bottom: 0; }
  .mobile-note-back { width: 40px; height: 40px; min-width: 40px; display: grid; place-items: center; margin-right: 3px; border-radius: 7px; color: #405149; }
  .mobile-note-back:hover { color: var(--green); background: var(--green-soft); }
  .editor-meta { position: static; padding: 4px 0; background: #fff; }
  .editor-meta select { min-width: 90px; min-height: 38px; }
  .editor-meta .icon-btn { width: 40px; height: 40px; }
  .note-title { margin: 18px 0 10px; font-size: 25px; }
  .editor-toolbar { min-height: 50px; height: 50px; flex-wrap: nowrap; gap: 3px; padding: 5px 0; }
  .editor-toolbar > button, .editor-more summary { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
  .editor-toolbar #addCloze { width: 40px; min-width: 40px; padding: 0; }
  .editor-toolbar #addCloze > span:last-child { display: none; }
  .editor-more-menu { position: fixed; top: auto; right: 12px; bottom: 12px; }
  .note-content { min-height: calc(100dvh - 260px); padding-top: 18px; font-size: 16px; line-height: 1.85; }
  .editor-footer { padding-bottom: env(safe-area-inset-bottom); }

  .review-panel { margin-top: 20px; }
  .product-empty { min-height: calc(100dvh - 290px); }
  .review-card-product { padding: 20px 16px; }
  .review-card-product h2 { margin-top: 22px; font-size: 18px; }
  .review-prompt { min-height: 130px; padding: 20px 14px; font-size: 16px; }
  .review-ratings { grid-template-columns: 1fr; }
  .review-ratings button { min-height: 46px; }
  .materials-grid { margin-top: 18px; }
  .material-row { grid-template-columns: 38px minmax(0,1fr) auto; gap: 10px; padding: 11px; }
  .material-type-icon { width: 38px; height: 38px; }
  .material-actions { gap: 1px; }
  .material-actions a, .material-actions button { width: 34px; height: 34px; }
  .app-dialog { max-height: calc(100dvh - 20px); }
  .dialog-head { padding: 18px 18px 14px; }
  .dialog-search { margin-right: 18px; margin-left: 18px; }
  .material-dialog form > label { margin-right: 18px; margin-left: 18px; }
  .dialog-actions { margin-right: 18px; margin-left: 18px; }
  .toast { bottom: calc(78px + env(safe-area-inset-bottom)); }
  body.mobile-note-editing .toast { bottom: 16px; }
}

@media (max-width: 360px) {
  .view { padding-right: 11px; padding-left: 11px; }
  .hero { grid-template-columns: 1fr; }
  .focus-box { display: flex; align-items: center; justify-content: space-between; }
  .focus-box div { margin: 0; }
  .section-head p { display: none; }
  .material-body p { max-width: 150px; }
}

@media (max-width: 860px) and (max-height: 600px) {
  .material-dialog .dialog-head { padding: 14px 16px 10px; }
  .material-dialog form > label { gap: 4px; margin: 0 16px 9px; }
  .material-dialog input, .material-dialog select { min-height: 38px; padding-top: 7px; padding-bottom: 7px; }
  .material-dialog textarea { min-height: 58px; max-height: 58px; padding-top: 7px; padding-bottom: 7px; }
  .material-dialog .dialog-actions { margin: 11px 16px 0; padding-top: 11px; }
}

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