:root {
      --paper: #f5f0e6;
      --paper-deep: #ece3d3;
      --card: #fffdf8;
      --ink: #2f2a24;
      --muted: #7d746a;
      --line: #ded4c4;
      --rust: #a34d2e;
      --rust-dark: #74321f;
      --butter: #e4b84f;
      --olive: #647058;
      --olive-soft: #dfe4d8;
      --pink-soft: #edd8cf;
      --blue-soft: #d9e3e2;
      --shadow: 0 16px 42px rgba(73, 57, 38, .09);
      --radius-lg: 24px;
      --radius-md: 16px;
      --sidebar: 236px;
    }

    * { box-sizing: border-box; }

    html {
      scroll-behavior: smooth;
      background: var(--paper);
    }

    body {
      margin: 0;
      min-width: 320px;
      color: var(--ink);
      background:
        radial-gradient(circle at 84% 4%, rgba(228, 184, 79, .14), transparent 28rem),
        linear-gradient(115deg, rgba(255,255,255,.42), transparent 35rem),
        var(--paper);
      font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", system-ui, -apple-system, sans-serif;
      line-height: 1.55;
    }

    button, input, select, textarea {
      font: inherit;
    }

    button {
      color: inherit;
    }

    a {
      color: inherit;
    }

    .app {
      min-height: 100vh;
      display: grid;
      grid-template-columns: var(--sidebar) minmax(0, 1fr);
    }

    .sidebar {
      position: sticky;
      top: 0;
      height: 100vh;
      padding: 24px 18px 18px;
      border-right: 1px solid rgba(114, 91, 62, .18);
      background: rgba(249, 246, 238, .9);
      backdrop-filter: blur(16px);
      display: flex;
      flex-direction: column;
      z-index: 30;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 4px 8px 24px;
    }

    .brand-mark {
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      border-radius: 14px 14px 14px 5px;
      color: #fffaf0;
      background: var(--rust);
      box-shadow: 0 8px 18px rgba(163, 77, 46, .22);
      font-family: "STSong", "SimSun", Georgia, serif;
      font-size: 23px;
      font-weight: 700;
    }

    .brand-copy strong {
      display: block;
      letter-spacing: .04em;
      font-family: "STSong", "SimSun", Georgia, serif;
      font-size: 18px;
    }

    .brand-copy small {
      display: block;
      margin-top: 1px;
      color: var(--muted);
      font-size: 11px;
      letter-spacing: .06em;
    }

    .nav-label {
      padding: 0 10px 8px;
      color: #9a9085;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .14em;
    }

    .nav {
      display: grid;
      gap: 6px;
    }

    .nav-button {
      width: 100%;
      min-height: 44px;
      padding: 9px 11px;
      border: 0;
      border-radius: 13px;
      background: transparent;
      display: flex;
      align-items: center;
      gap: 11px;
      cursor: pointer;
      text-align: left;
      transition: .2s ease;
    }

    .nav-button:hover {
      background: rgba(163, 77, 46, .07);
    }

    .nav-button.active {
      color: var(--rust-dark);
      background: var(--pink-soft);
      font-weight: 700;
    }

    .nav-icon {
      width: 27px;
      height: 27px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      border: 1px solid rgba(80, 63, 43, .15);
      border-radius: 9px;
      background: rgba(255,255,255,.45);
      font-family: Georgia, serif;
      font-size: 12px;
      font-weight: 700;
    }

    .nav-button.active .nav-icon {
      color: #fff;
      border-color: var(--rust);
      background: var(--rust);
    }

    .sidebar-bottom {
      margin-top: auto;
      padding: 16px 8px 4px;
    }

    .local-note {
      padding: 13px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: rgba(255,255,255,.52);
    }

    .local-note strong {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 12px;
    }

    .local-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #6f8b62;
      box-shadow: 0 0 0 4px rgba(111,139,98,.12);
    }

    .local-note p {
      margin: 6px 0 10px;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.55;
    }

    .text-button {
      padding: 0;
      border: 0;
      color: var(--rust);
      background: none;
      cursor: pointer;
      font-size: 11px;
      font-weight: 700;
    }

    .main {
      min-width: 0;
    }

    .topbar {
      position: sticky;
      top: 0;
      height: 78px;
      padding: 0 clamp(22px, 4vw, 56px);
      border-bottom: 1px solid rgba(114, 91, 62, .13);
      background: rgba(245, 240, 230, .86);
      backdrop-filter: blur(16px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      z-index: 20;
    }

    .search-box {
      width: min(460px, 48vw);
      height: 42px;
      padding: 0 14px;
      border: 1px solid rgba(114, 91, 62, .2);
      border-radius: 13px;
      background: rgba(255,253,248,.72);
      display: flex;
      align-items: center;
      gap: 10px;
      transition: .2s ease;
    }

    .search-box:focus-within {
      border-color: rgba(163, 77, 46, .5);
      box-shadow: 0 0 0 4px rgba(163, 77, 46, .08);
      background: var(--card);
    }

    .search-symbol {
      color: #8b8176;
      font-size: 18px;
      transform: rotate(-20deg);
    }

    .search-box input {
      width: 100%;
      border: 0;
      outline: 0;
      background: transparent;
      color: var(--ink);
      font-size: 13px;
    }

    .top-actions {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .today {
      color: var(--muted);
      font-size: 12px;
      white-space: nowrap;
    }

    .primary-button,
    .secondary-button,
    .ghost-button,
    .danger-button {
      min-height: 40px;
      padding: 9px 15px;
      border-radius: 12px;
      cursor: pointer;
      font-weight: 700;
      font-size: 12px;
      transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
    }

    .primary-button {
      border: 1px solid var(--rust);
      color: #fff;
      background: var(--rust);
      box-shadow: 0 7px 16px rgba(163,77,46,.18);
    }

    .primary-button:hover {
      transform: translateY(-1px);
      background: var(--rust-dark);
      box-shadow: 0 9px 20px rgba(116,50,31,.2);
    }

    .secondary-button {
      border: 1px solid var(--ink);
      color: var(--ink);
      background: transparent;
    }

    .secondary-button:hover,
    .ghost-button:hover {
      background: var(--paper-deep);
    }

    .ghost-button {
      border: 1px solid var(--line);
      color: var(--ink);
      background: var(--card);
    }

    .danger-button {
      border: 1px solid #c58876;
      color: #8c3824;
      background: #fff8f4;
    }

    .content {
      width: min(1540px, 100%);
      margin: 0 auto;
      padding: 34px clamp(22px, 4vw, 56px) 70px;
    }

    .view {
      display: none;
      animation: viewIn .28s ease both;
    }

    .view.active {
      display: block;
    }

    @keyframes viewIn {
      from { opacity: 0; transform: translateY(5px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .page-header {
      margin-bottom: 24px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 24px;
    }

    .eyebrow {
      display: block;
      margin-bottom: 7px;
      color: var(--rust);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    h1, h2, h3, p {
      margin-top: 0;
    }

    h1, h2, .serif {
      font-family: "STSong", "Songti SC", "SimSun", Georgia, serif;
    }

    .page-header h1 {
      margin-bottom: 5px;
      font-size: clamp(30px, 4vw, 46px);
      line-height: 1.15;
      letter-spacing: -.03em;
    }

    .page-header p {
      max-width: 660px;
      margin-bottom: 0;
      color: var(--muted);
      font-size: 13px;
    }

    .hero {
      min-height: 288px;
      padding: clamp(30px, 5vw, 58px);
      border: 1px solid rgba(107, 73, 45, .17);
      border-radius: 30px;
      overflow: hidden;
      background:
        linear-gradient(105deg, rgba(255,253,248,.98) 0%, rgba(255,250,239,.9) 56%, rgba(229,196,117,.38) 100%);
      box-shadow: var(--shadow);
      display: grid;
      grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr);
      gap: 28px;
      position: relative;
    }

    .hero:before {
      content: "";
      position: absolute;
      right: -45px;
      bottom: -86px;
      width: 330px;
      height: 330px;
      border: 1px solid rgba(122, 82, 38, .18);
      border-radius: 50%;
      box-shadow:
        inset 0 0 0 26px rgba(255,255,255,.18),
        inset 0 0 0 54px rgba(132,89,42,.06);
    }

    .hero-copy {
      position: relative;
      z-index: 2;
    }

    .hero-kicker {
      margin-bottom: 16px;
      color: var(--olive);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .16em;
    }

    .hero h1 {
      max-width: 720px;
      margin-bottom: 16px;
      font-size: clamp(36px, 5vw, 64px);
      line-height: 1.12;
      letter-spacing: -.055em;
    }

    .hero h1 em {
      color: var(--rust);
      font-style: normal;
    }

    .hero-copy p {
      max-width: 650px;
      margin-bottom: 24px;
      color: #6f665d;
      font-size: 14px;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .hero-note {
      align-self: end;
      position: relative;
      z-index: 2;
    }

    .paper-note {
      width: min(100%, 318px);
      margin-left: auto;
      padding: 22px 22px 20px;
      border: 1px solid rgba(94, 69, 40, .2);
      border-radius: 3px 18px 18px 18px;
      background: rgba(255,253,246,.88);
      box-shadow: 0 14px 30px rgba(97,70,37,.12);
      transform: rotate(-1.2deg);
    }

    .paper-note-label {
      margin-bottom: 9px;
      color: var(--rust);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .14em;
    }

    .paper-note strong {
      display: block;
      margin-bottom: 8px;
      font-family: "STSong", "SimSun", Georgia, serif;
      font-size: 20px;
    }

    .paper-note p {
      margin-bottom: 0;
      color: var(--muted);
      font-size: 11px;
    }

    .stats-grid {
      margin-top: 18px;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
    }

    .stat-card {
      min-height: 122px;
      padding: 20px;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: rgba(255,253,248,.78);
    }

    .stat-top {
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: var(--muted);
      font-size: 11px;
    }

    .stat-mark {
      width: 28px;
      height: 28px;
      display: grid;
      place-items: center;
      border-radius: 9px;
      color: var(--rust-dark);
      background: var(--pink-soft);
      font-size: 11px;
      font-weight: 800;
    }

    .stat-value {
      font-family: Georgia, "Times New Roman", serif;
      font-size: 32px;
      line-height: 1;
    }

    .stat-caption {
      margin-top: 7px;
      color: var(--muted);
      font-size: 10px;
    }

    .section {
      margin-top: 36px;
    }

    .section-heading {
      margin-bottom: 16px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 20px;
    }

    .section-heading h2 {
      margin-bottom: 3px;
      font-size: 25px;
      letter-spacing: -.025em;
    }

    .section-heading p {
      margin-bottom: 0;
      color: var(--muted);
      font-size: 11px;
    }

    .section-link {
      border: 0;
      color: var(--rust);
      background: none;
      cursor: pointer;
      font-size: 11px;
      font-weight: 800;
      white-space: nowrap;
    }

    .category-strip {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 12px;
    }

    .category-card {
      min-height: 112px;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: var(--card);
      cursor: pointer;
      text-align: left;
      transition: .18s ease;
    }

    .category-card:hover {
      transform: translateY(-2px);
      border-color: rgba(163,77,46,.35);
      box-shadow: 0 10px 24px rgba(73,57,38,.08);
    }

    .category-card span {
      display: block;
      margin-bottom: 20px;
      color: var(--rust);
      font-family: Georgia, serif;
      font-size: 12px;
      font-weight: 700;
    }

    .category-card strong {
      display: block;
      font-size: 14px;
    }

    .category-card small {
      color: var(--muted);
      font-size: 10px;
    }

    .dashboard-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.45fr) minmax(300px, .7fr);
      gap: 16px;
    }

    .panel {
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: rgba(255,253,248,.78);
      overflow: hidden;
    }

    .panel-head {
      padding: 20px 22px 15px;
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 15px;
    }

    .panel-head h3 {
      margin-bottom: 0;
      font-family: "STSong", "SimSun", Georgia, serif;
      font-size: 18px;
    }

    .panel-head small {
      color: var(--muted);
    }

    .recent-list {
      display: grid;
    }

    .recent-row {
      width: 100%;
      padding: 15px 22px;
      border: 0;
      border-bottom: 1px solid rgba(222,212,196,.72);
      background: transparent;
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr) auto;
      align-items: center;
      gap: 13px;
      cursor: pointer;
      text-align: left;
      transition: background .16s ease;
    }

    .recent-row:last-child { border-bottom: 0; }
    .recent-row:hover { background: rgba(228,184,79,.07); }

    .recipe-mini-mark {
      width: 38px;
      height: 38px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      color: #fff;
      font-family: "STSong", "SimSun", Georgia, serif;
      font-weight: 700;
      background: var(--rust);
    }

    .recipe-mini-mark.olive { background: var(--olive); }
    .recipe-mini-mark.gold { background: #b27b22; }
    .recipe-mini-mark.ink { background: #544b43; }

    .recent-copy strong {
      display: block;
      margin-bottom: 2px;
      font-size: 13px;
    }

    .recent-copy small {
      color: var(--muted);
      font-size: 10px;
    }

    .recent-version {
      color: var(--muted);
      font-family: Georgia, serif;
      font-size: 11px;
    }

    .insight-list {
      padding: 9px 20px 16px;
    }

    .insight {
      padding: 14px 2px;
      border-bottom: 1px solid var(--line);
    }

    .insight:last-child { border-bottom: 0; }

    .insight-top {
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .insight-top strong { font-size: 12px; }

    .trend {
      color: var(--olive);
      font-family: Georgia, serif;
      font-size: 11px;
      font-weight: 700;
    }

    .insight p {
      margin-bottom: 0;
      color: var(--muted);
      font-size: 10px;
    }

    .progress {
      height: 6px;
      margin-top: 10px;
      border-radius: 99px;
      overflow: hidden;
      background: var(--paper-deep);
    }

    .progress span {
      height: 100%;
      display: block;
      border-radius: inherit;
      background: var(--olive);
    }

    .filter-bar {
      margin-bottom: 18px;
      padding: 13px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: rgba(255,253,248,.72);
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .filter-search {
      min-width: 220px;
      flex: 1;
    }

    .field,
    .filter-search,
    .select-field {
      height: 42px;
      padding: 0 13px;
      border: 1px solid var(--line);
      border-radius: 11px;
      outline: 0;
      color: var(--ink);
      background: var(--card);
      transition: .16s ease;
    }

    .field:focus,
    .filter-search:focus,
    .select-field:focus,
    textarea:focus {
      border-color: rgba(163,77,46,.48);
      box-shadow: 0 0 0 4px rgba(163,77,46,.07);
    }

    .select-field {
      min-width: 140px;
    }

    .recipe-count {
      margin-left: auto;
      padding: 0 8px;
      color: var(--muted);
      font-size: 11px;
      white-space: nowrap;
    }

    .recipe-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 15px;
    }

    .recipe-card {
      min-height: 290px;
      padding: 0;
      border: 1px solid var(--line);
      border-radius: 21px;
      overflow: hidden;
      background: var(--card);
      cursor: pointer;
      text-align: left;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }

    .recipe-card:hover {
      transform: translateY(-3px);
      border-color: rgba(163,77,46,.32);
      box-shadow: 0 15px 32px rgba(73,57,38,.1);
    }

    .recipe-art {
      height: 108px;
      padding: 16px;
      overflow: hidden;
      position: relative;
      background: var(--tone, #dfc6aa);
    }

    .recipe-art:before,
    .recipe-art:after {
      content: "";
      position: absolute;
      border-radius: 50%;
      border: 1px solid rgba(78,56,34,.16);
      background: rgba(255,253,245,.3);
    }

    .recipe-art:before {
      width: 120px;
      height: 120px;
      right: 18px;
      bottom: -65px;
      box-shadow: inset 0 0 0 15px rgba(255,255,255,.12);
    }

    .recipe-art:after {
      width: 62px;
      height: 62px;
      right: 58px;
      bottom: -17px;
      background: rgba(126,72,39,.18);
    }

    .recipe-number {
      position: relative;
      z-index: 1;
      color: rgba(62,43,27,.7);
      font-family: Georgia, serif;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .1em;
    }

    .recipe-art-letter {
      position: absolute;
      right: 22px;
      top: 9px;
      color: rgba(70,42,24,.62);
      font-family: "STSong", "SimSun", Georgia, serif;
      font-size: 54px;
      font-weight: 700;
      line-height: 1;
      z-index: 2;
    }

    .recipe-body {
      padding: 17px 18px 18px;
    }

    .recipe-meta {
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 8px;
      border-radius: 99px;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: .04em;
    }

    .badge:before {
      content: "";
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: currentColor;
    }

    .badge.stable {
      color: #52654b;
      background: var(--olive-soft);
    }

    .badge.testing {
      color: #9a6c18;
      background: #f3e6bd;
    }

    .badge.iterating {
      color: #875039;
      background: var(--pink-soft);
    }

    .badge.draft {
      color: #606b6d;
      background: var(--blue-soft);
    }

    .version-label {
      color: var(--muted);
      font-family: Georgia, serif;
      font-size: 10px;
    }

    .recipe-card .version-label {
      color: var(--ink);
      font-size: 18px;
      font-weight: 700;
      line-height: 1;
    }

    .recipe-body h3 {
      margin-bottom: 7px;
      font-family: "STSong", "SimSun", Georgia, serif;
      font-size: 20px;
      line-height: 1.28;
    }

    .recipe-description {
      height: 36px;
      margin-bottom: 15px;
      overflow: hidden;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.7;
    }

    .recipe-facts {
      padding-top: 12px;
      border-top: 1px solid var(--line);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .recipe-facts div {
      min-width: 0;
    }

    .recipe-facts small {
      display: block;
      color: #9b9186;
      font-size: 8px;
      letter-spacing: .08em;
    }

    .recipe-facts strong {
      display: block;
      margin-top: 2px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 10px;
    }

    .empty-state {
      grid-column: 1 / -1;
      padding: 70px 24px;
      border: 1px dashed #cfc3b2;
      border-radius: 20px;
      color: var(--muted);
      background: rgba(255,255,255,.35);
      text-align: center;
    }

    .empty-state strong {
      display: block;
      margin-bottom: 6px;
      color: var(--ink);
    }

    .calculator-layout {
      display: grid;
      grid-template-columns: minmax(310px, .72fr) minmax(0, 1.28fr);
      gap: 18px;
      align-items: start;
    }

    .calculator-controls,
    .calculator-result {
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: var(--card);
    }

    .calculator-controls {
      padding: 24px;
      position: sticky;
      top: 102px;
    }

    .control-group {
      margin-bottom: 21px;
    }

    .control-group > label,
    .form-label {
      display: block;
      margin-bottom: 8px;
      color: #62594f;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .08em;
    }

    .form-label-note {
      color: var(--muted);
      font-size: 9px;
      font-weight: 600;
      letter-spacing: 0;
    }

    .wide-select,
    .wide-input {
      width: 100%;
      height: 46px;
      padding: 0 13px;
      border: 1px solid var(--line);
      border-radius: 12px;
      outline: 0;
      color: var(--ink);
      background: #fffefa;
    }

    textarea.wide-input {
      height: auto;
      min-height: 104px;
      padding-top: 11px;
      padding-bottom: 11px;
      resize: vertical;
    }

    .mode-switch {
      padding: 4px;
      border-radius: 13px;
      background: var(--paper-deep);
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 4px;
    }

    .mode-button {
      min-height: 37px;
      padding: 7px;
      border: 0;
      border-radius: 10px;
      color: var(--muted);
      background: transparent;
      cursor: pointer;
      font-size: 10px;
      font-weight: 700;
    }

    .mode-button.active {
      color: var(--rust-dark);
      background: var(--card);
      box-shadow: 0 3px 10px rgba(73,57,38,.08);
    }

    .quick-values {
      margin-top: 8px;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .quick-button {
      padding: 5px 9px;
      border: 1px solid var(--line);
      border-radius: 8px;
      color: var(--muted);
      background: transparent;
      cursor: pointer;
      font-size: 9px;
    }

    .quick-button:hover {
      color: var(--rust);
      border-color: rgba(163,77,46,.35);
    }

    .calc-note {
      padding: 13px;
      border-left: 3px solid var(--butter);
      border-radius: 0 10px 10px 0;
      color: var(--muted);
      background: #fbf5df;
      font-size: 10px;
    }

    .calculator-result {
      overflow: hidden;
    }

    .calc-summary {
      padding: 25px;
      color: #fffaf1;
      background: var(--ink);
      display: grid;
      grid-template-columns: minmax(0, 1fr) repeat(3, auto);
      align-items: center;
      gap: 26px;
    }

    .calc-summary h2 {
      margin-bottom: 3px;
      font-size: 23px;
    }

    .calc-summary p {
      margin-bottom: 0;
      color: #c9c0b5;
      font-size: 10px;
    }

    .summary-number small {
      display: block;
      margin-bottom: 4px;
      color: #a99e91;
      font-size: 8px;
      letter-spacing: .08em;
    }

    .summary-number strong {
      font-family: Georgia, serif;
      font-size: 20px;
      white-space: nowrap;
    }

    .table-wrap {
      overflow-x: auto;
    }

    table {
      width: 100%;
      border-collapse: collapse;
    }

    th, td {
      padding: 13px 18px;
      border-bottom: 1px solid var(--line);
      text-align: left;
      font-size: 11px;
    }

    th {
      color: var(--muted);
      background: #faf7f0;
      font-size: 9px;
      letter-spacing: .07em;
      font-weight: 800;
    }

    tr:last-child td { border-bottom: 0; }

    .ingredient-name {
      font-weight: 700;
    }

    .scaled-amount {
      color: var(--rust);
      font-family: Georgia, serif;
      font-size: 15px;
      font-weight: 700;
    }

    .table-total td {
      border-top: 2px solid var(--ink);
      background: #fbf8f2;
      font-weight: 800;
    }

    .calc-footer {
      padding: 16px 20px;
      border-top: 1px solid var(--line);
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }

    .cost-stats {
      margin-bottom: 18px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .cost-stat {
      padding: 16px 18px;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: rgba(255,253,248,.82);
    }

    .cost-stat small {
      display: block;
      margin-bottom: 7px;
      color: var(--muted);
      font-size: 12px;
    }

    .cost-stat strong {
      font-family: Georgia, "Times New Roman", serif;
      font-size: 30px;
      line-height: 1;
    }

    .price-library {
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      overflow: hidden;
      background: var(--card);
    }

    .price-library-head {
      padding: 17px 19px;
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
    }

    .price-library-head h3 {
      margin-bottom: 3px;
      font-family: "STSong", "SimSun", Georgia, serif;
      font-size: 22px;
    }

    .price-library-head p {
      margin-bottom: 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.6;
    }

    .price-search {
      width: min(300px, 40vw);
      height: 40px;
      padding: 0 12px;
      border: 1px solid var(--line);
      border-radius: 11px;
      outline: 0;
      color: var(--ink);
      background: #fffefa;
      font-size: 13px;
    }

    .price-search:focus,
    .price-inline:focus,
    .price-unit-select:focus {
      border-color: rgba(163,77,46,.55);
      box-shadow: 0 0 0 3px rgba(163,77,46,.08);
    }

    .price-table {
      min-width: 820px;
    }

    .price-table td {
      padding-top: 15px;
      padding-bottom: 15px;
      vertical-align: middle;
      font-size: 12px;
    }

    .price-table th {
      font-size: 11px;
    }

    .price-table th:last-child,
    .price-table td:last-child {
      width: 66px;
      text-align: right;
    }

    .price-inline,
    .price-unit-select {
      height: 40px;
      border: 1px solid transparent;
      border-radius: 9px;
      outline: 0;
      color: var(--ink);
      background: rgba(245,240,230,.58);
      font-size: 12px;
    }

    .price-inline {
      width: 100%;
      min-width: 92px;
      padding: 0 10px;
    }

    .price-name-input {
      min-width: 150px;
      font-weight: 700;
    }

    .price-spec-inputs,
    .price-money-input {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .price-spec-inputs .price-inline {
      width: 86px;
      min-width: 72px;
    }

    .price-unit-select {
      width: 68px;
      padding: 0 7px;
      cursor: pointer;
    }

    .price-money-input {
      color: var(--muted);
      font-family: Georgia, serif;
    }

    .price-money-input .price-inline {
      width: 98px;
      min-width: 82px;
    }

    .price-unit-value strong {
      display: block;
      font-size: 13px;
    }

    .price-unit-value small {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.5;
    }

    .price-status {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 5px 8px;
      border-radius: 99px;
      color: #7a674f;
      background: #f1e7d7;
      font-size: 10px;
      font-weight: 800;
      white-space: nowrap;
    }

    .price-status.ready {
      color: #53694c;
      background: #e1e9dc;
    }

    .price-status.estimated {
      color: #4e6968;
      background: var(--blue-soft);
    }

    .price-status:before {
      content: "";
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: currentColor;
    }

    .cost-cell-action {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 7px;
    }

    .estimated-cost {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 7px;
    }

    .estimated-cost strong {
      font-size: 12px;
    }

    .cost-link-button {
      min-height: 30px;
      padding: 5px 9px;
      border: 1px solid rgba(163,77,46,.34);
      border-radius: 9px;
      color: var(--rust-dark);
      background: #fff8f2;
      cursor: pointer;
      font-size: 11px;
      font-weight: 800;
      white-space: nowrap;
      transition: .17s ease;
    }

    .cost-link-button:hover {
      border-color: var(--rust);
      background: #f8e8df;
      transform: translateY(-1px);
    }

    @keyframes priceRowHighlight {
      0%, 100% { background: transparent; }
      28% { background: #fff1d2; }
    }

    .price-table tr.price-row-highlight td {
      animation: priceRowHighlight 1.5s ease both;
    }

    .price-delete {
      padding: 5px 3px;
      border: 0;
      color: #9a8f82;
      background: transparent;
      cursor: pointer;
      font-size: 11px;
    }

    .price-delete:hover { color: var(--rust); }

    .price-library-foot {
      padding: 14px 18px;
      border-top: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .price-library-foot p {
      margin-bottom: 0;
      color: var(--muted);
      font-size: 11px;
    }

    .cost-summary-grid {
      margin-bottom: 17px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 9px;
    }

    .cost-summary-card {
      padding: 14px 15px;
      border: 1px solid var(--line);
      border-radius: 13px;
      background: #faf7ef;
    }

    .cost-summary-card small {
      display: block;
      margin-bottom: 5px;
      color: var(--muted);
      font-size: 10px;
    }

    .cost-summary-card strong {
      font-family: Georgia, serif;
      font-size: 20px;
    }

    .cost-detail-note {
      margin-top: 15px;
      padding: 13px 14px;
      border-left: 3px solid var(--butter);
      border-radius: 0 10px 10px 0;
      color: var(--muted);
      background: #fbf5df;
      font-size: 11px;
      line-height: 1.65;
    }

    #costs .page-header p {
      font-size: 13px;
      line-height: 1.7;
    }

    #costs .primary-button,
    #costs .secondary-button {
      font-size: 12px;
    }

    .cost-detail-note .secondary-button {
      min-height: 34px;
      margin-top: 10px;
      padding: 7px 11px;
    }

    .version-hero {
      padding: 25px;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      color: #fefaf1;
      background: #4f5848;
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(250px, .8fr);
      gap: 30px;
    }

    .version-hero h2 {
      margin-bottom: 8px;
      font-size: 30px;
    }

    .version-hero p {
      max-width: 650px;
      margin-bottom: 0;
      color: #d7ddcf;
      font-size: 12px;
    }

    .version-flow {
      align-self: center;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      font-size: 10px;
    }

    .flow-chip {
      padding: 8px 10px;
      border: 1px solid rgba(255,255,255,.22);
      border-radius: 99px;
      white-space: nowrap;
    }

    .version-grid {
      margin-top: 18px;
      display: grid;
      grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr);
      gap: 16px;
    }

    .timeline {
      padding: 22px;
    }

    .timeline-item {
      padding: 0 0 24px 30px;
      position: relative;
    }

    .timeline-item:last-child { padding-bottom: 0; }

    .timeline-item:before {
      content: "";
      position: absolute;
      left: 7px;
      top: 8px;
      bottom: -8px;
      width: 1px;
      background: var(--line);
    }

    .timeline-item:last-child:before { display: none; }

    .timeline-dot {
      position: absolute;
      left: 0;
      top: 3px;
      width: 15px;
      height: 15px;
      border: 3px solid var(--card);
      border-radius: 50%;
      background: var(--rust);
      box-shadow: 0 0 0 1px var(--rust);
    }

    .timeline-date {
      margin-bottom: 4px;
      color: var(--muted);
      font-family: Georgia, serif;
      font-size: 9px;
    }

    .timeline-item h3 {
      margin-bottom: 6px;
      font-size: 14px;
    }

    .timeline-item p {
      margin-bottom: 8px;
      color: var(--muted);
      font-size: 10px;
    }

    .change-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }

    .change-tag {
      padding: 4px 7px;
      border-radius: 7px;
      color: #6a543e;
      background: #efe4d2;
      font-size: 8px;
    }

    .compare-cards {
      padding: 16px;
      display: grid;
      gap: 10px;
    }

    .compare-card {
      padding: 15px;
      border: 1px solid var(--line);
      border-radius: 13px;
      background: #fffefa;
    }

    .compare-card.active {
      border-color: rgba(163,77,46,.44);
      background: #fff9f4;
    }

    .compare-title {
      margin-bottom: 11px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .compare-title strong { font-size: 12px; }

    .compare-row {
      padding: 5px 0;
      display: flex;
      justify-content: space-between;
      gap: 15px;
      color: var(--muted);
      font-size: 9px;
    }

    .compare-row b {
      color: var(--ink);
      font-weight: 700;
    }

    .works-layout {
      display: grid;
      grid-template-columns: 340px minmax(0, 1fr);
      gap: 18px;
      align-items: start;
    }

    .upload-panel {
      padding: 21px;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: var(--card);
      position: sticky;
      top: 102px;
    }

    .upload-panel h3 {
      margin-bottom: 4px;
      font-family: "STSong", "SimSun", Georgia, serif;
      font-size: 19px;
    }

    .upload-panel > p {
      margin-bottom: 17px;
      color: var(--muted);
      font-size: 10px;
    }

    .drop-zone {
      min-height: 190px;
      margin-bottom: 14px;
      border: 1px dashed #baaa94;
      border-radius: 15px;
      overflow: visible;
      background: #faf7ef;
      display: grid;
      place-items: center;
      text-align: center;
      position: relative;
      isolation: isolate;
      transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
    }

    .drop-zone.dragover {
      border-color: var(--rust);
      background: #fff5ee;
      box-shadow: 0 0 0 4px rgba(163, 77, 46, .08);
    }

    .drop-zone input {
      position: absolute;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
    }

    .drop-copy {
      width: 100%;
      min-height: 188px;
      padding: 22px;
      border: 0;
      border-radius: inherit;
      background: transparent;
      color: inherit;
      cursor: pointer;
    }

    .drop-copy strong {
      display: block;
      margin-bottom: 5px;
      font-size: 12px;
    }

    .drop-copy small {
      color: var(--muted);
      font-size: 9px;
    }

    .form-grid {
      display: grid;
      gap: 12px;
    }

    .works-gallery {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 15px;
    }

    .work-card {
      border: 1px solid var(--line);
      border-radius: 20px;
      overflow: visible;
      background: var(--card);
      position: relative;
      isolation: isolate;
      transition: box-shadow .2s ease, transform .2s ease;
    }

    .work-card:hover {
      z-index: 4;
      box-shadow: 0 18px 44px rgba(73, 57, 38, .12);
    }

    .work-media,
    .work-art {
      width: 100%;
      height: 230px;
      display: block;
      background: #dbc2a6;
    }

    .work-media {
      border-radius: 19px 19px 0 0;
      overflow: visible;
      position: relative;
      isolation: isolate;
      background:
        radial-gradient(circle at 50% 45%, rgba(255,255,255,.76), transparent 46%),
        linear-gradient(135deg, #ede3d3, #d8c4aa);
      transition: box-shadow .2s ease, background .2s ease;
    }

    .work-media.is-dragover {
      background: #f7e4d7;
      box-shadow: inset 0 0 0 3px rgba(163, 77, 46, .28);
    }

    .work-photo-stack {
      position: absolute;
      inset: 17px 42px 23px;
      perspective: 900px;
      pointer-events: none;
    }

    .work-photo-layer {
      --photo-x: 0px;
      --photo-y: 4px;
      --photo-rotate: 0deg;
      --photo-scale: 1;
      position: absolute;
      top: 50%;
      left: 50%;
      width: min(82%, 330px);
      height: 190px;
      padding: 3px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.94);
      border-radius: 17px;
      background: #f6f0e7;
      box-shadow: 0 10px 21px rgba(62, 40, 25, .2), 0 1px 2px rgba(62, 40, 25, .14);
      cursor: pointer;
      pointer-events: auto;
      transform: translate(-50%, -50%) translate(var(--photo-x), var(--photo-y)) rotate(var(--photo-rotate)) scale(var(--photo-scale));
      transform-origin: 50% 62%;
      transition: transform .28s cubic-bezier(.22, 1, .36, 1), box-shadow .2s ease, filter .2s ease;
    }

    .work-photo-layer[data-stack-position="0"] { z-index: 4; --photo-x: 0px; --photo-y: 7px; --photo-rotate: 0deg; --photo-scale: 1; }
    .work-photo-layer[data-stack-position="1"] { z-index: 3; --photo-x: -42px; --photo-y: -8px; --photo-rotate: -7deg; --photo-scale: .9; }
    .work-photo-layer[data-stack-position="2"] { z-index: 2; --photo-x: 42px; --photo-y: -6px; --photo-rotate: 7deg; --photo-scale: .9; }
    .work-photo-layer[data-stack-position="3"] { z-index: 1; --photo-x: 0px; --photo-y: -18px; --photo-rotate: 3deg; --photo-scale: .82; }

    .work-photo-stack:hover .work-photo-layer[data-stack-position="0"] {
      transform: translate(-50%, -50%) translate(0, 9px) rotate(0deg) scale(1.025);
      box-shadow: 0 14px 26px rgba(62, 40, 25, .25), 0 1px 2px rgba(62, 40, 25, .16);
    }
    .work-photo-stack:hover .work-photo-layer[data-stack-position="1"] { transform: translate(-50%, -50%) translate(-55px, -10px) rotate(-9deg) scale(.92); }
    .work-photo-stack:hover .work-photo-layer[data-stack-position="2"] { transform: translate(-50%, -50%) translate(55px, -8px) rotate(9deg) scale(.92); }
    .work-photo-stack:hover .work-photo-layer[data-stack-position="3"] { transform: translate(-50%, -50%) translate(0, -24px) rotate(4deg) scale(.84); }

    .work-photo-layer:focus-visible {
      outline: 2px solid var(--rust);
      outline-offset: 3px;
    }

    .work-photo {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 13px;
      background: #f5f1eb;
      object-fit: cover;
      pointer-events: none;
    }

    .work-photo-count,
    .work-photo-add,
    .work-photo-remove {
      position: absolute;
      z-index: 10;
      border: 1px solid rgba(255,255,255,.84);
      color: #fff;
      background: rgba(47, 42, 36, .72);
      box-shadow: 0 3px 10px rgba(44,34,28,.18);
    }

    .work-photo-count {
      left: 11px;
      bottom: 10px;
      padding: 4px 8px;
      border-radius: 999px;
      font-size: 9px;
      pointer-events: none;
    }

    .work-photo-add,
    .work-photo-remove {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      padding: 0;
      border-radius: 999px;
      font-size: 17px;
      line-height: 1;
      cursor: pointer;
    }

    .work-photo-add { right: 11px; bottom: 10px; }
    .work-photo-remove { top: 10px; right: 11px; font-size: 18px; }
    .work-photo-add:hover,
    .work-photo-remove:hover { background: var(--rust); }

    .work-photo-input {
      position: absolute;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
    }

    .work-photo-empty {
      position: absolute;
      inset: 0;
      width: 100%;
      border: 0;
      border-radius: inherit;
      background: transparent;
      color: var(--muted);
      display: grid;
      place-items: center;
      align-content: center;
      gap: 4px;
      cursor: pointer;
    }

    .work-photo-empty strong { color: var(--ink); font-size: 12px; }
    .work-photo-empty small { font-size: 9px; }

    .drop-zone .work-photo-stack { inset: 13px 30px 21px; }
    .drop-zone .work-photo-layer { width: min(74%, 225px); height: 150px; }
    .drop-zone .work-photo-layer[data-stack-position="1"] { --photo-x: -31px; }
    .drop-zone .work-photo-layer[data-stack-position="2"] { --photo-x: 31px; }
    .drop-zone .work-photo-stack:hover .work-photo-layer[data-stack-position="1"] { transform: translate(-50%, -50%) translate(-39px, -10px) rotate(-9deg) scale(.92); }
    .drop-zone .work-photo-stack:hover .work-photo-layer[data-stack-position="2"] { transform: translate(-50%, -50%) translate(39px, -8px) rotate(9deg) scale(.92); }

    .work-photo-hover-preview {
      position: fixed;
      z-index: 300;
      width: min(520px, calc(100vw - 32px));
      height: min(520px, calc(100vh - 32px));
      padding: 9px;
      border: 1px solid var(--line);
      border-radius: 17px;
      background: rgba(255,253,248,.98);
      box-shadow: 0 24px 70px rgba(47, 34, 24, .3);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: scale(.975);
      transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
    }

    .work-photo-hover-preview.visible {
      opacity: 1;
      visibility: visible;
      transform: scale(1);
    }

    .work-photo-hover-preview img {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 11px;
      object-fit: contain;
    }

    .work-art {
      display: grid;
      place-items: center;
      overflow: hidden;
      position: relative;
      border-radius: 19px 19px 0 0;
    }

    .work-art:before {
      content: "";
      width: 176px;
      height: 176px;
      border-radius: 50%;
      background: rgba(255,249,230,.62);
      box-shadow:
        inset 0 0 0 20px rgba(118,74,42,.12),
        48px 38px 0 -20px rgba(94,64,38,.12);
    }

    .work-art:after {
      content: attr(data-letter);
      position: absolute;
      font-family: "STSong", "SimSun", Georgia, serif;
      font-size: 56px;
      font-weight: 700;
      color: rgba(83,54,31,.6);
    }

    .work-art.olive-tone { background: #b9c0a7; }
    .work-art.gold-tone { background: #e5c679; }

    .work-body {
      padding: 16px;
    }

    .work-meta {
      margin-bottom: 7px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: var(--muted);
      font-size: 9px;
    }

    .work-body h3 {
      margin-bottom: 5px;
      font-family: "STSong", "SimSun", Georgia, serif;
      font-size: 18px;
    }

    .work-body p {
      min-height: 32px;
      margin-bottom: 10px;
      color: var(--muted);
      font-size: 10px;
    }

    .work-note-view {
      margin-bottom: 10px;
    }

    .work-note-view .work-note-text {
      min-height: 32px;
      margin-bottom: 5px;
      line-height: 1.65;
      white-space: pre-wrap;
    }

    .work-note-view .work-note-text.empty {
      color: #9b9187;
    }

    .work-note-edit-button {
      padding: 0;
      font-size: 10px;
    }

    .work-note-form {
      margin: 1px 0 12px;
      padding: 11px;
      border: 1px solid rgba(163, 77, 46, .17);
      border-radius: 12px;
      background: #faf6ef;
    }

    .work-note-form .form-label {
      display: block;
      margin-bottom: 7px;
    }

    .work-note-input {
      width: 100%;
      min-height: 92px;
      resize: vertical;
      line-height: 1.6;
    }

    .work-note-form-actions {
      margin-top: 8px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
    }

    .work-note-form-actions .primary-button,
    .work-note-form-actions .secondary-button {
      min-height: 32px;
      padding: 7px 11px;
      font-size: 10px;
    }

    .work-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .work-gallery-hint {
      margin: -8px 0 16px;
      color: var(--muted);
      font-size: 9px;
      text-align: right;
    }

    @media (prefers-reduced-motion: reduce) {
      .work-card,
      .work-photo-layer,
      .work-photo-hover-preview { transition-duration: .01ms; }
    }

    .modal {
      position: fixed;
      inset: 0;
      padding: 22px;
      background: rgba(39,32,25,.52);
      backdrop-filter: blur(8px);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 100;
    }

    .modal.open {
      display: flex;
      animation: modalFade .2s ease both;
    }

    @keyframes modalFade {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .modal-card {
      width: min(760px, 100%);
      max-height: calc(100vh - 44px);
      border: 1px solid rgba(255,255,255,.32);
      border-radius: 22px;
      overflow: auto;
      background: var(--card);
      box-shadow: 0 28px 70px rgba(25,18,12,.3);
    }

    .modal-card.detail-card {
      width: min(1040px, 100%);
    }

    .modal-head {
      min-height: 69px;
      padding: 16px 22px;
      border-bottom: 1px solid var(--line);
      background: rgba(255,253,248,.94);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      position: sticky;
      top: 0;
      z-index: 4;
    }

    .modal-head strong {
      font-family: "STSong", "SimSun", Georgia, serif;
      font-size: 19px;
    }

    .close-button {
      width: 36px;
      height: 36px;
      border: 1px solid var(--line);
      border-radius: 11px;
      background: transparent;
      cursor: pointer;
      font-size: 18px;
    }

    .close-button:hover { background: var(--paper-deep); }

    .modal-body {
      padding: 22px;
    }

    .form-two {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

    .form-one {
      margin-top: 14px;
    }

    .form-help {
      margin: 6px 0 0;
      color: var(--muted);
      font-size: 9px;
    }

    .modal-actions {
      padding: 15px 22px;
      border-top: 1px solid var(--line);
      display: flex;
      justify-content: flex-end;
      gap: 9px;
    }

    .detail-hero {
      padding: 27px 27px 22px;
      background:
        radial-gradient(circle at 92% 18%, rgba(228,184,79,.25), transparent 15rem),
        #faf6ed;
    }

    .detail-topline {
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .detail-hero h2 {
      margin-bottom: 8px;
      font-size: clamp(28px, 5vw, 42px);
      letter-spacing: -.04em;
    }

    .detail-hero p {
      max-width: 720px;
      margin-bottom: 18px;
      color: var(--muted);
      font-size: 11px;
    }

    .detail-facts {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
    }

    .detail-fact {
      min-width: 120px;
      padding: 9px 12px;
      border: 1px solid var(--line);
      border-radius: 11px;
      background: rgba(255,255,255,.6);
    }

    .detail-fact small {
      display: block;
      color: var(--muted);
      font-size: 8px;
    }

    .detail-fact strong {
      display: block;
      margin-top: 2px;
      font-size: 11px;
    }

    .detail-tabs {
      padding: 0 23px;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      display: flex;
      gap: 20px;
      overflow-x: auto;
    }

    .detail-tab {
      padding: 13px 2px 11px;
      border: 0;
      border-bottom: 2px solid transparent;
      color: var(--muted);
      background: none;
      cursor: pointer;
      font-size: 10px;
      font-weight: 800;
      white-space: nowrap;
    }

    .detail-tab.active {
      color: var(--rust);
      border-color: var(--rust);
    }

    .detail-content {
      min-height: 330px;
      padding: 24px;
    }

    .detail-split {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(240px, .8fr);
      gap: 20px;
    }

    .note-card {
      padding: 17px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #faf7ef;
    }

    .note-card h3 {
      margin-bottom: 9px;
      font-size: 12px;
    }

    .note-card p {
      margin-bottom: 0;
      color: var(--muted);
      white-space: pre-line;
      font-size: 10px;
    }

    .conclusion-editor {
      min-width: 0;
    }

    .conclusion-header {
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .conclusion-header h3 {
      margin-bottom: 0;
    }

    .conclusion-add,
    .conclusion-delete {
      border: 0;
      border-radius: 8px;
      cursor: pointer;
      font: inherit;
      font-size: 8px;
      font-weight: 800;
      transition: color .2s ease, background .2s ease;
    }

    .conclusion-add {
      padding: 7px 9px;
      color: var(--rust);
      background: #f4e7da;
    }

    .conclusion-add:hover {
      background: #edd8c5;
    }

    .conclusion-list {
      display: grid;
      gap: 9px;
    }

    .conclusion-item {
      position: relative;
    }

    .conclusion-input {
      width: 100%;
      min-height: 88px;
      padding: 11px 43px 11px 12px;
      border: 1px solid #dfd1bf;
      border-radius: 10px;
      outline: none;
      resize: vertical;
      color: var(--ink);
      background: rgba(255, 253, 248, .92);
      font: inherit;
      font-size: 10px;
      line-height: 1.7;
      transition: border-color .2s ease, box-shadow .2s ease;
    }

    .conclusion-input:focus {
      border-color: rgba(177, 82, 43, .58);
      box-shadow: 0 0 0 3px rgba(177, 82, 43, .08);
    }

    .conclusion-delete {
      position: absolute;
      top: 8px;
      right: 8px;
      padding: 6px;
      color: var(--muted);
      background: transparent;
    }

    .conclusion-delete:hover {
      color: #9a372c;
      background: #f4e2dc;
    }

    .conclusion-empty {
      padding: 21px 12px;
      border: 1px dashed #dfd1bf;
      border-radius: 10px;
      color: var(--muted);
      text-align: center;
      font-size: 9px;
      line-height: 1.65;
    }

    .conclusion-autosave {
      margin-top: 10px;
      display: flex;
      align-items: center;
      gap: 6px;
      color: var(--muted);
      font-size: 8px;
    }

    .conclusion-autosave::before {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #79946f;
      content: "";
    }

    .conclusion-autosave.save-error {
      color: #9a372c;
    }

    .conclusion-autosave.save-error::before {
      background: #b64b3f;
    }

    .tag-list {
      margin-top: 13px;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .tag {
      padding: 5px 8px;
      border-radius: 8px;
      color: #715a42;
      background: #eee2d1;
      font-size: 8px;
    }

    .step-list {
      display: grid;
      gap: 12px;
    }

    .step-row {
      padding: 15px;
      border: 1px solid var(--line);
      border-radius: 13px;
      display: grid;
      grid-template-columns: 30px minmax(0, 1fr);
      gap: 11px;
      background: #fffefa;
    }

    .step-number {
      width: 28px;
      height: 28px;
      border-radius: 9px;
      display: grid;
      place-items: center;
      color: #fff;
      background: var(--olive);
      font-family: Georgia, serif;
      font-size: 10px;
      font-weight: 700;
    }

    .step-row p {
      margin-bottom: 0;
      color: #625a51;
      font-size: 11px;
    }

    .source-box {
      margin-top: 16px;
      padding: 12px 14px;
      border: 1px dashed #cabaa4;
      border-radius: 11px;
      color: var(--muted);
      background: #fbf8f1;
      font-size: 9px;
      word-break: break-all;
    }

    .toast {
      position: fixed;
      right: 22px;
      bottom: 22px;
      max-width: min(360px, calc(100vw - 44px));
      padding: 13px 16px;
      border-radius: 12px;
      color: #fff;
      background: var(--ink);
      box-shadow: 0 14px 32px rgba(30,23,17,.24);
      transform: translateY(18px);
      opacity: 0;
      pointer-events: none;
      transition: .2s ease;
      z-index: 200;
      font-size: 11px;
    }

    .toast.show {
      transform: translateY(0);
      opacity: 1;
    }

    .mobile-title { display: none; }

    /* V0.3 hybrid storage status. */
    .local-note[data-storage-mode="connecting"] .local-dot {
      background: #c69247;
      box-shadow: 0 0 0 4px rgba(198,146,71,.14);
      animation: storage-pulse 1.4s ease-in-out infinite;
    }

    .local-note[data-storage-mode="sql"] .local-dot {
      background: #5e8656;
      box-shadow: 0 0 0 4px rgba(94,134,86,.14);
    }

    .local-note[data-storage-mode="offline"] .local-dot {
      background: #9b8777;
      box-shadow: 0 0 0 4px rgba(155,135,119,.13);
    }

    .storage-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 4px 7px;
    }

    .storage-sync-time {
      margin: 7px 0 0;
      color: #8d7b6b;
      font-size: 11px;
    }

    .storage-separator { color: #c5b8a8; }

    @keyframes storage-pulse {
      0%, 100% { opacity: .62; transform: scale(.88); }
      50% { opacity: 1; transform: scale(1); }
    }

    @media (prefers-reduced-motion: reduce) {
      .local-note[data-storage-mode="connecting"] .local-dot { animation: none; }
    }


    /* V0.4 compatibility: retain V0.3 readability and data behavior. */
    .recipe-card .recipe-description {
      height: 42px;
      font-size: 12px;
      line-height: 1.65;
    }

    .recipe-card .recipe-facts {
      padding-top: 15px;
      gap: 12px 16px;
    }

    .recipe-card .recipe-facts small {
      font-size: 10px;
      line-height: 1.5;
      letter-spacing: .05em;
    }

    .recipe-card .recipe-facts strong {
      margin-top: 4px;
      font-size: 13px;
      line-height: 1.45;
    }

    .detail-card .detail-tab {
      padding: 16px 2px 14px;
      font-size: 13px;
    }

    .detail-card .detail-content {
      font-size: 14px;
      line-height: 1.7;
    }

    .detail-card .detail-content th {
      padding: 15px 18px;
      font-size: 11px;
    }

    .detail-card .detail-content td {
      padding: 15px 18px;
      font-size: 14px;
      line-height: 1.55;
    }

    .detail-card .note-card {
      padding: 20px;
    }

    .detail-card .note-card h3 {
      margin-bottom: 11px;
      font-size: 15px;
    }

    .detail-card .note-card p {
      font-size: 13px;
      line-height: 1.75;
    }

    .detail-card .conclusion-input {
      min-height: 112px;
      font-size: 13px;
      line-height: 1.75;
    }

    .detail-card .conclusion-add,
    .detail-card .conclusion-delete,
    .detail-card .conclusion-autosave {
      font-size: 10px;
    }

    .detail-card .step-row {
      padding: 17px;
      grid-template-columns: 32px minmax(0, 1fr);
      gap: 13px;
    }

    .detail-card .step-number {
      width: 30px;
      height: 30px;
      font-size: 11px;
    }

    .detail-card .step-row p {
      font-size: 14px;
      line-height: 1.7;
    }

    .detail-card .tag {
      padding: 6px 9px;
      font-size: 10px;
    }

    .detail-card .source-box {
      padding: 14px 16px;
      font-size: 11px;
      line-height: 1.65;
    }

    .data-intro {
      margin-bottom: 18px;
      padding: 20px 22px;
      border: 1px solid rgba(100, 112, 88, .24);
      border-radius: 18px;
      background: linear-gradient(125deg, rgba(223, 228, 216, .74), rgba(255, 253, 248, .82));
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 22px;
    }

    .data-intro strong {
      display: block;
      margin-bottom: 5px;
      font-family: "STSong", "SimSun", Georgia, serif;
      font-size: 18px;
    }

    .data-intro p {
      max-width: 760px;
      margin-bottom: 0;
      color: var(--muted);
      font-size: 11px;
    }

    .data-snapshot {
      flex: 0 0 auto;
      padding: 8px 11px;
      border-radius: 10px;
      color: #4f6348;
      background: rgba(255,255,255,.64);
      font-family: Georgia, serif;
      font-size: 10px;
      white-space: nowrap;
    }

    .data-stats-grid {
      margin-bottom: 18px;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 10px;
    }

    .data-stat {
      padding: 15px 16px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: rgba(255,253,248,.78);
    }

    .data-stat small {
      display: block;
      margin-bottom: 6px;
      color: var(--muted);
      font-size: 9px;
    }

    .data-stat strong {
      font-family: Georgia, "Times New Roman", serif;
      font-size: 24px;
      line-height: 1;
    }

    .data-filter-bar {
      margin-bottom: 14px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: rgba(255,253,248,.72);
      display: grid;
      grid-template-columns: minmax(220px, 1.5fr) repeat(3, minmax(130px, .65fr)) auto;
      gap: 9px;
      align-items: center;
    }

    .data-count {
      padding: 0 7px;
      color: var(--muted);
      font-size: 10px;
      text-align: right;
      white-space: nowrap;
    }

    .data-list {
      display: grid;
      gap: 9px;
    }

    .data-row {
      width: 100%;
      padding: 15px 17px;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: rgba(255,253,248,.82);
      display: grid;
      grid-template-columns: minmax(220px, 1.25fr) minmax(160px, .7fr) minmax(250px, 1fr) auto;
      gap: 16px;
      align-items: center;
      cursor: pointer;
      text-align: left;
      transition: .17s ease;
    }

    .data-row:hover {
      transform: translateY(-1px);
      border-color: rgba(163,77,46,.33);
      background: var(--card);
      box-shadow: 0 8px 22px rgba(73,57,38,.07);
    }

    .data-title strong {
      display: block;
      margin-bottom: 3px;
      font-size: 12px;
    }

    .data-title small,
    .data-path {
      color: var(--muted);
      font-size: 9px;
    }

    .data-path {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .data-labels,
    .data-fields {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }

    .data-pill {
      padding: 4px 7px;
      border-radius: 7px;
      color: #6f5a46;
      background: #eee4d5;
      font-size: 8px;
      white-space: nowrap;
    }

    .data-pill.field {
      color: #51604b;
      background: var(--olive-soft);
    }

    .data-pill.review {
      color: #8b3d28;
      background: var(--pink-soft);
    }

    .data-quality {
      min-width: 56px;
      text-align: right;
    }

    .data-quality strong {
      display: block;
      color: var(--olive);
      font-family: Georgia, serif;
      font-size: 13px;
    }

    .data-quality small {
      color: var(--muted);
      font-size: 8px;
    }

    .source-detail-card { width: min(1120px, 100%); }

    .source-detail-hero {
      padding: 25px 28px 22px;
      border-bottom: 1px solid var(--line);
      background: linear-gradient(125deg, #fffdf8 0%, #f1eee1 100%);
    }

    .source-detail-hero h2 {
      margin: 10px 0 7px;
      font-size: clamp(25px, 4vw, 38px);
    }

    .source-detail-hero p {
      max-width: 850px;
      margin-bottom: 0;
      color: var(--muted);
      font-size: 11px;
    }

    .source-meta-grid {
      margin-top: 17px;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }

    .source-meta {
      padding: 10px;
      border: 1px solid rgba(114,91,62,.13);
      border-radius: 10px;
      background: rgba(255,255,255,.55);
    }

    .source-meta small { display: block; color: var(--muted); font-size: 8px; }
    .source-meta strong { display: block; margin-top: 3px; font-size: 10px; }

    .source-detail-body {
      padding: 21px 25px 28px;
      display: grid;
      gap: 18px;
    }

    .source-section {
      border: 1px solid var(--line);
      border-radius: 15px;
      overflow: hidden;
      background: #fffefa;
    }

    .source-section-head {
      padding: 13px 15px;
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      background: #faf7ef;
    }

    .source-section-head h3 { margin: 0; font-size: 12px; }
    .source-section-head small { color: var(--muted); font-size: 8px; }
    .source-section-body { padding: 15px; }

    .source-group + .source-group { margin-top: 15px; }
    .source-group summary { cursor: pointer; color: var(--rust-dark); font-size: 10px; font-weight: 700; }
    .source-group .table-wrap { margin-top: 9px; }

    .source-event-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .source-event {
      padding: 11px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fffdf8;
    }

    .source-event small { display: block; color: var(--muted); font-size: 8px; }
    .source-event strong { display: block; margin: 4px 0; font-size: 11px; }
    .source-event p { margin: 0; color: var(--muted); font-size: 8px; }

    .source-path-box {
      padding: 11px 12px;
      border: 1px dashed #cabaa4;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      color: var(--muted);
      background: #fbf8f1;
      font-size: 8px;
      word-break: break-all;
    }

    .source-empty {
      padding: 13px;
      border-radius: 10px;
      color: var(--muted);
      background: var(--paper);
      font-size: 9px;
    }

    .source-review-note {
      padding: 12px 14px;
      border: 1px solid #d7a998;
      border-radius: 11px;
      color: #7f3e2b;
      background: #fff7f2;
      font-size: 9px;
    }

    @media (max-width: 1180px) {
      .data-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .data-filter-bar { grid-template-columns: 1fr 1fr 1fr; }
      .data-filter-bar .filter-search { grid-column: 1 / -1; width: 100%; }
      .data-count { text-align: left; }
      .data-row { grid-template-columns: minmax(220px, 1fr) minmax(180px, .7fr) auto; }
      .data-path { grid-column: 1 / 3; }
    }

    @media (max-width: 760px) {
      .data-intro { align-items: flex-start; flex-direction: column; }
      .data-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .data-filter-bar { grid-template-columns: 1fr; }
      .data-filter-bar .filter-search { grid-column: auto; }
      .data-row { grid-template-columns: 1fr auto; gap: 10px; }
      .data-labels, .data-fields, .data-path { grid-column: 1 / -1; }
      .source-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .source-event-grid { grid-template-columns: 1fr; }
      .source-detail-hero, .source-detail-body { padding-left: 17px; padding-right: 17px; }
    }


    @media (max-width: 1180px) {
      .recipe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .category-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .calc-summary { grid-template-columns: 1fr 1fr 1fr; }
      .calc-summary > div:first-child { grid-column: 1 / -1; }
    }

    @media (max-width: 900px) {
      :root { --sidebar: 0px; }
      .app { display: block; }
      .sidebar {
        position: fixed;
        inset: auto 0 0 0;
        width: auto;
        height: 67px;
        padding: 7px 10px;
        border: 0;
        border-top: 1px solid var(--line);
        display: block;
      }
      .brand, .nav-label, .sidebar-bottom { display: none; }
      .nav {
        height: 100%;
        grid-template-columns: repeat(7, 1fr);
        gap: 3px;
      }
      .nav-button {
        min-height: 52px;
        padding: 4px;
        border-radius: 11px;
        justify-content: center;
        flex-direction: column;
        gap: 2px;
        font-size: 9px;
      }
      .nav-icon {
        width: 24px;
        height: 24px;
        border: 0;
        background: transparent;
      }
      .nav-button.active .nav-icon {
        color: var(--rust);
        background: transparent;
      }
      .topbar {
        height: 69px;
        padding: 0 18px;
      }
      .today { display: none; }
      .mobile-title {
        display: block;
        font-family: "STSong", "SimSun", Georgia, serif;
        font-size: 17px;
        white-space: nowrap;
      }
      .search-box { width: min(420px, 55vw); }
      .content { padding: 24px 18px 100px; }
      .hero { grid-template-columns: 1fr; }
      .hero-note { display: none; }
      .dashboard-grid,
      .version-grid,
      .works-layout,
      .calculator-layout {
        grid-template-columns: 1fr;
      }
      .calculator-controls, .upload-panel { position: static; }
      .version-hero { grid-template-columns: 1fr; }
      .version-flow { justify-content: flex-start; flex-wrap: wrap; }
    }

    @media (max-width: 650px) {
      .topbar {
        gap: 8px;
      }
      .mobile-title { font-size: 15px; }
      .search-box {
        flex: 1;
        width: auto;
        min-width: 0;
      }
      .search-box input { font-size: 11px; }
      .top-actions .primary-button {
        width: 40px;
        padding: 0;
        font-size: 0;
      }
      .top-actions .primary-button:after {
        content: "+";
        font-size: 21px;
        font-weight: 400;
      }
      .page-header {
        align-items: flex-start;
        flex-direction: column;
      }
      .hero {
        min-height: 0;
        padding: 29px 23px;
        border-radius: 22px;
      }
      .hero h1 { font-size: 37px; }
      .stats-grid,
      .recipe-grid,
      .works-gallery {
        grid-template-columns: 1fr;
      }
      .work-photo-hover-preview { display: none; }
      .work-gallery-hint { text-align: left; }
      .category-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .filter-bar { align-items: stretch; }
      .filter-search, .select-field { width: 100%; }
      .recipe-count { width: 100%; margin-left: 0; }
      .calc-summary { grid-template-columns: 1fr 1fr; gap: 18px; }
      .cost-stats,
      .cost-summary-grid { grid-template-columns: 1fr; }
      .price-library-head,
      .price-library-foot {
        align-items: stretch;
        flex-direction: column;
      }
      .price-search { width: 100%; }
      .form-two { grid-template-columns: 1fr; }
      .detail-split { grid-template-columns: 1fr; }
      .modal { padding: 8px; }
      .modal-card { max-height: calc(100vh - 16px); border-radius: 16px; }
      .modal-body, .detail-content { padding: 17px; }
      .detail-hero { padding: 22px 18px; }
      th, td { padding: 11px 12px; }
      .category-card { min-height: 102px; }
    }

    @media print {
      .sidebar, .topbar, .page-header, .calculator-controls, .calc-footer, .toast { display: none !important; }
      .app, .main, .content { display: block; padding: 0; margin: 0; }
      .view { display: none !important; }
      #calculator.view { display: block !important; }
      .calculator-layout { display: block; }
      .calculator-result { border: 0; }
      body { background: #fff; }
    }
    /* V0.4 visual experience: foundation, efficiency and brand atmosphere. */
    :root {
      --paper: #f4efe6;
      --paper-deep: #eae2d5;
      --card: #fffdf8;
      --ink: #2d2923;
      --muted: #716a61;
      --line: rgba(83, 67, 49, .15);
      --rust: #ad4f2f;
      --rust-dark: #84371f;
      --butter: #d6aa45;
      --olive: #5c6b58;
      --olive-soft: #dfe6dc;
      --pink-soft: #efdcd3;
      --blue-soft: #dfe7e5;
      --surface-raised: rgba(255, 253, 248, .92);
      --surface-soft: rgba(255, 253, 248, .68);
      --focus-ring: 0 0 0 4px rgba(173, 79, 47, .12);
      --shadow: 0 18px 48px rgba(69, 51, 34, .08);
      --shadow-soft: 0 8px 24px rgba(69, 51, 34, .065);
      --radius-lg: 22px;
      --radius-md: 16px;
      --radius-sm: 12px;
      --sidebar: 248px;
      --font-ui: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", system-ui, -apple-system, sans-serif;
    }

    body {
      background:
        radial-gradient(circle at 88% 2%, rgba(214, 170, 69, .13), transparent 32rem),
        radial-gradient(circle at 15% 78%, rgba(92, 107, 88, .055), transparent 30rem),
        var(--paper);
      font-size: 14px;
      letter-spacing: .005em;
    }

    body::before {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      opacity: .18;
      background-image:
        linear-gradient(rgba(80, 60, 40, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(80, 60, 40, .018) 1px, transparent 1px);
      background-size: 38px 38px;
      content: "";
    }

    ::selection {
      color: var(--ink);
      background: rgba(214, 170, 69, .35);
    }

    .app {
      position: relative;
      z-index: 1;
    }

    button,
    input,
    select,
    textarea {
      -webkit-tap-highlight-color: transparent;
    }

    :where(button, input, select, textarea, [tabindex]):focus-visible {
      outline: 2px solid var(--rust);
      outline-offset: 2px;
      box-shadow: var(--focus-ring);
    }

    .sidebar {
      height: 100dvh;
      padding: 20px 16px 16px;
      border-color: var(--line);
      background: rgba(250, 247, 240, .93);
      box-shadow: inset -1px 0 rgba(255, 255, 255, .6);
      font-family: var(--font-ui);
    }

    .brand {
      gap: 12px;
      padding: 6px 8px 22px;
    }

    .brand-mark {
      width: 42px;
      height: 42px;
      border-radius: 15px 15px 15px 6px;
      background: linear-gradient(145deg, #bc5c38, var(--rust-dark));
      box-shadow: 0 9px 22px rgba(132, 55, 31, .2);
    }

    .brand-copy strong {
      font-family: var(--font-ui);
      font-size: 18px;
    }

    .brand-copy small {
      color: #80766c;
      font-size: 10px;
      letter-spacing: .09em;
    }

    .nav-label {
      padding: 0 11px 8px;
      color: #9a8e81;
      font-size: 12px;
      line-height: 1.4;
    }

    .nav {
      min-height: 0;
      gap: 4px;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior-y: contain;
      padding: 0 5px 4px 0;
      scrollbar-color: rgba(173, 79, 47, .42) transparent;
      scrollbar-gutter: stable;
      scrollbar-width: thin;
    }

    .nav::-webkit-scrollbar { width: 7px; }
    .nav::-webkit-scrollbar-track { background: transparent; }
    .nav::-webkit-scrollbar-thumb {
      border: 2px solid transparent;
      border-radius: 999px;
      background: rgba(173, 79, 47, .42);
      background-clip: padding-box;
    }
    .nav::-webkit-scrollbar-thumb:hover { background-color: rgba(138, 58, 34, .62); }

    .nav-button {
      min-height: 46px;
      padding: 9px 11px;
      border: 1px solid transparent !important;
      border-radius: 13px;
      position: relative;
      gap: 11px;
      font-size: 15px;
      font-weight: 500;
      line-height: 1.4;
      transition: color .16s ease, background .16s ease, transform .16s ease;
    }

    .nav-button::before {
      position: absolute;
      left: 0;
      top: 12px;
      bottom: 12px;
      width: 3px;
      border-radius: 99px;
      background: var(--rust);
      opacity: 0;
      transform: scaleY(.35);
      transition: .18s ease;
      content: "";
    }

    .nav-button:hover {
      background: rgba(173, 79, 47, .055);
      transform: translateX(1px);
    }

    .nav-button.active {
      color: var(--rust-dark);
      border-color: rgba(173, 79, 47, .1) !important;
      background: linear-gradient(90deg, rgba(239, 220, 211, .9), rgba(239, 220, 211, .56));
      box-shadow: none !important;
    }

    .nav-button.active::before {
      opacity: 1;
      transform: scaleY(1);
    }

    .nav-icon {
      width: 30px;
      height: 30px;
      border-color: rgba(83, 67, 49, .13);
      border-radius: 9px;
      color: #655d55;
      background: rgba(255, 255, 255, .5);
      font-family: var(--font-ui);
      font-size: 13px;
      line-height: 1;
    }

    .nav-button.active .nav-icon {
      border-color: transparent;
      background: var(--rust);
      box-shadow: 0 5px 12px rgba(173, 79, 47, .16);
    }

    .sidebar-bottom {
      padding: 14px 6px 2px;
    }

    .local-note {
      padding: 13px 13px 12px;
      border-color: var(--line);
      background: rgba(255, 253, 248, .66);
      box-shadow: 0 8px 22px rgba(70, 53, 35, .035);
    }

    .local-note p {
      margin: 7px 0 10px;
      font-size: 10px;
      line-height: 1.65;
    }

    .topbar {
      height: 72px;
      padding: 0 clamp(22px, 3.5vw, 52px);
      border-color: var(--line);
      background: rgba(246, 242, 234, .86);
      box-shadow: 0 5px 20px rgba(73, 57, 38, .025);
    }

    .search-box {
      width: min(520px, 46vw);
      height: 44px;
      padding: 0 11px 0 14px;
      border-color: rgba(83, 67, 49, .16);
      border-radius: 14px;
      background: rgba(255, 253, 248, .86);
      box-shadow: inset 0 1px rgba(255, 255, 255, .72);
    }

    .search-box:focus-within {
      border-color: rgba(173, 79, 47, .42);
      box-shadow: var(--focus-ring);
    }

    .search-symbol {
      color: #847a70;
    }

    .search-box input {
      font-size: 13px;
    }

    .search-shortcut {
      min-width: 25px;
      height: 24px;
      padding: 0 7px;
      border: 1px solid rgba(83, 67, 49, .15);
      border-bottom-color: rgba(83, 67, 49, .24);
      border-radius: 7px;
      color: #8e8479;
      background: rgba(248, 244, 236, .92);
      display: grid;
      place-items: center;
      font-family: Georgia, serif;
      font-size: 12px;
      line-height: 1;
    }

    .top-actions {
      gap: 9px;
    }

    .today {
      margin-right: 2px;
      font-size: 11px;
    }

    .density-toggle {
      min-height: 40px;
      padding: 8px 11px;
      border: 1px solid var(--line);
      border-radius: 12px;
      color: #5f574f;
      background: rgba(255, 253, 248, .72);
      display: inline-flex;
      align-items: center;
      gap: 7px;
      cursor: pointer;
      font-size: 11px;
      font-weight: 700;
      transition: .16s ease;
    }

    .density-toggle:hover {
      border-color: rgba(173, 79, 47, .28);
      background: var(--card);
    }

    .density-toggle-icon {
      color: var(--rust);
      font-size: 14px;
      line-height: 1;
      transition: transform .16s ease;
    }

    .density-toggle[aria-pressed="true"] {
      border-color: color-mix(in srgb, var(--rust) 40%, var(--line));
      color: var(--rust);
      background: color-mix(in srgb, var(--rust) 8%, var(--card));
    }

    .density-toggle[aria-pressed="true"] .density-toggle-icon {
      transform: scaleY(.72);
    }

    .density-toggle[aria-pressed="false"] .density-toggle-icon {
      transform: scaleY(1.12);
    }

    .primary-button,
    .secondary-button,
    .ghost-button,
    .danger-button {
      min-height: 42px;
      padding: 9px 15px;
      border-radius: 12px;
      font-size: 12px;
    }

    .primary-button {
      border-color: var(--rust);
      background: linear-gradient(145deg, #b95835, var(--rust));
      box-shadow: 0 7px 17px rgba(173, 79, 47, .17);
    }

    .primary-button:hover {
      transform: translateY(-1px);
      background: linear-gradient(145deg, var(--rust), var(--rust-dark));
    }

    .secondary-button {
      border-color: rgba(45, 41, 35, .62);
      background: rgba(255, 253, 248, .36);
    }

    .content {
      width: min(1480px, 100%);
      padding: 32px clamp(22px, 3.5vw, 52px) 76px;
    }

    .view {
      animation-duration: .22s;
    }

    .page-header {
      margin-bottom: 22px;
      align-items: center;
    }

    .eyebrow {
      margin-bottom: 6px;
      font-size: 10px;
      letter-spacing: .18em;
    }

    .page-header h1 {
      margin-bottom: 5px;
      font-size: clamp(32px, 3.5vw, 43px);
      line-height: 1.1;
    }

    .page-header p {
      max-width: 720px;
      color: #756d64;
      font-size: 13px;
      line-height: 1.7;
    }

    .hero {
      min-height: 0;
      padding: clamp(32px, 4.5vw, 52px);
      border-color: rgba(101, 76, 49, .15);
      border-radius: 28px;
      background:
        radial-gradient(circle at 91% 16%, rgba(214, 170, 69, .24), transparent 17rem),
        linear-gradient(112deg, rgba(255,253,248,.99) 0%, rgba(255,250,239,.94) 61%, rgba(228,199,135,.42) 100%);
      box-shadow: var(--shadow);
      grid-template-columns: minmax(0, 1.45fr) minmax(250px, .55fr);
      gap: 30px;
    }

    .hero::before {
      right: -68px;
      bottom: -132px;
      width: 390px;
      height: 390px;
      border-color: rgba(118, 76, 36, .14);
      box-shadow:
        inset 0 0 0 28px rgba(255,255,255,.17),
        inset 0 0 0 62px rgba(132,89,42,.045);
    }

    .hero-kicker {
      margin-bottom: 14px;
      color: var(--olive);
      font-size: 10px;
      letter-spacing: .18em;
    }

    .hero h1 {
      max-width: 760px;
      margin-bottom: 14px;
      font-size: clamp(38px, 4.7vw, 60px);
      line-height: 1.1;
    }

    .hero-copy p {
      max-width: 680px;
      margin-bottom: 22px;
      color: #6d655d;
      font-size: 14px;
      line-height: 1.75;
    }

    .paper-note {
      width: min(100%, 300px);
      padding: 20px;
      border-color: rgba(94, 69, 40, .16);
      border-radius: 18px 18px 18px 6px;
      background: rgba(255,253,246,.9);
      box-shadow: var(--shadow-soft);
      transform: none;
    }

    .paper-note::before {
      width: 34px;
      height: 3px;
      margin-bottom: 14px;
      border-radius: 99px;
      background: var(--rust);
      display: block;
      content: "";
    }

    .paper-note strong {
      font-size: 19px;
    }

    .paper-note p {
      font-size: 11px;
      line-height: 1.7;
    }

    .quick-start {
      margin-top: 14px;
      padding: 9px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: rgba(255, 253, 248, .67);
      box-shadow: var(--shadow-soft);
      display: grid;
      grid-template-columns: minmax(170px, .72fr) repeat(3, minmax(170px, 1fr));
      gap: 7px;
    }

    .quick-start-lead {
      min-height: 70px;
      padding: 10px 13px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .quick-start-lead span {
      margin-bottom: 4px;
      color: var(--rust);
      font-family: Georgia, serif;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .16em;
    }

    .quick-start-lead strong {
      font-family: "STSong", "Songti SC", "SimSun", Georgia, serif;
      font-size: 17px;
    }

    .quick-action {
      min-width: 0;
      min-height: 70px;
      padding: 10px 12px;
      border: 1px solid transparent;
      border-radius: 13px;
      background: rgba(255, 255, 255, .48);
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      text-align: left;
      transition: transform .16s ease, border-color .16s ease, background .16s ease;
    }

    .quick-action:hover {
      border-color: rgba(173, 79, 47, .18);
      background: var(--card);
      transform: translateY(-1px);
    }

    .quick-action-icon {
      width: 34px;
      height: 34px;
      border-radius: 11px;
      color: #fff;
      background: var(--rust);
      display: grid;
      place-items: center;
      font-family: "STSong", "SimSun", serif;
      font-size: 14px;
      font-weight: 700;
    }

    .quick-action:nth-child(3) .quick-action-icon { background: var(--olive); }
    .quick-action:nth-child(4) .quick-action-icon { background: #9b762d; }

    .quick-action-copy {
      min-width: 0;
    }

    .quick-action-copy strong,
    .quick-action-copy small {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .quick-action-copy strong {
      margin-bottom: 2px;
      font-size: 12px;
    }

    .quick-action-copy small {
      color: var(--muted);
      font-size: 9px;
    }

    .quick-action-arrow {
      color: #9a8f84;
      font-size: 14px;
    }

    .stats-grid {
      margin-top: 14px;
      gap: 11px;
    }

    .stat-card {
      min-height: 112px;
      padding: 18px;
      border-color: var(--line);
      border-radius: 16px;
      background: var(--surface-soft);
      box-shadow: 0 5px 18px rgba(71, 54, 36, .025);
    }

    .stat-top {
      margin-bottom: 12px;
      font-size: 11px;
    }

    .stat-card:nth-child(2) .stat-mark { color: #6d612f; background: #eee5c7; }
    .stat-card:nth-child(3) .stat-mark { color: #4f6348; background: var(--olive-soft); }
    .stat-card:nth-child(4) .stat-mark { color: #5f6768; background: var(--blue-soft); }

    .stat-value {
      font-size: 30px;
    }

    .stat-caption {
      font-size: 10px;
      line-height: 1.55;
    }

    .section {
      margin-top: 32px;
    }

    .section-heading p,
    .panel-head small,
    .recent-copy small,
    .insight p {
      line-height: 1.65;
    }

    .panel,
    .calculator-controls,
    .calculator-result,
    .price-library,
    .upload-panel,
    .work-card {
      border-color: var(--line);
      background: var(--surface-raised);
      box-shadow: 0 6px 22px rgba(70, 53, 35, .03);
    }

    .category-card {
      border-color: var(--line);
      background: var(--surface-raised);
      box-shadow: 0 5px 18px rgba(70, 53, 35, .025);
    }

    .category-card:hover {
      border-color: rgba(173, 79, 47, .26);
      box-shadow: var(--shadow-soft);
    }

    .filter-bar,
    .data-filter-bar {
      position: sticky;
      top: 84px;
      z-index: 12;
      border-color: var(--line);
      background: rgba(250, 247, 240, .9);
      box-shadow: 0 8px 22px rgba(70, 53, 35, .045);
      backdrop-filter: blur(16px);
    }

    .field,
    .filter-search,
    .select-field,
    .wide-select,
    .wide-input,
    .price-search {
      border-color: rgba(83, 67, 49, .16);
      background: rgba(255, 254, 250, .94);
      font-size: 13px;
    }

    .field:focus,
    .filter-search:focus,
    .select-field:focus,
    .wide-select:focus,
    .wide-input:focus,
    .price-search:focus,
    textarea:focus {
      border-color: rgba(173, 79, 47, .44);
      box-shadow: var(--focus-ring);
    }

    .recipe-grid {
      gap: 14px;
    }

    .recipe-card {
      min-height: 284px;
      border-color: var(--line);
      border-radius: 20px;
      box-shadow: 0 6px 20px rgba(69, 51, 34, .035);
    }

    .recipe-card:hover {
      transform: translateY(-2px);
      border-color: rgba(173, 79, 47, .27);
      box-shadow: 0 14px 30px rgba(69, 51, 34, .075);
    }

    .recipe-art {
      height: 100px;
    }

    .recipe-body {
      padding: 17px 18px 19px;
    }

    .recipe-body h3 {
      font-size: 20px;
    }

    .recipe-card .recipe-description {
      color: #746c63;
      font-size: 12px;
    }

    .recipe-card .recipe-facts small {
      color: #948a80;
      font-size: 10px;
    }

    .recipe-card .recipe-facts strong {
      color: #35312b;
      font-size: 13px;
    }

    .calculator-layout {
      grid-template-columns: minmax(320px, .7fr) minmax(0, 1.3fr);
      gap: 16px;
    }

    .calculator-controls {
      top: 92px;
      padding: 23px;
    }

    .control-group > label,
    .form-label {
      color: #5e574f;
      font-size: 11px;
    }

    .mode-button {
      min-height: 39px;
      font-size: 11px;
    }

    .quick-button {
      min-height: 30px;
      padding: 5px 9px;
      font-size: 10px;
    }

    .calc-note {
      color: #6d645b;
      font-size: 11px;
      line-height: 1.65;
    }

    .calc-summary {
      padding: 24px;
      background: linear-gradient(125deg, #302b25, #3a332b);
    }

    .calculator-result .scaled-amount {
      color: var(--rust);
      font-family: var(--font-ui);
      font-size: 16px;
      font-weight: 800;
      line-height: 1.35;
      letter-spacing: .01em;
      font-variant-numeric: tabular-nums;
    }

    th,
    td {
      font-size: 12px;
    }

    tbody tr:not(.table-total):hover td {
      background: rgba(214, 170, 69, .045);
    }

    .price-table td {
      font-size: 12px;
    }

    .data-intro {
      border-color: rgba(92, 107, 88, .2);
      background:
        radial-gradient(circle at 94% 20%, rgba(214, 170, 69, .15), transparent 13rem),
        linear-gradient(125deg, rgba(223, 230, 220, .72), rgba(255, 253, 248, .82));
    }

    .modal {
      background: rgba(38, 31, 24, .48);
      backdrop-filter: blur(10px);
    }

    .modal-card {
      border-color: rgba(255,255,255,.3);
      border-radius: 22px;
      box-shadow: 0 30px 76px rgba(27, 20, 14, .29);
    }

    .detail-hero {
      background:
        radial-gradient(circle at 91% 15%, rgba(214,170,69,.22), transparent 16rem),
        linear-gradient(120deg, #fbf7ee, #f8f1e5);
    }

    .toast {
      right: 24px;
      bottom: 24px;
      padding: 13px 16px;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 13px;
      background: rgba(45, 41, 35, .95);
      backdrop-filter: blur(12px);
      font-size: 12px;
    }

    .experience-release {
      margin-bottom: 18px;
      padding: 22px;
      border: 1px solid rgba(173, 79, 47, .16);
      border-radius: 22px;
      overflow: hidden;
      background:
        radial-gradient(circle at 94% 15%, rgba(214, 170, 69, .18), transparent 16rem),
        linear-gradient(135deg, rgba(255,253,248,.96), rgba(246,237,225,.9));
      box-shadow: var(--shadow-soft);
      position: relative;
    }

    .experience-release::after {
      position: absolute;
      right: -52px;
      top: -64px;
      width: 180px;
      height: 180px;
      border: 1px solid rgba(173, 79, 47, .11);
      border-radius: 50%;
      box-shadow: inset 0 0 0 24px rgba(255,255,255,.2);
      content: "";
    }

    .experience-release-head {
      margin-bottom: 16px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      position: relative;
      z-index: 1;
    }

    .release-kicker {
      display: block;
      margin-bottom: 5px;
      color: var(--rust);
      font-family: Georgia, serif;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .15em;
    }

    .experience-release h2 {
      margin-bottom: 5px;
      font-size: 25px;
    }

    .experience-release-head p {
      max-width: 720px;
      margin-bottom: 0;
      color: var(--muted);
      font-size: 12px;
    }

    .rollback-badge {
      flex: 0 0 auto;
      padding: 8px 11px;
      border: 1px solid rgba(92, 107, 88, .18);
      border-radius: 99px;
      color: #4f624c;
      background: rgba(223, 230, 220, .75);
      font-size: 10px;
      font-weight: 800;
      white-space: nowrap;
    }

    .release-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      position: relative;
      z-index: 1;
    }

    .release-card {
      min-height: 126px;
      padding: 15px;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: rgba(255, 255, 255, .56);
    }

    .release-card span {
      color: var(--rust);
      font-family: Georgia, serif;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .08em;
    }

    .release-card strong {
      display: block;
      margin: 9px 0 6px;
      font-size: 13px;
    }

    .release-card p {
      margin-bottom: 0;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.65;
    }

    .rollback-note {
      margin: 13px 2px 0;
      color: #776e64;
      font-size: 10px;
      line-height: 1.6;
      position: relative;
      z-index: 1;
    }

    .detail-tab-count {
      min-width: 20px;
      height: 20px;
      margin-left: 6px;
      padding: 0 6px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--muted);
      background: #eee6d9;
      font-size: 10px;
      line-height: 1;
      transition: color .2s ease, background .2s ease;
    }

    .detail-tab.active .detail-tab-count {
      color: #fffaf3;
      background: var(--rust);
    }

    .recipe-photos-panel {
      display: grid;
      gap: 16px;
    }

    .recipe-photos-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }

    .recipe-photos-toolbar h3 {
      margin: 0 0 4px;
      font-size: 19px;
    }

    .recipe-photos-toolbar p {
      margin: 0;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.6;
    }

    .recipe-photo-add {
      flex: 0 0 auto;
    }

    .recipe-photos-summary {
      width: max-content;
      padding: 7px 10px;
      border: 1px solid #e4d8c8;
      border-radius: 999px;
      color: var(--muted);
      background: #faf6ee;
      font-size: 10px;
    }

    .recipe-photos-summary strong {
      color: var(--ink);
      font-size: 12px;
    }

    .recipe-photo-entries {
      display: grid;
      gap: 14px;
    }

    .recipe-photo-entry {
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: #faf7ef;
    }

    .recipe-photo-entry-head {
      margin-bottom: 11px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    .recipe-photo-entry-head div {
      min-width: 0;
      display: grid;
      gap: 2px;
    }

    .recipe-photo-entry-head strong {
      overflow: hidden;
      font-size: 13px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .recipe-photo-entry-head time {
      color: var(--muted);
      font-size: 10px;
    }

    .recipe-photo-entry-head > span {
      padding: 5px 8px;
      border-radius: 999px;
      color: var(--rust);
      background: #f3e5d7;
      font-size: 9px;
      font-weight: 800;
      white-space: nowrap;
    }

    .recipe-photo-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 9px;
    }

    .recipe-photo-grid[data-count="1"] {
      grid-template-columns: minmax(0, 1fr);
    }

    .recipe-photo-grid[data-count="2"] {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .recipe-photo-thumb {
      min-width: 0;
      padding: 0;
      border: 1px solid #dfd3c4;
      border-radius: 11px;
      aspect-ratio: 4 / 3;
      overflow: hidden;
      background: #e9dfd0;
      cursor: zoom-in;
      position: relative;
      box-shadow: 0 5px 14px rgba(58, 42, 29, .08);
      transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }

    .recipe-photo-thumb:hover {
      border-color: rgba(177, 82, 43, .52);
      transform: translateY(-2px);
      box-shadow: 0 10px 22px rgba(58, 42, 29, .14);
    }

    .recipe-photo-thumb:focus-visible {
      outline: 3px solid rgba(177, 82, 43, .22);
      outline-offset: 2px;
    }

    .recipe-photo-thumb img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      transition: transform .3s ease;
    }

    .recipe-photo-thumb:hover img {
      transform: scale(1.025);
    }

    .recipe-photo-thumb span {
      min-width: 24px;
      height: 24px;
      border-radius: 999px;
      color: #fff;
      background: rgba(37, 29, 22, .72);
      display: grid;
      place-items: center;
      position: absolute;
      right: 8px;
      bottom: 8px;
      font-size: 9px;
      font-weight: 800;
      backdrop-filter: blur(6px);
    }

    .recipe-photo-note {
      margin: 11px 2px 0;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.7;
      white-space: pre-line;
    }

    .recipe-photos-empty {
      min-height: 260px;
      padding: 34px 22px;
      border: 1px dashed #d9c9b5;
      border-radius: 16px;
      background: linear-gradient(145deg, #fbf8f1, #f6efe3);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      text-align: center;
    }

    .recipe-photos-empty > span {
      width: 58px;
      height: 58px;
      margin-bottom: 14px;
      border-radius: 18px 18px 18px 6px;
      color: #fff9ef;
      background: var(--rust);
      display: grid;
      place-items: center;
      font-family: "STSong", "SimSun", serif;
      font-size: 25px;
      box-shadow: 0 11px 24px rgba(177, 82, 43, .2);
    }

    .recipe-photos-empty strong {
      font-size: 14px;
    }

    .recipe-photos-empty p {
      max-width: 480px;
      margin: 7px 0 16px;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.65;
    }

    .recipe-photo-lightbox[hidden] {
      display: none;
    }

    .recipe-photo-lightbox {
      padding: 30px 76px;
      background: rgba(27, 22, 18, .9);
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr) 48px;
      align-items: center;
      gap: 20px;
      position: fixed;
      inset: 0;
      z-index: 1400;
      opacity: 0;
      backdrop-filter: blur(12px);
      transition: opacity .18s ease;
    }

    .recipe-photo-lightbox.open {
      opacity: 1;
    }

    .recipe-photo-lightbox figure {
      min-width: 0;
      max-width: min(1120px, 100%);
      max-height: calc(100vh - 60px);
      margin: 0 auto;
      display: grid;
      justify-items: center;
      gap: 11px;
    }

    .recipe-photo-lightbox figure img {
      max-width: 100%;
      max-height: calc(100vh - 116px);
      border-radius: 14px;
      display: block;
      object-fit: contain;
      box-shadow: 0 24px 70px rgba(0, 0, 0, .38);
    }

    .recipe-photo-lightbox figcaption {
      color: #fff9f0;
      display: flex;
      align-items: center;
      gap: 11px;
      font-size: 11px;
    }

    .recipe-photo-lightbox figcaption span {
      color: rgba(255, 249, 240, .68);
    }

    .recipe-photo-lightbox-close,
    .recipe-photo-lightbox-nav {
      border: 1px solid rgba(255, 255, 255, .28);
      color: #fffaf2;
      background: rgba(255, 255, 255, .1);
      display: grid;
      place-items: center;
      cursor: pointer;
      backdrop-filter: blur(8px);
      transition: background .2s ease, transform .2s ease;
    }

    .recipe-photo-lightbox-close:hover,
    .recipe-photo-lightbox-nav:hover {
      background: rgba(255, 255, 255, .2);
    }

    .recipe-photo-lightbox-close:focus-visible,
    .recipe-photo-lightbox-nav:focus-visible {
      outline: 3px solid rgba(255, 255, 255, .32);
      outline-offset: 2px;
    }

    .recipe-photo-lightbox-close {
      width: 44px;
      height: 44px;
      border-radius: 13px;
      position: absolute;
      top: 20px;
      right: 22px;
      font-size: 27px;
    }

    .recipe-photo-lightbox-nav {
      width: 48px;
      height: 58px;
      border-radius: 15px;
      font-size: 35px;
    }

    .recipe-photo-lightbox-nav:hover {
      transform: scale(1.04);
    }

    body[data-density="compact"] .content {
      padding-top: 24px;
    }

    body[data-density="compact"] .hero {
      padding: 28px 32px;
      grid-template-columns: minmax(0, 1fr) 230px;
    }

    body[data-density="compact"] .hero h1 {
      font-size: clamp(35px, 4vw, 50px);
    }

    body[data-density="compact"] .hero-copy p {
      margin-bottom: 17px;
      font-size: 13px;
    }

    body[data-density="compact"] .paper-note {
      padding: 16px;
    }

    body[data-density="compact"] .paper-note p {
      display: none;
    }

    body[data-density="compact"] .quick-start {
      margin-top: 10px;
    }

    body[data-density="compact"] .quick-start-lead,
    body[data-density="compact"] .quick-action {
      min-height: 60px;
    }

    body[data-density="compact"] .stat-card {
      min-height: 96px;
      padding: 15px;
    }

    body[data-density="compact"] .stat-top {
      margin-bottom: 8px;
    }

    body[data-density="compact"] .section {
      margin-top: 26px;
    }

    body[data-density="compact"] .recipe-art {
      height: 78px;
    }

    body[data-density="compact"] .recipe-art-letter {
      font-size: 45px;
    }

    body[data-density="compact"] .recipe-body {
      padding: 14px 16px 16px;
    }

    body[data-density="compact"] .recipe-card .recipe-description {
      height: 38px;
      margin-bottom: 11px;
    }

    @media (max-width: 1180px) {
      .quick-start {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .quick-start-lead {
        min-height: 48px;
        padding-bottom: 2px;
        grid-column: 1 / -1;
      }

      .release-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    @media (max-width: 900px) {
      .sidebar {
        height: 76px;
        padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--line);
        background: rgba(250, 247, 240, .94);
        box-shadow: 0 -8px 24px rgba(69, 51, 34, .06);
        backdrop-filter: blur(18px);
      }

      .nav {
        height: 100%;
        display: flex;
        gap: 3px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0;
        overscroll-behavior-x: contain;
        scrollbar-gutter: auto;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
      }

      .nav::-webkit-scrollbar { display: none; }

      .nav-button {
        min-width: 68px;
        min-height: 57px;
        padding: 4px 6px;
        flex: 1 0 68px;
        gap: 1px;
        font-size: 12px;
        scroll-snap-align: center;
      }

      .nav-button::before {
        inset: auto 18px 0;
        width: auto;
        height: 3px;
        transform: scaleX(.3);
      }

      .nav-button.active::before {
        transform: scaleX(1);
      }

      .nav-button:hover {
        transform: none;
      }

      .nav-icon {
        width: 25px;
        height: 25px;
      }

      .topbar {
        height: 68px;
        padding: 0 16px;
      }

      .mobile-title {
        min-width: 86px;
        display: flex;
        align-items: center;
        gap: 7px;
        font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
        font-size: 11px;
        font-weight: 800;
      }

      .mobile-brand {
        width: 31px;
        height: 31px;
        border-radius: 11px 11px 11px 4px;
        color: #fffaf0;
        background: var(--rust);
        display: grid;
        place-items: center;
        font-family: "STSong", "SimSun", serif;
        font-size: 16px;
      }

      .search-box {
        width: min(380px, 45vw);
      }

      .search-shortcut,
      .density-toggle-label {
        display: none;
      }

      .density-toggle {
        width: 40px;
        padding: 0;
        justify-content: center;
      }

      .content {
        padding: 25px 18px 108px;
      }

      .hero {
        grid-template-columns: 1fr;
      }

      .filter-bar,
      .data-filter-bar {
        top: 78px;
      }

      .experience-release-head {
        flex-direction: column;
      }

      .release-grid {
        grid-template-columns: 1fr;
      }

      .recipe-photo-lightbox {
        padding: 58px 18px 24px;
        grid-template-columns: 40px minmax(0, 1fr) 40px;
        gap: 10px;
      }

      .recipe-photo-lightbox-nav {
        width: 40px;
        height: 52px;
      }

      body[data-density="compact"] .hero {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 650px) {
      .topbar {
        gap: 7px;
      }

      .mobile-title {
        min-width: 33px;
      }

      .mobile-title #activeViewLabel {
        display: none;
      }

      .search-box {
        height: 42px;
      }

      .density-toggle {
        display: none;
      }

      .nav {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        overflow: visible;
        scroll-snap-type: none;
      }

      .nav-button {
        min-width: 0;
        padding-right: 1px;
        padding-left: 1px;
        flex: none;
        font-size: 9px;
      }

      .nav-icon {
        width: 23px;
        height: 23px;
      }

      .content {
        padding-top: 20px;
      }

      .page-header {
        margin-bottom: 18px;
        gap: 14px;
      }

      .page-header h1 {
        font-size: 34px;
      }

      .page-header p {
        font-size: 12px;
      }

      .hero {
        padding: 27px 22px;
        border-radius: 22px;
      }

      .hero h1,
      body[data-density="compact"] .hero h1 {
        font-size: 35px;
        line-height: 1.12;
      }

      .hero-copy p {
        margin-bottom: 20px;
        font-size: 12px;
      }

      .quick-start {
        padding: 7px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
      }

      .quick-start-lead {
        display: none;
      }

      .quick-action {
        min-height: 84px;
        padding: 9px 6px;
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 5px;
        text-align: center;
      }

      .quick-action-icon {
        width: 31px;
        height: 31px;
      }

      .quick-action-copy strong {
        font-size: 11px;
      }

      .quick-action-copy small,
      .quick-action-arrow {
        display: none;
      }

      .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
      }

      .stat-card,
      body[data-density="compact"] .stat-card {
        min-height: 108px;
        padding: 15px;
      }

      .stat-value {
        font-size: 28px;
      }

      .section {
        margin-top: 27px;
      }

      .filter-bar,
      .data-filter-bar {
        position: static;
        box-shadow: none;
      }

      .experience-release {
        padding: 18px;
      }

      .experience-release h2 {
        font-size: 22px;
      }

      .release-card {
        min-height: 0;
      }

      .recipe-photos-toolbar {
        align-items: flex-start;
        flex-direction: column;
      }

      .recipe-photo-add {
        width: 100%;
      }

      .recipe-photo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .recipe-photo-entry {
        padding: 10px;
      }

      .recipe-photo-lightbox {
        padding-right: 8px;
        padding-left: 8px;
        grid-template-columns: 34px minmax(0, 1fr) 34px;
        gap: 5px;
      }

      .recipe-photo-lightbox-nav {
        width: 34px;
        height: 46px;
        border-radius: 11px;
        font-size: 29px;
      }

      .recipe-photo-lightbox-close {
        top: 11px;
        right: 11px;
      }

      .recipe-photo-lightbox figcaption {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
        text-align: center;
      }

      .toast {
        right: 14px;
        bottom: 92px;
        max-width: calc(100vw - 28px);
      }
    }

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

    @media print {
      .quick-start,
      .density-toggle,
      .experience-release {
        display: none !important;
      }
    }
    .lan-access-panel {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 18px;
      margin-top: 14px;
      padding: 15px 17px;
      border: 1px solid rgba(173, 79, 47, .18);
      border-radius: 16px;
      background: rgba(255, 249, 239, .78);
      position: relative;
      z-index: 1;
    }

    .lan-access-panel[hidden] {
      display: none;
    }

    .lan-access-copy strong {
      display: block;
      margin-top: 6px;
      font-size: 15px;
    }

    .lan-access-copy p {
      margin: 6px 0 0;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.55;
    }

    .lan-access-links {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 7px;
    }

    .lan-access-link {
      display: inline-flex;
      align-items: center;
      min-height: 34px;
      padding: 7px 11px;
      border: 1px solid rgba(173, 79, 47, .28);
      border-radius: 999px;
      color: var(--rust);
      background: rgba(255, 255, 255, .72);
      font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", system-ui, -apple-system, sans-serif;
      font-size: 12px;
      font-weight: 700;
      text-decoration: none;
      overflow-wrap: anywhere;
    }

    .lan-access-link:hover {
      border-color: var(--rust);
      background: #fff;
    }

    @media (max-width: 760px) {
      .lan-access-panel {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 14px;
      }

      .lan-access-links {
        justify-content: flex-start;
      }

      .lan-access-link {
        max-width: 100%;
      }
    }
    /* Baking Lab workbench modules preview: materials, experiments, schedule. */
    .lab-kicker {
      display: block;
      margin-bottom: 5px;
      color: var(--rust);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    .lab-dashboard-bridge {
      margin-top: 18px;
      padding: 22px;
      border: 1px solid rgba(173, 79, 47, .14);
      border-radius: 22px;
      background:
        radial-gradient(circle at 88% 20%, rgba(202, 139, 105, .16), transparent 25%),
        linear-gradient(140deg, rgba(255, 252, 246, .96), rgba(244, 232, 221, .76));
      box-shadow: 0 16px 36px rgba(91, 65, 44, .08);
    }

    .lab-dashboard-head,
    .lab-panel-title,
    .lab-calendar-toolbar,
    .lab-agenda-head,
    .lab-modal-head,
    .lab-form-actions,
    .lab-card-top,
    .lab-card-actions,
    .lab-alert-item,
    .lab-agenda-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
    }

    .lab-dashboard-head h2,
    .lab-panel-title h2,
    .lab-modal-head h2,
    .lab-calendar-title h2 {
      margin: 0;
      color: var(--ink);
      font-family: var(--font-serif);
      font-weight: 650;
    }

    .lab-dashboard-head p {
      margin: 5px 0 0;
      color: var(--muted);
      font-size: 13px;
    }

    .lab-dashboard-actions,
    .lab-panel-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .lab-record-header-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
    .lab-record-callout {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      margin: 16px 0 18px;
      padding: 17px 19px;
      border: 1px solid rgba(173, 79, 47, .16);
      border-radius: 17px;
      background: linear-gradient(135deg, rgba(255, 252, 246, .88), rgba(244, 232, 221, .54));
    }
    .lab-record-callout h2,
    .lab-record-section-head h2 { margin: 0; color: var(--ink); font-family: var(--font-serif); font-size: 22px; }
    .lab-record-callout p,
    .lab-record-section-head p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
    .lab-record-history,
    .lab-formal-experiment-panel { margin-top: 24px; padding-top: 21px; border-top: 1px solid var(--line); }
    .lab-record-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 17px; margin-bottom: 14px; }
    .lab-batch-overview-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
    .lab-batch-overview-card { min-width: 0; padding: 14px; border: 1px solid rgba(92, 73, 60, .1); border-radius: 15px; background: rgba(255, 253, 249, .72); }
    .lab-batch-overview-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
    .lab-batch-overview-head h3 { margin: 0; overflow: hidden; color: var(--ink); font-family: var(--font-serif); font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
    .lab-batch-overview-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 10px; color: var(--muted); font-size: 10px; }
    .lab-batch-overview-result { display: -webkit-box; overflow: hidden; min-height: 33px; margin: 10px 0 0; color: var(--ink-soft); font-size: 11px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    .lab-batch-overview-photo { height: 112px; margin-top: 10px; overflow: hidden; border-radius: 11px; background: #f4ece3; }
    .lab-batch-overview-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
    .lab-batch-overview-foot { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-top: 11px; padding-top: 10px; border-top: 1px solid rgba(92, 73, 60, .09); color: var(--muted); font-size: 10px; }
    .lab-batch-overview-foot > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
    .lab-batch-overview-foot button { min-height: 29px; padding: 5px 9px; border: 1px solid rgba(173, 79, 47, .2); border-radius: 8px; color: var(--rust-dark); background: rgba(255, 253, 249, .72); font: inherit; font-size: 10px; cursor: pointer; }
    .lab-batch-overview-foot button:hover { background: #fff; border-color: rgba(173, 79, 47, .42); }
    .lab-record-empty { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 18px; border: 1px dashed #d7c8b7; border-radius: 15px; background: rgba(255, 253, 249, .48); }
    .lab-record-empty h3 { margin: 0; color: var(--ink); font-family: var(--font-serif); font-size: 18px; }
    .lab-record-empty p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
    .lab-record-more { margin: 10px 0 0; color: var(--muted); font-size: 10px; text-align: center; }

    .lab-dashboard-metrics,
    .lab-summary-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }

    .lab-dashboard-metrics { margin-top: 18px; }
    .lab-summary-grid { margin: 16px 0; }

    .lab-metric-card {
      position: relative;
      min-height: 112px;
      padding: 15px;
      overflow: hidden;
      border: 1px solid rgba(92, 73, 60, .09);
      border-radius: 17px;
      background: rgba(255, 255, 255, .64);
    }

    .lab-metric-card::after {
      position: absolute;
      right: -18px;
      bottom: -30px;
      width: 75px;
      height: 75px;
      border: 1px solid currentColor;
      border-radius: 50%;
      opacity: .09;
      content: "";
    }

    .lab-metric-card.warning { color: #9b5b2c; background: rgba(252, 241, 218, .72); }
    .lab-metric-card.danger { color: #a64031; background: rgba(250, 228, 223, .76); }
    .lab-metric-card.good { color: #4f7154; background: rgba(231, 239, 224, .76); }
    .lab-metric-card.info { color: #506b73; background: rgba(226, 238, 238, .72); }
    .lab-metric-card.muted { color: var(--muted); background: rgba(243, 239, 232, .76); }
    .lab-material-mobile-details { display: none; }
    #labAcknowledgePrices:disabled { opacity: .5; cursor: default; }
    .lab-price-review-facts { display: grid; gap: 10px; margin: 16px 0; }
    .lab-price-review-facts > div { display: flex; justify-content: space-between; gap: 14px; }
    .lab-price-review-facts dt { color: var(--muted); }
    .lab-price-review-facts dd { margin: 0; font-weight: 750; overflow-wrap: anywhere; text-align: right; }

    .lab-metric-card small {
      display: block;
      color: currentColor;
      font-size: 11px;
      font-weight: 750;
    }

    .lab-metric-card strong {
      display: block;
      margin: 8px 0 4px;
      color: currentColor;
      font-family: var(--font-serif);
      font-size: 30px;
      line-height: 1;
    }

    .lab-metric-card p {
      margin: 0;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.45;
    }

    .lab-dashboard-next {
      display: flex;
      gap: 9px;
      margin-top: 12px;
      overflow-x: auto;
      scrollbar-width: thin;
    }

    .lab-next-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-width: max-content;
      padding: 9px 12px;
      border: 1px solid rgba(92, 73, 60, .1);
      border-radius: 999px;
      color: var(--ink-soft);
      background: rgba(255, 255, 255, .58);
      font-size: 12px;
    }

    .lab-next-chip b { color: var(--rust-dark); }

    .lab-toolbar {
      display: flex;
      align-items: flex-end;
      gap: 10px;
      margin: 14px 0 18px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 17px;
      background: rgba(255, 255, 255, .52);
    }

    .lab-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
    }
    .lab-field[hidden] { display: none !important; }

    .lab-field-search { flex: 1; }

    .lab-field input,
    .lab-field select,
    .lab-field textarea {
      width: 100%;
      min-height: 42px;
      padding: 9px 11px;
      border: 1px solid rgba(92, 73, 60, .17);
      border-radius: 11px;
      outline: none;
      color: var(--ink);
      background: rgba(255, 255, 255, .78);
      font: inherit;
      font-size: 13px;
      font-weight: 500;
      transition: border .16s ease, box-shadow .16s ease, background .16s ease;
    }

    .lab-field textarea { min-height: 80px; resize: vertical; line-height: 1.55; }
    .lab-field input:focus,
    .lab-field select:focus,
    .lab-field textarea:focus {
      border-color: rgba(173, 79, 47, .6);
      background: #fffdf9;
      box-shadow: 0 0 0 3px rgba(173, 79, 47, .1);
    }

    .lab-card-list { display: grid; gap: 12px; }

    .lab-experiment-card {
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: rgba(255, 255, 255, .64);
      box-shadow: 0 8px 22px rgba(74, 53, 38, .045);
    }

    .lab-card-top { align-items: flex-start; }
    .lab-card-top h3 { margin: 3px 0 4px; color: var(--ink); font-family: var(--font-serif); font-size: 20px; }
    .lab-card-top p { margin: 0; color: var(--muted); font-size: 12px; }
    .lab-experiment-source { display: flex; align-items: center; gap: 7px; margin-top: 10px; color: var(--muted); font-size: 10px; }
    .lab-experiment-source span { font-weight: 750; }
    .lab-experiment-source strong { min-width: 0; overflow: hidden; padding: 4px 8px; border-radius: 999px; color: #425443; background: var(--olive-soft); text-overflow: ellipsis; white-space: nowrap; }

    .lab-status {
      display: inline-flex;
      align-items: center;
      min-width: max-content;
      padding: 5px 9px;
      border-radius: 999px;
      color: #735442;
      background: #eee3d9;
      font-size: 10px;
      font-weight: 800;
    }

    .lab-status.running { color: #8a4a2c; background: #f5ddcf; }
    .lab-status.review { color: #8a6828; background: #f5e9c8; }
    .lab-status.complete,
    .lab-status.done { color: #4e6b4f; background: #e4eddf; }
    .lab-status.cancelled { color: #79736f; background: #e9e6e3; }

    .lab-card-meta {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      margin: 14px 0;
    }

    .lab-card-meta div {
      padding: 10px 11px;
      border-radius: 12px;
      background: rgba(244, 239, 231, .72);
    }

    .lab-card-meta small { display: block; margin-bottom: 3px; color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: .08em; }
    .lab-card-meta strong { display: block; overflow: hidden; color: var(--ink-soft); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

    .lab-experiment-copy {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin: 12px 0;
    }

    .lab-copy-block {
      min-height: 75px;
      padding: 12px;
      border-left: 3px solid rgba(173, 79, 47, .28);
      border-radius: 0 12px 12px 0;
      background: rgba(250, 247, 241, .7);
    }

    .lab-copy-block small { display: block; margin-bottom: 5px; color: var(--rust); font-size: 9px; font-weight: 800; letter-spacing: .1em; }
    .lab-copy-block p { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.55; white-space: pre-wrap; }

    .lab-score-row { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; }
    .lab-score-row strong { color: var(--rust-dark); font-family: var(--font-serif); font-size: 18px; }

    .lab-card-actions { justify-content: flex-end; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
    .lab-card-actions button,
    .lab-small-button,
    .lab-panel-title > button,
    .lab-panel-title button:not(.secondary-button),
    .lab-demand-preview button {
      border: 0;
      color: var(--rust-dark);
      background: transparent;
      font: inherit;
      font-size: 11px;
      font-weight: 750;
      cursor: pointer;
    }

    .lab-danger-button { color: #a54d3e !important; }

    .lab-empty {
      padding: 28px 18px;
      border: 1px dashed rgba(92, 73, 60, .18);
      border-radius: 15px;
      color: var(--muted);
      background: rgba(255, 255, 255, .35);
      text-align: center;
      font-size: 12px;
      line-height: 1.65;
    }

    .lab-calendar-shell {
      display: grid;
      grid-template-columns: minmax(0, 1.75fr) minmax(320px, .58fr);
      gap: 18px;
    }

    .lab-calendar-main,
    .lab-agenda-panel,
    .lab-panel {
      border: 1px solid var(--line);
      border-radius: 19px;
      background: rgba(255, 255, 255, .58);
      box-shadow: 0 10px 28px rgba(74, 53, 38, .045);
    }

    .lab-calendar-main { padding: 20px; }
    .lab-calendar-title { display: flex; align-items: center; gap: 12px; }
    .lab-calendar-title h2 { min-width: 170px; text-align: center; font-size: 21px; }
    .lab-icon-button {
      width: 40px;
      height: 40px;
      border: 1px solid var(--line);
      border-radius: 12px;
      color: var(--ink-soft);
      background: rgba(255, 255, 255, .72);
      cursor: pointer;
    }

    .lab-calendar-weekdays,
    .lab-calendar-grid {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 8px;
    }

    .lab-calendar-weekdays { margin: 16px 0 8px; }
    .lab-calendar-weekdays span { padding: 5px; color: var(--muted); font-size: 10px; font-weight: 750; text-align: center; }

    .lab-calendar-day {
      min-height: 116px;
      padding: 10px;
      overflow: hidden;
      border: 1px solid rgba(92, 73, 60, .09);
      border-radius: 15px;
      color: var(--ink-soft);
      background: rgba(255, 253, 249, .74);
      cursor: pointer;
      transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
    }

    .lab-calendar-day:not(.other-month):hover { border-color: rgba(173, 79, 47, .24); background: rgba(255, 253, 249, .98); box-shadow: 0 7px 16px rgba(74, 53, 38, .07); }
    .lab-calendar-day.other-month { opacity: .38; }
    .lab-calendar-day.is-today { border-color: rgba(173, 79, 47, .5); box-shadow: inset 0 0 0 1px rgba(173, 79, 47, .16); }
    .lab-calendar-day.is-selected { background: rgba(239, 220, 211, .72); }
    .lab-day-number { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-bottom: 6px; font-size: 11px; font-weight: 800; }
    .lab-day-meta { display: flex; min-width: 0; align-items: center; gap: 4px; }
    .lab-lunar-day {
      color: var(--muted);
      font-size: 9px;
      font-weight: 500;
      line-height: 1;
      opacity: .58;
      white-space: nowrap;
    }
    .lab-day-number i { color: var(--rust); font-size: 9px; font-style: normal; }

    .lab-calendar-event {
      display: block;
      width: 100%;
      margin-top: 4px;
      padding: 6px 8px;
      overflow: hidden;
      border: 0;
      border-radius: 9px;
      color: #724330;
      background: #f1ddd2;
      font: inherit;
      font-size: 9px;
      font-weight: 700;
      text-align: left;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
    }

    .lab-calendar-event.is-single-event {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      line-height: 1.45;
      white-space: normal;
    }

    .lab-calendar-event.purchase { color: #6a5a28; background: #f2e8c7; }
    .lab-calendar-event.reminder { color: #496470; background: #dfebec; }
    .lab-calendar-event.experiment { color: #5b4d72; background: #e8e0ee; }
    .lab-calendar-event.done { opacity: .58; text-decoration: line-through; }

    .lab-agenda-panel { padding: 17px; }
    .lab-agenda-head { align-items: flex-start; }
    .lab-agenda-head h3 { margin: 0; color: var(--ink); font-family: var(--font-serif); font-size: 19px; }
    .lab-agenda-lunar { margin: 3px 0 0; color: var(--muted); font-size: 10px; opacity: .62; }
    .lab-agenda-list { display: grid; gap: 8px; }

    .lab-agenda-item {
      align-items: flex-start;
      margin-top: 9px;
      padding: 11px;
      border-radius: 13px;
      background: rgba(246, 240, 232, .76);
    }

    .lab-agenda-item strong { display: block; margin-bottom: 3px; color: var(--ink-soft); font-size: 12px; }
    .lab-agenda-item small { display: block; color: var(--muted); font-size: 10px; line-height: 1.45; }
    .lab-agenda-item button { border: 0; color: var(--rust); background: transparent; cursor: pointer; }

    .lab-demand-preview { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
    .lab-demand-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      margin-top: 8px;
      padding: 8px 10px;
      border-radius: 10px;
      background: rgba(246, 240, 232, .7);
      color: var(--ink-soft);
      font-size: 11px;
    }
    .lab-demand-name { display: flex; align-items: center; min-width: 0; gap: 8px; }
    .lab-demand-name > span:last-child { min-width: 0; }
    .lab-demand-row strong.short { color: #a44a3d; }

    .lab-rhythm-section {
      margin-top: 18px;
      padding: 18px;
      border: 1px solid rgba(173, 79, 47, .15);
      border-radius: 19px;
      background:
        radial-gradient(circle at 96% 0%, rgba(214, 170, 69, .12), transparent 22rem),
        rgba(255, 255, 255, .48);
      box-shadow: 0 10px 28px rgba(74, 53, 38, .04);
    }

    .lab-rhythm-head,
    .lab-rhythm-form-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
    }

    .lab-rhythm-head h2 {
      margin: 3px 0 4px;
      color: var(--ink);
      font-family: var(--font-serif);
      font-size: 22px;
    }

    .lab-rhythm-head p {
      margin: 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.55;
    }

    .lab-rhythm-summary {
      min-width: max-content;
      padding: 8px 11px;
      border: 1px solid rgba(92, 73, 60, .1);
      border-radius: 999px;
      color: #6f6257;
      background: rgba(255, 253, 249, .78);
      font-size: 11px;
      font-weight: 750;
    }

    .lab-rhythm-summary.has-conflict {
      border-color: rgba(164, 68, 48, .24);
      color: #a0442c;
      background: #f7e2db;
    }

    .lab-rhythm-meta {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 9px 15px;
      margin-top: 14px;
      padding-top: 11px;
      border-top: 1px solid rgba(92, 73, 60, .1);
      color: var(--muted);
      font-size: 10px;
    }

    .lab-rhythm-meta > strong { color: var(--ink-soft); font-size: 11px; }
    .lab-rhythm-view-controls {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-left: auto;
      padding: 3px;
      border: 1px solid rgba(92, 73, 60, .12);
      border-radius: 999px;
      background: rgba(255, 253, 249, .78);
    }
    .lab-rhythm-view-controls button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 25px;
      height: 25px;
      padding: 2px 7px;
      border: 0;
      border-radius: 999px;
      color: var(--ink-soft);
      background: transparent;
      font: inherit;
      font-size: 11px;
      font-weight: 750;
      cursor: pointer;
    }
    .lab-rhythm-view-controls button:hover,
    .lab-rhythm-view-controls button:focus-visible {
      color: var(--rust-dark);
      background: rgba(173, 79, 47, .1);
      outline: none;
    }
    .lab-rhythm-view-controls .lab-rhythm-fit-button { padding-inline: 9px; }
    .lab-rhythm-view-label {
      min-width: 76px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 700;
      text-align: center;
      white-space: nowrap;
    }
    .lab-rhythm-legend { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; }
    .lab-rhythm-legend i { width: 9px; height: 9px; border-radius: 3px; background: #d8c9bb; }
    .lab-rhythm-legend i.prep { background: #d5b08f; }
    .lab-rhythm-legend i.make { background: #b86a42; }
    .lab-rhythm-legend i.ferment { background: #7b9dad; }
    .lab-rhythm-legend i.bake { background: #c59642; }
    .lab-rhythm-legend i.cool { background: #66836a; }
    .lab-rhythm-legend i.decorate { background: #89729f; }
    .lab-rhythm-legend i.pack { background: #4f7f87; }

    .lab-rhythm-scroll { margin-top: 12px; overflow-x: auto; padding: 1px 2px 4px; overscroll-behavior-x: contain; }
    .lab-rhythm-board { --lab-rhythm-grid-size: 8.333333%; min-width: 880px; color: var(--ink-soft); }

    .lab-rhythm-scale,
    .lab-rhythm-device-row,
    .lab-rhythm-row {
      display: grid;
      grid-template-columns: 180px minmax(700px, 1fr);
      gap: 10px;
    }

    .lab-rhythm-scale { align-items: end; min-height: 31px; }
    .lab-rhythm-scale > span,
    .lab-rhythm-row-label,
    .lab-rhythm-device-label { padding: 0 9px; }
    .lab-rhythm-scale > span { color: var(--muted); font-size: 10px; font-weight: 750; }
    .lab-rhythm-scale-track,
    .lab-rhythm-track {
      position: relative;
      min-width: 0;
      background-image: linear-gradient(to right, rgba(92, 73, 60, .08) 1px, transparent 1px);
      background-size: var(--lab-rhythm-grid-size) 100%;
    }
    .lab-rhythm-scale-track { height: 26px; border-bottom: 1px solid var(--line); }
    .lab-rhythm-scale-mark { position: absolute; bottom: 6px; color: var(--muted); font-size: 9px; transform: translateX(-50%); white-space: nowrap; }
    .lab-rhythm-scale-mark:first-child { transform: none; }
    .lab-rhythm-scale-mark:last-child { transform: translateX(-100%); }

    .lab-rhythm-device-row {
      min-height: 48px;
      margin-top: 7px;
      border: 1px solid rgba(173, 79, 47, .16);
      border-radius: 12px;
      background: rgba(250, 240, 229, .72);
    }

    .lab-rhythm-device-label,
    .lab-rhythm-row-label {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-width: 0;
    }

    .lab-rhythm-device-label strong { color: var(--rust-dark); font-size: 11px; }
    .lab-rhythm-device-label small,
    .lab-rhythm-row-label small { margin-top: 2px; color: var(--muted); font-size: 9px; }
    .lab-rhythm-track { min-height: 48px; border-left: 1px solid rgba(92, 73, 60, .08); }

    .lab-rhythm-device-bar,
    .lab-rhythm-stage {
      position: absolute;
      display: flex;
      align-items: center;
      min-width: 3px;
      overflow: hidden;
      border: 1px solid transparent;
      color: #fffaf4;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
    }

    .lab-rhythm-device-bar {
      top: 9px;
      height: 29px;
      padding: 0 7px;
      border-radius: 8px;
      background: #a44a34;
      font-size: 10px;
      font-weight: 750;
    }

    .lab-rhythm-device-bar.is-conflict,
    .lab-rhythm-stage.is-conflict {
      border-color: #9b3023;
      box-shadow: 0 0 0 2px rgba(155, 48, 35, .2);
    }

    .lab-rhythm-device-bar,
    .lab-rhythm-stage,
    .lab-rhythm-row-label button {
      position: relative;
    }

    .lab-rhythm-device-bar,
    .lab-rhythm-stage {
      overflow: visible;
      justify-content: center;
      text-overflow: clip;
    }

    .lab-rhythm-device-bar[data-tooltip]::after,
    .lab-rhythm-stage[data-tooltip]::after,
    .lab-rhythm-row-label button[data-tooltip]::after {
      position: absolute;
      left: 50%;
      bottom: calc(100% + 8px);
      z-index: 30;
      width: max-content;
      max-width: 290px;
      padding: 8px 10px;
      border: 1px solid rgba(65, 48, 38, .18);
      border-radius: 9px;
      color: #fffaf4;
      background: rgba(54, 42, 35, .94);
      box-shadow: 0 8px 20px rgba(54, 42, 35, .18);
      content: attr(data-tooltip);
      font-size: 10px;
      font-weight: 500;
      line-height: 1.5;
      opacity: 0;
      pointer-events: none;
      transform: translate(-50%, 4px);
      transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
      visibility: hidden;
      white-space: normal;
    }

    .lab-rhythm-device-bar[data-tooltip]:hover::after,
    .lab-rhythm-device-bar[data-tooltip]:focus-visible::after,
    .lab-rhythm-stage[data-tooltip]:hover::after,
    .lab-rhythm-stage[data-tooltip]:focus-visible::after,
    .lab-rhythm-row-label button[data-tooltip]:hover::after,
    .lab-rhythm-row-label button[data-tooltip]:focus-visible::after {
      opacity: 1;
      transform: translate(-50%, 0);
      visibility: visible;
    }

    .lab-rhythm-rows { display: grid; gap: 6px; margin-top: 8px; }
    .lab-rhythm-row {
      min-height: 58px;
      border: 1px solid rgba(92, 73, 60, .1);
      border-radius: 12px;
      background: rgba(255, 253, 249, .62);
    }

    .lab-rhythm-row.is-done { opacity: .56; }
    .lab-rhythm-row-label { padding-top: 7px; padding-bottom: 7px; }
    .lab-rhythm-row-label button { width: fit-content; max-width: 100%; padding: 0; overflow: visible; border: 0; color: var(--ink-soft); background: transparent; font: inherit; font-size: 11px; font-weight: 800; text-align: left; cursor: pointer; }
    .lab-rhythm-row-label button > span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .lab-rhythm-row-label button:hover { color: var(--rust-dark); }
    .lab-rhythm-row-label small.is-conflict { color: #a0442c; font-weight: 750; }

    .lab-rhythm-stage {
      top: 11px;
      height: 35px;
      gap: 5px;
      padding: 0 7px;
      border-radius: 8px;
      font-size: 10px;
      font-weight: 750;
      text-align: left;
    }
    .lab-rhythm-stage-short { display: inline-flex; align-items: center; justify-content: center; min-width: 1em; font-size: 11px; line-height: 1; }
    .lab-rhythm-stage small { display: none; }
    .lab-rhythm-stage.prep { background: #d5b08f; }
    .lab-rhythm-stage.make { background: #b86a42; }
    .lab-rhythm-stage.ferment { background: #7b9dad; }
    .lab-rhythm-stage.bake { background: #c59642; }
    .lab-rhythm-stage.cool { background: #66836a; }
    .lab-rhythm-stage.decorate { background: #89729f; }
    .lab-rhythm-stage.pack { background: #4f7f87; }
    .lab-rhythm-empty { margin-top: 8px; }

    .lab-rhythm-form {
      margin-top: 2px;
      padding: 11px;
      border: 1px solid rgba(173, 79, 47, .14);
      border-radius: 12px;
      background: rgba(250, 243, 234, .72);
    }

    .lab-rhythm-form[hidden] { display: none; }
    .lab-rhythm-form-head { align-items: flex-end; }
    .lab-rhythm-form-head > div:first-child { display: grid; gap: 3px; }
    .lab-rhythm-preset-control { display: flex; align-items: flex-end; gap: 7px; min-width: 280px; }
    .lab-rhythm-preset-control .lab-field-label { padding-bottom: 9px; }
    .lab-rhythm-preset-control select { flex: 1; min-height: 38px; padding: 7px 9px; border: 1px solid rgba(92, 73, 60, .17); border-radius: 10px; color: var(--ink); background: rgba(255, 255, 255, .78); font: inherit; font-size: 12px; }
    .lab-rhythm-preset-control button { min-height: 38px; padding: 7px 10px; }
    .lab-rhythm-stage-editor { display: grid; grid-template-columns: repeat(7, minmax(84px, 1fr)); gap: 7px; margin-top: 10px; }
    .lab-rhythm-stage-edit { display: grid; gap: 5px; padding: 8px; border: 1px solid rgba(92, 73, 60, .09); border-radius: 9px; background: rgba(255, 255, 255, .58); }
    .lab-rhythm-stage-edit > span:first-child { color: var(--ink-soft); font-size: 10px; font-weight: 750; }
    .lab-rhythm-stage-edit input[type="number"] { width: 100%; min-height: 32px; padding: 5px 6px; border: 1px solid rgba(92, 73, 60, .14); border-radius: 7px; color: var(--ink); background: #fffdf9; font: inherit; font-size: 12px; }
    .lab-rhythm-stage-edit .lab-rhythm-unit { color: var(--muted); font-size: 9px; }
    .lab-rhythm-device-check { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 9px; white-space: nowrap; }
    .lab-rhythm-device-check input { margin: 0; accent-color: var(--rust); }

    .lab-material-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
      gap: 14px;
      margin-bottom: 14px;
    }

    .lab-panel { padding: 17px; }
    .lab-panel-title { align-items: flex-start; margin-bottom: 13px; }
    .lab-panel-title h2 { font-size: 19px; }
    .lab-inventory-tools { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; }
    .lab-inventory-add { flex: 0 0 auto; white-space: nowrap; color: #fffaf4 !important; }

    .lab-storage-filter {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 4px;
      padding: 3px;
      border: 1px solid rgba(92, 73, 60, .12);
      border-radius: 999px;
      background: rgba(255, 253, 249, .78);
    }
    .lab-storage-filter-label,
    .lab-storage-filter-count {
      padding: 3px 6px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 650;
      white-space: nowrap;
    }
    .lab-storage-filter-count { color: var(--rust-dark); }
    .lab-storage-filter button {
      min-height: 28px;
      padding: 4px 9px;
      border: 0;
      border-radius: 999px;
      color: var(--ink-soft);
      background: transparent;
      font: inherit;
      font-size: 10px;
      font-weight: 750;
      cursor: pointer;
    }
    .lab-storage-filter button:hover,
    .lab-storage-filter button:focus-visible,
    .lab-storage-filter button.is-active {
      color: var(--rust-dark);
      background: rgba(173, 79, 47, .12);
      outline: none;
    }

    .lab-alert-list { display: grid; gap: 8px; }
    .lab-reminder-mobile { display: none; }
    .lab-reminder-desktop,
    .lab-reminder-price-group { display: grid; gap: 8px; min-width: 0; }
    .lab-reminder-result { margin: 0 0 12px; color: var(--muted); font-size: 11px; line-height: 1.6; }
    .lab-reminder-price-tools { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
    .lab-reminder-price-tools strong { font-size: 12px; }
    .lab-reminder-price-tools small { display: block; color: var(--muted); font-size: 10px; line-height: 1.6; }
    #labMaterialSummary .lab-metric-card[aria-pressed="true"] { outline: 2px solid var(--rust, #ad4f2f); outline-offset: -2px; }
    .lab-reminder-feedback { white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; color: var(--rust-dark, #8f4935); font-size: 12px; line-height: 1.6; }
    #labMaterialReminderQueue .lab-field { margin-bottom: 12px; }
    #labMaterialReminderQueueInput { min-height: 44px; }
    .lab-alert-item {
      align-items: flex-start;
      justify-content: flex-start;
      padding: 11px;
      border: 1px solid rgba(92, 73, 60, .08);
      border-radius: 12px;
      background: rgba(250, 246, 239, .72);
    }

    .lab-alert-icon {
      display: grid;
      flex: 0 0 31px;
      width: 31px;
      height: 31px;
      place-items: center;
      border-radius: 9px;
      color: #9c4b36;
      background: #f2dcd3;
      font-size: 11px;
      font-weight: 800;
    }

    .lab-alert-item.warning .lab-alert-icon { color: #8a6828; background: #efe5c2; }
    .lab-alert-item.info .lab-alert-icon { color: #4e6871; background: #dfeaec; }
    .lab-alert-copy strong { display: block; margin-bottom: 3px; color: var(--ink-soft); font-size: 12px; }
    .lab-alert-copy p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }

    .lab-material-thumb {
      display: grid;
      flex: 0 0 36px;
      width: 36px;
      height: 36px;
      place-items: center;
      overflow: hidden;
      border: 1px solid rgba(173, 79, 47, .16);
      border-radius: 10px;
      color: #9c674e;
      background: #f3e3d7;
      font-size: 11px;
      font-weight: 800;
    }
    .lab-material-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .lab-material-thumb.has-preview { cursor: zoom-in; }
    .lab-material-thumb.alert { flex-basis: 38px; width: 38px; height: 38px; border-radius: 11px; }
    .lab-material-thumb.table { flex-basis: 42px; width: 42px; height: 42px; border-radius: 11px; }
    .lab-material-thumb.demand { flex-basis: 27px; width: 27px; height: 27px; border-radius: 8px; font-size: 9px; }
    .lab-material-name-cell { display: flex; align-items: center; min-width: 165px; gap: 9px; }
    .lab-material-subline { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
    .lab-material-subline small { margin-top: 0; }
    .lab-storage-badge {
      display: inline-flex;
      align-items: center;
      min-height: 17px;
      padding: 2px 6px;
      border-radius: 999px;
      color: #6e6255;
      background: #ece8e0;
      font-size: 9px;
      font-weight: 750;
      white-space: nowrap;
    }
    .lab-storage-badge.refrigerated { color: #4f6971; background: #e0ecec; }
    .lab-storage-badge.frozen { color: #556b88; background: #e1e8f2; }
    .lab-material-date-cell strong { display: block; color: var(--ink-soft); font-size: 11px; white-space: nowrap; }
    .lab-material-date-cell small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; white-space: nowrap; }
    .lab-countdown { display: inline-flex; min-width: 62px; justify-content: center; padding: 5px 7px; border-radius: 999px; background: #ece8e0; color: #75685b; font-size: 10px; font-weight: 800; white-space: nowrap; }
    .lab-countdown.good { color: #557150; background: #e7eee3; }
    .lab-countdown.warning { color: #8a6828; background: #efe5c2; }
    .lab-countdown.danger { color: #a0442c; background: #f5ded5; }
    .lab-status.danger { color: #a0442c; background: #f5ded5; }

    .lab-field-label { color: var(--muted); font-size: 11px; font-weight: 700; }
    .lab-field-note { color: var(--muted); font-size: 10px; font-weight: 500; line-height: 1.45; }
    .lab-date-calculator-note { padding: 9px 11px; border-radius: 10px; color: #7b695a; background: rgba(239, 229, 216, .7); font-size: 10px; font-weight: 500; line-height: 1.5; }
    .lab-storage-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .lab-storage-option { position: relative; display: block; cursor: pointer; }
    .lab-storage-option input {
      position: absolute;
      width: 1px;
      height: 1px;
      min-height: 0;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
      opacity: 0;
    }
    .lab-storage-option span {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 9px 11px;
      border: 1px solid rgba(92, 73, 60, .17);
      border-radius: 11px;
      color: var(--ink-soft);
      background: rgba(255, 255, 255, .78);
      font-size: 13px;
      font-weight: 600;
      transition: border .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
    }
    .lab-storage-option span::after {
      position: absolute;
      right: 9px;
      width: 14px;
      height: 14px;
      border: 1px solid rgba(92, 73, 60, .25);
      border-radius: 4px;
      color: transparent;
      font-size: 10px;
      line-height: 13px;
      text-align: center;
      content: "";
    }
    .lab-storage-option input:checked + span::after {
      border-color: var(--rust);
      color: #fffaf4;
      background: var(--rust);
      content: "✓";
    }
    .lab-storage-option:hover span { border-color: rgba(173, 79, 47, .4); background: #fffdf9; }
    .lab-storage-option input:focus-visible + span { outline: 2px solid rgba(173, 79, 47, .45); outline-offset: 2px; }
    .lab-storage-option input:checked + span {
      border-color: rgba(173, 79, 47, .62);
      color: var(--rust-dark);
      background: #f5e5da;
      box-shadow: 0 0 0 3px rgba(173, 79, 47, .1);
    }
    .lab-material-image-editor { display: flex; align-items: center; gap: 11px; }
    .lab-material-image-control { display: grid; flex: 0 0 82px; width: 82px; height: 82px; place-items: center; overflow: hidden; border: 1px dashed #cfb9a4; border-radius: 13px; color: #8a654c; background: #faf5ee; cursor: pointer; text-align: center; }
    .lab-material-image-control span { padding: 7px; font-size: 10px; line-height: 1.45; }
    .lab-material-image-control img { width: 100%; height: 100%; object-fit: cover; }
    .lab-material-image-control.has-image { border-style: solid; }
    .lab-material-image-copy { display: grid; gap: 7px; }
    .lab-text-button { width: fit-content; padding: 0; border: 0; color: var(--rust-dark); background: transparent; font: inherit; font-size: 10px; cursor: pointer; }

    .lab-table-wrap { overflow-x: auto; }
    .lab-table { width: 100%; border-collapse: collapse; min-width: 980px; }
    .lab-table th { padding: 9px 10px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 9px; letter-spacing: .08em; text-align: left; }
    .lab-table td { padding: 11px 10px; border-bottom: 1px solid rgba(92, 73, 60, .07); color: var(--ink-soft); font-size: 11px; vertical-align: middle; }
    .lab-table tr:last-child td { border-bottom: 0; }
    .lab-table-name strong { display: block; color: var(--ink); font-size: 12px; }
    .lab-table-name small { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; }
    .lab-table-actions { display: flex; gap: 7px; }
    .lab-table-actions button { border: 0; color: var(--rust-dark); background: transparent; font: inherit; font-size: 10px; cursor: pointer; }
    .lab-quantity-control { display: inline-flex; align-items: center; gap: 3px; min-width: 142px; padding: 3px; border: 1px solid rgba(92, 73, 60, .12); border-radius: 10px; background: rgba(250, 246, 239, .7); }
    .lab-quantity-button { display: grid; width: 26px; height: 26px; place-items: center; padding: 0; border: 0; border-radius: 7px; color: var(--rust-dark); background: #f2e1d7; font-size: 18px; line-height: 1; cursor: pointer; }
    .lab-quantity-button:hover { color: #fffaf4; background: var(--rust); }
    .lab-quantity-button:focus-visible { outline: 2px solid rgba(173, 79, 47, .45); outline-offset: 1px; }
    .lab-quantity-input { width: 53px; min-height: 26px; padding: 2px 1px; border: 0; border-radius: 6px; color: var(--ink-soft); background: transparent; font: inherit; font-size: 11px; text-align: center; }
    .lab-quantity-input:focus { outline: 2px solid rgba(173, 79, 47, .22); background: #fffdf9; }
    .lab-quantity-unit { min-width: 17px; color: var(--muted); font-size: 10px; text-align: center; }

    .lab-material-image-zoom[hidden] { display: none !important; }
    .lab-material-image-zoom { position: fixed; z-index: 1600; width: min(340px, calc(100vw - 24px)); height: min(340px, calc(100vh - 24px)); padding: 9px; border: 1px solid rgba(173, 79, 47, .26); border-radius: 16px; background: #fffdf9; box-shadow: 0 18px 42px rgba(69, 45, 29, .2); pointer-events: none; }
    .lab-material-image-zoom img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 10px; background: #f6efe7; }

    .lab-modal[hidden] { display: none; }

    .lab-task-board-section {
      margin-top: 28px;
      padding-top: 26px;
      border-top: 1px solid var(--line);
    }

    .lab-task-board-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 17px;
    }

    .lab-task-board-head h2 {
      margin: 4px 0 5px;
      font-family: var(--serif);
      font-size: 27px;
    }

    .lab-task-board-head p {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
    }

    .lab-task-board-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
    }

    .lab-form-spacer { flex: 1; }

    .lab-task-board {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: minmax(270px, 1fr);
      gap: 14px;
      overflow-x: auto;
      padding: 2px 2px 14px;
      scroll-snap-type: x proximity;
    }

    .lab-board-column {
      min-height: 340px;
      border: 1px solid #dfd3c4;
      border-radius: 18px;
      background: #f7f2ea;
      overflow: hidden;
      scroll-snap-align: start;
    }

    .lab-board-column-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 14px 15px 12px;
      border-top: 4px solid var(--board-accent, #b86a42);
      border-bottom: 1px solid #e3d8cb;
      background: rgba(255, 253, 249, .75);
    }

    .lab-board-column-title {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .lab-board-column-title strong {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .lab-board-count {
      display: inline-grid;
      min-width: 24px;
      height: 24px;
      place-items: center;
      padding: 0 6px;
      border-radius: 999px;
      background: #eee2d4;
      color: #735844;
      font-size: 11px;
      font-weight: 800;
    }

    .lab-board-column-tools {
      display: flex;
      gap: 4px;
    }

    .lab-board-column-tools button {
      width: 28px;
      height: 28px;
      border: 0;
      border-radius: 9px;
      background: transparent;
      color: #7a6758;
      cursor: pointer;
      font-size: 16px;
    }

    .lab-board-column-tools button:hover { background: #eee1d3; color: #9e4e2e; }

    .lab-board-dropzone {
      min-height: 278px;
      padding: 11px;
      transition: background .16s ease, box-shadow .16s ease;
    }

    .lab-board-dropzone.is-drag-over {
      background: rgba(184, 106, 66, .09);
      box-shadow: inset 0 0 0 2px rgba(184, 106, 66, .28);
    }

    .lab-board-card {
      margin-bottom: 10px;
      padding: 13px;
      border: 1px solid #e0d3c4;
      border-radius: 14px;
      background: #fffdf9;
      box-shadow: 0 5px 14px rgba(88, 63, 45, .05);
      cursor: grab;
    }

    .lab-board-card:active { cursor: grabbing; }
    .lab-board-card.is-dragging { opacity: .42; }

    .lab-board-card-top,
    .lab-board-card-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .lab-board-card strong {
      display: block;
      margin: 8px 0 5px;
      line-height: 1.45;
    }

    .lab-board-card p {
      display: -webkit-box;
      overflow: hidden;
      margin: 0 0 10px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.55;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .lab-board-card-meta {
      color: #7d6b5d;
      font-size: 11px;
    }

    .lab-board-card-edit {
      border: 0;
      border-radius: 8px;
      background: #f1e7dc;
      color: #795c46;
      padding: 5px 8px;
      cursor: pointer;
    }

    .lab-board-priority {
      display: inline-flex;
      align-items: center;
      min-height: 22px;
      padding: 0 7px;
      border-radius: 999px;
      background: #ece5dd;
      color: #736253;
      font-size: 10px;
      font-weight: 800;
    }

    .lab-board-priority.high { background: #f5ded5; color: #a0442c; }
    .lab-board-priority.low { background: #e7eee3; color: #557150; }

    .lab-board-empty {
      display: grid;
      min-height: 90px;
      place-items: center;
      border: 1px dashed #d7c8b7;
      border-radius: 13px;
      color: #9a897a;
      font-size: 12px;
      text-align: center;
    }

    /* Keep the calendar readable while keeping the monthly block compact. */
    @media (min-width: 761px) {
      #schedule .page-header { margin-bottom: 12px; }
      #schedule .page-header h1 {
        font-size: 27px;
        line-height: 1.15;
      }
      #schedule .page-header p { line-height: 1.55; }
      #schedule .lab-calendar-shell { gap: 10px; }
      #schedule .lab-calendar-main { padding: 10px 18px; }
      #schedule .lab-agenda-panel { padding: 12px 18px; }
      #schedule .lab-calendar-title h2 { font-size: 20px; }
      #schedule .lab-icon-button { width: 36px; height: 36px; border-radius: 11px; }
      #schedule .lab-calendar-weekdays { margin: 6px 0 3px; }
      #schedule .lab-calendar-weekdays span { padding: 2px 5px; }
      #schedule .lab-calendar-grid { row-gap: 5px; }
      #schedule .lab-calendar-day {
        min-height: 80px;
        padding: 6px 8px;
      }
      #schedule .lab-task-board-section {
        margin-top: 12px;
        padding-top: 12px;
      }
    }

    .lab-modal { position: fixed; z-index: 1300; inset: 0; display: grid; place-items: center; padding: 20px; }
    .lab-modal-backdrop { position: absolute; inset: 0; background: rgba(49, 39, 32, .48); backdrop-filter: blur(4px); }
    .lab-modal-card {
      position: relative;
      z-index: 1;
      width: min(620px, 100%);
      max-height: calc(100vh - 40px);
      padding: 20px;
      overflow-y: auto;
      border: 1px solid rgba(255, 255, 255, .45);
      border-radius: 21px;
      background: #fbf7ef;
      box-shadow: 0 28px 80px rgba(39, 27, 19, .28);
    }

    .lab-modal-wide { width: min(930px, 100%); }
    .lab-modal-close { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink-soft); background: rgba(255, 255, 255, .7); font-size: 20px; cursor: pointer; }
    .lab-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
    .lab-form-grid-4 { grid-template-columns: repeat(4, 1fr); }
    .lab-form-grid-5 { grid-template-columns: repeat(5, 1fr); }
    .lab-span-2 { grid-column: span 2; }
    .lab-span-all { grid-column: 1 / -1; }
    .lab-form-section { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line); }
    .lab-form-section h3 { margin: 0; color: var(--ink); font-family: var(--font-serif); font-size: 17px; }
    .lab-form-actions { justify-content: flex-end; margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--line); }
    .lab-snapshot-note { margin-top: 14px; padding: 10px 12px; border-radius: 11px; color: var(--muted); background: rgba(239, 229, 216, .7); font-size: 10px; line-height: 1.55; }

    body.lab-modal-open { overflow: hidden; }

    body[data-density="compact"] .lab-dashboard-bridge,
    body[data-density="compact"] .lab-panel,
    body[data-density="compact"] .lab-calendar-main,
    body[data-density="compact"] .lab-agenda-panel { padding: 14px; }
    body[data-density="compact"] .lab-metric-card { min-height: 91px; padding: 11px; }
    body[data-density="compact"] .lab-experiment-card { padding: 13px; }
    body[data-density="compact"] .lab-calendar-day { min-height: 86px; }

    @media (max-width: 1100px) {
      .lab-dashboard-metrics,
      .lab-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .lab-calendar-shell,
      .lab-material-layout { grid-template-columns: 1fr; }
      .lab-agenda-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
      .lab-agenda-head { grid-column: 1 / -1; }
      .lab-demand-preview { margin: 0; padding: 0 0 0 14px; border-top: 0; border-left: 1px solid var(--line); }
      .lab-rhythm-section { padding: 14px; }
    }

    @media (max-width: 760px) {
      .lab-record-callout,
      .lab-record-section-head { align-items: flex-start; flex-direction: column; }
      .lab-record-header-actions { width: 100%; justify-content: flex-start; }
      .lab-record-header-actions button { flex: 1; }
      .lab-batch-overview-list { grid-template-columns: 1fr; }
      .lab-record-empty { align-items: flex-start; flex-direction: column; }
      .lab-task-board-head { align-items: flex-start; flex-direction: column; }
      .lab-task-board-actions { width: 100%; }
      .lab-task-board-actions button { flex: 1; }
      .lab-task-board { grid-auto-columns: minmax(260px, 86vw); }
      .lab-rhythm-head,
      .lab-rhythm-form-head { align-items: flex-start; flex-direction: column; }
      .lab-rhythm-summary { align-self: flex-start; }
      .lab-rhythm-view-controls { margin-left: 0; }
      .lab-rhythm-preset-control { width: 100%; min-width: 0; }
      .lab-rhythm-stage-editor { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .nav { display: flex !important; grid-template-columns: none !important; overflow-x: auto; overflow-y: hidden !important; scroll-snap-type: x proximity; }
      .nav-button { flex: 0 0 68px; min-width: 68px !important; scroll-snap-align: start; }
      .lab-dashboard-bridge { padding: 16px; border-radius: 17px; }
      .lab-dashboard-head { align-items: flex-start; flex-direction: column; }
      .lab-dashboard-actions { width: 100%; }
      .lab-dashboard-actions button { flex: 1; }
      .lab-inventory-panel .lab-panel-title { align-items: flex-start; flex-direction: column; }
      .lab-inventory-panel .lab-inventory-tools { width: 100%; }
      .lab-inventory-panel .lab-storage-filter { flex: 1 1 auto; width: auto; box-sizing: border-box; }
      .lab-inventory-panel .lab-storage-filter button { flex: 1; }
      .lab-calendar-main { padding: 8px 10px 10px; }
      .lab-calendar-toolbar { align-items: flex-start; flex-direction: column; gap: 6px; }
      .lab-icon-button { width: 34px; height: 34px; border-radius: 10px; }
      .lab-calendar-shell { gap: 10px; }
      .lab-calendar-weekdays { margin: 6px 0 3px; }
      .lab-calendar-weekdays span { padding: 2px 4px; }
      .lab-calendar-grid { row-gap: 5px; }
      .lab-calendar-day { min-height: 68px; padding: 4px 5px; border-radius: 9px; }
      .lab-calendar-event { padding: 4px 3px; font-size: 8px; }
      .lab-agenda-panel { display: block; }
      .lab-demand-preview { margin-top: 18px; padding: 15px 0 0; border-top: 1px solid var(--line); border-left: 0; }
      .lab-form-grid,
      .lab-form-grid-4,
      .lab-form-grid-5 { grid-template-columns: 1fr 1fr; }
      .lab-span-all { grid-column: span 2; }
      .lab-experiment-copy { grid-template-columns: 1fr; }
      .lab-card-meta { grid-template-columns: 1fr 1fr; }
      .lab-toolbar { align-items: stretch; flex-direction: column; }
    }

    @media (max-width: 520px) {
      .lab-dashboard-metrics,
      .lab-summary-grid { grid-template-columns: 1fr 1fr; }
      .lab-metric-card { min-height: 98px; }
      .lab-metric-card strong { font-size: 25px; }
      .lab-calendar-day { min-height: 68px; }
      .lab-lunar-day { font-size: 8px; }
      .lab-day-number i { display: none; }
      .lab-calendar-event:nth-of-type(n+3) { display: none; }
      .lab-calendar-title h2 { min-width: 125px; font-size: 18px; }
      .lab-form-grid,
      .lab-form-grid-4,
      .lab-form-grid-5 { grid-template-columns: 1fr; }
      .lab-span-2,
      .lab-span-all { grid-column: 1; }
      .lab-inventory-panel .lab-inventory-tools { align-items: stretch; flex-direction: column; }
      .lab-inventory-panel .lab-storage-filter,
      .lab-inventory-panel .lab-inventory-add { width: 100%; }
      .lab-modal { padding: 0; place-items: end center; }
      .lab-modal-card { width: 100%; max-height: 94vh; border-radius: 21px 21px 0 0; }
    }

    .lab-demand-row strong.pending { color: #8a6828; }
    .lab-modal-subtitle { max-width: 620px; margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
    .lab-section-note { color: var(--muted); font-family: var(--font-sans); font-size: 10px; font-weight: 500; }
    .lab-checkbox-field {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      color: var(--ink-soft);
      font-size: 12px;
      cursor: pointer;
    }
    .lab-checkbox-field input { margin: 2px 0 0; accent-color: var(--rust); }
    .lab-checkbox-field strong,
    .lab-checkbox-field small { display: block; }
    .lab-checkbox-field small { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.5; }
    .lab-batch-image-editor { display: flex; align-items: center; gap: 13px; margin-top: 13px; }
    .lab-batch-image-control {
      display: grid;
      width: 124px;
      height: 92px;
      place-items: center;
      overflow: hidden;
      border: 1px dashed rgba(173, 79, 47, .36);
      border-radius: 13px;
      color: var(--rust-dark);
      background: rgba(255, 253, 249, .72);
      font-size: 11px;
      cursor: pointer;
    }
    .lab-batch-image-control img { display: block; width: 100%; height: 100%; object-fit: cover; }
    .lab-batch-image-control.has-image { border-style: solid; }
    .lab-batch-image-editor .lab-field-note { display: block; max-width: 270px; line-height: 1.5; }
    .lab-batch-image-editor .lab-text-button { margin-top: 7px; }
    .lab-batch-experiment-section { background: rgba(248, 240, 229, .44); }
    .lab-batch-history {
      margin-top: 22px;
      padding-top: 20px;
      border-top: 1px solid var(--line);
    }
    .lab-batch-history-head,
    .lab-batch-card-head,
    .lab-batch-card-actions,
    .lab-batch-compare-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }
    .lab-batch-history-head h3 { margin: 0; color: var(--ink); font-family: var(--font-serif); font-size: 21px; }
    .lab-batch-history-head p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
    .lab-batch-history-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
    .lab-batch-history-tools button,
    .lab-batch-card-actions button,
    .lab-batch-compare-head button {
      min-height: 31px;
      padding: 6px 10px;
      border: 1px solid rgba(173, 79, 47, .2);
      border-radius: 9px;
      color: var(--rust-dark);
      background: rgba(255, 253, 249, .72);
      font: inherit;
      font-size: 10px;
      cursor: pointer;
    }
    .lab-batch-history-tools button:hover,
    .lab-batch-card-actions button:hover,
    .lab-batch-compare-head button:hover { background: #fff; border-color: rgba(173, 79, 47, .42); }
    .lab-batch-history-list { display: grid; gap: 11px; margin-top: 13px; }
    .lab-batch-card {
      padding: 14px;
      border: 1px solid rgba(92, 73, 60, .1);
      border-radius: 15px;
      background: rgba(255, 253, 249, .72);
    }
    .lab-batch-card.is-selected { border-color: rgba(173, 79, 47, .55); box-shadow: 0 0 0 3px rgba(173, 79, 47, .08); }
    .lab-batch-card-head { align-items: center; }
    .lab-batch-card-date { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 13px; font-weight: 800; }
    .lab-batch-card-date input { margin: 0; accent-color: var(--rust); }
    .lab-batch-card-version { color: var(--muted); font-size: 10px; }
    .lab-batch-card-tag { display: inline-flex; padding: 4px 7px; border-radius: 999px; color: #8a6828; background: #f5e9c8; font-size: 9px; font-weight: 800; }
    .lab-batch-card-meta {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 9px;
      margin-top: 12px;
    }
    .lab-batch-card-meta div { min-width: 0; padding: 8px 9px; border-radius: 10px; background: rgba(246, 240, 232, .76); }
    .lab-batch-card-meta small { display: block; color: var(--muted); font-size: 9px; }
    .lab-batch-card-meta strong { display: block; margin-top: 3px; overflow: hidden; color: var(--ink-soft); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
    .lab-batch-card-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 11px; }
    .lab-batch-card-copy section { min-width: 0; }
    .lab-batch-card-copy small { color: var(--rust); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
    .lab-batch-card-copy p { margin: 4px 0 0; color: var(--ink-soft); font-size: 11px; line-height: 1.55; white-space: pre-wrap; }
    .lab-batch-card-photo { display: block; width: 100%; max-height: 190px; margin-top: 11px; overflow: hidden; border-radius: 11px; background: #f4ece3; }
    .lab-batch-card-photo img { display: block; width: 100%; max-height: 190px; object-fit: cover; }
    .lab-batch-card-actions { align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(92, 73, 60, .09); }
    .lab-batch-card-actions .lab-batch-score { color: var(--muted); font-size: 10px; }
    .lab-batch-card-actions > div:last-child { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
    .lab-batch-card-actions .lab-danger-button { color: #a44a3d; }
    .lab-batch-compare {
      margin-top: 13px;
      padding: 13px;
      border: 1px solid rgba(173, 79, 47, .18);
      border-radius: 13px;
      background: rgba(248, 240, 229, .52);
    }
    .lab-batch-compare[hidden] { display: none; }
    .lab-batch-compare-head { align-items: center; }
    .lab-batch-compare-head strong { color: var(--ink); font-size: 12px; }
    .lab-batch-compare-table-wrap { overflow-x: auto; margin-top: 10px; }
    .lab-batch-compare-table { width: 100%; min-width: 610px; border-collapse: collapse; }
    .lab-batch-compare-table th,
    .lab-batch-compare-table td { padding: 7px 8px; border-bottom: 1px solid rgba(92, 73, 60, .09); color: var(--ink-soft); font-size: 10px; text-align: left; vertical-align: top; }
    .lab-batch-compare-table th { color: var(--muted); font-size: 9px; font-weight: 750; }
    .lab-batch-compare-table tr:last-child td { border-bottom: 0; }
    .lab-batch-compare-note { margin: 9px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }

    @media (max-width: 760px) {
      .lab-batch-card-meta { grid-template-columns: 1fr 1fr; }
      .lab-batch-card-copy { grid-template-columns: 1fr; }
      .lab-batch-history-head { align-items: flex-start; flex-direction: column; }
      .lab-batch-history-tools { justify-content: flex-start; }
    }

    @media (max-width: 520px) {
      .lab-batch-image-editor { align-items: flex-start; flex-direction: column; }
      .lab-batch-image-control { width: 100%; height: 150px; }
    }

    .lab-assessment-panel { margin-top: 14px; }
    .lab-assessment-title { align-items: flex-start; }
    .lab-assessment-title p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
    .lab-assessment-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 9px; }
    .lab-assessment-horizon { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 700; white-space: nowrap; }
    .lab-assessment-horizon select { min-height: 34px; padding: 7px 27px 7px 9px; border: 1px solid rgba(92, 73, 60, .16); border-radius: 9px; color: var(--ink-soft); background: rgba(255, 253, 249, .86); font: inherit; font-size: 10px; }
    .lab-assessment-note { margin: 0; padding: 10px 12px; border-left: 3px solid rgba(173, 79, 47, .35); border-radius: 8px; color: var(--muted); background: rgba(248, 240, 229, .62); font-size: 10px; line-height: 1.55; }
    .lab-assessment-summary { margin-bottom: 13px; }
    .lab-assessment-table { min-width: 1230px; }
    .lab-assessment-table td { white-space: nowrap; }
    .lab-assessment-name { min-width: 155px; }
    .lab-assessment-name strong { white-space: normal; }
    .lab-assessment-name small,
    .lab-assessment-secondary { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; white-space: normal; }
    .lab-assessment-table td strong { color: var(--ink); }
    .lab-status.info { color: #4e6871; background: #dfeaec; }
    .lab-status.muted { color: #79736f; background: #e9e6e3; }
    .lab-assessment-form-help { margin-top: 14px; padding: 10px 12px; border-radius: 10px; color: var(--muted); background: rgba(239, 229, 216, .7); font-size: 10px; line-height: 1.55; }
    .lab-package-stock-details { padding: 11px 12px; border: 1px solid rgba(173, 79, 47, .15); border-radius: 12px; background: rgba(248, 240, 229, .48); }
    .lab-package-stock-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 10px; }
    .lab-package-stock-grid .lab-field { margin: 0; }
    .lab-package-open-toggle { min-height: 42px; margin: 0; padding: 7px 8px; border: 1px solid rgba(92, 73, 60, .12); border-radius: 10px; background: rgba(255, 253, 249, .72); }
    .lab-package-stock-details > .lab-field-note { display: block; margin-top: 8px; }
    .lab-material-open-stock { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; line-height: 1.4; }
    .lab-material-price-picker { gap: 8px; }
    .lab-material-price-search-row { display: flex; align-items: center; gap: 9px; }
    .lab-material-price-search-row input { flex: 1; min-width: 0; }
    .lab-material-price-match-count { flex: 0 0 auto; color: var(--muted); font-size: 10px; font-weight: 650; white-space: nowrap; }
    .lab-material-price-picker select { min-height: 42px; }

    @media (max-width: 760px) {
      .lab-assessment-panel .lab-panel-title { align-items: flex-start; flex-direction: column; }
      .lab-assessment-actions { width: 100%; justify-content: flex-start; }
      .lab-assessment-actions .primary-button { flex: 1; }
      .lab-package-stock-grid { grid-template-columns: 1fr 1fr; }
      .lab-package-open-toggle { grid-column: span 2; }
    }

    @media (max-width: 520px) {
      .lab-assessment-actions { align-items: stretch; flex-direction: column; }
      .lab-assessment-horizon { justify-content: space-between; }
      .lab-assessment-horizon select { flex: 1; }
      .lab-package-stock-grid { grid-template-columns: 1fr; }
      .lab-package-open-toggle { grid-column: 1; }
      .lab-material-price-search-row { align-items: stretch; flex-direction: column; gap: 5px; }
      .lab-material-price-match-count { white-space: normal; }
    }
    /* V0.5 business-center MVP. All selectors are namespaced with biz-. */
    .biz-kicker { display: block; margin-bottom: 4px; color: var(--rust); font-size: 10px; font-weight: 800; letter-spacing: .16em; }
    .biz-muted, .biz-section-note { color: var(--muted); font-size: 12px; }
    .biz-loop { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 0 0 16px; padding: 12px; border: 1px solid rgba(173,79,47,.12); border-radius: 16px; background: rgba(255,255,255,.48); color: var(--ink-soft); font-size: 12px; font-weight: 750; }
    .biz-loop b { color: var(--rust); font-weight: 500; }
    .biz-summary-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-bottom: 16px; }
    .biz-summary-card { min-height: 108px; padding: 15px; border: 1px solid rgba(92,73,60,.09); border-radius: 17px; background: rgba(255,255,255,.64); }
    .biz-summary-card small { display: block; color: var(--muted); font-size: 11px; font-weight: 750; }
    .biz-summary-card strong { display: block; margin: 8px 0 4px; color: var(--rust-dark); font-family: var(--font-serif); font-size: 29px; line-height: 1; }
    .biz-summary-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
    .biz-toolbar { display: flex; align-items: flex-end; gap: 10px; margin: 12px 0 20px; padding: 12px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.52); }
    .biz-search { flex: 1; }
    .biz-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; color: var(--muted); font-size: 11px; font-weight: 700; }
    .biz-field input, .biz-field select, .biz-field textarea { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid rgba(92,73,60,.17); border-radius: 11px; outline: none; color: var(--ink); background: rgba(255,255,255,.8); font: inherit; font-size: 13px; font-weight: 500; }
    .biz-field textarea { min-height: 76px; resize: vertical; line-height: 1.55; }
    .biz-field input:focus, .biz-field select:focus, .biz-field textarea:focus { border-color: rgba(173,79,47,.6); box-shadow: 0 0 0 3px rgba(173,79,47,.1); }
    .biz-section-head, .biz-modal-head, .biz-form-actions, .biz-card-head, .biz-card-actions, .biz-task-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .biz-section-head { margin: 18px 0 10px; }
    .biz-section-head h2, .biz-modal-head h2 { margin: 0; color: var(--ink); font-family: var(--font-serif); font-weight: 650; }
    .biz-campaign-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
    .biz-campaign-card { padding: 17px; border: 1px solid var(--line); border-radius: 19px; background: rgba(255,255,255,.66); box-shadow: 0 8px 22px rgba(74,53,38,.045); }
    .biz-card-head { align-items: flex-start; }
    .biz-card-head h3 { margin: 3px 0 4px; color: var(--ink); font-family: var(--font-serif); font-size: 19px; }
    .biz-card-subtitle { color: var(--muted); font-size: 11px; }
    .biz-stage { display: inline-flex; min-width: max-content; padding: 5px 9px; border-radius: 999px; color: #765342; background: #eee3d9; font-size: 10px; font-weight: 800; }
    .biz-stage.planning { color: #8a6828; background: #f5e9c8; }
    .biz-stage.active { color: #8a4a2c; background: #f5ddcf; }
    .biz-stage.review { color: #506b73; background: #e2eeee; }
    .biz-stage.complete { color: #4f7154; background: #e7efe0; }
    .biz-card-copy { min-height: 44px; margin: 13px 0; color: var(--ink-soft); font-size: 12px; line-height: 1.65; }
    .biz-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0; }
    .biz-chip { padding: 4px 8px; border-radius: 999px; color: var(--ink-soft); background: rgba(92,73,60,.07); font-size: 10px; }
    .biz-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin: 12px 0; }
    .biz-metric { padding: 9px; border-radius: 12px; background: rgba(245,239,231,.72); }
    .biz-metric small { display: block; color: var(--muted); font-size: 9px; }
    .biz-metric strong { display: block; margin-top: 4px; color: var(--ink); font-size: 13px; }
    .biz-card-actions { justify-content: flex-end; flex-wrap: wrap; padding-top: 11px; border-top: 1px solid rgba(92,73,60,.08); }
    .biz-card-actions button { border: 0; color: var(--rust-dark); background: transparent; font-size: 11px; font-weight: 750; cursor: pointer; }
    .biz-card-actions .biz-danger { color: #a54d3e; }
    .biz-task-panel { margin-top: 24px; padding: 18px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.5); }
    .biz-task-list { display: grid; gap: 8px; }
    .biz-task-row { padding: 11px 12px; border: 1px solid rgba(92,73,60,.09); border-radius: 13px; background: rgba(255,255,255,.66); }
    .biz-task-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
    .biz-task-toggle { width: 25px; height: 25px; flex: 0 0 auto; border: 1px solid rgba(92,73,60,.18); border-radius: 50%; color: var(--muted); background: #fff; cursor: pointer; }
    .biz-task-row.done { opacity: .62; }
    .biz-task-row.done .biz-task-toggle { color: #fff; border-color: #6d8a68; background: #6d8a68; }
    .biz-task-row.done strong { text-decoration: line-through; }
    .biz-task-copy { min-width: 0; }
    .biz-task-copy strong { display: block; overflow: hidden; color: var(--ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
    .biz-task-copy small { color: var(--muted); font-size: 10px; }
    .biz-task-actions { display: flex; gap: 7px; }
    .biz-task-actions button { border: 0; color: var(--rust-dark); background: transparent; font-size: 11px; cursor: pointer; }
    .biz-empty { padding: 34px 18px; border: 1px dashed rgba(92,73,60,.18); border-radius: 17px; color: var(--muted); text-align: center; font-size: 12px; }
    .biz-modal[hidden] { display: none; }
    .biz-modal { position: fixed; z-index: 120; inset: 0; display: grid; place-items: center; padding: 20px; }
    .biz-modal-backdrop { position: absolute; inset: 0; background: rgba(50,37,28,.42); backdrop-filter: blur(6px); }
    .biz-modal-card { position: relative; width: min(660px,100%); max-height: calc(100vh - 40px); padding: 20px; overflow-y: auto; border: 1px solid rgba(255,255,255,.56); border-radius: 22px; background: #fbf7f0; box-shadow: 0 30px 80px rgba(45,32,23,.25); }
    .biz-modal-wide { width: min(880px,100%); }
    .biz-close { width: 34px; height: 34px; border: 0; border-radius: 50%; color: var(--muted); background: rgba(92,73,60,.08); font-size: 20px; cursor: pointer; }
    .biz-form-section { margin-top: 17px; padding-top: 15px; border-top: 1px solid rgba(92,73,60,.1); }
    .biz-form-section h3 { margin: 0 0 11px; color: var(--ink); font-size: 14px; }
    .biz-section-note { margin: -5px 0 11px; }
    .biz-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
    .biz-form-grid-3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .biz-span-2 { grid-column: span 2; }
    .biz-span-all { grid-column: 1 / -1; }
    .biz-channel-field { margin: 0; padding: 10px 12px; border: 1px solid rgba(92,73,60,.13); border-radius: 12px; }
    .biz-channel-field legend { padding: 0 4px; color: var(--muted); font-size: 11px; font-weight: 700; }
    .biz-channel-options { display: flex; flex-wrap: wrap; gap: 8px; }
    .biz-channel-options label { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border-radius: 999px; background: rgba(92,73,60,.06); color: var(--ink-soft); font-size: 11px; }
    .biz-form-actions { justify-content: flex-end; margin-top: 18px; }
    @media (max-width: 760px) {
      .biz-summary-grid, .biz-campaign-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
      .biz-form-grid, .biz-form-grid-3 { grid-template-columns: 1fr; }
      .biz-span-2, .biz-span-all { grid-column: 1; }
      .biz-toolbar { align-items: stretch; flex-direction: column; }
      .biz-loop { justify-content: flex-start; overflow-x: auto; }
      .biz-task-row { align-items: flex-start; }
    }
    @media (max-width: 480px) {
      .biz-summary-grid, .biz-campaign-list { grid-template-columns: 1fr; }
      .biz-modal { padding: 8px; }
      .biz-modal-card { max-height: calc(100vh - 16px); padding: 16px; border-radius: 17px; }
      .biz-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
    }

    /* Reservation pilot: intentionally local-only until the formal order model is approved. */
    .booking-trial { margin: 22px 0 28px; padding: 19px; border: 1px solid rgba(173,79,47,.2); border-radius: 23px; background: linear-gradient(135deg, rgba(255,250,242,.92), rgba(248,239,228,.72)); box-shadow: 0 10px 28px rgba(74,53,38,.055); }
    .booking-trial-head, .booking-card-head, .booking-product-head, .booking-order-card-head, .booking-order-card-actions, .booking-production-head, .booking-packing-head, .booking-trial-next { display: flex; align-items: flex-start; justify-content: space-between; gap: 13px; }
    .booking-kicker { display: block; margin-bottom: 4px; color: var(--rust); font-size: 10px; font-weight: 850; letter-spacing: .16em; }
    .booking-trial-head h2, .booking-card-head h3 { margin: 0; color: var(--ink); font-family: var(--font-serif); font-weight: 650; }
    .booking-trial-head h2 { font-size: 23px; }
    .booking-trial-head p, .booking-modal-subtitle, .booking-trial-next p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
    .booking-trial-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
    .booking-trial-notice { margin-top: 15px; padding: 10px 12px; border: 1px dashed rgba(173,79,47,.28); border-radius: 12px; color: #765342; background: rgba(255,255,255,.58); font-size: 11px; line-height: 1.55; }
    .booking-trial-tabs { display: flex; gap: 6px; margin: 16px 0 13px; padding: 4px; border-radius: 13px; background: rgba(92,73,60,.07); }
    .booking-trial-tabs button { flex: 0 0 auto; min-height: 36px; padding: 7px 14px; border: 0; border-radius: 10px; color: var(--muted); background: transparent; font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }
    .booking-trial-tabs button[aria-selected="true"] { color: var(--rust-dark); background: #fffdf9; box-shadow: 0 3px 10px rgba(74,53,38,.08); }
    .booking-trial-kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin-bottom: 12px; }
    .booking-trial-kpi { min-height: 82px; padding: 12px; border: 1px solid rgba(92,73,60,.1); border-radius: 15px; background: rgba(255,255,255,.68); }
    .booking-trial-kpi small { display: block; color: var(--muted); font-size: 10px; font-weight: 750; }
    .booking-trial-kpi strong { display: block; margin-top: 7px; color: var(--rust-dark); font-family: var(--font-serif); font-size: 24px; line-height: 1; }
    .booking-trial-kpi p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.35; }
    .booking-trial-grid { display: grid; grid-template-columns: minmax(230px,.82fr) minmax(0,1.48fr); gap: 12px; }
    .booking-card { min-width: 0; padding: 15px; border: 1px solid rgba(92,73,60,.1); border-radius: 17px; background: rgba(255,255,255,.6); }
    .booking-card-head { align-items: center; margin-bottom: 11px; }
    .booking-card-head h3 { font-size: 17px; }
    .booking-link-button, .booking-order-card-actions button, .booking-product-remove, .booking-order-line-remove, .booking-plain-button { min-height: 30px; padding: 6px 9px; border: 1px solid rgba(173,79,47,.18); border-radius: 9px; color: var(--rust-dark); background: rgba(255,255,255,.66); font: inherit; font-size: 10px; font-weight: 750; cursor: pointer; }
    .booking-link-button:hover, .booking-order-card-actions button:hover, .booking-product-remove:hover, .booking-order-line-remove:hover, .booking-plain-button:hover { border-color: rgba(173,79,47,.48); background: #fff; }
    .booking-section-note { color: var(--muted); font-size: 10px; }
    .booking-settings-summary { display: grid; gap: 9px; }
    .booking-settings-dates { padding: 10px 11px; border-radius: 11px; color: var(--ink-soft); background: rgba(245,239,231,.75); font-size: 11px; line-height: 1.55; }
    .booking-settings-dates strong { color: var(--ink); }
    .booking-settings-products { display: grid; gap: 7px; }
    .booking-settings-product { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 9px 10px; border: 1px solid rgba(92,73,60,.09); border-radius: 11px; background: rgba(255,255,255,.7); }
    .booking-settings-product strong { display: block; overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
    .booking-settings-product small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.4; }
    .booking-settings-product-price { color: var(--rust-dark); font-size: 12px; font-weight: 800; white-space: nowrap; }
    .booking-order-list, .booking-production-list, .booking-packing-list { display: grid; gap: 9px; }
    .booking-order-card { padding: 12px; border: 1px solid rgba(92,73,60,.1); border-radius: 13px; background: rgba(255,255,255,.74); }
    .booking-order-card-head { align-items: center; }
    .booking-order-card-head h4 { margin: 0; color: var(--ink); font-size: 13px; }
    .booking-order-card-meta { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.45; }
    .booking-order-demo { display: inline-flex; margin-left: 5px; padding: 3px 6px; border-radius: 999px; color: #8a6828; background: #f5e9c8; font-size: 9px; font-weight: 800; }
    .booking-order-status { display: inline-flex; padding: 4px 7px; border-radius: 999px; color: #4f7154; background: #e7efe0; font-size: 9px; font-weight: 800; white-space: nowrap; }
    .booking-order-status.draft { color: #8a6828; background: #f5e9c8; }
    .booking-order-status.cancelled { color: #915047; background: #f4ded8; }
    .booking-order-items { display: grid; gap: 5px; margin: 10px 0; padding: 9px 10px; border-radius: 10px; background: rgba(245,239,231,.7); }
    .booking-order-item { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: var(--ink-soft); font-size: 11px; }
    .booking-order-item span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .booking-order-item strong { color: var(--ink); white-space: nowrap; }
    .booking-order-card-actions { align-items: center; padding-top: 9px; border-top: 1px solid rgba(92,73,60,.08); }
    .booking-order-payment { min-width: 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
    .booking-order-payment strong { color: var(--ink-soft); }
    .booking-payment-badge { display: inline-flex; margin-left: 5px; padding: 3px 6px; border-radius: 999px; font-size: 9px; font-weight: 800; }
    .booking-payment-badge.paid { color: #4f7154; background: #e7efe0; }
    .booking-payment-badge.partial, .booking-payment-badge.overpaid { color: #8a6828; background: #f5e9c8; }
    .booking-payment-badge.unpaid { color: #915047; background: #f4ded8; }
    .booking-order-card-actions > div:last-child { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
    .booking-order-card-actions .booking-danger, .booking-product-remove, .booking-order-line-remove { color: #a44a3d; }
    .booking-production-item { padding: 12px; border: 1px solid rgba(92,73,60,.1); border-radius: 13px; background: rgba(255,255,255,.74); }
    .booking-production-head { align-items: center; }
    .booking-production-head h4 { margin: 0; color: var(--ink); font-size: 13px; }
    .booking-production-head small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
    .booking-production-quantity { color: var(--rust-dark); font-family: var(--font-serif); font-size: 20px; font-weight: 650; white-space: nowrap; }
    .booking-production-copy { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 10px; color: var(--ink-soft); font-size: 10px; line-height: 1.45; }
    .booking-production-copy strong { color: var(--ink); }
    .booking-capacity { height: 7px; margin-top: 10px; overflow: hidden; border-radius: 999px; background: rgba(92,73,60,.1); }
    .booking-capacity-fill { height: 100%; min-width: 2px; border-radius: inherit; background: var(--rust); }
    .booking-capacity-fill.over { background: #a44a3d; }
    .booking-packing-card { padding: 11px 12px; border: 1px solid rgba(92,73,60,.1); border-radius: 12px; background: rgba(255,255,255,.74); }
    .booking-packing-head { align-items: center; }
    .booking-packing-head strong { color: var(--ink); font-size: 12px; }
    .booking-packing-head small { color: var(--muted); font-size: 10px; }
    .booking-packing-items { margin-top: 7px; color: var(--ink-soft); font-size: 11px; line-height: 1.55; }
    .booking-trial-next { align-items: center; margin-top: 12px; padding: 12px 13px; border: 1px dashed rgba(92,73,60,.17); border-radius: 13px; background: rgba(255,255,255,.42); }
    .booking-trial-next strong { color: var(--ink-soft); font-size: 12px; }
    .booking-coming-soon { min-width: max-content; padding: 5px 8px; border-radius: 999px; color: var(--muted); background: rgba(92,73,60,.08); font-size: 9px; font-weight: 800; }
    .booking-modal-card { width: min(880px,100%); }
    .booking-order-modal-card { width: min(700px,100%); }
    .booking-product-rows { display: grid; gap: 9px; }
    .booking-product-row { padding: 11px; border: 1px solid rgba(92,73,60,.11); border-radius: 13px; background: rgba(255,255,255,.56); }
    .booking-product-row-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
    .booking-product-row-head strong { color: var(--ink-soft); font-size: 11px; }
    .booking-product-grid { display: grid; grid-template-columns: 1.15fr 1fr repeat(3,.72fr); gap: 8px; }
    .booking-product-grid .biz-field { min-width: 0; }
    .booking-product-grid .biz-field input, .booking-product-grid .biz-field select { min-height: 38px; padding: 7px 8px; font-size: 11px; }
    .booking-order-lines { display: grid; gap: 8px; }
    .booking-order-line { display: grid; grid-template-columns: minmax(0,1fr) 88px minmax(65px,auto) 30px; gap: 7px; align-items: end; padding: 8px; border: 1px solid rgba(92,73,60,.1); border-radius: 11px; background: rgba(255,255,255,.58); }
    .booking-order-line .biz-field input, .booking-order-line .biz-field select { min-height: 38px; padding: 7px 8px; font-size: 11px; }
    .booking-order-line-price { padding-bottom: 10px; color: var(--muted); font-size: 10px; text-align: right; white-space: nowrap; }
    .booking-order-line-remove { width: 30px; height: 30px; min-height: 30px; padding: 0; font-size: 16px; line-height: 1; }
    .booking-order-total { display: grid; align-content: center; min-height: 42px; padding: 7px 10px; border-radius: 11px; color: var(--ink-soft); background: rgba(245,239,231,.75); font-size: 11px; line-height: 1.55; }
    .booking-order-total strong { color: var(--rust-dark); font-size: 15px; }
    .booking-empty { padding: 25px 14px; border: 1px dashed rgba(92,73,60,.17); border-radius: 13px; color: var(--muted); text-align: center; font-size: 11px; line-height: 1.55; }
    @media (max-width: 900px) {
      .booking-trial-grid { grid-template-columns: 1fr; }
      .booking-product-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 760px) {
      .booking-trial-head, .booking-trial-next { flex-direction: column; }
      .booking-trial-actions { justify-content: flex-start; }
      .booking-trial-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
      .booking-product-grid { grid-template-columns: 1fr 1fr; }
      .booking-order-line { grid-template-columns: minmax(0,1fr) 78px 30px; }
      .booking-order-line-price { grid-column: 1 / 3; padding: 0; text-align: left; }
      .booking-order-line-remove { grid-column: 3; grid-row: 1 / 3; align-self: center; }
    }
    @media (max-width: 480px) {
      .booking-trial { padding: 14px; border-radius: 18px; }
      .booking-trial-kpi strong { font-size: 21px; }
      .booking-product-grid { grid-template-columns: 1fr; }
      .booking-product-row-head { align-items: flex-start; }
      .booking-order-card-actions { align-items: flex-start; flex-direction: column; }
      .booking-order-card-actions > div:last-child { justify-content: flex-start; }
    }
    /* Reusable recipe tool library */
    .recipe-tools-panel {
      display: grid;
      gap: 22px;
    }

    .recipe-tools-toolbar {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 20px;
    }

    .recipe-tools-toolbar h3,
    .recipe-tools-manager h3 {
      margin: 0 0 7px;
      font-size: 24px;
      line-height: 1.2;
    }

    .recipe-tools-toolbar p,
    .recipe-tools-manager-head p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.7;
    }

    .recipe-tools-count {
      color: var(--rust);
      font-weight: 800;
    }

    .recipe-tools-manage-button {
      flex: 0 0 auto;
      border: 1px solid rgba(181, 78, 42, .22);
      border-radius: 14px;
      background: #f8eadc;
      color: var(--rust);
      padding: 12px 17px;
      font: inherit;
      font-size: 14px;
      font-weight: 800;
      cursor: pointer;
    }

    .recipe-tools-grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 12px;
    }

    .recipe-tool-card {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: rgba(255, 253, 249, .92);
      box-shadow: 0 10px 28px rgba(65, 48, 34, .055);
    }

    .recipe-tool-image {
      display: grid;
      place-items: center;
      aspect-ratio: 1 / 1;
      overflow: hidden;
      background: linear-gradient(145deg, #f1e7da, #faf6ef);
      color: #a37f65;
      font-family: Georgia, serif;
      font-size: 44px;
    }

    .recipe-tool-image img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      padding: 8px;
      display: block;
    }

    .recipe-tool-copy {
      padding: 11px 10px 12px;
    }

    .recipe-tool-copy strong {
      display: block;
      margin-bottom: 4px;
      color: var(--ink);
      font-size: 15px;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }

    .recipe-tool-copy p {
      min-height: 1.6em;
      margin: 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.6;
    }

    .recipe-tool-reuse {
      display: inline-flex;
      margin-top: 8px;
      border-radius: 999px;
      background: #f2eadf;
      color: #775a43;
      padding: 4px 7px;
      font-size: 10px;
      font-weight: 700;
    }

    .recipe-tools-empty {
      display: grid;
      place-items: center;
      min-height: 245px;
      border: 1px dashed #d8c5b3;
      border-radius: 20px;
      background: linear-gradient(145deg, rgba(248, 241, 232, .72), rgba(255, 253, 249, .9));
      padding: 34px;
      text-align: center;
    }

    .recipe-tools-empty-mark {
      display: grid;
      place-items: center;
      width: 62px;
      height: 62px;
      margin-bottom: 14px;
      border-radius: 20px;
      background: #ead8c6;
      color: #88593c;
      font-family: Georgia, serif;
      font-size: 28px;
    }

    .recipe-tools-empty strong {
      font-size: 19px;
    }

    .recipe-tools-empty p {
      max-width: 460px;
      margin: 8px 0 18px;
      color: var(--muted);
      line-height: 1.7;
    }

    .recipe-tools-manager {
      border: 1px solid #dfd1c2;
      border-radius: 20px;
      background: #f8f3eb;
      padding: 20px;
    }

    .recipe-tools-manager-head {
      margin-bottom: 16px;
    }

    .recipe-tool-create {
      display: grid;
      grid-template-columns: 150px minmax(0, 1fr) auto;
      gap: 14px;
      align-items: stretch;
      margin-bottom: 18px;
      padding-bottom: 18px;
      border-bottom: 1px solid #dfd4c8;
    }

    .recipe-tool-upload {
      display: grid;
      place-items: center;
      min-height: 112px;
      border: 1px dashed #cdb39d;
      border-radius: 15px;
      background: #fffaf4;
      color: #8a6850;
      text-align: center;
      cursor: pointer;
      overflow: hidden;
    }

    .recipe-tool-upload img {
      width: 100%;
      height: 100%;
      min-height: 112px;
      object-fit: contain;
      padding: 6px;
    }

    .recipe-tool-upload span {
      padding: 12px;
      font-size: 13px;
      line-height: 1.5;
    }

    .recipe-tool-fields {
      display: grid;
      gap: 10px;
    }

    .recipe-tool-fields input,
    .recipe-tool-fields textarea {
      width: 100%;
      border: 1px solid #d9cabb;
      border-radius: 12px;
      background: #fffdfa;
      color: var(--ink);
      padding: 11px 13px;
      font: inherit;
      resize: vertical;
    }

    .recipe-tool-create-submit {
      align-self: end;
      min-width: 132px;
      border: 1px solid var(--rust-dark);
      border-radius: 13px;
      background: var(--rust);
      color: #fffdf8;
      padding: 12px 16px;
      font: inherit;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 8px 18px rgba(116, 50, 31, .2);
    }

    .recipe-tool-create-submit:hover {
      background: var(--rust-dark);
      transform: translateY(-1px);
    }

    .recipe-tool-library {
      display: grid;
      gap: 9px;
    }

    .recipe-tool-library-empty {
      color: var(--muted);
      padding: 14px 2px 4px;
      font-size: 14px;
    }

    .recipe-tool-library-row {
      display: grid;
      grid-template-columns: 58px minmax(0, 1fr) auto auto;
      gap: 12px;
      align-items: center;
      border: 1px solid #e2d7ca;
      border-radius: 14px;
      background: #fffdfa;
      padding: 9px;
    }

    .recipe-tool-library-thumb {
      display: grid;
      place-items: center;
      width: 58px;
      height: 48px;
      overflow: hidden;
      border-radius: 10px;
      background: #eee3d6;
      color: #977257;
      font-family: Georgia, serif;
      font-size: 20px;
    }

    .recipe-tool-library-thumb img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      padding: 3px;
    }

    .recipe-tool-library-copy strong,
    .recipe-tool-library-copy small {
      display: block;
    }

    .recipe-tool-library-copy small {
      margin-top: 3px;
      color: var(--muted);
      font-size: 11px;
    }

    .recipe-tool-link-button,
    .recipe-tool-delete-button {
      border-radius: 11px;
      padding: 9px 12px;
      font: inherit;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
    }

    .recipe-tool-link-button {
      border: 1px solid #d8c4b2;
      background: #fff;
      color: #6e513c;
    }

    .recipe-tool-link-button.is-linked {
      border-color: #b9cdb6;
      background: #eaf3e7;
      color: #3f6a3e;
    }

    .recipe-tool-delete-button {
      border: 0;
      background: transparent;
      color: #a46c55;
    }

    @media (max-width: 720px) {
      .recipe-tools-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .recipe-tools-toolbar,
      .recipe-tool-create {
        grid-template-columns: 1fr;
      }

      .recipe-tools-toolbar {
        display: grid;
      }

      .recipe-tools-manage-button {
        justify-self: start;
      }

      .recipe-tool-library-row {
        grid-template-columns: 52px minmax(0, 1fr) auto;
      }

      .recipe-tool-delete-button {
        grid-column: 3;
      }
    }

    @media (min-width: 721px) and (max-width: 920px) {
      .recipe-tools-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
    }
    /* Recipe material preparation view and shared material images */
    .recipe-materials-panel {
      display: grid;
      gap: 20px;
    }

    .recipe-materials-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
    }

    .recipe-materials-head h3 {
      margin: 0 0 7px;
      font-size: 24px;
      line-height: 1.2;
    }

    .recipe-materials-head p {
      max-width: 720px;
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.7;
    }

    .recipe-materials-badge {
      flex: 0 0 auto;
      border-radius: 999px;
      background: #f2eadf;
      color: #775a43;
      padding: 8px 12px;
      font-size: 12px;
      font-weight: 800;
    }

    .recipe-materials-grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 12px;
    }

    .recipe-material-card {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: rgba(255, 253, 249, .94);
      box-shadow: 0 10px 28px rgba(65, 48, 34, .055);
    }

    .recipe-material-card-image {
      position: relative;
      display: grid;
      place-items: center;
      aspect-ratio: 1 / 1;
      overflow: hidden;
      background: linear-gradient(145deg, #f1e7da, #faf6ef);
    }

    .recipe-material-card-image img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      padding: 8px;
    }

    .recipe-material-card-copy {
      padding: 11px 10px 12px;
    }

    .recipe-material-card-copy strong {
      display: block;
      color: var(--ink);
      font-size: 15px;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }

    .recipe-material-card-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin-top: 7px;
    }

    .recipe-material-card-meta span {
      border-radius: 999px;
      background: #f3ece3;
      color: #765a45;
      padding: 4px 6px;
      font-size: 10px;
      font-weight: 700;
      white-space: nowrap;
    }

    .material-image-control {
      position: relative;
      display: grid;
      place-items: center;
      overflow: hidden;
      border: 1px dashed #cfb9a4;
      border-radius: 12px;
      background: #faf5ee;
      color: #8a654c;
      cursor: pointer;
    }

    .material-image-control.card {
      width: 100%;
      height: 100%;
      min-height: 150px;
      border: 0;
      border-radius: 0;
    }

    .material-image-control.compact {
      flex: 0 0 58px;
      width: 58px;
      height: 58px;
    }

    .material-image-control img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      padding: 4px;
    }

    img[data-material-thumbnail] {
      opacity: 1;
    }

    .material-image-preview-control {
      flex: 0 0 58px;
    }

    .material-image-preview-control.material-image-preview-empty {
      cursor: default;
    }

    .material-image-preview-control.material-image-preview-empty .material-image-placeholder {
      padding: 4px;
      color: #a58e7d;
      font-size: 10px;
      letter-spacing: 0;
      line-height: 1.35;
    }

    .material-image-placeholder {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      padding: 0;
      text-align: center;
      font-size: 11px;
      font-weight: 650;
      letter-spacing: .08em;
      line-height: 1;
    }

    .material-image-control.card .material-image-placeholder {
      font-size: 13px;
    }

    .material-image-change {
      position: absolute;
      right: 5px;
      bottom: 5px;
      border-radius: 999px;
      background: rgba(47, 42, 36, .78);
      color: white;
      padding: 3px 7px;
      font-size: 10px;
      font-weight: 800;
      opacity: 0;
      transition: opacity .16s ease;
    }

    .material-image-control:hover .material-image-change,
    .material-image-control:focus-within .material-image-change {
      opacity: 1;
    }

    .material-cost-name,
    .price-material-cell {
      display: flex;
      align-items: center;
      gap: 11px;
      min-width: 210px;
    }

    .price-material-cell .price-name-input {
      min-width: 0;
    }

    .recipe-materials-note {
      border-left: 3px solid #d6b898;
      border-radius: 0 13px 13px 0;
      background: #f8f2e9;
      color: #6f5d4e;
      padding: 12px 15px;
      font-size: 13px;
      line-height: 1.7;
    }

    @media (max-width: 720px) {
      .recipe-materials-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .recipe-materials-head {
        display: grid;
      }

      .recipe-materials-badge {
        justify-self: start;
      }

      .material-cost-name,
      .price-material-cell {
        min-width: 180px;
      }
    }

    @media (min-width: 721px) and (max-width: 920px) {
      .recipe-materials-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
    }
/* Calculator production helper: divide the current converted total into portions. */
.calc-portion-divider {
  margin-top: 16px;
  padding: 15px;
  border: 1px solid rgba(173, 79, 47, .18);
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0, rgba(214, 170, 69, .16), transparent 8rem),
    linear-gradient(145deg, rgba(255, 250, 239, .96), rgba(250, 244, 232, .88));
}

.calc-portion-divider > summary {
  list-style: none;
  cursor: pointer;
}

.calc-portion-divider > summary::-webkit-details-marker {
  display: none;
}

.calc-portion-divider-summary {
  position: relative;
  padding-right: 28px;
  user-select: none;
}

.calc-portion-divider-summary::after {
  position: absolute;
  top: 50%;
  right: 1px;
  color: var(--muted);
  content: "⌄";
  font-size: 18px;
  line-height: 1;
  transform: translateY(-50%);
  transition: color .16s ease, transform .16s ease;
}

.calc-portion-divider-summary:hover::after,
.calc-portion-divider-summary:focus-visible::after {
  color: var(--rust);
}

.calc-portion-divider[open] > .calc-portion-divider-summary::after {
  transform: translateY(-50%) rotate(180deg);
}

.calc-portion-divider-summary:focus-visible {
  outline: 2px solid rgba(173, 79, 47, .52);
  outline-offset: 3px;
}

.calc-portion-divider-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.calc-portion-divider-kicker {
  display: block;
  margin-bottom: 5px;
  color: var(--rust);
  font-family: Georgia, serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
}

.calc-portion-divider h3 {
  margin: 0;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.25;
}

.calc-portion-divider-head p {
  max-width: 190px;
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
}

.calc-portion-divider-total {
  flex: 0 0 auto;
  min-width: 68px;
  padding-left: 8px;
  text-align: right;
}

.calc-portion-divider-total small {
  display: block;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.3;
  white-space: nowrap;
}

.calc-portion-divider-total strong {
  display: block;
  margin-top: 3px;
  color: var(--rust-dark);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.calc-portion-divider-body {
  padding-top: 1px;
}

.calc-portion-divider-field {
  margin-top: 13px;
}

.calc-portion-divider-field label {
  display: block;
  margin-bottom: 6px;
  color: #5e574f;
  font-size: 11px;
  font-weight: 800;
}

.calc-portion-divider-field .wide-input {
  height: 42px;
  min-height: 42px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.calc-portion-quick-values {
  margin-top: 8px;
  gap: 5px;
}

.calc-portion-quick-values .quick-button {
  min-width: 0;
  min-height: 32px;
  flex: 1 1 0;
  padding: 5px 4px;
  color: #776b5f;
  background: rgba(255, 255, 255, .52);
  font-size: 10px;
  white-space: nowrap;
}

.calc-portion-quick-values .quick-button:hover,
.calc-portion-quick-values .quick-button[aria-pressed="true"] {
  color: #fffaf3;
  border-color: var(--rust);
  background: var(--rust);
}

.calc-portion-quick-values .quick-button[aria-pressed="true"] {
  box-shadow: 0 4px 12px rgba(173, 79, 47, .16);
}

.calc-portion-result {
  margin-top: 12px;
  padding: 10px 11px;
  border-left: 3px solid var(--rust);
  border-radius: 0 11px 11px 0;
  background: rgba(255, 255, 255, .66);
}

.calc-portion-result small {
  display: block;
  min-height: 15px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.calc-portion-result strong {
  display: block;
  margin-top: 3px;
  color: var(--rust);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

.calc-portion-result[data-state="invalid"] strong,
.calc-portion-result[data-state="pending"] strong {
  color: var(--muted);
  font-size: 14px;
}

@media (max-width: 650px) {
  .calc-portion-divider {
    padding: 14px;
  }

  .calc-portion-divider-head p {
    max-width: 160px;
  }

  .calc-portion-divider-field .wide-input {
    min-height: 44px;
  }

  .calc-portion-quick-values .quick-button {
    min-height: 36px;
  }
}
/* Calculator: expected piece yield and multi-recipe material preparation. */
#calculator .calc-recipe-combobox {
  position: relative;
}

#calculator .calc-recipe-input-wrap {
  position: relative;
}

#calculator .calc-recipe-search {
  padding-right: 43px;
}

#calculator .calc-recipe-search:focus {
  border-color: var(--rust);
  box-shadow: 0 0 0 3px rgba(181, 78, 42, .12);
}

#calculator .calc-recipe-combobox-toggle {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  width: 42px;
  border: 0;
  border-radius: 0 11px 11px 0;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

#calculator .calc-recipe-combobox-toggle:hover,
#calculator .calc-recipe-combobox-toggle:focus-visible {
  color: var(--rust-dark);
  background: rgba(181, 78, 42, .08);
  outline: 0;
}

#calculator .calc-recipe-options {
  position: absolute;
  z-index: 30;
  top: calc(100% + 7px);
  right: 0;
  left: 0;
  max-height: 292px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid rgba(181, 78, 42, .32);
  border-radius: 14px;
  background: var(--card);
  box-shadow: 0 16px 32px rgba(73, 57, 38, .16);
}

#calculator .calc-recipe-options[hidden] {
  display: none;
}

#calculator .calc-recipe-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 42px;
  gap: 12px;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

#calculator .calc-recipe-option:hover,
#calculator .calc-recipe-option:focus-visible,
#calculator .calc-recipe-option.is-active {
  color: var(--rust-dark);
  background: rgba(181, 78, 42, .1);
  outline: 0;
}

#calculator .calc-recipe-option.is-selected {
  font-weight: 700;
}

#calculator .calc-recipe-option-main {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#calculator .calc-recipe-option small {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}

#calculator .calc-recipe-empty {
  padding: 13px 10px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
}

#calculator .calc-recipe-search-hint {
  margin: 7px 2px 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

#calculator .calc-recipe-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

#calculator .calc-recipe-search::-webkit-search-cancel-button {
  cursor: pointer;
}

@media (max-width: 700px) {
  #calculator .calc-recipe-options {
    max-height: 240px;
  }
}

#calculator .mode-switch {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.calc-prep-launcher {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 2px;
  padding: 16px 18px;
  border: 1px solid rgba(173, 79, 47, .2);
  border-radius: 16px;
  background: linear-gradient(105deg, rgba(255, 249, 239, .9), rgba(255, 255, 255, .72));
}

.calc-prep-launcher[hidden],
.calc-prep-planner[hidden] {
  display: none !important;
}

.calc-prep-launcher > div {
  min-width: 0;
}

.calc-prep-launcher h2 {
  margin: 0;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.3;
}

.calc-prep-launcher p {
  max-width: 720px;
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.calc-prep-launcher button {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 8px 14px;
  color: var(--rust-dark);
  font-size: 11px;
  white-space: nowrap;
}

.calc-prep-planner {
  grid-column: 1 / -1;
  position: relative;
  display: grid;
  gap: 18px;
  margin-top: 2px;
  padding: 24px;
  border: 1px solid rgba(173, 79, 47, .27);
  border-radius: 21px;
  box-shadow: 0 17px 36px rgba(86, 55, 36, .07);
  background:
    radial-gradient(circle at 100% 0, rgba(214, 170, 69, .18), transparent 17rem),
    linear-gradient(145deg, rgba(255, 249, 237, .98), rgba(247, 237, 224, .94));
}

.calc-prep-planner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  width: 82px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: var(--rust);
}

/* The V0.7 mobile layer turns this on as a mode marker. Keep the desktop
   preparation panel unchanged while giving narrow screens a clear boundary
   between single-recipe conversion and multi-recipe prep. */
.calc-prep-mode-banner {
  display: none;
}

.calc-prep-head,
.calc-prep-toolbar,
.calc-prep-table-head,
.calc-prep-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.calc-prep-kicker {
  display: block;
  margin-bottom: 5px;
  color: var(--rust);
  font-family: Georgia, serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
}

.calc-prep-head h2,
.calc-prep-table-head h3 {
  margin: 0;
  color: var(--ink);
  line-height: 1.25;
}

.calc-prep-head h2 {
  font-size: 21px;
}

.calc-prep-head p {
  max-width: 650px;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

.calc-prep-stat {
  flex: 0 0 auto;
  min-width: 92px;
  padding-left: 12px;
  text-align: right;
}

.calc-prep-stat small,
.calc-prep-summary small {
  display: block;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
  white-space: nowrap;
}

.calc-prep-stat strong {
  display: block;
  margin-top: 3px;
  color: var(--rust-dark);
  font-size: 24px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.calc-prep-toolbar {
  position: relative;
  align-items: center;
  padding: 14px 16px 14px 19px;
  border: 1px solid rgba(83, 67, 49, .15);
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(86, 55, 36, .045);
  background: linear-gradient(100deg, rgba(255, 255, 255, .94), rgba(255, 249, 240, .8));
}

.calc-prep-toolbar::before {
  content: "";
  position: absolute;
  top: 13px;
  bottom: 13px;
  left: 0;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: #c48748;
}

.calc-prep-toolbar strong,
.calc-prep-toolbar small {
  display: block;
}

.calc-prep-toolbar strong {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.3;
}

.calc-prep-toolbar small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.calc-prep-toolbar-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 7px;
}

.calc-prep-toolbar-actions button,
.calc-prep-footer button {
  min-height: 36px;
  padding: 7px 12px;
  font-size: 11px;
  white-space: nowrap;
}

.calc-prep-memory {
  display: grid;
  gap: 12px;
  padding: 15px 16px;
  border: 1px solid rgba(129, 101, 57, .23);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(86, 55, 36, .04);
  background: linear-gradient(135deg, rgba(246, 239, 227, .96), rgba(255, 255, 255, .74));
}

.calc-prep-memory[open] {
  border-color: rgba(173, 79, 47, .32);
  background: linear-gradient(135deg, rgba(255, 247, 235, .98), rgba(255, 255, 255, .86));
}

.calc-prep-memory-head {
  position: relative;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding-left: 11px;
  padding-right: 36px;
  list-style: none;
  cursor: pointer;
}

.calc-prep-memory-head::-webkit-details-marker {
  display: none;
}

.calc-prep-memory-head::before {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;
  width: 3px;
  border-radius: 4px;
  background: #c48748;
}

.calc-prep-memory-head::after {
  content: "+";
  position: absolute;
  top: 3px;
  right: 0;
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid rgba(173, 79, 47, .24);
  border-radius: 50%;
  color: var(--rust);
  background: rgba(255, 255, 255, .62);
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
}

.calc-prep-memory[open] .calc-prep-memory-head::after {
  content: "−";
}

.calc-prep-memory-head:focus-visible {
  outline: 2px solid rgba(173, 79, 47, .3);
  outline-offset: 4px;
  border-radius: 8px;
}

.calc-prep-memory-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.25;
}

.calc-prep-memory-head p {
  max-width: 720px;
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
}

.calc-prep-memory-meta {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}

.calc-prep-memory-create {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding-top: 12px;
  border-top: 1px solid rgba(129, 101, 57, .14);
}

.calc-prep-memory-name {
  display: block;
  min-width: 0;
}

.calc-prep-memory-name > span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
}

.calc-prep-memory-name input {
  width: 100%;
  min-height: 39px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: rgba(255, 253, 248, .94);
  font: inherit;
  font-size: 12px;
}

.calc-prep-memory-name input:focus {
  outline: 2px solid rgba(173, 79, 47, .25);
  border-color: var(--rust);
}

.calc-prep-memory-create button {
  min-height: 39px;
  padding: 8px 13px;
  font-size: 11px;
  white-space: nowrap;
}

.calc-prep-memory-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.calc-prep-memory-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid rgba(83, 67, 49, .14);
  border-radius: 11px;
  box-shadow: 0 4px 12px rgba(86, 55, 36, .035);
  background: rgba(255, 253, 248, .88);
}

.calc-prep-memory-card.is-active {
  border-color: rgba(173, 79, 47, .48);
  box-shadow: 0 0 0 2px rgba(173, 79, 47, .08);
}

.calc-prep-memory-card-main {
  min-width: 0;
}

.calc-prep-memory-card-main strong,
.calc-prep-memory-card-main small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calc-prep-memory-card-main strong {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.35;
}

.calc-prep-memory-card-main small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.4;
}

.calc-prep-memory-card-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
}

.calc-prep-memory-card-actions button {
  min-height: 31px;
  padding: 5px 9px;
  border: 1px solid rgba(173, 79, 47, .18);
  border-radius: 8px;
  color: var(--rust-dark);
  background: rgba(255, 255, 255, .7);
  font: inherit;
  font-size: 10px;
  cursor: pointer;
  white-space: nowrap;
}

.calc-prep-memory-card-actions button:hover {
  border-color: rgba(173, 79, 47, .48);
  background: rgba(173, 79, 47, .08);
}

.calc-prep-memory-card-actions .calc-prep-memory-delete {
  color: var(--muted);
}

.calc-prep-memory-empty {
  grid-column: 1 / -1;
  padding: 10px 11px;
  border: 1px dashed rgba(173, 79, 47, .2);
  border-radius: 10px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.calc-prep-rows {
  display: grid;
  gap: 12px;
}

.calc-prep-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(270px, 1.05fr) minmax(260px, 1fr);
  gap: 16px;
  align-items: stretch;
  padding: 16px 16px 16px 18px;
  border: 1px solid rgba(83, 67, 49, .17);
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(86, 55, 36, .055);
  background: linear-gradient(100deg, rgba(255, 255, 255, .95), rgba(255, 253, 248, .86));
}

.calc-prep-row::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 0;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, var(--rust), rgba(173, 79, 47, .2));
}

.calc-prep-row-main,
.calc-prep-row-field,
.calc-prep-row-params {
  min-width: 0;
}

.calc-prep-row-main {
  display: grid;
  gap: 9px;
  align-content: start;
}

.calc-prep-row-head,
.calc-prep-row-params-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.calc-prep-row-selection {
  display: block;
  min-width: 0;
}

.calc-prep-row-compact-meta,
.calc-prep-row-params-toggle {
  display: none;
}

.calc-prep-row-params {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 11px 12px 12px;
  border: 1px solid rgba(173, 79, 47, .13);
  border-radius: 12px;
  background: rgba(255, 249, 240, .68);
}

.calc-prep-row-params-head strong {
  color: var(--ink);
  font-size: 11px;
  line-height: 1.3;
}

.calc-prep-row-params-head small {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.3;
  white-space: nowrap;
}

.calc-prep-row-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.calc-prep-row-label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
}

.calc-prep-row-head .calc-prep-row-label {
  display: inline-flex;
  margin-bottom: 0;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--rust-dark);
  background: rgba(173, 79, 47, .1);
}

.calc-prep-row-field .calc-prep-row-label {
  color: #786a5b;
}

.calc-prep-row select,
.calc-prep-row input {
  width: 100%;
  min-height: 39px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: rgba(255, 253, 248, .94);
  font: inherit;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.calc-prep-row select:focus,
.calc-prep-row input:focus {
  outline: 1px solid rgba(173, 79, 47, .34);
  outline-offset: 1px;
  border-color: rgba(173, 79, 47, .58);
}

.calc-prep-row-note {
  display: block;
  overflow: hidden;
  margin-top: 5px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calc-prep-remove {
  display: inline-grid;
  width: 30px;
  min-height: 30px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(173, 79, 47, .15);
  border-radius: 50%;
  color: var(--muted);
  background: rgba(248, 240, 231, .5);
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.calc-prep-remove:hover:not(:disabled) {
  color: var(--rust);
  border-color: rgba(173, 79, 47, .42);
  background: rgba(173, 79, 47, .06);
}

.calc-prep-remove:disabled {
  opacity: .42;
  cursor: not-allowed;
}

.calc-prep-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 190px)) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid rgba(173, 79, 47, .18);
  border-left: 4px solid var(--rust);
  border-radius: 0 13px 13px 0;
  box-shadow: 0 7px 17px rgba(86, 55, 36, .045);
  background: linear-gradient(100deg, rgba(255, 239, 216, .94), rgba(255, 250, 241, .84));
}

.calc-prep-summary strong {
  display: block;
  margin-top: 3px;
  color: var(--rust);
  font-size: 17px;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

.calc-prep-summary p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
}

.calc-prep-table-block {
  display: grid;
  gap: 9px;
  padding: 16px;
  border: 1px solid rgba(83, 67, 49, .15);
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(86, 55, 36, .045);
  background: rgba(255, 253, 248, .72);
}

.calc-prep-ingredient-note {
  display: block;
  max-width: 32ch;
  margin-top: 3px;
  overflow-wrap: anywhere;
  color: var(--rust-dark);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.35;
}

.calc-prep-table-head {
  align-items: end;
}

.calc-prep-table-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.calc-prep-table-actions > span {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
  white-space: nowrap;
}

.calc-prep-table-actions button {
  min-height: 34px;
  padding: 7px 11px;
  border-color: rgba(173, 79, 47, .2);
  color: var(--rust-dark);
  font-size: 10px;
  white-space: nowrap;
}

.calc-prep-table-head h3 {
  font-size: 16px;
}

.calc-prep-table-head > span {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

.calc-prep-view-switch {
  display: inline-flex;
  align-self: start;
  gap: 3px;
  padding: 3px;
  border: 1px solid rgba(173, 79, 47, .16);
  border-radius: 999px;
  background: rgba(242, 232, 219, .72);
}

.calc-prep-view-switch button {
  min-height: 30px;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}

.calc-prep-view-switch button:hover {
  color: var(--rust-dark);
}

.calc-prep-view-switch button.is-active {
  color: var(--rust-dark);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 3px 8px rgba(86, 55, 36, .08);
  font-weight: 800;
}

.calc-prep-view-switch button:focus-visible,
.calc-prep-source-toggle:focus-visible,
.calc-prep-editor-close:focus-visible {
  outline: 2px solid rgba(173, 79, 47, .3);
  outline-offset: 2px;
}

.calc-prep-table-block [role="tabpanel"] {
  min-width: 0;
}

.calc-prep-table-block [role="tabpanel"][hidden] {
  display: none;
}

.calc-prep-table-block .table-wrap {
  margin: 0;
  border: 1px solid rgba(83, 67, 49, .13);
  border-radius: 13px;
  box-shadow: 0 4px 12px rgba(86, 55, 36, .035);
  background: rgba(255, 255, 255, .82);
}

.calc-prep-table-block table {
  min-width: 560px;
}

.calc-prep-table-block th,
.calc-prep-table-block td {
  padding: 11px 13px;
}

.calc-prep-table-block th {
  background: rgba(245, 236, 223, .78);
}

.calc-prep-table-block tbody tr:nth-child(even) {
  background: rgba(249, 243, 235, .45);
}

.calc-prep-table-block tbody tr:hover {
  background: rgba(173, 79, 47, .045);
}

.calc-prep-table-block td:nth-child(2) {
  color: var(--rust);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.calc-prep-table-block .calc-prep-unknown {
  color: var(--muted);
  font-weight: 700;
}

.calc-prep-table-block .calc-prep-flexible {
  color: var(--rust);
  font-weight: 700;
}

.calc-prep-source-single {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  color: var(--ink);
  white-space: nowrap;
}

.calc-prep-source-single small {
  color: var(--rust);
  font-size: 9px;
  font-weight: 700;
}

.calc-prep-source-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 7px;
  border: 1px solid rgba(173, 79, 47, .18);
  border-radius: 999px;
  color: var(--rust-dark);
  background: rgba(255, 248, 237, .7);
  font: inherit;
  font-size: 10px;
  cursor: pointer;
  white-space: nowrap;
}

.calc-prep-source-toggle:hover {
  border-color: rgba(173, 79, 47, .42);
  background: rgba(173, 79, 47, .08);
}

.calc-prep-source-toggle > span {
  color: var(--rust);
  font-size: 13px;
  line-height: 1;
}

.calc-prep-table-block tbody tr.calc-prep-source-breakdown,
.calc-prep-table-block tbody tr.calc-prep-source-breakdown:hover {
  background: rgba(255, 248, 237, .72);
}

.calc-prep-table-block tbody tr.calc-prep-source-breakdown[hidden] {
  display: none;
}

.calc-prep-source-breakdown td {
  padding: 0 13px 10px;
  border-top: 0;
}

.calc-prep-source-breakdown-list {
  display: grid;
  gap: 6px;
  padding: 9px 10px;
  border-left: 3px solid rgba(173, 79, 47, .22);
  border-radius: 0 9px 9px 0;
  background: rgba(255, 255, 255, .6);
}

.calc-prep-source-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: baseline;
  color: var(--muted);
  font-size: 10px;
}

.calc-prep-source-item > div {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 7px;
}

.calc-prep-source-item > div strong {
  flex: 0 0 auto;
  color: var(--rust-dark);
  font-size: 10px;
}

.calc-prep-source-item > div span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calc-prep-source-item > strong {
  color: var(--rust);
  font-variant-numeric: tabular-nums;
}

.calc-prep-source-item > small {
  color: var(--rust-dark);
  font-size: 9px;
  white-space: nowrap;
}

.calc-prep-recipe-details {
  display: grid;
  gap: 10px;
}

.calc-prep-detail-card {
  overflow: hidden;
  border: 1px solid rgba(173, 79, 47, .2);
  border-radius: 14px;
  background: rgba(255, 255, 255, .74);
  box-shadow: 0 5px 14px rgba(86, 55, 36, .035);
}

.calc-prep-detail-card[open] {
  border-color: rgba(173, 79, 47, .3);
  background: rgba(255, 251, 244, .9);
}

.calc-prep-detail-card > summary {
  list-style: none;
  cursor: pointer;
}

.calc-prep-detail-card > summary::-webkit-details-marker {
  display: none;
}

.calc-prep-detail-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 15px;
}

.calc-prep-detail-card-head > div {
  min-width: 0;
}

.calc-prep-detail-index {
  display: inline-flex;
  margin-right: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--rust-dark);
  background: rgba(173, 79, 47, .1);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .03em;
  white-space: nowrap;
}

.calc-prep-detail-card-head strong {
  display: inline-block;
  max-width: min(62vw, 560px);
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.calc-prep-detail-card-head p {
  overflow: hidden;
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calc-prep-detail-scale {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid rgba(173, 79, 47, .2);
  border-radius: 999px;
  color: var(--rust-dark);
  background: rgba(255, 241, 222, .82);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.calc-prep-detail-scale.is-muted {
  color: var(--muted);
  background: rgba(245, 238, 229, .72);
}

.calc-prep-detail-body {
  display: grid;
  gap: 10px;
  padding: 0 15px 15px;
}

.calc-prep-detail-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.calc-prep-detail-kpis > div {
  padding: 9px 10px;
  border: 1px solid rgba(129, 101, 57, .13);
  border-radius: 10px;
  background: rgba(246, 238, 226, .58);
}

.calc-prep-detail-kpis small,
.calc-prep-detail-kpis strong {
  display: block;
}

.calc-prep-detail-kpis small {
  color: var(--muted);
  font-size: 9px;
}

.calc-prep-detail-kpis strong {
  margin-top: 4px;
  color: var(--rust);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.calc-prep-detail-hint {
  margin: 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.5;
}

.calc-prep-detail-body .table-wrap {
  overflow-x: auto;
}

.calc-prep-detail-body table {
  min-width: 450px;
}

.calc-prep-detail-body td:nth-child(2) {
  color: var(--ink);
}

.calc-prep-detail-body td:nth-child(3) {
  color: var(--rust);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.calc-prep-cost-details {
  display: grid;
  gap: 12px;
}

.calc-prep-cost-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) repeat(3, minmax(120px, .55fr));
  gap: 10px;
  align-items: stretch;
  padding: 14px;
  border: 1px solid rgba(173, 79, 47, .24);
  border-radius: 14px;
  background:
    radial-gradient(circle at 100% 0, rgba(214, 170, 69, .17), transparent 12rem),
    linear-gradient(115deg, rgba(255, 244, 224, .96), rgba(255, 252, 245, .88));
}

.calc-prep-cost-overview-main {
  min-width: 0;
  padding: 2px 8px 2px 2px;
}

.calc-prep-cost-overview-main > strong {
  display: block;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.3;
}

.calc-prep-cost-overview-main p {
  max-width: 680px;
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.55;
}

.calc-prep-cost-overview-stat {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 9px 10px;
  border: 1px solid rgba(129, 101, 57, .15);
  border-radius: 10px;
  background: rgba(255, 255, 255, .58);
}

.calc-prep-cost-overview-stat small,
.calc-prep-cost-overview-stat strong {
  display: block;
}

.calc-prep-cost-overview-stat small {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
}

.calc-prep-cost-overview-stat strong {
  overflow: hidden;
  margin-top: 4px;
  color: var(--rust-dark);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calc-prep-cost-overview-stat.is-primary {
  border-color: rgba(173, 79, 47, .24);
  background: rgba(255, 255, 255, .8);
}

.calc-prep-cost-overview-stat.is-primary strong {
  color: var(--rust);
  font-family: Georgia, serif;
  font-size: 20px;
}

.calc-prep-cost-cards {
  display: grid;
  gap: 10px;
}

.calc-prep-cost-card {
  overflow: hidden;
  border: 1px solid rgba(173, 79, 47, .2);
  border-radius: 14px;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 5px 14px rgba(86, 55, 36, .035);
}

.calc-prep-cost-card.is-unavailable {
  background: rgba(245, 238, 229, .72);
}

.calc-prep-cost-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 15px;
  border-bottom: 1px solid rgba(129, 101, 57, .13);
  background: linear-gradient(110deg, rgba(255, 251, 244, .96), rgba(255, 255, 255, .66));
}

.calc-prep-cost-card-head > div {
  min-width: 0;
}

.calc-prep-cost-card-head strong {
  display: inline-block;
  max-width: min(62vw, 560px);
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.calc-prep-cost-card-head p {
  overflow: hidden;
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calc-prep-cost-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 12px 15px 0;
}

.calc-prep-cost-kpis > div {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(129, 101, 57, .13);
  border-radius: 10px;
  background: rgba(246, 238, 226, .52);
}

.calc-prep-cost-kpis small,
.calc-prep-cost-kpis strong {
  display: block;
}

.calc-prep-cost-kpis small {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
}

.calc-prep-cost-kpis strong {
  overflow: hidden;
  margin-top: 4px;
  color: var(--rust);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calc-prep-cost-card > .table-wrap {
  margin: 12px 15px 15px;
  overflow-x: auto;
}

.calc-prep-cost-table {
  min-width: 680px !important;
}

.calc-prep-cost-table th,
.calc-prep-cost-table td {
  padding: 10px 12px;
}

.calc-prep-cost-table td:nth-child(2),
.calc-prep-cost-table td:nth-child(4) {
  font-variant-numeric: tabular-nums;
}

.calc-prep-cost-table td:nth-child(2),
.calc-prep-cost-table td:nth-child(4),
.calc-prep-cost-table .table-total td:last-child {
  color: var(--rust);
  font-weight: 800;
}

.calc-prep-cost-source {
  display: block;
  min-width: 118px;
}

.calc-prep-cost-source strong,
.calc-prep-cost-source small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calc-prep-cost-source strong {
  color: var(--ink);
  font-size: 10px;
}

.calc-prep-cost-source small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.4;
}

.calc-prep-cost-source.is-missing {
  color: var(--muted);
  font-size: 10px;
}

.calc-prep-cost-value strong {
  display: block;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.calc-prep-cost-value small {
  display: block;
  margin-top: 3px;
  color: #8a6c43;
  font-size: 9px;
  font-weight: 500;
  line-height: 1.35;
}

.calc-prep-cost-pending {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.calc-prep-cost-action {
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid rgba(163, 77, 46, .28);
  border-radius: 8px;
  color: var(--rust-dark);
  background: #fff8f2;
  cursor: pointer;
  font: inherit;
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
}

.calc-prep-cost-action:hover {
  border-color: var(--rust);
  background: #f8e8df;
}

.calc-prep-cost-note {
  padding: 11px 13px;
  border-left: 3px solid var(--butter);
  border-radius: 0 10px 10px 0;
  color: var(--muted);
  background: #fbf5df;
  font-size: 10px;
  line-height: 1.6;
}

.calc-prep-cost-note .secondary-button {
  min-height: 33px;
  margin-top: 9px;
  padding: 6px 11px;
  font-size: 10px;
}

.calc-prep-editor-dialog {
  width: min(860px, calc(100vw - 32px));
  max-width: 860px;
  max-height: min(760px, calc(100vh - 32px));
  padding: 0;
  border: 1px solid rgba(173, 79, 47, .28);
  border-radius: 20px;
  color: var(--ink);
  background: #fffaf2;
  box-shadow: 0 24px 80px rgba(54, 37, 25, .24);
}

.calc-prep-editor-dialog::backdrop {
  background: rgba(55, 39, 28, .32);
  backdrop-filter: blur(2px);
}

.calc-prep-editor-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: min(760px, calc(100vh - 32px));
}

.calc-prep-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid rgba(129, 101, 57, .15);
  background: linear-gradient(135deg, rgba(255, 244, 226, .95), rgba(255, 251, 244, .9));
}

.calc-prep-editor-head h3 {
  margin: 0;
  font-size: 19px;
  line-height: 1.3;
}

.calc-prep-editor-head p {
  max-width: 620px;
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
}

.calc-prep-editor-close {
  display: grid;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid rgba(173, 79, 47, .2);
  border-radius: 50%;
  color: var(--rust-dark);
  background: rgba(255, 255, 255, .65);
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.calc-prep-editor-rows {
  display: grid;
  gap: 10px;
  overflow-y: auto;
  padding: 16px 22px;
}

.calc-prep-editor-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) minmax(170px, 1fr) minmax(120px, .7fr) minmax(145px, .85fr);
  gap: 10px;
  align-items: end;
  padding: 13px 14px;
  border: 1px solid rgba(83, 67, 49, .15);
  border-radius: 13px;
  background: rgba(255, 255, 255, .76);
}

.calc-prep-editor-row-main,
.calc-prep-editor-row label {
  min-width: 0;
}

.calc-prep-editor-row-main strong,
.calc-prep-editor-row-main small,
.calc-prep-editor-row-main b {
  display: block;
}

.calc-prep-editor-row-main strong {
  overflow: hidden;
  margin-top: 7px;
  color: var(--ink);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calc-prep-editor-row-main small {
  overflow: hidden;
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calc-prep-editor-row-main b {
  margin-top: 5px;
  color: var(--rust);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.calc-prep-editor-row label > span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
}

.calc-prep-editor-row select,
.calc-prep-editor-row input {
  width: 100%;
  min-height: 39px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: rgba(255, 253, 248, .96);
  font: inherit;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.calc-prep-editor-row select:focus,
.calc-prep-editor-row input:focus {
  outline: 2px solid rgba(173, 79, 47, .25);
  border-color: var(--rust);
}

.calc-prep-editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 22px;
  border-top: 1px solid rgba(129, 101, 57, .15);
  background: rgba(248, 239, 226, .72);
  color: var(--muted);
  font-size: 10px;
}

.calc-prep-editor-footer strong {
  margin-left: 5px;
  color: var(--rust);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.calc-prep-editor-footer button {
  min-height: 38px;
  padding: 8px 16px;
  font-size: 11px;
}

.calc-prep-footer {
  align-items: center;
}

.calc-prep-footer small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.calc-prep-empty {
  padding: 20px;
  border: 1px dashed rgba(173, 79, 47, .24);
  border-radius: 13px;
  color: var(--muted);
  background: rgba(255, 255, 255, .42);
  font-size: 11px;
  text-align: center;
}

@media (max-width: 920px) {
  #calculator .mode-switch {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calc-prep-row {
    grid-template-columns: minmax(230px, 1fr) minmax(240px, 1fr);
  }
}

@media (max-width: 720px) {
  .calc-prep-launcher {
    align-items: stretch;
    flex-direction: column;
    gap: 11px;
    margin-top: 0;
    padding: 14px;
    border-radius: 14px;
  }

  .calc-prep-launcher .calc-prep-kicker {
    display: none;
  }

  .calc-prep-launcher h2 {
    font-size: 16px;
  }

  .calc-prep-launcher p {
    margin-top: 4px;
    font-size: 11px;
  }

  .calc-prep-launcher button {
    width: 100%;
    min-height: 44px;
  }

  .calc-prep-planner {
    padding: 16px;
    border-radius: 17px;
  }

  .calc-prep-head,
  .calc-prep-toolbar,
  .calc-prep-table-head,
  .calc-prep-footer,
  .calc-prep-memory-head {
    align-items: stretch;
    flex-direction: column;
  }

  .calc-prep-table-actions {
    align-items: flex-start;
    justify-content: space-between;
  }

  .calc-prep-stat {
    padding: 9px 0 0;
    border-top: 1px solid rgba(173, 79, 47, .12);
    text-align: left;
  }

  .calc-prep-stat strong {
    font-size: 20px;
  }

  .calc-prep-toolbar-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .calc-prep-toolbar-actions button,
  .calc-prep-footer button,
  .calc-prep-memory-create button {
    width: 100%;
    min-height: 44px;
  }

  .calc-prep-memory-create,
  .calc-prep-memory-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .calc-prep-memory-meta {
    white-space: normal;
  }

  .calc-prep-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .calc-prep-row-main,
  .calc-prep-row-params {
    grid-column: 1 / -1;
  }

  .calc-prep-remove {
    min-height: 44px;
  }

  .calc-prep-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calc-prep-summary p {
    grid-column: 1 / -1;
  }

  .calc-prep-cost-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calc-prep-cost-overview-main {
    grid-column: 1 / -1;
  }

  .calc-prep-cost-card-head {
    align-items: flex-start;
  }

  .calc-prep-cost-card-head strong {
    max-width: 52vw;
  }

  .calc-prep-cost-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calc-prep-cost-kpis > div:last-child {
    grid-column: 1 / -1;
  }

  .calc-prep-view-switch {
    width: 100%;
  }

  .calc-prep-view-switch button {
    flex: 1 1 0;
  }

  .calc-prep-detail-card-head {
    align-items: flex-start;
  }

  .calc-prep-detail-card-head strong {
    max-width: 52vw;
  }

  .calc-prep-editor-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    border-radius: 16px;
  }

  .calc-prep-editor-shell {
    max-height: calc(100vh - 16px);
  }

  .calc-prep-editor-head,
  .calc-prep-editor-rows,
  .calc-prep-editor-footer {
    padding-left: 14px;
    padding-right: 14px;
  }

  .calc-prep-editor-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .calc-prep-editor-row-main {
    grid-column: 1 / -1;
  }
}

@media print {
  .calc-prep-launcher {
    display: none;
  }

  .calc-prep-planner {
    break-inside: avoid;
    box-shadow: none;
  }

  .calc-prep-toolbar-actions,
  .calc-prep-memory,
  .calc-prep-remove,
  .calc-prep-footer button,
  .calc-prep-table-actions button,
  .calc-prep-view-switch,
  .calc-prep-editor-dialog {
    display: none;
  }
}

/* Mobile calculator: controls, results and preparation stay in reading order. */
@media screen and (max-width: 760px) {
  #calculator .calculator-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  #calculator .calculator-layout > * { min-width: 0; width: 100%; }
  #calculator .calculator-controls { position: static; padding: 16px; border-radius: 18px; }
  #calculator .control-group { margin-bottom: 16px; }
  #calculator .control-group > label { font-size: 13px; letter-spacing: 0; }
  #calculator .wide-input, #calculator .wide-select { min-width: 0; font-size: 16px; }
  #calculator .mode-switch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #calculator .mode-button { min-height: 44px; font-size: 13px; }
  #calculator .quick-values { gap: 6px; }
  #calculator .quick-button { min-height: 40px; padding: 6px 10px; font-size: 12px; }
  #calculator .calc-note { font-size: 12px; }
  #calculator .calc-summary { padding: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 8px; }
  #calculator .calc-summary > :first-child { grid-column: 1 / -1; min-width: 0; }
  #calculator .calc-summary h2 { font-size: 21px; overflow-wrap: anywhere; }
  #calculator .calc-summary .summary-number { min-width: 0; }
  #calculator .calculator-result > .table-wrap { overflow-x: auto; }
  #calculator .calculator-result table { width: 100%; min-width: 0; table-layout: fixed; }
  #calculator .calculator-result th, #calculator .calculator-result td { padding: 12px 6px; white-space: normal; overflow-wrap: anywhere; font-size: 12px; }
  #calculator .calculator-result th:first-child { width: 30%; }
  #calculator .calc-footer { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px; }
  #calculator .calc-footer button { flex: 1 1 auto; min-height: 44px; }
  #calculator .calc-prep-planner { min-width: 0; }
  #calculator .calc-prep-view-switch { flex-wrap: wrap; }
}

/* Quiet, compact mobile controls; desktop printing remains available. */
@media screen and (max-width: 760px) {
  #calculator #printCalcButton { display: none; }
  #calculator .mode-switch { background: var(--paper, #f6f2ea); border: 1px solid var(--line); gap: 4px; }
  #calculator .mode-button.active { color: var(--rust-dark); box-shadow: none; outline: 1px solid rgba(173,79,47,.25); }
  #calculator .calc-note { background: transparent; border: 0; padding: 0; color: var(--muted); }
  #calculator .calc-prep-planner { background: var(--card, #fffdf9); border-color: var(--line); box-shadow: none; gap: 14px; }
  #calculator .calc-prep-planner::before,
  #calculator .calc-prep-toolbar::before,
  #calculator .calc-prep-memory-head::before,
  #calculator .calc-prep-row::before { display: none; }
  #calculator .calc-prep-kicker { display: none; }
  #calculator .calc-prep-head h2 { font-size: 20px; }
  #calculator .calc-prep-head { gap: 8px; }
  #calculator .calc-prep-stat { display: none; }
  #calculator .calc-prep-toolbar { padding: 12px; gap: 12px; border-radius: 12px; background: var(--paper, #f6f2ea); box-shadow: none; }
  #calculator .calc-prep-toolbar-actions { width: 100%; }
  #calculator .calc-prep-toolbar-actions button:first-child { background: var(--rust, #ad4f2f); color: #fff; border-color: transparent; }
  #calculator .calc-prep-memory,
  #calculator .calc-prep-memory[open] { padding: 12px; border-radius: 12px; background: transparent; box-shadow: none; gap: 8px; }
  #calculator .calc-prep-memory-head { padding-left: 0; gap: 6px; }
  #calculator .calc-prep-memory:not([open]) .calc-prep-memory-head p { display: none; }
  #calculator .calc-prep-memory-head h3 { font-size: 15px; }
  #calculator .calc-prep-row { padding: 14px; border-radius: 12px; box-shadow: none; }
  #calculator .calc-portion-divider { padding: 12px; background: transparent; border-color: var(--line); border-radius: 12px; }
  #calculator .calc-portion-divider:not([open]) p { display: none; }
  #calculator .calc-portion-divider .calc-portion-divider-kicker { display: none; }
}
    /* Recipe detail percentage display: total weight or flour-based baker's percentage. */
    .recipe-formula-detail {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(290px, .8fr);
      gap: 20px;
      align-items: start;
      min-width: 0;
    }

    .recipe-formula-main {
      min-width: 0;
    }

    .recipe-formula-sidebar {
      display: grid;
      gap: 14px;
      align-content: start;
      min-width: 0;
    }

    .recipe-formula-sidebar-card {
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: rgba(250, 247, 239, .82);
    }

    .recipe-formula-sidebar-head {
      margin-bottom: 13px;
    }

    .recipe-formula-sidebar-head > span,
    .recipe-formula-sidebar-alert-head > span {
      display: block;
      color: var(--rust);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .14em;
    }

    .recipe-formula-sidebar-head h3 {
      margin: 4px 0 0;
      color: var(--ink);
      font-size: 18px;
    }

    .recipe-formula-sidebar-stats {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 9px;
    }

    .recipe-formula-sidebar-stat {
      min-width: 0;
      padding: 10px 11px;
      border: 1px solid rgba(116, 102, 89, .13);
      border-radius: 12px;
      background: rgba(255, 255, 255, .7);
    }

    .recipe-formula-sidebar-stat span,
    .recipe-formula-sidebar-row-copy span {
      display: block;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.35;
    }

    .recipe-formula-sidebar-stat strong {
      display: block;
      margin-top: 4px;
      color: var(--ink);
      font-size: 14px;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }

    .recipe-formula-sidebar-list {
      display: grid;
    }

    .recipe-formula-sidebar-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 11px 0;
      border-top: 1px solid rgba(116, 102, 89, .13);
    }

    .recipe-formula-sidebar-row:first-child {
      padding-top: 0;
      border-top: 0;
    }

    .recipe-formula-sidebar-row-copy {
      min-width: 0;
      display: grid;
      gap: 3px;
    }

    .recipe-formula-sidebar-row-copy strong {
      color: var(--ink);
      font-size: 13px;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }

    .recipe-formula-sidebar-link {
      flex: 0 0 auto;
      min-height: 32px;
      padding: 6px 10px;
      border: 1px solid rgba(173, 79, 47, .25);
      border-radius: 999px;
      color: var(--rust);
      background: rgba(255, 255, 255, .72);
      font-family: inherit;
      font-size: 11px;
      font-weight: 800;
      white-space: nowrap;
      cursor: pointer;
    }

    .recipe-formula-sidebar-link:hover {
      border-color: var(--rust);
      background: #fff;
    }

    .recipe-formula-sidebar-label {
      margin-bottom: 9px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
    }

    .recipe-formula-tags {
      margin: 0;
    }

    .recipe-formula-sidebar-alert {
      border-color: rgba(173, 79, 47, .2);
      background: rgba(255, 247, 234, .9);
    }

    .recipe-formula-sidebar-alert.is-ready {
      border-color: rgba(94, 128, 91, .25);
      background: rgba(244, 249, 237, .9);
    }

    .recipe-formula-sidebar-alert-head strong {
      display: block;
      margin-top: 5px;
      color: var(--ink);
      font-size: 15px;
    }

    .recipe-formula-sidebar-alert p {
      margin: 8px 0 13px;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.55;
    }

    .recipe-formula-table-wrap {
      display: grid;
      gap: 0;
      align-content: start;
    }

    .recipe-percentage-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-bottom: 0;
      border-radius: 14px 14px 0 0;
      background: rgba(248, 244, 237, .9);
    }

    .recipe-percentage-toolbar-copy {
      min-width: 0;
    }

    .recipe-percentage-toolbar-copy strong {
      display: block;
      color: var(--ink);
      font-size: 12px;
      line-height: 1.25;
    }

    .recipe-percentage-toolbar-copy small {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.35;
    }

    .recipe-percentage-switch {
      flex: 0 0 auto;
      display: inline-grid;
      grid-template-columns: repeat(2, auto);
      gap: 3px;
      padding: 3px;
      border: 1px solid rgba(173, 79, 47, .16);
      border-radius: 999px;
      background: rgba(255, 255, 255, .74);
    }

    .recipe-percentage-switch button {
      min-height: 34px;
      padding: 6px 11px;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: var(--muted);
      font-family: inherit;
      font-size: 11px;
      font-weight: 800;
      white-space: nowrap;
      cursor: pointer;
      transition: background .16s ease, color .16s ease, box-shadow .16s ease;
    }

    .recipe-percentage-switch button:hover:not(:disabled) {
      color: var(--rust);
    }

    .recipe-percentage-switch button[aria-pressed="true"] {
      background: var(--rust);
      color: #fffaf5;
      box-shadow: 0 3px 10px rgba(173, 79, 47, .2);
    }

    .recipe-percentage-switch button:focus-visible {
      outline: 2px solid rgba(173, 79, 47, .42);
      outline-offset: 2px;
    }

    .recipe-percentage-switch button:disabled {
      color: rgba(113, 103, 94, .45);
      cursor: not-allowed;
    }

    .recipe-formula-table-wrap > .table-wrap {
      border-radius: 0 0 14px 14px;
    }

    .recipe-formula-table-wrap > .table-wrap table {
      margin: 0;
    }

    .recipe-ingredient-display {
      display: inline-grid;
      grid-template-columns: 5.5em minmax(0, 1fr);
      align-items: baseline;
      column-gap: .5em;
      max-width: 100%;
      vertical-align: baseline;
    }

    .recipe-ingredient-amount-primary {
      min-width: 0;
      color: inherit;
      font-weight: 600;
      text-align: right;
      white-space: nowrap;
    }

    .recipe-ingredient-note {
      display: block;
      min-width: 0;
      max-width: 24ch;
      overflow: hidden;
      color: var(--muted);
      font-size: .82em;
      font-weight: 400;
      line-height: 1.45;
      text-overflow: ellipsis;
      vertical-align: baseline;
      white-space: nowrap;
      cursor: help;
    }

    @media (max-width: 900px) {
      .recipe-formula-detail {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 720px) {
      .recipe-percentage-toolbar {
        align-items: center;
        flex-direction: row;
        gap: 8px;
        padding: 8px 10px;
      }

      .recipe-percentage-toolbar-copy {
        flex: 1 1 auto;
      }

      .recipe-percentage-toolbar-copy strong {
        font-size: 11px;
      }

      .recipe-percentage-toolbar-copy small {
        font-size: 9px;
      }

      .recipe-percentage-switch {
        grid-template-columns: repeat(2, minmax(0, auto));
        gap: 2px;
        padding: 2px;
        width: auto;
      }

      .recipe-percentage-switch button {
        min-height: 32px;
        padding: 5px 8px;
        font-size: 10px;
      }

      .recipe-formula-sidebar-card {
        padding: 14px;
      }

      .recipe-ingredient-note {
        max-width: 18ch;
      }

      .recipe-ingredient-display {
        grid-template-columns: 5.5em minmax(0, 1fr);
        column-gap: .35em;
      }
    }
    /* V0.6.9 current recipe editing */
    #recipeForm:not(.recipe-form-editing) .recipe-current-edit-only {
      display: none;
    }

    #recipeForm.recipe-form-editing {
      width: min(820px, 100%);
    }

    .recipe-current-edit-note {
      display: grid;
      gap: 4px;
      margin-bottom: 18px;
      padding: 13px 15px;
      border: 1px solid rgba(191, 83, 47, .2);
      border-radius: 14px;
      background: rgba(248, 234, 219, .62);
    }

    .recipe-current-edit-note strong {
      color: var(--accent);
      font-size: 13px;
    }

    .recipe-current-edit-note span {
      color: var(--muted);
      font-size: 11px;
      line-height: 1.6;
    }

    .recipe-current-edit-fields {
      display: grid;
      gap: 14px;
      margin-bottom: 14px;
    }

    .recipe-current-edit-button {
      border-color: rgba(191, 83, 47, .34);
      color: var(--accent);
    }

    .detail-card > #recipeDetailContent > .modal-actions {
      flex-wrap: wrap;
    }

    @media (max-width: 720px) {
      #recipeForm.recipe-form-editing {
        width: 100%;
      }

      .recipe-current-edit-note {
        margin-bottom: 14px;
      }

      #recipeForm.recipe-form-editing .modal-actions button {
        min-height: 44px;
      }

      .detail-card > #recipeDetailContent > .modal-actions .recipe-current-edit-button {
        flex: 1 1 100%;
      }
    }
    /* V0.6.14 packaging consumables and combined recipe cost */
    .recipe-detail-total-cost {
      display: grid;
      align-content: center;
      gap: 3px;
      min-width: 230px;
      margin-right: auto;
      padding: 3px 14px 3px 2px;
    }

    .recipe-detail-total-cost small {
      color: var(--muted);
      font-size: 10px;
      line-height: 1.2;
    }

    .recipe-detail-total-cost strong {
      color: var(--ink);
      font-size: 18px;
      line-height: 1.15;
    }

    .recipe-detail-total-cost span {
      color: var(--muted);
      font-size: 10px;
      line-height: 1.35;
    }

    .recipe-detail-total-cost.is-pending strong {
      color: #9b6721;
      font-size: 15px;
    }

    .recipe-packaging-panel {
      display: grid;
      gap: 16px;
    }

    .packaging-summary {
      display: grid;
      grid-template-columns: repeat(3, minmax(120px, 1fr)) auto;
      align-items: stretch;
      gap: 10px;
    }

    .packaging-summary > div {
      display: grid;
      gap: 5px;
      min-height: 72px;
      padding: 14px 16px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: rgba(255, 255, 255, .62);
    }

    .packaging-summary small,
    .packaging-item-card label > span {
      color: var(--muted);
      font-size: 11px;
    }

    .packaging-summary strong {
      font-size: 16px;
    }

    .packaging-summary > button {
      align-self: center;
      min-height: 44px;
    }

    .packaging-summary > p {
      grid-column: 1 / -1;
      margin: 0;
      color: var(--muted);
      font-size: 12px;
    }

    .packaging-help {
      padding: 11px 14px;
      border-radius: 12px;
      color: #735d4e;
      background: rgba(239, 225, 202, .54);
      font-size: 12px;
      line-height: 1.55;
    }

    .packaging-item-list {
      display: grid;
      gap: 12px;
    }

    .packaging-item-card {
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: rgba(255, 253, 249, .8);
    }

    .packaging-item-heading,
    .packaging-item-actions,
    .packaging-cost-detail-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .packaging-item-heading > div {
      display: grid;
      gap: 4px;
    }

    .packaging-item-heading small {
      color: var(--muted);
      font-size: 11px;
    }

    .packaging-cost-ready,
    .packaging-cost-pending {
      flex: 0 0 auto;
      padding: 6px 9px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
    }

    .packaging-cost-ready {
      color: #557153;
      background: #e4ece0;
    }

    .packaging-cost-pending {
      color: #9b6721;
      background: #f7e8c8;
    }

    .packaging-form-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      margin-top: 15px;
    }

    .packaging-form-grid label {
      display: grid;
      align-content: start;
      gap: 6px;
      min-width: 0;
    }

    .packaging-form-grid input,
    .packaging-form-grid select {
      width: 100%;
      min-width: 0;
      min-height: 42px;
      padding: 9px 10px;
      border: 1px solid var(--line);
      border-radius: 10px;
      color: var(--ink);
      background: rgba(255, 255, 255, .86);
      font: inherit;
    }

    .packaging-price-picker {
      position: relative;
      z-index: 2;
    }

    .packaging-price-picker-control {
      position: relative;
    }

    .packaging-price-picker-control input {
      padding-right: 42px;
    }

    .packaging-price-picker-clear {
      position: absolute;
      top: 50%;
      right: 7px;
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      color: var(--muted);
      background: transparent;
      font-size: 20px;
      line-height: 1;
      transform: translateY(-50%);
      cursor: pointer;
    }

    .packaging-price-picker-clear:hover,
    .packaging-price-picker-clear:focus-visible {
      color: var(--accent);
      background: rgba(239, 225, 202, .72);
    }

    .packaging-price-results {
      position: absolute;
      top: calc(100% + 5px);
      right: 0;
      left: 0;
      display: grid;
      max-height: min(320px, 42vh);
      padding: 5px;
      overflow-y: auto;
      border: 1px solid rgba(120, 102, 83, .28);
      border-radius: 12px;
      background: rgba(255, 253, 249, .98);
      box-shadow: 0 14px 30px rgba(62, 40, 25, .18);
    }

    .packaging-price-results[hidden] {
      display: none;
    }

    .packaging-price-option {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      width: 100%;
      min-height: 46px;
      padding: 8px 10px;
      border: 0;
      border-radius: 8px;
      color: var(--ink);
      background: transparent;
      text-align: left;
      cursor: pointer;
    }

    .packaging-price-option:hover,
    .packaging-price-option:focus-visible,
    .packaging-price-option.is-active {
      background: rgba(239, 225, 202, .68);
      outline: none;
    }

    .packaging-price-option-copy {
      display: grid;
      min-width: 0;
      gap: 2px;
    }

    .packaging-price-option-copy strong,
    .packaging-price-option-copy small {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .packaging-price-option-copy strong {
      font-size: 13px;
    }

    .packaging-price-option-copy small {
      color: var(--muted);
      font-size: 11px;
    }

    .packaging-price-option-state {
      flex: 0 0 auto;
      color: var(--accent);
      font-size: 10px;
      font-weight: 700;
    }

    .packaging-price-no-results,
    .packaging-price-result-hint {
      padding: 10px;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.5;
    }

    .packaging-price-result-hint {
      border-top: 1px solid rgba(120, 102, 83, .16);
    }

    .packaging-form-grid label > small {
      color: var(--muted);
      font-size: 10px;
    }

    .packaging-field-wide {
      grid-column: span 2;
    }

    .packaging-item-actions {
      justify-content: flex-end;
      margin-top: 13px;
    }

    .packaging-item-actions button {
      min-height: 38px;
    }

    .packaging-empty {
      display: grid;
      justify-items: center;
      gap: 7px;
      padding: 42px 20px;
      border: 1px dashed rgba(120, 102, 83, .28);
      border-radius: 16px;
      color: var(--muted);
      text-align: center;
    }

    .packaging-empty span {
      display: grid;
      place-items: center;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      color: var(--accent);
      background: rgba(239, 225, 202, .7);
      font-family: Georgia, "Times New Roman", serif;
      font-size: 20px;
    }

    .packaging-empty p {
      max-width: 520px;
      margin: 0;
      font-size: 12px;
      line-height: 1.6;
    }

    .packaging-cost-detail {
      margin-top: 22px;
      padding-top: 20px;
      border-top: 1px solid var(--line);
    }

    .packaging-cost-detail-head {
      margin-bottom: 12px;
    }

    .packaging-cost-detail-head small {
      color: var(--accent);
      font-size: 10px;
      letter-spacing: .13em;
    }

    .packaging-cost-detail-head h3 {
      margin: 4px 0 0;
    }

    @media (max-width: 920px) {
      .packaging-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .packaging-summary > button {
        grid-column: 1 / -1;
      }

      .packaging-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 620px) {
      #recipeDetailModal .recipe-detail-total-cost {
        width: 100%;
        min-width: 0;
        padding: 0 0 5px;
      }

      .packaging-summary {
        grid-template-columns: 1fr 1fr;
      }

      .packaging-summary > div:first-child {
        grid-column: 1 / -1;
      }

      .packaging-form-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }

      .packaging-field-wide {
        grid-column: 1 / -1;
      }

      .packaging-form-grid input,
      .packaging-form-grid select,
      .packaging-item-actions button {
        min-height: 44px;
      }

      .packaging-item-card {
        padding: 14px;
      }

      .packaging-item-heading {
        align-items: flex-start;
      }
    }

    @media (max-width: 620px) {
      .packaging-price-picker .packaging-price-picker-control input {
        min-height: 44px;
      }
    }
    .recipe-library-visibility {
      border-color: #d5c4ad;
      color: #6e5744;
    }

    .recipe-library-visibility:hover {
      border-color: #b9845d;
      background: #fbf4eb;
      color: #9a4b2b;
    }

    .recipe-library-visibility.is-hidden {
      border-color: #b9ccb4;
      background: #f0f6ed;
      color: #3f6b3d;
    }

    .hidden-recipe-library-toggle {
      min-height: 42px;
      padding: 0 16px;
      border: 1px solid #d8cbbb;
      border-radius: 12px;
      background: #fffdf9;
      color: #705d4d;
      font: inherit;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
    }

    .hidden-recipe-library-toggle:hover,
    .hidden-recipe-library-toggle.active {
      border-color: #bd7a52;
      background: #f8eee3;
      color: #9d4d2c;
    }

    .recipe-card.is-library-hidden {
      border-style: dashed;
      opacity: .88;
    }

    .recipe-hidden-badge {
      display: inline-flex;
      align-items: center;
      min-height: 22px;
      padding: 0 8px;
      border-radius: 999px;
      background: #eee5da;
      color: #745f4c;
      font-size: 11px;
      font-weight: 700;
    }
    /* Structured multi-stage baking parameters */
    .baking-parameters-panel { display: grid; gap: 20px; }
    .baking-parameters-intro { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; }
    .baking-parameters-intro h3 { margin: 3px 0 7px; font-size: 26px; }
    .baking-parameters-intro p { margin: 0; color: var(--muted); line-height: 1.65; }
    .baking-parameters-kicker { color: var(--rust); font-size: 12px; font-weight: 800; letter-spacing: .12em; }
    .baking-stage-count { flex: 0 0 auto; border-radius: 999px; background: #f1e6d8; color: #7a573f; padding: 8px 12px; font-size: 12px; font-weight: 800; }
    .baking-parameters-form { display: grid; gap: 18px; }
    .baking-primary-grid, .baking-stage-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
    .baking-primary-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .baking-parameters-form label { display: grid; gap: 7px; color: #755f4e; font-size: 12px; font-weight: 700; }
    .baking-parameters-form input, .baking-parameters-form select, .baking-parameters-form textarea { width: 100%; border: 1px solid #d9cabc; border-radius: 12px; background: #fffdfa; color: var(--ink); padding: 11px 12px; font: inherit; font-size: 14px; outline: none; }
    .baking-parameters-form input:focus, .baking-parameters-form select:focus, .baking-parameters-form textarea:focus { border-color: #ba7657; box-shadow: 0 0 0 3px rgba(181,78,42,.09); }
    .baking-stages { display: grid; gap: 14px; }
    .baking-primary-block { border-top: 1px solid var(--line); padding-top: 17px; }
    .baking-primary-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
    .baking-primary-head strong { font-size: 17px; }
    .baking-primary-head span { color: var(--muted); font-size: 12px; }
    .baking-primary-note { grid-column: 1 / -1; }
    .baking-optional-note > summary, .baking-notes-disclosure > summary { display: none; }
    .baking-notes-disclosure { min-width: 0; }
    .baking-notes-disclosure .baking-notes { margin: 0; }
    .baking-stages-label { color: var(--rust); font-size: 13px; font-weight: 800; letter-spacing: .08em; }
    .baking-stage-card { border: 1px solid #dfd1c2; border-radius: 18px; background: #faf6ef; padding: 17px; }
    .baking-stage-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
    .baking-stage-head strong { font-size: 16px; }
    .baking-stage-head button { border: 0; background: transparent; color: var(--rust); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
    .baking-stage-head button:disabled { opacity: .3; cursor: default; }
    .baking-stage-grid { grid-template-columns: 1.2fr repeat(4, minmax(90px, .75fr)); }
    .baking-stage-note { grid-column: 1 / -1; }
    .baking-add-stage { justify-self: start; border: 1px dashed #cda98e; border-radius: 13px; background: #fffaf4; color: var(--rust); padding: 11px 15px; font: inherit; font-weight: 800; cursor: pointer; }
    .baking-notes { display: grid; }
    .baking-parameters-form textarea { resize: vertical; }
    .baking-form-actions { display: flex; align-items: center; justify-content: flex-start; gap: 18px; border-top: 1px solid var(--line); padding-top: 17px; }
    .baking-form-actions span { color: var(--muted); font-size: 12px; line-height: 1.5; }
    @media (max-width: 900px) {
      .baking-primary-grid, .baking-stage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .baking-stage-note { grid-column: 1 / -1; }
    }
    @media (max-width: 560px) {
      .baking-parameters-panel { gap: 15px; }
      .baking-parameters-intro, .baking-form-actions { align-items: stretch; flex-direction: column; }
      .baking-parameters-intro { gap: 7px; }
      .baking-parameters-intro h3 { margin-bottom: 5px; font-size: 20px; }
      .baking-parameters-intro p { font-size: 13px; line-height: 1.5; }
      .baking-parameters-form { gap: 14px; }
      .baking-primary-grid, .baking-stage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
      .baking-primary-fan, .baking-primary-note, .baking-stage-name, .baking-stage-note { grid-column: 1 / -1; }
      .baking-primary-block { padding-top: 14px; }
      .baking-primary-head { align-items: flex-start; gap: 8px; margin-bottom: 10px; }
      .baking-primary-head strong { font-size: 16px; }
      .baking-primary-head span { max-width: 60%; font-size: 11px; line-height: 1.4; text-align: right; }
      .baking-parameters-form label { gap: 5px; }
      .baking-parameters-form input, .baking-parameters-form select, .baking-parameters-form textarea { min-height: 44px; padding: 9px 11px; border-radius: 11px; }
      .baking-optional-note > summary, .baking-notes-disclosure > summary {
        min-height: 44px;
        padding: 8px 11px;
        border: 1px dashed #d6b79e;
        border-radius: 11px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        color: var(--rust);
        background: rgba(255, 250, 244, .82);
        cursor: pointer;
        font-size: 12px;
        font-weight: 800;
        list-style: none;
      }
      .baking-optional-note > summary::-webkit-details-marker, .baking-notes-disclosure > summary::-webkit-details-marker { display: none; }
      .baking-optional-note > summary::after, .baking-notes-disclosure > summary::after { content: "＋"; color: var(--rust); font-size: 16px; line-height: 1; }
      .baking-optional-note[open] > summary, .baking-notes-disclosure[open] > summary { margin-bottom: 8px; border-style: solid; }
      .baking-optional-note[open] > summary::after, .baking-notes-disclosure[open] > summary::after { content: "−"; }
      .baking-notes-disclosure .baking-notes textarea { min-height: 74px; }
      .baking-stage-card { padding: 14px; border-radius: 15px; }
      .baking-stage-head { margin-bottom: 10px; }
      .baking-add-stage { min-height: 44px; padding: 10px 13px; }
      .baking-form-actions { gap: 8px; padding-top: 12px; }
      .baking-form-actions span { font-size: 11px; }
    }
    /* Local recipe-library search history */
    .recipe-search-history-wrap {
      position: relative;
      flex: 1 1 320px;
      min-width: 220px;
    }

    .recipe-search-history-wrap .filter-search {
      width: 100%;
      min-width: 0;
    }

    .recipe-search-history-panel {
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      right: 0;
      z-index: 30;
      overflow: hidden;
      border: 1px solid #dfd1c2;
      border-radius: 15px;
      background: rgba(255, 253, 249, .98);
      box-shadow: 0 18px 42px rgba(70, 48, 31, .14);
      backdrop-filter: blur(16px);
    }

    .recipe-search-history-panel[hidden] { display: none; }

    .recipe-search-history-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 11px 13px 8px;
      color: var(--muted);
      font-size: 12px;
    }

    .recipe-search-history-head button,
    .recipe-search-history-delete {
      border: 0;
      background: transparent;
      color: #9a7258;
      font: inherit;
      cursor: pointer;
    }

    .recipe-search-history-list { padding: 0 7px 7px; }

    .recipe-search-history-row {
      display: flex;
      align-items: center;
      border-radius: 10px;
    }

    .recipe-search-history-row:hover { background: #f6eee4; }

    .recipe-search-history-query {
      display: flex;
      align-items: center;
      gap: 9px;
      min-width: 0;
      flex: 1;
      border: 0;
      background: transparent;
      color: var(--ink);
      padding: 10px;
      font: inherit;
      font-size: 13px;
      text-align: left;
      cursor: pointer;
    }

    .recipe-search-history-query span { color: #a57b60; font-size: 16px; }
    .recipe-search-history-delete { flex: 0 0 auto; padding: 9px 12px; font-size: 17px; }

    @media (max-width: 650px) {
      .recipe-search-history-wrap { width: 100%; flex-basis: 100%; }
    }
    /* Recipe-library creation-time sorting control. */
    .recipe-library-sort {
      min-width: 196px;
    }

    @media (max-width: 720px) {
      #recipes .recipe-library-sort {
        width: 100%;
        min-width: 0;
      }
    }
/* V0.6.83 recipe-library hover actions, user tags, stars, pins, pin markers, and favorite filtering. */
#recipes .recipe-card {
  position: relative;
}

#recipes .recipe-card-topline {
  padding-right: 160px;
}

#recipes .recipe-card-actions {
  position: absolute;
  top: 20px;
  right: 16px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-3px);
  transition: opacity .16s ease, transform .16s ease;
}

#recipes .recipe-card:hover .recipe-card-actions,
#recipes .recipe-card:focus-within .recipe-card-actions,
#recipes .recipe-card-actions:focus-within {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

#recipes .recipe-card-action {
  width: 36px;
  height: 36px;
  padding: 3px;
  border: 0;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  transition: color .16s ease, transform .16s ease;
}

#recipes .recipe-card-action-visual {
  width: 30px;
  height: 30px;
  border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  border-radius: 9px;
  display: inline-grid;
  place-items: center;
  background: color-mix(in srgb, var(--card) 96%, var(--paper));
  box-shadow: 0 4px 12px rgba(69, 51, 34, .08);
  transition: border-color .16s ease, color .16s ease, background .16s ease, transform .16s ease;
}

#recipes .recipe-card-action:hover .recipe-card-action-visual,
#recipes .recipe-card-action:focus-visible .recipe-card-action-visual {
  border-color: color-mix(in srgb, var(--rust) 38%, var(--line));
  color: var(--rust);
  background: var(--card);
  outline: none;
  transform: translateY(-1px);
}

#recipes .recipe-card-action[aria-pressed="true"] .recipe-card-action-visual,
#recipes .recipe-card-action.is-selected .recipe-card-action-visual {
  border-color: color-mix(in srgb, var(--rust) 44%, var(--line));
  color: var(--rust);
  background: color-mix(in srgb, var(--rust) 10%, var(--card));
}

#recipes .recipe-card-action[data-recipe-library-action="pin"][aria-pressed="true"] .recipe-card-action-visual {
  color: #9a552f;
  background: color-mix(in srgb, #d9895d 15%, var(--card));
}

#recipes .recipe-card-action svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

#recipes .recipe-card-action[data-recipe-library-action="star"] svg {
  stroke-width: 1.65;
}

#recipes .recipe-card-action[data-recipe-library-action="star"][aria-pressed="true"] svg {
  fill: currentColor;
}

#recipes .recipe-card-action[data-recipe-library-action="pin"][aria-pressed="true"] svg {
  fill: currentColor;
}

#recipes .recipe-card.is-recipe-pinned {
  border-color: color-mix(in srgb, var(--rust) 36%, var(--line));
}

#recipes .recipe-card.is-recipe-pinned::before {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 5;
  width: 22px;
  height: 22px;
  background: var(--rust);
  content: "";
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  pointer-events: none;
}

#recipes .recipe-card.is-recipe-pinned .recipe-card-actions {
  top: 9px;
}

#recipes .recipe-card.is-recipe-starred .recipe-card-category::after {
  margin-left: 2px;
  color: var(--rust);
  content: "★";
  font-size: 10px;
}

#recipes .recipe-card-user-tags {
  min-width: 0;
  margin: 11px 0 -2px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

#recipes .recipe-card-user-tags[hidden] {
  display: none;
}

#recipes .recipe-card-user-tag {
  max-width: 100%;
  padding: 4px 7px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--rust) 22%, var(--line));
  border-radius: 999px;
  color: color-mix(in srgb, var(--rust) 78%, var(--ink));
  background: color-mix(in srgb, var(--rust) 6%, var(--card));
  font-size: 9px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recipe-library-tag-popover {
  position: fixed;
  z-index: 120;
  width: min(320px, calc(100vw - 24px));
  padding: 15px;
  border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  border-radius: 14px;
  background: var(--card);
  box-shadow: 0 18px 48px rgba(69, 51, 34, .18);
}

.recipe-library-tag-popover strong,
.recipe-library-tag-popover small {
  display: block;
}

.recipe-library-tag-popover strong {
  color: var(--ink);
  font-size: 13px;
}

.recipe-library-tag-popover small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.recipe-library-tag-popover input {
  width: 100%;
  min-height: 42px;
  margin-top: 10px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: var(--paper);
  font: inherit;
  font-size: 12px;
}

.recipe-library-tag-popover input:focus {
  border-color: var(--rust);
  outline: 2px solid color-mix(in srgb, var(--rust) 18%, transparent);
  outline-offset: 1px;
}

.recipe-library-tag-popover-actions {
  margin-top: 11px;
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}

.recipe-library-tag-popover-actions button {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 9px;
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

.recipe-library-tag-popover-cancel {
  border: 1px solid var(--line);
  color: var(--muted);
  background: var(--paper);
}

.recipe-library-tag-popover-save {
  border: 1px solid var(--rust);
  color: #fffaf4;
  background: var(--rust);
}

@media (max-width: 720px) {
  #recipes .recipe-card-topline {
    padding-right: 168px;
  }

  #recipes .recipe-card-actions {
    top: 3px;
    right: 7px;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  #recipes .recipe-card.is-recipe-pinned::before {
    width: 18px;
    height: 18px;
  }

  #recipes .recipe-card.is-recipe-pinned .recipe-card-actions {
    top: 3px;
  }

  #recipes .recipe-card-action {
    width: 40px;
    height: 44px;
    padding: 7px 5px;
  }
}

/* Mobile recipe surfaces keep only the primary entry points visible. Compare,
   custom-tag editing, and the unfinished component-assembly shortcut remain
   available on desktop while the narrow layout stays focused on daily use. */
@media (max-width: 720px) {
  #recipes .page-header [data-new-assembly-recipe] {
    display: none;
  }

  #recipes .recipe-card-actions .recipe-compare-action,
  #recipes .recipe-card-actions [data-recipe-library-action="tag"] {
    display: none;
  }

  #recipes .recipe-card-topline {
    padding-right: 94px;
  }

  #recipes .recipe-card-actions {
    right: 8px;
    gap: 2px;
  }

  #recipes .recipe-card-action {
    width: 38px;
    height: 42px;
    padding: 6px 4px;
  }
}
    /* V0.6.34 display-only sorting controls for the material price library. */
    .price-sort-button {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      min-height: 32px;
      margin: -6px -8px;
      padding: 6px 8px;
      border: 0;
      border-radius: 8px;
      color: inherit;
      background: transparent;
      font: inherit;
      cursor: pointer;
    }

    .price-sort-button:hover,
    .price-sort-button:focus-visible,
    .price-sort-button.is-active {
      color: var(--rust);
      background: rgba(163, 77, 46, .08);
    }

    .price-sort-button:focus-visible {
      outline: 2px solid rgba(163, 77, 46, .45);
      outline-offset: 1px;
    }

    .price-sort-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1;
    }

    .price-sort-button.is-active .price-sort-icon {
      color: var(--rust);
      font-weight: 800;
    }

    @media (max-width: 720px) {
      .price-sort-button {
        min-height: 40px;
        margin: -10px -8px;
      }
    }
    /* Local material-cost search history */
    .material-search-history-wrap {
      position: relative;
      flex: 0 1 300px;
      min-width: 240px;
    }

    .material-search-history-wrap .price-search {
      width: 100%;
    }

    .material-search-history-panel {
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      right: 0;
      z-index: 30;
      overflow: hidden;
      border: 1px solid #dfd1c2;
      border-radius: 15px;
      background: rgba(255, 253, 249, .98);
      box-shadow: 0 18px 42px rgba(70, 48, 31, .14);
      backdrop-filter: blur(16px);
    }

    .material-search-history-panel[hidden] { display: none; }

    .material-search-history-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 11px 13px 8px;
      color: var(--muted);
      font-size: 12px;
    }

    .material-search-history-head button,
    .material-search-history-delete {
      border: 0;
      background: transparent;
      color: #9a7258;
      font: inherit;
      cursor: pointer;
    }

    .material-search-history-list { padding: 0 7px 7px; }

    .material-search-history-row {
      display: flex;
      align-items: center;
      border-radius: 10px;
    }

    .material-search-history-row:hover { background: #f6eee4; }

    .material-search-history-query {
      display: flex;
      align-items: center;
      gap: 9px;
      min-width: 0;
      flex: 1;
      border: 0;
      background: transparent;
      color: var(--ink);
      padding: 10px;
      font: inherit;
      font-size: 13px;
      text-align: left;
      cursor: pointer;
    }

    .material-search-history-query span { color: #a57b60; font-size: 16px; }
    .material-search-history-delete { flex: 0 0 auto; padding: 9px 12px; font-size: 17px; }

    @media (max-width: 760px) {
      .material-search-history-wrap { width: 100%; flex-basis: 100%; }
    }
    /* Editable material aliases inside the price-library identity cell. */
    .price-table {
      min-width: 980px;
    }

    .price-table th:first-child,
    .price-table td:first-child {
      width: 330px;
    }

    .price-material-cell {
      align-items: flex-start;
      min-width: 286px;
    }

    .price-material-identity {
      display: grid;
      flex: 1;
      gap: 6px;
      min-width: 0;
    }

    .price-alias-editor {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      gap: 7px;
      color: var(--muted);
      font-size: 10px;
    }

    .price-alias-input {
      height: 36px;
      min-width: 0;
      font-weight: 400;
    }

    @media (max-width: 720px) {
      .price-table {
        min-width: 920px;
      }

      .price-table th:first-child,
      .price-table td:first-child {
        width: 300px;
      }

      .price-material-cell {
        min-width: 258px;
      }

      .price-alias-input {
        height: 44px;
      }
    }
    /* V0.6.36 grouped materials with collapsible product records. */
    .price-table {
      min-width: 1160px;
    }

    .price-table th:first-child,
    .price-table td:first-child {
      width: 310px;
    }

    .price-table th:nth-child(2),
    .price-table td:nth-child(2) {
      width: 230px;
    }

    .material-group-row td {
      background: rgba(255, 253, 249, .94);
      border-top: 8px solid rgba(243, 237, 228, .72);
    }

    .material-group-row:first-child td {
      border-top-width: 0;
    }

    .material-group-row.is-expanded td {
      background: #fffaf3;
      border-bottom-color: transparent;
    }

    .material-group-main {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 272px;
    }

    .material-group-copy {
      display: grid;
      gap: 7px;
      min-width: 0;
    }

    .material-group-copy > strong {
      color: var(--ink);
      font-size: 15px;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }

    .material-group-aliases {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 5px;
      color: var(--muted);
      font-size: 10px;
    }

    .material-group-alias-label {
      font-weight: 700;
    }

    .material-group-alias-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
    }

    .material-group-alias-tags span {
      padding: 3px 6px;
      border-radius: 999px;
      background: #f2ebe2;
      color: #735e4c;
      font-weight: 700;
    }

    .material-group-alias-empty {
      color: #9c9185;
    }

    .material-current-product {
      display: grid;
      gap: 4px;
    }

    .material-current-product strong {
      font-size: 13px;
      line-height: 1.45;
      overflow-wrap: anywhere;
    }

    .material-current-product strong.material-empty-source {
      color: #9b9186;
      font-size: 12px;
      font-weight: 500;
    }

    .material-current-product small {
      color: var(--muted);
      font-size: 10px;
    }

    .material-summary-value {
      display: block;
      font-size: 13px;
      white-space: nowrap;
    }

    .material-group-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      min-height: 34px;
      padding: 6px 10px;
      border: 1px solid rgba(163, 77, 46, .24);
      border-radius: 10px;
      color: var(--rust-dark);
      background: #fff9f3;
      font: inherit;
      font-size: 11px;
      font-weight: 800;
      cursor: pointer;
      white-space: nowrap;
    }

    .material-group-toggle:hover,
    .material-group-toggle:focus-visible {
      border-color: rgba(163, 77, 46, .52);
      background: #f9e9df;
    }

    .material-group-editor-row td {
      padding: 0 18px 14px;
      border-bottom: 0;
      background: #fffaf3;
    }

    .material-group-editor {
      position: relative;
      display: grid;
      grid-template-columns: minmax(180px, .72fr) minmax(280px, 1.28fr) minmax(200px, 1fr) auto;
      align-items: end;
      gap: 12px;
      padding: 15px 15px 15px 19px;
      border: 1px solid #b5d2d5;
      border-radius: 13px;
      background: #edf7f7;
      box-shadow: 0 5px 14px rgba(63, 111, 119, .08);
    }

    .material-group-editor::before {
      content: "";
      position: absolute;
      top: 12px;
      bottom: 12px;
      left: 0;
      width: 4px;
      border-radius: 0 4px 4px 0;
      background: #4b8991;
    }

    .material-group-editor label {
      display: grid;
      gap: 5px;
      min-width: 0;
      color: var(--muted);
      font-size: 10px;
      font-weight: 700;
    }

    .material-group-editor label > span {
      color: #4c7379;
      font-size: 10px;
      font-weight: 800;
    }

    .material-group-editor input.price-inline {
      border-color: #bdd5d7;
      background: rgba(255, 255, 255, .82);
    }

    .material-group-editor input.price-inline:focus {
      border-color: #4b8991;
      box-shadow: 0 0 0 3px rgba(75, 137, 145, .14);
    }

    .material-group-editor p {
      align-self: center;
      margin: 0;
      padding: 9px 11px;
      border-radius: 9px;
      color: #587277;
      background: rgba(255, 255, 255, .64);
      font-size: 10px;
      line-height: 1.6;
    }

    .material-delete-group {
      min-height: 38px;
      padding: 7px 10px;
      border: 0;
      color: #9a6551;
      background: transparent;
      font: inherit;
      font-size: 10px;
      cursor: pointer;
      white-space: nowrap;
    }

    .material-delete-group:hover {
      color: var(--rust);
      text-decoration: underline;
    }

    .material-product-row td {
      background: rgba(252, 248, 242, .66);
      border-bottom-color: rgba(173, 153, 132, .15);
    }

    .material-product-row td:first-child {
      padding-left: 24px;
    }

    .material-product-identity-editor {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }

    .material-product-identity-editor .material-image-control.compact {
      flex-basis: 48px;
      width: 48px;
      height: 48px;
    }

    .material-product-image-editor {
      display: grid;
      flex: 0 0 84px;
      width: 84px;
      justify-items: center;
      gap: 4px;
    }

    .material-product-image-editor .material-image-control.compact {
      flex: none;
    }

    .material-price-image-editor {
      display: grid;
      flex: 0 0 68px;
      width: 68px;
      justify-items: center;
      gap: 4px;
    }

    .material-image-preview-trigger {
      display: grid;
      flex: 0 0 58px;
      width: 58px;
      height: 58px;
      place-items: center;
      overflow: hidden;
      padding: 0;
      border: 1px dashed #cfb9a4;
      border-radius: 12px;
      background: #faf5ee;
      cursor: zoom-in;
    }

    .material-image-preview-trigger img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      padding: 4px;
    }

    .material-image-preview-trigger:hover,
    .material-image-preview-trigger:focus-visible {
      border-color: #9fc7ca;
      background: #f0f8f8;
      outline: 0;
      box-shadow: 0 0 0 3px rgba(75, 137, 145, .12);
    }

    .material-price-image-editor .material-price-image-empty-control {
      flex: none;
    }

    .material-image-upload-action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 14px;
      color: #8d7663;
      font-size: 9px;
      font-weight: 700;
      line-height: 1.25;
      cursor: pointer;
    }

    .material-image-upload-action:hover,
    .material-image-upload-action:focus-within {
      color: #a34d2e;
      text-decoration: underline;
    }

    .material-image-upload-action input {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      white-space: nowrap;
    }

    .material-image-hover-preview {
      position: fixed;
      z-index: 460;
      display: grid;
      width: min(320px, calc(100vw - 24px));
      height: min(320px, calc(100vh - 24px));
      place-items: center;
      padding: 8px;
      overflow: hidden;
      border: 1px solid rgba(184, 157, 132, .42);
      border-radius: 14px;
      background: #fffdf9;
      box-shadow: 0 16px 42px rgba(57, 42, 29, .24);
      pointer-events: none;
    }

    .material-image-hover-preview img {
      display: block;
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
      object-fit: contain;
    }

    .material-image-viewer-backdrop {
      position: fixed;
      z-index: 470;
      inset: 0;
      display: grid;
      place-items: center;
      padding: 20px;
      background: rgba(45, 37, 29, .56);
      backdrop-filter: blur(7px);
    }

    .material-image-viewer-dialog {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      width: min(1080px, 100%);
      max-height: min(900px, calc(100vh - 40px));
      overflow: hidden;
      border: 1px solid rgba(184, 157, 132, .42);
      border-radius: 18px;
      background: #fffdf9;
      box-shadow: 0 24px 80px rgba(32, 24, 18, .32);
    }

    .material-image-viewer-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      padding: 18px 22px 14px;
      border-bottom: 1px solid rgba(173, 153, 132, .16);
      background: #fffaf4;
    }

    .material-image-viewer-kicker {
      color: #4b858d;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .08em;
    }

    .material-image-viewer-head h2 {
      margin: 6px 0 4px;
      color: var(--ink);
      font-size: 17px;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }

    .material-image-viewer-head p {
      margin: 0;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.5;
    }

    .material-image-viewer-close {
      display: inline-grid;
      flex: 0 0 32px;
      width: 32px;
      height: 32px;
      place-items: center;
      padding: 0 0 2px;
      border: 1px solid rgba(163, 77, 46, .22);
      border-radius: 9px;
      color: var(--rust-dark);
      background: #fffdf9;
      font: inherit;
      font-size: 20px;
      line-height: 1;
      cursor: pointer;
    }

    .material-image-viewer-close:hover,
    .material-image-viewer-close:focus-visible {
      border-color: rgba(163, 77, 46, .52);
      background: #f9e9df;
      outline: 0;
    }

    .material-image-viewer-content {
      display: grid;
      min-height: 180px;
      place-items: center;
      overflow: auto;
      padding: 24px;
      background: #f7f1e9;
    }

    .material-image-viewer-content img {
      display: block;
      max-width: 100%;
      max-height: calc(100vh - 190px);
      width: auto;
      height: auto;
      object-fit: contain;
    }

    .material-image-viewer-foot {
      padding: 11px 22px 14px;
      border-top: 1px solid rgba(173, 153, 132, .16);
      color: var(--muted);
      font-size: 10px;
      line-height: 1.45;
    }

    html.material-image-viewer-open,
    html.material-image-viewer-open body {
      overflow: hidden;
    }

    .material-image-reuse-button {
      max-width: 76px;
      overflow: hidden;
      padding: 0;
      border: 0;
      color: #648187;
      background: transparent;
      font: inherit;
      font-size: 9px;
      font-weight: 700;
      line-height: 1.25;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
    }

    .material-image-reuse-button:hover,
    .material-image-reuse-button:focus-visible {
      color: #3f737c;
      text-decoration: underline;
    }

    .material-image-reuse-button:disabled {
      color: #aaa097;
      cursor: not-allowed;
    }

    .material-image-reuse-backdrop {
      position: fixed;
      z-index: 420;
      inset: 0;
      display: grid;
      place-items: center;
      padding: 20px;
      background: rgba(45, 37, 29, .38);
      backdrop-filter: blur(6px);
    }

    .material-image-reuse-dialog {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      width: min(650px, 100%);
      max-height: min(720px, calc(100vh - 40px));
      overflow: hidden;
      border: 1px solid rgba(184, 157, 132, .35);
      border-radius: 18px;
      background: #fffdf9;
      box-shadow: 0 24px 70px rgba(57, 42, 29, .22);
    }

    .material-image-reuse-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      padding: 20px 22px 16px;
      border-bottom: 1px solid rgba(173, 153, 132, .16);
      background: #fffaf4;
    }

    .material-image-reuse-kicker {
      color: #4b858d;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .08em;
    }

    .material-image-reuse-head h2 {
      margin: 7px 0 5px;
      color: var(--ink);
      font-size: 17px;
      line-height: 1.35;
    }

    .material-image-reuse-head p {
      margin: 0;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.55;
    }

    .material-image-reuse-close {
      display: inline-grid;
      flex: 0 0 30px;
      width: 30px;
      height: 30px;
      place-items: center;
      padding: 0 0 2px;
      border: 1px solid rgba(163, 77, 46, .2);
      border-radius: 9px;
      color: var(--rust-dark);
      background: #fffdf9;
      font: inherit;
      font-size: 20px;
      font-weight: 400;
      line-height: 1;
      cursor: pointer;
    }

    .material-image-reuse-close:hover,
    .material-image-reuse-close:focus-visible {
      border-color: rgba(163, 77, 46, .48);
      background: #f9e9df;
    }

    .material-image-reuse-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      min-height: 0;
      overflow: auto;
      padding: 16px 22px;
    }

    .material-image-reuse-option {
      display: grid;
      grid-template-columns: 58px minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      min-width: 0;
      padding: 9px;
      border: 1px solid rgba(173, 153, 132, .2);
      border-radius: 12px;
      color: var(--ink);
      background: #fffdf9;
      font: inherit;
      text-align: left;
      cursor: pointer;
    }

    .material-image-reuse-option:hover,
    .material-image-reuse-option:focus-visible {
      border-color: #9fc7ca;
      background: #f0f8f8;
      box-shadow: 0 0 0 3px rgba(75, 137, 145, .1);
      outline: 0;
    }

    .material-image-reuse-thumb {
      display: grid;
      width: 58px;
      height: 58px;
      place-items: center;
      overflow: hidden;
      border: 1px solid rgba(183, 155, 129, .2);
      border-radius: 9px;
      background: #faf5ee;
    }

    .material-image-reuse-thumb img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      padding: 3px;
    }

    .material-image-reuse-copy {
      display: grid;
      min-width: 0;
      gap: 4px;
    }

    .material-image-reuse-copy strong,
    .material-image-reuse-copy small {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .material-image-reuse-copy strong {
      color: var(--ink);
      font-size: 11px;
      line-height: 1.35;
    }

    .material-image-reuse-copy small {
      color: var(--muted);
      font-size: 9px;
    }

    .material-image-reuse-copy em {
      width: fit-content;
      padding: 2px 5px;
      border-radius: 999px;
      color: #61765d;
      background: #e7f0e1;
      font-size: 9px;
      font-style: normal;
      font-weight: 700;
    }

    .material-image-reuse-use {
      color: #4b858d;
      font-size: 10px;
      font-weight: 800;
      white-space: nowrap;
    }

    .material-image-reuse-empty {
      display: flex;
      grid-column: 1 / -1;
      align-items: center;
      gap: 12px;
      min-height: 94px;
      padding: 16px;
      border: 1px dashed #b8d1d3;
      border-radius: 12px;
      color: #587277;
      background: #f0f8f8;
    }

    .material-image-reuse-empty > span {
      display: grid;
      flex: 0 0 36px;
      width: 36px;
      height: 36px;
      place-items: center;
      border-radius: 10px;
      color: #4b858d;
      background: #dbecee;
      font-size: 14px;
      font-weight: 800;
    }

    .material-image-reuse-empty div {
      display: grid;
      gap: 4px;
    }

    .material-image-reuse-empty strong {
      font-size: 11px;
    }

    .material-image-reuse-empty small {
      color: #72878a;
      font-size: 10px;
      line-height: 1.5;
    }

    .material-image-reuse-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 13px 22px 17px;
      border-top: 1px solid rgba(173, 153, 132, .16);
      color: var(--muted);
      font-size: 10px;
    }

    .material-image-reuse-upload {
      min-height: 32px;
      padding: 6px 10px;
      border: 1px dashed rgba(163, 77, 46, .4);
      border-radius: 9px;
      color: var(--rust);
      background: #fffaf4;
      font: inherit;
      font-size: 10px;
      font-weight: 800;
      cursor: pointer;
      white-space: nowrap;
    }

    .material-image-reuse-upload:hover,
    .material-image-reuse-upload:focus-visible {
      border-color: rgba(163, 77, 46, .65);
      background: #f9e9df;
      outline: 0;
    }

    html.material-image-reuse-open,
    html.material-image-reuse-open body {
      overflow: hidden;
    }

    .material-brand-product-editor {
      display: grid;
      gap: 5px;
      min-width: 0;
      width: min(100%, 360px);
      color: var(--muted);
      font-size: 10px;
      font-weight: 700;
    }

    .material-brand-product-editor > span {
      color: #4c7379;
      font-size: 10px;
      font-weight: 800;
    }

    .material-brand-product-input {
      min-width: 0;
      width: 100%;
      height: 38px;
    }

    .material-brand-product-input::placeholder {
      color: rgba(116, 106, 95, .46);
      font-weight: 400;
      opacity: .68;
    }

    .material-brand-status {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 7px 11px;
      min-height: 24px;
    }

    .material-brand-status .price-status {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 8px;
      border: 1px solid rgba(180, 139, 70, .16);
      border-radius: 999px;
      color: #92713e;
      background: #fbf2df;
      font-size: 10px;
      font-weight: 700;
      white-space: nowrap;
    }

    .material-current-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 2px 0;
      color: #61765d;
      background: transparent;
      font-size: 11px;
      font-weight: 700;
      white-space: nowrap;
    }

    .material-current-badge::before {
      content: "";
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: currentColor;
    }

    .material-default-button {
      border: 0;
      padding: 0;
      color: var(--rust);
      background: transparent;
      font: inherit;
      font-size: 11px;
      font-weight: 700;
      text-align: left;
      cursor: pointer;
    }

    .material-default-button:hover {
      text-decoration: underline;
    }

    .material-default-button:disabled {
      color: var(--muted);
      cursor: not-allowed;
      text-decoration: none;
      opacity: .72;
    }

    .material-add-product-row td {
      padding: 11px 18px 16px 34px;
      background: rgba(252, 248, 242, .66);
    }

    .material-add-product-row button {
      min-height: 36px;
      padding: 7px 11px;
      border: 1px dashed rgba(163, 77, 46, .42);
      border-radius: 10px;
      color: var(--rust);
      background: #fffaf4;
      font: inherit;
      font-size: 11px;
      font-weight: 800;
      cursor: pointer;
    }

    .material-add-product-row span {
      margin-left: 10px;
      color: var(--muted);
      font-size: 10px;
    }

    .material-brand-choice {
      display: grid;
      gap: 5px;
      margin-top: 7px;
      min-width: 215px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 600;
    }

    .material-brand-choice select {
      width: 100%;
      min-height: 36px;
      border: 1px solid rgba(111, 101, 88, .2);
      border-radius: 9px;
      padding: 6px 30px 6px 9px;
      color: var(--ink);
      background: var(--paper);
      font: inherit;
      font-size: 11px;
    }

    .material-brand-source {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      margin-top: 7px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 700;
    }

    @media (max-width: 900px) {
      .material-group-editor {
        grid-template-columns: minmax(180px, 1fr) minmax(240px, 1.4fr) auto;
      }

      .material-group-editor p {
        display: none;
      }
    }

    @media (max-width: 720px) {
      .price-table {
        min-width: 1100px;
      }

      .material-group-editor {
        grid-template-columns: 210px 310px auto;
      }

      .material-brand-product-input,
      .material-brand-choice select {
        min-height: 44px;
      }

      .material-image-reuse-backdrop {
        padding: 10px;
      }

      .material-image-viewer-backdrop {
        padding: 10px;
      }

      .material-image-viewer-dialog {
        max-height: calc(100vh - 20px);
      }

      .material-image-viewer-head,
      .material-image-viewer-content,
      .material-image-viewer-foot {
        padding-left: 15px;
        padding-right: 15px;
      }

      .material-image-viewer-content {
        padding-top: 15px;
        padding-bottom: 15px;
      }

      .material-image-viewer-content img {
        max-height: calc(100vh - 170px);
      }

      .material-image-reuse-dialog {
        max-height: calc(100vh - 20px);
      }

      .material-image-reuse-head,
      .material-image-reuse-list,
      .material-image-reuse-foot {
        padding-left: 15px;
        padding-right: 15px;
      }

      .material-image-reuse-list {
        grid-template-columns: 1fr;
      }

      .material-image-reuse-foot {
        align-items: flex-start;
        flex-direction: column;
      }
    }

    .material-details-panel {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 9px;
      margin-top: 2px;
      padding: 11px 12px;
      border: 1px solid rgba(190, 125, 78, 0.16);
      border-radius: 12px;
      background: #fffaf4;
    }

    .material-detail-item {
      min-width: 0;
    }

    .material-detail-item span {
      display: block;
      color: var(--muted);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.04em;
    }

    .material-detail-item p {
      margin: 4px 0 0;
      color: var(--ink);
      font-size: 11px;
      line-height: 1.55;
      overflow-wrap: anywhere;
    }

    @media (max-width: 900px) {
      .material-details-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 720px) {
      .material-details-panel {
        grid-template-columns: 1fr;
      }
    }

    /* V0.7 global read-only material catalog and copy-on-write workspace flow. */
    .material-public-catalog {
      position: relative;
      margin: 0 0 18px;
      padding: 20px 22px 22px;
      border: 1px solid rgba(173, 79, 47, .18);
      border-radius: 18px;
      background: linear-gradient(135deg, rgba(255, 250, 242, .98), rgba(250, 244, 234, .88));
      box-shadow: 0 10px 26px rgba(103, 67, 45, .055);
    }

    .material-public-catalog::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 4px;
      border-radius: 18px 0 0 18px;
      background: #bd6242;
    }

    .material-public-catalog-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 22px;
    }

    .material-public-catalog-copy {
      min-width: 0;
    }

    .material-public-catalog-kicker {
      display: block;
      color: #b35d3d;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .14em;
      line-height: 1.4;
      text-transform: uppercase;
    }

    .material-public-catalog-copy h3 {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      margin: 5px 0 6px;
      color: var(--ink);
      font-size: 18px;
      line-height: 1.3;
    }

    .material-public-catalog-copy h3 em {
      padding: 4px 7px;
      border: 1px solid rgba(173, 79, 47, .2);
      border-radius: 999px;
      color: #9e563d;
      background: rgba(255, 255, 255, .7);
      font-size: 10px;
      font-style: normal;
      font-weight: 800;
    }

    .material-public-catalog-copy p {
      max-width: 720px;
      margin: 0;
      color: #746257;
      font-size: 12px;
      font-weight: 550;
      line-height: 1.65;
    }

    .material-public-catalog-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: wrap;
      gap: 9px;
      flex: 0 0 auto;
    }

    .material-public-catalog-actions > span {
      color: #796558;
      font-size: 11px;
      font-weight: 600;
      white-space: nowrap;
    }

    .material-public-catalog-body {
      margin-top: 18px;
      padding-top: 17px;
      border-top: 1px solid rgba(173, 79, 47, .12);
    }

    .material-public-catalog-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 12px;
    }

    .material-public-catalog-search-wrap {
      position: relative;
      flex: 1 1 420px;
      max-width: 620px;
    }

    .material-public-catalog-search-wrap > span {
      position: absolute;
      top: 50%;
      left: 13px;
      z-index: 1;
      color: #a77d67;
      font-size: 18px;
      line-height: 1;
      pointer-events: none;
      transform: translateY(-52%);
    }

    .material-public-catalog-search-wrap .price-search {
      width: 100%;
      max-width: none;
      padding-right: 38px;
      padding-left: 36px;
      color: #655449;
      font-size: 14px;
      font-weight: 600;
    }

    .material-public-catalog-search-wrap .price-search::placeholder {
      color: #897366;
      opacity: 1;
    }

    .material-public-catalog-search-wrap [data-clear-public-material-search] {
      position: absolute;
      top: 50%;
      right: 8px;
      display: inline-grid;
      width: 28px;
      height: 28px;
      place-items: center;
      padding: 0 0 2px;
      border: 0;
      border-radius: 50%;
      color: #9b806e;
      background: transparent;
      font: inherit;
      font-size: 19px;
      line-height: 1;
      cursor: pointer;
      transform: translateY(-50%);
    }

    .material-public-catalog-search-wrap [data-clear-public-material-search]:hover,
    .material-public-catalog-search-wrap [data-clear-public-material-search]:focus-visible {
      color: #9b4d35;
      background: #f8e9de;
      outline: 0;
    }

    .material-public-catalog-toolbar > span {
      flex: 0 0 auto;
      color: #79675b;
      font-size: 11px;
      font-weight: 600;
      white-space: nowrap;
    }

    .material-public-catalog-control-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 14px;
    }

    .material-public-catalog-scopes,
    .material-public-catalog-view-controls,
    .material-public-catalog-view-toggle {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 7px;
    }

    .material-public-catalog-scopes button,
    .material-public-catalog-view-toggle button,
    .material-public-catalog-sort select {
      min-height: 31px;
      border: 1px solid rgba(173, 153, 132, .25);
      border-radius: 9px;
      color: #6d5648;
      background: rgba(255, 253, 249, .86);
      font: inherit;
      font-size: 11px;
      font-weight: 800;
    }

    .material-public-catalog-scopes button,
    .material-public-catalog-view-toggle button {
      padding: 5px 9px;
      cursor: pointer;
    }

    .material-public-catalog-scopes button span {
      display: inline-grid;
      min-width: 18px;
      height: 18px;
      margin-left: 5px;
      place-items: center;
      border-radius: 999px;
      color: #88634f;
      background: #f4e9de;
      font-size: 10px;
      font-weight: 800;
    }

    .material-public-catalog-scopes button:hover,
    .material-public-catalog-scopes button:focus-visible,
    .material-public-catalog-view-toggle button:hover,
    .material-public-catalog-view-toggle button:focus-visible {
      border-color: rgba(173, 79, 47, .4);
      background: #fff6ed;
      outline: 0;
    }

    .material-public-catalog-scopes button[aria-pressed="true"],
    .material-public-catalog-view-toggle button[aria-pressed="true"] {
      border-color: rgba(173, 79, 47, .36);
      color: #974b34;
      background: #f9e9df;
    }

    .material-public-catalog-sort {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: #79675b;
      font-size: 11px;
      font-weight: 700;
      white-space: nowrap;
    }

    .material-public-catalog-sort select {
      min-width: 112px;
      padding: 5px 8px;
      cursor: pointer;
    }

    .material-public-catalog-layout {
      display: grid;
      grid-template-columns: 158px minmax(0, 1fr);
      align-items: start;
      gap: 16px;
    }

    .material-public-catalog-categories {
      position: sticky;
      top: 12px;
      min-width: 0;
      padding: 11px 9px 10px;
      border: 1px solid rgba(173, 153, 132, .2);
      border-radius: 13px;
      background: rgba(255, 253, 249, .58);
    }

    .material-public-catalog-categories > strong {
      display: block;
      margin: 1px 7px 8px;
      color: #624e42;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .04em;
    }

    .material-public-catalog-categories nav {
      display: grid;
      gap: 3px;
    }

    .material-public-catalog-categories nav button {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 7px;
      width: 100%;
      min-height: 30px;
      padding: 5px 7px;
      border: 1px solid transparent;
      border-radius: 8px;
      color: #705d50;
      background: transparent;
      font: inherit;
      font-size: 12px;
      font-weight: 650;
      text-align: left;
      cursor: pointer;
    }

    .material-public-catalog-categories nav button small {
      flex: 0 0 auto;
      color: #8d7667;
      font-size: 11px;
      font-weight: 700;
    }

    .material-public-catalog-categories nav button:hover,
    .material-public-catalog-categories nav button:focus-visible,
    .material-public-catalog-categories nav button.is-active {
      border-color: rgba(173, 79, 47, .2);
      color: #984d36;
      background: #f9e9df;
      outline: 0;
    }

    .material-public-catalog-categories > p {
      margin: 11px 7px 0;
      color: #897568;
      font-size: 10px;
      font-weight: 550;
      line-height: 1.55;
    }

    .material-public-catalog-results {
      min-width: 0;
    }

    .material-public-catalog-grid {
      display: grid;
      gap: 8px;
      min-width: 0;
    }

    .material-public-catalog-grid.is-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .material-public-catalog-grid.is-grid .material-public-group-summary {
      grid-template-columns: 64px minmax(0, 1fr);
      align-items: start;
    }

    .material-public-catalog-grid.is-grid .material-public-group-actions {
      grid-column: 2;
      justify-content: flex-start;
    }

    .material-public-catalog-grid.is-grid .material-public-variants {
      padding-left: 12px;
    }

    .material-public-group {
      min-width: 0;
      overflow: hidden;
      border: 1px solid rgba(173, 153, 132, .22);
      border-radius: 13px;
      background: rgba(255, 253, 249, .88);
      transition: border-color .18s ease, box-shadow .18s ease;
    }

    .material-public-group:hover,
    .material-public-group.is-expanded {
      border-color: rgba(173, 79, 47, .3);
      box-shadow: 0 6px 15px rgba(103, 67, 45, .055);
    }

    .material-public-group-summary {
      display: grid;
      grid-template-columns: 64px minmax(0, 1fr) auto;
      align-items: center;
      gap: 13px;
      min-width: 0;
      padding: 11px 13px;
    }

    .material-public-card-image,
    .material-public-variant-image,
    .material-public-detail-image {
      display: grid;
      place-items: center;
      overflow: hidden;
      border: 1px solid #eee1d4;
      background: #fff;
    }

    .material-public-card-image {
      width: 64px;
      height: 64px;
      border-radius: 10px;
    }

    .material-public-card-image img,
    .material-public-variant-image img,
    .material-public-detail-image img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .material-public-card-image-empty,
    .material-public-variant-image.material-public-card-image-empty {
      color: #a98e7c;
      font-size: 10px;
      font-weight: 800;
    }

    .material-public-group-main {
      display: grid;
      align-content: center;
      gap: 5px;
      min-width: 0;
    }

    .material-public-group-title {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
      min-width: 0;
    }

    .material-public-group-title > div {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 7px;
      min-width: 0;
    }

    .material-public-group-title strong {
      color: #3e3027;
      font-size: 16px;
      font-weight: 850;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }

    .material-public-category-badge,
    .material-public-badge,
    .material-public-status {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      min-height: 20px;
      padding: 2px 7px;
      border-radius: 999px;
      font-size: 9px;
      font-weight: 800;
      white-space: nowrap;
    }

    .material-public-category-badge {
      color: #9b6651;
      background: #f8ebe1;
    }

    .material-public-badge.is-recommended {
      color: #5f7a65;
      background: #e9f1e5;
    }

    .material-public-status.is-added,
    .material-public-inline-added {
      color: #5f7e61;
      font-weight: 800;
    }

    .material-public-favorite {
      display: inline-grid;
      flex: 0 0 28px;
      width: 28px;
      height: 28px;
      place-items: center;
      padding: 0 0 2px;
      border: 1px solid transparent;
      border-radius: 50%;
      color: #b18a71;
      background: transparent;
      font: inherit;
      font-size: 20px;
      line-height: 1;
      cursor: pointer;
    }

    .material-public-favorite:hover,
    .material-public-favorite:focus-visible,
    .material-public-favorite.is-favorite {
      border-color: rgba(173, 79, 47, .2);
      color: #b65a3c;
      background: #fff1e6;
      outline: 0;
    }

    .material-public-group-meta {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 5px 13px;
      color: #6f5d51;
      font-size: 12px;
      font-weight: 600;
      line-height: 1.45;
    }

    .material-public-added-count {
      color: #668267;
      font-weight: 800;
    }

    .material-public-group-source {
      margin: 0;
      overflow: hidden;
      color: #7b685c;
      font-size: 11px;
      font-weight: 550;
      line-height: 1.4;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .material-public-group-actions,
    .material-public-variant-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: wrap;
      gap: 6px;
    }

    .material-public-detail-button,
    .material-public-group-toggle {
      min-height: 29px;
      padding: 5px 8px;
      border: 1px solid rgba(173, 153, 132, .25);
      border-radius: 8px;
      color: #6b5649;
      background: #fffaf5;
      font: inherit;
      font-size: 11px;
      font-weight: 800;
      cursor: pointer;
      white-space: nowrap;
    }

    .material-public-detail-button:hover,
    .material-public-detail-button:focus-visible,
    .material-public-group-toggle:hover,
    .material-public-group-toggle:focus-visible {
      border-color: rgba(173, 79, 47, .4);
      color: #984d36;
      background: #fff3e9;
      outline: 0;
    }

    .material-public-group-toggle {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      border-color: rgba(173, 79, 47, .24);
      color: #984d36;
    }

    .material-public-card-action {
      justify-self: start;
      min-height: 29px;
      padding: 5px 9px;
      border: 1px solid rgba(173, 79, 47, .25);
      border-radius: 8px;
      color: #9b4d35;
      background: #fff8f1;
      font: inherit;
      font-size: 11px;
      font-weight: 800;
      cursor: pointer;
      white-space: nowrap;
    }

    .material-public-card-action.is-compact {
      min-height: 27px;
      padding: 4px 8px;
    }

    .material-public-card-action:hover,
    .material-public-card-action:focus-visible {
      border-color: rgba(173, 79, 47, .48);
      background: #f9e9df;
      outline: 0;
    }

    .material-public-card-action.is-added[data-remove-public-material] {
      border-color: rgba(95, 126, 97, .28);
      color: #5f7e61;
      background: #f1f6ed;
    }

    .material-public-card-action.is-added[data-remove-public-material]:hover,
    .material-public-card-action.is-added[data-remove-public-material]:focus-visible {
      border-color: rgba(173, 79, 47, .48);
      color: #984d36;
      background: #fff3e9;
    }

    .material-public-card-action:disabled {
      cursor: default;
      opacity: .62;
    }

    .material-public-variants {
      display: grid;
      gap: 6px;
      padding: 0 12px 11px 90px;
      border-top: 1px solid rgba(173, 153, 132, .15);
      background: rgba(252, 248, 242, .74);
    }

    .material-public-variant-row {
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      min-width: 0;
      padding: 8px 0 0;
    }

    .material-public-variant-image {
      width: 48px;
      height: 48px;
      border-radius: 8px;
    }

    .material-public-variant-main {
      display: grid;
      gap: 3px;
      min-width: 0;
    }

    .material-public-variant-title {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
      min-width: 0;
    }

    .material-public-variant-title strong {
      color: #43342b;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.4;
      overflow-wrap: anywhere;
    }

    .material-public-variant-main p,
    .material-public-variant-main small {
      margin: 0;
      overflow-wrap: anywhere;
      color: #705e52;
      font-size: 11px;
      font-weight: 550;
      line-height: 1.45;
    }

    .material-public-variant-main small {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .material-public-variant-actions {
      padding-left: 8px;
    }

    .material-public-catalog-state {
      display: grid;
      justify-items: center;
      gap: 5px;
      padding: 30px 18px;
      border: 1px dashed rgba(173, 153, 132, .34);
      border-radius: 12px;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.7;
      text-align: center;
    }

    .material-public-catalog-state strong {
      color: #765f50;
      font-size: 12px;
    }

    .material-public-catalog-state button {
      min-height: 29px;
      margin-top: 5px;
      padding: 5px 9px;
      border: 1px solid rgba(173, 79, 47, .24);
      border-radius: 8px;
      color: #9b4d35;
      background: #fff8f1;
      font: inherit;
      font-size: 10px;
      font-weight: 800;
      cursor: pointer;
    }

    .material-public-catalog-state.is-error {
      color: #9e563d;
    }

    .material-public-catalog-state .secondary-button {
      margin-left: 8px;
    }

    .material-public-detail-backdrop {
      position: fixed;
      z-index: 490;
      inset: 0;
      display: flex;
      justify-content: flex-end;
      background: rgba(45, 37, 29, .32);
      backdrop-filter: blur(4px);
    }

    .material-public-detail-drawer {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      width: min(440px, 100%);
      max-height: 100vh;
      overflow: hidden;
      border-left: 1px solid rgba(184, 157, 132, .36);
      background: #fffdf9;
      box-shadow: -18px 0 48px rgba(57, 42, 29, .2);
    }

    .material-public-detail-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 15px;
      padding: 21px 22px 16px;
      border-bottom: 1px solid rgba(173, 153, 132, .16);
      background: #fffaf4;
    }

    .material-public-detail-head span {
      color: #4b858d;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .08em;
    }

    .material-public-detail-head h2 {
      margin: 6px 0 4px;
      color: var(--ink);
      font-size: 18px;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }

    .material-public-detail-head p {
      margin: 0;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.5;
    }

    .material-public-detail-head button {
      display: inline-grid;
      flex: 0 0 32px;
      width: 32px;
      height: 32px;
      place-items: center;
      padding: 0 0 2px;
      border: 1px solid rgba(163, 77, 46, .22);
      border-radius: 9px;
      color: var(--rust-dark);
      background: #fffdf9;
      font: inherit;
      font-size: 20px;
      line-height: 1;
      cursor: pointer;
    }

    .material-public-detail-head button:hover,
    .material-public-detail-head button:focus-visible {
      border-color: rgba(163, 77, 46, .52);
      background: #f9e9df;
      outline: 0;
    }

    .material-public-detail-body {
      min-height: 0;
      overflow: auto;
      padding: 21px 22px 26px;
    }

    .material-public-detail-image {
      width: 100%;
      height: 230px;
      border-radius: 14px;
      background: #faf5ee;
    }

    .material-public-detail-image.material-public-card-image-empty {
      color: #a98e7c;
      font-size: 12px;
    }

    .material-public-detail-price {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      margin-top: 17px;
    }

    .material-public-detail-price strong {
      color: #725b4c;
      font-size: 13px;
    }

    .material-public-detail-price b {
      color: #9b4d35;
      font-size: 17px;
    }

    .material-public-detail-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 11px;
    }

    .material-public-detail-tags span {
      padding: 4px 7px;
      border-radius: 999px;
      color: #8c6653;
      background: #f8ebe1;
      font-size: 10px;
      font-weight: 700;
    }

    .material-public-detail-body dl {
      display: grid;
      gap: 11px;
      margin: 19px 0 0;
    }

    .material-public-detail-body dl > div {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr);
      gap: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(173, 153, 132, .14);
    }

    .material-public-detail-body dt {
      color: #836b5b;
      font-size: 11px;
      font-weight: 800;
    }

    .material-public-detail-body dd {
      margin: 0;
      color: #5f5147;
      font-size: 12px;
      font-weight: 550;
      line-height: 1.6;
      overflow-wrap: anywhere;
    }

    .material-public-detail-note {
      margin: 17px 0 12px;
      padding: 9px 10px;
      border-radius: 9px;
      color: #5b777b;
      background: #eef7f7;
      font-size: 11px;
      font-weight: 550;
      line-height: 1.55;
    }

    .material-public-detail-body > .material-public-card-action {
      width: 100%;
      min-height: 38px;
      font-size: 11px;
    }

    html.material-public-detail-open,
    html.material-public-detail-open body {
      overflow: hidden;
    }

    @media (max-width: 900px) {
      .material-public-catalog-layout {
        grid-template-columns: 136px minmax(0, 1fr);
        gap: 11px;
      }

      .material-public-group-summary {
        gap: 10px;
      }

      .material-public-variants {
        padding-left: 84px;
      }
    }

    @media (max-width: 760px) {
      .material-public-catalog {
        padding: 16px 16px 18px;
      }

      .material-public-catalog-head,
      .material-public-catalog-toolbar,
      .material-public-catalog-control-row {
        align-items: flex-start;
        flex-direction: column;
      }

      .material-public-catalog-actions {
        justify-content: flex-start;
      }

      .material-public-catalog-search-wrap {
        width: 100%;
        max-width: none;
      }

      .material-public-catalog-layout {
        display: block;
      }

      .material-public-catalog-categories {
        position: static;
        margin-bottom: 11px;
        padding: 9px;
      }

      .material-public-catalog-categories nav {
        display: flex;
        overflow-x: auto;
        gap: 5px;
        padding-bottom: 2px;
      }

      .material-public-catalog-categories nav button {
        flex: 0 0 auto;
        width: auto;
        min-height: 29px;
        white-space: nowrap;
      }

      .material-public-catalog-categories > p {
        display: none;
      }

      .material-public-group-summary {
        grid-template-columns: 56px minmax(0, 1fr);
        align-items: start;
      }

      .material-public-catalog-grid.is-grid {
        grid-template-columns: 1fr;
      }

      .material-public-card-image {
        width: 56px;
        height: 56px;
      }

      .material-public-group-actions {
        grid-column: 2;
        justify-content: flex-start;
      }

      .material-public-variants {
        padding-left: 12px;
      }

      .material-public-variant-row {
        grid-template-columns: 44px minmax(0, 1fr);
        align-items: start;
      }

      .material-public-variant-image {
        width: 44px;
        height: 44px;
      }

      .material-public-variant-actions {
        grid-column: 2;
        justify-content: flex-start;
        padding-left: 0;
      }

      .material-public-catalog-view-controls {
        width: 100%;
        justify-content: space-between;
      }
    }

    @media (max-width: 440px) {
      .material-public-catalog-scopes {
        width: 100%;
      }

      .material-public-catalog-scopes button {
        flex: 1 1 calc(50% - 5px);
      }

      .material-public-catalog-view-controls {
        align-items: flex-start;
        flex-direction: column;
      }

      .material-public-detail-head,
      .material-public-detail-body {
        padding-right: 16px;
        padding-left: 16px;
      }
    }
    /* V0.6.5 mobile-first recipe browsing and read-only kitchen reader. */
    .mobile-recipe-filter-toggle,
    .mobile-recent-recipe,
    .mobile-recipe-open-reader,
    .recipe-mobile-reader {
      display: none;
    }

    .recipe-mobile-find-control,
    .recipe-mobile-search-reason,
    .recipe-mobile-filter-help,
    .recipe-mobile-calculation-context,
    .recipe-mobile-review-hint { display: none; }

    /* V0.8 candidate: finding, flavor choice and production review stay
       inside the viewport boundary; desktop workbench is unchanged. */
    @media (max-width: 900px) {
      html #recipes .filter-bar.mobile-filter-expanded .recipe-mobile-find-control { display: block; }
      html #recipes .recipe-mobile-filter-help {
        display: none;
        grid-column: 1 / -1;
        font-size: 11px;
        color: var(--muted);
        line-height: 1.6;
      }
      html #recipes .mobile-filter-expanded .recipe-mobile-filter-help { display: block; }
      html #recipes .empty-state .recipe-mobile-find-control {
        display: block;
        margin: 12px auto 0;
        min-height: 44px;
      }
      html #recipes .recipe-count {
        grid-column: 1 / -1;
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.5;
      }
      html #recipes .recipe-mobile-search-reason:not([hidden]) {
        display: block;
        margin: 8px 0 0;
        font-size: 12px;
        line-height: 1.5;
        color: var(--olive);
        overflow-wrap: anywhere;
      }
      html #recipes button.recipe-family-variant-chip {
        min-height: 44px;
        padding: 8px 10px;
        cursor: pointer;
        flex: 0 0 auto;
        font: inherit;
        font-size: 12px;
        border: 1px solid var(--line);
      }
      html #recipes button.recipe-family-variant-chip.is-current {
        border-color: var(--olive);
        color: var(--olive);
        background: color-mix(in srgb, var(--olive) 8%, var(--card));
      }
      .recipe-mobile-series-context {
        margin-top: 14px;
        padding-top: 12px;
        border-top: 1px solid var(--line);
      }
      .recipe-mobile-series-context strong { font-size: 14px; }
      .recipe-mobile-series-context p,
      .recipe-mobile-calculation-context p {
        margin: 6px 0;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.6;
        overflow-wrap: anywhere;
      }
      .recipe-mobile-series-options {
        display: flex;
        gap: 7px;
        overflow-x: auto;
        padding: 5px 0;
      }
      .recipe-mobile-series-options button,
      .recipe-mobile-workflow-actions button,
      .recipe-mobile-calculation-context button {
        min-height: 44px;
        padding: 8px 12px;
        border: 1px solid var(--line);
        border-radius: 10px;
        color: var(--ink);
        background: var(--card);
        font: inherit;
        font-size: 13px;
        cursor: pointer;
      }
      .recipe-mobile-series-options button { flex: 0 0 auto; }
      .recipe-mobile-series-options button[aria-pressed="true"] {
        border-color: var(--olive);
        color: var(--olive);
        background: color-mix(in srgb, var(--olive) 9%, var(--card));
      }
      .recipe-mobile-workflow-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 7px 10px;
        align-items: center;
        margin-top: 12px;
      }
      .recipe-mobile-workflow-actions small { color: var(--muted); font-size: 11px; line-height: 1.6; }
      .recipe-mobile-calculation-context {
        display: block;
        margin: 12px 0;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: color-mix(in srgb, var(--olive) 5%, var(--card));
        overflow-wrap: anywhere;
      }
      .recipe-mobile-calculation-context strong { font-size: 14px; }
      #labBatchEditor .recipe-mobile-review-hint {
        display: block;
        padding: 10px 12px;
        border-radius: 10px;
        margin: 0 0 14px;
        font-size: 12px;
        line-height: 1.65;
        color: var(--muted);
        background: color-mix(in srgb, var(--olive) 6%, var(--card));
      }
    }

    /* Recipe tutorial steps use the same quiet reading flow on phones and desktop. */
    #recipeDetailModal .recipe-tutorial-step-list {
      position: relative;
      max-width: 920px;
      margin: 16px auto 0;
      display: block;
    }

    #recipeDetailModal .recipe-tutorial-step-list::before {
      position: absolute;
      top: 19px;
      bottom: 19px;
      left: 5px;
      width: 1px;
      background: color-mix(in srgb, var(--olive) 24%, var(--line));
      content: "";
    }

    #recipeDetailModal .recipe-tutorial-step-list .step-row {
      position: relative;
      padding: 14px 8px 15px 27px;
      border: 0;
      border-radius: 0;
      display: block;
      background: transparent;
    }

    #recipeDetailModal .recipe-tutorial-step-list .step-row + .step-row {
      border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
    }

    #recipeDetailModal .recipe-tutorial-step-list .step-row::before {
      position: absolute;
      top: 21px;
      left: 1px;
      width: 9px;
      height: 9px;
      border: 1px solid var(--paper);
      border-radius: 50%;
      background: var(--olive);
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--olive) 24%, var(--line));
      content: "";
    }

    #recipeDetailModal .recipe-tutorial-step-list .step-number {
      display: none;
    }

    #recipeDetailModal .recipe-tutorial-step-list .step-row p {
      margin: 0;
      color: var(--ink);
      font-size: 16px;
      line-height: 1.72;
    }

    #recipeDetailModal .recipe-tutorial-markdown-preview > ol {
      position: relative;
      margin: .5em 0;
      padding: 0;
      list-style: none;
    }

    #recipeDetailModal .recipe-tutorial-markdown-preview > ol::before {
      position: absolute;
      top: 17px;
      bottom: 17px;
      left: 5px;
      width: 1px;
      background: color-mix(in srgb, var(--olive) 24%, var(--line));
      content: "";
    }

    #recipeDetailModal .recipe-tutorial-markdown-preview > ol > li {
      position: relative;
      margin: 0;
      padding: 13px 0 14px 25px;
      border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
    }

    #recipeDetailModal .recipe-tutorial-markdown-preview > ol > li:first-child {
      border-top: 0;
    }

    #recipeDetailModal .recipe-tutorial-markdown-preview > ol > li::before {
      position: absolute;
      top: 21px;
      left: 1px;
      width: 9px;
      height: 9px;
      border: 1px solid var(--paper);
      border-radius: 50%;
      background: var(--olive);
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--olive) 24%, var(--line));
      content: "";
    }

    @media (max-width: 900px) {
      body[data-active-view="recipes"] .topbar {
        height: 56px;
        padding: 0 14px;
      }

      body[data-active-view="recipes"] .topbar .search-box,
      body[data-active-view="recipes"] .topbar .top-actions {
        display: none;
      }

      body[data-active-view="recipes"] .mobile-title {
        min-width: 0;
      }

      body[data-active-view="recipes"] .mobile-title #activeViewLabel {
        display: inline;
        font-size: 13px;
      }

      body[data-active-view="recipes"] .content {
        padding: 14px 14px 104px;
      }

      #recipes .page-header {
        margin-bottom: 12px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        gap: 10px;
      }

      #recipes .page-header .eyebrow,
      #recipes .page-header p {
        display: none;
      }

      #recipes .page-header h1 {
        margin: 0;
        font-size: 29px;
        line-height: 1.1;
      }

      #recipes .page-header .primary-button {
        width: 44px;
        min-width: 44px;
        height: 44px;
        padding: 0;
        overflow: hidden;
        font-size: 0;
      }

      #recipes .page-header .primary-button::after {
        content: "+";
        font-size: 23px;
        font-weight: 500;
      }

      #recipes .filter-bar {
        position: sticky;
        top: 64px;
        z-index: 18;
        margin-bottom: 10px;
        padding: 8px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 58px;
        align-items: center;
        gap: 8px;
        border-radius: 15px;
        background: color-mix(in srgb, var(--paper) 92%, transparent);
        box-shadow: 0 8px 22px rgba(70, 53, 35, .065);
        backdrop-filter: blur(18px);
      }

      #recipes .recipe-search-history-wrap {
        width: auto;
        min-width: 0;
        flex-basis: auto;
      }

      #recipes .recipe-search-history-wrap .filter-search {
        height: 44px;
        font-size: 14px;
      }

      .mobile-recipe-filter-toggle {
        width: 58px;
        min-height: 44px;
        padding: 0 8px;
        border: 1px solid var(--line);
        border-radius: 11px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        color: var(--ink);
        background: var(--card);
        font: inherit;
        font-size: 12px;
        font-weight: 800;
      }

      .mobile-recipe-filter-toggle::before {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #b8aa9c;
        content: "";
      }

      .mobile-recipe-filter-toggle.is-active::before,
      .mobile-recipe-filter-toggle[aria-expanded="true"]::before {
        background: var(--rust);
      }

      #recipes .filter-bar .select-field {
        width: 100%;
        min-width: 0;
        height: 44px;
        font-size: 13px;
      }

      #recipes .filter-bar.mobile-recipe-ready .select-field,
      #recipes .filter-bar.mobile-recipe-ready .recipe-library-toggle-group {
        grid-column: auto;
      }

      #recipes .filter-bar.mobile-recipe-ready:not(.mobile-filter-expanded) .select-field,
      #recipes .filter-bar.mobile-recipe-ready:not(.mobile-filter-expanded) .recipe-library-toggle-group {
        display: none;
      }

      #recipes .filter-bar.mobile-filter-expanded {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      #recipes .filter-bar.mobile-filter-expanded .recipe-search-history-wrap {
        grid-column: 1;
      }

      #recipes .filter-bar.mobile-filter-expanded .mobile-recipe-filter-toggle {
        grid-column: 2;
        justify-self: end;
      }

      #recipes .filter-bar.mobile-filter-expanded .recipe-library-toggle-group {
        grid-column: 1 / -1;
      }

      #recipes .filter-bar.mobile-filter-expanded .recipe-library-toggle-group button {
        min-height: 44px;
        padding: 0 10px;
      }

      #recipes .recipe-count {
        width: auto;
        margin: 0;
        padding: 0 4px;
        grid-column: 1 / -1;
        color: var(--muted);
        font-size: 10px;
        line-height: 1.4;
      }

      .mobile-recent-recipe {
        width: 100%;
        min-height: 50px;
        margin: 0 0 9px;
        padding: 7px 10px;
        border: 1px solid color-mix(in srgb, var(--rust) 20%, var(--line));
        border-radius: 14px;
        display: grid;
        grid-template-columns: 30px minmax(0, 1fr) auto;
        align-items: center;
        gap: 7px;
        color: var(--ink);
        background: linear-gradient(135deg, color-mix(in srgb, var(--rust) 8%, var(--card)), var(--card));
        text-align: left;
      }

      .mobile-recent-recipe[hidden] {
        display: none;
      }

      .mobile-recent-mark {
        width: 30px;
        height: 30px;
        border-radius: 10px;
        display: grid;
        place-items: center;
        color: #fffaf3;
        background: var(--rust);
        font-family: "STSong", "SimSun", serif;
        font-size: 15px;
        font-weight: 800;
      }

      .mobile-recent-copy {
        min-width: 0;
      }

      .mobile-recent-copy small,
      .mobile-recent-copy strong {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .mobile-recent-copy small {
        margin-bottom: 2px;
        color: var(--rust);
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .08em;
      }

      .mobile-recent-copy strong {
        font-size: 13px;
      }

      .mobile-recent-action {
        color: var(--rust);
        font-size: 10px;
        font-weight: 800;
        white-space: nowrap;
      }

      #recipes .recipe-grid {
        gap: 9px;
      }

      #recipes .recipe-card,
      body[data-density="compact"] #recipes .recipe-card {
        min-height: 148px;
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr);
        border-radius: 16px;
        box-shadow: 0 5px 16px rgba(69, 51, 34, .035);
      }

      #recipes .recipe-card:hover,
      #recipes .recipe-card:active {
        transform: none;
      }

      #recipes .recipe-card:active {
        border-color: color-mix(in srgb, var(--rust) 40%, var(--line));
        background: color-mix(in srgb, var(--rust) 3%, var(--card));
      }

      #recipes .recipe-art,
      body[data-density="compact"] #recipes .recipe-art {
        width: 72px;
        height: 100%;
        min-height: 148px;
        padding: 10px 7px;
      }

      #recipes .recipe-number {
        max-width: 56px;
        display: block;
        overflow: hidden;
        font-size: 8px;
        line-height: 1.35;
        white-space: nowrap;
      }

      #recipes .recipe-art-letter,
      body[data-density="compact"] #recipes .recipe-art-letter {
        top: auto;
        right: 10px;
        bottom: 13px;
        font-size: 40px;
      }

      #recipes .recipe-art::before {
        right: -44px;
        bottom: -31px;
      }

      #recipes .recipe-art::after {
        right: -12px;
        bottom: -7px;
      }

      #recipes .recipe-body,
      body[data-density="compact"] #recipes .recipe-body {
        min-width: 0;
        padding: 11px 12px 12px;
      }

      #recipes .recipe-meta {
        margin-bottom: 6px;
      }

      #recipes .recipe-card .badge {
        padding: 3px 7px;
        font-size: 8px;
      }

      #recipes .recipe-card .version-label {
        font-size: 13px;
      }

      #recipes .recipe-body h3 {
        margin-bottom: 4px;
        font-size: 17px;
        line-height: 1.25;
      }

      #recipes .recipe-card .recipe-description,
      body[data-density="compact"] #recipes .recipe-card .recipe-description {
        height: auto;
        max-height: 33px;
        margin-bottom: 8px;
        display: -webkit-box;
        overflow: hidden;
        color: var(--muted);
        font-size: 10px;
        line-height: 1.6;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }

      #recipes .recipe-facts {
        padding-top: 7px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px 8px;
      }

      #recipes .recipe-facts > div:nth-child(2),
      #recipes .recipe-facts > div:nth-child(4) {
        display: none;
      }

      #recipes .recipe-card .recipe-facts small {
        font-size: 8px;
      }

      #recipes .recipe-card .recipe-facts strong {
        margin-top: 1px;
        font-size: 11px;
      }

      .top-actions .theme-settings-button,
      .top-actions [data-sidebar-preferences-open],
      .top-actions .primary-button,
      #recipeDetailModal .close-button {
        min-width: 44px;
        width: 44px;
        min-height: 44px;
        height: 44px;
      }

      #recipeDetailModal {
        padding: 0;
        align-items: stretch;
        background: var(--card);
        backdrop-filter: none;
      }

      #recipeDetailModal .detail-card {
        width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        border: 0;
        border-radius: 0;
        overscroll-behavior: contain;
        box-shadow: none;
        opacity: 0;
        transform: translateY(6px);
        transition:
          opacity var(--v07-motion-content, 250ms) var(--v07-motion-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
          transform var(--v07-motion-content, 250ms) var(--v07-motion-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
      }

      #recipeDetailModal.open .detail-card {
        opacity: 1;
        transform: translateY(0);
      }

      #recipeDetailModal .modal-head {
        min-height: calc(56px + env(safe-area-inset-top));
        padding: calc(6px + env(safe-area-inset-top)) 12px 6px;
        background: color-mix(in srgb, var(--card) 94%, transparent);
        backdrop-filter: blur(18px);
      }

      #recipeDetailModal .modal-head strong {
        min-width: 0;
        overflow: hidden;
        font-size: 16px;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .mobile-recipe-detail-controls {
        display: flex;
        align-items: center;
        gap: 7px;
      }

      .mobile-recipe-open-reader {
        min-height: 44px;
        padding: 0 12px;
        border: 1px solid color-mix(in srgb, var(--rust) 28%, var(--line));
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        color: var(--rust);
        background: color-mix(in srgb, var(--rust) 7%, var(--card));
        font: inherit;
        font-size: 12px;
        font-weight: 800;
      }

      #recipeDetailModal .detail-hero {
        padding: 17px 15px 15px;
      }

      #recipeDetailModal .detail-hero h2 {
        margin-bottom: 5px;
        font-size: 26px;
        line-height: 1.18;
      }

      #recipeDetailModal .detail-hero p {
        max-height: 39px;
        margin-bottom: 12px;
        display: -webkit-box;
        overflow: hidden;
        font-size: 11px;
        line-height: 1.7;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }

      #recipeDetailModal .detail-facts {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
      }

      #recipeDetailModal .detail-fact {
        min-width: 0;
        padding: 8px 10px;
      }

      #recipeDetailModal .detail-fact strong {
        overflow: hidden;
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      #recipeDetailModal .detail-tabs {
        position: sticky;
        top: calc(56px + env(safe-area-inset-top));
        z-index: 5;
        min-height: 52px;
        padding: 0 10px;
        gap: 8px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        background: color-mix(in srgb, var(--card) 94%, transparent);
        scrollbar-width: none;
        scroll-snap-type: x proximity;
        backdrop-filter: blur(18px);
      }

      #recipeDetailModal .detail-tabs::-webkit-scrollbar {
        display: none;
      }

      #recipeDetailModal .detail-tab {
        min-height: 48px;
        padding: 11px 7px 9px;
        flex: 0 0 auto;
        font-size: 12px;
        scroll-snap-align: center;
      }

      #recipeDetailModal .detail-content {
        min-height: 0;
        padding: 16px 14px 24px;
      }

      #recipeDetailModal .modal-actions {
        padding: 13px 14px calc(14px + env(safe-area-inset-bottom));
        align-items: stretch;
        flex-direction: column;
      }

      #recipeDetailModal .modal-actions button {
        width: 100%;
        min-height: 44px;
      }

      #recipeDetailModal .table-wrap {
        border-radius: 13px;
      }

      #recipeDetailModal th,
      #recipeDetailModal td {
        padding: 11px 9px;
        font-size: 13px;
      }

      #recipeDetailModal .step-list {
        gap: 10px;
      }

      #recipeDetailModal .step-row {
        padding: 14px 12px;
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 11px;
        border-radius: 15px;
      }

      #recipeDetailModal .step-number {
        width: 36px;
        height: 36px;
        border-radius: 12px;
        font-size: 13px;
      }

      #recipeDetailModal .step-row p {
        color: var(--ink);
        font-size: 16px;
        line-height: 1.78;
      }

      #recipeDetailModal .recipe-tutorial-step-list {
        margin-top: 13px;
      }

      #recipeDetailModal .recipe-tutorial-step-list::before {
        top: 16px;
        bottom: 16px;
      }

      #recipeDetailModal .recipe-tutorial-step-list .step-row {
        padding: 12px 0 13px 21px;
      }

      #recipeDetailModal .recipe-tutorial-step-list .step-row::before {
        top: 19px;
      }

      #recipeDetailModal .recipe-tutorial-step-list .step-row p {
        font-size: 16px;
        line-height: 1.68;
      }

      #recipeDetailModal .conclusion-add,
      #recipeDetailModal .conclusion-delete {
        min-width: 44px;
        min-height: 44px;
      }

      #recipeDetailModal .conclusion-delete {
        top: 5px;
        right: 5px;
      }

      #recipeDetailModal .recipe-materials-grid {
        grid-template-columns: 1fr;
        gap: 9px;
      }

      #recipeDetailModal .recipe-material-card {
        min-height: 82px;
        display: grid;
        grid-template-columns: 82px minmax(0, 1fr);
        border-radius: 14px;
      }

      #recipeDetailModal .recipe-material-card-image {
        width: 82px;
        height: 100%;
        aspect-ratio: auto;
      }

      #recipeDetailModal .material-image-control.card {
        min-height: 80px;
      }

      #recipeDetailModal .recipe-material-card-copy {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      #recipeDetailModal .recipe-materials-head h3,
      #recipeDetailModal .baking-parameters-intro h3 {
        font-size: 22px;
      }

      #recipeDetailModal .baking-parameters-form input,
      #recipeDetailModal .baking-parameters-form select,
      #recipeDetailModal .baking-parameters-form textarea,
      #recipeDetailModal .baking-form-actions button,
      #recipeDetailModal .baking-add-stage {
        min-height: 44px;
      }

      .recipe-photo-lightbox-nav {
        min-width: 44px;
        width: 44px;
        min-height: 48px;
      }

      .recipe-photo-lightbox-close {
        min-width: 44px;
        width: 44px;
        min-height: 44px;
        height: 44px;
      }

      #recipeDetailModal.mobile-reader-open .modal-head,
      #recipeDetailModal.mobile-reader-open #recipeDetailContent {
        display: none;
      }

      #recipeDetailModal.mobile-reader-open .detail-card {
        overflow: hidden;
        background: var(--paper);
      }

      .recipe-mobile-reader {
        --reader-copy-size: 17px;
        height: 100dvh;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        display: block;
        color: var(--ink);
        background:
          radial-gradient(circle at 92% 5%, color-mix(in srgb, var(--butter) 20%, transparent), transparent 15rem),
          var(--paper);
        scroll-behavior: smooth;
        scrollbar-gutter: stable;
        opacity: 0;
        transform: translateY(6px);
        transition:
          opacity var(--v07-motion-content, 250ms) var(--v07-motion-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
          transform var(--v07-motion-content, 250ms) var(--v07-motion-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
      }

      #recipeDetailModal.mobile-reader-open .recipe-mobile-reader {
        opacity: 1;
        transform: translateY(0);
      }

      .recipe-mobile-reader[data-reader-size="large"] {
        --reader-copy-size: 19px;
      }

      .recipe-mobile-reader[data-reader-size="xlarge"] {
        --reader-copy-size: 21px;
      }

      .recipe-mobile-reader-head {
        position: sticky;
        top: 0;
        z-index: 8;
        min-height: calc(58px + env(safe-area-inset-top));
        padding: calc(7px + env(safe-area-inset-top)) 12px 7px;
        border-bottom: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
        display: grid;
        grid-template-columns: 66px minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        background: color-mix(in srgb, var(--paper) 93%, transparent);
        backdrop-filter: blur(20px);
      }

      .recipe-mobile-reader-back,
      .recipe-mobile-reader-size,
      .recipe-mobile-reader-detail {
        min-height: 44px;
        border: 1px solid var(--line);
        border-radius: 12px;
        color: var(--ink);
        background: var(--card);
        font: inherit;
        font-size: 12px;
        font-weight: 800;
      }

      .recipe-mobile-reader-back {
        width: 66px;
      }

      .recipe-mobile-reader-title {
        min-width: 0;
        text-align: center;
      }

      .recipe-mobile-reader-title small,
      .recipe-mobile-reader-title strong {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .recipe-mobile-reader-title small {
        margin-bottom: 1px;
        color: var(--rust);
        font-size: 8px;
        font-weight: 900;
        letter-spacing: .12em;
      }

      .recipe-mobile-reader-title strong {
        font-family: "STSong", "SimSun", serif;
        font-size: 15px;
      }

      .recipe-mobile-reader-head-actions {
        display: flex;
        gap: 6px;
      }

      .recipe-mobile-reader-size {
        width: 48px;
        padding: 0 5px;
      }

      .recipe-mobile-reader-detail {
        width: 48px;
        padding: 0 5px;
        color: var(--rust);
      }

      .recipe-mobile-reader-intro {
        padding: 15px 16px 10px;
      }

      .recipe-mobile-reader-meta {
        margin-bottom: 6px;
        display: flex;
        align-items: center;
        gap: 7px;
      }

      .recipe-mobile-reader-meta .version-label {
        font-size: 11px;
      }

      .recipe-mobile-reader-intro h1 {
        margin: 0 0 5px;
        font-family: "STSong", "SimSun", Georgia, serif;
        font-size: 28px;
        line-height: 1.12;
        letter-spacing: -.035em;
      }

      .recipe-mobile-reader-description {
        margin: 0;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.55;
      }

      .recipe-mobile-reader-facts {
        margin-top: 10px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
      }

      .recipe-mobile-reader-fact {
        min-width: 0;
        padding: 8px 9px;
        border: 1px solid var(--line);
        border-radius: 13px;
        background: color-mix(in srgb, var(--card) 88%, transparent);
      }

      .recipe-mobile-reader-fact.is-muted {
        color: var(--muted);
        background: color-mix(in srgb, var(--paper) 76%, var(--card));
      }

      .recipe-mobile-reader-fact small,
      .recipe-mobile-reader-fact strong {
        display: block;
      }

      .recipe-mobile-reader-fact small {
        margin-bottom: 2px;
        color: var(--muted);
        font-size: 9px;
      }

      .recipe-mobile-reader-fact strong {
        overflow-wrap: anywhere;
        font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
        font-size: 12px;
        line-height: 1.35;
        font-variant-numeric: tabular-nums lining-nums;
        font-feature-settings: "tnum" 1, "lnum" 1;
      }

      .recipe-mobile-reader-fact.is-yield strong {
        color: var(--ink);
        font-family: inherit;
      }

      .recipe-mobile-reader-fact.is-total strong {
        color: var(--rust-dark);
        font-size: 15px;
        font-weight: 900;
      }

      .recipe-mobile-reader-fact.is-baking {
        grid-column: 1 / -1;
      }

      .recipe-mobile-reader-readiness {
        margin: 9px 0 0;
        padding: 7px 9px;
        border-radius: 11px;
        display: flex;
        align-items: flex-start;
        gap: 7px;
        color: #75604a;
        background: color-mix(in srgb, var(--butter) 38%, var(--card));
        font-size: 11px;
        line-height: 1.45;
      }

      .recipe-mobile-reader-readiness strong {
        flex: 0 0 auto;
        color: #8c611d;
        font-size: 10px;
        font-weight: 900;
      }

      .recipe-mobile-reader-toolbar {
        position: sticky;
        top: calc(58px + env(safe-area-inset-top));
        z-index: 7;
        margin: 0 10px;
        padding: 3px;
        border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
        border-radius: 15px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 4px;
        background: var(--card);
        box-shadow: 0 8px 22px rgba(62, 44, 30, .08);
        backdrop-filter: none;
      }

      .recipe-mobile-reader-nav {
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
        display: grid;
        grid-template-columns: repeat(var(--reader-nav-count, 2), minmax(0, 1fr));
        gap: 4px;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
      }

      .recipe-mobile-reader-nav button {
        min-width: 0;
        min-height: 44px;
        padding: 0 5px;
        border: 0;
        border-radius: 11px;
        color: var(--muted);
        background: transparent;
        font: inherit;
        font-size: 12px;
        font-weight: 800;
      }

      .recipe-mobile-reader-nav button.is-active {
        color: #fffaf3;
        background: var(--rust);
        box-shadow: 0 5px 12px color-mix(in srgb, var(--rust) 22%, transparent);
      }

      .recipe-mobile-reader-convert {
        min-width: 72px;
        min-height: 44px;
        padding: 0 10px;
        border: 1px solid color-mix(in srgb, var(--rust) 42%, var(--line));
        border-radius: 11px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        color: var(--rust);
        background: color-mix(in srgb, var(--rust) 7%, var(--card));
        font: inherit;
        font-size: 11px;
        font-weight: 800;
        white-space: nowrap;
      }

      .recipe-mobile-reader-convert span:first-child {
        font-size: 16px;
        line-height: 1;
      }

      .recipe-mobile-reader-body {
        padding: 2px 14px calc(156px + env(safe-area-inset-bottom));
      }

      .recipe-mobile-reader-section {
        padding: 20px 2px 5px;
        scroll-margin-top: calc(122px + env(safe-area-inset-top));
      }

      .recipe-mobile-reader-section + .recipe-mobile-reader-section {
        margin-top: 14px;
        border-top: 1px solid var(--line);
      }

      .recipe-mobile-reader-section-head {
        margin-bottom: 10px;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
      }

      .recipe-mobile-reader-section-head h2 {
        margin: 0;
        font-family: "STSong", "SimSun", Georgia, serif;
        font-size: 25px;
      }

      .recipe-mobile-reader-section-head span {
        color: var(--muted);
        font-size: 11px;
      }

      .recipe-mobile-reader-ingredients {
        border: 1px solid var(--line);
        border-radius: 16px;
        overflow: hidden;
        background: color-mix(in srgb, var(--card) 94%, transparent);
      }

      .recipe-mobile-reader-ingredient {
        min-height: 54px;
        padding: 10px 12px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
      }

      .recipe-mobile-reader-ingredient + .recipe-mobile-reader-ingredient {
        border-top: 1px solid var(--line);
      }

      .recipe-mobile-reader-ingredient-name {
        min-width: 0;
      }

      .recipe-mobile-reader-ingredient-name strong,
      .recipe-mobile-reader-ingredient-name small {
        display: block;
      }

      .recipe-mobile-reader-ingredient-name strong {
        font-size: var(--reader-copy-size);
        line-height: 1.45;
      }

      .recipe-mobile-reader-ingredient-name small {
        margin-top: 2px;
        color: var(--muted);
        font-size: 11px;
        font-variant-numeric: tabular-nums lining-nums;
        font-feature-settings: "tnum" 1, "lnum" 1;
      }

      .recipe-mobile-reader-ingredient-amount {
        min-width: 4.5ch;
        justify-self: end;
        color: var(--rust-dark);
        font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
        font-size: calc(var(--reader-copy-size) + 2px);
        font-weight: 900;
        font-variant-numeric: tabular-nums lining-nums;
        font-feature-settings: "tnum" 1, "lnum" 1;
        letter-spacing: -.025em;
        text-align: right;
        white-space: nowrap;
      }

      .recipe-mobile-reader-total {
        padding: 12px;
        border-top: 1px solid color-mix(in srgb, var(--rust) 24%, var(--line));
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: var(--rust-dark);
        background: color-mix(in srgb, var(--rust) 7%, var(--card));
        font-size: 13px;
        font-weight: 800;
      }

      .recipe-mobile-reader-total strong {
        font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
        font-size: calc(var(--reader-copy-size) + 2px);
        font-variant-numeric: tabular-nums lining-nums;
        font-feature-settings: "tnum" 1, "lnum" 1;
        letter-spacing: -.025em;
        text-align: right;
      }

      .recipe-mobile-reader-steps {
        position: relative;
        display: grid;
        gap: 0;
      }

      .recipe-mobile-reader-steps::before {
        position: absolute;
        top: 17px;
        bottom: 17px;
        left: 5px;
        width: 1px;
        background: color-mix(in srgb, var(--olive) 24%, var(--line));
        content: "";
      }

      .recipe-mobile-reader-step {
        position: relative;
        padding: 13px 0 14px 21px;
        border: 0;
        border-radius: 0;
        display: block;
        background: transparent;
      }

      .recipe-mobile-reader-step + .recipe-mobile-reader-step {
        border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
      }

      .recipe-mobile-reader-step-number {
        display: none;
      }

      .recipe-mobile-reader-step::before {
        position: absolute;
        top: 21px;
        left: 1px;
        width: 9px;
        height: 9px;
        border: 1px solid var(--paper);
        border-radius: 50%;
        background: var(--olive);
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--olive) 24%, var(--line));
        content: "";
      }

      .recipe-mobile-reader-step p {
        margin: 0;
        color: var(--ink);
        font-size: var(--reader-copy-size);
        line-height: 1.68;
      }

      .recipe-mobile-reader .recipe-mobile-tutorial-preview > ol {
        position: relative;
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .recipe-mobile-reader .recipe-mobile-tutorial-preview > ol::before {
        position: absolute;
        top: 17px;
        bottom: 17px;
        left: 5px;
        width: 1px;
        background: color-mix(in srgb, var(--olive) 24%, var(--line));
        content: "";
      }

      .recipe-mobile-reader .recipe-mobile-tutorial-preview > ol > li {
        position: relative;
        margin: 0;
        padding: 13px 0 14px 21px;
        border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
      }

      .recipe-mobile-reader .recipe-mobile-tutorial-preview > ol > li:first-child {
        border-top: 0;
      }

      .recipe-mobile-reader .recipe-mobile-tutorial-preview > ol > li::before {
        position: absolute;
        top: 21px;
        left: 1px;
        width: 9px;
        height: 9px;
        border: 1px solid var(--paper);
        border-radius: 50%;
        background: var(--olive);
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--olive) 24%, var(--line));
        content: "";
      }

      .recipe-mobile-reader-tutorial {
        margin-top: 18px;
        display: grid;
        gap: 15px;
      }

      .recipe-mobile-reader-tutorial-block {
        padding-top: 15px;
        border-top: 1px solid var(--line);
      }

      .recipe-mobile-reader-tutorial-head {
        margin-bottom: 10px;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
      }

      .recipe-mobile-reader-tutorial-head h3 {
        margin: 0;
        color: var(--ink);
        font-family: "STSong", "SimSun", Georgia, serif;
        font-size: 21px;
      }

      .recipe-mobile-reader-tutorial-head span {
        color: var(--muted);
        font-size: 10px;
      }

      .recipe-mobile-reader-baking-meta {
        margin-bottom: 10px;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }

      .recipe-mobile-reader-baking-meta span {
        padding: 6px 9px;
        border-radius: 999px;
        color: #715944;
        background: color-mix(in srgb, var(--rust) 8%, var(--card));
        font-size: 11px;
        font-weight: 700;
      }

      .recipe-mobile-reader-stages {
        display: grid;
        gap: 9px;
      }

      .recipe-mobile-reader-stage {
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 15px;
        background: color-mix(in srgb, var(--card) 94%, transparent);
      }

      .recipe-mobile-reader-stage-head {
        margin-bottom: 7px;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
      }

      .recipe-mobile-reader-stage-head strong {
        font-size: 15px;
      }

      .recipe-mobile-reader-stage-head span {
        color: var(--rust-dark);
        font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
        font-size: 15px;
        font-weight: 800;
        font-variant-numeric: tabular-nums lining-nums;
        font-feature-settings: "tnum" 1, "lnum" 1;
        text-align: right;
      }

      .recipe-mobile-reader-stage-time {
        margin: 0 0 5px;
        color: var(--olive);
        font-variant-numeric: tabular-nums lining-nums;
        font-feature-settings: "tnum" 1, "lnum" 1;
        font-size: 13px;
        font-weight: 800;
      }

      .recipe-mobile-reader-stage-note,
      .recipe-mobile-reader-note {
        margin: 0;
        color: var(--ink);
        font-size: var(--reader-copy-size);
        line-height: 1.75;
        white-space: pre-line;
      }

      .recipe-mobile-reader-note {
        padding: 15px;
        border-left: 4px solid var(--rust);
        border-radius: 0 15px 15px 0;
        background: color-mix(in srgb, var(--rust) 7%, var(--card));
      }

      .recipe-mobile-reader-note-list {
        margin: 0;
        padding: 12px 15px 12px 20px;
        border-left: 4px solid var(--rust);
        border-radius: 0 15px 15px 0;
        display: grid;
        gap: 8px;
        color: var(--ink);
        background: color-mix(in srgb, var(--rust) 7%, var(--card));
        font-size: var(--reader-copy-size);
        line-height: 1.65;
        font-variant-numeric: tabular-nums lining-nums;
        font-feature-settings: "tnum" 1, "lnum" 1;
      }

      .recipe-mobile-reader-note-list li::marker {
        color: var(--rust);
        font-weight: 900;
      }

      .recipe-mobile-reader-empty {
        margin: 0;
        padding: 15px;
        border: 1px dashed var(--line);
        border-radius: 14px;
        color: var(--muted);
        background: color-mix(in srgb, var(--card) 80%, transparent);
        font-size: 13px;
        line-height: 1.65;
      }
    }

    @media (max-width: 370px) {
      .recipe-mobile-reader-head {
        grid-template-columns: 58px minmax(0, 1fr) auto;
        padding-right: 8px;
        padding-left: 8px;
      }

      .recipe-mobile-reader-back {
        width: 58px;
      }

      .recipe-mobile-reader-size,
      .recipe-mobile-reader-detail {
        width: 44px;
      }

      .recipe-mobile-reader-intro h1 {
        font-size: 27px;
      }

      .recipe-mobile-reader-facts {
        gap: 5px;
      }

      .recipe-mobile-reader-fact {
        padding: 9px 7px;
      }

      .recipe-mobile-reader-toolbar {
        margin-right: 8px;
        margin-left: 8px;
      }

      .recipe-mobile-reader-nav {
        gap: 2px;
      }

      .recipe-mobile-reader-nav button {
        padding: 0 3px;
        font-size: 10px;
      }

      .recipe-mobile-reader-convert {
        min-width: 66px;
        padding: 0 7px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .recipe-mobile-reader {
        scroll-behavior: auto;
      }
    }

    @media (max-width: 900px) and (prefers-reduced-motion: reduce) {
      #recipeDetailModal .detail-card,
      .recipe-mobile-reader {
        transition: none;
      }
    }

    /* Full detail is intentionally a compact management layer on phones.
       The separate reader carries the actual cooking flow. */
    @media (max-width: 900px) {
      #recipeDetailModal:not(.mobile-reader-open) .detail-hero {
        padding: 14px 15px 12px;
      }

      #recipeDetailModal:not(.mobile-reader-open) .detail-hero h2 {
        font-size: 24px;
        line-height: 1.16;
      }

      #recipeDetailModal:not(.mobile-reader-open) .detail-facts > :nth-child(2),
      #recipeDetailModal:not(.mobile-reader-open) .detail-facts > :nth-child(3) {
        display: none;
      }

      /* A missing series is setup information, not reading content. Actual
         series still remain available here for flavor switching. */
      #recipeDetailModal .recipe-family-detail-panel.is-standalone {
        display: none;
      }

      /* Material, tutorial and cost already have dedicated tabs. The desktop
         summary rail otherwise repeats those facts on a small screen. */
      #recipeDetailModal .recipe-formula-sidebar {
        display: none;
      }

      #recipeDetailModal .detail-tabs-row > .detail-tabs .detail-tab {
        min-width: 0;
        flex: 1 1 0;
        padding-right: 4px;
        padding-left: 4px;
        text-align: center;
      }

      #recipeDetailModal .detail-tabs > [data-detail-tab="packaging"] {
        display: none;
      }

      #recipeDetailModal .detail-more-menu .recipe-label-entry,
      #recipeDetailModal .detail-more-menu .mobile-detail-menu-utility {
        width: 100%;
        min-height: 40px;
        padding: 9px 10px;
        border: 0;
        border-radius: 9px;
        display: flex;
        align-items: center;
        color: var(--ink);
        background: transparent;
        font-size: 12px;
        text-align: left;
      }

      #recipeDetailModal .detail-more-menu .recipe-label-entry:hover,
      #recipeDetailModal .detail-more-menu .mobile-detail-menu-utility:hover {
        color: var(--rust);
        background: color-mix(in srgb, var(--rust) 8%, var(--card));
      }

      /* The full detail page is for editing; cooking-time conversion stays
         immediately available in the reader's sticky toolbar. */
      #recipeDetailModal .modal-actions {
        display: none;
      }

      #recipeDetailModal .modal-actions.has-mobile-detail-edit {
        padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
        display: flex;
      }

      #recipeDetailModal .modal-actions > :not([data-edit-current-recipe]):not([data-family-edit-variant]) {
        display: none !important;
      }

      #recipeDetailModal .modal-actions [data-edit-current-recipe],
      #recipeDetailModal .modal-actions [data-family-edit-variant] {
        min-height: 46px;
        border-color: color-mix(in srgb, var(--rust) 40%, var(--line));
        color: var(--rust-dark);
        background: color-mix(in srgb, var(--rust) 7%, var(--card));
      }

      /* Review now has an explicit reader entry. Hide only the redundant
         footer creation action; history and its own creation entry remain. */
      #recipeDetailModal .modal-actions [data-lab-new-batch] {
        display: none !important;
      }
      #recipeDetailModal .lab-batch-history button { min-height: 44px; }
      #recipeDetailModal .lab-batch-history { scroll-margin-top: 70px; }

    }

    /* Keep the recipe cost summary and all four table columns readable on
       phones. The desktop cost table remains untouched. */
    @media (max-width: 900px) {
      #recipeDetailModal .detail-content .cost-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
        margin-bottom: 12px;
      }

      #recipeDetailModal .detail-content .cost-summary-card {
        min-width: 0;
        min-height: 78px;
        padding: 10px 8px;
        border-radius: 13px;
      }

      #recipeDetailModal .detail-content .cost-summary-card small {
        min-height: 25px;
        margin-bottom: 5px;
        font-size: 9px;
        line-height: 1.35;
        overflow-wrap: anywhere;
      }

      #recipeDetailModal .detail-content .cost-summary-card strong {
        display: block;
        font-family: var(--font-ui, "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif);
        font-size: clamp(15px, 4.2vw, 19px);
        font-variant-numeric: tabular-nums;
        letter-spacing: -.025em;
        line-height: 1.18;
        overflow-wrap: anywhere;
      }

      #recipeDetailModal .detail-content .cost-summary-grid + .table-wrap {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: var(--card);
      }

      #recipeDetailModal .detail-content .cost-summary-grid + .table-wrap table {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        table-layout: fixed;
      }

      #recipeDetailModal .detail-content .cost-summary-grid + .table-wrap th,
      #recipeDetailModal .detail-content .cost-summary-grid + .table-wrap td {
        box-sizing: border-box;
        min-width: 0;
        padding: 9px 4px;
        font-size: 10px;
        line-height: 1.4;
        overflow-wrap: anywhere;
      }

      #recipeDetailModal .detail-content .cost-summary-grid + .table-wrap th {
        font-size: 8px;
        letter-spacing: 0;
        white-space: normal;
      }

      #recipeDetailModal .detail-content .cost-summary-grid + .table-wrap th:nth-child(1) {
        width: 28%;
      }

      #recipeDetailModal .detail-content .cost-summary-grid + .table-wrap th:nth-child(2) {
        width: 17%;
      }

      #recipeDetailModal .detail-content .cost-summary-grid + .table-wrap tbody tr:not(.table-total) td:nth-child(2) {
        text-align: center;
        white-space: nowrap;
      }

      #recipeDetailModal .detail-content .cost-summary-grid + .table-wrap th:nth-child(3) {
        width: 31%;
      }

      #recipeDetailModal .detail-content .cost-summary-grid + .table-wrap th:nth-child(4) {
        width: 24%;
      }

      #recipeDetailModal .detail-content .cost-summary-grid + .table-wrap tbody tr:not(.table-total) td:nth-child(4) {
        text-align: right;
      }

      #recipeDetailModal .detail-content .cost-summary-grid + .table-wrap .material-cost-name {
        width: 100%;
        min-width: 0;
        gap: 5px;
      }

      #recipeDetailModal .detail-content .cost-summary-grid + .table-wrap .material-cost-name > strong {
        min-width: 0;
        font-size: 10px;
        line-height: 1.35;
        overflow-wrap: anywhere;
      }

      #recipeDetailModal .detail-content .cost-summary-grid + .table-wrap .material-image-control.compact {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
        border-radius: 9px;
      }

      #recipeDetailModal .detail-content .cost-summary-grid + .table-wrap .price-unit-value strong {
        font-size: 10px;
        line-height: 1.3;
        overflow-wrap: anywhere;
      }

      #recipeDetailModal .detail-content .cost-summary-grid + .table-wrap .price-unit-value small {
        font-size: 8px;
        line-height: 1.3;
        overflow-wrap: anywhere;
      }

      #recipeDetailModal .detail-content .cost-summary-grid + .table-wrap .price-status {
        gap: 3px;
        padding: 3px 5px;
        font-size: 8px;
        white-space: normal;
      }

      #recipeDetailModal .detail-content .cost-summary-grid + .table-wrap .cost-cell-action,
      #recipeDetailModal .detail-content .cost-summary-grid + .table-wrap .estimated-cost {
        align-items: flex-end;
        flex-direction: column;
        gap: 4px;
      }

      #recipeDetailModal .detail-content .cost-summary-grid + .table-wrap .cost-link-button {
        max-width: 100%;
        min-height: 28px;
        padding: 4px 5px;
        font-size: 8px;
        line-height: 1.25;
        white-space: normal;
      }

      #recipeDetailModal .detail-content .cost-summary-grid + .table-wrap .table-total td {
        background: #f5f0e6;
        font-size: 9px;
        font-weight: 800;
      }

      #recipeDetailModal .detail-content .cost-summary-grid + .table-wrap .table-total td:last-child {
        font-size: 11px;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
      }

      #recipeDetailModal .detail-content .cost-detail-note {
        margin-top: 12px;
        padding: 11px 12px;
        font-size: 11px;
        line-height: 1.65;
        overflow-wrap: anywhere;
      }
    }

    @media (max-width: 380px) {
      #recipeDetailModal .detail-content .cost-summary-grid {
        gap: 6px;
      }

      #recipeDetailModal .detail-content .cost-summary-card {
        min-height: 74px;
        padding: 9px 6px;
      }

      #recipeDetailModal .detail-content .cost-summary-grid + .table-wrap th,
      #recipeDetailModal .detail-content .cost-summary-grid + .table-wrap td {
        padding-right: 3px;
        padding-left: 3px;
        font-size: 9px;
      }

      #recipeDetailModal .detail-content .cost-summary-grid + .table-wrap th {
        font-size: 7px;
      }

      #recipeDetailModal .detail-content .cost-summary-grid + .table-wrap .material-image-control.compact {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
      }

      #recipeDetailModal .detail-content .cost-summary-grid + .table-wrap .table-total td:last-child {
        font-size: 10px;
      }
    }

    /* Keep the always-open recipe filters compact without shrinking desktop
       controls or dropping below a comfortable mobile tap target. */
    @media (max-width: 900px) {
      html[data-release-channel="cloud"] #recipes .filter-bar.mobile-recipe-ready {
        margin-bottom: 8px;
        padding: 7px;
        grid-template-columns: minmax(0, 1fr) 54px;
        gap: 6px;
        border-radius: 13px;
      }

      html[data-release-channel="cloud"] #recipes .filter-bar.mobile-recipe-ready.mobile-filter-expanded {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      /* Status now remains available in the expanded mobile filter panel. */

      html[data-release-channel="cloud"] #recipes .filter-bar.mobile-recipe-ready .recipe-search-history-wrap .filter-search,
      html[data-release-channel="cloud"] #recipes .filter-bar.mobile-recipe-ready .select-field {
        height: 42px;
        min-height: 42px;
        font-size: 12px;
      }

      html[data-release-channel="cloud"] #recipes .filter-bar.mobile-recipe-ready .mobile-recipe-filter-toggle {
        width: 54px;
        height: 42px;
        min-height: 42px;
        font-size: 11px;
      }

      html[data-release-channel="cloud"] #recipes .filter-bar.mobile-recipe-ready.mobile-filter-expanded .recipe-library-toggle-group button {
        height: 42px;
        min-height: 42px;
        padding-right: 8px;
        padding-left: 8px;
        font-size: 11px;
      }

      /* Keep the controls readable, but remove the extra panel around them:
         the mobile recipe page already sits inside its own surface. */
      html[data-release-channel="cloud"] #recipes .filter-bar.mobile-recipe-ready {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }

      html[data-release-channel="cloud"] #recipes .filter-bar.mobile-recipe-ready .recipe-search-history-wrap .filter-search,
      html[data-release-channel="cloud"] #recipes .filter-bar.mobile-recipe-ready .select-field {
        border-color: color-mix(in srgb, var(--line) 68%, transparent);
        background: color-mix(in srgb, var(--card) 94%, transparent);
        box-shadow: none;
      }

      html[data-release-channel="cloud"] #recipes .filter-bar.mobile-recipe-ready .mobile-recipe-filter-toggle {
        border-color: color-mix(in srgb, var(--line) 68%, transparent);
        background: color-mix(in srgb, var(--card) 94%, transparent);
        box-shadow: none;
      }

      html[data-release-channel="cloud"] #recipes .filter-bar.mobile-recipe-ready .recipe-library-toggle-group {
        gap: 4px;
      }

      html[data-release-channel="cloud"] #recipes .filter-bar.mobile-recipe-ready .recipe-library-toggle-group button {
        border-color: transparent;
        background: transparent;
        box-shadow: none;
      }

      html[data-release-channel="cloud"] #recipes .filter-bar.mobile-recipe-ready .recipe-library-toggle-group button.active {
        color: var(--rust);
        background: color-mix(in srgb, var(--rust) 8%, transparent);
      }
    }

/* V0.8 candidate: compact mobile chrome, without shrinking kitchen copy.
   Sticky offsets are measured by the reader, including safe areas and resize. */
@media (max-width: 900px) {
  #recipeDetailModal .recipe-mobile-reader-head {
    box-sizing: border-box;
    min-height: calc(54px + env(safe-area-inset-top));
    padding: calc(4px + env(safe-area-inset-top)) 10px 4px;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    gap: 6px;
    background: var(--paper);
  }

  #recipeDetailModal .recipe-mobile-reader-back { width: 54px; }
  #recipeDetailModal .recipe-mobile-reader-head-actions { gap: 4px; }
  #recipeDetailModal .recipe-mobile-reader-title small { margin: 0; font-size: 12px; letter-spacing: 0; }
  #recipeDetailModal .recipe-mobile-reader-title strong { display: none; }
  #recipeDetailModal .is-reader-scrolled .recipe-mobile-reader-title small { display: none; }
  #recipeDetailModal .is-reader-scrolled .recipe-mobile-reader-title strong { display: block; font-size: 14px; }

  #recipeDetailModal .recipe-mobile-reader-toolbar {
    top: var(--reader-head-height, calc(54px + env(safe-area-inset-top)));
    padding: 1px;
    border-radius: 12px;
    box-shadow: none;
  }

  #recipeDetailModal .recipe-mobile-reader-nav button { border-radius: 9px; }
  #recipeDetailModal .recipe-mobile-reader-nav button.is-active { box-shadow: none; }
  #recipeDetailModal .recipe-mobile-reader-convert { min-width: 64px; border: 0; border-radius: 9px; }
  #recipeDetailModal .recipe-mobile-reader-section,
  #recipeDetailModal [data-reader-step-index] {
    scroll-margin-top: var(--reader-anchor-offset, 114px);
  }

  #recipeDetailModal .recipe-mobile-reader-readiness {
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 8px;
  }

  #recipeDetailModal .recipe-mobile-reader-readiness > span { flex: 1 1 170px; }
  #recipeDetailModal .recipe-mobile-reader-fill-actions { display: flex; flex-wrap: wrap; gap: 4px; }
  #recipeDetailModal .recipe-mobile-reader-fill-actions button {
    min-height: 44px;
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    color: var(--rust-dark);
    background: transparent;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
  }

  #recipeDetailModal .recipe-mobile-percentage { margin: 0 0 10px; }
  #recipeDetailModal .recipe-mobile-percentage-switch { display: flex; gap: 6px; }
  #recipeDetailModal .recipe-mobile-percentage-switch button {
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--muted);
    background: var(--card);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
  }
  #recipeDetailModal .recipe-mobile-percentage-switch button[aria-pressed="true"] {
    border-color: var(--rust);
    color: var(--rust-dark);
    background: color-mix(in srgb, var(--rust) 7%, var(--card));
    font-weight: 800;
  }
  #recipeDetailModal .recipe-mobile-percentage-switch button:disabled { opacity: .6; cursor: not-allowed; }
  #recipeDetailModal .recipe-mobile-percentage > small {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.5;
  }
  #recipeDetailModal .recipe-mobile-step-hint {
    margin: 0 0 8px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
  }
  #recipeDetailModal .recipe-mobile-reader-steps::before,
  #recipeDetailModal .recipe-mobile-reader-step::before,
  #recipeDetailModal .recipe-mobile-tutorial-preview > ol::before,
  #recipeDetailModal .recipe-mobile-tutorial-preview > ol > li::before { display: none; }

  #recipeDetailModal .recipe-mobile-reader [data-reader-step-index] {
    display: block;
    min-height: 64px;
    padding: 12px 4px 14px 52px;
    border-radius: 10px;
  }
  #recipeDetailModal .recipe-mobile-step-mark {
    position: absolute;
    top: 8px;
    left: 0;
    width: 44px;
    height: 44px;
    padding: 5px;
    border: 0;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: var(--muted);
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
  }
  #recipeDetailModal .recipe-mobile-step-mark span {
    width: 32px;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: var(--card);
  }
  #recipeDetailModal .is-reading-current {
    background: color-mix(in srgb, var(--rust) 5%, var(--paper));
    box-shadow: inset 3px 0 var(--rust);
  }
  #recipeDetailModal .recipe-mobile-step-mark[aria-pressed="true"] span {
    border-color: var(--rust);
    color: var(--rust-dark);
    background: color-mix(in srgb, var(--rust) 9%, var(--card));
  }
  #recipeDetailModal .recipe-mobile-step-return {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 10;
  }
  #recipeDetailModal .recipe-mobile-step-return[hidden] { display: none; }
  #recipeDetailModal [data-mobile-reader-return-step] {
    min-height: 44px;
    padding: 0 15px;
    border: 1px solid var(--rust);
    border-radius: 12px;
    color: var(--rust-dark);
    background: var(--card);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(62, 44, 30, .08);
  }
  #recipeDetailModal .recipe-mobile-reader button:focus-visible {
    outline: 2px solid var(--rust);
    outline-offset: 2px;
  }
}
    .detail-tabs-row {
      position: relative;
      z-index: 6;
      display: flex;
      align-items: stretch;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .recipe-detail-modal-title {
      min-width: 0;
      max-width: calc(100% - 54px);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 1.35;
    }

    .detail-tabs-row > .detail-tabs {
      min-width: 0;
      flex: 1 1 auto;
      border-top: 0;
      border-bottom: 0;
    }

    .detail-more-menu-wrap {
      position: relative;
      z-index: 2;
      flex: 0 0 auto;
      display: flex;
      align-items: stretch;
      padding-right: 13px;
      background: var(--card);
    }

    .detail-more-toggle {
      min-width: 78px;
      padding: 13px 2px 11px;
      border: 0;
      border-bottom: 2px solid transparent;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      color: var(--muted);
      background: none;
      font: inherit;
      font-size: 10px;
      font-weight: 800;
      white-space: nowrap;
      cursor: pointer;
    }

    .detail-more-toggle:hover,
    .detail-more-toggle[aria-expanded="true"],
    .detail-more-toggle.active {
      color: var(--rust);
    }

    .detail-more-toggle.active {
      border-bottom-color: var(--rust);
    }

    .detail-more-chevron {
      color: currentColor;
      font-size: 13px;
      line-height: 1;
      transform: translateY(-1px);
    }

    .detail-more-active-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      display: none;
      background: var(--rust);
    }

    .detail-more-toggle.active .detail-more-active-dot {
      display: inline-block;
    }

    .detail-more-menu {
      position: absolute;
      top: calc(100% + 7px);
      right: 8px;
      min-width: 188px;
      padding: 6px;
      border: 1px solid var(--line);
      border-radius: 13px;
      display: grid;
      gap: 3px;
      background: var(--card);
      box-shadow: 0 14px 34px rgba(70, 53, 35, .16);
    }

    .detail-more-menu[hidden] {
      display: none !important;
    }

    .detail-more-item {
      width: 100%;
      min-height: 38px;
      padding: 8px 10px;
      border: 0;
      border-radius: 9px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: var(--ink);
      background: transparent;
      font: inherit;
      font-size: 11px;
      font-weight: 700;
      text-align: left;
      white-space: nowrap;
      cursor: pointer;
    }

    .detail-more-item:hover,
    .detail-more-item.is-active {
      color: var(--rust);
      background: color-mix(in srgb, var(--rust) 8%, var(--card));
    }

    .detail-more-toggle:focus-visible,
    .detail-more-item:focus-visible {
      outline: 2px solid color-mix(in srgb, var(--rust) 55%, transparent);
      outline-offset: 2px;
    }

    .detail-more-item .detail-tab-count {
      flex: 0 0 auto;
      margin-left: auto;
    }

    @media (max-width: 720px) {
      #recipeDetailModal .recipe-detail-modal-title {
        font-size: 17px;
      }

      #recipeDetailModal .detail-tabs-row {
        position: sticky;
        top: calc(56px + env(safe-area-inset-top));
        min-height: 52px;
        background: color-mix(in srgb, var(--card) 94%, transparent);
        box-shadow: 0 5px 16px rgba(62, 44, 30, .04);
        backdrop-filter: blur(18px);
      }

      #recipeDetailModal .detail-tabs-row > .detail-tabs {
        position: static;
        min-height: 52px;
        padding: 0 6px 0 10px;
        border: 0;
        background: transparent;
      }

      #recipeDetailModal .detail-more-menu-wrap {
        min-height: 52px;
        padding-right: 8px;
        background: color-mix(in srgb, var(--card) 94%, transparent);
      }

      #recipeDetailModal .detail-more-toggle {
        min-width: 64px;
        min-height: 48px;
        padding: 11px 3px 9px;
        font-size: 12px;
      }

      #recipeDetailModal .detail-more-menu {
        top: calc(100% + 5px);
        right: 8px;
        min-width: 184px;
      }
    }

    @media (max-width: 370px) {
      #recipeDetailModal .detail-more-menu-wrap {
        padding-right: 5px;
      }

      #recipeDetailModal .detail-more-toggle {
        min-width: 58px;
      }
    }
.recipe-label-entry{flex-shrink:0;border:1px solid #d9bbaa;border-radius:10px;padding:9px 14px;background:#fffaf5;color:#a84c30;font:inherit;font-weight:700;cursor:pointer;align-self:center}
.recipe-label-dialog{width:min(860px,94vw);max-height:90vh;padding:24px;border:1px solid #dfd6cc;border-radius:22px;background:#fffdf9;color:#302a25;box-shadow:0 24px 80px #0003;overflow:auto}
.recipe-label-dialog::backdrop{background:#302a2570}
.recipe-label-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px}
.recipe-label-heading h2{margin:0;font-size:24px}.recipe-label-heading p{margin:8px 0 0;color:#786d64}
.recipe-label-dialog button{cursor:pointer;font:inherit;border:1px solid #dfd6cc;border-radius:10px;padding:10px 16px;background:white;color:inherit}
.recipe-label-dialog button.primary-button{background:#bd5a39;color:white;border-color:#bd5a39}.recipe-label-dialog button:disabled{opacity:.45;cursor:not-allowed}
.recipe-label-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px}.recipe-label-form{display:grid;gap:14px;min-width:0}
.recipe-label-form label{display:grid;gap:7px;font-size:14px;font-weight:600}.recipe-label-form input,.recipe-label-form textarea,.recipe-label-form select{width:100%;min-width:0;box-sizing:border-box;padding:10px;border:1px solid #d7cfc5;border-radius:8px;background:white;color:#302a25;font:inherit}.recipe-label-form textarea{resize:vertical}
.recipe-label-dialog small{color:#786d64;line-height:1.6;font-size:12px}.recipe-label-form>button{justify-self:start;padding:5px 10px;font-size:12px;margin-top:-8px}
.recipe-label-preview{min-width:0;padding:18px;background:#f4efe8;border-radius:14px}.recipe-label-preview label{display:block;font-weight:700;margin-bottom:12px}.recipe-label-preview textarea{width:100%;box-sizing:border-box;resize:vertical;padding:14px;border:1px solid #dfd6cc;border-radius:8px;background:white;color:#302a25;font:14px/1.7 "Microsoft YaHei",sans-serif}.recipe-label-preview p{font-size:13px;line-height:1.6}
.recipe-label-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:16px}.recipe-label-save-note{font-size:12px;color:#786d64;line-height:1.6;margin-top:20px}
@media(max-width:680px){.recipe-label-layout{grid-template-columns:1fr}.recipe-label-dialog{padding:18px}.recipe-label-entry{font-size:12px;padding:8px}.recipe-label-dialog .recipe-label-heading h2{font-size:22px}}
    /* Selection center: reusable web-resource cards. */
    .selection-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; padding: 13px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.58); }
    .selection-search-wrap { position: relative; flex: 1; min-width: 0; }
    .selection-search { display: grid; width: 100%; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 750; }
    .selection-search input, .selection-editor input, .selection-editor textarea { width: 100%; border: 1px solid rgba(92,73,60,.17); border-radius: 12px; outline: 0; background: rgba(255,255,255,.88); color: var(--ink); padding: 11px 12px; font: inherit; }
    .selection-search input:focus, .selection-editor input:focus, .selection-editor textarea:focus { border-color: rgba(173,79,47,.52); box-shadow: 0 0 0 3px rgba(173,79,47,.09); }
    .selection-search-history-panel { position: absolute; top: calc(100% + 8px); right: 0; left: 0; z-index: 40; overflow: hidden; border: 1px solid #dfd1c2; border-radius: 15px; background: rgba(255,253,249,.98); box-shadow: 0 18px 42px rgba(70,48,31,.14); backdrop-filter: blur(16px); }
    .selection-search-history-panel[hidden] { display: none; }
    .selection-search-history-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 13px 8px; color: var(--muted); font-size: 12px; }
    .selection-search-history-head button, .selection-search-history-delete { border: 0; background: transparent; color: #9a7258; font: inherit; cursor: pointer; }
    .selection-search-history-list { padding: 0 7px 7px; }
    .selection-search-history-row { display: flex; align-items: center; border-radius: 10px; }
    .selection-search-history-row:hover { background: #f6eee4; }
    .selection-search-history-query { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; border: 0; background: transparent; color: var(--ink); padding: 10px; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
    .selection-search-history-query span { color: #a57b60; font-size: 16px; }
    .selection-search-history-delete { flex: 0 0 auto; padding: 9px 12px; font-size: 17px; }
    .selection-count { color: var(--muted); font-size: 12px; white-space: nowrap; }
    .selection-editor { margin-bottom: 22px; border: 1px solid #dfd0c0; border-radius: 21px; background: #f8f2e9; padding: 20px; box-shadow: 0 14px 36px rgba(65,45,29,.07); }
    .selection-editor[hidden] { display: none; }
    .selection-editor-head, .selection-editor-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
    .selection-editor-head { margin-bottom: 16px; }
    .selection-editor-head h2 { margin: 3px 0 0; font-family: var(--font-serif); }
    .selection-editor-head button { border: 0; background: transparent; color: var(--muted); font-size: 25px; cursor: pointer; }
    .selection-kicker { color: var(--rust); font-size: 10px; font-weight: 850; letter-spacing: .15em; }
    .selection-editor-grid { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 18px; }
    .selection-image-column { display: grid; align-content: start; gap: 8px; min-width: 0; }
    .selection-image-upload { display: grid; place-items: center; min-height: 220px; border: 1px dashed #c9ad96; border-radius: 17px; background: #fffaf4; color: #8b674f; text-align: center; cursor: pointer; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease; }
    .selection-image-upload.is-drag-over { border-color: var(--rust); background: #fff3e7; box-shadow: 0 0 0 4px rgba(173,79,47,.1), 0 12px 25px rgba(92,55,35,.1); transform: translateY(-1px); }
    .selection-image-upload.is-drag-over #selectionImagePreview { color: var(--rust); }
    .selection-paste-label { margin: 3px 2px 0; color: #755f4e; font-size: 11px; font-weight: 750; }
    .selection-paste-input { min-height: 42px; resize: none !important; border-color: rgba(173,79,47,.3) !important; background: rgba(255,255,255,.72) !important; font-size: 11px !important; }
    .selection-paste-input::placeholder { color: #a17c65; }
    .selection-paste-input:focus { border-color: var(--rust) !important; box-shadow: 0 0 0 3px rgba(173,79,47,.09); }
    .selection-image-help { margin: 0 3px; color: var(--muted); font-size: 10px; line-height: 1.55; }
    .selection-image-upload span { display: grid; gap: 6px; padding: 18px; }
    .selection-image-upload small { color: var(--muted); font-size: 10px; }
    #selectionImagePreview { display: grid; place-items: center; width: 100%; min-width: 0; min-height: 220px; padding: 0; }
    .selection-upload-stack { position: relative; display: block !important; width: 100%; min-width: 0; min-height: 220px; padding: 0 !important; }
    .selection-upload-stack > b { position: absolute; top: 9px; right: 9px; z-index: 30; border-radius: 999px; background: #efe0cf; padding: 5px 9px; color: #7f573f; font-size: 10px; }
    .selection-upload-fan { position: absolute; inset: 15px 24px 54px; display: block !important; padding: 0 !important; pointer-events: none; }
    .selection-upload-thumb { position: absolute; top: 50%; left: 50%; display: block !important; width: 76%; height: 82%; z-index: calc(10 - var(--selection-upload-position)); overflow: hidden; border: 2px solid rgba(255,255,255,.95); border-radius: 13px; background: #fff; padding: 4px !important; box-shadow: 0 7px 18px rgba(64,45,30,.14); transform: translate(-50%,-50%) translate(var(--selection-upload-x),var(--selection-upload-y)) rotate(var(--selection-upload-rotate)) scale(var(--selection-upload-scale)); }
    .selection-upload-thumb[data-preview-position="0"] { --selection-upload-x: 0px; --selection-upload-y: 8px; --selection-upload-rotate: 0deg; --selection-upload-scale: 1; }
    .selection-upload-thumb[data-preview-position="1"] { --selection-upload-x: -22px; --selection-upload-y: -9px; --selection-upload-rotate: -8deg; --selection-upload-scale: .86; }
    .selection-upload-thumb[data-preview-position="2"] { --selection-upload-x: 22px; --selection-upload-y: -8px; --selection-upload-rotate: 8deg; --selection-upload-scale: .86; }
    .selection-upload-thumb[data-preview-position="3"] { --selection-upload-x: 0px; --selection-upload-y: -21px; --selection-upload-rotate: 3deg; --selection-upload-scale: .76; }
    .selection-upload-thumb img { display: block; width: 100%; height: 100%; border-radius: 9px; background: #faf6ef; object-fit: contain; }
    .selection-upload-strip { position: absolute; right: 9px; bottom: 9px; left: 9px; z-index: 25; display: flex !important; justify-content: center; gap: 5px !important; overflow-x: auto; padding: 0 !important; }
    .selection-upload-remove { position: relative; flex: 0 0 29px; width: 29px; height: 29px; overflow: hidden; border: 1px solid rgba(105,76,55,.2); border-radius: 8px; background: #fff; padding: 2px; box-shadow: 0 2px 7px rgba(65,45,30,.1); cursor: pointer; }
    .selection-upload-remove img { display: block; width: 100%; height: 100%; border-radius: 5px; object-fit: cover; }
    .selection-upload-remove i { position: absolute; top: -2px; right: -1px; display: grid; place-items: center; width: 13px; height: 13px; border-radius: 50%; background: rgba(57,42,31,.86); color: #fff; font: 700 10px/1 sans-serif; }
    .selection-editor-fields { display: grid; gap: 12px; }
    .selection-editor-fields label { display: grid; gap: 6px; color: #755f4e; font-size: 12px; font-weight: 750; }
    .selection-editor textarea { resize: vertical; line-height: 1.55; }
    .selection-editor-actions { justify-content: flex-end; margin-top: 17px; border-top: 1px solid var(--line); padding-top: 16px; }
    .selection-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(235px,1fr)); gap: 16px; }
    .selection-card { position: relative; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,253,249,.93); box-shadow: 0 9px 25px rgba(64,45,30,.055); }
    .selection-card:hover { z-index: 20; }
    .selection-card-image { display: grid; position: relative; place-items: center; aspect-ratio: 1 / 1; border-radius: 20px 20px 0 0; background: linear-gradient(145deg,#eee2d5,#faf6ef); color: #9a7459; font-family: var(--font-serif); font-size: 42px; }
    .selection-card-image-stack { position: absolute; inset: 17px 25px 21px; isolation: isolate; perspective: 900px; pointer-events: none; }
    .selection-card-image-layer { position: absolute; top: 50%; left: 50%; width: 82%; height: 82%; z-index: calc(10 - var(--selection-stack-position)); overflow: hidden; border: 2px solid rgba(255,255,255,.94); border-radius: 17px; background: #fff; padding: 4px; box-shadow: 0 9px 19px rgba(65,45,30,.18),0 1px 3px rgba(65,45,30,.13); cursor: pointer; pointer-events: auto; transform: translate(-50%,-50%) translate(var(--selection-stack-x),var(--selection-stack-y)) rotate(var(--selection-stack-rotate)) scale(var(--selection-stack-scale)); transform-origin: 50% 64%; transition: transform .28s cubic-bezier(.22,1,.36,1),box-shadow .2s ease,filter .2s ease; }
    .selection-card-image-layer[data-stack-position="0"] { --selection-stack-x: 0px; --selection-stack-y: 9px; --selection-stack-rotate: 0deg; --selection-stack-scale: 1; }
    .selection-card-image-layer[data-stack-position="1"] { --selection-stack-x: -31px; --selection-stack-y: -17px; --selection-stack-rotate: -9deg; --selection-stack-scale: .86; }
    .selection-card-image-layer[data-stack-position="2"] { --selection-stack-x: 31px; --selection-stack-y: -14px; --selection-stack-rotate: 9deg; --selection-stack-scale: .86; }
    .selection-card-image-layer[data-stack-position="3"] { --selection-stack-x: 1px; --selection-stack-y: -34px; --selection-stack-rotate: 4deg; --selection-stack-scale: .77; }
    .selection-card-image-stack:hover .selection-card-image-layer[data-stack-position="0"] { transform: translate(-50%,-50%) translate(0,11px) scale(1.025); box-shadow: 0 14px 27px rgba(65,45,30,.24),0 1px 3px rgba(65,45,30,.14); }
    .selection-card-image-stack:hover .selection-card-image-layer[data-stack-position="1"] { transform: translate(-50%,-50%) translate(-39px,-20px) rotate(-11deg) scale(.89); }
    .selection-card-image-stack:hover .selection-card-image-layer[data-stack-position="2"] { transform: translate(-50%,-50%) translate(39px,-17px) rotate(11deg) scale(.89); }
    .selection-card-image-stack:hover .selection-card-image-layer[data-stack-position="3"] { transform: translate(-50%,-50%) translate(1px,-41px) rotate(5deg) scale(.8); }
    .selection-card-image-layer:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }
    .selection-card-image-layer img { display: block; width: 100%; height: 100%; border-radius: 12px; background: #faf6ef; object-fit: contain; pointer-events: none; }
    .selection-card-image-count { position: absolute; right: 11px; bottom: 11px; z-index: 22; border-radius: 999px; background: rgba(57,42,31,.78); padding: 5px 9px; color: #fff; font: 750 10px/1 sans-serif; pointer-events: none; }
    .selection-card-hover-preview { position: fixed; z-index: 160; width: min(430px,calc(100vw - 32px)); height: min(430px,calc(100vh - 32px)); overflow: hidden; border: 1px solid rgba(107,78,57,.2); border-radius: 17px; background: rgba(255,253,249,.98); box-shadow: 0 22px 58px rgba(52,36,25,.28); opacity: 0; visibility: hidden; pointer-events: none; transform: scale(.97); transition: opacity .15s ease,transform .17s ease,visibility .15s ease; }
    .selection-card-hover-preview.is-visible { opacity: 1; visibility: visible; transform: scale(1); }
    .selection-card-hover-preview img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 9px; }
    .selection-card-body { padding: 16px; }
    .selection-card-body h3 { margin: 0 0 8px; color: var(--ink); font-family: var(--font-serif); font-size: 19px; }
    .selection-card-body p { min-height: 3.2em; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
    .selection-card-link { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 11px; color: var(--rust); font-size: 11px; text-decoration: none; }
    .selection-card-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .selection-card-actions { display: flex; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
    .selection-card-actions button { border: 0; background: transparent; color: var(--rust); padding: 5px 0; font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }
    .selection-card-actions button:last-child { margin-left: auto; color: #9a6c56; }
    .selection-empty { grid-column: 1 / -1; display: grid; place-items: center; min-height: 260px; border: 1px dashed #d8c5b3; border-radius: 20px; background: rgba(250,246,239,.68); padding: 35px; text-align: center; }
    .selection-empty strong { font-size: 19px; }
    .selection-empty p { max-width: 480px; margin: 8px 0 18px; color: var(--muted); line-height: 1.65; }
    .selection-photo-wall-section { margin-top: 34px; border-top: 1px solid var(--line); padding-top: 28px; }
    .selection-photo-wall-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 17px; }
    .selection-photo-wall-head h2 { margin: 5px 0 4px; font-family: var(--font-serif); font-size: 25px; }
    .selection-photo-wall-head p { margin: 0; color: var(--muted); font-size: 12px; }
    .selection-photo-wall-count { flex: 0 0 auto; border-radius: 999px; background: #efe2d2; padding: 7px 11px; color: #805b43; font-size: 11px; font-weight: 750; }
    .selection-photo-wall { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
    .selection-wall-tile { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border: 0; border-radius: 15px; background: #f3ece3; padding: 0; box-shadow: 0 7px 20px rgba(65,45,30,.08); cursor: zoom-in; transition: transform .2s ease,box-shadow .2s ease; }
    .selection-wall-tile:hover,.selection-wall-tile:focus-visible { z-index: 2; outline: none; box-shadow: 0 15px 31px rgba(65,45,30,.18); transform: translateY(-4px) scale(1.015); }
    .selection-wall-tile img { display: block; width: 100%; height: 100%; background: #faf6ef; object-fit: contain; }
    .selection-wall-caption { position: absolute; inset: auto 0 0; padding: 34px 11px 10px; background: linear-gradient(transparent,rgba(42,29,20,.78)); color: #fff; text-align: left; pointer-events: none; }
    .selection-wall-caption strong,.selection-wall-caption span { display: block; }
    .selection-wall-caption strong { font-size: 12px; }
    .selection-wall-caption span { margin-top: 2px; opacity: .88; font-size: 10px; }
    .selection-wall-empty { grid-column: 1 / -1; padding: 36px 18px; border: 1px dashed #d8c5b3; border-radius: 17px; color: var(--muted); text-align: center; font-size: 12px; line-height: 1.7; }
    .selection-lightbox { position: fixed; inset: 0; z-index: 220; display: grid; width: 100vw; height: 100vh; height: 100dvh; place-items: center; overflow: hidden; padding: 24px 70px; background: rgba(27,19,14,.88); backdrop-filter: blur(5px); }
    .selection-lightbox[hidden] { display: none; }
    .selection-lightbox-stage { display: grid; grid-template-columns: minmax(0,1fr) 285px; width: min(980px,100%); height: min(720px,calc(100vh - 48px)); height: min(720px,calc(100dvh - 48px)); min-height: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 21px; background: #fffaf4; box-shadow: 0 25px 70px rgba(0,0,0,.35); }
    .selection-lightbox-photo { display: grid; min-width: 0; min-height: 0; place-items: center; overflow: hidden; background: #17120f; }
    .selection-lightbox-photo img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; }
    .selection-lightbox-info { display: flex; min-width: 0; min-height: 0; flex-direction: column; overflow-y: auto; padding: 30px 25px; color: var(--ink); }
    .selection-lightbox-info h3 { margin: 9px 0 13px; font-family: var(--font-serif); font-size: 24px; }
    .selection-lightbox-info p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; white-space: pre-wrap; }
    .selection-lightbox-info a { margin-top: 20px; color: var(--rust); font-size: 12px; font-weight: 750; text-decoration: none; }
    .selection-lightbox-info a[hidden] { display: none; }
    .selection-lightbox-info > span:last-child { margin-top: auto; padding-top: 20px; color: var(--muted); font-size: 11px; }
    .selection-lightbox-close,.selection-lightbox-step { position: fixed; z-index: 2; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; background: rgba(25,18,14,.7); color: #fff; cursor: pointer; }
    .selection-lightbox-close { top: 18px; right: 18px; width: 42px; height: 42px; font-size: 27px; }
    .selection-lightbox-step { top: 50%; width: 46px; height: 46px; font-size: 34px; transform: translateY(-50%); }
    .selection-lightbox-prev { left: 16px; }
    .selection-lightbox-next { right: 16px; }
    @media (prefers-reduced-motion: reduce) { .selection-card-image-layer,.selection-card-hover-preview,.selection-wall-tile { transition-duration: .01ms; } }
    @media (max-width: 1000px) { .selection-photo-wall { grid-template-columns: repeat(3,minmax(0,1fr)); } }
    @media (max-width: 700px) { .selection-toolbar,.selection-photo-wall-head { align-items: stretch; flex-direction: column; } .selection-editor-grid { grid-template-columns: 1fr; } .selection-image-upload { min-height: 180px; } .selection-photo-wall { grid-template-columns: repeat(2,minmax(0,1fr)); } .selection-lightbox { padding: 60px 14px 18px; } .selection-lightbox-stage { grid-template-columns: 1fr; grid-template-rows: minmax(0,1fr) auto; height: calc(100dvh - 78px); overflow: auto; } .selection-lightbox-photo { min-height: 42vh; } .selection-lightbox-info { min-height: 190px; max-height: 38vh; } .selection-lightbox-step { top: 42%; } }
/* V0.5 sidebar preferences: desktop collapse + local navigation customization. */
.sidebar-toggle-button,
.sidebar-settings-button,
.theme-settings-button {
  border: 1px solid var(--line);
  color: var(--ink);
  background: rgba(255, 253, 248, .72);
  cursor: pointer;
  transition: .2s ease;
}

.sidebar-toggle-button:hover,
.sidebar-settings-button:hover,
.theme-settings-button:hover {
  border-color: rgba(163, 77, 46, .45);
  background: var(--pink-soft);
}

.sidebar-toggle-button {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 10px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.sidebar-toggle-icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 7px;
  color: var(--rust-dark);
  background: rgba(163, 77, 46, .1);
  font-size: 17px;
  line-height: 1;
}

.sidebar-settings-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 7px 10px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.sidebar-settings-button > span:first-child {
  color: var(--rust-dark);
  font-size: 16px;
  line-height: 1;
}

.theme-settings-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 7px 10px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.theme-settings-icon {
  width: 17px;
  height: 17px;
  display: inline-block;
  border: 2px solid var(--rust-dark);
  border-radius: 6px;
  background: conic-gradient(from 25deg, var(--rust) 0 25%, var(--butter) 25% 50%, var(--olive) 50% 75%, var(--rust) 75% 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 253, 248, .76);
}

.lab-theme-popover[hidden] {
  display: none;
}

.lab-theme-popover {
  position: fixed;
  z-index: 320;
  width: min(314px, calc(100vw - 24px));
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  box-shadow: 0 20px 54px rgba(67, 47, 32, .18);
  animation: labThemePopoverIn .16s ease both;
}

@keyframes labThemePopoverIn {
  from { opacity: 0; transform: translateY(-5px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.lab-theme-popover-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 11px;
}

.lab-theme-popover-head strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
}

.lab-theme-popover-close {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.lab-theme-popover-close:hover {
  color: var(--rust-dark);
  background: var(--pink-soft);
}

.lab-theme-popover-current {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 10px;
}

.lab-theme-popover-current strong {
  color: var(--rust-dark);
  font-size: 11px;
}

.lab-theme-popover-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.lab-theme-popover-option {
  min-width: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 7px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--ink);
  background: var(--card);
  cursor: pointer;
  font-size: 10px;
  font-weight: 750;
  text-align: left;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.lab-theme-popover-option:hover {
  border-color: var(--rust);
  transform: translateY(-1px);
}

.lab-theme-popover-option.is-selected {
  border-color: var(--rust);
  background: var(--pink-soft);
}

.lab-theme-popover-option .lab-theme-swatch {
  width: 30px;
  height: 30px;
  padding: 5px;
  border-radius: 9px 9px 9px 3px;
}

.lab-theme-popover-option .lab-theme-swatch i {
  width: 6px;
  height: 16px;
}

.lab-theme-popover-option .lab-theme-swatch i:nth-child(2) {
  height: 21px;
}

.lab-theme-popover-option .lab-theme-swatch i:nth-child(3) {
  height: 13px;
}

.lab-theme-popover-option > span:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lab-theme-popover-check {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: transparent;
  background: transparent;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.lab-theme-popover-option.is-selected .lab-theme-popover-check {
  color: #fffaf0;
  background: var(--rust);
}

.lab-theme-popover-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
}

/* Some responsive nav rules intentionally use strong display declarations.
   The explicit class makes a hidden board disappear from the actual menu in
   every breakpoint, not only through the native hidden attribute. */
.sidebar .nav-button.is-sidebar-hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.sidebar-preferences-modal[hidden] {
  display: none;
}

.sidebar-preferences-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(44, 35, 25, .28);
  backdrop-filter: blur(5px);
}

.sidebar-preferences-card {
  width: min(560px, 100%);
  max-height: min(720px, calc(100vh - 40px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(114, 91, 62, .2);
  border-radius: 22px;
  background: var(--card);
  box-shadow: 0 24px 70px rgba(73, 49, 28, .2);
}

.sidebar-preferences-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--line);
}

.sidebar-preferences-head h2 {
  margin: 0;
  font-family: "STSong", "SimSun", Georgia, serif;
  font-size: 22px;
}

.sidebar-preferences-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.sidebar-preferences-close {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.sidebar-preferences-close:hover {
  color: var(--rust-dark);
  background: var(--pink-soft);
}

.sidebar-preferences-body {
  min-height: 0;
  padding: 14px 18px;
  overflow: auto;
}

.sidebar-preferences-brand-field {
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255, 253, 248, .62);
}

.sidebar-preferences-brand-field > label {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 700;
}

.sidebar-preferences-brand-control {
  display: flex;
  align-items: center;
  gap: 9px;
}

.sidebar-preferences-brand-control input {
  min-width: 0;
  flex: 1;
  height: 38px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: var(--card);
  outline: 0;
  font-weight: 700;
}

.sidebar-preferences-brand-control input:focus,
.sidebar-preference-icon-input:focus {
  border-color: rgba(163, 77, 46, .5);
  box-shadow: 0 0 0 3px rgba(163, 77, 46, .08);
}

.sidebar-preferences-brand-preview {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 11px 11px 11px 4px;
  color: #fffaf0;
  background: var(--rust);
  font-family: "STSong", "SimSun", Georgia, serif;
  font-size: 14px;
  font-weight: 700;
}

.sidebar-preferences-brand-field small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
}

.lab-theme-preferences {
  margin: 0 0 14px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface-soft);
}

.lab-theme-preferences-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 11px;
}

.lab-theme-preferences-head > div {
  min-width: 0;
}

.lab-theme-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--rust);
  font-family: Georgia, serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
}

.lab-theme-preferences-head strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
}

.lab-theme-preferences-head small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.lab-theme-current {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--rust-dark);
  background: var(--pink-soft);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.lab-theme-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.lab-theme-option {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  background: var(--card);
  cursor: pointer;
  text-align: left;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.lab-theme-option:hover {
  border-color: color-mix(in srgb, var(--rust) 48%, var(--line));
  transform: translateY(-1px);
}

.lab-theme-option.is-selected {
  border-color: var(--rust);
  background: var(--pink-soft);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rust) 12%, transparent);
}

.lab-theme-swatch {
  width: 38px;
  height: 38px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  gap: 3px;
  padding: 6px;
  overflow: hidden;
  border-radius: 11px 11px 11px 4px;
  background: #f4efe6;
}

.lab-theme-swatch i {
  display: block;
  width: 8px;
  height: 21px;
  border-radius: 99px 99px 4px 4px;
}

.lab-theme-swatch-oven { background: #fbfcfb; }
.lab-theme-swatch-oven i:nth-child(1) { background: #bc5b3a; }
.lab-theme-swatch-oven i:nth-child(2) { height: 27px; background: #d6aa45; }
.lab-theme-swatch-oven i:nth-child(3) { height: 17px; background: #687b65; }
.lab-theme-swatch-vanilla { background: #f5f0e4; }
.lab-theme-swatch-vanilla i:nth-child(1) { background: #b07a32; }
.lab-theme-swatch-vanilla i:nth-child(2) { height: 27px; background: #e3b85c; }
.lab-theme-swatch-vanilla i:nth-child(3) { height: 17px; background: #a6ad84; }
.lab-theme-swatch-berry { background: #f5eceb; }
.lab-theme-swatch-berry i:nth-child(1) { background: #ad4f66; }
.lab-theme-swatch-berry i:nth-child(2) { height: 27px; background: #d9a35c; }
.lab-theme-swatch-berry i:nth-child(3) { height: 17px; background: #8c6474; }
.lab-theme-swatch-matcha { background: #edf1e9; }
.lab-theme-swatch-matcha i:nth-child(1) { background: #4d7358; }
.lab-theme-swatch-matcha i:nth-child(2) { height: 27px; background: #b66a45; }
.lab-theme-swatch-matcha i:nth-child(3) { height: 17px; background: #9dbbb7; }
.lab-theme-swatch-blueberry { background: #f1f6f8; }
.lab-theme-swatch-blueberry i:nth-child(1) { background: #527d91; }
.lab-theme-swatch-blueberry i:nth-child(2) { height: 27px; background: #d6ad64; }
.lab-theme-swatch-blueberry i:nth-child(3) { height: 17px; background: #6f8f86; }
.lab-theme-swatch-peach { background: #fcf2ed; }
.lab-theme-swatch-peach i:nth-child(1) { background: #d46e51; }
.lab-theme-swatch-peach i:nth-child(2) { height: 27px; background: #e4b75a; }
.lab-theme-swatch-peach i:nth-child(3) { height: 17px; background: #7e9b91; }
.lab-theme-swatch-cocoa { background: #f5f1ed; }
.lab-theme-swatch-cocoa i:nth-child(1) { background: #82594b; }
.lab-theme-swatch-cocoa i:nth-child(2) { height: 27px; background: #c6a064; }
.lab-theme-swatch-cocoa i:nth-child(3) { height: 17px; background: #748279; }
.lab-theme-swatch-lavender { background: #f6f3fb; }
.lab-theme-swatch-lavender i:nth-child(1) { background: #8066a5; }
.lab-theme-swatch-lavender i:nth-child(2) { height: 27px; background: #d5ae63; }
.lab-theme-swatch-lavender i:nth-child(3) { height: 17px; background: #758b80; }

.lab-theme-option-copy {
  min-width: 0;
}

.lab-theme-option-copy strong,
.lab-theme-option-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lab-theme-option-copy strong {
  margin-bottom: 2px;
  font-size: 11px;
}

.lab-theme-option-copy small {
  color: var(--muted);
  font-size: 9px;
}

.lab-theme-check {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: transparent;
  background: transparent;
  font-size: 11px;
  font-weight: 900;
}

.lab-theme-option.is-selected .lab-theme-check {
  color: #fffaf0;
  background: var(--rust);
}

.sidebar-preferences-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sidebar-preference-group {
  position: relative;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 253, 248, .58);
}

.sidebar-preference-group.is-group-dragging {
  opacity: .45;
  user-select: none;
}

.sidebar-preference-group.is-drop-before {
  box-shadow: inset 0 3px 0 var(--rust);
}

.sidebar-preference-group.is-drop-after {
  box-shadow: inset 0 -3px 0 var(--rust);
}

.sidebar-preference-group.is-drop-target {
  outline: 2px solid rgba(163, 77, 46, .48);
  outline-offset: 1px;
  background: var(--pink-soft);
}

.sidebar-preference-group-head {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 1px 2px 9px;
  border-bottom: 1px solid var(--line);
  cursor: grab;
}

.sidebar-preference-group-head:active,
.sidebar-preference-group.is-group-dragging .sidebar-preference-group-head {
  cursor: grabbing;
}

.sidebar-preference-group-drag {
  display: grid;
  place-items: center;
  width: 15px;
  flex: 0 0 auto;
  color: var(--muted);
  user-select: none;
  font-size: 15px;
  letter-spacing: -4px;
  line-height: 1;
}

.sidebar-preference-group-copy {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 3px;
}

.sidebar-preference-group-copy strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-preference-group-copy small {
  color: var(--muted);
  font-size: 10px;
}

.sidebar-preference-group-items {
  display: grid;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.sidebar-preference-group .sidebar-preference-row {
  background: rgba(255, 255, 255, .56);
}

.sidebar-preference-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 50px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255, 253, 248, .62);
}

.sidebar-preference-row.is-dragging {
  opacity: .4;
  user-select: none;
}

.sidebar-preference-row.is-drop-before {
  box-shadow: inset 0 3px 0 var(--rust);
}

.sidebar-preference-row.is-drop-after {
  box-shadow: inset 0 -3px 0 var(--rust);
}

.sidebar-preference-row.is-hidden {
  opacity: .56;
  background: rgba(244, 239, 230, .58);
}

.sidebar-preference-name,
.sidebar-preference-controls {
  display: flex;
  align-items: center;
}

.sidebar-preference-name {
  min-width: 0;
  flex: 1;
  gap: 9px;
}

.sidebar-preference-drag {
  display: grid;
  place-items: center;
  width: 15px;
  flex: 0 0 auto;
  color: var(--muted);
  cursor: grab;
  user-select: none;
  font-size: 15px;
  letter-spacing: -4px;
  line-height: 1;
}

.sidebar-preference-drag:active,
.sidebar-preference-row.is-dragging .sidebar-preference-drag {
  cursor: grabbing;
}

.sidebar-preference-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(80, 63, 43, .15);
  border-radius: 9px;
  color: var(--ink);
  background: rgba(255, 255, 255, .6);
  font-family: Georgia, serif;
  font-size: 11px;
  font-weight: 700;
}

.sidebar-preference-icon-input {
  width: 38px;
  height: 30px;
  min-width: 0;
  padding: 3px 4px;
  flex: 0 0 auto;
  border: 1px solid rgba(80, 63, 43, .15);
  border-radius: 9px;
  color: var(--ink);
  background: rgba(255, 255, 255, .6);
  outline: 0;
  text-align: center;
  font-family: Georgia, serif;
  font-size: 11px;
  font-weight: 700;
}

.sidebar-preference-name-field {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 3px;
}

.sidebar-preference-name-input {
  width: 100%;
  min-width: 0;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  background: var(--card);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
}

.sidebar-preference-name-input:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 1px;
}

.sidebar-preference-name-reset {
  justify-self: start;
  padding: 2px 7px;
  border: 0;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}

.sidebar-preference-name-reset:hover { color: var(--rust-dark); }

.sidebar .nav-button > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-group-label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 15px;
  margin: 13px 11px 3px;
  color: #9a8e81;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.nav-group-label:first-child {
  margin-top: 2px;
}

.nav-group-label::after {
  height: 1px;
  flex: 1;
  background: rgba(83, 67, 49, .12);
  content: "";
}

.sidebar-preferences-english {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  cursor: pointer;
}

.sidebar-preferences-english strong { display: block; font-size: 13px; }
.sidebar-preferences-english small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.sidebar-preferences-english input { flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--rust); }

/* Shared page-heading scale overrides legacy per-module hero sizes only. */
.app .content .view .page-header h1,
.app .content .view > .hero h1 {
  font-size: 27px !important;
  line-height: 1.15 !important;
  letter-spacing: -.03em !important;
  margin: 0 0 5px !important;
  overflow-wrap: anywhere;
}

.app .content .view .page-header p { line-height: 1.55; }

html:not([data-page-english="true"]) .view .page-header .eyebrow,
html:not([data-page-english="true"]) .view > .hero .hero-kicker {
  display: none !important;
}

html[data-page-english="true"] .view .page-header .eyebrow,
html[data-page-english="true"] .view > .hero .hero-kicker {
  display: block !important;
  overflow-wrap: anywhere;
}

.sidebar-preference-controls {
  flex: 0 0 auto;
  gap: 5px;
}

.sidebar-preference-move,
.sidebar-preference-visibility {
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--card);
  cursor: pointer;
}

.sidebar-preference-move {
  width: 29px;
  height: 29px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
}

.sidebar-preference-move:hover:not(:disabled) {
  color: var(--rust-dark);
  border-color: rgba(163, 77, 46, .45);
  background: var(--pink-soft);
}

.sidebar-preference-move:disabled {
  cursor: not-allowed;
  opacity: .35;
}

.sidebar-preference-visibility {
  position: relative;
  width: 38px;
  height: 29px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sidebar-preference-visibility input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--rust);
  cursor: pointer;
}

.sidebar-preferences-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 24px 20px;
  border-top: 1px solid var(--line);
}

.sidebar-preferences-foot p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.sidebar-preferences-foot-actions {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

@media (max-width: 560px) {
  .lab-theme-grid {
    grid-template-columns: 1fr;
  }
  .sidebar-preference-row { gap: 7px; padding: 8px; }
  .sidebar-preference-name { gap: 5px; }
  .sidebar-preference-icon-input { width: 30px; }
  .sidebar-preference-controls { gap: 3px; }
}

@media (min-width: 901px) {
  .sidebar-toggle-button {
    display: inline-flex;
  }

  .app.sidebar-collapsed {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .app.sidebar-collapsed .sidebar {
    padding-right: 10px;
    padding-left: 10px;
  }

  .app.sidebar-collapsed .brand {
    justify-content: center;
    padding-right: 0;
    padding-left: 0;
  }

  .app.sidebar-collapsed .brand-copy,
  .app.sidebar-collapsed .nav-label,
  .app.sidebar-collapsed .nav-group-label,
  .app.sidebar-collapsed .sidebar-bottom {
    display: none;
  }

  .app.sidebar-collapsed .nav-button {
    justify-content: center;
    gap: 0;
    padding-right: 5px;
    padding-left: 5px;
  }

  .app.sidebar-collapsed .nav-button > span:not(.nav-icon) {
    display: none;
  }
}

@media (max-width: 900px) {
  .nav-group-label {
    display: none;
  }

  .sidebar-toggle-button {
    display: none !important;
  }

  .sidebar-settings-button {
    width: 36px;
    min-height: 36px;
    padding: 0;
  }

  .theme-settings-button {
    width: 36px;
    min-height: 36px;
    padding: 0;
  }

  .sidebar-settings-button > span:last-child,
  .theme-settings-button > span:last-child {
    display: none;
  }

  .lab-theme-popover {
    top: auto !important;
    right: 10px !important;
    bottom: 10px !important;
    left: 10px !important;
    width: auto;
  }

  .sidebar-preferences-modal {
    place-items: end center;
    padding: 10px;
  }

  .sidebar-preferences-card {
    max-height: calc(100vh - 20px);
    border-radius: 20px 20px 14px 14px;
  }

  .sidebar-preferences-head {
    padding: 18px 18px 14px;
  }

  .sidebar-preferences-body {
    padding: 12px;
  }

  .sidebar-preferences-foot {
    align-items: flex-start;
    flex-direction: column;
    padding: 12px 18px 16px;
  }

  .sidebar-preferences-foot-actions {
    width: 100%;
  }

  .sidebar-preferences-foot-actions button {
    flex: 1;
  }
}
    /* V0.5 version-center iteration plans. */
    .vc-plan-section { margin-top: 18px; padding: 22px; border: 1px solid rgba(92,73,60,.11); border-radius: 22px; background: rgba(255,255,255,.52); box-shadow: 0 10px 28px rgba(74,53,38,.045); }
    .vc-section-head, .vc-modal-head, .vc-image-section-head, .vc-form-actions, .vc-plan-card-head, .vc-plan-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
    .vc-section-head { align-items: flex-start; }
    .vc-section-head h2, .vc-section-head h3, .vc-modal-head h2, .vc-image-section h3 { margin: 2px 0 0; color: var(--ink); font-family: var(--font-serif); font-weight: 650; }
    .vc-section-head h2 { font-size: 25px; }
    .vc-section-head h3 { font-size: 18px; }
    .vc-section-head p { max-width: 680px; margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
    .vc-kicker { display: block; color: var(--rust); font-size: 10px; font-weight: 800; letter-spacing: .16em; }
    .vc-muted, .vc-save-hint, .vc-image-section-head p { color: var(--muted); font-size: 11px; }
    .vc-summary-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; margin: 18px 0 12px; }
    .vc-summary-card { min-height: 92px; padding: 13px; border: 1px solid rgba(92,73,60,.09); border-radius: 15px; background: rgba(255,255,255,.66); }
    .vc-summary-card small { color: var(--muted); font-size: 10px; font-weight: 750; }
    .vc-summary-card strong { display: block; margin: 8px 0 3px; color: var(--rust-dark); font-family: var(--font-serif); font-size: 26px; line-height: 1; }
    .vc-summary-card p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
    .vc-toolbar { display: flex; align-items: flex-end; gap: 10px; margin: 12px 0 18px; padding: 11px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.54); }
    .vc-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; color: var(--muted); font-size: 11px; font-weight: 700; }
    .vc-field input, .vc-field select, .vc-field textarea { width: 100%; min-height: 40px; padding: 9px 11px; border: 1px solid rgba(92,73,60,.17); border-radius: 10px; outline: none; color: var(--ink); background: rgba(255,255,255,.82); font: inherit; font-size: 13px; font-weight: 500; }
    .vc-field textarea { min-height: 82px; resize: vertical; line-height: 1.55; }
    .vc-field input:focus, .vc-field select:focus, .vc-field textarea:focus { border-color: rgba(173,79,47,.6); box-shadow: 0 0 0 3px rgba(173,79,47,.1); }
    .vc-search { flex: 1; }
    .vc-list-head { align-items: center; margin: 4px 0 10px; }
    .vc-plan-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
    .vc-plan-card { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.72); box-shadow: 0 8px 22px rgba(74,53,38,.04); }
    .vc-plan-card.is-done { opacity: .72; }
    .vc-plan-card-head { align-items: flex-start; }
    .vc-plan-card-head h4 { margin: 3px 0 5px; color: var(--ink); font-family: var(--font-serif); font-size: 18px; line-height: 1.25; }
    .vc-plan-meta { display: flex; flex-wrap: wrap; gap: 6px; color: var(--muted); font-size: 10px; }
    .vc-status, .vc-priority, .vc-chip { display: inline-flex; align-items: center; min-width: max-content; padding: 5px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; }
    .vc-status { color: #765342; background: #eee3d9; }
    .vc-status.planned { color: #8a6828; background: #f5e9c8; }
    .vc-status.doing { color: #8a4a2c; background: #f5ddcf; }
    .vc-status.done { color: #4f7154; background: #e7efe0; }
    .vc-priority.high { color: #a44c35; background: #f6ddd3; }
    .vc-priority.normal { color: #765342; background: #eee3d9; }
    .vc-priority.low { color: #577079; background: #e4eeee; }
    .vc-plan-copy { margin: 13px 0 8px; color: var(--ink-soft); font-size: 12px; line-height: 1.65; }
    .vc-plan-detail { display: grid; gap: 6px; margin: 10px 0; }
    .vc-plan-detail p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
    .vc-plan-detail b { color: var(--ink-soft); font-size: 10px; }
    .vc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
    .vc-chip { color: var(--ink-soft); background: rgba(92,73,60,.07); font-weight: 650; }
    .vc-plan-images { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; margin: 12px 0 2px; }
    .vc-plan-images img { display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: 9px; object-fit: cover; background: #efe6dc; }
    .vc-plan-card-actions { justify-content: flex-end; flex-wrap: wrap; margin-top: 13px; padding-top: 10px; border-top: 1px solid rgba(92,73,60,.08); }
    .vc-plan-card-actions button { border: 0; color: var(--rust-dark); background: transparent; font-size: 11px; font-weight: 750; cursor: pointer; }
    .vc-plan-card-actions .vc-danger { color: #a54d3e; }
    .vc-empty { grid-column: 1 / -1; padding: 35px 18px; border: 1px dashed rgba(92,73,60,.18); border-radius: 16px; color: var(--muted); text-align: center; font-size: 12px; }
    .vc-modal[hidden] { display: none; }
    .vc-modal { position: fixed; z-index: 125; inset: 0; width: 100vw; height: 100vh; display: grid; place-items: center; padding: 20px; }
    .vc-modal-backdrop { position: absolute; inset: 0; background: rgba(50,37,28,.44); backdrop-filter: blur(6px); }
    .vc-modal-card { position: relative; width: min(820px,100%); max-height: calc(100vh - 40px); padding: 21px; overflow-y: auto; border: 1px solid rgba(255,255,255,.58); border-radius: 22px; background: #fbf7f0; box-shadow: 0 30px 80px rgba(45,32,23,.25); }
    .vc-close { width: 34px; height: 34px; border: 0; border-radius: 50%; color: var(--muted); background: rgba(92,73,60,.08); font-size: 20px; cursor: pointer; }
    .vc-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; margin-top: 18px; }
    .vc-span-2 { grid-column: span 2; }
    .vc-image-section { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(92,73,60,.1); }
    .vc-image-section-head { align-items: flex-start; margin-bottom: 10px; }
    .vc-image-section-head h3 { font-size: 15px; }
    .vc-image-section-head p { margin: 5px 0 0; }
    .vc-image-count { color: var(--rust); font-size: 11px; font-weight: 800; }
    .vc-dropzone { display: grid; justify-items: center; gap: 4px; padding: 21px 16px; border: 1px dashed rgba(173,79,47,.36); border-radius: 15px; color: var(--ink-soft); background: rgba(255,250,242,.78); text-align: center; cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
    .vc-dropzone:hover, .vc-dropzone.is-dragging { border-color: var(--rust); background: #fff7ed; transform: translateY(-1px); }
    .vc-dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
    .vc-dropzone strong { font-size: 13px; }
    .vc-dropzone small { color: var(--muted); font-size: 10px; }
    .vc-drop-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff8ee; background: var(--rust); font-size: 22px; line-height: 1; }
    .vc-image-preview { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; margin-top: 11px; }
    .vc-preview-item { position: relative; min-width: 0; }
    .vc-preview-item img { display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: 10px; object-fit: cover; background: #efe6dc; }
    .vc-preview-item button { position: absolute; top: 5px; right: 5px; width: 25px; height: 25px; border: 0; border-radius: 50%; color: #fff; background: rgba(43,31,24,.68); font-size: 16px; line-height: 1; cursor: pointer; }
    .vc-form-actions { justify-content: flex-end; flex-wrap: wrap; margin-top: 18px; }
    .vc-save-hint { margin-right: auto; }
    .release-next { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 18px; align-items: center; margin-top: 14px; padding: 14px 16px; border: 1px solid rgba(173,79,47,.14); border-radius: 15px; background: rgba(255,251,244,.62); }
    .release-next small { color: var(--rust); font-size: 10px; font-weight: 800; letter-spacing: .14em; }
    .release-next strong { display: block; margin-top: 5px; color: var(--ink); font-family: var(--font-serif); font-size: 17px; }
    .release-next p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
    .release-next-points { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
    .release-next-points span { padding: 6px 9px; border-radius: 999px; color: var(--ink-soft); background: rgba(92,73,60,.07); font-size: 10px; font-weight: 700; }
    @media (max-width: 760px) {
      .vc-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
      .vc-plan-list { grid-template-columns: 1fr; }
      .vc-toolbar { align-items: stretch; flex-direction: column; }
      .vc-form-grid { grid-template-columns: 1fr; }
      .vc-span-2 { grid-column: 1; }
      .release-next { grid-template-columns: 1fr; }
      .release-next-points { justify-content: flex-start; }
    }
    @media (max-width: 480px) {
      .vc-plan-section { padding: 16px; }
      .vc-section-head { align-items: flex-start; flex-direction: column; }
      .vc-modal { padding: 8px; }
      .vc-modal-card { max-height: calc(100vh - 16px); padding: 16px; border-radius: 17px; }
      .vc-image-preview, .vc-plan-images { grid-template-columns: repeat(3,minmax(0,1fr)); }
      .vc-save-hint { width: 100%; margin-right: 0; }
    }
/* Shared recipe-tool workbench view. */
    .recipe-tools-workbench-header { align-items: flex-end; }

    .recipe-tools-workbench-jump-nav {
      display: none;
    }

    .recipe-tools-workbench-scope {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 20px;
      align-items: center;
      margin: 20px 0 18px;
      padding: 16px 18px;
      border: 1px solid rgba(181, 78, 42, .18);
      border-left: 4px solid rgba(181, 78, 42, .82);
      border-radius: 15px;
      background: linear-gradient(135deg, rgba(255, 247, 238, .92), rgba(255, 253, 249, .76));
    }

    .recipe-tools-workbench-scope-title {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 5px;
    }

    .recipe-tools-workbench-scope-title h2 {
      margin: 0;
      color: var(--ink);
      font-size: 19px;
      line-height: 1.25;
    }

    .recipe-tools-workbench-scope-main p {
      max-width: 820px;
      margin: 7px 0 0;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.65;
    }

    .recipe-tools-workbench-readonly,
    .recipe-tools-workbench-workspace-badge,
    .recipe-tool-workbench-role-badge {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      white-space: nowrap;
    }

    .recipe-tools-workbench-readonly {
      border: 1px solid rgba(181, 78, 42, .22);
      background: rgba(255, 253, 249, .76);
      color: var(--rust);
      padding: 4px 7px;
      font-size: 10px;
      font-weight: 800;
    }

    .recipe-tools-workbench-scope-flow {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 7px;
      color: #8c624c;
      font-size: 10px;
      font-weight: 800;
      white-space: nowrap;
    }

    .recipe-tools-workbench-scope-flow span {
      padding: 7px 9px;
      border: 1px solid rgba(181, 78, 42, .15);
      border-radius: 9px;
      background: rgba(255, 253, 249, .7);
    }

    .recipe-tools-workbench-scope-flow i {
      color: rgba(181, 78, 42, .7);
      font-style: normal;
      font-size: 14px;
    }

    .recipe-tools-workbench-recommendations {
      margin: 0 0 18px;
      padding: 18px;
      border: 1px solid rgba(181, 78, 42, .16);
      border-radius: 18px;
      background: linear-gradient(145deg, rgba(255, 250, 244, .92), rgba(248, 237, 225, .52));
    }

    .recipe-tools-workbench-recommendation-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 190px;
      align-items: end;
      gap: 18px;
    }

    .recipe-tools-workbench-recommendation-head h2 {
      margin: 6px 0 5px;
      color: var(--ink);
      font-size: 21px;
      line-height: 1.25;
    }

    .recipe-tools-workbench-recommendation-head p {
      margin: 0;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.6;
    }

    .recipe-tools-workbench-recommendation-select {
      display: grid;
      gap: 5px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
    }

    .recipe-tools-workbench-recommendation-select select {
      width: 100%;
      min-height: 38px;
      border: 1px solid #d9cabb;
      border-radius: 11px;
      background: rgba(255, 253, 249, .96);
      color: var(--ink);
      padding: 8px 11px;
      font: inherit;
      font-size: 12px;
      font-weight: 700;
    }

    .recipe-tools-workbench-recommendation-select select:focus-visible {
      border-color: rgba(181, 78, 42, .56);
      outline: 3px solid rgba(181, 78, 42, .1);
    }

    .recipe-tools-workbench-recommendation-toggle-row {
      display: flex;
      justify-content: flex-end;
      margin-top: 10px;
    }

    .recipe-tools-workbench-recommendation-toggle {
      border: 0;
      background: transparent;
      color: var(--rust);
      padding: 4px 0;
      font: inherit;
      font-size: 11px;
      font-weight: 800;
      cursor: pointer;
    }

    .recipe-tools-workbench-recommendation-toggle::after {
      display: inline-block;
      margin-left: 5px;
      content: "⌄";
      font-size: 14px;
      line-height: 10px;
      transition: transform .18s ease;
    }

    .recipe-tools-workbench-recommendations[data-mobile-collapsed="false"] .recipe-tools-workbench-recommendation-toggle::after {
      transform: rotate(180deg);
    }

    .recipe-tools-workbench-recommendation-toggle:hover,
    .recipe-tools-workbench-recommendation-toggle:focus-visible {
      color: #8f3f24;
      outline: 3px solid rgba(181, 78, 42, .1);
      outline-offset: 2px;
    }

    .recipe-tools-workbench-recommendation-body { margin-top: 2px; }

    @media (max-width: 720px) {
      .recipe-tools-workbench-recommendations[data-mobile-collapsed="true"] .recipe-tools-workbench-recommendation-body {
        display: none;
      }

      .recipe-tools-workbench-recommendations[data-mobile-collapsed="true"] .recipe-tools-workbench-recommendation-toggle-row {
        margin-top: 6px;
      }
    }

    .recipe-tools-workbench-recommendation-summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin: 14px 0 11px;
      padding: 10px 12px;
      border: 1px solid #eadbcd;
      border-radius: 12px;
      background: rgba(255, 253, 249, .7);
    }

    .recipe-tools-workbench-recommendation-summary > div {
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .recipe-tools-workbench-recommendation-summary strong { color: var(--ink); font-size: 13px; }
    .recipe-tools-workbench-recommendation-summary span,
    .recipe-tools-workbench-recommendation-summary small { color: var(--muted); font-size: 10px; line-height: 1.4; }
    .recipe-tools-workbench-recommendation-summary small { color: #896a55; }
    .recipe-tools-workbench-recommendation-ready { color: #6b805e !important; font-weight: 800; white-space: nowrap; }

    .recipe-tools-workbench-recommendation-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 9px;
    }

    .recipe-tools-workbench-recommendation {
      display: grid;
      gap: 10px;
      min-width: 0;
      padding: 11px;
      border: 1px solid #e7dace;
      border-radius: 14px;
      background: rgba(255, 253, 249, .88);
    }

    .recipe-tools-workbench-recommendation.is-missing {
      border-style: dashed;
      background: rgba(255, 248, 239, .68);
    }

    .recipe-tools-workbench-recommendation-main {
      display: grid;
      grid-template-columns: 45px minmax(0, 1fr);
      gap: 9px;
      align-items: start;
    }

    .recipe-tools-workbench-recommendation-image {
      display: grid;
      place-items: center;
      width: 45px;
      height: 45px;
      overflow: hidden;
      border-radius: 11px;
      background: linear-gradient(145deg, #f1e7da, #faf6ef);
      color: #a37f65;
      font-family: Georgia, serif;
      font-size: 21px;
    }

    .recipe-tools-workbench-recommendation-image img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
      padding: 4px;
    }

    .recipe-tools-workbench-recommendation-title {
      display: flex;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: 5px;
    }

    .recipe-tools-workbench-recommendation-title strong {
      overflow-wrap: anywhere;
      color: var(--ink);
      font-size: 13px;
      line-height: 1.3;
    }

    .recipe-tools-workbench-recommendation-title > span {
      border-radius: 999px;
      background: #f7f0e8;
      color: #866851;
      padding: 3px 5px;
      font-size: 9px;
      font-weight: 800;
      white-space: nowrap;
    }

    .recipe-tools-workbench-recommendation-main p {
      min-height: 2.8em;
      margin: 5px 0 0;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.4;
    }

    .recipe-tools-workbench-recommendation-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 6px;
    }

    .recipe-tools-workbench-recommendation-meta span {
      border-radius: 999px;
      background: #f4f0ea;
      color: #806550;
      padding: 3px 6px;
      font-size: 9px;
      font-weight: 800;
    }

    .recipe-tools-workbench-recommendation-meta span.is-missing {
      background: #f8dfca;
      color: #9a4f2f;
    }

    .recipe-tools-workbench-recommendation-meta span.is-ready {
      background: #e9f0e3;
      color: #5f7654;
    }

    .recipe-tools-workbench-recommendation-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 7px;
      padding-top: 8px;
      border-top: 1px solid #eee4d9;
    }

    .recipe-tools-workbench-recommendation-action {
      min-height: 29px;
      border: 1px solid #d8c4b2;
      border-radius: 9px;
      background: #fff;
      color: #6e513c;
      padding: 5px 8px;
      font: inherit;
      font-size: 10px;
      font-weight: 800;
      cursor: pointer;
    }

    .recipe-tools-workbench-recommendation-action.is-add {
      border-color: rgba(181, 78, 42, .24);
      background: #fff3e8;
      color: var(--rust);
    }

    .recipe-tools-workbench-recommendation-action:hover,
    .recipe-tools-workbench-recommendation-action:focus-visible {
      border-color: rgba(181, 78, 42, .56);
      outline: 3px solid rgba(181, 78, 42, .1);
    }

    .recipe-tools-workbench-recommendation-footer small {
      overflow: hidden;
      color: var(--muted);
      font-size: 9px;
      text-align: right;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .recipe-tools-workbench-summary {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      margin: 18px 0 15px;
    }

    .recipe-tools-workbench-summary-card {
      display: block;
      width: 100%;
      min-height: 96px;
      padding: 14px 15px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: rgba(255, 253, 249, .78);
      color: inherit;
      font: inherit;
      text-align: left;
      box-shadow: 0 8px 22px rgba(65, 48, 34, .035);
      cursor: pointer;
      transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    }

    .recipe-tools-workbench-summary-card:hover,
    .recipe-tools-workbench-summary-card:focus-visible,
    .recipe-tools-workbench-summary-card.is-active {
      border-color: rgba(181, 78, 42, .42);
      box-shadow: 0 11px 25px rgba(125, 74, 42, .08);
      outline: none;
      transform: translateY(-1px);
    }

    .recipe-tools-workbench-summary-card small,
    .recipe-tools-workbench-summary-card p {
      display: block;
      color: var(--muted);
      font-size: 11px;
    }

    .recipe-tools-workbench-summary-card strong {
      display: block;
      margin: 7px 0 4px;
      color: var(--ink);
      font-size: 26px;
      line-height: 1;
    }

    .recipe-tools-workbench-summary-card p { margin: 0; line-height: 1.5; }

    .recipe-tools-workbench-conflict-alert {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin: 0 0 16px;
      padding: 14px 16px;
      border: 1px solid rgba(181, 78, 42, .28);
      border-radius: 16px;
      background: linear-gradient(135deg, rgba(255, 241, 228, .96), rgba(255, 250, 244, .94));
      box-shadow: 0 8px 22px rgba(125, 74, 42, .05);
    }

    .recipe-tools-workbench-conflict-alert[hidden] { display: none; }

    .recipe-tools-workbench-conflict-alert strong {
      display: block;
      margin-top: 5px;
      color: var(--ink);
      font-size: 14px;
    }

    .recipe-tools-workbench-conflict-alert p {
      margin: 5px 0 0;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.5;
    }

    .recipe-tools-workbench-toolbar {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 150px 170px auto;
      align-items: end;
      gap: 10px;
      margin-bottom: 18px;
      padding: 13px 15px;
      border: 1px solid rgba(181, 78, 42, .15);
      border-radius: 16px;
      background: rgba(248, 234, 220, .52);
    }

    .recipe-tools-workbench-toolbar-main,
    .recipe-tools-workbench-toolbar-options {
      display: contents;
    }

    .recipe-tools-workbench-filter-toggle {
      display: none;
    }

    .recipe-tools-workbench-search,
    .recipe-tools-workbench-filter {
      display: grid;
      gap: 5px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
    }

    .recipe-tools-workbench-search,
    .recipe-tools-workbench-filter { min-width: 0; }

    .recipe-tools-workbench-search input,
    .recipe-tools-workbench-filter select {
      width: 100%;
      min-height: 38px;
      border: 1px solid #d9cabb;
      border-radius: 11px;
      background: rgba(255, 253, 249, .96);
      color: var(--ink);
      padding: 8px 11px;
      font: inherit;
      font-size: 13px;
      font-weight: 500;
    }

    .recipe-tools-workbench-search input:focus,
    .recipe-tools-workbench-filter select:focus,
    .recipe-tool-workbench-fields input:focus,
    .recipe-tool-workbench-fields select:focus,
    .recipe-tool-workbench-fields textarea:focus {
      border-color: rgba(181, 78, 42, .56);
      outline: 3px solid rgba(181, 78, 42, .1);
    }

    .recipe-tools-workbench-count {
      min-width: 112px;
      margin: 0 0 9px;
      color: var(--muted);
      font-size: 11px;
      text-align: right;
    }

    .recipe-tools-workbench-library {
      padding: 20px;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: rgba(255, 253, 249, .58);
    }

    .recipe-tools-workbench-library-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 16px;
    }

    .recipe-tools-workbench-kicker {
      color: var(--rust);
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .13em;
    }

    .recipe-tools-workbench-library-head h2 {
      margin: 6px 0 5px;
      font-size: 24px;
      line-height: 1.2;
    }

    .recipe-tools-workbench-library-head p {
      margin: 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.6;
    }

    .recipe-tools-workbench-library-title-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
    }

    .recipe-tools-workbench-library-title-row h2 { margin-right: 2px; }

    .recipe-tools-workbench-workspace-badge {
      background: #f2eadf;
      color: #775a43;
      padding: 4px 7px;
      font-size: 10px;
      font-weight: 800;
    }

    .recipe-tools-workbench-library-key {
      display: grid;
      justify-items: end;
      gap: 5px;
      min-width: 150px;
      padding: 9px 11px;
      border: 1px solid #e8d9ca;
      border-radius: 11px;
      background: rgba(255, 253, 249, .72);
      color: var(--muted);
      font-size: 10px;
      line-height: 1.45;
      text-align: right;
    }

    .recipe-tools-workbench-library-key strong { color: var(--ink-soft); font-size: 11px; }

    .recipe-tools-workbench-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 13px;
      align-items: start;
    }

    .recipe-tool-workbench-item {
      display: grid;
      grid-template-rows: auto auto auto;
      align-content: start;
      gap: 13px;
      min-width: 0;
      padding: 13px;
      border: 1px solid #e2d7ca;
      border-radius: 17px;
      background: #fffdfa;
      box-shadow: 0 7px 19px rgba(65, 48, 34, .035);
      cursor: pointer;
      transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    }

    .recipe-tool-workbench-item[data-recipe-tool-workbench-detail]:hover,
    .recipe-tool-workbench-item[data-recipe-tool-workbench-detail]:focus-visible {
      border-color: rgba(181, 78, 42, .42);
      box-shadow: 0 12px 26px rgba(125, 74, 42, .1);
      outline: none;
      transform: translateY(-1px);
    }

    .recipe-tool-workbench-item.is-conflict {
      border-color: rgba(181, 78, 42, .45);
      background: linear-gradient(145deg, #fff8f0, #fffdfa);
    }

    .recipe-tool-workbench-item-copy h3 {
      display: flex;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: 6px;
    }

    .recipe-tool-workbench-conflict-badge {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      background: #f8dfca;
      color: #9a4f2f;
      padding: 3px 6px;
      font-size: 9px;
      line-height: 1.2;
      white-space: nowrap;
    }

    .recipe-tool-workbench-attention-badge {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      background: #fff0d9;
      color: #956536;
      padding: 3px 6px;
      font-size: 9px;
      line-height: 1.2;
      white-space: nowrap;
    }

    .recipe-tool-workbench-example-badge,
    .recipe-tool-workbench-role-badge {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      padding: 3px 6px;
      font-size: 9px;
      line-height: 1.2;
      white-space: nowrap;
    }

    .recipe-tool-workbench-example-badge {
      border: 1px solid rgba(181, 78, 42, .18);
      background: #fff3e8;
      color: var(--rust);
      font-weight: 800;
    }

    .recipe-tool-workbench-role-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-bottom: 6px;
    }

    .recipe-tool-workbench-role-badge {
      border: 1px solid #e9ddd0;
      background: #f7f1e9;
      color: #806550;
      font-weight: 800;
    }

    .recipe-tool-workbench-role-badge.is-category {
      border-color: rgba(181, 78, 42, .17);
      background: #fbefe4;
      color: #8b4e35;
    }

    .recipe-tool-workbench-item-head {
      display: grid;
      grid-template-columns: 64px minmax(0, 1fr);
      gap: 11px;
      align-items: start;
    }

    .recipe-tool-workbench-image {
      display: grid;
      place-items: center;
      width: 64px;
      height: 64px;
      overflow: hidden;
      border-radius: 14px;
      background: linear-gradient(145deg, #f1e7da, #faf6ef);
      color: #a37f65;
      font-family: Georgia, serif;
      font-size: 28px;
    }

    .recipe-tool-workbench-image img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
      padding: 5px;
    }

    .recipe-tool-workbench-item-copy { min-width: 0; }

    .recipe-tool-workbench-item-copy h3 {
      margin: 2px 0 5px;
      color: var(--ink);
      font-size: 16px;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }

    .recipe-tool-workbench-item-copy p {
      display: -webkit-box;
      min-height: 2.9em;
      margin: 0;
      overflow: hidden;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.45;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .recipe-tool-workbench-usage {
      display: inline-flex;
      margin-top: 7px;
      border-radius: 999px;
      background: #f2eadf;
      color: #775a43;
      padding: 4px 7px;
      font-size: 10px;
      font-weight: 800;
    }

    .recipe-tool-workbench-links {
      min-height: 0;
      padding-top: 10px;
      border-top: 1px solid #eee4d9;
    }

    .recipe-tool-workbench-links-label {
      display: block;
      margin-bottom: 7px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 800;
    }

    .recipe-tool-workbench-recipe-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }

    .recipe-tool-workbench-recipe-chip,
    .recipe-tool-workbench-unlinked {
      display: inline-flex;
      align-items: center;
      max-width: 100%;
      border-radius: 999px;
      padding: 5px 8px;
      font-size: 10px;
      line-height: 1.2;
    }

    .recipe-tool-workbench-recipe-chip {
      overflow: hidden;
      border: 1px solid rgba(181, 78, 42, .17);
      background: #fbefe4;
      color: #8b4e35;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
    }

    .recipe-tool-workbench-recipe-chip:hover,
    .recipe-tool-workbench-recipe-chip:focus-visible {
      border-color: rgba(181, 78, 42, .45);
      background: #f7dfcf;
      outline: none;
    }

    .recipe-tool-workbench-recipe-chip-more {
      border-style: dashed;
      background: #fff9f3;
      color: #8f6b54;
      cursor: default;
    }

    .recipe-tool-workbench-recipe-chip-mobile-more {
      display: none;
    }

    .recipe-tool-workbench-unlinked {
      background: #f4f0ea;
      color: var(--muted);
    }

    .recipe-tool-workbench-item-actions {
      display: flex;
      justify-content: flex-end;
      gap: 6px;
    }

    .recipe-tool-workbench-item-actions button {
      min-height: 30px;
      border-radius: 9px;
      padding: 6px 10px;
      font: inherit;
      font-size: 11px;
      font-weight: 800;
      cursor: pointer;
    }

    .recipe-tool-workbench-edit {
      border: 1px solid #d8c4b2;
      background: #fff;
      color: #6e513c;
    }

    .recipe-tool-workbench-delete {
      border: 0;
      background: transparent;
      color: #a46c55;
    }

    .recipe-tool-workbench-detail-action {
      margin-right: auto;
      border: 0;
      background: transparent;
      color: var(--rust);
    }

    .recipe-tool-workbench-empty {
      display: grid;
      place-items: center;
      min-height: 230px;
      grid-column: 1 / -1;
      border: 1px dashed #d8c5b3;
      border-radius: 16px;
      background: linear-gradient(145deg, rgba(248, 241, 232, .72), rgba(255, 253, 249, .9));
      padding: 28px;
      color: var(--muted);
      text-align: center;
    }

    .recipe-tool-workbench-empty strong {
      display: block;
      margin-bottom: 7px;
      color: var(--ink);
      font-size: 17px;
    }

    .recipe-tool-workbench-empty p { max-width: 430px; margin: 0; line-height: 1.7; }

    .recipe-tool-workbench-modal[hidden] { display: none; }

    .recipe-tool-workbench-modal {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: grid;
      place-items: center;
      padding: 20px;
    }

    .recipe-tool-workbench-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(52, 39, 31, .42);
      backdrop-filter: blur(3px);
    }

    .recipe-tool-workbench-card {
      position: relative;
      width: min(720px, 100%);
      max-height: min(760px, calc(100vh - 40px));
      overflow: auto;
      border: 1px solid #ddcdbc;
      border-radius: 22px;
      background: #fffaf4;
      box-shadow: 0 24px 65px rgba(52, 39, 31, .25);
      padding: 22px;
    }

    .recipe-tool-workbench-modal-head,
    .recipe-tool-workbench-links-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
    }

    .recipe-tool-workbench-modal-head { margin-bottom: 18px; }

    .recipe-tool-workbench-modal-head h2,
    .recipe-tool-workbench-links-head h3 {
      margin: 5px 0 0;
      color: var(--ink);
      font-size: 22px;
    }

    .recipe-tool-workbench-links-head h3 { font-size: 17px; }

    .recipe-tool-workbench-links-head p {
      margin: 5px 0 0;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.5;
    }

    .recipe-tool-workbench-links-head > span {
      color: var(--rust);
      font-size: 11px;
      font-weight: 800;
      white-space: nowrap;
    }

    .recipe-tool-workbench-close {
      width: 32px;
      height: 32px;
      border: 1px solid #dfd1c2;
      border-radius: 10px;
      background: #fff;
      color: var(--ink-soft);
      font-size: 20px;
      line-height: 1;
      cursor: pointer;
    }

    .recipe-tool-workbench-editor-grid {
      display: grid;
      grid-template-columns: 170px minmax(0, 1fr);
      gap: 18px;
    }

    .recipe-tool-workbench-image-editor {
      display: grid;
      align-content: start;
      gap: 8px;
    }

    .recipe-tool-workbench-image-preview {
      display: grid;
      place-items: center;
      width: 170px;
      height: 140px;
      overflow: hidden;
      border: 1px dashed #cdb39d;
      border-radius: 15px;
      background: #fffdf9;
      color: #a37f65;
      font-family: Georgia, serif;
      font-size: 30px;
    }

    .recipe-tool-workbench-image-preview img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
      padding: 7px;
    }

    .recipe-tool-workbench-image-editor small {
      color: var(--muted);
      font-size: 10px;
      line-height: 1.5;
    }

    .recipe-tool-workbench-clear-image {
      border: 0;
      background: transparent;
      color: #a46c55;
      font: inherit;
      font-size: 11px;
      cursor: pointer;
    }

    .recipe-tool-workbench-fields {
      display: grid;
      align-content: start;
      gap: 12px;
    }

    .recipe-tool-workbench-fields label {
      display: grid;
      gap: 6px;
      color: var(--ink-soft);
      font-size: 12px;
      font-weight: 800;
    }

    .recipe-tool-workbench-fields input,
    .recipe-tool-workbench-fields select,
    .recipe-tool-workbench-fields textarea {
      width: 100%;
      border: 1px solid #d9cabb;
      border-radius: 11px;
      background: #fffdfa;
      color: var(--ink);
      padding: 10px 12px;
      font: inherit;
      font-size: 13px;
      font-weight: 500;
      resize: vertical;
    }

    .recipe-tool-workbench-fields select { resize: none; }

    .recipe-tool-workbench-links {
      margin-top: 20px;
      padding-top: 17px;
      border-top: 1px solid #e6dbcf;
    }

    .recipe-tool-workbench-recipe-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 7px;
      max-height: 190px;
      overflow: auto;
      margin-top: 12px;
      padding: 2px;
    }

    .recipe-tool-workbench-recipe-option {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      min-width: 0;
      padding: 9px 10px;
      border: 1px solid #e2d7ca;
      border-radius: 11px;
      background: #fffdfa;
      color: var(--ink-soft);
      font-size: 11px;
      line-height: 1.4;
      cursor: pointer;
    }

    .recipe-tool-workbench-recipe-option:hover { border-color: rgba(181, 78, 42, .42); }

    .recipe-tool-workbench-recipe-option input {
      flex: 0 0 auto;
      margin-top: 2px;
      accent-color: var(--rust);
    }

    .recipe-tool-workbench-recipe-option span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .recipe-tool-workbench-form-actions {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 10px;
      align-items: center;
      margin-top: 20px;
    }

    .recipe-tool-workbench-detail-modal[hidden],
    .recipe-tool-workbench-conflict-modal[hidden] { display: none; }

    .recipe-tool-workbench-detail-card,
    .recipe-tool-workbench-conflict-card { width: min(820px, 100%); }

    .recipe-tool-workbench-detail-tool {
      display: grid;
      grid-template-columns: 116px minmax(0, 1fr);
      gap: 16px;
      align-items: center;
      padding: 14px;
      border: 1px solid #e7d9cb;
      border-radius: 15px;
      background: #fffdf9;
    }

    .recipe-tool-workbench-detail-image {
      display: grid;
      place-items: center;
      width: 116px;
      height: 100px;
      overflow: hidden;
      border-radius: 14px;
      background: linear-gradient(145deg, #f1e7da, #faf6ef);
      color: #a37f65;
      font-family: Georgia, serif;
      font-size: 34px;
    }

    .recipe-tool-workbench-detail-image img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
      padding: 7px;
    }

    .recipe-tool-workbench-detail-note {
      margin: 0 0 10px;
      color: var(--ink-soft);
      font-size: 13px;
      line-height: 1.65;
      white-space: pre-wrap;
    }

    .recipe-tool-workbench-detail-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .recipe-tool-workbench-detail-meta span {
      border-radius: 999px;
      background: #f2eadf;
      color: #775a43;
      padding: 5px 8px;
      font-size: 10px;
      font-weight: 800;
    }

    .recipe-tool-workbench-detail-conflict {
      margin-top: 14px;
      padding: 11px 13px;
      border: 1px solid rgba(181, 78, 42, .25);
      border-radius: 12px;
      background: #fff2e7;
      color: #8b4e35;
      font-size: 11px;
      line-height: 1.6;
    }

    .recipe-tool-workbench-detail-conflict[hidden] { display: none; }

    .recipe-tool-workbench-detail-conflict strong { display: block; margin-bottom: 3px; }

    .recipe-tool-workbench-detail-conflict-button {
      border: 0;
      background: transparent;
      color: var(--rust);
      padding: 0;
      font: inherit;
      font-size: 11px;
      font-weight: 900;
      text-decoration: underline;
      cursor: pointer;
    }

    .recipe-tool-workbench-detail-section {
      margin-top: 20px;
      padding-top: 17px;
      border-top: 1px solid #e6dbcf;
    }

    .recipe-tool-workbench-detail-recipes {
      display: grid;
      gap: 8px;
      max-height: 360px;
      overflow: auto;
      margin-top: 12px;
      padding: 2px;
    }

    .recipe-tool-workbench-detail-recipe {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 12px 13px;
      border: 1px solid #e2d7ca;
      border-radius: 13px;
      background: #fffdfa;
    }

    .recipe-tool-workbench-detail-recipe-main { min-width: 0; }

    .recipe-tool-workbench-detail-recipe-main strong {
      display: block;
      overflow: hidden;
      color: var(--ink);
      font-size: 14px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .recipe-tool-workbench-detail-recipe-main p {
      display: -webkit-box;
      margin: 5px 0 0;
      overflow: hidden;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.45;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .recipe-tool-workbench-detail-recipe-main small {
      display: block;
      margin-top: 5px;
      color: #9a806c;
      font-size: 10px;
    }

    .recipe-tool-workbench-detail-recipe button {
      min-height: 30px;
      border: 1px solid #d8c4b2;
      border-radius: 9px;
      background: #fff;
      color: #6e513c;
      padding: 6px 10px;
      font: inherit;
      font-size: 11px;
      font-weight: 800;
      cursor: pointer;
    }

    .recipe-tool-workbench-detail-recipe button:hover,
    .recipe-tool-workbench-detail-recipe button:focus-visible { border-color: var(--rust); outline: none; }

    .recipe-tool-workbench-detail-empty {
      padding: 20px;
      border: 1px dashed #d8c5b3;
      border-radius: 13px;
      color: var(--muted);
      font-size: 12px;
      text-align: center;
    }

    .recipe-tool-workbench-conflict-intro {
      margin: -4px 0 16px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.65;
    }

    .recipe-tool-workbench-conflict-target {
      display: grid;
      gap: 6px;
      color: var(--ink-soft);
      font-size: 12px;
      font-weight: 800;
    }

    .recipe-tool-workbench-conflict-target select {
      width: 100%;
      min-height: 40px;
      border: 1px solid #d9cabb;
      border-radius: 10px;
      background: #fffdfa;
      color: var(--ink);
      padding: 8px 10px;
      font: inherit;
      font-size: 13px;
      font-weight: 500;
    }

    .recipe-tool-workbench-conflict-target select:focus-visible { border-color: var(--rust); outline: 3px solid rgba(181, 78, 42, .1); }

    .recipe-tool-workbench-conflict-compare {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 16px;
    }

    .recipe-tool-workbench-conflict-pane {
      min-width: 0;
      padding: 12px;
      border: 1px solid #e2d7ca;
      border-radius: 13px;
      background: #fffdfa;
    }

    .recipe-tool-workbench-conflict-pane.is-source { background: #fff7ef; }

    .recipe-tool-workbench-conflict-pane > small {
      display: block;
      margin-bottom: 8px;
      color: var(--rust);
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .08em;
    }

    .recipe-tool-workbench-conflict-pane h3 {
      margin: 0;
      overflow-wrap: anywhere;
      color: var(--ink);
      font-size: 14px;
    }

    .recipe-tool-workbench-conflict-pane p {
      min-height: 2.8em;
      margin: 6px 0 0;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.45;
      white-space: pre-wrap;
    }

    .recipe-tool-workbench-conflict-pane ul {
      max-height: 105px;
      overflow: auto;
      margin: 9px 0 0;
      padding-left: 17px;
      color: #775a43;
      font-size: 10px;
      line-height: 1.65;
    }

    .recipe-tool-workbench-conflict-policy {
      display: grid;
      gap: 3px;
      margin-top: 12px;
      padding: 10px 12px;
      border-radius: 11px;
      background: #f5efe7;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.55;
    }

    .recipe-tool-workbench-conflict-policy strong { color: var(--ink-soft); font-size: 11px; }

    @media (max-width: 980px) {
      .recipe-tools-workbench-toolbar { grid-template-columns: minmax(0, 1fr) 145px 160px; }
      .recipe-tools-workbench-count { grid-column: 1 / -1; margin: 0; text-align: right; }
      .recipe-tools-workbench-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .recipe-tools-workbench-recommendation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 720px) {
      .recipe-tools-workbench-scope { grid-template-columns: 1fr; gap: 12px; }
      .recipe-tools-workbench-scope-flow { justify-content: flex-start; flex-wrap: wrap; white-space: normal; }
      .recipe-tools-workbench-recommendation-head { grid-template-columns: 1fr; gap: 12px; }
      .recipe-tools-workbench-recommendation-summary { align-items: flex-start; flex-direction: column; }
      .recipe-tools-workbench-recommendation-summary .secondary-button { width: 100%; }
      .recipe-tools-workbench-recommendation-grid { grid-template-columns: 1fr; }
      .recipe-tools-workbench-header { align-items: stretch; }
      .recipe-tools-workbench-header { display: grid; }
      .recipe-tools-workbench-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .recipe-tools-workbench-toolbar { grid-template-columns: 1fr; align-items: stretch; }
      .recipe-tools-workbench-search,
      .recipe-tools-workbench-filter { width: 100%; }
      .recipe-tools-workbench-count { grid-column: auto; margin: 0; text-align: left; }
      .recipe-tools-workbench-library-head { flex-direction: column; }
      .recipe-tools-workbench-library-key { justify-items: start; text-align: left; }
      .recipe-tools-workbench-library { padding: 15px; }
      .recipe-tools-workbench-grid { grid-template-columns: 1fr; }
      .recipe-tool-workbench-editor-grid { grid-template-columns: 1fr; }
      .recipe-tool-workbench-image-preview { width: 100%; height: 150px; }
      .recipe-tool-workbench-recipe-list { grid-template-columns: 1fr; }
      .recipe-tool-workbench-card { padding: 17px; }
      .recipe-tools-workbench-conflict-alert { align-items: stretch; flex-direction: column; }
      .recipe-tools-workbench-conflict-alert button { width: 100%; }
      .recipe-tool-workbench-detail-tool,
      .recipe-tool-workbench-conflict-compare { grid-template-columns: 1fr; }
      .recipe-tool-workbench-detail-image { width: 100%; height: 150px; }
    }

    @media (max-width: 420px) {
      .recipe-tools-workbench-summary { gap: 8px; }
      .recipe-tools-workbench-summary-card { min-height: 84px; padding: 12px; }
      .recipe-tools-workbench-summary-card strong { font-size: 22px; }
    }

    @media (max-width: 900px) {
      #tools.view.active {
        display: flex;
        flex-direction: column;
        padding-bottom: calc(96px + env(safe-area-inset-bottom));
      }

      #tools.view.active > .recipe-tools-workbench-header { order: 1; }
      #tools.view.active > .recipe-tools-workbench-summary { order: 2; }
      #tools.view.active > .recipe-tools-workbench-jump-nav { order: 3; }
      #tools.view.active > .recipe-tools-workbench-conflict-alert { order: 4; }
      #tools.view.active > .recipe-tools-workbench-toolbar { order: 5; }
      #tools.view.active > .recipe-tools-workbench-library { order: 6; }
      #tools.view.active > .recipe-tools-workbench-scope { order: 7; }
      #tools.view.active > .recipe-tools-workbench-recommendations { order: 8; }
      #tools.view.active > .recipe-tool-workbench-modal { order: 20; }

      #tools.view.active > .recipe-tools-workbench-header,
      #tools.view.active > .recipe-tools-workbench-summary,
      #tools.view.active > .recipe-tools-workbench-jump-nav,
      #tools.view.active > .recipe-tools-workbench-toolbar,
      #tools.view.active > .recipe-tools-workbench-library,
      #tools.view.active > .recipe-tools-workbench-scope,
      #tools.view.active > .recipe-tools-workbench-recommendations {
        scroll-margin-top: 14px;
      }

      .recipe-tools-workbench-jump-nav {
        display: flex;
        align-items: center;
        gap: 7px;
        overflow-x: auto;
        margin: -3px 0 15px;
        padding: 2px 1px 5px;
        scrollbar-width: none;
      }

      .recipe-tools-workbench-jump-nav::-webkit-scrollbar { display: none; }

      .recipe-tools-workbench-jump-nav a {
        flex: 0 0 auto;
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        border: 1px solid #e4d3c3;
        border-radius: 999px;
        background: rgba(255, 253, 249, .86);
        color: #775a43;
        padding: 7px 12px;
        font-size: 11px;
        font-weight: 800;
        text-decoration: none;
      }

      .recipe-tools-workbench-jump-nav a:focus-visible,
      .recipe-tools-workbench-jump-nav a:hover {
        border-color: rgba(181, 78, 42, .46);
        color: var(--rust);
        outline: 3px solid rgba(181, 78, 42, .1);
        outline-offset: 1px;
      }

      .recipe-tools-workbench-toolbar {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 10px;
        padding: 12px;
      }

      .recipe-tools-workbench-toolbar-main {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        gap: 8px;
      }

      .recipe-tools-workbench-toolbar-options {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      .recipe-tools-workbench-toolbar[data-mobile-collapsed="true"] .recipe-tools-workbench-toolbar-options {
        display: none;
      }

      .recipe-tools-workbench-filter-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        min-height: 38px;
        border: 1px solid #d9cabb;
        border-radius: 11px;
        background: rgba(255, 253, 249, .96);
        color: #775a43;
        padding: 8px 11px;
        font: inherit;
        font-size: 12px;
        font-weight: 800;
        cursor: pointer;
      }

      .recipe-tools-workbench-filter-toggle:focus-visible,
      .recipe-tools-workbench-filter-toggle:hover {
        border-color: rgba(181, 78, 42, .56);
        color: var(--rust);
        outline: 3px solid rgba(181, 78, 42, .1);
      }

      .recipe-tools-workbench-filter-count {
        display: inline-grid;
        place-items: center;
        min-width: 17px;
        min-height: 17px;
        border-radius: 999px;
        background: #f4dfd0;
        color: var(--rust);
        font-size: 10px;
        line-height: 1;
      }

      .recipe-tools-workbench-filter-count[hidden] { display: none; }

      .recipe-tools-workbench-count {
        grid-column: 1 / -1;
        min-width: 0;
        margin: 0;
        text-align: left;
      }

      .recipe-tools-workbench-scope {
        gap: 12px;
        margin-top: 14px;
        padding: 14px;
      }

      .recipe-tools-workbench-scope-main p {
        max-width: none;
        font-size: 11px;
      }

      .recipe-tools-workbench-scope-flow {
        justify-content: flex-start;
        gap: 4px;
        overflow-x: auto;
        padding-bottom: 2px;
        white-space: nowrap;
      }

      .recipe-tools-workbench-scope-flow span { padding: 6px 8px; }

      .recipe-tool-workbench-recipe-chips > .recipe-tool-workbench-recipe-chip:nth-child(n + 3):not(.recipe-tool-workbench-recipe-chip-more):not(.recipe-tool-workbench-recipe-chip-mobile-more),
      .recipe-tool-workbench-recipe-chips > .recipe-tool-workbench-recipe-chip-more {
        display: none;
      }

      .recipe-tool-workbench-recipe-chips > .recipe-tool-workbench-recipe-chip-mobile-more {
        display: inline-flex;
      }

      .recipe-tool-workbench-item-actions {
        flex-wrap: wrap;
      }

      .recipe-tool-workbench-item-actions button {
        min-height: 40px;
      }

      .recipe-tools-workbench-recommendations[data-mobile-collapsed="true"] .recipe-tools-workbench-recommendation-body {
        display: none;
      }

      .recipe-tools-workbench-recommendations[data-mobile-collapsed="true"] .recipe-tools-workbench-recommendation-toggle-row {
        margin-top: 6px;
      }
    }
/* V0.6 Markdown document library */
.document-library-page-header { align-items: flex-end; }
.document-library-mobile-title,
.document-library-mobile-back,
.document-library-detail-nav { display: none; }
.document-library-layout {
  --document-library-list-width: 34%;
  display: flex;
  align-items: stretch;
  min-width: 0;
}
.document-library-list-panel {
  flex: 0 0 var(--document-library-list-width);
  min-width: 270px;
  min-height: 650px;
  padding: 20px;
}
.document-library-splitter {
  position: relative;
  flex: 0 0 16px;
  min-height: 650px;
  cursor: col-resize;
  touch-action: none;
  outline: 0;
}
.document-library-splitter::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 50px;
  border-radius: 999px;
  background: rgba(173, 79, 47, .2);
  content: "";
  transform: translate(-50%, -50%);
  transition: width .18s ease, height .18s ease, background .18s ease;
}
.document-library-splitter:hover::before,
.document-library-splitter:focus-visible::before,
.document-library-layout.is-resizing .document-library-splitter::before {
  width: 6px;
  height: 76px;
  background: var(--rust);
}
body.document-library-resizing,
body.document-library-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}
.document-library-workspace {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 650px;
  padding: 24px 26px;
}
.document-library-panel-head,
.document-library-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.document-library-panel-head { margin-bottom: 18px; }
.document-library-editor-title { min-width: 0; }
.document-library-panel-head h2,
.document-library-editor-head h2,
.document-library-empty-state h2 {
  margin: 4px 0 0;
  color: var(--ink);
  font-family: "STSong", "SimSun", Georgia, serif;
}
.document-library-panel-head h2 { font-size: 27px; }
.document-library-editor-head h2 { font-size: 28px; line-height: 1.2; }
.document-library-title-button {
  max-width: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: text;
  font: inherit;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.document-library-title-button:hover,
.document-library-title-button:focus-visible {
  color: var(--rust-dark);
  outline: 0;
  text-decoration: underline;
  text-decoration-color: rgba(173, 79, 47, .42);
  text-underline-offset: 5px;
}
.document-library-title-input {
  box-sizing: border-box;
  width: min(100%, 680px);
  min-height: 48px;
  margin: 0;
  padding: 2px 0 5px;
  border: 0;
  border-bottom: 2px solid rgba(173, 79, 47, .42);
  border-radius: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font-family: "STSong", "SimSun", Georgia, serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
}
.document-library-title-input:focus { border-bottom-color: var(--rust); box-shadow: none; }
.document-library-title-input[hidden],
.document-library-title-button[hidden] { display: none !important; }
.document-library-kicker {
  color: var(--rust);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .2em;
}
.document-library-note {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
.document-library-save-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}
.document-library-save-status::before {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: #9b8777;
  content: "";
}
.document-library-save-status[data-status="synced"] { color: #5e8656; }
.document-library-save-status[data-status="synced"]::before { background: #5e8656; }
.document-library-save-status[data-status="syncing"],
.document-library-save-status[data-status="connecting"],
.document-library-save-status[data-status="queued"] { color: #9b6b36; }
.document-library-save-status[data-status="syncing"]::before,
.document-library-save-status[data-status="connecting"]::before,
.document-library-save-status[data-status="queued"]::before { background: #c69247; }
.document-library-save-status[data-status="dirty"] { color: #a45b35; }
.document-library-save-status[data-status="dirty"]::before { background: #c36b3f; }
.document-library-metadata {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}
.document-library-meta-separator { color: rgba(92, 73, 60, .42); }
.document-library-small-button {
  min-height: 34px;
  padding: 7px 11px;
  white-space: nowrap;
}
.document-library-search,
.document-library-field {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.document-library-list-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
  margin-bottom: 15px;
}
.document-library-search { min-width: 0; }
.document-library-sort { display: grid; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 700; }
.document-library-sort select {
  min-height: 42px;
  padding: 9px 28px 9px 10px;
  border: 1px solid rgba(83, 67, 49, .16);
  border-radius: 12px;
  color: var(--ink);
  background: rgba(255, 254, 250, .94);
  cursor: pointer;
  font: inherit;
  font-weight: 400;
}
.document-library-search input,
.document-library-field input,
.document-library-field textarea {
  width: 100%;
  border: 1px solid rgba(83, 67, 49, .16);
  border-radius: 12px;
  outline: 0;
  color: var(--ink);
  background: rgba(255, 254, 250, .94);
  font: inherit;
  font-weight: 400;
}
.document-library-search input,
.document-library-field input { min-height: 42px; padding: 9px 12px; }
.document-library-search input:focus,
.document-library-field input:focus,
.document-library-field textarea:focus {
  border-color: rgba(173, 79, 47, .44);
  box-shadow: var(--focus-ring);
}
.document-library-list {
  display: grid;
  gap: 8px;
  max-height: 540px;
  overflow-y: auto;
  padding-right: 2px;
}
.document-library-list-item {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid transparent;
  border-radius: 14px;
  color: var(--ink);
  background: rgba(255, 253, 248, .58);
  cursor: pointer;
  text-align: left;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.document-library-list-open {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.document-library-list-open:focus-visible { outline: 0; }
.document-library-list-open:focus-visible .document-library-list-copy strong { text-decoration: underline; text-underline-offset: 3px; }
.document-library-list-item:hover {
  border-color: rgba(173, 79, 47, .25);
  background: #fff;
  transform: translateX(2px);
}
.document-library-list-item.selected {
  border-color: rgba(173, 79, 47, .3);
  background: var(--pink-soft);
}
.document-library-list-mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px 11px 11px 4px;
  color: var(--rust-dark);
  background: rgba(255, 255, 255, .74);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .03em;
}
.document-library-list-item.selected .document-library-list-mark { color: #fffaf0; background: var(--rust); }
.document-library-list-copy { min-width: 0; display: grid; gap: 3px; }
.document-library-list-copy strong,
.document-library-list-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.document-library-list-copy strong { color: var(--ink); font-size: 12px; }
.document-library-pinned-mark { margin-right: 4px; color: var(--rust); font-size: .9em; }
.document-library-list-copy small { color: var(--muted); font-size: 10px; line-height: 1.45; }
.document-library-list-item time { color: var(--muted); font-size: 9px; white-space: nowrap; }
.document-library-list-tags { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.document-library-tag {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  max-width: 100%;
  padding: 2px 7px;
  overflow: hidden;
  border: 1px solid rgba(173, 79, 47, .16);
  border-radius: 999px;
  color: var(--rust-dark);
  background: rgba(250, 241, 230, .78);
  font-size: 9px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.document-library-pin-button {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  color: rgba(92, 73, 60, .45);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 18px;
  line-height: 1;
  touch-action: manipulation;
}
.document-library-pin-button:hover,
.document-library-pin-button:focus-visible { border-color: rgba(173, 79, 47, .2); color: var(--rust); background: rgba(250, 241, 230, .7); outline: 0; }
.document-library-pin-button[aria-pressed="true"] { color: var(--rust); background: var(--pink-soft); }
.document-library-list-empty {
  padding: 18px 10px;
  border: 1px dashed rgba(92, 73, 60, .18);
  border-radius: 14px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
  text-align: center;
}
.document-library-list-empty strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: 12px; }
.document-library-list-empty span { display: block; }
.document-library-empty-new { margin-top: 11px; min-height: 38px; }
.document-library-empty-state {
  min-height: 520px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 9px;
  padding: 34px;
  border: 1px dashed rgba(92, 73, 60, .18);
  border-radius: 18px;
  color: var(--muted);
  text-align: center;
}
.document-library-empty-state[hidden],
.document-library-editor[hidden],
.document-library-markdown-preview[hidden],
.document-library-edit-pane[hidden] { display: none !important; }
.document-library-empty-mark {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 17px 17px 17px 5px;
  color: #fffaf0;
  background: var(--rust);
  font-family: "STSong", "SimSun", Georgia, serif;
  font-size: 27px;
  box-shadow: 0 10px 22px rgba(173, 79, 47, .18);
}
.document-library-empty-state h2 { font-size: 26px; }
.document-library-empty-state p { max-width: 320px; margin: 0 0 8px; font-size: 12px; line-height: 1.7; }
.document-library-editor-head { margin-bottom: 22px; }
.document-library-editor-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}
.document-library-more { position: relative; display: none; }
.document-library-more-button { display: inline-flex; align-items: center; gap: 4px; }
.document-library-more-menu {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 30;
  min-width: 132px;
  padding: 6px;
  border: 1px solid rgba(92, 73, 60, .16);
  border-radius: 12px;
  background: color-mix(in srgb, var(--card) 97%, white);
  box-shadow: 0 12px 26px rgba(73, 49, 28, .14);
}
.document-library-more-menu[hidden] { display: none !important; }
.document-library-more-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  padding: 3px 6px 5px;
  border-bottom: 1px solid rgba(92, 73, 60, .1);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.document-library-more-stepper {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.document-library-more-stepper .document-library-font-size-button {
  width: 30px;
  height: 30px;
}
.document-library-more-stepper output {
  min-width: 38px;
  color: var(--rust-dark);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.document-library-mobile-mode-button {
  display: none;
  min-height: 36px;
  padding: 6px 9px;
  border: 0;
  border-radius: 9px;
  color: var(--rust-dark);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}
.document-library-mobile-mode-button:hover,
.document-library-mobile-mode-button:focus-visible { background: var(--pink-soft); outline: 0; }
.document-library-more-item {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  color: #a24f36;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  text-align: left;
}
.document-library-more-item:hover,
.document-library-more-item:focus-visible { background: rgba(196, 106, 72, .1); outline: 0; }
.document-library-font-size {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--muted);
  background: rgba(255, 253, 248, .72);
  font-size: 10px;
  white-space: nowrap;
}
.document-library-font-size-stepper {
  display: none;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid rgba(92, 73, 60, .1);
  border-radius: 9px;
  background: rgba(255, 253, 248, .78);
}
.document-library-font-size-button {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  color: var(--rust-dark);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  touch-action: manipulation;
}
.document-library-font-size-button:hover,
.document-library-font-size-button:focus-visible { background: var(--pink-soft); outline: 0; }
.document-library-font-size-button:disabled { color: var(--muted); cursor: not-allowed; opacity: .55; }
.document-library-font-size input { width: 86px; height: 18px; accent-color: var(--rust); cursor: ew-resize; }
.document-library-font-size output { min-width: 31px; color: var(--rust-dark); font-variant-numeric: tabular-nums; text-align: right; }
.document-library-mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255, 253, 248, .72);
}
.document-library-mode-button {
  min-height: 28px;
  padding: 4px 11px;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
}
.document-library-mode-button.active { color: var(--rust-dark); background: var(--pink-soft); }
.document-library-tags-field { margin-top: 15px; }
.document-library-field small { color: var(--muted); font-size: 10px; font-weight: 400; line-height: 1.45; }
.document-library-format-tools,
.document-library-format-more { margin-top: 8px; }
.document-library-format-tools > summary,
.document-library-format-more > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  color: var(--rust-dark);
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  list-style: none;
  user-select: none;
}
.document-library-format-tools > summary::-webkit-details-marker,
.document-library-format-more > summary::-webkit-details-marker { display: none; }
.document-library-format-tools > summary::before,
.document-library-format-more > summary::before {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(92, 73, 60, .18);
  border-radius: 50%;
  color: var(--rust);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
}
.document-library-format-tools[open] > summary::before,
.document-library-format-more[open] > summary::before { content: "−"; }
.document-library-format-tools > summary small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 400;
}
.document-library-format-tools > summary:focus-visible,
.document-library-format-more > summary:focus-visible { outline: 2px solid rgba(173, 79, 47, .35); outline-offset: 3px; }
.document-library-format-tools-body { padding-top: 2px; }
.document-library-format-more > summary { min-height: 28px; color: var(--muted); font-size: 10px; }
.document-library-format-more > summary::before { width: 17px; height: 17px; font-size: 13px; }
.document-library-markdown-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 1px;
}
.document-library-markdown-tool {
  min-height: 34px;
  padding: 5px 9px;
  border: 1px solid rgba(92, 73, 60, .14);
  border-radius: 9px;
  color: var(--rust-dark);
  background: rgba(255, 253, 248, .82);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  touch-action: manipulation;
}
.document-library-markdown-tool:hover,
.document-library-markdown-tool:focus-visible { border-color: rgba(173, 79, 47, .34); background: var(--pink-soft); outline: 0; }
.document-library-content-field { margin-top: 15px; }
.document-library-content-field textarea {
  min-height: 470px;
  resize: vertical;
  color: var(--ink);
  background: rgba(255, 255, 255, .74);
  font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  font-size: var(--document-library-editor-font-size, 14px);
  line-height: 1.75;
}
.document-library-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 9px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}
.document-library-form-footer span:first-child { color: var(--muted); }
.document-library-markdown-preview {
  min-height: 520px;
  padding: 28px 30px;
  overflow: auto;
  border: 1px solid rgba(92, 73, 60, .13);
  border-radius: 16px;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, .65);
  font-size: var(--document-library-editor-font-size, 14px);
  line-height: 1.85;
}
.document-library-markdown-preview > :first-child { margin-top: 0; }
.document-library-markdown-preview > :last-child { margin-bottom: 0; }
.document-library-markdown-preview h1,
.document-library-markdown-preview h2,
.document-library-markdown-preview h3 { margin: 1.35em 0 .55em; color: var(--ink); font-family: "STSong", "SimSun", Georgia, serif; line-height: 1.3; }
.document-library-markdown-preview h1 { font-size: 30px; }
.document-library-markdown-preview h2 { font-size: 24px; }
.document-library-markdown-preview h3 { font-size: 19px; }
.document-library-markdown-preview p { margin: .7em 0; }
.document-library-markdown-preview ul,
.document-library-markdown-preview ol { margin: .75em 0; padding-left: 1.55em; }
.document-library-markdown-preview li + li { margin-top: .25em; }
.document-library-markdown-preview blockquote { margin: 1em 0; padding: 9px 15px; border-left: 3px solid var(--rust); color: var(--muted); background: rgba(237, 216, 207, .34); }
.document-library-markdown-preview hr { margin: 1.6em 0; border: 0; border-top: 1px solid var(--line); }
.document-library-markdown-preview a { color: var(--rust); text-decoration: underline; text-decoration-color: rgba(173, 79, 47, .35); text-underline-offset: 2px; }
.document-library-markdown-preview code { padding: 2px 5px; border-radius: 5px; color: var(--rust-dark); background: rgba(228, 216, 201, .68); font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace; font-size: .9em; }
.document-library-markdown-preview pre { margin: 1em 0; padding: 14px 16px; overflow-x: auto; border-radius: 10px; color: #f8f0e6; background: #3b332d; line-height: 1.65; }
.document-library-markdown-preview pre code { padding: 0; color: inherit; background: transparent; font-size: 11px; }
.document-library-markdown-preview img { display: block; max-width: 100%; height: auto; margin: 1.1em auto; border-radius: 12px; }
.document-library-table-wrap { max-width: 100%; margin: 1.1em 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.document-library-markdown-preview table { width: 100%; min-width: 460px; border-collapse: collapse; font-size: .92em; line-height: 1.55; }
.document-library-markdown-preview th,
.document-library-markdown-preview td { padding: 9px 11px; border: 1px solid rgba(92, 73, 60, .14); text-align: left; vertical-align: top; }
.document-library-markdown-preview th { color: var(--ink); background: rgba(237, 216, 207, .3); font-weight: 800; }
.document-library-markdown-empty { color: var(--muted); font-style: italic; }

.recipe-tutorial-unlinked {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  padding: 18px 20px;
  border: 1px dashed rgba(173, 79, 47, .32);
  border-radius: 16px;
  background: rgba(250, 241, 230, .66);
}
.recipe-tutorial-unlinked strong { display: block; margin-top: 4px; color: var(--ink); font-size: 15px; }
.recipe-tutorial-unlinked p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.recipe-tutorial-linked { display: grid; gap: 14px; }
.recipe-tutorial-linked-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 4px 2px 0;
}
.recipe-tutorial-linked-head h3 { margin: 5px 0 4px; color: var(--ink); font-family: "STSong", "SimSun", Georgia, serif; font-size: 22px; }
.recipe-tutorial-linked-head p { margin: 0; color: var(--muted); font-size: 10px; }
.recipe-tutorial-linked-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; }
.recipe-tutorial-linked-actions button { min-height: 36px; }
.recipe-tutorial-markdown-preview { min-height: 340px; max-height: none; padding: 25px 28px; overflow: visible; }
.recipe-tutorial-embedded-stack { display: grid; gap: 16px; margin-top: 18px; }
.recipe-tutorial-embedded-block { min-width: 0; }
.recipe-tutorial-baking-block > .baking-parameters-panel {
  padding: 18px;
  border: 1px solid rgba(173, 79, 47, .16);
  border-radius: 16px;
  background: rgba(250, 241, 230, .54);
}
.recipe-tutorial-baking-block .baking-parameters-intro h3 { font-size: 22px; }
.recipe-tutorial-notes-block > .conclusion-editor { margin-top: 0; }

.document-library-recipe-relations {
  margin: 20px 0 0;
  padding: 13px 14px;
  border: 1px solid rgba(173, 79, 47, .18);
  border-radius: 14px;
  background: rgba(250, 241, 230, .58);
}
.document-library-recipe-relations[hidden] { display: none; }
.document-library-recipe-relations-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.document-library-recipe-relations-head span { color: var(--rust); font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.document-library-recipe-relations-head strong { color: var(--muted); font-size: 10px; font-weight: 700; }
.document-library-recipe-relations-list { display: flex; flex-wrap: wrap; gap: 7px; }
.document-library-recipe-relations-list button {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 46px;
  padding: 8px 11px;
  border: 1px solid rgba(92, 73, 60, .13);
  border-radius: 11px;
  color: var(--ink);
  background: rgba(255, 255, 255, .72);
  cursor: pointer;
  text-align: left;
}
.document-library-recipe-relations-list button:hover { border-color: rgba(173, 79, 47, .42); background: #fff; }
.document-library-recipe-relations-list button span { display: grid; gap: 2px; }
.document-library-recipe-relations-list button strong { font-size: 11px; }
.document-library-recipe-relations-list button small { color: var(--muted); font-size: 9px; }
.document-library-recipe-relations-list button em { color: var(--rust); font-size: 9px; font-style: normal; font-weight: 800; white-space: nowrap; }

.modal.recipe-tutorial-picker-modal { z-index: 2000; }
.recipe-tutorial-picker-panel { width: min(720px, calc(100vw - 32px)); max-height: min(760px, calc(100vh - 32px)); }
.recipe-tutorial-picker-body { display: grid; gap: 13px; min-height: 0; padding: 20px 24px 10px; overflow: hidden; }
.recipe-tutorial-picker-list { display: grid; gap: 8px; max-height: 470px; overflow: auto; padding-right: 3px; }
.recipe-tutorial-picker-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid rgba(92, 73, 60, .13);
  border-radius: 13px;
  color: var(--ink);
  background: rgba(255, 253, 248, .8);
  cursor: pointer;
  text-align: left;
}
.recipe-tutorial-picker-item:hover,
.recipe-tutorial-picker-item.is-current { border-color: rgba(173, 79, 47, .42); background: var(--pink-soft); }
.recipe-tutorial-picker-item > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.recipe-tutorial-picker-item strong,
.recipe-tutorial-picker-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recipe-tutorial-picker-item strong { font-size: 12px; }
.recipe-tutorial-picker-item small { color: var(--muted); font-size: 10px; }
.recipe-tutorial-picker-item em { color: var(--rust); font-size: 10px; font-style: normal; font-weight: 800; }
.recipe-tutorial-picker-empty { display: grid; place-items: center; gap: 5px; min-height: 180px; padding: 24px; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); text-align: center; }
.recipe-tutorial-picker-empty strong { color: var(--ink); font-size: 13px; }
.recipe-tutorial-picker-empty span { font-size: 10px; }
.recipe-tutorial-picker-actions { padding-top: 12px; }

.document-library-template-panel { width: min(560px, calc(100vw - 32px)); }
.document-library-template-note { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.document-library-template-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 18px 22px 22px; }
.document-library-template-card {
  min-height: 110px;
  display: grid;
  align-content: center;
  gap: 7px;
  padding: 16px;
  border: 1px solid rgba(92, 73, 60, .14);
  border-radius: 14px;
  color: var(--ink);
  background: rgba(255, 253, 248, .76);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.document-library-template-card:hover,
.document-library-template-card:focus-visible { border-color: rgba(173, 79, 47, .4); background: var(--pink-soft); outline: 0; transform: translateY(-1px); }
.document-library-template-card strong { color: var(--rust-dark); font-size: 15px; }
.document-library-template-card span { color: var(--muted); font-size: 11px; line-height: 1.55; }

.recipe-mobile-tutorial-note { display: grid; gap: 3px; margin-bottom: 10px; padding: 12px 14px; border-left: 4px solid var(--rust); border-radius: 0 13px 13px 0; background: color-mix(in srgb, var(--rust) 7%, var(--card)); }
.recipe-mobile-tutorial-note strong { color: var(--ink); font-size: 14px; }
.recipe-mobile-tutorial-note span { color: var(--muted); font-size: 10px; }
.recipe-mobile-tutorial-preview { min-height: 0; padding: 16px; overflow: visible; font-size: var(--reader-copy-size, 16px); line-height: 1.75; }
.recipe-mobile-tutorial-preview h1 { font-size: 24px; }
.recipe-mobile-tutorial-preview h2 { font-size: 21px; }
.recipe-mobile-tutorial-preview h3 { font-size: 18px; }

@media (max-width: 980px) {
  .document-library-layout { flex-direction: column; gap: 15px; }
  .document-library-list-panel,
  .document-library-workspace { width: auto; min-height: auto; }
  .document-library-list-panel { flex-basis: auto; }
  .document-library-splitter { display: none; }
  .document-library-list { max-height: 280px; }
  .document-library-empty-state { min-height: 300px; }
  .document-library-content-field textarea { min-height: 330px; }
  .document-library-markdown-preview { min-height: 330px; }
}
@media (max-width: 650px) {
  .document-library-page-header,
  .document-library-editor-head { align-items: stretch; flex-direction: column; }
  .document-library-page-header > .primary-button { align-self: flex-start; }
  .document-library-editor-actions { justify-content: space-between; }
  .document-library-font-size { flex: 1 1 100%; justify-content: space-between; }
  .document-library-font-size input { flex: 1 1 auto; }
  .document-library-form-footer { align-items: flex-start; flex-direction: column; gap: 4px; }
  .document-library-markdown-preview { padding: 19px; }
  .recipe-tutorial-unlinked,
  .recipe-tutorial-linked-head { align-items: stretch; flex-direction: column; }
  .recipe-tutorial-unlinked .primary-button { align-self: flex-start; }
  .recipe-tutorial-linked-actions { justify-content: flex-start; }
  .recipe-tutorial-markdown-preview { padding: 18px; }
  .document-library-recipe-relations-head { align-items: flex-start; flex-direction: column; gap: 3px; }
  .document-library-recipe-relations-list { display: grid; }
  .document-library-recipe-relations-list button { width: 100%; justify-content: space-between; }
  .recipe-tutorial-picker-panel { width: 100%; max-height: 100dvh; }
  .recipe-tutorial-picker-body { padding: 16px 16px 8px; }
}

/* V0.7 mobile document flow: browse first, then focus on one note. */
@media (max-width: 760px) {
  body[data-active-view="documents"] .topbar .top-actions [data-new-recipe] {
    display: none;
  }

  #documents.view.active .document-library-page-header {
    box-sizing: border-box;
    min-height: 38px;
    margin-bottom: 12px;
    align-items: center;
    flex-direction: row;
    gap: 10px;
  }

  #documents.view.active .document-library-page-header > div {
    min-width: 0;
  }

  #documents.view.active .document-library-page-header .eyebrow,
  #documents.view.active .document-library-page-header p,
  #documents.view.active .document-library-page-header > .primary-button {
    display: none;
  }

  #documents.view.active .document-library-page-header h1 {
    margin: 0;
    overflow: hidden;
    font-size: 27px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #documents.view.active .document-library-desktop-title { display: none; }
  #documents.view.active .document-library-mobile-title { display: inline; }

  #documents .document-library-layout {
    display: block;
  }

  #documents .document-library-list-panel,
  #documents .document-library-workspace {
    box-sizing: border-box;
    width: 100%;
    min-height: 0;
    padding: 16px;
    border-radius: 20px;
  }

  #documents.document-library-mobile-list .document-library-workspace,
  #documents.document-library-mobile-detail .document-library-list-panel {
    display: none;
  }

  #documents.document-library-mobile-list .document-library-list-panel,
  #documents.document-library-mobile-detail .document-library-workspace {
    display: block;
  }

  #documents .document-library-list {
    max-height: none;
    overflow: visible;
    padding-right: 0;
    gap: 7px;
  }

  #documents .document-library-panel-head {
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
  }

  #documents .document-library-panel-head h2 {
    font-size: 24px;
  }

  #documents .document-library-list-item {
    min-height: 70px;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 10px;
    border-color: rgba(92, 73, 60, .08);
    background: rgba(255, 253, 248, .76);
  }

  #documents .document-library-list-item:active {
    transform: none;
  }

  #documents .document-library-list-copy {
    gap: 4px;
  }

  #documents .document-library-list-copy strong {
    font-size: 14px;
  }

  #documents .document-library-list-copy small {
    display: -webkit-box;
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  #documents .document-library-list-item time {
    align-self: start;
    padding-top: 3px;
    font-size: 11px;
  }

  #documents .document-library-editor-head {
    display: block;
    margin-bottom: 14px;
  }

  #documents .document-library-editor-title {
    min-width: 0;
  }

  #documents .document-library-mobile-back {
    width: fit-content;
    min-height: 40px;
    flex: 0 0 auto;
    margin: 0 0 10px;
    padding: 5px 11px 5px 8px;
    border: 1px solid color-mix(in srgb, var(--rust) 22%, var(--line));
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--rust-dark);
    background: color-mix(in srgb, var(--pink-soft) 56%, var(--card));
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .01em;
    box-shadow: 0 3px 8px rgba(73, 49, 28, .035);
  }

  #documents .document-library-mobile-back:hover,
  #documents .document-library-mobile-back:focus-visible {
    border-color: var(--rust);
    background: var(--pink-soft);
    outline: 0;
  }

  #documents .document-library-back-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
  }

  #documents .document-library-editor-head h2 {
    max-width: 100%;
    overflow: hidden;
    margin-top: 0;
    font-size: 26px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #documents .document-library-save-status {
    margin-top: 5px;
    font-size: 11px;
  }

  #documents .document-library-editor-actions {
    position: sticky;
    top: calc(68px + env(safe-area-inset-top));
    z-index: 5;
    box-sizing: border-box;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    margin: 14px -16px 16px;
    padding: 9px 16px;
    border-top: 1px solid rgba(92, 73, 60, .08);
    border-bottom: 1px solid rgba(92, 73, 60, .08);
    background: color-mix(in srgb, var(--card) 94%, transparent);
    box-shadow: 0 7px 16px rgba(73, 49, 28, .05);
    backdrop-filter: blur(14px);
  }

  #documents .document-library-editor-actions .danger-button {
    min-height: 38px;
    padding: 6px 9px;
    border-radius: 11px;
    font-size: 12px;
    white-space: nowrap;
  }

  #documents .document-library-desktop-delete { display: none; }
  #documents .document-library-more { display: inline-flex; }
  #documents .document-library-more-button {
    min-height: 38px;
    padding: 6px 9px;
    border-radius: 11px;
    font-size: 12px;
    white-space: nowrap;
  }

  #documents .document-library-more-menu {
    top: calc(100% + 8px);
    right: 0;
  }

  #documents .document-library-editor-actions .document-library-font-size {
    flex: 0 0 auto;
    min-height: 38px;
    gap: 6px;
    padding: 3px 6px 3px 9px;
    border-radius: 11px;
    font-size: 13px;
  }

  #documents .document-library-font-size input {
    display: none;
  }

  #documents .document-library-font-size > #documentLibraryFontSizeValue {
    display: none;
  }

  #documents .document-library-font-size-stepper {
    display: inline-flex;
  }

  #documents .document-library-font-size-stepper output {
    min-width: 40px;
    font-size: 12px;
    text-align: center;
  }

  #documents .document-library-font-size-button {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
  }

  #documents .document-library-mode-switch {
    flex: 0 0 auto;
    gap: 2px;
    padding: 3px;
    border-radius: 11px;
  }

  #documents .document-library-mode-button {
    min-height: 38px;
    padding-right: 10px;
    padding-left: 10px;
    font-size: 12px;
  }

  #documents .document-library-editor-actions .danger-button {
    padding-right: 9px;
    padding-left: 9px;
  }

  #documents .document-library-content-field textarea {
    min-height: 58vh;
    font-size: var(--document-library-editor-font-size, 16px);
    line-height: 1.75;
  }

  #documents .document-library-form-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
  }

  #documents .document-library-markdown-preview {
    min-height: 0;
    padding: 20px 16px;
    overflow: visible;
    font-size: var(--document-library-editor-font-size, 16px);
    line-height: 1.85;
  }

  #documents .document-library-markdown-preview h1 { font-size: 1.75em; }
  #documents .document-library-markdown-preview h2 { font-size: 1.44em; }
  #documents .document-library-markdown-preview h3 { font-size: 1.19em; }
  #documents .document-library-markdown-preview pre code { font-size: 12px; }
}

@media (min-width: 381px) and (max-width: 760px) {
  #documents .document-library-editor[data-document-library-mode="preview"] .document-library-editor-actions {
    flex-wrap: nowrap;
  }
}

/* V0.7 mobile document surface: one canvas, with dividers instead of nested cards. */
@media (max-width: 760px) {
  #documents .document-library-layout {
    gap: 0;
  }

  #documents .document-library-list-panel,
  #documents .document-library-workspace {
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  #documents .document-library-list-panel {
    padding-top: 18px;
    border-top: 1px solid var(--line);
  }

  #documents .document-library-workspace {
    padding-top: 14px;
    border-top: 1px solid var(--line);
  }

  #documents .document-library-panel-head {
    margin-bottom: 17px;
  }

  #documents .document-library-list {
    gap: 0;
    border-top: 1px solid rgba(92, 73, 60, .13);
  }

  #documents .document-library-list-item {
    box-sizing: border-box;
    min-height: 68px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 13px 0;
    border: 0;
    border-bottom: 1px solid rgba(92, 73, 60, .13);
    border-radius: 0;
    background: transparent;
    transform: none;
  }

  #documents .document-library-list-open {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  /* All current documents are Markdown; keep the type in the list summary,
     and give the title/excerpt the full mobile row instead of repeating MD. */
  #documents .document-library-list-mark {
    display: none;
  }

  #documents .document-library-list-item:hover {
    border-color: rgba(92, 73, 60, .13);
    background: color-mix(in srgb, var(--rust) 4%, transparent);
    transform: none;
  }

  #documents .document-library-list-item.selected {
    padding-left: 10px;
    border-left: 3px solid var(--rust);
    border-bottom-color: rgba(173, 79, 47, .23);
    background: color-mix(in srgb, var(--rust) 6%, transparent);
  }

  #documents .document-library-list-mark {
    width: auto;
    height: auto;
    justify-self: start;
    padding: 0;
    border-radius: 0;
    color: var(--rust);
    background: transparent;
    font-size: 11px;
    letter-spacing: .08em;
  }

  #documents .document-library-list-item.selected .document-library-list-mark {
    color: var(--rust-dark);
    background: transparent;
  }

  #documents .document-library-pin-button {
    width: 40px;
    height: 40px;
    align-self: center;
  }

  #documents .document-library-list-tags { gap: 4px; }
  #documents .document-library-tag { min-height: 22px; font-size: 10px; }

  #documents .document-library-list-empty {
    padding: 24px 0;
    border: 0;
    border-top: 1px dashed rgba(92, 73, 60, .2);
    border-bottom: 1px dashed rgba(92, 73, 60, .2);
    border-radius: 0;
    background: transparent;
  }

  #documents .document-library-editor-head {
    margin-bottom: 17px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
  }

  #documents .document-library-mobile-back {
    min-height: 40px;
    margin: 0 0 9px;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--rust-dark);
    background: transparent;
    box-shadow: none;
    font-size: 13px;
  }

  #documents .document-library-mobile-back:hover,
  #documents .document-library-mobile-back:focus-visible {
    border: 0;
    background: transparent;
    outline: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  #documents .document-library-editor-actions {
    position: sticky;
    top: calc(68px + env(safe-area-inset-top));
    z-index: 5;
    margin: 0 0 18px;
    padding: 8px 0;
    border-top: 0;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
    box-shadow: none;
    backdrop-filter: none;
  }

  #documents .document-library-font-size,
  #documents .document-library-font-size-stepper,
  #documents .document-library-mode-switch {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #documents .document-library-font-size {
    padding: 0;
  }

  #documents .document-library-mode-switch {
    gap: 0;
    padding: 0;
  }

  #documents .document-library-mode-button {
    min-height: 38px;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding-right: 11px;
    padding-left: 11px;
  }

  #documents .document-library-mode-button.active {
    color: var(--rust-dark);
    background: transparent;
    border-bottom-color: var(--rust);
  }

  #documents .document-library-editor-actions .danger-button {
    min-height: 34px;
    margin-left: auto;
    padding-right: 0;
    padding-left: 8px;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }

  #documents .document-library-markdown-toolbar {
    flex-wrap: nowrap;
    margin-right: -2px;
    padding-bottom: 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  #documents .document-library-markdown-toolbar::-webkit-scrollbar { display: none; }
  #documents .document-library-markdown-tool { min-width: 42px; min-height: 40px; padding-right: 10px; padding-left: 10px; }

  #documents .document-library-field input,
  #documents .document-library-content-field textarea {
    border-radius: 8px;
    box-shadow: none;
  }

  #documents .document-library-content-field textarea {
    min-height: 58vh;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    background: transparent;
  }

  #documents .document-library-content-field textarea:focus {
    border-right: 0;
    border-left: 0;
    box-shadow: none;
  }

  #documents .document-library-markdown-preview {
    min-height: 0;
    padding: 18px 0;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #documents .document-library-empty-state {
    min-height: 42vh;
    padding: 24px 0;
    border: 0;
    border-radius: 0;
  }

  #documents .document-library-empty-mark {
    box-shadow: none;
  }

  #documents .document-library-template-grid { grid-template-columns: 1fr; padding: 15px 16px 18px; }
  #documents .document-library-template-card { min-height: 78px; padding: 13px 14px; }
}

/* V0.7 document detail: a quiet reading canvas on every mobile viewport. */
@media (max-width: 900px) {
  body.document-library-detail-active .topbar,
  body.document-library-detail-active .sidebar {
    display: none !important;
  }

  body.document-library-detail-active .content {
    box-sizing: border-box;
    padding: calc(10px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));
  }

  #documents .document-library-layout {
    display: block;
  }

  #documents.document-library-mobile-list .document-library-workspace,
  #documents.document-library-mobile-detail .document-library-list-panel,
  #documents.document-library-mobile-detail .document-library-page-header {
    display: none;
  }

  #documents.document-library-mobile-list .document-library-list-panel,
  #documents.document-library-mobile-detail .document-library-workspace {
    display: block;
  }

  #documents.document-library-mobile-detail .document-library-workspace {
    width: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  #documents.document-library-mobile-detail .document-library-editor {
    min-width: 0;
  }

  #documents.document-library-mobile-detail .document-library-detail-nav {
    position: sticky;
    top: env(safe-area-inset-top);
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 42px;
    margin: 0 0 24px;
    padding: 3px 0 7px;
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
    backdrop-filter: blur(12px);
  }

  #documents.document-library-mobile-detail .document-library-detail-nav-actions {
    display: flex;
    align-items: center;
    gap: 3px;
  }

  #documents.document-library-mobile-detail .document-library-mobile-back,
  #documents.document-library-mobile-detail .document-library-mobile-mode-button,
  #documents.document-library-mobile-detail .document-library-more {
    display: inline-flex;
  }

  #documents.document-library-mobile-detail .document-library-mobile-back {
    align-items: center;
    gap: 4px;
    min-height: 36px;
    margin: 0;
    padding: 5px 8px 5px 0;
    border: 0;
    border-radius: 8px;
    color: var(--rust-dark);
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
  }

  #documents.document-library-mobile-detail .document-library-mobile-back:hover,
  #documents.document-library-mobile-detail .document-library-mobile-back:focus-visible {
    background: color-mix(in srgb, var(--pink-soft) 64%, transparent);
    outline: 0;
  }

  #documents.document-library-mobile-detail .document-library-back-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
  }

  #documents.document-library-mobile-detail .document-library-more-button {
    min-height: 36px;
    padding: 6px 7px;
    border: 0;
    border-radius: 9px;
    color: var(--rust-dark);
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
  }

  #documents.document-library-mobile-detail .document-library-more-button:hover,
  #documents.document-library-mobile-detail .document-library-more-button:focus-visible {
    background: var(--pink-soft);
    outline: 0;
  }

  #documents.document-library-mobile-detail .document-library-more-menu {
    top: calc(100% + 5px);
    right: 0;
    min-width: 192px;
    padding: 6px;
  }

  #documents.document-library-mobile-detail .document-library-editor-head {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
  }

  #documents.document-library-mobile-detail .document-library-editor-title {
    min-width: 0;
  }

  #documents.document-library-mobile-detail .document-library-editor-title h2 {
    max-width: 100%;
    margin: 0;
    font-size: clamp(28px, 7.4vw, 30px);
    line-height: 1.22;
  }

  #documents.document-library-mobile-detail .document-library-title-input {
    width: 100%;
    min-height: 44px;
    padding-top: 0;
    font-size: clamp(28px, 7.4vw, 30px);
  }

  #documents.document-library-mobile-detail .document-library-metadata {
    margin-top: 9px;
    color: var(--muted);
    font-size: 11px;
  }

  #documents.document-library-mobile-detail .document-library-save-status {
    font-size: 11px;
  }

  #documents.document-library-mobile-detail .document-library-editor-actions {
    display: none;
  }

  #documents.document-library-mobile-detail .document-library-edit-pane {
    padding: 0;
  }

  #documents.document-library-mobile-detail .document-library-tags-field {
    margin-top: 25px;
  }

  #documents.document-library-mobile-detail .document-library-content-field {
    margin-top: 22px;
  }

  #documents.document-library-mobile-detail .document-library-content-field > span:first-child {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
  }

  #documents.document-library-mobile-detail .document-library-format-tools {
    margin-top: 7px;
  }

  #documents.document-library-mobile-detail .document-library-format-tools > summary {
    min-height: 40px;
    font-size: 13px;
  }

  #documents.document-library-mobile-detail .document-library-format-tools > summary small {
    font-size: 11px;
  }

  #documents.document-library-mobile-detail .document-library-format-tools-body {
    padding-top: 4px;
  }

  #documents.document-library-mobile-detail .document-library-content-field textarea {
    box-sizing: border-box;
    min-height: max(320px, calc(100dvh - 260px));
    padding: 14px 0 120px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    background: transparent;
    font-size: var(--document-library-editor-font-size, 16px);
    line-height: 1.8;
  }

  #documents.document-library-mobile-detail .document-library-markdown-toolbar {
    flex-wrap: nowrap;
    margin: 7px 0 0;
    padding-bottom: 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  #documents.document-library-mobile-detail .document-library-markdown-toolbar::-webkit-scrollbar { display: none; }
  #documents.document-library-mobile-detail .document-library-markdown-tool { min-width: 42px; min-height: 40px; }

  #documents.document-library-mobile-detail .document-library-form-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
    font-size: 11px;
  }

  #documents.document-library-mobile-detail .document-library-markdown-preview {
    min-height: 0;
    margin-top: 24px;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--ink-soft);
    font-size: var(--document-library-editor-font-size, 16px);
    line-height: 1.8;
  }

  #documents.document-library-mobile-detail .document-library-markdown-preview h1 { font-size: 1.75em; }
  #documents.document-library-mobile-detail .document-library-markdown-preview h2 { font-size: 1.42em; }
  #documents.document-library-mobile-detail .document-library-markdown-preview h3 { font-size: 1.18em; }
  #documents.document-library-mobile-detail .document-library-markdown-preview pre code { font-size: 12px; }
  #documents.document-library-mobile-detail .document-library-markdown-preview table { min-width: 520px; }

  #documents.document-library-mobile-detail .document-library-recipe-relations {
    margin-top: 26px;
    padding-right: 0;
    padding-left: 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    background: transparent;
  }
}
/* V0.6 baking idea library, adapted from the read-only operations-studio reference. */
#ideas.view.active { animation: idea-library-fade-in .22s ease both; }
@keyframes idea-library-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.idea-library-page-header { align-items: flex-end; }
.idea-library-page-header > div { min-width: 0; }
.idea-library-page-badge,
.idea-library-energy,
.idea-library-channel {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 800;
}
.idea-library-page-badge { color: var(--rust-dark); background: rgba(245, 233, 200, .85); }
.idea-library-toolbar {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: rgba(255, 255, 255, .55);
}
.idea-library-search-control { flex: 1 1 330px; min-width: 230px; display: grid; gap: 6px; }
.idea-library-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; color: var(--muted); font-size: 11px; font-weight: 750; }
.idea-library-field input,
.idea-library-field select,
.idea-library-field textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid rgba(92, 73, 60, .17);
  border-radius: 10px;
  outline: none;
  color: var(--ink);
  background: rgba(255, 255, 255, .86);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
}
.idea-library-field textarea { min-height: 96px; resize: vertical; line-height: 1.6; }
.idea-library-field input:focus,
.idea-library-field select:focus,
.idea-library-field textarea:focus { border-color: rgba(173, 79, 47, .6); box-shadow: var(--focus-ring); }
.idea-library-status-field { flex: 0 0 122px; }
.idea-library-count-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 2px 13px;
  color: var(--muted);
  font-size: 10px;
}
.idea-library-count-row span:first-child { color: var(--rust-dark); font-weight: 800; }
.idea-library-search-history {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 1px 0;
}
.idea-library-search-history[hidden] { display: none; }
.idea-library-search-history-label { color: var(--muted); font-size: 10px; font-weight: 700; }
.idea-library-search-history button {
  min-height: 25px;
  padding: 4px 9px;
  border: 1px solid rgba(173, 79, 47, .2);
  border-radius: 999px;
  color: var(--rust-dark);
  background: rgba(255, 253, 248, .88);
  cursor: pointer;
  font-size: 10px;
}
.idea-library-search-history button:hover { border-color: var(--rust); background: var(--pink-soft); }
.idea-library-search-history .clear { margin-left: auto; border-color: transparent; color: var(--rust); background: transparent; }

.idea-library-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.idea-library-card {
  position: relative;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .66);
  box-shadow: 0 8px 22px rgba(74, 53, 38, .035);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.idea-library-card:hover { border-color: rgba(173, 79, 47, .25); box-shadow: 0 12px 28px rgba(74, 53, 38, .07); }
.idea-library-card.used { opacity: .66; }
.idea-library-card.is-drag-over { border-color: var(--rust); background: rgba(255, 247, 240, .94); box-shadow: 0 0 0 4px rgba(173, 79, 47, .1), 0 12px 30px rgba(74, 53, 38, .08); }
.idea-library-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.idea-library-channel { color: #486771; background: #e0ebeb; }
.idea-library-energy { color: #8a6828; background: #f5e9c8; }
.idea-library-energy.high { color: #8a4a2c; background: #f5ddcf; }
.idea-library-energy.low { color: #506b73; background: #e0ebeb; }
.idea-library-card h3 { margin: 7px 0 0; color: var(--ink); font-family: var(--font-serif); font-size: 20px; line-height: 1.34; }
.idea-library-copy-row { position: relative; display: grid; min-height: 42px; }
.idea-library-copy { min-width: 0; min-height: 42px; margin: 12px 29px 12px 0; color: var(--ink-soft); font-size: 12px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.idea-library-copy-empty { color: var(--muted); }
.idea-library-copy-button {
  position: absolute;
  right: 0;
  bottom: 10px;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(173, 79, 47, .2);
  border-radius: 7px;
  color: var(--rust);
  background: rgba(255, 253, 248, .9);
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease;
}
.idea-library-copy-button svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.idea-library-copy-button:hover { border-color: rgba(173, 79, 47, .45); color: var(--rust-dark); background: rgba(173, 79, 47, .12); transform: translateY(-1px); }
.idea-library-copy-button:focus-visible { outline: 2px solid rgba(173, 79, 47, .52); outline-offset: 2px; }

.idea-library-media { position: relative; margin: 13px 0 11px; }
.idea-library-image-grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding-right: 30px; }
.idea-library-image-tile {
  position: relative;
  z-index: 0;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: visible;
  padding: 0;
  border: 1px solid rgba(92, 73, 60, .12);
  border-radius: 9px;
  background: #eee3d5;
  cursor: zoom-in;
}
.idea-library-image-tile > img:not(.idea-library-image-hover-preview) { width: 100%; height: 100%; display: block; border-radius: 8px; object-fit: cover; }
.idea-library-image-tile:hover, .idea-library-image-tile:focus-visible { z-index: 8; outline: none; }
.idea-library-image-tile:focus-visible { outline: 2px solid rgba(173, 79, 47, .62); outline-offset: 3px; }
.idea-library-image-hover-preview {
  position: fixed;
  z-index: 140;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-width: min(760px, calc(100vw - 56px));
  max-height: min(72vh, 680px);
  display: block;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  filter: drop-shadow(0 20px 36px rgba(55, 40, 29, .3));
  object-fit: contain;
  transform-origin: 50% 50%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.96);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.idea-library-image-tile:hover > .idea-library-image-hover-preview,
.idea-library-image-tile:focus-visible > .idea-library-image-hover-preview { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1.2); transition-delay: 0s; }
.idea-library-image-count { position: absolute; right: 0; bottom: 4px; padding: 4px 6px; border-radius: 999px; color: #fffaf0; background: rgba(63, 53, 44, .78); font-size: 9px; font-weight: 750; white-space: nowrap; }
.idea-library-image-drop-hint { min-height: 72px; display: grid; place-items: center; gap: 3px; padding: 9px; border: 1px dashed rgba(173, 79, 47, .28); border-radius: 11px; color: var(--rust-dark); background: rgba(245, 239, 231, .52); text-align: center; }
.idea-library-image-drop-hint strong { font-size: 10px; font-weight: 750; }
.idea-library-image-drop-hint small { color: var(--muted); font-size: 9px; }
.idea-library-image-drop-icon { color: var(--rust); font-size: 17px; line-height: 1; }
.idea-library-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.idea-library-tag { display: inline-flex; align-items: center; min-height: 22px; padding: 3px 8px; border: 0; border-radius: 999px; color: var(--rust); background: rgba(173, 79, 47, .09); cursor: pointer; appearance: none; font-size: 10px; font-weight: 750; line-height: 1.2; }
.idea-library-tag:hover, .idea-library-tag:focus-visible { color: #fffaf0; background: var(--rust); outline: none; box-shadow: 0 0 0 3px rgba(173, 79, 47, .12); }
.idea-library-source { display: flex; align-items: center; gap: 5px; min-width: 0; min-height: 22px; color: var(--rust); font-size: 11px; text-decoration: none; }
.idea-library-source:hover { text-decoration: underline; }
.idea-library-source span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.idea-library-source-empty { justify-content: space-between; color: #b08c76; }
.idea-library-source-empty small { color: var(--muted); font-size: 10px; }
.idea-library-card-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 11px; border-top: 1px solid rgba(92, 73, 60, .08); }
.idea-library-card-actions button { padding: 0; border: 0; color: var(--rust-dark); background: transparent; cursor: pointer; font-size: 11px; font-weight: 750; }
.idea-library-card-actions .danger { color: #a54d3e; }
.idea-library-empty { grid-column: 1 / -1; padding: 43px 20px; border: 1px dashed rgba(92, 73, 60, .2); border-radius: 18px; color: var(--muted); text-align: center; }
.idea-library-empty strong { display: block; margin-bottom: 6px; color: var(--ink); font-family: var(--font-serif); font-size: 23px; }

.idea-library-draw-panel { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 14px; padding: 18px; border: 1px solid rgba(173, 79, 47, .2); border-radius: 18px; background: linear-gradient(130deg, rgba(255, 253, 248, .95), rgba(237, 216, 207, .5)); }
.idea-library-draw-panel[hidden] { display: none; }
.idea-library-draw-kicker, .idea-library-kicker { color: var(--rust); font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.idea-library-draw-panel h3 { margin: 8px 0 0; color: var(--ink); font-family: var(--font-serif); font-size: 24px; line-height: 1.3; }
.idea-library-draw-panel p { max-width: 700px; margin: 10px 0 0; color: var(--ink-soft); font-size: 12px; line-height: 1.65; white-space: pre-wrap; }
.idea-library-draw-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; color: var(--muted); font-size: 10px; }
.idea-library-draw-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

.idea-library-modal { position: fixed; inset: 0; z-index: 260; display: grid; place-items: center; padding: 20px; background: rgba(55, 40, 29, .34); }
.idea-library-modal[hidden] { display: none; }
.idea-library-modal-card { width: min(720px, 100%); max-height: min(90vh, 820px); overflow: auto; padding: 24px; border: 1px solid rgba(92, 73, 60, .16); border-radius: 22px; background: #fffaf2; box-shadow: 0 24px 70px rgba(55, 40, 29, .22); }
.idea-library-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 19px; }
.idea-library-modal-head h2 { margin: 6px 0 0; color: var(--ink); font-family: var(--font-serif); font-size: 28px; line-height: 1.2; }
.idea-library-modal-head p { margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.idea-library-modal-close { width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 11px; color: var(--muted); background: rgba(255, 255, 255, .7); cursor: pointer; font-size: 23px; line-height: 1; }
.idea-library-modal-close:hover { color: var(--rust); border-color: rgba(173, 79, 47, .32); }
.idea-library-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.idea-library-span-all { grid-column: 1 / -1; }
.idea-library-field-hint { color: var(--muted); font-size: 10px; font-weight: 500; }
.idea-library-image-upload { min-height: 170px; display: grid; place-items: center; padding: 15px; border: 1px dashed rgba(173, 79, 47, .3); border-radius: 14px; color: var(--rust-dark); background: rgba(245, 239, 231, .52); cursor: pointer; text-align: center; }
.idea-library-image-upload.is-dragging { border-color: var(--rust); background: rgba(237, 216, 207, .6); box-shadow: 0 0 0 4px rgba(173, 79, 47, .1); }
.idea-library-image-upload > span:not(.idea-library-upload-stack) { font-size: 16px; }
.idea-library-image-upload small { display: block; margin-top: 6px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.idea-library-upload-stack { display: grid; gap: 10px; justify-items: center; }
.idea-library-upload-fan { display: flex; align-items: flex-end; min-height: 84px; }
.idea-library-upload-thumb { display: block; width: 65px; height: 82px; margin-left: -13px; overflow: hidden; border: 2px solid #fffaf2; border-radius: 8px; background: #eee3d5; box-shadow: 0 5px 12px rgba(55, 40, 29, .12); transform: rotate(calc((var(--idea-upload-position) - 1.5) * 5deg)); }
.idea-library-upload-thumb:first-child { margin-left: 0; }
.idea-library-upload-thumb img { width: 100%; height: 100%; object-fit: cover; }
.idea-library-upload-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.idea-library-upload-remove { position: relative; width: 39px; height: 39px; padding: 0; overflow: hidden; border: 1px solid rgba(173, 79, 47, .2); border-radius: 7px; background: #eee3d5; cursor: pointer; }
.idea-library-upload-remove img { width: 100%; height: 100%; object-fit: cover; }
.idea-library-upload-remove i { position: absolute; top: -2px; right: -1px; width: 15px; height: 15px; border-radius: 50%; color: #fff; background: rgba(95, 61, 45, .78); font-size: 13px; font-style: normal; line-height: 15px; }
.idea-library-form-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 17px; padding-top: 14px; border-top: 1px solid rgba(92, 73, 60, .1); }

@media (max-width: 1050px) { .idea-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .idea-library-page-header, .idea-library-draw-panel { align-items: stretch; flex-direction: column; }
  .idea-library-page-badge { align-self: flex-start; }
  .idea-library-toolbar { align-items: stretch; }
  .idea-library-status-field { flex-basis: auto; }
  .idea-library-toolbar > button { width: 100%; }
  .idea-library-count-row { align-items: flex-start; flex-direction: column; }
  .idea-library-grid { grid-template-columns: 1fr; }
  .idea-library-modal { padding: 10px; }
  .idea-library-modal-card { padding: 18px; border-radius: 18px; }
}
@media (max-width: 560px) { .idea-library-form-grid { grid-template-columns: 1fr; } .idea-library-span-all { grid-column: 1; } }

/* V0.7 mobile refinement: keep the capture flow visible without turning the
   first screen into a stack of desktop controls. */
@media (max-width: 760px) {
  #ideas.view.active,
  #ideas.view.active .idea-library-page-header,
  #ideas.view.active .idea-library-toolbar {
    overflow-anchor: none;
  }

  /* The page already exposes a contextual “记录灵感” CTA; hiding the
     global “新配方” shortcut avoids an ambiguous second plus button. */
  body:has(#ideas.view.active) .topbar .top-actions .primary-button {
    display: none;
  }

  #ideas.view.active .idea-library-page-header {
    display: block;
    margin-bottom: 15px;
    padding: 0 2px;
  }

  #ideas.view.active .idea-library-page-header .eyebrow {
    margin-bottom: 7px;
    font-size: 9px;
    letter-spacing: .15em;
    line-height: 1.35;
  }

  #ideas.view.active .idea-library-page-header h1 {
    max-width: 17em;
    margin-bottom: 8px;
    font-size: clamp(28px, 6.8vw, 36px);
    line-height: 1.12;
    letter-spacing: -.03em;
  }

  #ideas.view.active .idea-library-page-header p {
    display: -webkit-box;
    max-width: 42em;
    margin-bottom: 0;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.58;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  #ideas.view.active .idea-library-page-badge {
    min-height: 24px;
    margin-top: 10px;
    padding: 4px 9px;
    font-size: 9px;
  }

  #ideas.view.active .idea-library-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: 9px;
    margin-bottom: 10px;
    padding: 12px;
    border-radius: 16px;
    background: rgba(255, 253, 248, .78);
    box-shadow: 0 7px 20px rgba(74, 53, 38, .045);
  }

  #ideas.view.active .idea-library-search-control,
  #ideas.view.active .idea-library-status-field {
    min-width: 0;
    flex: none;
  }

  #ideas.view.active .idea-library-search-control,
  #ideas.view.active .idea-library-status-field {
    grid-column: 1 / -1;
  }

  #ideas.view.active .idea-library-field {
    gap: 5px;
    font-size: 10px;
  }

  #ideas.view.active .idea-library-field input,
  #ideas.view.active .idea-library-field select {
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 13px;
  }

  #ideas.view.active .idea-library-status-field select {
    max-width: 160px;
  }

  /* The select already changes the same view as this desktop quick toggle. */
  #ideas.view.active .idea-library-toolbar > [data-idea-library-toggle-status] {
    display: none;
  }

  #ideas.view.active .idea-library-toolbar > [data-idea-library-draw],
  #ideas.view.active .idea-library-toolbar > [data-idea-library-new] {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 8px 9px;
    border-radius: 11px;
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
    touch-action: manipulation;
  }

  #ideas.view.active .idea-library-toolbar > [data-idea-library-draw] {
    grid-column: 1;
  }

  #ideas.view.active .idea-library-toolbar > [data-idea-library-new] {
    grid-column: 2;
  }

  #ideas.view.active .idea-library-count-row {
    align-items: center;
    flex-direction: row;
    margin: 0 2px 12px;
  }

  #ideas.view.active .idea-library-count-row span:first-child {
    min-height: 24px;
    box-sizing: border-box;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(173, 79, 47, .08);
    font-size: 10px;
  }

  #ideas.view.active .idea-library-count-row span:last-child {
    display: none;
  }

  #ideas.view.active .idea-library-card {
    padding: 14px;
    border-radius: 17px;
    box-shadow: 0 7px 20px rgba(74, 53, 38, .045);
  }

  #ideas.view.active .idea-library-card h3 {
    margin-top: 8px;
    font-size: 21px;
    line-height: 1.25;
  }

  #ideas.view.active .idea-library-copy {
    margin: 9px 34px 10px 0;
    font-size: 12px;
    line-height: 1.6;
  }

  #ideas.view.active .idea-library-copy-button {
    right: 0;
    bottom: 7px;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    touch-action: manipulation;
  }

  #ideas.view.active .idea-library-media {
    margin: 10px 0 9px;
  }

  #ideas.view.active .idea-library-image-drop-hint {
    min-height: 82px;
    border-radius: 12px;
  }

  #ideas.view.active .idea-library-image-drop-hint strong {
    font-size: 11px;
  }

  #ideas.view.active .idea-library-source {
    min-height: 25px;
    font-size: 10px;
  }

  #ideas.view.active .idea-library-source-empty small {
    font-size: 9px;
  }

  #ideas.view.active .idea-library-card-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    justify-content: stretch;
    gap: 7px;
    padding-top: 10px;
  }

  #ideas.view.active .idea-library-card-actions > .idea-library-date {
    grid-column: 1 / -1;
    margin-bottom: -1px;
    color: var(--muted);
    font-size: 10px;
  }

  #ideas.view.active .idea-library-card-actions > span:nth-child(2) {
    display: none;
  }

  #ideas.view.active .idea-library-card-actions button {
    min-width: 0;
    min-height: 36px;
    padding: 8px 5px;
    border: 1px solid rgba(173, 79, 47, .16);
    border-radius: 10px;
    color: var(--rust-dark);
    background: rgba(255, 253, 248, .78);
    font-size: 10px;
    line-height: 1.2;
    white-space: nowrap;
    touch-action: manipulation;
  }

  #ideas.view.active .idea-library-card-actions button[data-global-search-idea-experiment] {
    grid-column: 1 / -1;
    border-color: var(--rust);
    color: #fffaf0;
    background: linear-gradient(145deg, #b95835, var(--rust));
    box-shadow: 0 6px 14px rgba(173, 79, 47, .14);
  }

  #ideas.view.active .idea-library-card-actions button[data-idea-library-toggle] {
    border-color: rgba(138, 104, 40, .2);
    color: #8a6828;
    background: rgba(245, 233, 200, .55);
  }

  #ideas.view.active .idea-library-card-actions button.danger {
    border-color: rgba(165, 77, 62, .16);
    color: #a54d3e;
    background: rgba(255, 248, 244, .82);
  }

  #ideas.view.active .idea-library-draw-panel {
    align-items: stretch;
    gap: 12px;
    margin-bottom: 12px;
    padding: 14px;
    border-radius: 16px;
  }

  #ideas.view.active .idea-library-draw-panel h3 {
    margin-top: 7px;
    font-size: 21px;
  }

  #ideas.view.active .idea-library-draw-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  #ideas.view.active .idea-library-draw-actions .primary-button {
    grid-column: 1 / -1;
  }

  .idea-library-modal {
    align-items: end;
    padding: 8px;
  }

  .idea-library-modal-card {
    width: 100%;
    max-height: calc(100dvh - 16px);
    padding: 16px;
    border-radius: 18px 18px 14px 14px;
  }

  .idea-library-modal-head {
    gap: 12px;
    margin-bottom: 14px;
  }

  .idea-library-modal-head h2 {
    font-size: 24px;
  }

  .idea-library-modal-close {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
  }

  .idea-library-field input,
  .idea-library-field select,
  .idea-library-field textarea {
    font-size: 16px;
  }

  /* Keep the real mobile controls at 16px to avoid iOS zoom, while making
     instructional placeholder copy quieter and easier to scan. */
  #ideaLibraryModal .idea-library-field input::placeholder,
  #ideaLibraryModal .idea-library-field textarea::placeholder {
    color: rgba(125, 110, 99, .72);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    opacity: 1;
  }

  #ideaLibraryModal .idea-library-image-upload > span:not(.idea-library-upload-stack) {
    font-size: 14px;
    font-weight: 500;
  }

  #ideaLibraryModal .idea-library-image-upload small {
    font-size: 9px;
  }

  .idea-library-image-upload {
    min-height: 140px;
  }

  .idea-library-form-actions {
    position: sticky;
    bottom: -16px;
    margin-right: -16px;
    margin-left: -16px;
    padding: 12px 16px 0;
    background: linear-gradient(180deg, rgba(255, 250, 242, 0), #fffaf2 34%);
  }

  /* Once the filter reaches the global header, turn the large capture block
     into a small, reversible control strip. The page intro is useful at the
     top of the library, but has no reason to keep occupying list space. */
  #ideas.view.active .idea-library-page-header {
    max-height: 340px;
    overflow: hidden;
    transition: max-height .34s cubic-bezier(.22, .61, .36, 1), margin-bottom .34s cubic-bezier(.22, .61, .36, 1), opacity .28s ease, transform .34s cubic-bezier(.22, .61, .36, 1);
  }

  #ideas.view.active .idea-library-toolbar {
    transition: padding .28s ease, border-radius .28s ease, box-shadow .28s ease, background .28s ease, transform .34s cubic-bezier(.22, .61, .36, 1), opacity .28s ease, visibility 0s linear 0s;
    will-change: transform, opacity;
  }

  #ideas.view.active.idea-library-scroll-collapsed .idea-library-page-header {
    max-height: 0;
    margin-bottom: 0;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
  }

  #ideas.view.active.idea-library-scroll-revealed .idea-library-page-header {
    max-height: 0;
    margin-bottom: 0;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
  }

  /* The local idea search replaces the global search while the library is
     being browsed. Keep the header shell and account controls available, but
     let this redundant field leave with a short pause and a soft collapse. */
  body:has(#ideas.view.active) .topbar .search-box {
    box-sizing: border-box;
    flex: 0 1 auto;
    width: min(460px, 48vw);
    overflow: hidden;
    transform-origin: left center;
    transition: width .52s cubic-bezier(.45, 0, .55, 1),
      padding .52s cubic-bezier(.45, 0, .55, 1),
      border-color .32s ease,
      border-width .32s ease,
      opacity .42s ease-in-out,
      transform .52s cubic-bezier(.45, 0, .55, 1),
      visibility 0s linear 0s;
    will-change: width, opacity, transform;
  }

  body:has(#ideas.view.active) .topbar .search-box input {
    min-width: 0;
  }

  body:has(#ideas.view.active.idea-library-scroll-collapsed) .topbar .search-box,
  body:has(#ideas.view.active.idea-library-scroll-revealed) .topbar .search-box {
    width: 0;
    min-width: 0;
    padding-right: 0;
    padding-left: 0;
    border-color: transparent;
    border-width: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px) scaleX(.94);
    visibility: hidden;
    transition: width .52s cubic-bezier(.45, 0, .55, 1) .08s,
      padding .52s cubic-bezier(.45, 0, .55, 1) .08s,
      border-color .32s ease .08s,
      border-width .32s ease .08s,
      opacity .42s ease-in-out .08s,
      transform .52s cubic-bezier(.45, 0, .55, 1) .08s,
      visibility 0s linear .60s;
  }

  body:has(#ideas.view.active.idea-library-scroll-collapsed) .topbar .search-box > *,
  body:has(#ideas.view.active.idea-library-scroll-revealed) .topbar .search-box > * {
    min-width: 0;
  }

  #ideas.view.active.idea-library-scroll-collapsed .idea-library-toolbar {
    position: sticky;
    top: var(--idea-library-sticky-top, 75px);
    z-index: 18;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
    padding: 6px;
    border-color: rgba(173, 79, 47, .2);
    border-radius: 14px;
    background: rgba(255, 253, 248, .93);
    box-shadow: 0 8px 22px rgba(74, 53, 38, .1);
    backdrop-filter: blur(14px);
  }

  /* Reverse scrolling reveals the complete filter surface in the same
     position; the intro returns only after the user reaches its section. */
  #ideas.view.active.idea-library-scroll-revealed .idea-library-toolbar {
    position: sticky;
    top: var(--idea-library-sticky-top, 75px);
    z-index: 18;
    border-color: rgba(173, 79, 47, .2);
    background: rgba(255, 253, 248, .93);
    box-shadow: 0 8px 22px rgba(74, 53, 38, .1);
    backdrop-filter: blur(14px);
  }

  /* A compact toolbar should yield to the content during a continued
     downward swipe, then return after a short upward intent. Transforming the
     sticky node keeps its layout slot stable and avoids scroll-position jumps. */
  #ideas.view.active.idea-library-scroll-toolbar-hidden .idea-library-toolbar {
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, calc(-100% - 10px), 0);
    visibility: hidden;
    box-shadow: 0 0 0 rgba(74, 53, 38, 0);
    transition: transform .36s cubic-bezier(.22, .61, .36, 1), opacity .28s ease, box-shadow .28s ease, visibility 0s linear .36s;
  }

  #ideas.view.active.idea-library-scroll-collapsed .idea-library-search-control {
    grid-column: 1;
    display: block;
  }

  #ideas.view.active.idea-library-scroll-collapsed .idea-library-search-control .idea-library-field,
  #ideas.view.active.idea-library-scroll-collapsed .idea-library-status-field {
    gap: 0;
    font-size: 0;
  }

  #ideas.view.active.idea-library-scroll-collapsed .idea-library-search-history {
    display: none;
  }

  #ideas.view.active.idea-library-scroll-collapsed .idea-library-field input,
  #ideas.view.active.idea-library-scroll-collapsed .idea-library-field select {
    min-height: 38px;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 12px;
  }

  #ideas.view.active.idea-library-scroll-collapsed .idea-library-status-field {
    grid-column: 2;
    width: 96px;
    flex: 0 0 96px;
  }

  #ideas.view.active.idea-library-scroll-collapsed .idea-library-status-field select {
    width: 100%;
    max-width: none;
    padding-right: 6px;
    font-size: 11px;
  }

  #ideas.view.active.idea-library-scroll-collapsed .idea-library-toolbar > [data-idea-library-draw] {
    display: none;
  }

  #ideas.view.active.idea-library-scroll-collapsed .idea-library-toolbar > [data-idea-library-new] {
    grid-column: 3;
    width: 40px;
    min-width: 40px;
    min-height: 38px;
    padding: 0;
    border-radius: 10px;
    font-size: 0;
  }

  #ideas.view.active.idea-library-scroll-collapsed .idea-library-toolbar > [data-idea-library-new]::after {
    content: "+";
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
  }

  #ideas.view.active.idea-library-scroll-collapsed .idea-library-card {
    scroll-margin-top: var(--idea-library-sticky-top, 75px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .idea-library-card, .idea-library-copy-button, .idea-library-image-hover-preview { transition: none; }
  .idea-library-page-header, .idea-library-toolbar { transition: none; }
  .idea-library-copy-button:hover { transform: none; }
}
/* V0.6 URL bookmarks */
.link-library-page-header { align-items: flex-end; }
.link-library-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-top: 20px;
  padding: 14px 16px;
  border: 1px solid rgba(92, 73, 60, .12);
  border-radius: 16px;
  background: rgba(255, 253, 248, .72);
}
.link-library-field {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}
.link-library-search-field { flex: 1 1 420px; }
.link-library-toolbar > .link-library-field:not(.link-library-search-field) { flex: 0 0 170px; }
.link-library-field input,
.link-library-field select,
.link-library-field textarea {
  width: 100%;
  border: 1px solid rgba(83, 67, 49, .16);
  border-radius: 11px;
  outline: 0;
  color: var(--ink);
  background: rgba(255, 254, 250, .94);
  font: inherit;
  font-weight: 400;
}
.link-library-field input,
.link-library-field select { min-height: 41px; padding: 8px 11px; }
.link-library-field textarea { min-height: 108px; padding: 10px 11px; resize: vertical; line-height: 1.65; }
.link-library-field input:focus,
.link-library-field select:focus,
.link-library-field textarea:focus { border-color: rgba(173, 79, 47, .44); box-shadow: var(--focus-ring); }
.link-library-kicker { color: var(--rust); font-size: 10px; font-weight: 850; letter-spacing: .18em; }
.link-library-count-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 2px 11px; color: var(--muted); font-size: 11px; }
.link-library-count-row span:first-child { color: var(--rust-dark); font-weight: 800; }
.link-library-search-history { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 12px; }
.link-library-search-history[hidden] { display: none; }
.link-library-search-history button { padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(255, 255, 255, .7); cursor: pointer; font-size: 10px; }
.link-library-search-history button:hover { color: var(--rust-dark); border-color: rgba(173, 79, 47, .28); }
.link-library-search-history .clear { color: var(--rust); }
.link-library-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.link-library-card { display: flex; min-width: 0; flex-direction: column; padding: 16px; border: 1px solid rgba(92, 73, 60, .13); border-radius: 17px 17px 17px 5px; background: rgba(255, 255, 255, .74); box-shadow: 0 8px 20px rgba(100, 76, 56, .04); transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.link-library-card:hover { border-color: rgba(173, 79, 47, .26); transform: translateY(-2px); box-shadow: 0 13px 25px rgba(100, 76, 56, .08); }
.link-library-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.link-library-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.link-library-badge { display: inline-flex; align-items: center; min-height: 22px; padding: 3px 7px; border-radius: 999px; color: var(--rust-dark); background: var(--pink-soft); font-size: 9px; font-weight: 850; }
.link-library-badge.is-read-only { color: #6f665a; background: rgba(231, 226, 216, .82); }
.link-library-card-actions-top { display: flex; gap: 3px; }
.link-library-icon-button { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 8px; color: var(--muted); background: transparent; cursor: pointer; font-size: 13px; }
.link-library-icon-button:hover { color: var(--rust-dark); background: var(--pink-soft); }
.link-library-card h3 { margin: 13px 0 4px; color: var(--ink); font-family: "STSong", "SimSun", Georgia, serif; font-size: 19px; line-height: 1.35; }
.link-library-card h3 a { color: inherit; text-decoration: none; }
.link-library-card h3 a:hover { color: var(--rust); text-decoration: underline; text-underline-offset: 3px; }
.link-library-card-url { overflow: hidden; color: var(--rust); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.link-library-card-note { min-height: 44px; margin: 12px 0 0; color: var(--ink-soft); font-size: 11px; line-height: 1.65; }
.link-library-card-note.is-empty { color: var(--muted); font-style: italic; }
.link-library-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px; }
.link-library-tag { padding: 3px 7px; border: 1px solid rgba(173, 79, 47, .14); border-radius: 999px; color: var(--muted); background: rgba(255, 248, 237, .72); font-size: 9px; }
.link-library-card-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 13px; }
.link-library-card-footer button { min-height: 30px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: rgba(255, 253, 248, .74); cursor: pointer; font-size: 10px; font-weight: 750; }
.link-library-card-footer button:first-child { border-color: rgba(173, 79, 47, .2); color: var(--rust-dark); background: var(--pink-soft); }
.link-library-card-footer button:hover { border-color: rgba(173, 79, 47, .32); color: var(--rust-dark); }
.link-library-card-footer button.danger { margin-left: auto; color: #a44e43; }
.link-library-grid-empty { grid-column: 1 / -1; padding: 40px 20px; border: 1px dashed rgba(92, 73, 60, .18); border-radius: 17px; color: var(--muted); text-align: center; }
.link-library-grid-empty strong { display: block; margin-bottom: 6px; color: var(--ink); font-family: "STSong", "SimSun", Georgia, serif; font-size: 21px; }
.link-library-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; background: rgba(48, 36, 29, .4); }
.link-library-modal[hidden] { display: none; }
.link-library-modal-card { width: min(700px, 100%); max-height: min(760px, calc(100vh - 42px)); overflow: auto; padding: 25px; border: 1px solid rgba(255, 255, 255, .42); border-radius: 21px; background: var(--paper, #fffaf2); box-shadow: 0 22px 60px rgba(48, 36, 29, .24); }
.link-library-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.link-library-modal-head h2 { margin: 5px 0 0; color: var(--ink); font-family: "STSong", "SimSun", Georgia, serif; font-size: 28px; }
.link-library-modal-head p { margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.link-library-modal-close { width: 32px; height: 32px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; cursor: pointer; font-size: 24px; line-height: 1; }
.link-library-modal-close:hover { color: var(--rust-dark); background: var(--pink-soft); }
.link-library-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.link-library-span-all { grid-column: 1 / -1; }
.link-library-field-hint { color: var(--muted); font-size: 10px; font-weight: 400; line-height: 1.5; }
.link-library-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 21px; padding-top: 16px; border-top: 1px solid var(--line); }
@media (max-width: 1100px) { .link-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 850px) {
  .link-library-toolbar { align-items: stretch; flex-wrap: wrap; }
  .link-library-search-field { flex-basis: 100%; }
  .link-library-toolbar > .link-library-field:not(.link-library-search-field) { flex: 1 1 160px; }
}
@media (max-width: 650px) {
  .link-library-page-header { align-items: stretch; flex-direction: column; }
  .link-library-page-header > .primary-button { align-self: flex-start; }
  .link-library-count-row { align-items: flex-start; flex-direction: column; gap: 4px; }
  .link-library-grid { grid-template-columns: 1fr; }
  .link-library-form-grid { grid-template-columns: 1fr; }
  .link-library-span-all { grid-column: auto; }
  .link-library-modal { padding: 10px; }
  .link-library-modal-card { padding: 20px 17px; border-radius: 17px; }
  .link-library-card-footer button.danger { margin-left: 0; }
}

/* Mobile-only additions: desktop keeps its existing header, grid and actions. */
.link-library-mobile-only,
.link-library-mobile-categories,
.link-library-mobile-more,
.link-library-note-toggle,
.link-library-system-heading { display: none; }

/* Quick-save feedback adds no desktop chrome until an actual save/error. */
.link-library-supplementary > summary { display: none; }
.link-library-supplementary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.link-library-title-field { order: -1; }
.link-library-url-group { min-width: 0; }
.link-library-optional-label,
.link-library-required-label { display: inline; font-size: 11px; font-weight: 400; color: var(--muted); }
.link-library-field-error,
.link-library-share-result,
.link-library-duplicate,
.link-library-save-status {
  margin: 9px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.65;
  overflow-wrap: anywhere;
  white-space: pre-line;
  user-select: text;
}
.link-library-field-error { color: #923c27; background: #fff4ee; border-color: #d9a68f; }
.link-library-field input[aria-invalid="true"] { border-color: #b64f36; }
.link-library-share-result,
.link-library-duplicate,
.link-library-save-status { color: var(--ink-soft); background: var(--paper, #fffaf2); }
.link-library-share-result button,
.link-library-duplicate button,
.link-library-save-status button {
  min-height: 44px;
  margin: 6px 6px 0 0;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--rust-dark);
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.link-library-share-result strong,
.link-library-duplicate strong { display: block; }
.link-library-share-result button[data-link-library-share-choice] { display: block; width: 100%; text-align: left; overflow-wrap: anywhere; }
.link-library-save-status { margin: 0 0 12px; }
.link-library-save-status[data-state="synced"] { color: #425443; }
.link-library-save-status[data-state="error"] { color: #923c27; border-color: #d9a68f; }
.link-library-field-error[hidden],
.link-library-share-result[hidden],
.link-library-duplicate[hidden],
.link-library-save-status[hidden] { display: none; }
.link-library-card.is-duplicate-target { outline: 2px solid var(--rust); outline-offset: 3px; }

@media (max-width: 900px) {
  #links .link-library-desktop-only { display: none; }
  #links .link-library-mobile-only { display: inline; }
  #links .link-library-page-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 0;
  }
  #links .link-library-page-header > div { min-width: 0; }
  #links .link-library-page-header .eyebrow,
  #links .link-library-page-header p { display: none; }
  #links .link-library-page-header h1 { margin: 0; font-size: 26px; line-height: 1.3; }
  #links .link-library-page-header > .primary-button {
    flex: 0 0 auto;
    align-self: center;
    min-height: 44px;
    padding: 10px 14px;
    font-size: 13px;
  }
  #links .link-library-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin-top: 16px;
    padding: 0;
    border: 0;
    background: transparent;
  }
  #links .link-library-search-field { display: block; min-width: 0; }
  #links .link-library-search-field .link-library-field-label,
  #links .link-library-category-field { display: none; }
  #links .link-library-search-field input { min-height: 46px; padding: 11px 14px; font-size: 15px; }
  #links .link-library-mobile-categories {
    display: flex;
    gap: 6px;
    min-width: 0;
    overflow-x: auto;
    padding: 1px 0 3px;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }
  #links .link-library-mobile-categories button {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 9px 13px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    background: rgba(255, 253, 248, .76);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
  }
  #links .link-library-mobile-categories button[aria-pressed="true"] {
    border-color: rgba(173, 79, 47, .24);
    color: var(--rust-dark);
    background: var(--pink-soft);
    font-weight: 750;
  }
  #links .link-library-count-row { margin: 12px 2px 10px; font-size: 13px; }
  #links .link-library-count-row > span:last-child { display: none; }
  #links .link-library-search-history button { min-height: 44px; padding: 9px 12px; font-size: 13px; }
  #links .link-library-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  #links .link-library-card { padding: 16px; border-radius: 16px; }
  #links .link-library-card:hover { transform: none; }
  #links .link-library-card-actions-top { display: none; }
  #links .link-library-badge { min-height: 24px; padding: 3px 8px; font-size: 11px; }
  #links .link-library-card h3 { margin: 10px 0 4px; font-size: 20px; overflow-wrap: anywhere; }
  #links .link-library-card-url { font-size: 12px; }
  #links .link-library-card-note {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: 0;
    margin-top: 9px;
    font-size: 13px;
    line-height: 1.6;
    overflow-wrap: anywhere;
    white-space: pre-line;
  }
  #links .link-library-card-note.is-empty,
  #links .link-library-related-recipes.is-empty { display: none; }
  #links .link-library-card.is-note-expanded .link-library-card-note { display: block; }
  #links .link-library-note-toggle {
    display: inline-block;
    align-self: flex-start;
    min-height: 44px;
    padding: 8px 0;
    border: 0;
    background: transparent;
    color: var(--rust-dark);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
  }
  #links .link-library-note-toggle[hidden] { display: none; }
  #links .link-library-tags { margin-top: 9px; }
  #links .link-library-tag { font-size: 11px; overflow-wrap: anywhere; }
  #links .link-library-related-recipes { margin-top: 9px; font-size: 12px; }
  #links .link-library-card-footer { gap: 8px; margin-top: 12px; }
  #links .link-library-card-footer > button { min-height: 44px; padding: 9px 12px; font-size: 12px; }
  #links .link-library-card-footer > [data-link-library-copy],
  #links .link-library-card-footer > [data-link-library-edit],
  #links .link-library-card-footer > [data-link-library-delete] { display: none; }
  #links .link-library-mobile-more { position: relative; display: block; margin-left: auto; }
  #links .link-library-mobile-more > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
  }
  #links .link-library-mobile-more > summary::-webkit-details-marker { display: none; }
  #links .link-library-mobile-more[open] > summary { background: var(--pink-soft); color: var(--rust-dark); }
  #links .link-library-more-panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 5;
    display: grid;
    width: 154px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--paper, #fffaf2);
    box-shadow: 0 10px 32px rgba(48, 36, 29, .14);
  }
  #links .link-library-more-panel button {
    min-height: 44px;
    padding: 10px 12px;
    border: 0;
    background: transparent;
    text-align: left;
    font-size: 13px;
  }
  #links .link-library-more-panel button:first-child { background: transparent; color: var(--muted); }
  #links .link-library-system-heading {
    display: block;
    margin: 12px 2px 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
  }
  #links .link-library-grid-empty { padding: 24px 16px; font-size: 13px; line-height: 1.7; }
  #links .link-library-grid-empty button { display: block; min-height: 44px; margin: 12px auto 0; }
  #linkLibraryModal {
    top: var(--link-library-viewport-top, 0px);
    bottom: auto;
    height: var(--link-library-viewport-height, 100dvh);
    padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
    overflow: hidden;
  }
  #linkLibraryModal .link-library-modal-card {
    display: flex;
    flex-direction: column;
    width: min(560px, 100%);
    max-height: 100%;
    padding: 0;
    overflow: hidden;
    border-radius: 18px;
  }
  #linkLibraryModal .link-library-modal-head {
    flex: 0 0 auto;
    align-items: center;
    margin: 0;
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--line);
  }
  #linkLibraryModal .link-library-kicker { display: none; }
  #linkLibraryModal .link-library-modal-head h2 { margin: 0; font-size: 25px; }
  #linkLibraryModal .link-library-modal-head p { margin-top: 5px; font-size: 12px; }
  #linkLibraryModal .link-library-modal-close { flex: 0 0 auto; width: 44px; height: 44px; }
  #linkLibraryForm { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
  #linkLibraryModal .link-library-form-grid {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    min-height: 0;
    gap: 14px;
    padding: 16px 18px 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block: 12px;
  }
  #linkLibraryModal .link-library-span-all { grid-column: auto; }
  #linkLibraryModal .link-library-title-field { order: 0; }
  #linkLibraryModal .link-library-supplementary > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--muted);
    font-size: 14px;
    cursor: pointer;
    list-style: none;
  }
  #linkLibraryModal .link-library-supplementary > summary::-webkit-details-marker { display: none; }
  #linkLibraryModal .link-library-supplementary > summary::after { content: "＋"; font-size: 18px; }
  #linkLibraryModal .link-library-supplementary[open] > summary::after { content: "−"; }
  #linkLibraryModal .link-library-supplementary-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-top: 14px; }
  #linkLibraryModal .link-library-field-error,
  #linkLibraryModal .link-library-share-result,
  #linkLibraryModal .link-library-duplicate { font-size: 13px; }
  #linkLibraryModal .link-library-field { font-size: 13px; }
  #linkLibraryModal .link-library-field input,
  #linkLibraryModal .link-library-field select,
  #linkLibraryModal .link-library-field textarea { min-height: 46px; padding: 11px 12px; font-size: 16px; }
  #linkLibraryModal .link-library-field textarea { min-height: 110px; }
  #linkLibraryModal .link-library-field-hint { font-size: 12px; line-height: 1.6; }
  #linkLibraryModal .link-library-form-actions {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 10px;
    margin: 0;
    padding: 12px 18px max(12px, env(safe-area-inset-bottom));
    background: var(--paper, #fffaf2);
  }
  #linkLibraryModal .link-library-form-actions button { width: 100%; min-height: 46px; font-size: 15px; }
  #links button:focus-visible,
  #links summary:focus-visible,
  #linkLibraryModal button:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }
}
/* V0.7 phase 1: compact mobile-first search workbench. */
.global-search-desktop-form,
.global-search-desktop-history-empty,
.global-search-desktop-summary { display: none; }
.global-search-focus-entry,
.global-search-preview { display: none; }
.global-search-preview[hidden] { display: none !important; }

/* Desktop-only candidate: leave the <=900px search canvas untouched. */
@media (min-width: 901px) {
  body:has(#global-search.view.active) .topbar .search-box { display: none; }
  body:has(#global-search.view.active) .topbar .global-search-focus-entry {
    display: inline-flex; align-items: center; min-height: 40px; margin-right: auto;
    padding: 8px 14px; border: 1px solid var(--line); border-radius: 12px;
    color: var(--muted); background: var(--card); cursor: pointer; font: inherit; font-size: 13px;
  }
  .global-search-focus-entry:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }
  #global-search.view::before { height: 230px; opacity: .65; }
  #global-search .global-search-page-header { margin-bottom: 16px; }
  #global-search.view.active > .global-search-page-header.global-search-page-header h1 { font-size: 34px !important; }
  #global-search .global-search-notice { display: none; }
  #global-search .global-search-type-filters { margin-right: 0; margin-left: 0; }
  #global-search .global-search-desktop-form { display: block; max-width: 1000px; margin: 0 0 16px; }
  .global-search-desktop-form > label { display: block; margin-bottom: 8px; color: var(--global-search-ink); font-size: 13px; font-weight: 700; }
  .global-search-desktop-field { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 6px 8px 6px 18px; border: 1px solid var(--global-search-border); border-radius: 16px; background: var(--global-search-surface); box-shadow: 0 5px 18px rgba(110, 56, 31, .05); }
  .global-search-desktop-field:focus-within { border-color: var(--global-search-accent); box-shadow: 0 0 0 3px rgba(195, 73, 37, .12); }
  .global-search-desktop-field > span { color: var(--global-search-accent); font-size: 24px; }
  .global-search-desktop-field input { flex: 1; width: 100%; min-width: 0; padding: 10px 0; border: 0; outline: none; color: var(--global-search-ink); background: transparent; font: inherit; font-size: 16px; }
  .global-search-desktop-field input::-webkit-search-cancel-button { display: none; }
  .global-search-desktop-field .primary-button { flex: 0 0 auto; min-height: 42px; padding: 8px 22px; }
  .global-search-desktop-hint { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; margin: 9px 2px 0; color: var(--global-search-muted); font-size: 11px; line-height: 1.6; }
  .global-search-desktop-hint kbd { font: inherit; padding: 1px 5px; border: 1px solid var(--global-search-border); border-radius: 4px; background: var(--global-search-surface); }
  #global-search .global-search-start { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; gap: 18px; }
  #global-search .global-search-history,
  #global-search .global-search-start-block,
  #global-search .global-search-desktop-history-empty { min-width: 0; padding: 20px; border-radius: 18px; box-shadow: 0 5px 16px rgba(110, 56, 31, .04); }
  #global-search .global-search-history { gap: 12px; }
  #global-search .global-search-history-row { min-height: 44px; }
  #global-search .global-search-history-time { font-size: 11px; }
  #global-search .global-search-section-heading > strong { font-size: 19px; }
  #global-search .global-search-suggestion-list { flex-wrap: wrap; overflow: visible; gap: 10px; margin-top: 18px; }
  #global-search .global-search-suggestion-list button { min-height: 38px; padding: 6px 14px; }
  #global-search .global-search-desktop-history-empty { border: 1px solid rgba(227, 212, 201, .76); background: var(--global-search-surface); }
  #globalSearchHistory[hidden] + .global-search-desktop-history-empty { display: block; }
  .global-search-desktop-history-empty p { margin: 22px 0 8px; color: var(--global-search-muted); font-size: 14px; }
  .global-search-desktop-history-empty small { color: var(--global-search-muted); line-height: 1.7; }
  #global-search .global-search-mobile-summary { display: none; }
  #global-search .global-search-desktop-summary { display: inline; }
}

/* Round 2: a desktop reading workbench, not a second detail editor. */
@media (min-width: 901px) {
  #global-search .global-search-workbench { min-width: 0; }
  #global-search .global-search-workbench.has-preview {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(240px, .85fr);
    align-items: start; gap: 18px;
  }
  #global-search .global-search-results { min-width: 0; align-content: start; }
  #global-search .global-search-result-card {
    display: flex; flex-direction: column; gap: 7px; padding: 18px 20px; cursor: pointer;
  }
  #global-search .global-search-result-card:focus-visible {
    outline: 2px solid var(--global-search-accent); outline-offset: 2px;
  }
  #global-search .global-search-result-card.is-preview-selected {
    border-color: var(--global-search-accent); background: var(--global-search-surface);
    box-shadow: inset 3px 0 var(--global-search-accent);
  }
  #global-search .global-search-result-card h3 { font-size: 21px; overflow-wrap: anywhere; }
  #global-search .global-search-result-card .global-search-result-core-meta { font-size: 12px; }
  #global-search .global-search-result-card .global-search-match-reason,
  #global-search .global-search-preview .global-search-match-reason {
    margin: 0; color: var(--global-search-muted); font-size: 13px; line-height: 1.65;
    overflow-wrap: anywhere;
  }
  #global-search .global-search-match-reason strong { font-weight: 650; color: var(--global-search-ink); }
  #global-search .global-search-result-footer {
    display: flex; align-items: flex-end; flex-wrap: wrap; justify-content: space-between; gap: 10px;
    margin-top: 4px;
  }
  #global-search .global-search-result-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  #global-search .global-search-relations { padding-top: 0; border: 0; }
  #global-search .global-search-hit-chip {
    padding: 4px 8px; border-radius: 8px; color: #795b22; background: #faf0d2;
    font-size: 11px; overflow-wrap: anywhere;
  }
  #global-search .global-search-result-updated { color: var(--global-search-muted); font-size: 11px; }
  #global-search .global-search-preview {
    display: block; box-sizing: border-box; position: sticky; top: 132px; min-width: 0;
    max-height: calc(100dvh - 156px); overflow: auto; overscroll-behavior: contain;
    padding: 20px; border: 1px solid var(--global-search-border); border-radius: 18px;
    background: var(--global-search-surface); box-shadow: 0 6px 20px rgba(110, 56, 31, .04);
    scrollbar-width: thin;
  }
  #global-search .global-search-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  #global-search .global-search-preview-head strong { color: var(--global-search-accent); font-size: 13px; }
  #global-search .global-search-preview-head button {
    width: 32px; height: 32px; flex: 0 0 32px; border: 0; border-radius: 8px;
    background: var(--global-search-soft); color: var(--global-search-muted); font-size: 22px; cursor: pointer;
  }
  #global-search .global-search-preview h2 {
    margin: 12px 0 8px; color: var(--global-search-ink); font-family: var(--font-serif);
    font-size: 25px; line-height: 1.35; overflow-wrap: anywhere;
  }
  #global-search .global-search-preview-meta { color: var(--global-search-muted); font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }
  #global-search .global-search-preview-matches {
    padding: 12px; border-radius: 10px; background: var(--global-search-canvas); margin: 16px 0;
  }
  #global-search .global-search-preview-section { margin: 18px 0; }
  #global-search .global-search-preview-section h3 { margin: 0 0 8px; font-size: 14px; color: var(--global-search-ink); }
  #global-search .global-search-preview-section p {
    margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--global-search-ink); font-size: 13px; line-height: 1.8;
  }
  #global-search .global-search-preview mark { color: inherit; padding: 0 2px; border-radius: 3px; background: #faf0d2; }
  #global-search .global-search-preview-actions {
    display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--global-search-border); padding-top: 16px;
  }
  #global-search .global-search-preview-actions button,
  #global-search .global-search-preview-actions a {
    padding: 8px 12px; min-height: 36px; border: 1px solid var(--global-search-border); border-radius: 9px;
    color: var(--global-search-accent); background: var(--global-search-surface); cursor: pointer;
    text-decoration: none; font-size: 12px;
  }
  #global-search .global-search-preview button:focus-visible,
  #global-search .global-search-preview a:focus-visible { outline: 2px solid var(--global-search-accent); outline-offset: 2px; }
  #global-search .global-search-preview-tip { display: block; margin-top: 12px; color: var(--global-search-muted); font-size: 11px; line-height: 1.6; }
}

#global-search.view.active { animation: global-search-fade-in .2s ease both; }
@keyframes global-search-fade-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  #global-search.view.active { animation: none; }
}

#global-search {
  --global-search-sticky-top: 68px;
  --global-search-canvas: #FBF8F2;
  --global-search-surface: #FFFEFC;
  --global-search-accent: #C34925;
  --global-search-ink: #2C1309;
  --global-search-muted: #7B6E66;
  --global-search-border: #E3D4C9;
  --global-search-soft: #F6E9DE;
  position: relative;
  isolation: isolate;
  background: var(--global-search-canvas);
}
#global-search::before {
  position: absolute;
  inset: 0 0 auto;
  z-index: 0;
  height: clamp(260px, 50vw, 470px);
  background-image:
    linear-gradient(90deg, rgba(251, 248, 242, .95) 0%, rgba(251, 248, 242, .58) 47%, rgba(251, 248, 242, .08) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(251, 248, 242, .74)),
    var(--global-search-hero-image, url("./figma-global-search-hero.webp")),
    linear-gradient(180deg, #E8D6BF 0%, #FCF5E8 42%, #FBF8F2 100%);
  background-position: center right;
  background-size: cover;
  background-repeat: no-repeat;
  content: "";
  pointer-events: none;
}
#global-search > * { position: relative; z-index: 1; }
#global-search > .global-search-type-filters { position: sticky; }

.global-search-page-header {
  display: block !important;
  align-items: flex-end;
  margin-bottom: 13px;
}
.global-search-page-header > div { min-width: 0; }
.global-search-page-header h1,
#global-search.view.active > .global-search-page-header h1 {
  margin: 0 0 5px !important;
  color: var(--global-search-ink);
  font-family: var(--font-serif);
  font-size: clamp(34px, 6.6vw, 62px) !important;
  font-weight: 700;
  letter-spacing: -.045em !important;
  line-height: 1.18 !important;
}
.global-search-page-header p,
#global-search.view.active > .global-search-page-header p {
  display: block !important;
  margin: 0 !important;
  color: var(--global-search-muted);
  font-size: 13px !important;
  line-height: 1.55 !important;
}

.global-search-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0 0 9px;
  padding: 9px 11px;
  border: 1px solid rgba(227, 212, 201, .8);
  border-radius: 13px;
  color: var(--global-search-muted);
  background: rgba(255, 254, 252, .78);
  font-size: 11px;
  line-height: 1.5;
}
.global-search-notice-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--global-search-accent);
  background: var(--global-search-soft);
  font-family: Georgia, serif;
  font-size: 11px;
  font-weight: 700;
}

.global-search-top-clear {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.global-search-top-clear:hover,
.global-search-top-clear:focus-visible {
  color: var(--global-search-accent);
  background: var(--global-search-soft);
}

.global-search-type-filters {
  box-sizing: border-box;
  position: sticky;
  top: var(--global-search-sticky-top);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  margin: 0 -4px 7px;
  padding: 6px 4px;
  min-height: 48px;
  border-bottom: 1px solid rgba(227, 212, 201, .82);
  background: rgba(251, 248, 242, .88);
  backdrop-filter: blur(14px);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.global-search-type-filters::-webkit-scrollbar { display: none; }
.global-search-type-filters button {
  min-height: 36px;
  padding: 5px 11px;
  border: 1px solid rgba(227, 212, 201, .9);
  border-radius: 999px;
  color: var(--global-search-muted);
  background: rgba(255, 254, 252, .76);
  white-space: nowrap;
  cursor: pointer;
  font-size: 11px;
  font-weight: 750;
}
.global-search-type-filters button[aria-pressed="true"] {
  border-color: var(--global-search-accent);
  color: #fff;
  background: var(--global-search-accent);
}
.global-search-type-filters button span {
  display: inline-grid;
  min-width: 17px;
  height: 17px;
  margin-left: 3px;
  padding: 0 4px;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 254, 252, .9);
  color: var(--global-search-accent);
  font-size: 9px;
}
.global-search-type-filters button[aria-pressed="true"] span {
  color: var(--global-search-accent);
}

.global-search-summary {
  min-height: 20px;
  margin: 0 2px 8px;
  color: var(--global-search-muted);
  font-size: 12px;
  line-height: 1.5;
}
.global-search-summary strong { color: var(--global-search-accent); }

.global-search-start {
  display: grid;
  gap: 12px;
  margin: 0 0 16px;
}
.global-search-start[hidden] { display: none; }
.global-search-start-block {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(227, 212, 201, .76);
  border-radius: 18px;
  background: var(--global-search-surface);
  box-shadow: 0 8px 24px rgba(110, 56, 31, .08);
}
.global-search-section-heading {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 9px;
}
.global-search-section-heading > strong {
  min-width: 0;
  overflow: hidden;
  color: var(--global-search-ink);
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.global-search-section-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--global-search-accent);
  background: var(--global-search-soft);
  font-size: 17px;
  line-height: 1;
}
.global-search-section-action {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 4px 5px;
  border: 0;
  color: var(--global-search-muted);
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  white-space: nowrap;
}
.global-search-section-action > span:first-child { font-size: 18px; line-height: 1; }
.global-search-section-action:hover,
.global-search-section-action:focus-visible { color: var(--global-search-accent); }
.global-search-suggestion-list {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 13px;
  padding: 1px 1px 3px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.global-search-suggestion-list::-webkit-scrollbar { display: none; }
.global-search-suggestion-list button {
  min-height: 40px;
  flex: 0 0 auto;
  padding: 7px 16px;
  border: 1px solid rgba(227, 171, 143, .74);
  border-radius: 999px;
  color: var(--global-search-accent);
  background: var(--global-search-surface);
  cursor: pointer;
  font-size: 13px;
  white-space: nowrap;
}
.global-search-suggestion-list button:hover,
.global-search-suggestion-list button:focus-visible {
  border-color: var(--global-search-accent);
  background: var(--global-search-soft);
}

.global-search-history {
  display: grid;
  gap: 9px;
  padding: 14px;
  border: 1px solid rgba(227, 212, 201, .76);
  border-radius: 18px;
  background: var(--global-search-surface);
  box-shadow: 0 8px 24px rgba(110, 56, 31, .08);
}
.global-search-history[hidden] { display: none; }
.global-search-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.global-search-history-head .global-search-section-heading { flex: 1 1 auto; }
.global-search-history button.clear {
  min-height: 26px;
  padding: 3px 6px;
  border: 0;
  color: var(--global-search-muted);
  background: transparent;
  cursor: pointer;
  font-size: 10px;
}
.global-search-history button.clear:hover,
.global-search-history button.clear:focus-visible { color: var(--global-search-accent); }
.global-search-history-list {
  display: grid;
  gap: 0;
}
.global-search-history-row {
  min-width: 0;
  min-height: 44px;
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr) auto 32px;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(227, 217, 207, .8);
}
.global-search-history-row:last-child { border-bottom: 0; }
.global-search-history-query {
  min-width: 0;
  min-height: 40px;
  grid-column: 1 / 3;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 0;
  border: 0;
  color: var(--global-search-ink);
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  text-align: left;
}
.global-search-history-search-icon {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  display: grid;
  place-items: center;
  color: var(--global-search-muted);
  font-size: 20px;
  line-height: 1;
  transform: rotate(-20deg);
}
.global-search-history-query > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.global-search-history-time {
  grid-column: 3;
  color: var(--global-search-muted);
  font-size: 11px;
  white-space: nowrap;
}
.global-search-history-remove {
  width: 32px;
  height: 40px;
  grid-column: 4;
  padding: 0;
  overflow: hidden;
  border: 0;
  color: var(--global-search-muted);
  background: transparent;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}
.global-search-history-query:hover,
.global-search-history-query:focus-visible,
.global-search-history-remove:hover,
.global-search-history-remove:focus-visible { color: var(--global-search-accent); }
.global-search-history-query:focus-visible,
.global-search-history-remove:focus-visible,
.global-search-section-action:focus-visible,
.global-search-history button.clear:focus-visible,
.global-search-suggestion-list button:focus-visible {
  outline: 2px solid rgba(195, 73, 37, .35);
  outline-offset: 2px;
}
.global-search-results { display: grid; gap: 8px; }
.global-search-empty {
  min-height: 0;
  padding: 20px 16px;
  border: 1px dashed rgba(110, 83, 57, .18);
  border-radius: 14px;
  background: rgba(255, 255, 255, .38);
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
}
.global-search-empty span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--rust);
  background: var(--pink-soft);
  font-size: 20px;
}
.global-search-empty strong { margin-top: 9px; font-family: var(--font-serif); font-size: 17px; }
.global-search-empty p { max-width: 560px; margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }

.global-search-result-card {
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid rgba(110, 83, 57, .14);
  border-radius: 15px;
  background: rgba(255, 253, 248, .62);
  box-shadow: 0 5px 16px rgba(74, 53, 38, .025);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
}
.global-search-result-card:hover { border-color: rgba(173, 79, 47, .26); background: var(--surface-raised, rgba(255, 253, 248, .9)); }
.global-search-result-main { min-width: 0; }
.global-search-result-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-bottom: 4px; }
.global-search-result-type,
.global-search-result-meta small,
.global-search-relation-chip {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  max-width: 100%;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 780;
}
.global-search-result-type { color: var(--rust-dark); background: var(--pink-soft); }
.global-search-result-meta small { overflow: hidden; color: var(--muted); background: rgba(255, 255, 255, .52); text-overflow: ellipsis; white-space: nowrap; }
.global-search-result-meta small.global-search-result-updated { background: transparent; }
.global-search-result-card h3 { margin: 0; font-family: var(--font-serif); font-size: 17px; line-height: 1.3; }
.global-search-result-card p { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; overflow-wrap: anywhere; }
.global-search-result-card mark { padding: 0 2px; border-radius: 3px; color: inherit; background: rgba(228, 184, 79, .34); }
.global-search-relations { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 5px; padding-top: 7px; border-top: 1px solid rgba(110, 83, 57, .09); }
.global-search-relations > small { margin-right: 1px; color: var(--muted); font-size: 9px; font-weight: 800; }
.global-search-relation-chip { color: #425443; background: var(--olive-soft); }
.global-search-relation-empty { color: var(--muted); font-size: 9px; }
.global-search-result-actions { align-self: start; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; max-width: 330px; }
.global-search-result-actions button,
.global-search-result-actions a {
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid rgba(110, 83, 57, .14);
  border-radius: 10px;
  color: var(--ink);
  background: rgba(255, 253, 248, .8);
  text-decoration: none;
  cursor: pointer;
  font-size: 10px;
  font-weight: 750;
}
.global-search-result-actions button.primary { border-color: transparent; color: var(--accent-contrast, #fff); background: var(--rust); }
.global-search-result-actions button:hover,
.global-search-result-actions a:hover { border-color: rgba(173, 79, 47, .4); color: var(--rust-dark); }
.global-search-result-actions button.primary:hover { color: var(--accent-contrast, #fff); background: var(--rust-dark); }

.link-library-related-recipes { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-top: 7px; color: var(--muted); font-size: 10px; }
.link-library-related-recipes strong { max-width: 72%; color: #425443; text-align: right; overflow-wrap: anywhere; }
.link-library-related-recipes.is-empty strong { color: var(--muted); font-weight: 650; }

.global-relation-modal {
  position: fixed;
  inset: 0;
  z-index: 180;
  padding: 24px;
  background: var(--theme-modal-overlay, rgba(44, 35, 25, .32));
  display: grid;
  place-items: center;
}
.global-relation-modal[hidden] { display: none; }
.global-relation-modal-card { width: min(720px, 100%); max-height: min(820px, calc(100vh - 48px)); overflow: auto; padding: 20px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: 0 26px 80px rgba(40, 28, 18, .22); }
.global-relation-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.global-relation-modal-head h2 { margin: 4px 0 3px; font-family: var(--font-serif); font-size: 24px; }
.global-relation-modal-head p { margin: 0; color: var(--muted); font-size: 11px; }
.global-relation-modal-head > button { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 12px; background: var(--control-surface); cursor: pointer; font-size: 20px; }
.global-relation-search-field { display: grid; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 800; }
.global-relation-search-field input { width: 100%; min-height: 44px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 11px; outline: none; color: var(--ink); background: var(--control-surface); }
.global-relation-search-field input:focus { border-color: rgba(173, 79, 47, .58); box-shadow: var(--focus-ring); }
.global-relation-recipe-list { display: grid; gap: 7px; max-height: 430px; overflow: auto; margin: 12px 0; padding: 2px; }
.global-relation-recipe-option { min-height: 54px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-soft); display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; cursor: pointer; }
.global-relation-recipe-option:hover { border-color: rgba(173, 79, 47, .3); }
.global-relation-recipe-option input { width: 19px; height: 19px; accent-color: var(--rust); }
.global-relation-recipe-option strong { display: block; font-size: 12px; }
.global-relation-recipe-option small { display: block; color: var(--muted); font-size: 9px; }
.global-relation-modal-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.global-relation-modal-actions > span { margin-right: auto; color: var(--muted); font-size: 10px; }

/* V0.8 mobile search canvas. The desktop workbench keeps its existing layout;
   only the mobile breakpoint follows the connected 393px reference frames. */
@media (max-width: 900px) {
  html:has(#global-search.view.active),
  body:has(#global-search.view.active) {
    background: var(--global-search-canvas, #FBF8F2);
  }

  body:has(#global-search.view.active) .topbar {
    box-sizing: border-box;
    height: 72px;
    min-width: 0;
    gap: 8px;
    padding: 0 16px;
    overflow: visible;
    background: #F9F4E9;
  }

  body:has(#global-search.view.active) .topbar .sidebar-toggle-button {
    display: none !important;
  }

  body:has(#global-search.view.active) .topbar .mobile-title {
    box-sizing: border-box;
    width: 40px;
    min-width: 40px;
    flex: 0 0 40px;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 0;
    overflow: visible;
  }

  body:has(#global-search.view.active) .topbar .mobile-title #activeViewLabel {
    display: none !important;
  }

  body:has(#global-search.view.active) .topbar .mobile-brand {
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 14px 14px 14px 5px;
    color: #fffaf0;
    background: #C34925;
    box-shadow: none;
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 700;
  }

  body:has(#global-search.view.active) .topbar .search-box {
    box-sizing: border-box;
    width: 170px;
    min-width: 170px;
    max-width: 170px;
    height: 42px;
    flex: 0 0 170px;
    padding: 0 9px 0 12px;
    border: 1px solid #E7D8CD;
    border-radius: 21px;
    background: #FFFEFC;
    box-shadow: none;
  }

  body:has(#global-search.view.active) .topbar .search-symbol {
    color: #80756E;
    font-size: 18px;
  }

  body:has(#global-search.view.active) .topbar .search-box input {
    min-width: 0;
    font-size: 13px;
  }

  body:has(#global-search.view.active) .topbar .search-shortcut {
    display: none;
  }

  body:has(#global-search.view.active) .topbar .global-search-top-clear {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
    color: #80756E;
    font-size: 17px;
  }

  body:has(#global-search.view.active) .topbar .top-actions {
    box-sizing: border-box;
    min-width: 0;
    flex: 0 0 auto;
    gap: 8px;
  }

  body:has(#global-search.view.active) .topbar .top-actions > .theme-settings-button,
  body:has(#global-search.view.active) .topbar .top-actions > .today,
  body:has(#global-search.view.active) .topbar .top-actions > .density-toggle {
    display: none !important;
  }

  body:has(#global-search.view.active) .topbar .top-actions > .sidebar-settings-button,
  body:has(#global-search.view.active) .topbar .top-actions > .primary-button,
  body:has(#global-search.view.active) .topbar .top-actions > .v07-permission-dock,
  body:has(#global-search.view.active) .topbar .top-actions > .v07-permission-dock .v07-account-trigger {
    box-sizing: border-box;
    height: 40px;
    min-height: 40px;
  }

  body:has(#global-search.view.active) .topbar .top-actions > .sidebar-settings-button {
    width: 36px;
    min-width: 36px;
    padding: 0;
    border-color: #E7D8CD;
    border-radius: 12px;
    color: #544D47;
    background: #FFFEFC;
    font-size: 0;
  }

  body:has(#global-search.view.active) .topbar .top-actions > .sidebar-settings-button > span:first-child {
    font-size: 0;
  }

  body:has(#global-search.view.active) .topbar .top-actions > .sidebar-settings-button > span:first-child::before {
    content: "☰";
    font-size: 17px;
    line-height: 1;
  }

  body:has(#global-search.view.active) .topbar .top-actions > .primary-button {
    width: 44px;
    min-width: 44px;
    padding: 0;
    border-color: #C34925;
    border-radius: 12px;
    font-size: 0;
  }

  body:has(#global-search.view.active) .topbar .top-actions > .primary-button::after {
    content: "+";
    color: #fffaf0;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
  }

  body:has(#global-search.view.active) .topbar .top-actions > .v07-permission-dock {
    position: relative;
    inset: auto;
    width: 38px;
    min-width: 38px;
    flex: 0 0 38px;
    overflow: visible;
    font-size: 0;
  }

  body:has(#global-search.view.active) .topbar .top-actions > .v07-permission-dock .v07-account-trigger {
    width: 38px;
    min-width: 38px;
    padding: 5px;
    border-color: #E7D8CD;
    border-radius: 12px;
    background: #FFFEFC;
  }

  body:has(#global-search.view.active) .topbar .top-actions > .v07-permission-dock .v07-account-avatar {
    width: 26px;
    height: 26px;
    color: #8A4A35;
    background: #F6E9DE;
    font-size: 13px;
  }

  body:has(#global-search.view.active) .topbar .top-actions > .v07-permission-dock #v07AccountName,
  body:has(#global-search.view.active) .topbar .top-actions > .v07-permission-dock .v07-account-chevron {
    display: none;
  }

  body:has(#global-search.view.active) .content {
    box-sizing: border-box;
    width: 100%;
    height: calc(100dvh - 72px - 82px);
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 0 0 24px;
    overflow-x: hidden;
    overflow-y: auto;
    background: #FBF8F2;
    overscroll-behavior-y: contain;
  }

  #global-search {
    --global-search-sticky-top: 0px;
    box-sizing: border-box;
    width: 100%;
    min-height: 100%;
    margin: 0;
    overflow: visible;
    background: #FBF8F2;
  }

  #global-search::before {
    display: none;
  }

  #global-search > * {
    position: relative;
    z-index: 1;
  }

  #global-search .global-search-page-header {
    box-sizing: border-box;
    height: 120px;
    margin: 0 !important;
    padding: 16px 20px 0;
    display: block !important;
  }

  #global-search .global-search-page-header h1,
  #global-search.view.active > .global-search-page-header h1 {
    margin: 0 0 5px !important;
    color: #2C1309;
    font-family: var(--font-serif);
    font-size: 30px !important;
    font-weight: 700;
    letter-spacing: -.04em !important;
    line-height: 1.2 !important;
  }

  #global-search .global-search-page-header p,
  #global-search.view.active > .global-search-page-header p {
    max-width: none;
    margin: 0 !important;
    color: #80756E;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  #global-search .global-search-notice {
    position: absolute;
    top: 94px;
    right: 20px;
    left: 20px;
    z-index: 2;
    display: block;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #9A8D84;
    background: transparent;
    font-size: 10px;
    line-height: 1.45;
  }

  #global-search .global-search-notice-icon {
    display: none;
  }

  #global-search .global-search-type-filters {
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: 20;
    width: 100%;
    height: 52px;
    min-height: 52px;
    margin: 0;
    padding: 7px 14px 11px;
    gap: 5px;
    border: 0;
    background: rgba(251, 248, 242, .96);
    backdrop-filter: blur(12px);
  }

  #global-search .global-search-type-filters button {
    box-sizing: border-box;
    min-height: 34px;
    height: 34px;
    padding: 4px 10px;
    border: 1px solid #E7D8CD;
    border-radius: 18px;
    color: #80756E;
    background: #FFFEFC;
    font-size: 12px;
    font-weight: 650;
  }

  #global-search .global-search-type-filters button[aria-pressed="true"] {
    border-color: #C34925;
    color: #fffaf0;
    background: #C34925;
  }

  #global-search .global-search-type-filters button span {
    min-width: 15px;
    height: 16px;
    margin-left: 3px;
    padding: 0 3px;
    color: #C34925;
    background: rgba(255, 254, 252, .84);
    font-size: 10px;
  }

  #global-search .global-search-summary {
    box-sizing: border-box;
    height: 36px;
    min-height: 36px;
    margin: 0;
    padding: 8px 20px 0;
    color: #80756E;
    font-size: 12px;
    line-height: 18px;
  }

  #global-search .global-search-summary strong {
    color: #C34925;
  }

  #global-search .global-search-start {
    display: grid;
    gap: 0;
    margin: 0;
  }

  #global-search .global-search-start[hidden],
  #global-search .global-search-history[hidden] {
    display: none !important;
  }

  #global-search .global-search-history,
  #global-search .global-search-start-block {
    box-sizing: border-box;
    width: calc(100% - 32px);
    margin-right: 16px;
    margin-left: 16px;
    border: 1px solid rgba(229, 217, 204, .7);
    border-radius: 18px;
    background: rgba(255, 254, 252, .92);
    box-shadow: none;
  }

  #global-search .global-search-history {
    height: 246px;
    min-height: 246px;
    gap: 0;
    padding: 0 14px;
  }

  #global-search .global-search-history-head {
    height: 40px;
    min-height: 40px;
    gap: 8px;
  }

  #global-search .global-search-section-heading {
    gap: 7px;
  }

  #global-search .global-search-section-icon {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
    color: #C34925;
    background: #F6E9DE;
    font-size: 14px;
  }

  #global-search .global-search-section-heading > strong {
    color: #2C1309;
    font-size: 16px;
  }

  #global-search .global-search-history button.clear {
    min-height: 26px;
    padding: 3px 0;
    color: #80756E;
    font-size: 11px;
  }

  #global-search .global-search-history-list {
    flex: 1 1 auto;
  }

  #global-search .global-search-history-row {
    box-sizing: border-box;
    min-height: 46px;
    height: 46px;
    grid-template-columns: 26px minmax(0, 1fr) auto 28px;
    gap: 7px;
    border-bottom-color: rgba(229, 217, 204, .72);
  }

  #global-search .global-search-history-query {
    min-height: 40px;
    gap: 8px;
    padding: 3px 0;
    color: #2C1309;
    font-size: 13px;
  }

  #global-search .global-search-history-search-icon {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
    color: #80756E;
    font-size: 18px;
  }

  #global-search .global-search-history-time {
    color: #9A8D84;
    font-size: 10px;
  }

  #global-search .global-search-history-remove {
    width: 28px;
    height: 40px;
    color: #9A8D84;
    font-size: 19px;
  }

  #global-search .global-search-suggestion-block {
    height: 124px;
    min-height: 124px;
    padding: 14px;
  }

  #global-search .global-search-suggestion-list {
    gap: 7px;
    margin-top: 11px;
    padding: 0 1px 2px;
  }

  #global-search .global-search-suggestion-list button {
    min-height: 32px;
    height: 32px;
    padding: 4px 14px;
    border: 1px solid #E4B18F;
    border-radius: 16px;
    color: #C34925;
    background: #FFFEFC;
    font-size: 12px;
  }

  #global-search .global-search-results {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0 14px 24px;
  }

  #global-search .global-search-result-card {
    box-sizing: border-box;
    width: 100%;
    min-height: 176px;
    padding: 14px;
    border: 1px solid rgba(229, 217, 204, .8);
    border-radius: 16px;
    background: rgba(255, 254, 252, .92);
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    cursor: pointer;
  }

  #global-search .global-search-result-card:hover {
    border-color: rgba(195, 73, 37, .3);
    background: #FFFEFC;
  }

  #global-search .global-search-result-card:focus-visible {
    outline: 2px solid rgba(195, 73, 37, .45);
    outline-offset: 2px;
  }

  #global-search .global-search-result-meta {
    box-sizing: border-box;
    width: 100%;
    min-height: 22px;
    margin: 0 0 7px;
    justify-content: space-between;
    gap: 8px;
  }

  #global-search .global-search-result-type {
    min-height: 22px;
    padding: 4px 8px;
    border-radius: 11px;
    color: #A34C31;
    background: #F7E8DE;
    font-size: 10px;
    font-weight: 750;
  }

  #global-search .global-search-result-updated {
    min-width: 0;
    overflow: hidden;
    color: #9A8D84;
    font-size: 11px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #global-search .global-search-result-card h3 {
    display: -webkit-box;
    max-height: 46px;
    margin: 0;
    overflow: hidden;
    color: #2C1309;
    font-family: var(--font-serif);
    font-size: 18px;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  #global-search .global-search-result-card p {
    margin: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
  }

  #global-search .global-search-result-core-meta {
    display: -webkit-box;
    max-height: 18px;
    margin-top: 4px !important;
    color: #544D47;
    font-size: 12px;
    line-height: 18px;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  #global-search .global-search-result-excerpt {
    display: -webkit-box;
    max-height: 52px;
    margin-top: 4px !important;
    color: #80756E;
    font-size: 12px;
    line-height: 17px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  #global-search .global-search-result-card mark {
    padding: 0 1px;
    border-radius: 2px;
    color: inherit;
    background: #F6E3A5;
  }

  #global-search .global-search-result-footer {
    min-width: 0;
    min-height: 28px;
    margin-top: auto;
    padding-top: 8px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
  }

  #global-search .global-search-result-badges {
    min-width: 0;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 5px;
  }

  #global-search .global-search-hit-chip,
  #global-search .global-search-relation-chip,
  #global-search .global-search-relation-empty {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 22px;
    padding: 4px 8px;
    border-radius: 11px;
    font-size: 10px;
    line-height: 14px;
    white-space: nowrap;
  }

  #global-search .global-search-hit-chip {
    color: #7A5E17;
    background: #FAF0CC;
  }

  #global-search .global-search-relations {
    grid-column: auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
  }

  #global-search .global-search-relation-chip {
    overflow: hidden;
    color: #405C42;
    background: #E5F0E0;
    text-overflow: ellipsis;
  }

  #global-search .global-search-relation-empty {
    color: #9A8D84;
    background: #F7F2EC;
  }

  #global-search .global-search-result-actions {
    min-width: 0;
    max-width: 48%;
    flex: 0 0 auto;
    align-self: flex-end;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px;
  }

  #global-search .global-search-result-actions button,
  #global-search .global-search-result-actions a {
    min-height: 28px;
    padding: 4px 0;
    border: 0;
    border-radius: 0;
    color: #C34925;
    background: transparent;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-decoration: none;
    white-space: nowrap;
  }

  #global-search .global-search-result-actions .global-search-result-secondary {
    color: #80756E;
    font-weight: 600;
  }

  #global-search .global-search-result-actions button:hover,
  #global-search .global-search-result-actions button:focus-visible,
  #global-search .global-search-result-actions a:hover,
  #global-search .global-search-result-actions a:focus-visible {
    color: #A13B1D;
    background: transparent;
  }

  #global-search .global-search-empty {
    min-height: 176px;
    padding: 28px 16px;
    border-radius: 16px;
    background: rgba(255, 254, 252, .72);
  }

  body:has(#global-search.view.active) .sidebar {
    box-sizing: border-box;
    height: 82px;
    min-height: 82px;
    padding: 8px 0 10px;
    border-top: 1px solid #E7D8CD;
    background: #FDFBF7;
    box-shadow: 0 -4px 16px rgba(92, 63, 42, .035);
  }

  body:has(#global-search.view.active) .sidebar .nav {
    box-sizing: border-box;
    width: 100%;
    height: 64px;
    min-height: 64px;
    display: flex !important;
    align-items: stretch;
    gap: 2px;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 6px;
    touch-action: pan-x;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  body:has(#global-search.view.active) .sidebar .nav::-webkit-scrollbar {
    display: none;
  }

  body:has(#global-search.view.active) .sidebar .nav-button {
    box-sizing: border-box;
    width: 72px;
    min-width: 72px !important;
    height: 64px;
    min-height: 64px;
    flex: 0 0 72px;
    gap: 4px;
    padding: 7px 5px 5px;
    border: 0 !important;
    border-radius: 12px;
    color: #80756E;
    background: transparent;
    font-size: 11px;
    line-height: 1.2;
    scroll-snap-align: start;
  }

  body:has(#global-search.view.active) .sidebar .nav-button::before {
    display: none;
  }

  body:has(#global-search.view.active) .sidebar .nav-button.active {
    color: #C34925;
    background: rgba(245, 227, 214, .85);
    box-shadow: none !important;
  }

  body:has(#global-search.view.active) .sidebar .nav-button:hover {
    transform: none;
    background: rgba(245, 227, 214, .55);
  }

  body:has(#global-search.view.active) .sidebar .nav-icon {
    width: 20px;
    height: 22px;
    border: 0;
    border-radius: 0;
    color: inherit;
    background: transparent;
    font-size: 17px;
    line-height: 22px;
  }

  body:has(#global-search.view.active) .sidebar .nav-button.active .nav-icon {
    border: 0;
    color: inherit;
    background: transparent;
    box-shadow: none;
  }

  /* Mobile search controls: restrained touch, focus, and state feedback. */
  body:has(#global-search.view.active) {
    --global-search-motion-press: var(--v07-motion-fast, 150ms);
    --global-search-motion-state: var(--v07-motion-normal, 210ms);
  }

  #global-search .global-search-type-filters button,
  body:has(#global-search.view.active) .topbar .global-search-top-clear,
  #global-search .global-search-history button.clear,
  #global-search .global-search-section-action,
  #global-search .global-search-suggestion-list button,
  #global-search .global-search-history-query,
  #global-search .global-search-history-remove {
    -webkit-tap-highlight-color: transparent;
    transition:
      color var(--global-search-motion-state) ease,
      background-color var(--global-search-motion-state) ease,
      border-color var(--global-search-motion-state) ease,
      box-shadow var(--global-search-motion-state) ease,
      transform var(--global-search-motion-press) ease;
  }

  #global-search .global-search-history-row {
    transition: background-color var(--global-search-motion-state) ease;
  }

  #global-search .global-search-type-filters button:active,
  body:has(#global-search.view.active) .topbar .global-search-top-clear:active,
  #global-search .global-search-history button.clear:active,
  #global-search .global-search-section-action:active,
  #global-search .global-search-suggestion-list button:active,
  #global-search .global-search-history-query:active,
  #global-search .global-search-history-remove:active {
    transform: scale(.98);
  }

  #global-search .global-search-type-filters button[aria-pressed="true"] {
    box-shadow: 0 2px 8px rgba(195, 73, 37, .14);
  }

  #global-search .global-search-type-filters button:focus-visible,
  body:has(#global-search.view.active) .topbar .global-search-top-clear:focus-visible {
    outline: 2px solid rgba(195, 73, 37, .38);
    outline-offset: 2px;
  }

  #global-search .global-search-history button.clear:hover,
  #global-search .global-search-history button.clear:focus-visible,
  #global-search .global-search-section-action:hover,
  #global-search .global-search-section-action:focus-visible {
    border-radius: 8px;
    background: rgba(246, 233, 222, .72);
  }

  #global-search .global-search-history-query:hover,
  #global-search .global-search-history-query:focus-visible,
  #global-search .global-search-history-remove:hover,
  #global-search .global-search-history-remove:focus-visible {
    border-radius: 9px;
    background: rgba(246, 233, 222, .72);
  }

  #global-search .global-search-history-row:focus-within {
    background: rgba(246, 233, 222, .36);
  }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  #global-search .global-search-type-filters button,
  body:has(#global-search.view.active) .topbar .global-search-top-clear,
  #global-search .global-search-history button.clear,
  #global-search .global-search-section-action,
  #global-search .global-search-suggestion-list button,
  #global-search .global-search-history-query,
  #global-search .global-search-history-remove {
    transition: none;
  }

  #global-search .global-search-history-row {
    transition: none;
  }

  #global-search .global-search-type-filters button:active,
  body:has(#global-search.view.active) .topbar .global-search-top-clear:active,
  #global-search .global-search-history button.clear:active,
  #global-search .global-search-section-action:active,
  #global-search .global-search-suggestion-list button:active,
  #global-search .global-search-history-query:active,
  #global-search .global-search-history-remove:active {
    transform: none;
  }
}

@media (max-width: 390px) {
  body:has(#global-search.view.active) .topbar {
    padding-right: 12px;
    padding-left: 12px;
  }

  body:has(#global-search.view.active) .topbar .search-box {
    width: min(170px, calc(100vw - 222px));
    min-width: 0;
    max-width: 170px;
    flex-basis: min(170px, calc(100vw - 222px));
  }
}

@media (max-width: 560px) {
  .global-relation-modal { padding: 0; place-items: stretch; }
  .global-relation-modal-card { width: 100%; max-height: 100vh; min-height: 100vh; border: 0; border-radius: 0; padding: max(16px, env(safe-area-inset-top)) 14px max(20px, env(safe-area-inset-bottom)); }
  .global-relation-modal button { min-height: 44px; }
  .global-relation-modal-head > button { width: 44px; height: 44px; }
  .global-relation-recipe-list { max-height: calc(100vh - 270px); }
  .global-relation-modal-actions { position: sticky; bottom: 0; padding-bottom: env(safe-area-inset-bottom); background: var(--card); }
}
    /* V0.6.17 reusable recipe components and assembled products. */
    .component-page-header { align-items: flex-end; gap: 24px; }
    .component-page-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
    .component-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
    .component-overview-card { padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 253, 248, .82); }
    .component-overview-card small { display: block; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
    .component-overview-card strong { display: block; margin-top: 6px; color: var(--ink); font-family: var(--font-display); font-size: 25px; }
    .component-filter-bar { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(170px, 230px) auto; align-items: center; gap: 10px; }
    .component-filter-bar select { min-height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); padding: 0 12px; }
    .component-archive-toggle { display: inline-flex; min-height: 44px; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; }
    .component-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    .component-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); box-shadow: var(--shadow-soft); }
    .component-card.is-archived { opacity: .68; }
    .component-card-band { height: 8px; background: linear-gradient(90deg, var(--rust), var(--gold), var(--sage)); }
    .component-card-body { display: flex; flex: 1; flex-direction: column; gap: 13px; padding: 18px; }
    .component-card-top, .component-card-meta, .component-card-actions, .assembly-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .component-card-top span, .component-kind-badge, .component-version-badge { display: inline-flex; min-height: 25px; align-items: center; border-radius: 999px; padding: 0 9px; font-size: 10px; font-weight: 850; }
    .component-kind-badge { color: var(--rust); background: var(--rust-soft); }
    .component-version-badge { color: #596b48; background: rgba(111, 132, 91, .13); }
    .component-card h3 { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: 22px; line-height: 1.15; }
    .component-card p { min-height: 42px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
    .component-card-meta { align-items: stretch; }
    .component-card-meta div { flex: 1; padding: 10px; border-radius: 12px; background: var(--cream); }
    .component-card-meta small, .component-card-meta strong { display: block; }
    .component-card-meta small { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .05em; }
    .component-card-meta strong { margin-top: 4px; overflow-wrap: anywhere; font-size: 12px; }
    .component-card-materials { color: var(--muted); font-size: 11px; line-height: 1.6; }
    .component-card-actions { margin-top: auto; justify-content: flex-start; flex-wrap: wrap; }
    .component-page-actions button, .component-card-actions button, .component-detail-actions button, .component-usage-row button, .assembly-section-head button, .component-modal-actions button { min-height: 44px; }
    .component-modal[hidden] { display: none !important; }
    .component-modal { position: fixed; inset: 0; z-index: 1500; display: grid; place-items: center; padding: 24px; background: rgba(36, 31, 27, .56); backdrop-filter: blur(8px); }
    .component-modal-card { width: min(920px, 100%); max-height: min(900px, calc(100vh - 48px)); overflow: auto; border: 1px solid rgba(255,255,255,.55); border-radius: 24px; background: var(--paper); box-shadow: 0 30px 90px rgba(39, 30, 24, .3); }
    .component-modal-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 21px 24px; border-bottom: 1px solid var(--line); background: rgba(255,253,248,.97); backdrop-filter: blur(12px); }
    .component-modal-head h2 { margin: 4px 0 0; color: var(--ink); font-family: var(--font-display); font-size: 25px; }
    .component-modal-head p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
    .component-modal-head > button { width: 44px; height: 44px; flex: 0 0 44px; border: 1px solid var(--line); border-radius: 50%; background: var(--cream); color: var(--ink); font-size: 20px; cursor: pointer; }
    .component-kicker { color: var(--rust); font-size: 10px; font-weight: 900; letter-spacing: .13em; }
    .component-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; padding: 22px 24px; }
    .component-field { display: grid; gap: 7px; color: var(--ink); font-size: 12px; font-weight: 800; }
    .component-field input, .component-field select, .component-field textarea { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 12px; background: #fffdf9; color: var(--ink); padding: 10px 12px; font: inherit; font-weight: 500; }
    .component-field textarea { resize: vertical; line-height: 1.6; }
    .component-field small { color: var(--muted); font-size: 10px; font-weight: 500; line-height: 1.5; }
    .component-span-2 { grid-column: 1 / -1; }
    .component-inline-fields { display: grid; grid-template-columns: minmax(0, 1fr) 100px; gap: 8px; }
    .component-modal-actions { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 15px 24px; border-top: 1px solid var(--line); background: rgba(255,253,248,.97); backdrop-filter: blur(12px); }
    .component-modal-actions > span { margin-right: auto; color: var(--muted); font-size: 11px; line-height: 1.5; }
    .component-detail-card { width: min(980px, 100%); }
    .component-detail-body { padding: 22px 24px 26px; }
    .component-detail-hero { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, minmax(110px, 150px)); gap: 12px; align-items: stretch; }
    .component-detail-title { padding: 18px; border-radius: 18px; background: linear-gradient(135deg, var(--rust-soft), var(--cream)); }
    .component-detail-title h3 { margin: 7px 0 6px; font-family: var(--font-display); font-size: 28px; }
    .component-detail-title p { margin: 0; color: var(--muted); line-height: 1.6; }
    .component-detail-fact { padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: #fffdf9; }
    .component-detail-fact small, .component-detail-fact strong { display: block; }
    .component-detail-fact small { color: var(--muted); font-size: 9px; font-weight: 850; }
    .component-detail-fact strong { margin-top: 8px; overflow-wrap: anywhere; font-size: 14px; }
    .component-detail-section { margin-top: 18px; }
    .component-detail-section h4 { margin: 0 0 10px; font-family: var(--font-display); font-size: 19px; }
    .component-usage-list { display: grid; gap: 8px; }
    .component-usage-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--cream); }
    .component-detail-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
    .assembly-component-rows { display: grid; gap: 10px; }
    .assembly-component-row { display: grid; grid-template-columns: minmax(210px, 1fr) 110px 85px 120px 44px; gap: 8px; align-items: end; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--cream); }
    .assembly-component-row label { display: grid; gap: 5px; color: var(--muted); font-size: 9px; font-weight: 850; }
    .assembly-component-row select, .assembly-component-row input { min-height: 44px; border: 1px solid var(--line); border-radius: 10px; background: #fffdf9; padding: 0 9px; }
    .assembly-component-remove { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 10px; background: #fffdf9; color: var(--rust); cursor: pointer; }
    .component-formula-summary { display: grid; gap: 13px; }
    .component-formula-banner { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-radius: 14px; background: var(--rust-soft); }
    .component-formula-banner strong, .component-formula-banner span { display: block; }
    .component-formula-banner span { margin-top: 4px; color: var(--muted); font-size: 11px; }
    .component-inline-detail { border: 1px solid var(--line); border-radius: 14px; background: #fffdf9; }
    .component-inline-detail summary { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px; cursor: pointer; font-weight: 800; }
    .component-inline-detail-body { padding: 0 14px 14px; }
    .component-inline-ingredients { display: flex; flex-wrap: wrap; gap: 6px; }
    .component-inline-ingredients span { padding: 6px 8px; border-radius: 9px; background: var(--cream); color: var(--muted); font-size: 10px; }
    .component-cost-name { display: flex; align-items: center; gap: 9px; }
    .component-cost-mark { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 11px; background: var(--rust-soft); color: var(--rust); font-weight: 900; }
    .component-recipe-header-badge { margin-left: 8px; }
    @media (max-width: 980px) {
      .component-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .component-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .component-detail-hero { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .component-detail-title { grid-column: 1 / -1; }
      .assembly-component-row { grid-template-columns: 1fr 100px 80px; }
      .assembly-component-row label:nth-child(4) { grid-column: 1 / span 2; }
    }
    @media (max-width: 650px) {
      .component-page-header { align-items: stretch; }
      .component-page-actions { justify-content: stretch; }
      .component-page-actions button { flex: 1; }
      .component-filter-bar, .component-grid, .component-form-grid { grid-template-columns: 1fr; }
      .component-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .component-span-2 { grid-column: auto; }
      .component-modal { align-items: stretch; padding: 0; }
      .component-modal-card { width: 100%; max-height: 100dvh; border-radius: 0; }
      .component-modal-head, .component-form-grid, .component-detail-body, .component-modal-actions { padding-left: 16px; padding-right: 16px; }
      .component-modal-actions { flex-wrap: wrap; }
      .component-modal-actions > span { width: 100%; margin-right: 0; }
      .component-detail-hero { grid-template-columns: 1fr; }
      .component-detail-title { grid-column: auto; }
      .assembly-component-row { grid-template-columns: 1fr 1fr; }
      .assembly-component-row label:first-child { grid-column: 1 / -1; }
      .assembly-component-row label:nth-child(4) { grid-column: auto; }
      .assembly-component-remove { align-self: end; }
    }
    /* V0.6.25 opaque pricing editor, cost snapshots, history and batch efficiency. */
    .pricing-page-header { margin-bottom: 14px; }
    body[data-active-view="pricing"] .content { width: min(2160px, 100%); }
    .pricing-page-heading { min-width: 0; }
    .pricing-page-actions { display: flex; align-items: center; justify-content: flex-end; flex: 0 0 auto; flex-wrap: wrap; gap: 8px; }
    .pricing-page-actions button { white-space: nowrap; }
    .pricing-kicker { display: block; margin-bottom: 5px; color: var(--rust); font-size: 9px; font-weight: 850; letter-spacing: .17em; }
    .pricing-status-line { min-height: 22px; margin: -2px 2px 10px; color: var(--muted); font-size: 11px; line-height: 1.55; }
    .pricing-status-line strong { color: var(--ink-soft); }
    .pricing-status-line b { color: var(--rust-dark); font-weight: 850; }

    .pricing-hero { margin-bottom: 16px; }
    .pricing-hero-card {
      position: relative;
      overflow: hidden;
      padding: 21px 22px 18px;
      border: 1px solid color-mix(in srgb, var(--rust) 16%, var(--line));
      border-radius: 22px;
      background:
        radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--rust) 9%, transparent) 0, transparent 31%),
        linear-gradient(135deg, color-mix(in srgb, var(--card) 92%, white), color-mix(in srgb, var(--paper-strong) 82%, white));
      box-shadow: 0 16px 38px rgba(67, 46, 31, .07);
    }
    .pricing-hero-head, .pricing-hero-body, .pricing-hero-footer, .pricing-list-head, .pricing-form-actions, .pricing-drawer-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
    }
    .pricing-hero-head { align-items: flex-start; }
    .pricing-hero-title { min-width: 0; }
    .pricing-hero-title h2 { margin: 0; color: var(--ink); font-family: var(--font-serif); font-size: 24px; font-weight: 650; line-height: 1.25; }
    .pricing-hero-title p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
    .pricing-state { display: inline-flex; align-items: center; min-height: 27px; padding: 5px 10px; border-radius: 999px; color: #526950; background: #e8efe1; font-size: 10px; font-weight: 850; white-space: nowrap; }
    .pricing-state.low { color: #995536; background: #f5dfd3; }
    .pricing-state.pending { color: #846722; background: #f5ebcb; }
    .pricing-state.draft { color: #596a70; background: #e4edef; }

    .pricing-hero-body { align-items: flex-end; margin-top: 22px; }
    .pricing-primary-price { min-width: 190px; }
    .pricing-primary-price small, .pricing-suggestion small { display: block; margin-bottom: 5px; color: var(--muted); font-size: 10px; font-weight: 750; }
    .pricing-primary-price strong { display: block; color: var(--rust-dark); font-family: var(--font-serif); font-size: clamp(37px, 4vw, 52px); font-weight: 650; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
    .pricing-price-equivalent { display: block; margin-top: 7px; color: var(--muted); font-size: 10px; font-weight: 650; font-variant-numeric: tabular-nums; }
    .pricing-suggestion { min-width: 155px; padding: 11px 13px; border-left: 1px solid color-mix(in srgb, var(--rust) 18%, var(--line)); }
    .pricing-suggestion strong { color: var(--ink); font-family: var(--font-serif); font-size: 21px; font-variant-numeric: tabular-nums; }
    .pricing-suggestion span { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
    .pricing-metric-row { display: grid; flex: 1; grid-template-columns: repeat(3, minmax(105px, 1fr)); gap: 8px; }
    .pricing-metric { padding: 10px 11px; border-radius: 13px; background: color-mix(in srgb, var(--paper-strong) 66%, transparent); }
    .pricing-metric small { display: block; color: var(--muted); font-size: 9px; }
    .pricing-metric strong { display: block; margin-top: 5px; color: var(--ink); font-size: 15px; font-variant-numeric: tabular-nums; }
    .pricing-metric em { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; font-style: normal; }

    .pricing-cost-alert { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--rust) 18%, var(--line)); border-radius: 11px; color: var(--ink-soft); background: color-mix(in srgb, var(--rust) 6%, var(--card)); font-size: 10px; line-height: 1.5; }
    .pricing-cost-alert strong { color: var(--rust-dark); font-size: 11px; }
    .pricing-cost-alert span { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
    .pricing-cost-alert.down { border-color: color-mix(in srgb, #66856f 28%, var(--line)); background: color-mix(in srgb, #dfeadf 52%, var(--card)); }
    .pricing-cost-alert.down strong { color: #55715e; }
    .pricing-cost-alert.pending { border-color: color-mix(in srgb, #b58a37 28%, var(--line)); background: color-mix(in srgb, #f4e9ca 58%, var(--card)); }
    .pricing-cost-alert.pending strong { color: #80611f; }
    .pricing-cost-alert.baseline { border-style: dashed; background: var(--card); }
    .pricing-efficiency-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
    .pricing-efficiency-strip > div { min-width: 0; padding: 10px 11px; border: 1px solid color-mix(in srgb, var(--line) 72%, transparent); border-radius: 11px; background: color-mix(in srgb, var(--card) 60%, transparent); }
    .pricing-efficiency-strip small, .pricing-efficiency-strip strong, .pricing-efficiency-strip em { display: block; }
    .pricing-efficiency-strip small { color: var(--muted); font-size: 9px; font-weight: 700; }
    .pricing-efficiency-strip strong { margin-top: 4px; overflow: hidden; color: var(--ink); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
    .pricing-efficiency-strip em { margin-top: 3px; color: var(--muted); font-size: 9px; font-style: normal; }

    .pricing-cost-block { margin-top: 18px; padding-top: 15px; border-top: 1px solid color-mix(in srgb, var(--line) 78%, transparent); }
    .pricing-cost-track { display: flex; height: 9px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--line) 58%, transparent); }
    .pricing-cost-track span { min-width: 2px; transition: width .2s ease; }
    .pricing-cost-track .food { background: var(--rust); }
    .pricing-cost-track .packaging { background: #c49a64; }
    .pricing-cost-track .operations { background: #748d83; }
    .pricing-cost-legend { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 9px; color: var(--muted); font-size: 9px; }
    .pricing-cost-legend span { display: inline-flex; align-items: center; gap: 5px; }
    .pricing-cost-legend i { width: 7px; height: 7px; border-radius: 50%; background: var(--rust); }
    .pricing-cost-legend span:nth-child(2) i { background: #c49a64; }
    .pricing-cost-legend span:nth-child(3) i { background: #748d83; }
    .pricing-cost-pending { margin: 0; color: #856127; font-size: 11px; line-height: 1.65; }
    .pricing-hero-footer { margin-top: 15px; }
    .pricing-hero-footer p { max-width: 680px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
    .pricing-hero-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 7px; }
    .pricing-hero-actions button { min-height: 36px; }

    .pricing-empty-hero { display: grid; min-height: 255px; padding: 28px; place-items: center; border: 1px dashed color-mix(in srgb, var(--rust) 28%, var(--line)); border-radius: 22px; background: color-mix(in srgb, var(--card) 72%, transparent); text-align: center; }
    .pricing-empty-hero > div { max-width: 510px; }
    .pricing-empty-mark { display: grid; width: 52px; height: 52px; margin: 0 auto 15px; place-items: center; border-radius: 17px; color: var(--rust-dark); background: color-mix(in srgb, var(--rust) 11%, white); font-family: var(--font-serif); font-size: 23px; }
    .pricing-empty-hero h2 { margin: 0; color: var(--ink); font-family: var(--font-serif); font-size: 24px; }
    .pricing-empty-hero p { margin: 9px 0 17px; color: var(--muted); font-size: 12px; line-height: 1.7; }

    .pricing-list-panel { padding: 18px; border: 1px solid var(--line); border-radius: 20px; background: color-mix(in srgb, var(--card) 66%, transparent); }
    .pricing-list-head { align-items: flex-end; margin-bottom: 14px; }
    .pricing-list-head h2 { margin: 0; color: var(--ink); font-family: var(--font-serif); font-size: 21px; }
    .pricing-list-head p { margin: 5px 0 0; color: var(--muted); font-size: 10px; }
    .pricing-list-tools { display: flex; align-items: flex-end; justify-content: flex-end; gap: 8px; }
    .pricing-search-label { display: grid; width: min(280px, 36%); gap: 5px; color: var(--muted); font-size: 9px; font-weight: 750; }
    .pricing-search-label input { width: 100%; min-height: 38px; padding: 8px 11px; border: 1px solid color-mix(in srgb, var(--line) 84%, transparent); border-radius: 11px; outline: none; color: var(--ink); background: color-mix(in srgb, var(--card) 82%, white); font: inherit; font-size: 12px; }
    .pricing-search-label input:focus { border-color: color-mix(in srgb, var(--rust) 55%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rust) 10%, transparent); }
    .pricing-hidden-entry { min-height: 38px; white-space: nowrap; }
    .pricing-hidden-entry span { display: inline-flex; min-width: 19px; min-height: 19px; margin-left: 4px; padding: 2px 6px; align-items: center; justify-content: center; border-radius: 999px; color: var(--rust-dark); background: color-mix(in srgb, var(--rust) 10%, var(--card)); font-size: 10px; font-variant-numeric: tabular-nums; }
    .pricing-minimal-search-history, .pricing-minimal-search-history[hidden] { display: none; }
    .pricing-minimal-search-history { min-width: 0; max-width: 100%; padding: 3px 0; align-items: center; align-content: center; flex-wrap: wrap; gap: 5px; overflow-y: auto; scrollbar-width: thin; }
    .pricing-minimal-search-history-item { display: inline-flex; min-width: 0; max-width: 158px; min-height: 29px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--rust) 18%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--card) 90%, white); box-shadow: 0 2px 8px rgba(67, 46, 31, .035); }
    .pricing-minimal-search-history-query, .pricing-minimal-search-history-delete { border: 0; color: var(--ink-soft); background: transparent; font: inherit; cursor: pointer; }
    .pricing-minimal-search-history-query { min-width: 0; overflow: hidden; padding: 5px 7px 5px 10px; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 750; }
    .pricing-minimal-search-history-delete { display: grid; width: 26px; flex: 0 0 26px; padding: 0; place-items: center; border-left: 1px solid color-mix(in srgb, var(--rust) 13%, var(--line)); color: var(--muted); font-size: 15px; line-height: 1; }
    .pricing-minimal-search-history-item:hover, .pricing-minimal-search-history-item:focus-within { border-color: color-mix(in srgb, var(--rust) 44%, var(--line)); background: color-mix(in srgb, var(--rust) 7%, var(--card)); }
    .pricing-minimal-search-history-query:hover, .pricing-minimal-search-history-query:focus-visible, .pricing-minimal-search-history-delete:hover, .pricing-minimal-search-history-delete:focus-visible { color: var(--rust-dark); }
    .pricing-minimal-search-history-query:focus-visible, .pricing-minimal-search-history-delete:focus-visible { outline: 2px solid color-mix(in srgb, var(--rust) 42%, transparent); outline-offset: -2px; }
    .pricing-table-wrap { overflow-x: auto; }
    .pricing-table { width: 100%; min-width: 940px; border-collapse: collapse; }
    .pricing-table th { padding: 9px 10px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 9px; font-weight: 800; text-align: left; white-space: nowrap; }
    .pricing-table td { padding: 12px 10px; border-bottom: 1px solid color-mix(in srgb, var(--line) 64%, transparent); color: var(--ink-soft); font-size: 11px; font-variant-numeric: tabular-nums; vertical-align: middle; }
    .pricing-table td.pricing-table-number { font-size: 13px; }
    .pricing-sort-button { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; margin: -6px -8px; padding: 6px 8px; border: 0; border-radius: 8px; color: inherit; background: transparent; font: inherit; cursor: pointer; }
    .pricing-sort-button:hover, .pricing-sort-button:focus-visible, .pricing-sort-button.is-active { color: var(--rust); background: rgba(163, 77, 46, .08); }
    .pricing-sort-button:focus-visible { outline: 2px solid rgba(163, 77, 46, .45); outline-offset: 1px; }
    .pricing-sort-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; color: var(--muted); font-size: 13px; line-height: 1; }
    .pricing-sort-button.is-active .pricing-sort-icon { color: var(--rust); font-weight: 800; }
    .pricing-table tbody tr { cursor: pointer; transition: background .16s ease; }
    .pricing-table tbody tr:hover, .pricing-table tbody tr.active { background: color-mix(in srgb, var(--rust) 6%, transparent); }
    .pricing-table tbody tr:focus-visible { outline: 2px solid var(--rust); outline-offset: -2px; }
    .pricing-plan-name strong { display: block; max-width: 300px; overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
    .pricing-plan-name small { display: block; max-width: 300px; margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
    .pricing-table .pricing-state { min-height: 24px; padding: 4px 8px; }
    .pricing-price-note { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; white-space: nowrap; }
    .pricing-price-note.pricing-cost-up { color: #a45538; font-weight: 750; }
    .pricing-price-note.pricing-cost-down { color: #55715e; font-weight: 750; }
    .pricing-row-action { color: var(--rust); font-weight: 800; white-space: nowrap; }
    .pricing-table-empty { padding: 28px 16px; border: 1px dashed color-mix(in srgb, var(--line) 85%, transparent); border-radius: 15px; color: var(--muted); font-size: 11px; text-align: center; }

    .pricing-minimal-menu {
      width: min(1040px, 100%);
      margin: 0 auto;
      padding: 18px 24px 8px;
      border: 1px solid color-mix(in srgb, var(--rust) 17%, var(--line));
      border-radius: 20px;
      background: color-mix(in srgb, var(--card) 90%, white);
      box-shadow: 0 18px 44px rgba(67, 46, 31, .08);
    }
    .pricing-minimal-menu-head { padding-bottom: 12px; border-bottom: 1px solid color-mix(in srgb, var(--line) 82%, transparent); text-align: center; }
    .pricing-minimal-menu-head h2 { margin: 0; color: var(--ink); font-family: var(--font-serif); font-size: 24px; font-weight: 650; line-height: 1.2; }
    .pricing-minimal-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 30px; }
    .pricing-minimal-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 10px 4px; border-bottom: 1px solid color-mix(in srgb, var(--line) 68%, transparent); }
    .pricing-minimal-item:last-child, .pricing-minimal-item:nth-last-child(-n + 2) { border-bottom: 0; }
    .pricing-minimal-item-copy { min-width: 0; }
    .pricing-minimal-item-copy strong { display: block; overflow: hidden; color: var(--ink); font-size: 15px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
    .pricing-minimal-item-price { min-width: 100px; text-align: right; }
    .pricing-minimal-item-price strong { color: var(--rust-dark); font-family: var(--font-serif); font-size: 20px; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .pricing-minimal-empty { padding: 56px 20px; text-align: center; }
    .pricing-minimal-empty p { margin: 8px 0 0; color: var(--muted); font-size: 11px; }
    #pricing.pricing-minimal-mode .pricing-page-header { display: none; }
    #pricing.pricing-minimal-mode .pricing-page-actions .primary-button,
    #pricing.pricing-minimal-mode .pricing-product-tabs,
    #pricing.pricing-minimal-mode .pricing-status-line,
    #pricing.pricing-minimal-mode .pricing-hero,
    #pricing.pricing-minimal-mode .pricing-list-head > div:first-child,
    #pricing.pricing-minimal-mode .pricing-list-tools .pricing-hidden-entry { display: none; }
    #pricing.pricing-minimal-mode .pricing-list-head { max-width: 1040px; margin: 0 auto 10px; justify-content: flex-end; }
    #pricing.pricing-minimal-mode .pricing-list-tools { display: grid; width: 100%; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr) auto; align-items: center; justify-content: initial; gap: 10px; }
    #pricing.pricing-minimal-mode .pricing-list-tools .pricing-search-label { display: grid; grid-column: 1; grid-row: 1; width: 100%; flex: none; gap: 0; }
    #pricing.pricing-minimal-mode .pricing-list-tools .pricing-search-label span { display: none; }
    #pricing.pricing-minimal-mode .pricing-list-tools .pricing-search-label input { min-height: 42px; padding: 9px 13px; border-color: color-mix(in srgb, var(--rust) 32%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--card) 84%, white); }
    #pricing.pricing-minimal-mode .pricing-list-tools .pricing-minimal-search-history:not([hidden]) { display: flex; grid-column: 2; grid-row: 1; max-height: 108px; justify-self: start; }
    #pricing.pricing-minimal-mode .pricing-list-tools .pricing-minimal-toggle { grid-column: 3; grid-row: 1; flex: 0 0 auto; }
    #pricing.pricing-minimal-mode .pricing-list-panel { max-width: 1040px; margin: 0 auto; padding: 0; border: 0; background: transparent; }
    #pricing.pricing-minimal-mode .pricing-table-wrap { overflow: visible; }

    .pricing-hidden-view[hidden] { display: none; }
    .pricing-hidden-view { padding: 22px; border: 1px solid color-mix(in srgb, var(--rust) 18%, var(--line)); border-radius: 20px; background: color-mix(in srgb, var(--card) 78%, transparent); }
    .pricing-hidden-view-head, .pricing-hidden-view-toolbar, .pricing-hidden-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
    .pricing-hidden-view-head { align-items: flex-start; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
    .pricing-hidden-view-head h2 { margin: 0; color: var(--ink); font-family: var(--font-serif); font-size: 24px; }
    .pricing-hidden-view-head p { max-width: 600px; margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
    .pricing-hidden-view-toolbar { align-items: flex-end; margin-top: 15px; }
    .pricing-hidden-view-meta { min-height: 38px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
    .pricing-hidden-plan-list { display: grid; gap: 11px; margin-top: 15px; }
    .pricing-hidden-plan { padding: 16px; border: 1px solid color-mix(in srgb, var(--line) 78%, transparent); border-radius: 15px; background: color-mix(in srgb, var(--card) 84%, white); }
    .pricing-hidden-plan-title { min-width: 0; }
    .pricing-hidden-badge { display: inline-flex; align-items: center; min-height: 22px; padding: 4px 8px; border-radius: 999px; color: #846722; background: #f5ebcb; font-size: 9px; font-weight: 850; }
    .pricing-hidden-plan-title h3 { margin: 8px 0 0; overflow: hidden; color: var(--ink); font-family: var(--font-serif); font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
    .pricing-hidden-plan-title p { margin: 5px 0 0; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
    .pricing-hidden-plan-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 7px; }
    .pricing-hidden-plan-actions button { min-height: 36px; white-space: nowrap; }
    .pricing-hidden-plan-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 15px; padding-top: 13px; border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent); }
    .pricing-hidden-plan-metrics span { min-width: 0; padding: 9px 10px; border-radius: 10px; background: var(--paper); }
    .pricing-hidden-plan-metrics small, .pricing-hidden-plan-metrics b { display: block; }
    .pricing-hidden-plan-metrics small { color: var(--muted); font-size: 9px; }
    .pricing-hidden-plan-metrics b { margin-top: 4px; overflow: hidden; color: var(--ink-soft); font-size: 12px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
    .pricing-hidden-empty { padding: 34px 18px; border: 1px dashed color-mix(in srgb, var(--line) 85%, transparent); border-radius: 15px; color: var(--muted); text-align: center; }
    .pricing-hidden-empty strong { display: block; color: var(--ink); font-family: var(--font-serif); font-size: 19px; }
    .pricing-hidden-empty p { margin: 8px 0 15px; font-size: 11px; line-height: 1.6; }

    .pricing-drawer[hidden] { display: none; }
    .pricing-drawer { position: fixed; z-index: 150; inset: 0; display: flex; justify-content: flex-end; }
    .pricing-drawer-backdrop { position: absolute; inset: 0; border: 0; background: rgba(48, 34, 25, .4); backdrop-filter: blur(5px); cursor: default; }
    .pricing-drawer-panel { position: relative; isolation: isolate; width: min(600px, 100%); height: 100%; padding: 22px 23px; overflow-y: auto; border: 0; border-left: 1px solid var(--line); background: var(--card); box-shadow: -24px 0 70px rgba(45, 31, 22, .2); opacity: 1; }
    .pricing-drawer-head { align-items: flex-start; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
    .pricing-drawer-head h2 { margin: 0; color: var(--ink); font-family: var(--font-serif); font-size: 25px; }
    .pricing-drawer-head p { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
    .pricing-drawer-close { display: grid; width: 36px; height: 36px; flex: 0 0 auto; padding: 0; place-items: center; border: 1px solid color-mix(in srgb, var(--line) 86%, transparent); border-radius: 11px; color: var(--muted); background: color-mix(in srgb, var(--card) 78%, transparent); font-size: 22px; cursor: pointer; }
    .pricing-form-section { margin-top: 18px; }
    .pricing-form-section h3 { margin: 0 0 12px; color: var(--ink); font-size: 15px; }
    .pricing-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
    .pricing-span-2 { grid-column: span 2; }
    .pricing-field { display: grid; gap: 7px; min-width: 0; color: var(--ink-soft); font-size: 12px; font-weight: 780; }
    .pricing-field > input, .pricing-field > select, .pricing-field > textarea, .pricing-money-input, .pricing-suffix-input { width: 100%; min-height: 46px; border: 1px solid color-mix(in srgb, var(--line) 88%, transparent); border-radius: 11px; color: var(--ink); background: var(--card); font: inherit; font-size: 15px; font-weight: 600; }
    .pricing-field > input, .pricing-field > select, .pricing-field > textarea { padding: 10px 12px; outline: none; font-variant-numeric: tabular-nums; }
    .pricing-field > textarea { min-height: 92px; resize: vertical; font-size: 14px; font-weight: 500; line-height: 1.65; }
    .pricing-field > input:focus, .pricing-field > select:focus, .pricing-field > textarea:focus, .pricing-money-input:focus-within, .pricing-suffix-input:focus-within { border-color: color-mix(in srgb, var(--rust) 55%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rust) 10%, transparent); }
    .pricing-money-input, .pricing-suffix-input { display: flex; align-items: center; overflow: hidden; }
    .pricing-money-input b, .pricing-suffix-input b { padding: 0 11px; color: var(--ink-soft); font-size: 13px; font-weight: 780; }
    .pricing-money-input input, .pricing-suffix-input input { width: 100%; min-width: 0; height: 44px; padding: 8px 0; border: 0; outline: none; color: var(--ink); background: transparent; font: inherit; font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; }
    .pricing-suffix-input input { padding-left: 10px; }
    .pricing-advanced, .pricing-efficiency, .pricing-trial, .pricing-history { margin-top: 17px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
    .pricing-advanced summary, .pricing-efficiency summary, .pricing-trial summary, .pricing-history summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; color: var(--ink); font-size: 13px; font-weight: 820; cursor: pointer; list-style: none; }
    .pricing-advanced summary::-webkit-details-marker, .pricing-efficiency summary::-webkit-details-marker, .pricing-trial summary::-webkit-details-marker, .pricing-history summary::-webkit-details-marker { display: none; }
    .pricing-advanced summary::after, .pricing-efficiency summary::after, .pricing-trial summary::after, .pricing-history summary::after { color: var(--rust); content: "+"; font-size: 17px; font-weight: 500; }
    .pricing-advanced[open] summary::after, .pricing-efficiency[open] summary::after, .pricing-trial[open] summary::after, .pricing-history[open] summary::after { content: "−"; }
    .pricing-advanced summary small, .pricing-efficiency summary small, .pricing-trial summary small, .pricing-history summary small { margin-left: auto; color: var(--muted); font-size: 10px; font-weight: 600; }
    .pricing-advanced-grid, .pricing-details-grid { padding: 0 13px 13px; }
    .pricing-details-help { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.65; }
    .pricing-editor-preview { margin-top: 17px; padding: 16px; border: 1px solid color-mix(in srgb, var(--rust) 20%, var(--line)); border-radius: 15px; background: var(--paper); }
    .pricing-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .pricing-preview-head strong { color: var(--ink); font-family: var(--font-serif); font-size: 19px; }
    .pricing-preview-equivalent { margin-top: 10px; padding: 10px 11px; border-radius: 10px; color: var(--rust-dark); background: color-mix(in srgb, var(--rust) 8%, var(--card)); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
    .pricing-preview-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-top: 11px; }
    .pricing-preview-grid div { padding: 10px; border-radius: 10px; background: var(--card); }
    .pricing-preview-grid small { display: block; color: var(--muted); font-size: 10px; font-weight: 650; }
    .pricing-preview-grid b { display: block; margin-top: 5px; color: var(--ink); font-size: 16px; font-weight: 780; font-variant-numeric: tabular-nums; }
    .pricing-preview-note { margin: 11px 0 0; color: var(--ink-soft); font-size: 11px; line-height: 1.65; }
    .pricing-editor-preview .pricing-efficiency-strip > div { background: var(--card); }
    .pricing-trial-body, .pricing-history-body { padding: 0 13px 13px; }
    .pricing-trial-body > .pricing-field { max-width: 310px; }
    .pricing-discount-buttons { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
    .pricing-discount-buttons button { min-height: 32px; padding: 6px 11px; border: 1px solid color-mix(in srgb, var(--rust) 22%, var(--line)); border-radius: 9px; color: var(--rust-dark); background: var(--card); font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; }
    .pricing-discount-buttons button:hover { border-color: var(--rust); }
    .pricing-trial-result { margin-top: 11px; }
    .pricing-trial-floors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
    .pricing-trial-floors span { padding: 9px; border-radius: 9px; background: var(--card); }
    .pricing-trial-floors small, .pricing-trial-floors b { display: block; }
    .pricing-trial-floors small { color: var(--muted); font-size: 9px; }
    .pricing-trial-floors b { margin-top: 4px; color: var(--ink); font-size: 13px; font-variant-numeric: tabular-nums; }
    .pricing-trial-result > p { margin: 9px 1px 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
    .pricing-trial-verdict { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; padding: 10px 11px; border-radius: 10px; color: #55715e; background: #e5eee4; }
    .pricing-trial-verdict strong { font-size: 11px; }
    .pricing-trial-verdict span { color: var(--ink-soft); font-size: 10px; font-variant-numeric: tabular-nums; text-align: right; }
    .pricing-trial-verdict.warn { color: #8a6720; background: #f5ebce; }
    .pricing-trial-verdict.danger { color: #9d4e3d; background: #f5dfd7; }
    .pricing-history-list { display: grid; gap: 8px; margin-top: 12px; }
    .pricing-history-entry { padding: 11px 12px; border: 1px solid color-mix(in srgb, var(--line) 76%, transparent); border-radius: 11px; background: var(--card); }
    .pricing-history-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .pricing-history-head strong { color: var(--ink); font-size: 11px; }
    .pricing-history-head time { color: var(--muted); font-size: 9px; font-variant-numeric: tabular-nums; }
    .pricing-history-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-top: 8px; }
    .pricing-history-metrics span { color: var(--muted); font-size: 9px; }
    .pricing-history-metrics b { display: block; margin-top: 3px; color: var(--ink-soft); font-size: 11px; font-variant-numeric: tabular-nums; }
    .pricing-history-entry p { margin: 8px 0 0; color: var(--ink-soft); font-size: 10px; line-height: 1.55; }
    .pricing-history-empty { margin: 12px 1px 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
    .pricing-notes-field { margin-top: 17px; }
    .pricing-form-actions { position: sticky; bottom: -22px; margin: 20px -23px -22px; padding: 14px 23px 18px; border-top: 1px solid var(--line); background: var(--card); }
    .pricing-form-actions span { flex: 1; }
    .pricing-destructive-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
    .pricing-delete-button, .pricing-hide-button { min-height: 38px; padding: 8px 2px; border: 0; background: transparent; font: inherit; font-size: 11px; font-weight: 780; cursor: pointer; }
    .pricing-delete-button { color: #a04e42; }
    .pricing-hide-button { color: var(--rust-dark); }
    .pricing-delete-button:hover, .pricing-hide-button:hover { color: var(--rust); text-decoration: underline; text-underline-offset: 3px; }

    body[data-density="compact"] .pricing-hero-card { padding: 17px 18px 15px; }
    body[data-density="compact"] .pricing-hero-body { margin-top: 16px; }
    body[data-density="compact"] .pricing-list-panel { padding: 15px; }

    @media (max-width: 920px) {
      .pricing-hero-body { align-items: stretch; flex-wrap: wrap; }
      .pricing-primary-price, .pricing-suggestion { flex: 1 1 160px; }
      .pricing-metric-row { flex: 1 0 100%; }
      .pricing-hidden-plan-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 680px) {
      .pricing-page-header { align-items: flex-start; }
      .pricing-page-actions { width: 100%; }
      .pricing-page-actions button { flex: 1 1 0; }
      .pricing-page-actions .primary-button { width: auto; }
      .pricing-hero-card { padding: 17px 16px 15px; border-radius: 18px; }
      .pricing-hero-head, .pricing-hero-footer, .pricing-list-head, .pricing-list-tools, .pricing-hidden-view-head, .pricing-hidden-view-toolbar, .pricing-hidden-plan-head { align-items: stretch; flex-direction: column; }
      .pricing-primary-price strong { font-size: 40px; }
      .pricing-suggestion { padding: 10px 0 0; border-top: 1px solid color-mix(in srgb, var(--rust) 18%, var(--line)); border-left: 0; }
      .pricing-metric-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
      .pricing-metric { padding: 9px 7px; }
      .pricing-metric strong { font-size: 13px; }
      .pricing-hero-actions { width: 100%; }
      .pricing-hero-actions button { flex: 1; }
      .pricing-list-panel { padding: 14px; border-radius: 17px; }
      .pricing-list-tools, .pricing-search-label { width: 100%; }
      .pricing-hidden-entry { width: 100%; }
      .pricing-sort-button { min-height: 40px; margin: -10px -8px; }
      .pricing-hidden-view { padding: 16px; border-radius: 17px; }
      .pricing-hidden-view-head .secondary-button, .pricing-hidden-plan-actions, .pricing-hidden-plan-actions button { width: 100%; }
      .pricing-hidden-plan-actions { flex-direction: column; }
      .pricing-hidden-plan-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .pricing-drawer-panel { padding: 18px 16px; border-left: 0; }
      .pricing-form-grid { grid-template-columns: 1fr; }
      .pricing-span-2 { grid-column: 1; }
      .pricing-advanced summary small, .pricing-efficiency summary small, .pricing-trial summary small, .pricing-history summary small { display: none; }
      .pricing-preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .pricing-efficiency-strip { grid-template-columns: 1fr; }
      .pricing-cost-alert, .pricing-trial-verdict { align-items: flex-start; flex-direction: column; }
      .pricing-cost-alert span, .pricing-trial-verdict span { text-align: left; }
      .pricing-trial-floors, .pricing-history-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .pricing-form-actions { bottom: -18px; margin: 18px -16px -18px; padding: 12px 16px calc(15px + env(safe-area-inset-bottom)); }
      .pricing-minimal-menu { padding: 14px 12px 4px; border-radius: 17px; }
      .pricing-minimal-menu-head { padding-bottom: 9px; }
      .pricing-minimal-menu-head h2 { font-size: 22px; }
      .pricing-minimal-list { grid-template-columns: 1fr; }
      .pricing-minimal-item { gap: 12px; padding: 10px 2px; }
      .pricing-minimal-item:nth-last-child(-n + 2) { border-bottom: 1px solid color-mix(in srgb, var(--line) 68%, transparent); }
      .pricing-minimal-item:last-child { border-bottom: 0; }
      .pricing-minimal-item-copy strong { font-size: 14px; }
      .pricing-minimal-item-price { min-width: 88px; }
      .pricing-minimal-item-price strong { font-size: 18px; }
      #pricing.pricing-minimal-mode .pricing-list-tools { display: flex; align-items: stretch; flex-direction: column; }
      #pricing.pricing-minimal-mode .pricing-list-tools .pricing-search-label { order: 1; width: 100%; }
      #pricing.pricing-minimal-mode .pricing-list-tools .pricing-minimal-search-history:not([hidden]) { order: 2; width: 100%; max-height: none; flex: 0 0 auto; overflow: visible; }
      #pricing.pricing-minimal-mode .pricing-minimal-toggle { order: 3; width: 100%; }
      #pricing.pricing-minimal-mode .pricing-page-actions { width: 100%; justify-content: stretch; }
    }
/* V0.6 theme system: semantic baking palettes applied after all workbench modules. */
:root {
  /* Shared default canvas: white first, with only a restrained cream warmth. */
  --paper: #fbfcfb;
  --paper-deep: #f1eee8;
  --card: #fffefa;
  --ink: #302c28;
  --muted: #746e67;
  --line: rgba(83, 67, 49, .13);
  --rust: #bc5b3a;
  --rust-dark: #873c27;
  --butter: #d6aa45;
  --surface-raised: rgba(255, 254, 250, .96);
  --surface-soft: rgba(255, 255, 252, .72);
  --control-surface: rgba(255, 255, 253, .94);
  --surface-sidebar: rgba(251, 252, 250, .92);
  --surface-topbar: rgba(250, 251, 249, .9);
  --ink-soft: #51473e;
  --font-serif: "STSong", "SimSun", Georgia, serif;
  --accent-contrast: #fffaf0;
  --hero-start: rgba(255, 255, 252, .99);
  --hero-mid: rgba(255, 251, 243, .94);
  --hero-end: rgba(231, 200, 141, .28);
  --theme-glow-primary: rgba(226, 174, 99, .11);
  --theme-glow-secondary: rgba(255, 255, 255, .62);
  --theme-grid-line: rgba(80, 60, 40, .018);
  --theme-grid-line-strong: rgba(80, 60, 40, .014);
  --theme-modal-overlay: rgba(44, 35, 25, .28);
  --theme-shadow-color: rgba(64, 55, 44, .06);
}

:root[data-lab-theme="oven-warm"] {
  --paper: #fbfcfb;
  --paper-deep: #f1eee8;
  --card: #fffefa;
  --ink: #302c28;
  --ink-soft: #51473e;
  --muted: #746e67;
  --line: rgba(83, 67, 49, .13);
  --rust: #bc5b3a;
  --rust-dark: #873c27;
  --butter: #d6aa45;
  --olive: #687b65;
  --olive-soft: #dfe7dc;
  --pink-soft: #f0ddd4;
  --blue-soft: #dce9e7;
  --surface-raised: rgba(255, 254, 250, .96);
  --surface-soft: rgba(255, 255, 252, .72);
  --control-surface: rgba(255, 255, 253, .94);
  --focus-ring: 0 0 0 4px rgba(188, 91, 58, .15);
  --shadow: 0 18px 48px rgba(64, 55, 44, .06);
  --shadow-soft: 0 8px 24px rgba(64, 55, 44, .05);
  --surface-sidebar: rgba(251, 252, 250, .92);
  --surface-topbar: rgba(250, 251, 249, .9);
  --hero-start: rgba(255, 255, 252, .99);
  --hero-mid: rgba(255, 251, 243, .94);
  --hero-end: rgba(231, 200, 141, .28);
  --theme-glow-primary: rgba(226, 174, 99, .11);
  --theme-glow-secondary: rgba(255, 255, 255, .62);
  --theme-grid-line: rgba(80, 60, 40, .018);
  --theme-grid-line-strong: rgba(80, 60, 40, .014);
  --theme-shadow-color: rgba(64, 55, 44, .06);
}

:root[data-lab-theme="vanilla-cream"] {
  --paper: #f5f0e4;
  --paper-deep: #e9dfcf;
  --card: #fffdf7;
  --ink: #332d25;
  --ink-soft: #5b4e40;
  --muted: #786d5f;
  --line: rgba(129, 101, 57, .16);
  --rust: #b07a32;
  --rust-dark: #76511e;
  --butter: #e3b85c;
  --olive: #738260;
  --olive-soft: #e6eadb;
  --pink-soft: #f2e3cf;
  --blue-soft: #e2ebe4;
  --surface-raised: rgba(255, 253, 247, .94);
  --surface-soft: rgba(255, 253, 247, .72);
  --control-surface: rgba(255, 253, 247, .9);
  --focus-ring: 0 0 0 4px rgba(176, 122, 50, .15);
  --shadow: 0 18px 48px rgba(101, 75, 37, .075);
  --shadow-soft: 0 8px 24px rgba(101, 75, 37, .06);
  --surface-sidebar: rgba(251, 248, 239, .94);
  --surface-topbar: rgba(248, 244, 234, .88);
  --hero-start: rgba(255, 253, 247, .99);
  --hero-mid: rgba(255, 249, 230, .95);
  --hero-end: rgba(238, 216, 157, .44);
  --theme-glow-primary: rgba(227, 184, 92, .17);
  --theme-glow-secondary: rgba(115, 130, 96, .06);
  --theme-grid-line: rgba(111, 82, 42, .025);
  --theme-grid-line-strong: rgba(111, 82, 42, .018);
  --theme-shadow-color: rgba(101, 75, 37, .075);
}

:root[data-lab-theme="berry-dessert"] {
  --paper: #f5eceb;
  --paper-deep: #ead9dc;
  --card: #fffafa;
  --ink: #352a31;
  --ink-soft: #594650;
  --muted: #786b72;
  --line: rgba(102, 68, 83, .17);
  --rust: #ad4f66;
  --rust-dark: #7c3046;
  --butter: #d9a35c;
  --olive: #667c70;
  --olive-soft: #dce8df;
  --pink-soft: #efd4dc;
  --blue-soft: #e0e6ec;
  --surface-raised: rgba(255, 250, 250, .94);
  --surface-soft: rgba(255, 250, 250, .72);
  --control-surface: rgba(255, 250, 250, .9);
  --focus-ring: 0 0 0 4px rgba(173, 79, 102, .15);
  --shadow: 0 18px 48px rgba(93, 52, 70, .1);
  --shadow-soft: 0 8px 24px rgba(93, 52, 70, .07);
  --surface-sidebar: rgba(250, 244, 244, .94);
  --surface-topbar: rgba(248, 239, 239, .89);
  --hero-start: rgba(255, 250, 250, .99);
  --hero-mid: rgba(255, 245, 242, .95);
  --hero-end: rgba(221, 174, 181, .45);
  --theme-glow-primary: rgba(210, 133, 151, .15);
  --theme-glow-secondary: rgba(102, 124, 112, .065);
  --theme-grid-line: rgba(102, 68, 83, .027);
  --theme-grid-line-strong: rgba(102, 68, 83, .019);
  --theme-shadow-color: rgba(93, 52, 70, .1);
}

:root[data-lab-theme="matcha-cool"] {
  --paper: #edf1e9;
  --paper-deep: #dce6db;
  --card: #fbfdf8;
  --ink: #2e3731;
  --ink-soft: #4b5a50;
  --muted: #69746d;
  --line: rgba(66, 91, 78, .17);
  --rust: #b66a45;
  --rust-dark: #7c432f;
  --butter: #d2a54b;
  --olive: #4d7358;
  --olive-soft: #dce8d9;
  --pink-soft: #ecdcd1;
  --blue-soft: #dbe8e8;
  --surface-raised: rgba(251, 253, 248, .94);
  --surface-soft: rgba(251, 253, 248, .72);
  --control-surface: rgba(251, 253, 248, .9);
  --focus-ring: 0 0 0 4px rgba(77, 115, 88, .15);
  --shadow: 0 18px 48px rgba(49, 76, 57, .085);
  --shadow-soft: 0 8px 24px rgba(49, 76, 57, .065);
  --surface-sidebar: rgba(245, 249, 242, .94);
  --surface-topbar: rgba(240, 246, 238, .89);
  --hero-start: rgba(251, 253, 248, .99);
  --hero-mid: rgba(244, 249, 236, .95);
  --hero-end: rgba(181, 205, 177, .43);
  --theme-glow-primary: rgba(145, 181, 131, .15);
  --theme-glow-secondary: rgba(77, 115, 88, .065);
  --theme-grid-line: rgba(66, 91, 78, .027);
  --theme-grid-line-strong: rgba(66, 91, 78, .019);
  --theme-shadow-color: rgba(49, 76, 57, .085);
}

:root[data-lab-theme="blueberry-salt"] {
  --paper: #f1f6f8;
  --paper-deep: #dfe9ee;
  --card: #fcfefe;
  --ink: #29343a;
  --ink-soft: #44545d;
  --muted: #6f7d84;
  --line: rgba(56, 82, 94, .15);
  --rust: #527d91;
  --rust-dark: #365c70;
  --butter: #d6ad64;
  --olive: #6f8f86;
  --olive-soft: #dcebe7;
  --pink-soft: #dfedf2;
  --blue-soft: #d9e8ee;
  --surface-raised: rgba(252, 254, 254, .96);
  --surface-soft: rgba(255, 255, 255, .72);
  --control-surface: rgba(252, 255, 255, .94);
  --focus-ring: 0 0 0 4px rgba(82, 125, 145, .15);
  --shadow: 0 18px 48px rgba(48, 74, 86, .07);
  --shadow-soft: 0 8px 24px rgba(48, 74, 86, .05);
  --surface-sidebar: rgba(246, 250, 251, .94);
  --surface-topbar: rgba(241, 247, 249, .9);
  --hero-start: rgba(252, 254, 254, .99);
  --hero-mid: rgba(241, 248, 251, .95);
  --hero-end: rgba(150, 190, 202, .3);
  --theme-glow-primary: rgba(110, 165, 183, .14);
  --theme-glow-secondary: rgba(255, 255, 255, .66);
  --theme-grid-line: rgba(56, 82, 94, .025);
  --theme-grid-line-strong: rgba(56, 82, 94, .018);
  --theme-shadow-color: rgba(48, 74, 86, .07);
}

:root[data-lab-theme="peach-soda"] {
  --paper: #fcf7f3;
  --paper-deep: #f2e1d7;
  --card: #fffdfb;
  --ink: #362e2b;
  --ink-soft: #5b4d48;
  --muted: #7c706a;
  --line: rgba(111, 72, 55, .14);
  --rust: #d46e51;
  --rust-dark: #a84b37;
  --butter: #e4b75a;
  --olive: #7e9b91;
  --olive-soft: #e0ebe5;
  --pink-soft: #f7dfd3;
  --blue-soft: #e2efed;
  --surface-raised: rgba(255, 253, 251, .96);
  --surface-soft: rgba(255, 255, 253, .72);
  --control-surface: rgba(255, 254, 252, .94);
  --focus-ring: 0 0 0 4px rgba(212, 110, 81, .15);
  --shadow: 0 18px 48px rgba(115, 67, 48, .07);
  --shadow-soft: 0 8px 24px rgba(115, 67, 48, .05);
  --surface-sidebar: rgba(253, 248, 244, .94);
  --surface-topbar: rgba(252, 245, 240, .9);
  --hero-start: rgba(255, 253, 251, .99);
  --hero-mid: rgba(255, 247, 240, .95);
  --hero-end: rgba(242, 177, 130, .3);
  --theme-glow-primary: rgba(236, 161, 120, .14);
  --theme-glow-secondary: rgba(255, 255, 255, .66);
  --theme-grid-line: rgba(111, 72, 55, .023);
  --theme-grid-line-strong: rgba(111, 72, 55, .017);
  --theme-shadow-color: rgba(115, 67, 48, .07);
}

:root[data-lab-theme="cocoa-mocha"] {
  --paper: #f8f6f3;
  --paper-deep: #ebe4dc;
  --card: #fffdfb;
  --ink: #342d29;
  --ink-soft: #554a45;
  --muted: #766c66;
  --line: rgba(81, 63, 53, .15);
  --rust: #82594b;
  --rust-dark: #5c3e34;
  --butter: #c6a064;
  --olive: #748279;
  --olive-soft: #e2e9e3;
  --pink-soft: #ede1d9;
  --blue-soft: #e3ebe9;
  --surface-raised: rgba(255, 253, 251, .96);
  --surface-soft: rgba(255, 255, 253, .72);
  --control-surface: rgba(255, 254, 252, .94);
  --focus-ring: 0 0 0 4px rgba(130, 89, 75, .15);
  --shadow: 0 18px 48px rgba(82, 58, 47, .075);
  --shadow-soft: 0 8px 24px rgba(82, 58, 47, .055);
  --surface-sidebar: rgba(249, 247, 244, .94);
  --surface-topbar: rgba(247, 244, 240, .9);
  --hero-start: rgba(255, 253, 251, .99);
  --hero-mid: rgba(249, 245, 240, .95);
  --hero-end: rgba(194, 164, 133, .28);
  --theme-glow-primary: rgba(167, 128, 96, .12);
  --theme-glow-secondary: rgba(255, 255, 255, .64);
  --theme-grid-line: rgba(81, 63, 53, .024);
  --theme-grid-line-strong: rgba(81, 63, 53, .017);
  --theme-shadow-color: rgba(82, 58, 47, .075);
}

:root[data-lab-theme="lavender-cloud"] {
  --paper: #f7f5fb;
  --paper-deep: #e8e4f0;
  --card: #fffdfd;
  --ink: #332f3d;
  --ink-soft: #514b5f;
  --muted: #777080;
  --line: rgba(91, 78, 112, .15);
  --rust: #8066a5;
  --rust-dark: #5e427e;
  --butter: #d5ae63;
  --olive: #758b80;
  --olive-soft: #e0ebe5;
  --pink-soft: #ece4f5;
  --blue-soft: #e4e9f2;
  --surface-raised: rgba(255, 253, 253, .96);
  --surface-soft: rgba(255, 255, 255, .72);
  --control-surface: rgba(255, 254, 255, .94);
  --focus-ring: 0 0 0 4px rgba(128, 102, 165, .15);
  --shadow: 0 18px 48px rgba(83, 67, 109, .075);
  --shadow-soft: 0 8px 24px rgba(83, 67, 109, .055);
  --surface-sidebar: rgba(249, 247, 253, .94);
  --surface-topbar: rgba(246, 243, 251, .9);
  --hero-start: rgba(255, 253, 253, .99);
  --hero-mid: rgba(248, 245, 253, .95);
  --hero-end: rgba(184, 169, 216, .3);
  --theme-glow-primary: rgba(166, 149, 208, .15);
  --theme-glow-secondary: rgba(255, 255, 255, .68);
  --theme-grid-line: rgba(91, 78, 112, .024);
  --theme-grid-line-strong: rgba(91, 78, 112, .017);
  --theme-shadow-color: rgba(83, 67, 109, .075);
}

html,
body {
  background-color: var(--paper) !important;
}

body {
  background:
    radial-gradient(circle at 100% -4%, var(--theme-glow-primary), transparent 22rem),
    radial-gradient(circle at 0 42%, var(--theme-glow-secondary), transparent 26rem),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--paper) 88%, #fff 12%) 0%,
      color-mix(in srgb, var(--card) 94%, var(--paper) 6%) 48%,
      color-mix(in srgb, var(--butter) 7%, var(--card) 93%) 100%
    ) !important;
}

body::before {
  opacity: .08;
  background-image:
    linear-gradient(var(--theme-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--theme-grid-line-strong) 1px, transparent 1px) !important;
}

::selection {
  color: var(--ink);
  background: color-mix(in srgb, var(--butter) 42%, transparent);
}

.sidebar {
  background: var(--surface-sidebar) !important;
  border-color: var(--line) !important;
}

.topbar {
  background: var(--surface-topbar) !important;
  border-color: var(--line) !important;
}

.brand-mark {
  background: linear-gradient(145deg, color-mix(in srgb, var(--rust) 76%, #fff 24%), var(--rust-dark)) !important;
  box-shadow: 0 9px 22px color-mix(in srgb, var(--rust-dark) 20%, transparent) !important;
}

.nav-button:hover {
  background: color-mix(in srgb, var(--rust) 7%, transparent) !important;
}

.nav-button.active {
  color: var(--rust-dark) !important;
  border-color: color-mix(in srgb, var(--rust) 13%, transparent) !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--pink-soft) 92%, transparent), color-mix(in srgb, var(--pink-soft) 58%, transparent)) !important;
}

.nav-button.active .nav-icon,
.quick-action-icon,
.sidebar-preferences-brand-preview,
.lab-theme-option.is-selected .lab-theme-check {
  background: var(--rust) !important;
  color: var(--accent-contrast) !important;
}

.search-box,
.filter-search,
.price-search,
input,
select,
textarea {
  color: var(--ink) !important;
}

.search-box,
input,
select,
textarea {
  background-color: var(--control-surface);
  border-color: var(--line);
}

.primary-button {
  border-color: var(--rust) !important;
  background: linear-gradient(145deg, color-mix(in srgb, var(--rust) 86%, #fff 14%), var(--rust)) !important;
  box-shadow: 0 7px 17px color-mix(in srgb, var(--rust) 17%, transparent) !important;
}

.primary-button:hover {
  background: linear-gradient(145deg, var(--rust), var(--rust-dark)) !important;
}

.hero {
  border-color: var(--line) !important;
  background:
    radial-gradient(circle at 91% 16%, color-mix(in srgb, var(--butter) 25%, transparent), transparent 17rem),
    linear-gradient(112deg, var(--hero-start) 0%, var(--hero-mid) 61%, var(--hero-end) 100%) !important;
}

.paper-note,
.quick-start,
.stat-card,
.detail-card,
.filter-panel,
.data-intro,
.data-stat,
.lab-card,
.biz-card,
.vc-card,
.document-library-card,
.idea-library-card,
.selection-card {
  border-color: var(--line) !important;
}

.paper-note,
.quick-start,
.stat-card,
.data-stat {
  background: var(--surface-raised) !important;
}

.sidebar-preferences-modal {
  background: var(--theme-modal-overlay) !important;
}

.sidebar-preferences-card,
.lab-theme-popover,
.recipe-detail-modal-card,
.selection-lightbox-stage,
.document-library-modal-card,
.idea-library-modal-card {
  background: var(--card) !important;
  border-color: var(--line) !important;
}

.theme-settings-button {
  color: var(--ink) !important;
  background: var(--surface-raised) !important;
  border-color: var(--line) !important;
}

.theme-settings-button:hover {
  border-color: color-mix(in srgb, var(--rust) 48%, var(--line)) !important;
  background: var(--pink-soft) !important;
}

.theme-settings-icon {
  border-color: var(--rust-dark) !important;
}

.lab-theme-popover-current {
  background: var(--surface-soft) !important;
}

.lab-theme-popover-option {
  color: var(--ink) !important;
  background: var(--card) !important;
  border-color: var(--line) !important;
}

.lab-theme-popover-option.is-selected {
  background: var(--pink-soft) !important;
  border-color: var(--rust) !important;
}

.lab-theme-option {
  color: var(--ink) !important;
  background: var(--card) !important;
  border-color: var(--line) !important;
}

.lab-theme-option.is-selected {
  background: var(--pink-soft) !important;
  border-color: var(--rust) !important;
}

@media (prefers-reduced-motion: reduce) {
  .lab-theme-option,
  .nav-button,
  .primary-button {
    transition: none !important;
  }
}
    /* V0.6.19 recipe-library visual hierarchy refresh; V0.6.98 density restoration. */
    #recipes .page-header {
      margin-bottom: 18px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: end;
      gap: 24px;
    }

    #recipes .page-header > div:first-child {
      max-width: 780px;
    }

    #recipes .page-header h1 {
      margin: 4px 0 4px;
      font-size: clamp(42px, 4vw, 60px);
      line-height: 1;
      letter-spacing: -.045em;
    }

    #recipes .page-header p {
      max-width: 760px;
      color: color-mix(in srgb, var(--muted) 92%, var(--ink));
      font-size: 13px;
      line-height: 1.7;
    }

    .recipe-library-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
    }

    .recipe-library-actions > button {
      min-height: 46px;
      padding-inline: 18px;
      border-radius: 14px;
    }

    #recipes .filter-bar {
      top: 76px;
      margin-bottom: 18px;
      padding: 12px 14px 10px;
      display: grid;
      grid-template-columns: minmax(320px, 1fr) minmax(140px, 180px) minmax(140px, 180px) minmax(190px, 220px) auto;
      align-items: center;
      gap: 10px;
      border-radius: 18px;
      background: color-mix(in srgb, var(--paper) 92%, transparent);
      box-shadow: 0 10px 30px rgba(69, 51, 34, .055);
    }

    #recipes .recipe-search-history-wrap {
      width: 100%;
      min-width: 0;
    }

    #recipes .filter-search,
    #recipes .filter-bar .select-field,
    #recipes .recipe-library-toggle-group button {
      min-height: 48px;
      border-radius: 13px;
      background: color-mix(in srgb, var(--card) 97%, transparent);
    }

    #recipes .filter-search {
      width: 100%;
      font-size: 14px;
    }

    #recipes .recipe-library-toggle-group {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    #recipes .recipe-library-toggle-group button {
      min-width: 0;
      flex: 1 1 0;
      padding-inline: 14px;
      color: var(--muted);
      font-size: 11px;
      box-shadow: none;
      white-space: nowrap;
    }

    #recipes .recipe-library-toggle-group button:hover,
    #recipes .recipe-library-toggle-group button.active {
      color: var(--rust);
      background: color-mix(in srgb, var(--rust) 7%, var(--card));
    }

    #recipes .recipe-count {
      width: 100%;
      margin: 0;
      padding: 0 3px;
      grid-column: 1 / -1;
      color: var(--muted);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .03em;
      line-height: 1.45;
    }

    #recipes .recipe-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      align-items: stretch;
      gap: 16px;
    }

    #recipes .recipe-card {
      min-width: 0;
      min-height: 252px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border: 1px solid color-mix(in srgb, var(--line) 92%, transparent);
      border-radius: 18px;
      background: color-mix(in srgb, var(--card) 98%, var(--paper));
      box-shadow: 0 7px 24px rgba(69, 51, 34, .045);
      isolation: isolate;
      transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }

    #recipes .recipe-card:hover {
      transform: translateY(-3px);
      border-color: color-mix(in srgb, var(--rust) 28%, var(--line));
      background: var(--card);
      box-shadow: 0 16px 34px rgba(69, 51, 34, .09);
    }

    #recipes .recipe-card:focus-visible {
      outline: 3px solid color-mix(in srgb, var(--rust) 28%, transparent);
      outline-offset: 3px;
    }

    #recipes .recipe-card-accent {
      width: 100%;
      height: 7px;
      flex: 0 0 7px;
      display: block;
      background: var(--recipe-accent, var(--rust));
      opacity: .82;
      transition: height .18s ease, opacity .18s ease;
    }

    #recipes .recipe-card:hover .recipe-card-accent {
      height: 9px;
      flex-basis: 9px;
      opacity: 1;
    }

    #recipes .recipe-body {
      min-width: 0;
      padding: 17px 19px 18px;
      display: flex;
      flex: 1;
      flex-direction: column;
    }

    #recipes .recipe-card-topline {
      min-width: 0;
      margin-bottom: 11px;
      display: flex;
      align-items: center;
      gap: 7px;
    }

    #recipes .recipe-card-meta {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 7px;
    }

    #recipes .recipe-card-category {
      min-width: 0;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      overflow: hidden;
      color: var(--muted);
      font-size: 10px;
      font-weight: 850;
      letter-spacing: .06em;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    #recipes .recipe-card-category::before {
      width: 7px;
      height: 7px;
      flex: 0 0 7px;
      border-radius: 50%;
      background: var(--recipe-accent, var(--rust));
      content: "";
    }

    #recipes .recipe-card .badge {
      min-height: 24px;
      padding: 0 8px;
      font-size: 9px;
    }

    #recipes .recipe-card .version-label {
      min-height: 24px;
      margin-left: auto;
      padding: 0 8px;
      border: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      color: var(--ink);
      background: color-mix(in srgb, var(--paper) 68%, var(--card));
      font-size: 11px;
      font-weight: 800;
      line-height: 1;
      white-space: nowrap;
    }

    #recipes .recipe-card .version-label::after {
      margin-left: 5px;
      color: var(--rust);
      content: "\2192";
      font-family: Arial, sans-serif;
      font-size: 12px;
      font-weight: 700;
      transition: transform .18s ease;
    }

    #recipes .recipe-card:hover .version-label::after {
      transform: translateX(2px);
    }

    #recipes .recipe-card-title-row {
      min-width: 0;
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 7px;
    }

    #recipes .recipe-card-title-row h3 {
      flex: 1 1 auto;
      min-width: 0;
      margin: 0;
    }

    #recipes .recipe-body h3 {
      min-height: 55px;
      margin: 0 0 7px;
      display: -webkit-box;
      overflow: hidden;
      color: var(--ink);
      font-size: 22px;
      line-height: 1.25;
      letter-spacing: -.025em;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    #recipes .recipe-card-title-row h3 {
      min-height: 55px;
      margin: 0;
    }

    #recipes .recipe-card-title-row .version-label {
      flex: 0 0 auto;
    }

    #recipes .recipe-card .recipe-description {
      min-height: 40px;
      max-height: 40px;
      margin: 0;
      display: -webkit-box;
      overflow: hidden;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.75;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    #recipes .recipe-card-bottom {
      margin-top: auto;
      padding-top: 14px;
      border-top: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
      display: block;
    }

    #recipes .recipe-facts {
      min-width: 0;
      padding: 0;
      display: grid;
      flex: 1;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0;
      border: 0;
    }

    #recipes .recipe-card .recipe-facts > div {
      min-width: 0;
      padding: 0 0 0 8px;
      border-left: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
      display: block;
    }

    #recipes .recipe-card .recipe-facts > div:first-child {
      padding-left: 0;
      border-left: 0;
    }

    #recipes .recipe-card .recipe-facts small {
      display: block;
      overflow: hidden;
      color: color-mix(in srgb, var(--muted) 88%, transparent);
      font-size: 8px;
      font-weight: 750;
      letter-spacing: .03em;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    #recipes .recipe-card .recipe-facts strong {
      min-height: 31px;
      margin-top: 4px;
      display: -webkit-box;
      overflow: hidden;
      color: var(--ink);
      font-size: 12px;
      font-weight: 780;
      line-height: 1.3;
      text-overflow: clip;
      white-space: normal;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    #recipes .recipe-card .recipe-facts strong.is-pending {
      color: var(--muted);
      font-weight: 620;
    }

    #recipes .recipe-facts.is-adaptive {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px 12px;
    }

    #recipes .recipe-facts.is-adaptive .recipe-fact.is-long {
      grid-column: 1 / -1;
    }

    #recipes .recipe-card-open {
      display: none;
    }

    @media (min-width: 721px) {
      /* Keep compact mode useful after the recipe-card visual refresh. */
      body[data-density="compact"] #recipes .page-header {
        margin-bottom: 12px;
        gap: 16px;
      }

      body[data-density="compact"] #recipes .page-header h1 {
        font-size: clamp(36px, 3.2vw, 48px);
        line-height: 1.05;
      }

      body[data-density="compact"] #recipes .page-header p {
        max-width: 680px;
        line-height: 1.5;
      }

      body[data-density="compact"] .recipe-library-actions {
        gap: 8px;
      }

      body[data-density="compact"] .recipe-library-actions > button {
        min-height: 42px;
        padding-inline: 15px;
        border-radius: 12px;
      }

      body[data-density="compact"] #recipes .filter-bar {
        margin-bottom: 12px;
        padding: 8px 10px 7px;
        gap: 8px;
        border-radius: 15px;
      }

      body[data-density="compact"] #recipes .filter-search,
      body[data-density="compact"] #recipes .filter-bar .select-field,
      body[data-density="compact"] #recipes .recipe-library-toggle-group button {
        min-height: 42px;
        border-radius: 11px;
      }

      body[data-density="compact"] #recipes .recipe-grid {
        align-items: start;
        gap: 12px;
      }

      body[data-density="compact"] #recipes .recipe-card {
        min-height: 0;
        border-radius: 15px;
      }

      body[data-density="compact"] #recipes .recipe-card-accent,
      body[data-density="compact"] #recipes .recipe-card:hover .recipe-card-accent {
        height: 5px;
        flex-basis: 5px;
      }

      body[data-density="compact"] #recipes .recipe-body {
        padding: 13px 15px 14px;
      }

      body[data-density="compact"] #recipes .recipe-card-topline {
        margin-bottom: 7px;
      }

      body[data-density="compact"] #recipes .recipe-card .badge,
      body[data-density="compact"] #recipes .recipe-card .version-label {
        min-height: 21px;
      }

      body[data-density="compact"] #recipes .recipe-card .badge {
        padding-inline: 7px;
        font-size: 8px;
      }

      body[data-density="compact"] #recipes .recipe-card .version-label {
        padding-inline: 7px;
        font-size: 10px;
      }

      body[data-density="compact"] #recipes .recipe-card .version-label::after {
        margin-left: 4px;
        font-size: 11px;
      }

      body[data-density="compact"] #recipes .recipe-body h3 {
        min-height: 48px;
        margin-bottom: 5px;
        font-size: 19px;
        line-height: 1.2;
      }

      body[data-density="compact"] #recipes .recipe-card .recipe-description {
        min-height: 34px;
        max-height: 34px;
        font-size: 10px;
        line-height: 1.6;
      }

      body[data-density="compact"] #recipes .recipe-card-bottom {
        padding-top: 10px;
      }

      body[data-density="compact"] #recipes .recipe-card .recipe-facts > div {
        padding-left: 6px;
      }

      body[data-density="compact"] #recipes .recipe-card .recipe-facts small {
        font-size: 7px;
      }

      body[data-density="compact"] #recipes .recipe-card .recipe-facts strong {
        min-height: 27px;
        margin-top: 3px;
        font-size: 11px;
        line-height: 1.25;
      }

      body[data-density="compact"] #recipes .recipe-family-card .recipe-description {
        min-height: 34px;
        max-height: 34px;
      }

      body[data-density="compact"] #recipes .recipe-family-card-variants {
        min-height: 22px;
        gap: 4px;
        margin: 0 0 8px;
      }

      body[data-density="compact"] #recipes .recipe-family-variant-chip {
        min-height: 21px;
        padding-inline: 7px;
        font-size: 9px;
      }
    }

    @media (min-width: 1850px) {
      #recipes .recipe-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
    }

    @media (max-width: 1350px) and (min-width: 721px) {
      #recipes .filter-bar {
        grid-template-columns: minmax(0, 1fr) minmax(140px, .5fr) minmax(140px, .5fr);
      }

      #recipes .recipe-search-history-wrap {
        grid-column: 1 / -1;
      }

      #recipes .recipe-library-toggle-group {
        grid-column: 1;
      }

      #recipes .recipe-count {
        grid-column: 2 / -1;
      }
    }

    @media (max-width: 1150px) and (min-width: 721px) {
      #recipes .recipe-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 720px) {
      #recipes .page-header {
        margin-bottom: 12px;
        align-items: center;
        gap: 8px;
      }

      #recipes .page-header h1 {
        font-size: 29px;
        letter-spacing: -.03em;
      }

      .recipe-library-actions {
        flex-wrap: nowrap;
        gap: 7px;
      }

      #recipes .page-header .recipe-library-actions .secondary-button {
        width: 56px;
        min-width: 56px;
        min-height: 44px;
        padding: 0 8px;
        overflow: hidden;
        font-size: 0;
      }

      #recipes .page-header .recipe-library-actions .secondary-button::after {
        content: "组合";
        font-size: 11px;
        font-weight: 850;
      }

      #recipes .filter-bar {
        top: 64px;
        margin-bottom: 10px;
        padding: 8px;
        grid-template-columns: minmax(0, 1fr) 58px;
        gap: 8px;
        border-radius: 15px;
      }

      #recipes .filter-search,
      #recipes .filter-bar .select-field,
      #recipes .recipe-library-toggle-group button {
        min-height: 44px;
        border-radius: 11px;
      }

      #recipes .recipe-count {
        grid-column: 1 / -1;
        font-size: 9px;
      }

      #recipes .recipe-grid {
        grid-template-columns: 1fr;
        gap: 10px;
      }

      #recipes .recipe-card,
      body[data-density="compact"] #recipes .recipe-card {
        min-height: 0;
        display: flex;
        grid-template-columns: none;
        border-radius: 16px;
      }

      #recipes .recipe-card:hover,
      #recipes .recipe-card:active {
        transform: none;
      }

      #recipes .recipe-card-accent,
      #recipes .recipe-card:hover .recipe-card-accent {
        height: 5px;
        flex-basis: 5px;
      }

      #recipes .recipe-body,
      body[data-density="compact"] #recipes .recipe-body {
        padding: 12px 13px 13px;
      }

      #recipes .recipe-card-topline {
        margin-bottom: 6px;
      }

      #recipes .recipe-body h3,
      body[data-density="compact"] #recipes .recipe-body h3 {
        min-height: 0;
        margin-bottom: 5px;
        font-size: 18px;
        line-height: 1.3;
      }

      #recipes .recipe-card-title-row {
        align-items: flex-start;
        gap: 6px;
        margin-bottom: 3px;
      }

      #recipes .recipe-card-title-row h3,
      body[data-density="compact"] #recipes .recipe-card-title-row h3 {
        min-height: 0;
        margin: 0;
        font-size: 18px;
        line-height: 1.25;
      }

      #recipes .recipe-card-title-row .version-label {
        min-height: 22px;
        padding-inline: 7px;
        font-size: 10px;
      }

      #recipes .recipe-card .recipe-description,
      body[data-density="compact"] #recipes .recipe-card .recipe-description {
        min-height: 0;
        height: 18px;
        max-height: 18px;
        margin-bottom: 5px;
        display: block;
        overflow: hidden;
        line-height: 1.6;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 10px;
      }

      #recipes .recipe-family-card-variants {
        min-height: 0;
        gap: 4px;
        margin: 0 0 6px;
      }

      #recipes .recipe-family-variant-chip {
        min-height: 21px;
        padding-inline: 7px;
        font-size: 9px;
      }

      #recipes .recipe-card-bottom {
        padding-top: 7px;
      }

      #recipes .recipe-card .recipe-facts > div,
      body[data-density="compact"] #recipes .recipe-card .recipe-facts > div {
        padding: 0 0 0 6px;
        display: block;
      }

      #recipes .recipe-card .recipe-facts > div:first-child {
        padding-left: 0;
      }

      #recipes .recipe-card .recipe-facts small {
        font-size: 7px;
      }

      #recipes .recipe-card .recipe-facts strong {
        min-height: 20px;
        margin-top: 2px;
        font-size: 11px;
        line-height: 1.25;
      }

      #recipes .recipe-facts.is-adaptive {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px 8px;
      }

      #recipes .recipe-facts.is-adaptive .recipe-fact.is-long {
        grid-column: 1 / -1;
      }

      #recipes .recipe-card-user-tags {
        margin: 5px 0 -2px;
        gap: 4px;
      }

      #recipes .recipe-card-user-tag {
        padding: 3px 6px;
        font-size: 8px;
      }

      #recipes.recipe-scroll-compact > .page-header {
        max-height: 49px;
        margin-bottom: 8px;
        overflow: hidden;
        align-items: center;
      }

      #recipes.recipe-scroll-compact > .page-header .eyebrow,
      #recipes.recipe-scroll-compact > .page-header p {
        display: none;
      }

      #recipes.recipe-scroll-compact > .page-header h1 {
        margin: 0;
        font-size: 22px;
        line-height: 1.05;
      }

      #recipes.recipe-scroll-compact > .page-header .recipe-library-actions .primary-button,
      #recipes.recipe-scroll-compact > .page-header .recipe-library-actions .secondary-button {
        min-width: 40px;
        width: 40px;
        height: 40px;
        min-height: 40px;
        padding: 0 6px;
      }

      #recipes.recipe-scroll-compact > .page-header .recipe-library-actions .secondary-button::after {
        font-size: 10px;
      }

      #recipes .filter-bar.recipe-filter-compact {
        margin-bottom: 8px;
        padding: 5px 7px;
        border-radius: 12px;
      }

      #recipes .recipe-filter-compact .filter-search,
      #recipes .recipe-filter-compact .mobile-recipe-filter-toggle {
        min-height: 40px;
        height: 40px;
        border-radius: 10px;
      }

      #recipes .recipe-filter-compact .recipe-count {
        display: none;
      }

    }

/* The recipe library already has a dedicated search field. On mobile the
   shared global toolbar only repeats that entry point, so let the page start
   directly with its own header; desktop keeps the established toolbar. */
@media screen and (max-width: 900px) {
  body[data-active-view="recipes"] .topbar,
  body:has(#recipes.view.active) .topbar {
    display: none !important;
  }

  body[data-active-view="recipes"] .content,
  body:has(#recipes.view.active) .content {
    padding-top: 18px;
  }
}

/* Keep recipe readiness visible on mobile, but reduce badge bulk. Revision
   codes stay desktop-only; family-card flavor counts remain visible. */
@media screen and (max-width: 900px) {
  #recipes .recipe-card:not(.recipe-family-card) .recipe-card-title-row .version-label {
    display: none;
  }

  #recipes .recipe-card .recipe-card-meta > .badge {
    min-height: 20px;
    padding: 0 6px;
    gap: 4px;
    font-size: 8px;
  }
}

/* V0.8 private-library candidate. Decoration preserves desktop markup and
   source data; only these mobile media rules suppress repeated placeholders. */
.recipe-mobile-filter-summary,
.recipe-mobile-pending-summary,
.recipe-mobile-pin-label { display: none; }

@media (max-width: 900px) {
  html #recipes:not(.rc-trial-active) > .page-header { margin-bottom: 10px; align-items: center; }
  html #recipes:not(.rc-trial-active) > .page-header .eyebrow,
  html #recipes:not(.rc-trial-active) > .page-header p { display: none; }
  html #recipes:not(.rc-trial-active) > .page-header h1 { margin: 0; font-size: 29px; line-height: 1.15; }
  html #recipes:not(.rc-trial-active) > .page-header [data-new-recipe] {
    width: 44px; min-width: 44px; min-height: 44px; height: 44px; padding: 0; font-size: 0;
  }
  html #recipes:not(.rc-trial-active) > .page-header [data-new-recipe]::after { content: "+"; font-size: 24px; }

  html[data-release-channel="cloud"] #recipes .filter-bar.mobile-recipe-ready,
  html #recipes .filter-bar.mobile-recipe-ready {
    top: 0;
    grid-template-columns: minmax(0, 1fr) 54px;
    gap: 6px;
  }
  html #recipes .filter-bar.mobile-recipe-ready.mobile-filter-expanded {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html #recipes .filter-bar.mobile-recipe-ready .recipe-search-history-wrap {
    grid-column: 1 / -1;
    padding-right: 60px;
    width: 100%;
    box-sizing: border-box;
  }
  html #recipes .filter-bar.mobile-recipe-ready .mobile-recipe-filter-toggle {
    position: absolute;
    right: 0;
    top: 0;
    width: 54px;
    min-height: 44px;
    height: 44px;
  }
  html #recipes .filter-bar.mobile-recipe-ready .filter-search {
    width: 100%;
    min-height: 44px;
    height: 44px;
    font-size: 14px;
  }
  html #recipes .filter-bar.mobile-recipe-ready .select-field { min-height: 44px; height: 44px; font-size: 13px; }
  html #recipes .recipe-mobile-filter-summary {
    grid-column: 1 / -1;
    order: 1;
    display: block;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
  }
  html #recipes .mobile-filter-expanded .recipe-mobile-filter-summary { display: none; }
  html #recipes .recipe-count { order: 2; font-size: 11px; }
  html #recipes .recipe-card { min-height: 0; display: flex; grid-template-columns: none; }
  html #recipes .recipe-body { padding: 12px 13px; }
  html #recipes .recipe-card-topline { padding-right: 88px; margin-bottom: 7px; }
  html #recipes .recipe-card-meta { flex-wrap: wrap; gap: 5px; }
  html #recipes .recipe-card-actions,
  html #recipes .recipe-card.is-recipe-pinned .recipe-card-actions {
    top: 3px; right: 6px; opacity: 1; pointer-events: auto; transform: none; gap: 0;
  }
  html #recipes .recipe-card-actions .recipe-compare-action,
  html #recipes .recipe-card-actions [data-recipe-library-action="tag"] { display: none; }
  html #recipes .recipe-card-action { width: 44px; height: 44px; padding: 6px; }
  html #recipes .recipe-card-action-visual {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }
  html #recipes .recipe-card.is-recipe-pinned::before { display: none; }
  html #recipes .is-recipe-pinned .recipe-mobile-pin-label {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    color: var(--rust-dark);
    font-size: 10px;
    font-weight: 800;
  }
  html #recipes .recipe-card-title-row h3 { min-height: 0; font-size: 19px; line-height: 1.35; }
  html #recipes .recipe-card .recipe-description { min-height: 0; height: auto; max-height: 40px; font-size: 12px; line-height: 1.6; }
  html #recipes .recipe-card .recipe-description.is-mobile-placeholder,
  html #recipes .recipe-card .recipe-facts > .is-mobile-pending { display: none; }
  html #recipes .recipe-card-bottom { margin-top: 8px; padding-top: 8px; }
  html #recipes .recipe-card .recipe-facts {
    display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 16px;
  }
  html #recipes .recipe-card .recipe-facts > div { border: 0; padding: 0; flex: 1 1 80px; }
  html #recipes .recipe-card .recipe-facts small { font-size: 10px; }
  html #recipes .recipe-card .recipe-facts strong { min-height: 0; margin-top: 2px; font-size: 13px; line-height: 1.4; }
  html #recipes .recipe-mobile-pending-summary:not(:empty) { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; }
}
/* Compact retail comparison, kept inside the material-cost workspace. */
.competitor-tabs { display:flex; gap:6px; border-bottom:1px solid var(--line, #ded8cc); margin-bottom:26px; }
.competitor-tabs button { border:0; background:transparent; padding:13px 22px; font:inherit; color:var(--muted,#80786e); border-bottom:3px solid transparent; cursor:pointer; }
.competitor-tabs button[aria-selected="true"] { color:var(--rust,#9c5e42); border-color:var(--rust,#9c5e42); font-weight:700; }
#costMaterialsPanel[hidden], #costCompetitorsPanel[hidden], .competitor-comparison[hidden] { display:none!important; }
.competitor-header { gap:20px; align-items:center; }
.competitor-actions { display:flex; gap:10px; flex-wrap:wrap; }
.competitor-overview { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:22px 26px; border:1px solid #dce0d2; border-radius:18px; background:#f0f2e9; margin:0 0 24px; color:#455444; }
.competitor-kicker { font-size:17px; font-weight:700; }
.competitor-overview p { margin:8px 0 0; font-size:13px; line-height:1.7; }
#competitorCounts { display:flex; gap:25px; flex-shrink:0; }
#competitorCounts strong { display:block; font-size:27px; font-variant-numeric:tabular-nums; }
#competitorCounts small { font-size:12px; }
.competitor-toolbar { display:flex; align-items:end; gap:12px; flex-wrap:wrap; }
.competitor-toolbar label, .competitor-form-grid label, .competitor-details>label, #competitorImportForm>label { display:flex; flex-direction:column; gap:7px; font-size:12px; color:var(--muted,#756d63); }
.competitor-toolbar input, .competitor-toolbar select, .competitor-editor input:not([type="checkbox"]):not([type="file"]), .competitor-editor select, .competitor-editor textarea, .competitor-import input { background:var(--paper,#fffdf8); border:1px solid var(--line,#ded8cc); border-radius:9px; padding:10px 12px; color:var(--ink,#332f29); font:inherit; min-height:42px; min-width:0; }
.competitor-search { flex:1; min-width:200px; }
.competitor-toolbar select { max-width:190px; }
.competitor-text-button { color:var(--rust,#95603f); background:none; border:0; font:inherit; font-size:12px; padding:10px 4px; cursor:pointer; }
.competitor-result-head { display:flex; justify-content:space-between; gap:16px; font-size:12px; color:var(--muted,#80786e); padding:20px 0 12px; }
.competitor-table-wrap { overflow-x:auto; border:1px solid var(--line,#ded8cc); border-radius:14px; background:var(--paper,#fffdf8); }
.competitor-table { width:100%; border-collapse:collapse; font-size:13px; }
.competitor-table th { text-align:left; font-size:11px; font-weight:500; color:var(--muted,#81786b); background:rgba(157,138,106,.045); padding:14px 14px; white-space:nowrap; }
.competitor-table td { border-top:1px solid var(--line,#e6e0d6); padding:17px 14px; vertical-align:middle; line-height:1.6; }
.competitor-table input[type="checkbox"] { width:22px; height:22px; margin:0; accent-color:var(--rust,#9c5e42); cursor:pointer; vertical-align:middle; }
.competitor-table tbody tr[data-competitor-row] { cursor:pointer; }
.competitor-table tbody tr[data-competitor-row]:hover { background:rgba(157,138,106,.05); }
.competitor-table small { display:block; color:var(--muted,#81786b); font-size:11px; }
.competitor-product { display:flex; align-items:center; gap:12px; min-width:155px; }
.competitor-product img { width:40px; height:40px; object-fit:cover; border-radius:8px; }
.competitor-product button { padding:0; border:0; background:none; cursor:zoom-in; }
.competitor-retail { font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums; }
.competitor-per500 { color:#4f674c; font-size:18px; font-weight:750; white-space:nowrap; font-variant-numeric:tabular-nums; }
.competitor-promo { color:#a16436!important; }
.competitor-footnote { font-size:12px; color:var(--muted,#80786e); line-height:1.8; margin:14px 0; }
.competitor-empty { text-align:center; padding:55px 20px!important; color:var(--muted,#80786e); }
.competitor-empty strong { display:block; font-size:17px; margin-bottom:8px; color:var(--ink,#332f29); }
.competitor-comparison { border:1px solid #d9dfcf; border-radius:14px; padding:18px; margin:0 0 16px; background:#f6f7f0; }
.competitor-compare-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.competitor-compare-head strong { margin-right:auto; }
.competitor-compare-head select { font:inherit; font-size:12px; max-width:260px; padding:8px; border:1px solid #d6dccd; border-radius:8px; background:var(--paper,#fffdf8); }
.competitor-compare-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); gap:10px; }
.competitor-compare-card { padding:14px; border:1px solid #e1e4d8; border-radius:10px; background:var(--paper,#fffdf8); }
.competitor-compare-card strong, .competitor-compare-card small { display:block; }
.competitor-compare-card small { color:var(--muted,#80786e); font-size:11px; margin-bottom:5px; }
.competitor-compare-card .competitor-per500 { margin:12px 0 5px; }
.competitor-comparison p { font-size:12px; line-height:1.7; margin:10px 0 0; color:#847252; }
.competitor-editor, .competitor-import, .competitor-image-dialog { color:var(--ink,#332f29); background:var(--paper,#fffdf8); border:1px solid var(--line,#ded8cc); padding:0; box-shadow:0 16px 80px #28201526; }
.competitor-editor { width:min(560px,100%); max-width:100%; height:100dvh; max-height:100dvh; margin:0 0 0 auto; border-radius:20px 0 0 20px; }
.competitor-editor::backdrop, .competitor-import::backdrop, .competitor-image-dialog::backdrop { background:#30271d66; }
#competitorForm { padding:28px; }
.competitor-dialog-head { display:flex; justify-content:space-between; align-items:flex-start; gap:15px; margin-bottom:24px; }
.competitor-dialog-head h2 { margin:6px 0 0; font-size:25px; }
.competitor-close { background:none; border:0; font-size:27px; padding:0 7px; color:var(--muted,#80786e); cursor:pointer; }
.competitor-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px 14px; }
.competitor-unit-input { display:flex; gap:5px; }
.competitor-unit-input input { width:100%; }
.competitor-unit-input select { width:70px; flex-shrink:0; }
.competitor-checkbox { display:flex; align-items:center; gap:8px; font-size:12px; margin:20px 0; }
.competitor-preview { background:#eff2e7; color:#4f674c; border-radius:12px; padding:20px; font-size:13px; line-height:1.7; }
.competitor-preview strong { display:block; font-size:25px; }
.competitor-details { margin-top:24px; border-top:1px solid var(--line,#ded8cc); padding-top:18px; }
.competitor-details summary { cursor:pointer; font-size:14px; }
.competitor-details summary span { color:var(--muted,#80786e); font-size:12px; margin-left:8px; }
.competitor-details>label { margin-top:14px; }
.competitor-image-editor { display:flex; align-items:center; gap:10px; margin:18px 0; }
.competitor-image-editor img { width:64px; height:64px; object-fit:cover; border-radius:8px; }
.competitor-error { font-size:12px; color:#a54132; line-height:1.7; }
.competitor-form-footer { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; margin-top:24px; }
.competitor-import { width:min(1100px,94vw); max-height:90dvh; border-radius:18px; padding:26px; }
.competitor-import p { font-size:13px; color:var(--muted,#80786e); line-height:1.7; }
.competitor-import-actions { display:flex; align-items:center; gap:16px; padding:14px 0; font-size:12px; }
.competitor-import-table input { width:140px; }
.competitor-import-table input[type="checkbox"] { width:22px; height:22px; }
.competitor-import-table td { padding:12px 10px; }
.competitor-import-table tr[data-copied="true"] { opacity:.55; }
.competitor-image-dialog { max-width:92vw; max-height:92dvh; border-radius:12px; padding:16px; }
.competitor-image-dialog img { display:block; max-width:85vw; max-height:80dvh; object-fit:contain; }
.competitor-image-dialog button { display:block; margin-left:auto; }
@media(max-width:760px) {
  .competitor-header { align-items:flex-start; }
  .competitor-overview { display:block; padding:18px; }
  #competitorCounts { margin-top:18px; }
  .competitor-toolbar label { flex:1; min-width:130px; }
  .competitor-toolbar .competitor-search { flex-basis:100%; }
  .competitor-toolbar select { max-width:none; width:100%; }
  .competitor-table { min-width:820px; }
  .competitor-table th,.competitor-table td { padding:12px 10px; }
  #competitorForm { padding:20px 16px; }
  .competitor-form-grid { gap:15px 10px; }
  .competitor-form-footer button { font-size:12px; padding:10px; }
  .competitor-import { padding:18px; }
  .competitor-editor { border-radius:0; }
}

/* V0.7 mobile competitor workspace. Desktop keeps the comparison table and
   the existing dialogs; mobile gets a compact capture-and-compare flow. */
.competitor-mobile-controls,
.competitor-mobile-list,
.competitor-mobile-compare-bar,
.competitor-mobile-import-list { display:none; }
.competitor-mobile-compare-bar[hidden] { display:none!important; }

@media (max-width:900px) {
  #costCompetitorsPanel {
    padding-bottom:calc(116px + env(safe-area-inset-bottom));
  }

  #costCompetitorsPanel .competitor-header {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:start;
    gap:8px;
    margin-bottom:12px;
  }

  #costCompetitorsPanel .competitor-header > div:first-child {
    min-width:0;
  }

  #costCompetitorsPanel .competitor-header .eyebrow {
    display:none;
  }

  #costCompetitorsPanel .competitor-header h1 {
    margin:0;
    font-size:25px;
    line-height:1.15;
  }

  #costCompetitorsPanel .competitor-header p {
    max-width:235px;
    margin:5px 0 0;
    color:var(--muted,#80786e);
    font-size:11px;
    line-height:1.45;
  }

  #costCompetitorsPanel .competitor-actions {
    grid-column:2;
    grid-row:1;
    align-self:start;
  }

  #costCompetitorsPanel .competitor-actions .secondary-button {
    display:none;
  }

  #costCompetitorsPanel .competitor-actions .primary-button {
    min-height:40px;
    padding:8px 11px;
    border-radius:11px;
    font-size:12px;
    white-space:nowrap;
  }

  #costCompetitorsPanel .competitor-overview {
    display:grid;
    gap:9px;
    margin-bottom:13px;
    padding:13px 14px;
    border-radius:15px;
  }

  #costCompetitorsPanel .competitor-kicker {
    font-size:14px;
  }

  #costCompetitorsPanel .competitor-overview p {
    margin:4px 0 0;
    font-size:11px;
    line-height:1.55;
  }

  #costCompetitorsPanel #competitorCounts {
    display:flex;
    justify-content:space-between;
    gap:6px;
    margin-top:0;
    padding-top:9px;
    border-top:1px solid rgba(93,110,84,.14);
  }

  #costCompetitorsPanel #competitorCounts > div {
    flex:1 1 0;
    min-width:0;
  }

  #costCompetitorsPanel #competitorCounts strong {
    font-size:20px;
  }

  #costCompetitorsPanel #competitorCounts small {
    display:block;
    overflow:hidden;
    font-size:10px;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  #costCompetitorsPanel .competitor-mobile-controls {
    display:grid;
    gap:8px;
    margin-bottom:11px;
  }

  #costCompetitorsPanel .competitor-mobile-search,
  #costCompetitorsPanel .competitor-mobile-category,
  #costCompetitorsPanel .competitor-mobile-sort {
    display:grid;
    gap:5px;
    min-width:0;
    color:var(--muted,#80786e);
    font-size:11px;
  }

  #costCompetitorsPanel .competitor-mobile-search input,
  #costCompetitorsPanel .competitor-mobile-category select,
  #costCompetitorsPanel .competitor-mobile-sort select,
  #costCompetitorsPanel .competitor-mobile-filter-button {
    min-width:0;
    min-height:42px;
    border:1px solid var(--line,#ded8cc);
    border-radius:12px;
    color:var(--ink,#332f29);
    background:var(--paper,#fffdf8);
    font:inherit;
  }

  #costCompetitorsPanel .competitor-mobile-search input {
    width:100%;
    padding:9px 12px;
    font-size:13px;
  }

  #costCompetitorsPanel .competitor-mobile-control-row {
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(74px,.72fr) minmax(0,1fr);
    align-items:end;
    gap:7px;
    min-width:0;
  }

  #costCompetitorsPanel .competitor-mobile-category select,
  #costCompetitorsPanel .competitor-mobile-sort select {
    width:100%;
    padding:8px 23px 8px 9px;
    font-size:11px;
  }

  #costCompetitorsPanel .competitor-mobile-filter-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:3px;
    padding:8px 6px;
    font-size:11px;
    cursor:pointer;
  }

  #costCompetitorsPanel .competitor-mobile-filter-button span {
    display:inline-grid;
    min-width:17px;
    height:17px;
    place-items:center;
    border-radius:999px;
    color:var(--rust,#9c5e42);
    background:#f5e5dc;
    font-size:10px;
    font-variant-numeric:tabular-nums;
  }

  #costCompetitorsPanel .competitor-mobile-result-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    min-height:20px;
  }

  #costCompetitorsPanel .competitor-mobile-result-row > span {
    color:var(--ink-soft,#5b5048);
    font-size:11px;
    font-weight:700;
  }

  #costCompetitorsPanel .competitor-mobile-result-row .competitor-text-button {
    padding:3px 0;
    font-size:11px;
  }

  #costCompetitorsPanel .competitor-mobile-active-filters {
    min-height:0;
    color:#8a6c55;
    font-size:10px;
    line-height:1.4;
  }

  #costCompetitorsPanel .competitor-mobile-active-filters:empty {
    display:none;
  }

  #costCompetitorsPanel .competitor-toolbar,
  #costCompetitorsPanel .competitor-comparison,
  #costCompetitorsPanel .competitor-table-wrap {
    display:none;
  }

  #costCompetitorsPanel .competitor-result-head {
    display:flex;
    min-height:20px;
    padding:3px 0 8px;
    font-size:10px;
  }

  #costCompetitorsPanel .competitor-mobile-list {
    display:grid;
    gap:9px;
  }

  .competitor-mobile-card {
    overflow:hidden;
    border:1px solid rgba(173,153,132,.25);
    border-radius:15px;
    background:rgba(255,253,249,.96);
    box-shadow:0 5px 16px rgba(74,49,31,.045);
  }

  .competitor-mobile-card-head {
    display:grid;
    grid-template-columns:31px 45px minmax(0,1fr) auto;
    align-items:center;
    gap:8px;
    padding:12px 12px 9px;
  }

  .competitor-mobile-select {
    display:grid;
    justify-items:center;
    gap:2px;
    color:var(--muted,#80786e);
    font-size:9px;
    line-height:1.1;
    cursor:pointer;
  }

  .competitor-mobile-select input {
    width:22px;
    height:22px;
    margin:0;
    accent-color:var(--rust,#9c5e42);
  }

  .competitor-mobile-thumb {
    display:grid;
    width:45px;
    height:45px;
    place-items:center;
    overflow:hidden;
    border:1px dashed #cfb9a4;
    border-radius:11px;
    color:#a27458;
    background:#faf5ee;
    font-size:12px;
    font-weight:800;
  }

  button.competitor-mobile-thumb {
    padding:0;
    cursor:zoom-in;
  }

  .competitor-mobile-thumb img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .competitor-mobile-card-main {
    display:grid;
    min-width:0;
    justify-items:start;
    padding:0;
    border:0;
    color:var(--ink,#332f29);
    background:transparent;
    font:inherit;
    text-align:left;
    cursor:pointer;
  }

  .competitor-mobile-card-main small,
  .competitor-mobile-card-main strong {
    display:block;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .competitor-mobile-card-main small {
    margin-bottom:2px;
    color:#a27458;
    font-size:10px;
  }

  .competitor-mobile-card-main strong {
    font-size:14px;
    line-height:1.3;
  }

  .competitor-mobile-card-tags {
    display:flex;
    min-width:0;
    max-width:100%;
    gap:4px;
    margin-top:4px;
  }

  .competitor-mobile-card-tags span,
  .competitor-mobile-status {
    display:inline-flex;
    align-items:center;
    max-width:100%;
    overflow:hidden;
    padding:3px 6px;
    border-radius:999px;
    font-size:9px;
    line-height:1;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .competitor-mobile-card-tags span {
    color:#756c62;
    background:#f4efe8;
  }

  .competitor-mobile-card-tags span.competitor-promo {
    color:#a16436!important;
    background:#fbeddc;
  }

  .competitor-mobile-card-price {
    display:grid;
    min-width:76px;
    justify-items:end;
    text-align:right;
  }

  .competitor-mobile-card-price small {
    color:var(--muted,#80786e);
    font-size:9px;
  }

  .competitor-mobile-card-price strong {
    color:#4f674c;
    font-size:18px;
    line-height:1.15;
    white-space:nowrap;
  }

  .competitor-mobile-card-price strong.is-pending {
    color:#a1764c;
    font-size:11px;
  }

  .competitor-mobile-card-meta {
    display:flex;
    flex-wrap:wrap;
    gap:4px 10px;
    padding:9px 12px;
    border-top:1px solid rgba(173,153,132,.14);
    border-bottom:1px solid rgba(173,153,132,.14);
    color:var(--muted,#80786e);
    font-size:10px;
    line-height:1.35;
  }

  .competitor-mobile-card-meta span {
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .competitor-mobile-card-foot {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    min-height:42px;
    padding:5px 12px 7px;
  }

  .competitor-mobile-status {
    color:#5f7d60;
    background:#edf4e9;
  }

  .competitor-mobile-status.is-pending {
    color:#9a7238;
    background:#fbf2df;
  }

  .competitor-mobile-card-actions {
    display:flex;
    gap:8px;
  }

  .competitor-mobile-card-actions .competitor-text-button {
    min-height:30px;
    padding:5px 0;
    font-size:10px;
  }

  .competitor-mobile-empty {
    display:grid;
    justify-items:center;
    gap:7px;
    padding:36px 18px;
    border:1px dashed rgba(173,153,132,.34);
    border-radius:15px;
    color:var(--muted,#80786e);
    text-align:center;
  }

  .competitor-mobile-empty-mark {
    display:grid;
    width:42px;
    height:42px;
    place-items:center;
    border-radius:13px;
    color:#a84d32;
    background:#f5e5dc;
    font-size:17px;
    font-weight:800;
  }

  .competitor-mobile-empty strong {
    color:var(--ink,#332f29);
    font-size:15px;
  }

  .competitor-mobile-empty p {
    max-width:260px;
    margin:0;
    font-size:11px;
    line-height:1.55;
  }

  .competitor-mobile-empty-actions {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
    margin-top:4px;
  }

  .competitor-mobile-empty-actions button {
    min-height:38px;
    padding:7px 11px;
    border-radius:10px;
    font-size:11px;
  }

  .competitor-mobile-compare-bar {
    position:fixed;
    z-index:45;
    right:12px;
    bottom:calc(78px + env(safe-area-inset-bottom));
    left:12px;
    display:flex;
    align-items:center;
    gap:7px;
    max-width:620px;
    margin:0 auto;
    padding:9px 10px 9px 12px;
    border:1px solid rgba(173,79,47,.2);
    border-radius:14px;
    background:rgba(255,250,243,.97);
    box-shadow:0 9px 30px rgba(74,49,31,.16);
    backdrop-filter:blur(14px);
  }

  .competitor-mobile-compare-bar strong {
    flex:0 0 auto;
    color:var(--ink,#332f29);
    font-size:11px;
    white-space:nowrap;
  }

  .competitor-mobile-compare-bar > span {
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
    color:var(--muted,#80786e);
    font-size:10px;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .competitor-mobile-compare-bar .primary-button {
    flex:0 0 auto;
    min-height:36px;
    padding:6px 9px;
    border-radius:9px;
    font-size:10px;
    white-space:nowrap;
  }

  .competitor-mobile-compare-bar .competitor-text-button {
    flex:0 0 auto;
    padding:5px 0;
    font-size:10px;
  }

  .competitor-mobile-filter-dialog,
  .competitor-mobile-compare-dialog {
    width:100%;
    max-width:none;
    margin:0;
    border:1px solid var(--line,#ded8cc);
    color:var(--ink,#332f29);
    background:var(--paper,#fffdf8);
    box-shadow:0 16px 80px #28201526;
  }

  .competitor-mobile-filter-dialog::backdrop,
  .competitor-mobile-compare-dialog::backdrop {
    background:#30271d66;
  }

  .competitor-mobile-filter-dialog {
    max-height:82dvh;
    margin:18dvh 0 0;
    border-radius:20px 20px 0 0;
    overflow:auto;
  }

  .competitor-mobile-filter-dialog form {
    display:grid;
    gap:18px;
    padding:20px 16px calc(16px + env(safe-area-inset-bottom));
  }

  .competitor-mobile-filter-grid {
    display:grid;
    gap:13px;
  }

  .competitor-mobile-filter-grid label {
    display:grid;
    gap:6px;
    color:var(--muted,#80786e);
    font-size:12px;
  }

  .competitor-mobile-filter-grid select {
    width:100%;
    min-height:44px;
    padding:9px 12px;
    border:1px solid var(--line,#ded8cc);
    border-radius:11px;
    color:var(--ink,#332f29);
    background:var(--paper,#fffdf8);
    font:inherit;
    font-size:13px;
  }

  .competitor-mobile-filter-footer {
    position:sticky;
    bottom:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding-top:12px;
    border-top:1px solid var(--line,#ded8cc);
    background:var(--paper,#fffdf8);
  }

  .competitor-mobile-filter-footer .primary-button {
    min-height:42px;
    padding:8px 18px;
    border-radius:10px;
  }

  .competitor-mobile-compare-dialog {
    min-height:100dvh;
    max-height:100dvh;
    padding:20px 16px calc(102px + env(safe-area-inset-bottom));
    border-radius:0;
    overflow:auto;
  }

  .competitor-mobile-compare-dialog .competitor-dialog-head {
    margin-bottom:15px;
  }

  .competitor-mobile-compare-dialog .competitor-compare-head {
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:11px;
  }

  .competitor-mobile-compare-dialog .competitor-compare-head strong {
    margin-right:auto;
    font-size:13px;
  }

  .competitor-mobile-compare-dialog .competitor-compare-head select {
    max-width:145px;
    min-height:36px;
    padding:6px 7px;
    font-size:10px;
  }

  .competitor-mobile-compare-dialog .competitor-compare-head .competitor-text-button {
    font-size:10px;
  }

  .competitor-mobile-compare-dialog .competitor-compare-grid {
    display:flex;
    gap:10px;
    overflow-x:auto;
    padding:2px 1px 8px;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
  }

  .competitor-mobile-compare-dialog .competitor-compare-card {
    flex:0 0 min(78vw,285px);
    min-height:190px;
    padding:15px;
    scroll-snap-align:start;
  }

  .competitor-mobile-compare-dialog .competitor-compare-card .competitor-per500 {
    margin:14px 0 6px;
    font-size:25px;
  }

  .competitor-mobile-compare-dialog .competitor-compare-card .competitor-per500 small {
    margin:3px 0 0;
    font-size:10px;
  }

  .competitor-mobile-compare-dialog > #competitorMobileCompareContent > p {
    margin:9px 0 0;
    color:#847252;
    font-size:11px;
    line-height:1.65;
  }

  #competitorEditor,
  #competitorImporter {
    overflow:auto;
  }

  #competitorEditor #competitorForm,
  #competitorImporter #competitorImportForm {
    min-height:100%;
    padding:20px 16px calc(100px + env(safe-area-inset-bottom));
  }

  #competitorEditor .competitor-form-grid {
    grid-template-columns:1fr;
    gap:14px;
  }

  #competitorEditor .competitor-form-grid label,
  #competitorEditor .competitor-details>label {
    font-size:12px;
  }

  #competitorEditor input:not([type="checkbox"]):not([type="file"]),
  #competitorEditor select,
  #competitorEditor textarea {
    min-height:44px;
    border-radius:11px;
  }

  #competitorEditor .competitor-preview {
    padding:14px;
    font-size:11px;
  }

  #competitorEditor .competitor-preview strong {
    font-size:22px;
  }

  #competitorEditor .competitor-form-footer,
  #competitorImporter .competitor-form-footer {
    position:sticky;
    bottom:0;
    z-index:2;
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    padding:11px 0 calc(7px + env(safe-area-inset-bottom));
    border-top:1px solid var(--line,#ded8cc);
    background:rgba(255,253,248,.96);
  }

  #competitorEditor .competitor-form-footer .primary-button,
  #competitorImporter .competitor-form-footer .primary-button {
    grid-column:1 / -1;
    grid-row:1;
    min-height:44px;
    border-radius:11px;
  }

  #competitorEditor .competitor-form-footer [value="continue"] {
    grid-column:2;
    grid-row:2;
    min-width:0;
    padding:7px 4px;
    font-size:10px;
  }

  #competitorEditor .competitor-form-footer [data-competitor-close],
  #competitorImporter .competitor-form-footer [data-competitor-close] {
    grid-column:1;
    grid-row:2;
    padding:7px 4px;
    font-size:10px;
  }

  #competitorImporter {
    width:100%;
    max-height:100dvh;
    margin:0;
    padding:0;
    border-radius:0;
  }

  #competitorImporter .competitor-table-wrap {
    display:none;
  }

  #competitorImporter .competitor-import-actions {
    flex-wrap:wrap;
    gap:8px 12px;
    padding:10px 0;
  }

  #competitorImporter .competitor-mobile-import-list {
    display:grid;
    gap:9px;
  }

  .competitor-mobile-import-card {
    display:grid;
    gap:10px;
    padding:12px;
    border:1px solid rgba(173,153,132,.24);
    border-radius:13px;
    background:#fffdf9;
  }

  .competitor-mobile-import-card.is-copied {
    opacity:.58;
  }

  .competitor-mobile-import-head {
    display:grid;
    grid-template-columns:28px minmax(0,1fr) auto;
    align-items:center;
    gap:8px;
  }

  .competitor-mobile-import-head input {
    width:22px;
    height:22px;
    margin:0;
    accent-color:var(--rust,#9c5e42);
  }

  .competitor-mobile-import-head strong,
  .competitor-mobile-import-head small {
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .competitor-mobile-import-head strong {
    color:var(--ink,#332f29);
    font-size:13px;
  }

  .competitor-mobile-import-head small {
    margin-top:3px;
    color:var(--muted,#80786e);
    font-size:10px;
  }

  .competitor-mobile-import-copied {
    color:#66806a;
    font-size:10px;
    white-space:nowrap;
  }

  .competitor-mobile-import-fields {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .competitor-mobile-import-fields label {
    display:grid;
    grid-column:1 / -1;
    gap:4px;
    color:var(--muted,#80786e);
    font-size:10px;
  }

  .competitor-mobile-import-fields label:nth-child(1),
  .competitor-mobile-import-fields label:nth-child(2) {
    grid-column:auto;
  }

  .competitor-mobile-import-fields input {
    width:100%;
    min-height:40px;
    padding:7px 9px;
    border:1px solid var(--line,#ded8cc);
    border-radius:9px;
    color:var(--ink,#332f29);
    background:var(--paper,#fffdf8);
    font:inherit;
    font-size:11px;
  }

  .competitor-mobile-import-meta {
    color:var(--muted,#80786e);
    font-size:10px;
  }
}

@media (max-width:380px) {
  #costCompetitorsPanel .competitor-mobile-control-row {
    grid-template-columns:minmax(0,1fr) 70px minmax(0,1fr);
    gap:5px;
  }

  .competitor-mobile-card-head {
    grid-template-columns:29px 40px minmax(0,1fr) auto;
    gap:6px;
    padding-right:10px;
    padding-left:10px;
  }

  .competitor-mobile-thumb {
    width:40px;
    height:40px;
  }

  .competitor-mobile-card-price {
    min-width:68px;
  }

  .competitor-mobile-card-price strong {
    font-size:16px;
  }
}

    /* V0.6.50 packaging catalog, reusable package BOMs, single-product gift pricing, and drag-drop images. */
    .packaging-library-header,
    .gift-pricing-head,
    .packaging-scheme-head,
    .packaging-subsection-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
    }

    .packaging-library-overview,
    .gift-pricing-overview {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      margin: 18px 0;
    }

    .packaging-library-overview article,
    .gift-pricing-overview article {
      padding: 15px 16px;
      border: 1px solid rgba(91, 66, 47, .13);
      border-radius: 16px;
      background: rgba(255, 253, 248, .78);
      box-shadow: 0 10px 28px rgba(64, 42, 27, .04);
    }

    .packaging-library-overview small,
    .gift-pricing-overview small {
      display: block;
      color: var(--muted);
      font-size: 11px;
    }

    .packaging-library-overview strong,
    .gift-pricing-overview strong {
      display: block;
      margin-top: 6px;
      color: var(--ink);
      font-family: Georgia, "Times New Roman", serif;
      font-size: 23px;
      line-height: 1.05;
    }

    .packaging-library-toolbar,
    .gift-pricing-toolbar {
      display: grid;
      grid-template-columns: minmax(220px, 1.5fr) repeat(3, minmax(135px, .65fr));
      gap: 10px;
      padding: 13px;
      border: 1px solid rgba(91, 66, 47, .13);
      border-radius: 17px;
      background: rgba(255, 253, 248, .7);
    }

    .gift-pricing-toolbar { grid-template-columns: minmax(220px, 1fr) 180px auto; }

    .gift-column-filter { position: relative; display: flex; min-width: 0; align-items: end; justify-content: flex-end; }
    .gift-column-toggle { min-height: 40px; white-space: nowrap; }
    .gift-column-toggle span { margin-left: 5px; font-size: 11px; }
    .gift-column-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: min(280px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 32px)); overflow-y: auto; padding: 13px; border: 1px solid rgba(91, 66, 47, .15); border-radius: 15px; background: var(--card); box-shadow: 0 18px 44px rgba(57, 42, 29, .18); }
    .gift-column-menu[hidden] { display: none; }
    .gift-column-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 9px; border-bottom: 1px solid rgba(91, 66, 47, .1); }
    .gift-column-menu-head strong { font-size: 12px; }
    .gift-column-menu-reset { padding: 4px; border: 0; color: var(--rust); background: transparent; font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; }
    .gift-column-menu-list { display: grid; gap: 2px; margin-top: 8px; }
    .gift-column-option { display: flex; min-height: 36px; align-items: center; gap: 8px; padding: 5px 7px; border-radius: 8px; color: var(--ink); font-size: 12px; cursor: pointer; }
    .gift-column-option:hover { background: rgba(173, 79, 47, .055); }
    .gift-column-option input { width: 16px; height: 16px; margin: 0; accent-color: var(--rust); }
    .gift-column-option.is-fixed { cursor: default; opacity: .68; }
    .gift-column-menu-note { margin: 9px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }

    .packaging-library-toolbar label,
    .gift-pricing-toolbar label,
    .packaging-form-grid label,
    .packaging-notes {
      display: grid;
      gap: 6px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
    }

    .packaging-library-toolbar input,
    .packaging-library-toolbar select,
    .gift-pricing-toolbar input,
    .gift-pricing-toolbar select,
    .packaging-form-grid input,
    .packaging-form-grid select,
    .packaging-notes textarea,
    .packaging-quote-row input,
    .packaging-quote-row select,
    .packaging-scheme-line select,
    .packaging-scheme-line input,
    .gift-component-row select,
    .gift-component-row input {
      width: 100%;
      min-width: 0;
      min-height: 40px;
      padding: 9px 11px;
      border: 1px solid rgba(91, 66, 47, .18);
      border-radius: 11px;
      color: var(--ink);
      background: rgba(255, 255, 255, .9);
      font: inherit;
      font-size: 13px;
    }

    .gift-pricing-toolbar .gift-column-option { display: flex; gap: 8px; color: var(--ink); font-size: 12px; font-weight: 600; }
    .gift-pricing-toolbar .gift-column-option input[type="checkbox"] { flex: 0 0 16px; width: 16px; min-width: 16px; height: 16px; min-height: 16px; padding: 0; border: 0; border-radius: 3px; background: transparent; }

    .packaging-library-result {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      min-height: 36px;
      padding: 10px 2px 6px;
      color: var(--muted);
      font-size: 11px;
    }

    .packaging-card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
      gap: 14px;
    }

    .packaging-card {
      overflow: hidden;
      border: 1px solid rgba(91, 66, 47, .14);
      border-radius: 19px;
      background: var(--card);
      box-shadow: 0 13px 34px rgba(64, 42, 27, .055);
      cursor: pointer;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }

    .packaging-card:hover {
      transform: translateY(-2px);
      border-color: rgba(173, 79, 47, .27);
      box-shadow: 0 17px 42px rgba(64, 42, 27, .085);
    }

    .packaging-card-image {
      display: grid;
      place-items: center;
      aspect-ratio: 16 / 10;
      background: linear-gradient(135deg, rgba(225, 204, 177, .6), rgba(247, 239, 224, .9));
      color: rgba(95, 70, 51, .46);
      font-family: Georgia, serif;
      font-size: 26px;
    }

    .packaging-card-image img { width: 100%; height: 100%; object-fit: cover; }
    .packaging-card-body { padding: 14px 15px 16px; }
    .packaging-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
    .packaging-card-top small { color: var(--muted); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }
    .packaging-card-top strong { display: block; margin-top: 3px; font-size: 15px; line-height: 1.4; }

    .packaging-status,
    .packaging-tag {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 4px 8px;
      border-radius: 999px;
      background: rgba(91, 66, 47, .08);
      color: var(--muted);
      font-size: 10px;
      white-space: nowrap;
    }

    .packaging-status[data-status="adopted"] { background: rgba(71, 119, 81, .12); color: #3f754a; }
    .packaging-status[data-status="inactive"] { opacity: .66; }
    .packaging-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
    .packaging-card-price { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(91, 66, 47, .1); }
    .packaging-card-price small { display: block; color: var(--muted); font-size: 10px; }
    .packaging-card-price strong { color: var(--rust); font-size: 18px; }
    .packaging-card-price span { color: var(--muted); font-size: 10px; text-align: right; }

    .packaging-empty-state {
      grid-column: 1 / -1;
      padding: 34px 20px;
      border: 1px dashed rgba(91, 66, 47, .2);
      border-radius: 18px;
      color: var(--muted);
      text-align: center;
      background: rgba(255, 253, 248, .5);
    }

    .packaging-scheme-section { margin-top: 30px; padding-top: 24px; border-top: 1px solid rgba(91, 66, 47, .12); }
    .packaging-scheme-head h2,
    .gift-pricing-head h2 { margin: 4px 0 5px; font-family: Georgia, "Times New Roman", serif; font-size: 24px; }
    .packaging-scheme-head p,
    .gift-pricing-head p { margin: 0; color: var(--muted); font-size: 12px; }
    .packaging-kicker { color: var(--rust); font-size: 10px; font-weight: 800; letter-spacing: .14em; }
    .packaging-scheme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 13px; margin-top: 15px; }
    .packaging-scheme-card { padding: 16px; border: 1px solid rgba(91, 66, 47, .13); border-radius: 17px; background: rgba(255, 253, 248, .78); cursor: pointer; }
    .packaging-scheme-card:hover { border-color: rgba(173, 79, 47, .3); }
    .packaging-scheme-card-head { display: flex; justify-content: space-between; gap: 10px; }
    .packaging-scheme-card h3 { margin: 0; font-size: 15px; }
    .packaging-scheme-card p { margin: 9px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
    .packaging-scheme-card-total { display: flex; justify-content: space-between; margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(91, 66, 47, .1); font-size: 11px; }
    .packaging-scheme-card-total strong { color: var(--rust); font-size: 16px; }

    .packaging-editor {
      width: min(900px, calc(100vw - 28px));
      max-height: calc(100vh - 28px);
      padding: 0;
      border: 0;
      border-radius: 22px;
      color: var(--ink);
      background: var(--card);
      box-shadow: 0 28px 90px rgba(43, 29, 20, .25);
    }

    .packaging-editor::backdrop { background: rgba(38, 28, 21, .45); backdrop-filter: blur(2px); }
    .packaging-editor form { padding: 22px; }
    .packaging-dialog-head { display: flex; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
    .packaging-dialog-head h2 { margin: 4px 0 0; font-family: Georgia, "Times New Roman", serif; font-size: 25px; }
    .packaging-close { width: 40px; height: 40px; border: 0; border-radius: 50%; color: var(--muted); background: rgba(91, 66, 47, .08); font-size: 23px; cursor: pointer; }
    .packaging-item-editor-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 18px; }
    .packaging-image-editor { display: flex; flex-direction: column; gap: 8px; }
    .packaging-image-dropzone { position: relative; display: grid; place-items: stretch; min-width: 0; aspect-ratio: 1; overflow: hidden; border: 1px dashed rgba(91, 66, 47, .22); border-radius: 15px; background: rgba(91, 66, 47, .045); cursor: pointer; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; }
    .packaging-image-dropzone:hover,
    .packaging-image-dropzone:focus-visible,
    .packaging-image-dropzone.is-dragover { border-color: var(--rust); background: rgba(173, 79, 47, .1); box-shadow: inset 0 0 0 3px rgba(173, 79, 47, .08); outline: none; }
    .packaging-image-dropzone.is-dragover::after { position: absolute; inset: 0; display: grid; place-items: center; padding: 15px; color: var(--rust); background: rgba(255, 250, 241, .82); content: "松开即可上传"; font-size: 13px; font-weight: 800; text-align: center; pointer-events: none; }
    .packaging-image-dropzone [hidden] { display: none !important; }
    .packaging-image-editor img,
    #packageItemImagePlaceholder { width: 100%; height: 100%; min-height: 0; border-radius: 14px; object-fit: cover; background: rgba(91, 66, 47, .07); }
    #packageItemImagePlaceholder { display: grid; place-items: center; align-content: center; gap: 7px; padding: 15px; color: var(--muted); font-size: 12px; text-align: center; }
    #packageItemImagePlaceholder strong { color: var(--ink); font-size: 14px; }
    #packageItemImagePlaceholder small { color: var(--muted); font-size: 10px; font-weight: 600; line-height: 1.45; }
    .packaging-text-button { min-height: 34px; padding: 5px 8px; border: 0; color: var(--rust); background: transparent; font-size: 11px; font-weight: 700; cursor: pointer; }
    .packaging-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .packaging-form-grid > label[hidden] { display: none !important; }
    .packaging-quote-editor { margin-top: 20px; padding: 16px; border: 1px solid rgba(91, 66, 47, .12); border-radius: 17px; background: rgba(255, 250, 241, .62); }
    .packaging-subsection-head h3 { margin: 0; font-size: 15px; }
    .packaging-subsection-head p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
    .packaging-quote-row { display: grid; grid-template-columns: 1.25fr .65fr .75fr .6fr .6fr .6fr auto; gap: 8px; align-items: end; margin-top: 11px; }
    .packaging-quote-row label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 700; }
    .packaging-quote-row-secondary { grid-template-columns: minmax(180px, 1fr) 140px minmax(180px, 1fr) auto; margin-top: 7px; }
    .packaging-quote-adopted { display: flex !important; align-items: center; gap: 7px !important; min-height: 40px; }
    .packaging-quote-adopted input { width: auto; min-height: auto; }
    .packaging-line-remove { width: 36px; height: 36px; border: 1px solid rgba(158, 66, 45, .18); border-radius: 10px; color: #a34834; background: rgba(158, 66, 45, .07); cursor: pointer; }
    .packaging-quote-cost { min-height: 40px; padding: 10px 5px; color: var(--rust); font-size: 11px; font-weight: 800; white-space: nowrap; }
    .packaging-notes { margin-top: 16px; }
    .packaging-form-error { min-height: 20px; margin: 9px 0 0; color: #a34834; font-size: 11px; }
    .packaging-form-actions { display: grid; grid-template-columns: auto 1fr auto auto; gap: 9px; align-items: center; margin-top: 14px; }
    .packaging-scheme-line { display: grid; grid-template-columns: minmax(240px, 1fr) 110px 120px auto; gap: 9px; align-items: center; margin-top: 10px; }
    .packaging-scheme-line small { color: var(--muted); font-size: 10px; }
    .packaging-scheme-live-total { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(91, 66, 47, .12); text-align: right; font-size: 12px; }
    .packaging-scheme-live-total strong { margin-left: 9px; color: var(--rust); font-size: 18px; }

    .pricing-product-tabs { display: inline-flex; gap: 4px; margin: 14px 0 18px; padding: 4px; border: 1px solid rgba(91, 66, 47, .13); border-radius: 13px; background: rgba(255, 253, 248, .72); }
    .pricing-product-tabs button { min-height: 36px; padding: 7px 15px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; font-size: 12px; font-weight: 800; cursor: pointer; }
    .pricing-product-tabs button[aria-selected="true"] { color: var(--rust); background: #fff; box-shadow: 0 5px 16px rgba(64, 42, 27, .08); }
    .gift-pricing-head { align-items: center; }
    .gift-pricing-table-wrap { margin-top: 14px; overflow-x: auto; border: 1px solid rgba(91, 66, 47, .12); border-radius: 17px; background: rgba(255, 253, 248, .76); }
    .gift-pricing-table { width: 100%; min-width: 1240px; border-collapse: collapse; }
    .gift-pricing-table th,
    .gift-pricing-table td { padding: 15px 14px; border-bottom: 1px solid rgba(91, 66, 47, .1); text-align: left; font-size: 13px; line-height: 1.45; }
    .gift-pricing-table th { padding: 13px 14px; color: var(--muted); background: rgba(236, 224, 205, .32); font-size: 12px; font-weight: 800; letter-spacing: .035em; text-align: left; white-space: nowrap; }
    .gift-pricing-table tbody tr { cursor: pointer; }
    .gift-pricing-table tbody tr:hover { background: rgba(173, 79, 47, .045); }
    .gift-pricing-table td strong { display: block; font-size: 15px; }
    .gift-pricing-table td small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.45; }
    .gift-title-cell { display: flex; min-width: 245px; align-items: center; gap: 11px; }
    .gift-title-copy { min-width: 0; }
    .gift-package-thumbnail { display: grid; flex: 0 0 54px; width: 54px; height: 54px; place-items: center; overflow: hidden; border: 1px solid rgba(91, 66, 47, .14); border-radius: 12px; color: rgba(95, 70, 51, .48); background: linear-gradient(135deg, rgba(225, 204, 177, .58), rgba(247, 239, 224, .9)); font-family: Georgia, serif; font-size: 18px; box-shadow: 0 5px 14px rgba(64, 42, 27, .08); transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
    .gift-package-thumbnail[data-gift-package-preview] { cursor: zoom-in; }
    .gift-package-thumbnail[data-gift-package-preview]:hover { transform: translateY(-1px) scale(1.04); border-color: rgba(173, 79, 47, .42); box-shadow: 0 8px 18px rgba(64, 42, 27, .13); }
    .gift-package-thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; }
    .gift-package-hover-preview { position: fixed; z-index: 470; display: grid; width: min(360px, calc(100vw - 24px)); height: min(360px, calc(100vh - 24px)); place-items: center; padding: 9px; overflow: hidden; border: 1px solid rgba(184, 157, 132, .42); border-radius: 17px; background: #fffdf9; box-shadow: 0 20px 52px rgba(57, 42, 29, .28); pointer-events: none; }
    .gift-package-hover-preview img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
    .gift-pricing-table th.gift-final-price-heading { color: #b54831; font-weight: 900; }
    .gift-reference-price strong { font-weight: 900; }
    .gift-final-price strong { color: #b54831; font-size: 17px !important; font-weight: 950; }
    .gift-profit-value { font-weight: 800; }
    .gift-health { display: inline-flex; padding: 4px 8px; border-radius: 999px; color: #3f754a; background: rgba(71, 119, 81, .11); font-weight: 800; }
    .gift-health.is-pending { color: #98652b; background: rgba(183, 127, 52, .12); }
    .gift-health.is-low { color: #a34834; background: rgba(163, 72, 52, .1); }

    .gift-pricing-drawer { position: fixed; inset: 0; z-index: 240; display: grid; grid-template-columns: 1fr minmax(520px, 690px); }
    .gift-pricing-drawer[hidden] { display: none; }
    .gift-pricing-backdrop { border: 0; background: rgba(38, 28, 21, .42); backdrop-filter: blur(2px); cursor: pointer; }
    .gift-pricing-drawer-panel { height: 100vh; overflow-y: auto; padding: 24px; border: 0; color: var(--ink); background: var(--card); box-shadow: -24px 0 70px rgba(43, 29, 20, .18); }
    .gift-pricing-mode { min-width: 0; margin: 16px 0 0; padding: 0; border: 0; }
    .gift-pricing-mode legend { margin-bottom: 8px; color: var(--ink); font-size: 12px; font-weight: 800; }
    .gift-pricing-mode-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .gift-pricing-mode-switch label { position: relative; min-width: 0; cursor: pointer; }
    .gift-pricing-mode-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
    .gift-pricing-mode-switch span { display: grid; gap: 4px; min-height: 62px; padding: 11px 13px; border: 1px solid rgba(91, 66, 47, .14); border-radius: 13px; background: rgba(255, 253, 248, .72); transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
    .gift-pricing-mode-switch strong { font-size: 13px; }
    .gift-pricing-mode-switch small { color: var(--muted); font-size: 10px; font-weight: 600; }
    .gift-pricing-mode-switch input:checked + span { border-color: rgba(173, 79, 47, .48); background: rgba(255, 246, 232, .92); box-shadow: 0 0 0 3px rgba(173, 79, 47, .07); }
    .gift-pricing-mode-switch input:focus-visible + span { outline: 2px solid rgba(173, 79, 47, .52); outline-offset: 2px; }
    .gift-average-fields { margin-top: 15px; padding-top: 15px; border-top: 1px solid rgba(91, 66, 47, .1); }
    .gift-average-fields[hidden],
    #giftDetailedPricingFields[hidden] { display: none; }
    .gift-component-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 15px 0 8px; }
    .gift-component-row { display: grid; grid-template-columns: minmax(240px, 1fr) 90px minmax(170px, auto) auto; gap: 9px; align-items: center; margin-top: 9px; }
    .gift-component-row small { color: var(--muted); font-size: 10px; }
    .gift-capacity-hint { min-height: 18px; margin: 8px 0 0; color: var(--muted); font-size: 11px; }
    .gift-capacity-hint.is-invalid { color: #a34834; }
    .gift-advanced-note { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
    .gift-final-price-field { color: #a9402c; font-weight: 900; }
    .gift-final-price-field #giftSellingPrice { color: #b54831 !important; font-size: 18px; font-weight: 950; }
    .gift-editor-preview { margin: 16px 0; padding: 16px; border: 1px solid rgba(173, 79, 47, .16); border-radius: 17px; background: rgba(255, 248, 236, .68); }
    .gift-editor-preview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .gift-editor-preview-grid small { display: block; color: var(--muted); font-size: 12px; }
    .gift-editor-preview-grid strong { display: block; margin-top: 5px; font-size: 18px; }
    .gift-editor-preview-note { margin: 11px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }

    @media (max-width: 900px) {
      .packaging-library-overview,
      .gift-pricing-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .packaging-library-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .packaging-quote-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .packaging-quote-row-secondary { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
      .gift-pricing-drawer { grid-template-columns: 1fr; }
      .gift-pricing-backdrop { display: none; }
      .gift-pricing-drawer-panel { width: 100%; }
      .gift-column-filter { justify-content: flex-start; }
      .gift-column-menu { right: auto; left: 0; }
    }

    @media (max-width: 620px) {
      .packaging-library-header,
      .gift-pricing-head,
      .packaging-scheme-head,
      .packaging-subsection-head { align-items: stretch; flex-direction: column; }
      .packaging-library-toolbar,
      .gift-pricing-toolbar,
      .packaging-form-grid { grid-template-columns: 1fr; }
      .packaging-card-grid { grid-template-columns: 1fr; }
      .packaging-item-editor-layout { grid-template-columns: 1fr; }
      .packaging-image-editor { display: grid; grid-template-columns: 1fr 1fr; }
      .packaging-image-dropzone { grid-column: 1 / -1; max-height: 240px; }
      .packaging-quote-row,
      .packaging-quote-row-secondary,
      .packaging-scheme-line,
      .gift-component-row { grid-template-columns: 1fr 1fr; padding: 10px 0; border-top: 1px solid rgba(91, 66, 47, .1); }
      .packaging-quote-row label:first-child,
      .packaging-scheme-line select,
      .gift-component-row select { grid-column: 1 / -1; }
      .packaging-form-actions { grid-template-columns: 1fr 1fr; }
      .packaging-form-actions span { display: none; }
      .gift-pricing-mode-switch { grid-template-columns: 1fr; }
      .gift-editor-preview-grid { grid-template-columns: 1fr 1fr; }
      .gift-package-thumbnail { flex-basis: 46px; width: 46px; height: 46px; }
      .gift-package-hover-preview { display: none; }
      .gift-pricing-drawer-panel { padding: 18px 14px; }
      .gift-pricing-drawer-panel .pricing-form-actions { margin-right: -14px; margin-left: -14px; padding-right: 14px; padding-left: 14px; }
    }
/* Comparison is a card-level action; it stays outside the article's open handler. */
#recipes .recipe-card.is-recipe-compared { border-color: color-mix(in srgb, var(--rust) 48%, var(--line)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--rust) 32%, transparent); }
#recipes .recipe-card .recipe-compare-action[aria-pressed="true"] .recipe-card-action-visual { border-color: var(--rust); color: var(--rust); background: color-mix(in srgb, var(--rust) 12%, var(--card)); }
.recipe-compare-only input { width: 18px; height: 18px; accent-color: var(--rust); flex: 0 0 auto; }
.recipe-compare-dock { position: sticky; bottom: 16px; z-index: 35; display: flex; align-items: center; gap: 16px; margin-top: 22px; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--rust) 32%, var(--line)); border-radius: 18px; background: var(--card); box-shadow: 0 8px 38px #45332225; }
.recipe-compare-dock[hidden], .recipe-compare-modal [hidden] { display: none !important; }
.recipe-compare-dock-copy { flex: 0 0 auto; display: grid; gap: 5px; }
.recipe-compare-dock-copy span { font-size: 10px; color: var(--muted); }
.recipe-compare-chips { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.recipe-compare-chip { max-width: 100%; min-height: 36px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); color: var(--ink); font: inherit; font-size: 11px; overflow-wrap: anywhere; cursor: pointer; }
.recipe-compare-dock-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 12px; }
.recipe-compare-dock button:disabled { opacity: .5; cursor: not-allowed; }
.recipe-compare-modal { z-index: 150; padding: 22px; }
.recipe-compare-panel { width: min(1380px, 100%); max-height: calc(100dvh - 44px); display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 24px 80px #33291e30; text-align: left; }
.recipe-compare-heading { padding: 22px 26px 16px; display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.recipe-compare-heading h2 { margin: 3px 0 7px; font-size: 28px; }
.recipe-compare-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.recipe-compare-heading > button { flex: 0 0 auto; min-height: 42px; }
.recipe-compare-controls { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: end; padding: 0 26px 18px; border-bottom: 1px solid var(--line); }
.recipe-compare-controls > label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 11px; min-width: 0; }
.recipe-compare-controls select { max-width: 260px; width: 100%; min-height: 42px; font-size: 12px; }
.recipe-compare-controls input[type="number"] { width: 165px; min-height: 42px; }
.recipe-compare-modes { margin: 0; padding: 0; border: 0; display: flex; gap: 3px; }
.recipe-compare-modes legend { margin-bottom: 6px; font-size: 11px; color: var(--muted); }
.recipe-compare-modes button { min-height: 42px; padding: 8px 12px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; font-size: 12px; cursor: pointer; }
.recipe-compare-modes button:first-of-type { border-radius: 9px 0 0 9px; }
.recipe-compare-modes button:last-of-type { border-radius: 0 9px 9px 0; }
.recipe-compare-modes button[aria-pressed="true"] { background: var(--rust); border-color: var(--rust); color: white; }
.recipe-compare-controls .recipe-compare-only { flex-direction: row; min-height: 42px; align-items: center; gap: 8px; cursor: pointer; }
.recipe-compare-body { min-height: 0; overflow-y: auto; padding: 0 26px 20px; overscroll-behavior: contain; }
.recipe-compare-note { color: var(--muted); font-size: 11px; line-height: 1.7; margin: 14px 0; }
.recipe-compare-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin: 12px 0; }
.recipe-compare-summary > div { padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--rust) 5%, var(--paper)); border: 1px solid var(--line); }
.recipe-compare-summary strong, .recipe-compare-summary span { display: block; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.recipe-compare-summary span { font-size: 11px; color: var(--muted); }
.recipe-compare-warnings { border-left: 3px solid #ae7930; padding: 2px 12px; margin: 12px 0; background: #ae793010; color: var(--ink); font-size: 11px; line-height: 1.7; }
.recipe-compare-table-wrap { max-width: 100%; overflow: auto; border: 1px solid var(--line); border-radius: 12px; }
.recipe-compare-table-wrap table { width: 100%; min-width: 650px; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 12px; }
.recipe-compare-caption { text-align: left; padding: 10px 14px; font-size: 11px; color: var(--muted); background: var(--paper); }
.recipe-compare-table-wrap th, .recipe-compare-table-wrap td { padding: 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); overflow-wrap: anywhere; }
.recipe-compare-table-wrap thead th { background: var(--paper); min-width: 180px; }
.recipe-compare-table-wrap th:first-child { width: 150px; }
.recipe-compare-table-wrap thead th:first-child { position: sticky; left: 0; z-index: 2; }
.recipe-compare-table-wrap tbody th[scope="row"] { position: sticky; left: 0; z-index: 1; background: var(--card); }
.recipe-compare-table-wrap th strong, .recipe-compare-table-wrap th span, .recipe-compare-table-wrap th small { display: block; }
.recipe-compare-table-wrap th span { margin-top: 6px; color: var(--rust); }
.recipe-compare-table-wrap th small { font-size: 10px; color: var(--muted); font-weight: 400; margin-top: 5px; }
.recipe-compare-table-wrap td strong { display: block; font-variant-numeric: tabular-nums; }
.recipe-compare-ratio { display: block; margin-top: 5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.recipe-compare-reference, .recipe-compare-delta { display: inline-block; margin-top: 8px; font-size: 10px; line-height: 1.7; }
.recipe-compare-reference, .recipe-compare-delta.is-same { color: var(--muted); }
.recipe-compare-delta.is-up { color: #a94c27; }
.recipe-compare-delta.is-down { color: #316b64; }
.recipe-compare-delta.is-unknown { color: #8d641f; }
.recipe-compare-changed { background: color-mix(in srgb, var(--rust) 3%, var(--card)); }
.recipe-compare-group-row th { background: color-mix(in srgb, var(--rust) 7%, var(--paper)); font-size: 11px; }
.recipe-compare-empty { text-align: center !important; padding: 32px !important; color: var(--muted); }
@media (max-width: 760px) {
  .recipe-compare-dock { bottom: 8px; flex-wrap: wrap; gap: 10px; padding: 12px; }
  .recipe-compare-dock-copy { flex: 1; }
  .recipe-compare-dock-actions { margin-left: auto; }
  .recipe-compare-chips { order: 3; flex-basis: 100%; max-height: 92px; overflow-y: auto; }
  .recipe-compare-chip { min-height: 40px; }
  .recipe-compare-dock-copy span { max-width: 120px; line-height: 1.6; }
  .recipe-compare-dock-actions button { min-height: 44px; padding-inline: 10px; }
  .recipe-compare-modal { padding: 8px; }
  .recipe-compare-panel { max-height: calc(100dvh - 16px); border-radius: 15px; }
  .recipe-compare-heading { padding: 16px 14px 12px; }
  .recipe-compare-heading h2 { font-size: 23px; }
  .recipe-compare-controls { padding: 0 14px 12px; gap: 8px; }
  .recipe-compare-controls > label:not(.recipe-compare-only) { flex: 1 1 40%; }
  .recipe-compare-controls select { max-width: 100%; min-height: 44px; }
  .recipe-compare-modes button { min-height: 44px; padding-inline: 9px; }
  .recipe-compare-body { padding: 0 14px 14px; }
  .recipe-compare-summary { grid-template-columns: 1fr; }
  .recipe-compare-table-wrap th:first-child { width: 100px; }
  .recipe-compare-table-wrap th, .recipe-compare-table-wrap td { padding: 10px; }
}

/* V0.6.71 recipe-series cards, flavor branches, and delta editor. */
.recipe-family-card,
.recipe-family-standalone-card {
  cursor: pointer;
}

.recipe-family-card .recipe-description {
  min-height: 42px;
}

.recipe-family-card-variants {
  min-height: 27px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 2px 0 11px;
}

.recipe-family-variant-chip {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--rust) 16%, var(--line));
  border-radius: 999px;
  color: var(--rust);
  background: color-mix(in srgb, var(--rust) 7%, var(--card));
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.recipe-family-variant-chip.is-current {
  color: #fffaf3;
  border-color: var(--rust);
  background: var(--rust);
}

.recipe-family-card.is-family-partial-hidden {
  border-style: dashed;
}

.recipe-family-detail-panel {
  display: grid;
  gap: 14px;
  margin: 18px 24px 0;
  padding: 17px 18px;
  border: 1px solid color-mix(in srgb, var(--rust) 17%, var(--line));
  border-radius: 17px;
  background:
    radial-gradient(circle at 92% 8%, rgba(214, 170, 69, .14), transparent 11rem),
    color-mix(in srgb, var(--rust-soft) 54%, var(--card));
}

.recipe-family-detail-panel.is-standalone {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.recipe-family-detail-top,
.recipe-family-detail-foot,
.recipe-family-detail-actions,
.recipe-family-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.recipe-family-detail-top {
  align-items: flex-start;
}

.recipe-family-detail-panel strong {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
}

.recipe-family-detail-panel p {
  max-width: 720px;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.65;
}

.recipe-family-kicker {
  display: block;
  color: var(--rust);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
}

.recipe-family-detail-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: 0 0 auto;
}

.recipe-family-detail-actions button {
  min-height: 40px;
}

.recipe-family-detail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 2px;
}

.recipe-family-detail-chip {
  min-width: 104px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  background: color-mix(in srgb, var(--card) 82%, transparent);
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.recipe-family-detail-chip:hover,
.recipe-family-detail-chip:focus-visible {
  border-color: color-mix(in srgb, var(--rust) 38%, var(--line));
  background: var(--card);
  transform: translateY(-1px);
}

.recipe-family-detail-chip.is-active {
  border-color: var(--rust);
  background: var(--rust);
  color: #fffaf3;
}

.recipe-family-detail-chip strong,
.recipe-family-detail-chip small {
  display: block;
}

.recipe-family-detail-chip strong {
  margin: 0;
  color: inherit;
  font-family: inherit;
  font-size: 12px;
}

.recipe-family-detail-chip small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
}

.recipe-family-detail-chip.is-active small {
  color: rgba(255, 250, 243, .78);
}

.recipe-family-detail-foot {
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  color: var(--muted);
  font-size: 10px;
}

.recipe-family-modal[hidden] {
  display: none !important;
}

.recipe-family-modal {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(38, 31, 24, .56);
  backdrop-filter: blur(9px);
}

.recipe-family-modal-card {
  width: min(980px, 100%);
  max-height: min(900px, calc(100vh - 48px));
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 24px;
  background: var(--card);
  box-shadow: 0 30px 90px rgba(39, 30, 24, .3);
}

.recipe-family-modal-head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 21px 24px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--card) 96%, transparent);
  backdrop-filter: blur(14px);
}

.recipe-family-modal-head h2 {
  margin: 4px 0 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 27px;
}

.recipe-family-modal-head p {
  max-width: 680px;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.recipe-family-close {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  background: var(--cream);
  font-size: 20px;
  cursor: pointer;
}

.recipe-family-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 22px 24px 16px;
}

.recipe-family-field {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.recipe-family-field[hidden] {
  display: none !important;
}

.recipe-family-field input,
.recipe-family-field select,
.recipe-family-field textarea,
.recipe-family-override-row input,
.recipe-family-override-row select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--ink);
  background: #fffdf9;
  padding: 9px 11px;
  font: inherit;
  font-weight: 500;
}

.recipe-family-field textarea {
  resize: vertical;
  line-height: 1.6;
}

.recipe-family-field small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
}

.recipe-family-span-2 {
  grid-column: span 2;
}

.recipe-family-adjustments {
  margin: 0 24px 18px;
  padding: 17px;
  border: 1px solid color-mix(in srgb, var(--rust) 16%, var(--line));
  border-radius: 17px;
  background: color-mix(in srgb, var(--cream) 62%, var(--card));
}

.recipe-family-section-head {
  align-items: flex-start;
  margin-bottom: 12px;
}

.recipe-family-section-head strong,
.recipe-family-section-head span {
  display: block;
}

.recipe-family-section-head strong {
  color: var(--ink);
  font-size: 13px;
}

.recipe-family-section-head span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
}

.recipe-family-section-head button {
  min-height: 38px;
  flex: 0 0 auto;
}

#recipeFamilyOverrideRows {
  display: grid;
  gap: 8px;
}

.recipe-family-override-row {
  display: grid;
  grid-template-columns: minmax(155px, 1.15fr) 145px minmax(240px, 2fr) 44px;
  gap: 9px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--card) 85%, transparent);
}

.recipe-family-base-line {
  min-width: 0;
}

.recipe-family-base-line strong,
.recipe-family-base-line small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recipe-family-base-line strong {
  color: var(--ink);
  font-size: 12px;
}

.recipe-family-base-line small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
}

.recipe-family-override-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px 72px;
  gap: 7px;
}

.recipe-family-override-fields[hidden] {
  display: none !important;
}

.recipe-family-override-row:not(.is-added) .recipe-family-override-fields {
  grid-column: 3 / -1;
}

.recipe-family-remove-row {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--rust);
  background: #fffdf9;
  font-size: 18px;
  cursor: pointer;
}

.recipe-family-empty-rows {
  padding: 13px;
  border: 1px dashed var(--line);
  border-radius: 11px;
  color: var(--muted);
  font-size: 11px;
}

.recipe-family-notes {
  margin: 0 24px 20px;
}

.recipe-family-modal-actions {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 15px 24px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--card) 96%, transparent);
  backdrop-filter: blur(14px);
}

.recipe-family-modal-actions > span {
  margin-right: auto;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

@media (max-width: 980px) {
  .recipe-family-override-row {
    grid-template-columns: minmax(150px, 1fr) 135px minmax(220px, 1.5fr) 44px;
  }
}

@media (max-width: 720px) {
  .recipe-family-detail-panel,
  .recipe-family-detail-panel.is-standalone {
    grid-template-columns: 1fr;
    margin-left: 15px;
    margin-right: 15px;
  }

  .recipe-family-detail-top {
    display: grid;
  }

  .recipe-family-detail-actions {
    justify-content: flex-start;
  }

  .recipe-family-modal {
    align-items: stretch;
    padding: 0;
  }

  .recipe-family-modal-card {
    width: 100%;
    max-height: 100dvh;
    border-radius: 0;
  }

  .recipe-family-modal-head,
  .recipe-family-form-grid,
  .recipe-family-modal-actions {
    padding-left: 16px;
    padding-right: 16px;
  }

  .recipe-family-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .recipe-family-span-2 {
    grid-column: 1 / -1;
  }

  .recipe-family-adjustments {
    margin-left: 16px;
    margin-right: 16px;
  }

  .recipe-family-override-row,
  .recipe-family-override-row:not(.is-added) {
    grid-template-columns: minmax(0, 1fr) 125px 44px;
  }

  .recipe-family-override-fields,
  .recipe-family-override-row:not(.is-added) .recipe-family-override-fields {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) 82px 68px;
  }

  .recipe-family-override-row:not(.is-added) .recipe-family-override-fields[hidden] {
    display: none !important;
  }

  .recipe-family-notes {
    margin-left: 16px;
    margin-right: 16px;
  }

  .recipe-family-modal-actions {
    flex-wrap: wrap;
  }

  .recipe-family-modal-actions > span {
    width: 100%;
    margin-right: 0;
  }
}

@media (max-width: 430px) {
  .recipe-family-form-grid {
    grid-template-columns: 1fr;
  }

  .recipe-family-span-2 {
    grid-column: auto;
  }

  .recipe-family-override-row,
  .recipe-family-override-row:not(.is-added) {
    grid-template-columns: 1fr 44px;
  }

  .recipe-family-override-row .recipe-family-action {
    grid-column: 1 / -1;
  }

  .recipe-family-override-fields,
  .recipe-family-override-row:not(.is-added) .recipe-family-override-fields {
    grid-template-columns: minmax(0, 1fr) 76px 62px;
  }
}
.wb-home{display:grid;gap:20px}.wb-home button,.wb-home select{font:inherit;cursor:pointer}.wb-home button:not(.primary-button){border:1px solid #dfd5ca;background:#fffdf9;color:#514236;border-radius:9px;padding:9px 13px}.wb-home button:hover{filter:brightness(.97)}.wb-heading,.wb-section-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.wb-heading h1{font-size:28px;margin:5px 0}.wb-heading p,.wb-empty{font-size:14px;color:#81766a;line-height:1.6;margin:8px 0}.wb-heading small{color:#9c6549}.wb-row-actions{display:flex;flex-wrap:wrap;gap:8px}.wb-main{display:grid;grid-template-columns:1.6fr 1fr;gap:20px}.wb-panel{border:1px solid #e8ded2;border-radius:20px;background:#fffdf9;padding:24px;min-width:0}.wb-home h2{font-size:21px;margin:0 0 15px}.wb-home h3{font-size:16px;margin:24px 0 10px}.wb-system summary{cursor:pointer}.wb-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.wb-favorites{grid-template-columns:repeat(3,minmax(0,1fr))}.wb-recipe{border:1px solid #e9e0d6;border-radius:12px;padding:16px;min-width:0}.wb-recipe>strong{display:block;font-size:17px;overflow-wrap:anywhere}.wb-recipe>small{display:block;margin:8px 0 13px;color:#9a8675}.wb-row-actions button{font-size:13px}.wb-home .wb-event{display:flex;align-items:center;text-align:left;gap:12px;width:100%;margin:8px 0;padding:13px;border-color:#ede5db}.wb-event strong{flex:1;font-size:14px;overflow-wrap:anywhere}.wb-event span,.wb-event small{font-size:12px;color:#867566}.wb-home .wb-alert{background:#fff7ed}.wb-section-head h2{margin:0}.wb-section-head{margin-bottom:16px}.wb-section-head label,.wb-section-head small{font-size:13px;color:#81766a}.wb-section-head select{border:1px solid #dfd5ca;padding:7px;border-radius:8px;background:white}.wb-system{font-size:13px;color:#81766a;padding:12px}#wbLegacy[hidden]{display:none!important}
@media(max-width:900px){.wb-main{grid-template-columns:1fr}.wb-favorites{grid-template-columns:repeat(2,minmax(0,1fr))}.wb-heading{align-items:flex-start}.wb-heading .wb-row-actions{max-width:240px}}
@media(max-width:600px){.wb-home{gap:14px}.wb-heading{display:block}.wb-heading .wb-row-actions{max-width:none;margin-top:14px}.wb-panel{padding:17px;border-radius:15px}.wb-cards,.wb-favorites{grid-template-columns:1fr}.wb-section-head{flex-wrap:wrap}.wb-event{flex-wrap:wrap}.wb-event strong{min-width:45%}.wb-heading h1{font-size:25px}.wb-home h2{font-size:19px}}

/* The navigation hash must not scroll the heading behind the sticky toolbar. */
#dashboard{scroll-margin-top:160px}

/* Keep recent work compact while making the mobile list horizontally browsable. */
.wb-recent-card {
  display: flex;
  flex-direction: column;
  min-height: 142px;
  padding: 14px;
}

.wb-home .wb-recent-card > strong {
  display: -webkit-box;
  min-height: 2.7em;
  overflow: hidden;
  font-size: 17px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.wb-home .wb-recent-card > small {
  margin: 5px 0 10px;
  overflow: hidden;
  color: #a18f80;
  font-size: 12px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wb-recent-card .wb-row-actions {
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  margin-top: auto;
}

.wb-home .wb-recent-card .wb-row-actions > button {
  min-height: 36px;
  padding: 6px 10px;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
}

.wb-home .wb-recent-card .wb-recent-primary {
  border-color: #bd593b;
  background: #bd593b;
  color: #fffdf9;
}

.wb-home .wb-recent-card .wb-recent-primary:hover {
  border-color: #aa4e34;
  background: #aa4e34;
}

.wb-empty-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px dashed #e7d4c4;
  border-radius: 12px;
  background: #fffaf3;
}

.wb-empty-state .wb-empty {
  margin: 0;
}

.wb-home .wb-empty-state button {
  flex: 0 0 auto;
  padding: 7px 10px;
  font-size: 13px;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .wb-recent-cards {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding: 1px 2px 9px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
  }

  .wb-recent-cards::-webkit-scrollbar {
    display: none;
  }

  .wb-recent-cards > .wb-recent-card {
    flex: 0 0 calc(100% - 48px);
    scroll-snap-align: start;
  }

  .wb-recent-card {
    min-height: 132px;
  }

  .wb-empty-state {
    align-items: flex-start;
    flex-wrap: wrap;
  }
}

/* Empty sections should communicate their state without occupying a full card. */
.wb-empty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  gap: 10px;
  padding: 2px 0;
}

.wb-empty-row > span {
  min-width: 0;
  color: #81766a;
  font-size: 13px;
  line-height: 1.45;
}

.wb-home .wb-empty-row button {
  flex: 0 0 auto;
  padding: 6px 9px;
  border-color: #e5d8cb;
  color: #7a5b4c;
  background: transparent;
  font-size: 12px;
  white-space: nowrap;
}

.wb-home .wb-empty-row button:hover {
  background: #fff7ed;
}

.wb-empty-note {
  margin: 6px 0 0;
  color: #a18f80;
  font-size: 12px;
  line-height: 1.5;
}

.wb-panel-compact {
  padding-top: 17px;
  padding-bottom: 17px;
}

.wb-panel-compact .wb-section-head {
  margin-bottom: 5px;
}

.wb-panel-compact .wb-section-head h2 {
  margin-bottom: 0;
}

.wb-attention-actions {
  margin-top: 10px;
}

@media (max-width: 600px) {
  .wb-home h3 {
    margin-top: 16px;
    margin-bottom: 8px;
  }

  .wb-heading h1 {
    margin-top: 3px;
    margin-bottom: 3px;
  }

  .wb-heading p {
    margin: 5px 0;
  }

  .wb-heading .wb-row-actions {
    margin-top: 10px;
  }

  .wb-panel-compact {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .wb-panel-compact .wb-section-head {
    margin-bottom: 4px;
  }

  .wb-empty-row {
    min-height: 38px;
  }

  .wb-empty-row > span {
    font-size: 12px;
  }

  .wb-empty-note {
    margin-top: 5px;
  }

  .wb-attention-actions {
    margin-top: 8px;
  }
}

/* Give the cloud dashboard search field the space it needs on narrow screens.
   Low-frequency toolbar actions stay icon-sized so search remains discoverable. */
@media (max-width: 650px) {
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .topbar {
    gap: 5px;
    min-width: 0;
    overflow: visible;
    padding-right: 10px;
    padding-left: 10px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .topbar .mobile-title {
    width: 31px;
    min-width: 31px;
    flex: 0 0 31px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .topbar .search-box {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: none;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .topbar .search-box input {
    min-width: 0;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .topbar .top-actions {
    flex: 0 0 auto;
    min-width: 0;
    gap: 5px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .topbar .top-actions > .theme-settings-button,
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .topbar .top-actions > .sidebar-settings-button,
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .topbar .top-actions > .primary-button {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .topbar .top-actions > .v07-permission-dock {
    width: 40px;
    min-width: 40px;
    flex: 0 0 40px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .topbar .top-actions > .v07-permission-dock .v07-account-trigger {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 5px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .topbar .top-actions > .theme-settings-button > span:last-child,
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .topbar .top-actions > .sidebar-settings-button > span:last-child {
    display: none;
  }
}

/* Make the recent-work strip and attention queue legible at a glance. */
.wb-home .wb-recent-head,
.wb-home .wb-attention-head {
  margin-bottom: 10px;
}

.wb-home .wb-recent-head h2,
.wb-home .wb-attention-head h2 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wb-section-icon {
  display: grid;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  place-items: center;
  border-radius: 50%;
  color: #a65332;
  background: #f7eee5;
  font-size: 17px;
  line-height: 1;
}

.wb-recent-meta,
.wb-section-count {
  flex: 0 0 auto;
  color: #a18f80;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.wb-home .wb-attention-head h2 {
  justify-content: flex-start;
}

.wb-home .wb-attention-head h2 small {
  color: #a65332;
  font-size: 12px;
  font-weight: 700;
}

.wb-recent-indicator {
  display: none;
}

.wb-home .wb-attention-event {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  box-sizing: border-box;
  margin: 8px 0;
  padding: 8px 10px;
  border-radius: 12px;
  background: #fffdf9;
}

.wb-home .wb-attention-event .wb-event-date {
  display: grid;
  min-height: 42px;
  box-sizing: border-box;
  align-content: center;
  justify-items: center;
  gap: 2px;
  padding: 4px 3px;
  border-radius: 9px;
  color: #a65332;
  background: #f8eee4;
}

.wb-home .wb-attention-event .wb-event-date strong,
.wb-home .wb-attention-event .wb-event-date small {
  flex: 0 0 auto;
  margin: 0;
  color: #a65332;
  line-height: 1.15;
  white-space: nowrap;
}

.wb-home .wb-attention-event .wb-event-date strong {
  font-size: 14px;
}

.wb-home .wb-attention-event .wb-event-date small {
  font-size: 10px;
}

.wb-home .wb-attention-event .wb-event-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.wb-home .wb-attention-event .wb-event-copy strong,
.wb-home .wb-attention-event .wb-event-copy small {
  display: block;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  flex: 0 1 auto;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wb-home .wb-attention-event .wb-event-copy strong {
  color: #514236;
  font-size: 14px;
  line-height: 1.35;
}

.wb-home .wb-attention-event .wb-event-copy small {
  color: #9a8675;
  font-size: 11px;
  line-height: 1.35;
}

.wb-home .wb-attention-event .wb-event-arrow {
  display: grid;
  place-items: center;
  color: #aa8e7b;
  font-size: 23px;
  line-height: 1;
}

.wb-home .wb-material-alert {
  grid-template-columns: 28px minmax(0, 1fr) 18px;
  border-color: #edd7c7;
  background: #fff8f2;
}

.wb-home .wb-material-alert .wb-event-status {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  color: #a65332;
  background: #f3e0d4;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}

.wb-home .wb-attention-summary {
  margin-top: 9px;
  margin-bottom: 0;
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 600px) {
  .wb-home .wb-recent-head,
  .wb-home .wb-attention-head {
    margin-bottom: 8px;
  }

  .wb-recent-indicator {
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 15px;
    margin: -1px 0 2px;
  }

  .wb-recent-indicator:not([hidden]) {
    display: flex;
  }

  .wb-recent-dot {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ddcec2;
    transition: width .16s ease, border-radius .16s ease, background-color .16s ease;
  }

  .wb-recent-dot.is-current {
    width: 14px;
    border-radius: 999px;
    background: #bd593b;
  }

  .wb-recent-scroll-label {
    margin-left: 4px;
    color: #a18f80;
    font-size: 10px;
    line-height: 1;
  }

  .wb-home .wb-attention-event {
    grid-template-columns: 56px minmax(0, 1fr) 16px;
    gap: 8px;
    min-height: 56px;
    margin: 7px 0;
    padding: 7px 8px;
  }

  .wb-home .wb-material-alert {
    grid-template-columns: 26px minmax(0, 1fr) 16px;
  }

  .wb-home .wb-attention-event .wb-event-copy strong {
    font-size: 13px;
  }

  .wb-home .wb-attention-event .wb-event-copy small {
    font-size: 10px;
  }

  .wb-home .wb-attention-summary {
    margin-top: 7px;
  }
}

/* Keep the established desktop workbench as the default. The visual pass
   below is intentionally limited to the mobile experience. */
@media (min-width: 901px) {
  .wb-home .wb-sync-pill {
    display: none;
  }

  .wb-home .wb-heading-actions > button:not(.primary-button) .wb-action-icon,
  .wb-home .wb-heading-actions > button > small {
    display: none;
  }

  .wb-home .wb-heading-actions > button.primary-button .wb-action-icon {
    display: inline;
    width: auto;
    height: auto;
    margin-right: 4px;
    border: 0;
    border-radius: 0;
    color: inherit;
    background: transparent;
  }
}

@media (max-width: 900px) {
/* V0.7 dashboard visual pass: put today's focus first and keep the warm
   editorial language while making the mobile layout easier to scan. */
.wb-home {
  --wb-surface: #fffdf9;
  --wb-surface-soft: #fbf5ed;
  --wb-line: rgba(131, 91, 63, .18);
  --wb-rust: #b95d3c;
  --wb-rust-dark: #8e3d27;
  --wb-muted: #8b7b6d;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  gap: clamp(16px, 2.2vw, 24px);
}

.wb-home .wb-heading {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .92fr);
  align-items: end;
  gap: 24px;
  overflow: hidden;
  padding: clamp(24px, 3.4vw, 34px);
  border: 1px solid rgba(141, 91, 58, .2);
  border-radius: 26px;
  background:
    radial-gradient(circle at 92% 10%, rgba(208, 128, 89, .16), transparent 10rem),
    linear-gradient(124deg, #fffdf8 0%, #faf1e7 64%, #f0ddd2 100%);
  box-shadow: 0 16px 38px rgba(102, 68, 42, .08);
}

.wb-home .wb-heading::before {
  position: absolute;
  right: -74px;
  bottom: -112px;
  width: 238px;
  height: 238px;
  border: 1px solid rgba(185, 93, 60, .17);
  border-radius: 50%;
  content: "";
  box-shadow: 0 0 0 22px rgba(185, 93, 60, .035), 0 0 0 44px rgba(185, 93, 60, .025);
}

.wb-home .wb-heading::after {
  position: absolute;
  right: 26%;
  top: 22px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(185, 93, 60, .34);
  content: "";
  box-shadow: 18px 18px 0 rgba(185, 93, 60, .14), -14px 32px 0 rgba(185, 93, 60, .1);
}

.wb-heading-copy,
.wb-heading-actions {
  position: relative;
  z-index: 1;
}

.wb-heading-copy {
  min-width: 0;
}

.wb-heading-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 24px;
}

.wb-home .wb-heading-meta > small {
  margin: 0;
  color: var(--wb-rust);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}

.wb-sync-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border: 1px solid rgba(104, 127, 91, .2);
  border-radius: 999px;
  color: #687760;
  background: rgba(239, 246, 233, .7);
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}

.wb-sync-pill i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #719065;
  box-shadow: 0 0 0 3px rgba(113, 144, 101, .12);
}

.wb-home .wb-heading h1 {
  margin: 8px 0 6px;
  color: #352b24;
  font-size: clamp(32px, 4vw, 46px);
  letter-spacing: -.045em;
  line-height: 1.1;
}

.wb-home .wb-heading p {
  max-width: 430px;
  margin: 0;
  color: var(--wb-muted);
  font-size: 14px;
  line-height: 1.65;
}

.wb-home .wb-heading-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  max-width: 430px;
  justify-self: end;
}

.wb-home .wb-heading-actions > button {
  display: flex;
  min-width: 0;
  min-height: 76px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 7px;
  padding: 12px 12px 11px;
  border: 1px solid rgba(130, 94, 70, .2);
  border-radius: 15px;
  color: #5c493c;
  background: rgba(255, 253, 249, .78);
  text-align: left;
  box-shadow: 0 5px 14px rgba(104, 68, 41, .04);
}

.wb-home .wb-heading-actions > button:hover,
.wb-home .wb-heading-actions > button:focus-visible {
  border-color: rgba(185, 93, 60, .45);
  background: #fffdf9;
  box-shadow: 0 8px 18px rgba(104, 68, 41, .09);
}

.wb-home .wb-heading-actions > button.primary-button {
  border-color: var(--wb-rust);
  color: #fffaf4;
  background: linear-gradient(145deg, #c86c49, var(--wb-rust));
  box-shadow: 0 10px 18px rgba(185, 93, 60, .2);
}

.wb-home .wb-heading-actions > button.primary-button:hover,
.wb-home .wb-heading-actions > button.primary-button:focus-visible {
  border-color: var(--wb-rust-dark);
  color: #fffaf4;
  background: linear-gradient(145deg, #bd6040, var(--wb-rust-dark));
}

.wb-action-icon {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid rgba(130, 94, 70, .17);
  border-radius: 9px;
  color: var(--wb-rust);
  background: #f8eee5;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}

.wb-heading-actions .primary-button .wb-action-icon {
  border-color: rgba(255, 255, 255, .3);
  color: #fffaf4;
  background: rgba(255, 255, 255, .15);
}

.wb-home .wb-heading-actions > button > span:nth-child(2) {
  overflow: hidden;
  max-width: 100%;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wb-home .wb-heading-actions > button > small {
  overflow: hidden;
  max-width: 100%;
  color: #a18b7b;
  font-size: 10px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wb-home .wb-heading-actions > button.primary-button > small {
  color: rgba(255, 250, 244, .76);
}

.wb-home .wb-panel {
  border-color: var(--wb-line);
  border-radius: 22px;
  background: rgba(255, 253, 249, .92);
  box-shadow: 0 10px 26px rgba(102, 68, 42, .045);
}

.wb-home .wb-main {
  gap: clamp(14px, 2vw, 20px);
}

.wb-home .wb-section-head {
  align-items: center;
  margin-bottom: 15px;
}

.wb-home .wb-section-head h2 {
  color: #3d3028;
  font-size: 22px;
  letter-spacing: -.025em;
}

.wb-home .wb-section-icon {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  border: 1px solid rgba(185, 93, 60, .14);
  color: var(--wb-rust);
  background: #faf0e6;
  font-size: 16px;
}

.wb-home .wb-recent-meta,
.wb-home .wb-section-count {
  padding: 5px 9px;
  border: 1px solid rgba(130, 94, 70, .15);
  border-radius: 999px;
  color: #9a8170;
  background: #fffaf4;
  font-size: 11px;
  font-weight: 700;
}

.wb-home .wb-recent-cards {
  min-width: 0;
}

.wb-home .wb-recent-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(148, 104, 76, .2);
  border-radius: 17px;
  background: linear-gradient(145deg, #fffdf9 0%, #fff8f1 100%);
  box-shadow: 0 6px 16px rgba(106, 69, 43, .045);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.wb-home .wb-recent-card::before {
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 0;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: #d28a67;
  content: "";
}

.wb-home .wb-recent-card:hover {
  border-color: rgba(185, 93, 60, .38);
  box-shadow: 0 10px 22px rgba(106, 69, 43, .08);
  transform: translateY(-1px);
}

.wb-home .wb-recent-card > strong {
  padding-left: 3px;
  color: #3b3029;
  font-size: 17px;
  line-height: 1.38;
}

.wb-home .wb-recent-card > small {
  padding-left: 3px;
  color: #a18b7b;
}

.wb-home .wb-recent-card .wb-row-actions {
  padding-left: 3px;
}

.wb-home .wb-recent-card .wb-recent-primary {
  box-shadow: 0 5px 12px rgba(185, 93, 60, .14);
}

.wb-home #wbPrep {
  display: grid;
  gap: 8px;
}

.wb-home #wbPrep .wb-event {
  min-height: 52px;
  margin: 0;
  padding: 11px 13px;
  border-color: rgba(130, 94, 70, .15);
  border-radius: 13px;
  background: var(--wb-surface-soft);
}

.wb-home #wbPrep .wb-event strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wb-home #wbPrep .wb-event small {
  color: #a18b7b;
  font-size: 11px;
  white-space: nowrap;
}

.wb-home #wbAttentionPanel {
  background: linear-gradient(145deg, rgba(255, 253, 249, .96), rgba(255, 248, 241, .92));
}

.wb-home #wbAttentionPanel:not(.wb-panel-compact) .wb-section-count {
  border-color: rgba(185, 93, 60, .2);
  color: var(--wb-rust);
  background: #f9e9df;
}

.wb-home .wb-attention-event {
  border-color: rgba(130, 94, 70, .15);
  box-shadow: 0 4px 12px rgba(106, 69, 43, .025);
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.wb-home .wb-attention-event:hover,
.wb-home .wb-attention-event:focus-visible {
  border-color: rgba(185, 93, 60, .35);
  background: #fffaf4;
  transform: translateX(1px);
}

.wb-home .wb-attention-actions {
  gap: 7px;
}

.wb-home .wb-attention-actions button {
  min-height: 35px;
  padding: 7px 10px;
  font-size: 12px;
}

.wb-home .wb-favorites .wb-recipe {
  border-radius: 14px;
  background: #fffaf4;
}

.wb-home .wb-favorites .wb-recipe > strong {
  font-size: 15px;
  line-height: 1.35;
}

.wb-home #wbUpcoming {
  display: grid;
  gap: 8px;
}

.wb-home #wbUpcoming > .wb-event {
  display: grid;
  grid-template-columns: minmax(76px, .28fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-height: 52px;
  margin: 0;
  padding: 10px 13px;
  border-color: rgba(130, 94, 70, .15);
  border-radius: 13px;
  background: var(--wb-surface-soft);
}

.wb-home #wbUpcoming > .wb-event > span,
.wb-home #wbUpcoming > .wb-event > small {
  color: #9a8170;
  font-size: 11px;
  white-space: nowrap;
}

.wb-home #wbUpcoming > .wb-event > strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .wb-home .wb-heading {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .wb-home .wb-heading-actions {
    max-width: none;
    justify-self: stretch;
  }
}

@media (max-width: 600px) {
  .wb-home {
    gap: 14px;
  }

  .wb-home .wb-heading {
    gap: 17px;
    padding: 20px 17px 17px;
    border-radius: 22px;
  }

  .wb-home .wb-heading h1 {
    margin-top: 7px;
    margin-bottom: 5px;
    font-size: 32px;
  }

  .wb-home .wb-heading p {
    font-size: 13px;
  }

  .wb-home .wb-heading-actions {
    gap: 7px;
  }

  .wb-home .wb-heading-actions > button {
    min-height: 73px;
    padding: 10px 8px 9px;
    border-radius: 14px;
  }

  .wb-action-icon {
    width: 25px;
    height: 25px;
    border-radius: 8px;
    font-size: 14px;
  }

  .wb-home .wb-heading-actions > button > span:nth-child(2) {
    font-size: 12px;
  }

  .wb-home .wb-heading-actions > button > small {
    font-size: 9px;
  }

  .wb-home .wb-panel {
    padding: 18px 16px;
    border-radius: 19px;
  }

  .wb-home .wb-section-head {
    margin-bottom: 12px;
  }

  .wb-home .wb-section-head h2 {
    font-size: 20px;
  }

  .wb-home .wb-section-icon {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }

  .wb-home .wb-recent-cards {
    margin-right: -2px;
    padding-right: 2px;
  }

  .wb-home .wb-recent-cards > .wb-recent-card {
    flex-basis: calc(100% - 30px);
  }

  .wb-home .wb-recent-card {
    min-height: 153px;
    padding: 15px 15px 14px;
  }

  .wb-home .wb-recent-card::before {
    top: 15px;
    bottom: 15px;
  }

  .wb-home .wb-recent-card > strong {
    font-size: 17px;
  }

  .wb-home #wbUpcoming > .wb-event {
    grid-template-columns: minmax(62px, .34fr) minmax(0, 1fr) auto;
    gap: 8px;
    padding: 9px 10px;
  }

  .wb-home #wbUpcoming > .wb-event > strong {
    font-size: 12px;
  }

  .wb-home #wbUpcoming > .wb-event > span,
  .wb-home #wbUpcoming > .wb-event > small {
    font-size: 10px;
  }
}

@media (max-width: 380px) {
  .wb-home .wb-heading-actions > button > small {
    display: none;
  }

  .wb-home .wb-heading-actions > button {
    min-height: 61px;
    justify-content: center;
    gap: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wb-home .wb-recent-card,
  .wb-home .wb-attention-event,
  .wb-home .wb-heading-actions > button {
    transition: none;
  }
}
}

/* V0.7 cloud mobile pass: reuse the connected Figma workbench rhythm while
   leaving the existing horizontally scrollable bottom navigation untouched. */
@media (max-width: 900px) {
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .content {
    min-width: 0;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home {
    gap: 10px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-heading {
    gap: 13px;
    padding: 16px 17px 16px;
    border-color: rgba(227, 212, 196, .6);
    border-radius: 18px;
    background-color: #fbf8f2;
    background-image: linear-gradient(180deg, rgba(255, 252, 247, .72), rgba(255, 248, 239, .78));
    box-shadow: 0 10px 24px rgba(110, 56, 31, .07);
  }

  html[data-release-channel="cloud"] .wb-home .wb-heading::before,
  html[data-release-channel="cloud"] .wb-home .wb-heading::after {
    display: none;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-sync-pill {
    display: none;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-heading h1 {
    margin: 5px 0 4px;
    color: #2c1309;
    font-size: 32px;
    line-height: 1.18;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-heading p {
    color: #7b6e66;
    font-size: 15px;
    line-height: 1.45;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-heading-actions {
    display: flex;
    width: 100%;
    max-width: none;
    gap: 8px;
    overflow: hidden;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-heading-actions > button {
    min-width: 0;
    min-height: 40px;
    height: 40px;
    flex: 0 1 auto;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 12px;
    border-radius: 12px;
    white-space: nowrap;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-heading-actions > button > small {
    display: none;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-heading-actions > button > span:nth-child(2) {
    font-size: 15px;
    font-weight: 600;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-heading-actions > button .wb-action-icon {
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 15px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-panel {
    border-color: rgba(227, 212, 196, .78);
    border-radius: 16px;
    background: #fffefc;
    box-shadow: 0 8px 22px rgba(110, 56, 31, .055);
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-recent-panel {
    padding: 14px 15px 10px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-recent-head {
    margin-bottom: 11px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-recent-head h2 {
    gap: 0;
    color: #2c1309;
    font-family: "Noto Serif SC", "STSong", "SimSun", Georgia, serif;
    font-size: 20px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-recent-head .wb-section-icon {
    display: none;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-section-link {
    padding: 0;
    border: 0;
    color: #7b6e66;
    background: transparent;
    font-size: 12px;
    font-weight: 500;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-section-link:hover,
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-section-link:focus-visible {
    color: #b64d2e;
    background: transparent;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-recent-cards {
    display: flex;
    gap: 8px;
    margin-right: -15px;
    padding: 0 15px 3px 0;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-recent-cards::-webkit-scrollbar {
    display: none;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-recent-cards > .wb-recent-card {
    flex: 0 0 min(286px, calc(100vw - 68px));
    aspect-ratio: 2.9 / 1;
    min-height: 96px;
    scroll-snap-align: start;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-recent-card {
    display: grid;
    box-sizing: border-box;
    grid-template-columns: minmax(0, 1fr) 76px;
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "kicker actions"
      "title actions"
      "meta actions";
    column-gap: 14px;
    row-gap: 2px;
    min-height: 96px;
    padding: 11px 12px 9px;
    border-color: rgba(227, 212, 196, .9);
    border-radius: 12px;
    background: #fffefc;
    box-shadow: none;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-recent-kicker {
    grid-area: kicker;
    padding-left: 3px;
    color: #b64d2e;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.2;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-recent-card::before {
    top: 12px;
    bottom: 12px;
    width: 2px;
    background: #c34925;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-recent-card > strong {
    grid-area: title;
    align-self: center;
    min-height: 0;
    padding-left: 3px;
    color: #2c1309;
    font-size: 16px;
    line-height: 1.35;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-recent-card > small {
    grid-area: meta;
    align-self: end;
    max-width: none;
    margin: 0;
    padding: 0 0 0 3px;
    color: #7b6e66;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.45;
    text-align: left;
    white-space: nowrap;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-recent-card .wb-row-actions {
    grid-area: actions;
    align-self: center;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 0;
    padding-left: 3px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-recent-card .wb-row-actions > button {
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 9px;
    font-size: 12px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-recent-indicator {
    min-height: 11px;
    margin: 2px 0 0;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-summary-panel,
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-panel-compact {
    padding: 0;
    border-radius: 14px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-panel-compact .wb-section-head {
    display: none;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-summary-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 66px;
    margin: 0;
    padding: 10px 12px;
    border: 0;
    border-radius: 14px;
    color: #2c1309;
    background: transparent;
    text-align: left;
    box-shadow: none;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-summary-row:hover,
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-summary-row:focus-visible {
    background: #fff8f1;
    outline: none;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-summary-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: #b64d2e;
    background: #f6e9de;
    font-family: "Noto Sans SC", sans-serif;
    font-size: 17px;
    line-height: 1;
  }

  /* These four 18px icons are exported from the connected Figma frame and
     embedded by the V0.7 builder so the single-file cloud page stays portable. */
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-summary-icon-prep,
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-summary-icon-attention,
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-summary-icon-favorite,
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-summary-icon-upcoming {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    font-size: 0;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-summary-icon-prep {
    background-image: var(--wb-figma-prep-icon);
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-summary-icon-attention {
    background-image: var(--wb-figma-attention-icon);
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-summary-icon-favorite {
    background-image: var(--wb-figma-favorite-icon);
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-summary-icon-upcoming {
    background-image: var(--wb-figma-upcoming-icon);
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-summary-copy {
    display: grid;
    min-width: 0;
    gap: 1px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-summary-copy strong {
    min-width: 0;
    overflow: hidden;
    color: #2c1309;
    font-family: "Noto Serif SC", "STSong", "SimSun", Georgia, serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-summary-copy small,
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-summary-trailing {
    min-width: 0;
    overflow: hidden;
    color: #7b6e66;
    font-size: 12px;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-summary-trailing {
    max-width: 132px;
    text-align: right;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-summary-action {
    min-height: 30px;
    padding: 5px 8px;
    border-color: rgba(227, 212, 196, .95);
    border-radius: 10px;
    color: #b64d2e;
    background: #fffefc;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-summary-action:hover,
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-summary-action:focus-visible {
    border-color: rgba(182, 77, 46, .35);
    color: #9f4027;
    background: #fff8f1;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-summary-controls {
    display: flex;
    align-items: center;
    gap: 7px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-summary-controls label {
    display: none;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-summary-controls select {
    width: 69px;
    min-height: 28px;
    padding: 4px 5px;
    border: 1px solid rgba(227, 212, 196, .95);
    border-radius: 9px;
    color: #7b6e66;
    background: #fffefc;
    font-size: 11px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-summary-controls .wb-summary-action {
    max-width: 77px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-empty-state {
    padding: 10px 12px;
    border: 1px dashed rgba(227, 212, 196, .95);
    border-radius: 12px;
  }
}

@media (max-width: 600px) {
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .content {
    padding: 10px 10px calc(108px + env(safe-area-inset-bottom));
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-heading {
    margin-right: -10px;
    margin-left: -10px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-heading-actions > button > span:nth-child(2) {
    font-size: 14px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-summary-trailing {
    max-width: 112px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-recent-cards {
    scroll-behavior: auto;
  }
}

/* Figma 今日概览 mobile handoff: the prototype's header and four-row daily
   surface reuse the existing V0.7 controls and delegated data-go handlers. */
.wb-today-label {
  display: none;
}

@media (max-width: 600px) {
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .topbar {
    box-sizing: border-box;
    height: 76px;
    min-height: 76px;
    gap: 8px;
    padding: 8px 14px 0;
    overflow: visible;
    border-bottom: 0;
    background-color: #fbf8f2;
    background-image:
      linear-gradient(90deg, rgba(251, 248, 242, .98) 0%, rgba(251, 248, 242, .92) 55%, rgba(251, 248, 242, .38) 100%),
      var(--wb-figma-hero-image);
    background-position: center right;
    background-size: auto 220px;
    box-shadow: none;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .topbar .mobile-title {
    box-sizing: border-box;
    width: 86px;
    min-width: 86px;
    flex: 0 0 86px;
    gap: 6px;
    display: flex;
    align-items: center;
    overflow: visible;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .topbar .mobile-brand {
    width: 29px;
    height: 31px;
    flex: 0 0 29px;
    border-radius: 9px 9px 9px 4px;
    font-size: 16px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .topbar .mobile-title #activeViewLabel {
    display: none !important;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .topbar .mobile-title::after {
    display: block;
    color: #4e4036;
    content: "烘焙\A BAKING";
    font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
    font-size: 13px;
    font-weight: 750;
    letter-spacing: .03em;
    line-height: 1.08;
    white-space: pre;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .topbar .search-box {
    box-sizing: border-box;
    width: auto;
    max-width: none;
    min-width: 0;
    height: 40px;
    flex: 1 1 auto;
    padding: 0 10px;
    border-color: rgba(124, 95, 75, .18);
    border-radius: 12px;
    background: rgba(255, 253, 249, .82);
    box-shadow: inset 0 1px rgba(255, 255, 255, .72);
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .topbar .search-box input {
    min-width: 0;
    font-size: 12px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .topbar .search-shortcut,
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .topbar .global-search-top-clear {
    display: none;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .topbar .top-actions {
    box-sizing: border-box;
    flex: 0 0 auto;
    gap: 8px;
    min-width: 80px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .topbar .top-actions > .theme-settings-button,
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .topbar .top-actions > .today,
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .topbar .top-actions > .density-toggle,
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .topbar .top-actions > .primary-button {
    display: none !important;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .topbar .top-actions > .sidebar-settings-button,
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .topbar .top-actions > .v07-permission-dock,
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .topbar .top-actions > .v07-permission-dock .v07-account-trigger {
    box-sizing: border-box;
    width: 36px;
    min-width: 36px;
    height: 40px;
    min-height: 40px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .topbar .top-actions > .sidebar-settings-button {
    padding: 0;
    border-color: rgba(124, 95, 75, .18);
    border-radius: 11px;
    color: #5c493d;
    background: rgba(255, 253, 249, .72);
    font-size: 0;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .topbar .top-actions > .sidebar-settings-button > span:first-child {
    font-size: 0;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .topbar .top-actions > .sidebar-settings-button > span:first-child::before {
    content: "☰";
    font-size: 17px;
    line-height: 1;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .topbar .top-actions > .v07-permission-dock {
    position: relative;
    inset: auto;
    flex: 0 0 36px;
    overflow: visible;
    font-size: 0;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .topbar .top-actions > .v07-permission-dock .v07-account-trigger {
    padding: 5px;
    border-color: rgba(124, 95, 75, .18);
    border-radius: 11px;
    background: rgba(255, 253, 249, .72);
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .topbar .top-actions > .v07-permission-dock .v07-account-avatar {
    width: 26px;
    height: 26px;
    font-size: 13px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .topbar .top-actions > .v07-permission-dock #v07AccountName,
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .topbar .top-actions > .v07-permission-dock .v07-account-chevron {
    display: none;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .content {
    min-width: 0;
    padding-top: 0 !important;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home {
    gap: 0;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-heading {
    gap: 8px;
    min-height: 0;
    padding: 0 17px 10px;
    border-top: 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    box-shadow: none;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-heading-meta {
    min-height: 18px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-heading-actions {
    margin-top: 0;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-main {
    display: contents;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-recent-panel {
    margin: 10px 0;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home #wbPrepPanel,
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home #wbAttentionPanel,
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home #wbFavoritesPanel,
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home #wbUpcomingPanel {
    padding: 0;
    border-radius: 0;
    box-shadow: none;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home #wbPrepPanel {
    position: relative;
    border-radius: 16px 16px 0 0;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home #wbAttentionPanel,
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home #wbFavoritesPanel,
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home #wbUpcomingPanel {
    margin-top: -1px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home #wbUpcomingPanel {
    margin-bottom: 10px;
    border-radius: 0 0 16px 16px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-today-label {
    display: block;
    margin: 0;
    padding: 12px 14px 2px;
    color: #2c1309;
    font-family: "Noto Serif SC", "STSong", "SimSun", Georgia, serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-summary-row {
    min-height: 66px;
    padding: 10px 14px;
    border-radius: 0;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home #wbAttentionPanel:not(.wb-panel-compact) .wb-section-head,
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home #wbFavoritesPanel:not(.wb-panel-compact) .wb-section-head,
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home #wbUpcomingPanel:not(.wb-panel-compact) .wb-section-head {
    margin: 0;
    padding: 12px 14px 2px;
  }
}

/* Mobile daily surface hierarchy: keep the daily work together, then give
   shortcuts and empty planning state a quieter secondary surface. */
@media (max-width: 600px) {
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home #wbPrepPanel,
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home #wbAttentionPanel,
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home #wbFavoritesPanel,
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home #wbUpcomingPanel {
    border-color: rgba(227, 212, 196, .82);
    background: #fffefc;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home #wbPrepPanel {
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home #wbAttentionPanel {
    margin-top: 0;
    border-top-color: rgba(185, 93, 60, .16);
    border-radius: 0 0 16px 16px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home #wbAttentionPanel:not(.wb-panel-compact) {
    background: linear-gradient(145deg, #fffdfa 0%, #fff8f2 100%);
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home #wbFavoritesPanel {
    margin-top: 12px;
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    background: #fffdf9;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home #wbUpcomingPanel {
    margin-top: 0;
    margin-bottom: 10px;
    border-radius: 0 0 16px 16px;
    background: #fffdf9;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-today-label {
    padding: 15px 14px 4px;
    color: #28170f;
    font-size: 20px;
    letter-spacing: -.035em;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home #wbPrep .wb-summary-row {
    min-height: 62px;
    padding: 9px 14px 12px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home #wbPrep .wb-summary-icon {
    width: 32px;
    height: 32px;
    background-color: #f8eee4;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home #wbAttentionPanel:not(.wb-panel-compact) .wb-section-head {
    margin: 0;
    padding: 14px 14px 4px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home #wbAttentionPanel:not(.wb-panel-compact) .wb-section-head h2 {
    color: #5a2a1b;
    font-size: 17px;
    letter-spacing: -.02em;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home #wbAttentionPanel:not(.wb-panel-compact) .wb-section-count {
    padding: 4px 8px;
    font-size: 11px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home #wbAttentionPanel:not(.wb-panel-compact) .wb-attention-event {
    width: calc(100% - 28px);
    min-height: 56px;
    margin: 5px 14px 0;
    border-color: rgba(185, 93, 60, .18);
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 4px 12px rgba(106, 69, 43, .035);
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home #wbAttentionPanel:not(.wb-panel-compact) .wb-attention-summary {
    margin: 8px 14px 0;
    color: #92796b;
    font-size: 11px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home #wbAttentionPanel:not(.wb-panel-compact) .wb-attention-actions {
    margin: 7px 14px 13px;
    gap: 12px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home #wbAttentionPanel:not(.wb-panel-compact) .wb-attention-actions button {
    min-height: 28px;
    padding: 3px 2px;
    border: 0;
    color: #a65332;
    background: transparent;
    font-size: 12px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home #wbAttentionPanel.wb-panel-compact .wb-summary-row {
    min-height: 54px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home #wbFavoritesPanel:not(.wb-panel-compact) .wb-section-head {
    margin: 0;
    padding: 14px 14px 6px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home #wbFavoritesPanel:not(.wb-panel-compact) .wb-section-head h2 {
    color: #4d3d33;
    font-size: 17px;
    letter-spacing: -.02em;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home #wbFavoritesPanel:not(.wb-panel-compact) .wb-section-head > button {
    min-height: 0;
    padding: 2px 0;
    border: 0;
    color: #9a6148;
    background: transparent;
    font-size: 12px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home #wbFavoritesPanel:not(.wb-panel-compact) #wbFavorites {
    display: grid;
    gap: 8px;
    padding: 0 14px 14px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home #wbFavoritesPanel .wb-favorite-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title action"
      "meta action";
    align-items: center;
    column-gap: 10px;
    row-gap: 2px;
    margin: 0;
    padding: 11px 12px;
    border-color: rgba(227, 212, 196, .82);
    border-radius: 12px;
    background: #fffaf4;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home #wbFavoritesPanel .wb-favorite-card > strong {
    grid-area: title;
    min-width: 0;
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home #wbFavoritesPanel .wb-favorite-card > small {
    grid-area: meta;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home #wbFavoritesPanel .wb-favorite-card .wb-row-actions {
    grid-area: action;
    align-self: center;
    margin: 0;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home #wbFavoritesPanel .wb-favorite-card .wb-row-actions > [data-wb-calc],
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home #wbFavoritesPanel .wb-favorite-card .wb-row-actions > [data-wb-label] {
    display: none;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home #wbFavoritesPanel .wb-favorite-card .wb-row-actions > [data-open-recipe] {
    min-height: 29px;
    padding: 5px 9px;
    border-radius: 9px;
    color: #9a6148;
    background: #fffefc;
    font-size: 11px;
    white-space: nowrap;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home #wbUpcomingPanel.wb-panel-compact .wb-summary-row {
    min-height: 54px;
    padding: 8px 14px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home #wbUpcomingPanel.wb-panel-compact .wb-summary-copy strong {
    color: #59483d;
    font-size: 15px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home #wbUpcomingPanel.wb-panel-compact .wb-summary-copy small {
    color: #a18b7b;
    font-size: 11px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home #wbUpcomingPanel.wb-panel-compact .wb-summary-controls {
    gap: 5px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home #wbUpcomingPanel.wb-panel-compact .wb-summary-controls select {
    width: 62px;
    min-height: 28px;
    border-color: rgba(227, 212, 196, .82);
    background: #fffefc;
    font-size: 10px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home #wbUpcomingPanel.wb-panel-compact .wb-summary-controls .wb-summary-action {
    max-width: 72px;
    padding-right: 0;
    padding-left: 5px;
    border: 0;
    color: #9a6148;
    background: transparent;
    font-size: 11px;
  }
}

    .brand { position: relative; }
    .v07-cloud-badge {
      position: absolute;
      top: 3px;
      right: 8px;
      display: inline-flex;
      align-items: center;
      min-height: 20px;
      padding: 2px 8px;
      border: 1px solid rgba(173, 79, 47, .18);
      border-radius: 999px;
      background: #ad4f2f;
      box-shadow: 0 4px 12px rgba(121, 62, 43, .12);
      color: #fffaf2;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .08em;
      line-height: 1;
      white-space: nowrap;
    }
    .app.sidebar-collapsed .v07-cloud-badge {
      top: 0;
      right: 0;
      min-height: 15px;
      padding: 1px 4px;
      font-size: 8px;
      letter-spacing: 0;
    }

    [data-requires-permission][hidden],
    .v07-auth-gate[hidden],
    .v07-members-dialog[hidden],
    .v07-admin-panel[hidden],
    .v07-admin-password-dialog[hidden] {
      display: none !important;
    }

    .v07-permission-dock {
      position: fixed;
      right: 18px;
      bottom: 16px;
      /* Keep account controls accessible on the page; hide during business dialogs below. */
      z-index: 8900;
      display: flex;
      align-items: center;
      gap: 8px;
      max-width: calc(100vw - 36px);
      padding: 8px 10px;
      border: 1px solid rgba(173, 79, 47, .18);
      border-radius: 14px;
      background: rgba(255, 252, 246, .94);
      box-shadow: 0 12px 30px rgba(86, 53, 37, .12);
      color: var(--ink, #4c3a2f);
      font-size: 11px;
      backdrop-filter: blur(10px);
    }

    .v07-admin-catalog-list { display: grid; gap: 8px; }
    .v07-admin-catalog-row { display: grid; grid-template-columns: 54px minmax(180px, 1.3fr) minmax(118px, .8fr) minmax(132px, .85fr) auto auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line, #e7dfd4); border-radius: 10px; background: #fffdf9; }
    .v07-admin-catalog-row.is-featured { border-color: #e4c5b5; background: #fffaf3; }
    .v07-admin-catalog-image { width: 54px; height: 54px; border-radius: 9px; object-fit: cover; background: #f2e8dc; }
    .v07-admin-catalog-image.is-empty { display: grid; place-items: center; color: #a68b78; font-size: 10px; }
    .v07-admin-catalog-title { min-width: 0; }
    .v07-admin-catalog-title strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .v07-admin-catalog-featured-badge { display: inline-flex; margin: 5px 5px 0 0; padding: 2px 7px; border-radius: 999px; background: #fff0e8; color: #b95735 !important; font-size: 10px !important; }
    .v07-admin-catalog-title .v07-admin-catalog-source { display: inline-flex; margin-top: 5px; padding: 2px 7px; border-radius: 999px; background: #edf5ea; color: #4c7a50; font-size: 10px; }
    .v07-admin-catalog-actions { display: flex; gap: 6px; justify-content: flex-end; }
    .v07-admin-catalog-row.is-missing-price { border-color: #efd2b4; background: #fffaf4; }
    .v07-admin-catalog-price { display: block; overflow: hidden; color: #4c3a2f !important; font-size: 13px !important; font-weight: 800; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
    .v07-admin-catalog-price.is-missing { color: #b95735 !important; font-weight: 800; }
    .v07-admin-catalog-unit-price { display: grid; min-width: 0; gap: 2px; }
    .v07-admin-catalog-unit-price strong { display: block; overflow: hidden; color: #4c3a2f; font-size: 13px; font-weight: 800; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
    .v07-admin-catalog-unit-price small { display: block; overflow: hidden; color: #a68b78; font-size: 10px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
    .v07-admin-catalog-unit-price.is-unavailable strong { color: #a68b78; font-size: 12px; font-weight: 700; }
    .v07-admin-catalog-unit-price.is-unavailable small { color: #b7a597; }
    .v07-admin-catalog-price-action { border-color: #e7b48f !important; color: #a65332 !important; }
    .v07-admin-catalog-price-action:hover { background: #fff0e2 !important; }
    .v07-admin-catalog-row span { color: #766e66; font-size: 13px; }
    .v07-admin-catalog-dialog { position: fixed; inset: 0; z-index: 9300; display: grid; place-items: center; padding: 20px; background: rgba(58, 39, 29, .34); }
    .v07-admin-catalog-dialog[hidden] { display: none !important; }
    .v07-admin-catalog-form { width: min(700px, 100%); max-height: calc(100vh - 40px); overflow: auto; box-sizing: border-box; padding: 22px; border: 1px solid rgba(173, 79, 47, .18); border-radius: 18px; background: #fffdf9; box-shadow: 0 24px 80px rgba(61, 37, 25, .22); }
    .v07-admin-catalog-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
    .v07-admin-catalog-dialog-head h2 { margin: 5px 0 0; color: #4c3a2f; font-size: 20px; }
    .v07-admin-catalog-image-editor { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 14px; margin-bottom: 16px; padding: 12px; border: 1px dashed #dfd2c3; border-radius: 12px; background: #fffaf3; }
    .v07-admin-catalog-image-preview { position: relative; display: grid; width: 92px; height: 92px; place-items: center; overflow: hidden; border: 1px solid #eadfd3; border-radius: 10px; background: #f4ece3; color: #a68b78; font-size: 10px; text-align: center; cursor: pointer; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
    .v07-admin-catalog-image-preview:focus-visible { outline: 2px solid #b95735; outline-offset: 2px; }
    .v07-admin-catalog-image-preview img { width: 100%; height: 100%; object-fit: contain; }
    .v07-admin-catalog-image-preview > span { position: relative; z-index: 1; display: grid; gap: 4px; }
    .v07-admin-catalog-image-preview > span small { color: #a68b78; font-size: 9px; }
    .v07-admin-catalog-image-preview.is-dragover { border-color: #b95735; background: #fff0e5; box-shadow: 0 0 0 3px rgba(185, 87, 53, .16); cursor: copy; }
    .v07-admin-catalog-image-preview.is-dragover::after { content: "松开上传"; position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; background: rgba(255, 247, 239, .88); color: #a9472d; font-size: 12px; font-weight: 800; }
    .v07-admin-catalog-image-copy { min-width: 0; }
    .v07-admin-catalog-image-copy strong { display: block; color: #4c3a2f; font-size: 12px; }
    .v07-admin-catalog-image-copy p { margin: 5px 0 10px; color: #9a8373; font-size: 10px; line-height: 1.5; }
    .v07-admin-catalog-image-actions { display: flex; flex-wrap: wrap; gap: 7px; }
    .v07-admin-catalog-image-actions button { min-height: 30px; }
    .v07-admin-catalog-image-reuse-dialog { position: fixed; inset: 0; z-index: 9400; display: grid; place-items: center; padding: 20px; background: rgba(58, 39, 29, .34); }
    .v07-admin-catalog-image-reuse-card { display: grid; width: min(580px, 100%); max-height: calc(100vh - 40px); overflow: hidden; box-sizing: border-box; padding: 20px; border: 1px solid rgba(173, 79, 47, .18); border-radius: 18px; background: #fffdf9; box-shadow: 0 24px 80px rgba(61, 37, 25, .22); }
    .v07-admin-catalog-image-reuse-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid #f0e6db; }
    .v07-admin-catalog-image-reuse-head h2 { margin: 5px 0 0; color: #4c3a2f; font-size: 19px; }
    .v07-admin-catalog-image-reuse-head p { max-width: 430px; margin: 8px 0 0; color: #9a8373; font-size: 10px; line-height: 1.55; }
    .v07-admin-catalog-image-reuse-list { display: grid; gap: 7px; overflow: auto; min-height: 0; padding: 14px 2px; }
    .v07-admin-catalog-image-reuse-option { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 8px; border: 1px solid #eee2d5; border-radius: 11px; background: #fffaf3; color: #4c3a2f; text-align: left; cursor: pointer; }
    .v07-admin-catalog-image-reuse-option:hover { border-color: #cc7858; background: #fff5eb; }
    .v07-admin-catalog-image-reuse-thumb { display: grid; width: 64px; height: 64px; place-items: center; overflow: hidden; border: 1px solid #eadfd3; border-radius: 9px; background: #f4ece3; }
    .v07-admin-catalog-image-reuse-thumb img { width: 100%; height: 100%; object-fit: contain; }
    .v07-admin-catalog-image-reuse-copy { display: grid; min-width: 0; gap: 4px; }
    .v07-admin-catalog-image-reuse-copy strong { overflow: hidden; color: #4c3a2f; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
    .v07-admin-catalog-image-reuse-copy small { overflow: hidden; color: #9a8373; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
    .v07-admin-catalog-image-reuse-use { color: #b95735; font-size: 11px; font-weight: 800; white-space: nowrap; }
    .v07-admin-catalog-image-reuse-empty { display: grid; gap: 6px; padding: 24px 12px; border: 1px dashed #dfd2c3; border-radius: 10px; color: #8e6d5b; text-align: center; }
    .v07-admin-catalog-image-reuse-empty small { color: #a68b78; font-size: 10px; line-height: 1.5; }
    .v07-admin-catalog-image-reuse-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid #f0e6db; }
    .v07-admin-catalog-image-reuse-foot span { color: #9a8373; font-size: 10px; }
    .v07-admin-catalog-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .v07-admin-catalog-form-grid label { display: grid; gap: 6px; color: #6d5749; font-size: 11px; font-weight: 800; }
    .v07-admin-catalog-form-grid label.is-full { grid-column: 1 / -1; }
    .v07-admin-catalog-form-grid input, .v07-admin-catalog-form-grid select { width: 100%; box-sizing: border-box; min-height: 36px; padding: 8px 10px; border: 1px solid #dfd2c3; border-radius: 9px; background: #fff; color: #4c3a2f; font: inherit; font-size: 12px; }
    .v07-admin-catalog-form-grid select { cursor: pointer; }
    .v07-admin-catalog-form-grid > label, .v07-admin-catalog-more-grid > label { min-width: 0; align-content: start; }
    .v07-admin-catalog-form-grid input::placeholder, .v07-admin-catalog-more-grid input::placeholder { color: #c9b9aa; opacity: 1; }
    .v07-admin-catalog-more { margin-top: 14px; border-top: 1px solid #f0e6db; }
    .v07-admin-catalog-more summary { padding: 11px 0 8px; color: #8e6d5b; cursor: pointer; font-size: 11px; font-weight: 800; }
    .v07-admin-catalog-more-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px; padding-bottom: 2px; }
    .v07-admin-catalog-more-grid label { display: grid; gap: 6px; color: #6d5749; font-size: 11px; font-weight: 800; }
    .v07-admin-catalog-more-grid input { width: 100%; box-sizing: border-box; min-height: 36px; padding: 8px 10px; border: 1px solid #dfd2c3; border-radius: 9px; background: #fff; color: #4c3a2f; font: inherit; font-size: 12px; }
    .v07-admin-catalog-field-hint { color: #a68b78; font-size: 10px; font-weight: 400; line-height: 1.45; }
    .v07-admin-catalog-category-combobox { position: relative; min-width: 0; }
    .v07-admin-catalog-category-combobox input { padding-right: 34px !important; }
    .v07-admin-catalog-category-toggle { position: absolute; top: 50%; right: 5px; display: grid; width: 28px; height: 28px; place-items: center; transform: translateY(-50%); border: 0; border-radius: 7px; background: transparent; color: #8e6d5b; font: inherit; font-size: 17px; line-height: 1; cursor: pointer; }
    .v07-admin-catalog-category-toggle:hover, .v07-admin-catalog-category-toggle:focus-visible { background: #fff0e5; color: #a94f31; outline: none; }
    .v07-admin-catalog-category-options { position: absolute; z-index: 20; top: calc(100% + 5px); right: 0; left: 0; max-height: 190px; overflow-y: auto; padding: 5px; border: 1px solid #dfcbbb; border-radius: 10px; background: #fffdf9; box-shadow: 0 12px 26px rgba(61, 37, 25, .16); }
    .v07-admin-catalog-category-options[hidden] { display: none !important; }
    .v07-admin-catalog-category-option { display: block; width: 100%; min-height: 32px; padding: 7px 9px; border: 0; border-radius: 7px; background: transparent; color: #5c4639; font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
    .v07-admin-catalog-category-option:hover, .v07-admin-catalog-category-option.is-active { background: #fff0e5; color: #a94f31; }
    .v07-admin-catalog-category-options-empty { padding: 9px; color: #a68b78; font-size: 10px; font-weight: 400; line-height: 1.5; }
    .v07-admin-catalog-form #v07AdminCatalogAliases[aria-invalid="true"] { border-color: #b8422a; background: #fff8f4; box-shadow: 0 0 0 3px rgba(184, 66, 42, .16); }
    .v07-admin-catalog-form #v07AdminCatalogAliases[aria-invalid="true"]:focus { outline: 2px solid #b8422a; outline-offset: 1px; }
    .v07-admin-catalog-featured-field > span { display: flex; align-items: center; gap: 6px; }
    .v07-admin-catalog-featured-field input[type="checkbox"] { width: auto; min-height: 0; accent-color: #b95735; }
    .v07-admin-catalog-featured-field small { color: #a68b78; font-size: 9px; font-weight: 400; line-height: 1.4; }
    .v07-admin-catalog-group { display: grid; gap: 8px; padding: 12px; border: 1px solid #eee2d5; border-radius: 13px; background: #fffaf3; }
    .v07-admin-catalog-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 2px 2px 5px; border-bottom: 1px solid #f1e6db; }
    .v07-admin-catalog-group-head strong { color: #4c3a2f; font-size: 14px; }
    .v07-admin-catalog-group-head span { color: #a68b78; font-size: 10px; }
    .v07-admin-catalog-featured-list, .v07-admin-catalog-group-list, .v07-admin-catalog-other-list { display: grid; gap: 7px; }
    .v07-admin-catalog-featured-label { color: #9b5338; font-size: 10px; font-weight: 800; }
    .v07-admin-catalog-other { border-top: 1px dashed #eadfd3; }
    .v07-admin-catalog-other summary { padding: 8px 2px 2px; color: #8e6d5b; cursor: pointer; font-size: 10px; font-weight: 800; }
    .v07-admin-catalog-dialog-note { margin: 14px 0 0; color: #9a8373; font-size: 10px; line-height: 1.5; }
    @media (max-width: 760px) { .v07-admin-catalog-row { grid-template-columns: 48px 1fr auto; } .v07-admin-catalog-row > .v07-admin-catalog-price, .v07-admin-catalog-row > .v07-admin-catalog-unit-price, .v07-admin-catalog-row > .v07-admin-status, .v07-admin-catalog-row > .v07-admin-catalog-actions { grid-column: 2 / -1; justify-self: start; } .v07-admin-catalog-image { width: 48px; height: 48px; } .v07-admin-catalog-actions { justify-content: flex-start; } .v07-admin-catalog-form-grid, .v07-admin-catalog-more-grid { grid-template-columns: 1fr; } .v07-admin-catalog-form-grid label.is-full { grid-column: auto; } .v07-admin-catalog-group-head { align-items: flex-start; flex-direction: column; gap: 4px; } .v07-admin-catalog-image-reuse-card { max-height: calc(100vh - 24px); padding: 16px; } .v07-admin-catalog-image-reuse-option { grid-template-columns: 52px minmax(0, 1fr) auto; } .v07-admin-catalog-image-reuse-thumb { width: 52px; height: 52px; } .v07-admin-catalog-image-reuse-foot { align-items: flex-start; flex-direction: column; } }
    .v07-admin-panel { display: flex; }
    .v07-admin-sidebar { position: sticky; top: 0; align-self: flex-start; width: 220px; min-width: 220px; min-height: 100%; padding: 34px 18px; border-right: 1px solid #eadfd3; background: #f8f1e8; }
    .v07-admin-sidebar-brand { display: grid; gap: 6px; padding: 0 14px 28px; color: #b65a38; }
    .v07-admin-sidebar-brand span { font-size: 11px; letter-spacing: .14em; font-weight: 800; }
    .v07-admin-sidebar-brand strong { color: #3c3029; font-family: Georgia, serif; font-size: 25px; }
    .v07-admin-sidebar-nav { display: grid; gap: 7px; }
    .v07-admin-sidebar-nav button { border: 0; border-radius: 10px; padding: 12px 14px; background: transparent; color: #6f6258; text-align: left; font: inherit; cursor: pointer; }
    .v07-admin-sidebar-nav button:hover, .v07-admin-sidebar-nav button.is-active { background: #fffaf4; color: #b55231; box-shadow: 0 4px 14px rgba(91, 58, 39, .08); font-weight: 700; }
    .v07-admin-shell { flex: 1; min-width: 0; }
    .v07-admin-section { scroll-margin-top: 20px; }
    @media (max-width: 760px) { .v07-admin-panel { display: block; } .v07-admin-sidebar { position: sticky; z-index: 3; top: 0; width: 100%; min-width: 0; min-height: 0; padding: 12px; border-right: 0; border-bottom: 1px solid #eadfd3; } .v07-admin-sidebar-brand { display: none; } .v07-admin-sidebar-nav { display: flex; overflow-x: auto; gap: 6px; } .v07-admin-sidebar-nav button { white-space: nowrap; padding: 9px 12px; } }

    body:has(.modal.open) .v07-permission-dock,
    body:has(.pricing-drawer:not([hidden])) .v07-permission-dock {
      display: none;
    }

    .v07-permission-dock strong { white-space: nowrap; }
    .v07-role-badge {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 3px 8px;
      border-radius: 999px;
      background: #f5e6d6;
      color: #8e4935;
      font-weight: 800;
    }
    .v07-permission-dock button,
    .v07-members-dialog button {
      min-height: 28px;
      padding: 5px 9px;
      border: 1px solid rgba(173, 79, 47, .22);
      border-radius: 8px;
      background: #fffdf9;
      color: #7d3e2d;
      font: inherit;
      font-weight: 700;
      cursor: pointer;
    }
    .v07-permission-dock button:hover,
    .v07-members-dialog button:hover { background: #fff7ec; }
    .v07-permission-dock .v07-logout { color: #8d6c5c; }
    .v07-login-entry { width: 100%; border-color: rgba(173, 79, 47, .34) !important; background: #fff5eb !important; color: #a34f32 !important; }
    .v07-guest-menu-note { margin: 0; color: #9b806e; font-size: 10px; line-height: 1.5; }

    .local-note[data-storage-mode="guest"] .local-dot {
      background: #c17a4c;
      box-shadow: 0 0 0 4px rgba(193, 122, 76, .14);
    }

    .v07-auth-gate {
      position: fixed;
      inset: 0;
      z-index: 9300;
      display: grid;
      place-items: center;
      padding: 20px;
      background: rgba(58, 39, 29, .38);
    }
    .v07-auth-card {
      width: min(420px, 100%);
      padding: 26px;
      border: 1px solid rgba(173, 79, 47, .18);
      border-radius: 18px;
      background: #fffdf9;
      box-shadow: 0 24px 80px rgba(61, 37, 25, .22);
    }
    .v07-auth-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
    .v07-auth-kicker { color: #b65a38; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
    .v07-auth-close { width: auto !important; min-width: 32px; margin: -4px -5px 0 0 !important; border: 0 !important; background: transparent !important; color: #9b806e; font-size: 22px; line-height: 1; }
    .v07-auth-close:hover { background: #fff3e8 !important; }
    .v07-auth-card h2 { margin: 0 0 8px; color: #4c3a2f; font-size: 22px; }
    .v07-auth-card p { margin: 0 0 18px; color: #8a7769; font-size: 12px; line-height: 1.65; }
    .v07-auth-card label { display: grid; gap: 7px; color: #6d5749; font-size: 12px; font-weight: 700; }
    .v07-auth-card input,
    .v07-members-dialog input,
    .v07-members-dialog select {
      width: 100%;
      box-sizing: border-box;
      min-height: 36px;
      padding: 8px 10px;
      border: 1px solid #dfd2c3;
      border-radius: 9px;
      background: #fff;
      color: #4c3a2f;
      font: inherit;
    }
    .v07-auth-card button { width: 100%; margin-top: 14px; min-height: 38px; }
    .v07-auth-card .v07-auth-guest { margin-top: 8px; border: 1px solid #dfd2c3; background: #fffdf9; color: #806858; }
    .v07-auth-card .v07-auth-guest:hover { background: #fff7ec; }
    .v07-auth-error { min-height: 18px; margin-top: 9px !important; color: #a44a3d !important; }
    .v07-auth-footnote { margin: 13px 0 0 !important; color: #a68b78 !important; font-size: 10px !important; }

    .v07-members-dialog {
      position: fixed;
      inset: 0;
      z-index: 9100;
      display: grid;
      place-items: center;
      padding: 20px;
      background: rgba(58, 39, 29, .3);
    }
    .v07-members-card {
      width: min(680px, 100%);
      max-height: min(720px, calc(100vh - 40px));
      overflow: auto;
      padding: 22px;
      border: 1px solid rgba(173, 79, 47, .18);
      border-radius: 18px;
      background: #fffdf9;
      box-shadow: 0 24px 80px rgba(61, 37, 25, .22);
    }
    .v07-members-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .v07-members-head h2 { margin: 0; color: #4c3a2f; font-size: 19px; }
    .v07-members-form { display: grid; grid-template-columns: .8fr 1.35fr 1fr .8fr auto; gap: 8px; margin: 16px 0; align-items: end; }
    .v07-members-form label { display: grid; gap: 6px; color: #6d5749; font-size: 11px; font-weight: 700; }
    .v07-members-list { display: grid; gap: 8px; }
    .v07-member-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid #eee2d5; border-radius: 10px; background: #fffaf3; }
    .v07-member-row strong { display: block; color: #4c3a2f; font-size: 12px; }
    .v07-member-row small { color: #8a7769; font-size: 11px; }
    .v07-member-token { margin: 0 0 10px; padding: 9px 10px; border-radius: 8px; background: #f8efd9; color: #76552b; font: 11px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; word-break: break-all; }
    .v07-member-empty, .v07-member-note { color: #8a7769; font-size: 11px; }

    body.v07-overlay-open { overflow: hidden; }

    .v07-admin-entry { background: #ad4f2f !important; border-color: #ad4f2f !important; color: #fffaf2 !important; }
    .v07-admin-entry:hover { background: #913f28 !important; }

    .v07-admin-panel {
      position: fixed;
      inset: 0;
      z-index: 9000;
      overflow-y: auto;
      background: #f5efe7;
      color: #4c3a2f;
      -webkit-overflow-scrolling: touch;
    }
    .v07-admin-shell { width: min(1380px, 100%); min-height: 100%; box-sizing: border-box; margin: 0 auto; padding: clamp(22px, 4vw, 52px) clamp(16px, 5vw, 64px) 72px; }
    .v07-admin-header { position: sticky; top: 0; z-index: 3; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin: calc(0px - clamp(22px, 4vw, 52px)) calc(0px - clamp(16px, 5vw, 64px)) 26px; padding: clamp(18px, 3vw, 30px) clamp(16px, 5vw, 64px) 20px; border-bottom: 1px solid rgba(173, 79, 47, .13); background: rgba(245, 239, 231, .92); backdrop-filter: blur(16px); }
    .v07-admin-heading { min-width: 0; }
    .v07-admin-eyebrow, .v07-admin-section-kicker { display: block; color: #ad4f2f; font-size: 10px; font-weight: 800; letter-spacing: .16em; line-height: 1.4; text-transform: uppercase; }
    .v07-admin-heading h1 { margin: 6px 0 8px; color: #4c3a2f; font-size: clamp(27px, 4vw, 42px); letter-spacing: -.04em; line-height: 1.05; }
    .v07-admin-heading p { max-width: 660px; margin: 0; color: #8a7769; font-size: 12px; line-height: 1.7; }
    .v07-admin-header-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
    .v07-admin-session-role { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 10px; border: 1px solid rgba(173, 79, 47, .16); border-radius: 999px; background: #fffaf3; color: #8e4935; font-size: 11px; font-weight: 800; white-space: nowrap; }
    .v07-admin-panel button, .v07-admin-password-dialog button { min-height: 32px; padding: 7px 12px; border: 1px solid rgba(173, 79, 47, .22); border-radius: 9px; background: #fffdf9; color: #7d3e2d; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
    .v07-admin-panel button:hover, .v07-admin-password-dialog button:hover { background: #fff7ec; }
    .v07-admin-panel button:focus-visible, .v07-admin-password-dialog button:focus-visible, .v07-admin-panel input:focus-visible, .v07-admin-panel select:focus-visible, .v07-admin-password-dialog input:focus-visible { outline: 3px solid rgba(173, 79, 47, .22); outline-offset: 2px; }
    .v07-admin-panel button:disabled, .v07-admin-password-dialog button:disabled, .v07-admin-panel select:disabled, .v07-admin-password-dialog input:disabled { opacity: .55; cursor: not-allowed; }
    .v07-admin-primary { border-color: #ad4f2f !important; background: #ad4f2f !important; color: #fffaf2 !important; }
    .v07-admin-primary:hover { background: #913f28 !important; }
    .v07-admin-danger { border-color: rgba(164, 74, 61, .28) !important; color: #a44a3d !important; }
    .v07-admin-danger:hover { background: #fff0ec !important; }
    .v07-admin-close { color: #8d6c5c !important; }

    .v07-admin-feedback { margin: 0 0 18px; padding: 11px 13px; border: 1px solid rgba(173, 79, 47, .18); border-radius: 11px; background: #fffaf0; color: #76552b; font-size: 12px; line-height: 1.5; }
    .v07-admin-feedback[data-state="success"] { border-color: rgba(81, 137, 91, .25); background: #f2f8ef; color: #47714d; }
    .v07-admin-feedback[data-state="error"] { border-color: rgba(164, 74, 61, .25); background: #fff0ec; color: #a44a3d; }
    .v07-admin-section { margin-top: 20px; padding: clamp(17px, 3vw, 28px); border: 1px solid rgba(173, 79, 47, .12); border-radius: 20px; background: rgba(255, 253, 249, .9); box-shadow: 0 10px 30px rgba(86, 53, 37, .055); }
    .v07-admin-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
    .v07-admin-section-heading h2 { margin: 5px 0 5px; color: #4c3a2f; font-size: 19px; letter-spacing: -.02em; }
    .v07-admin-section-heading p { max-width: 680px; margin: 0; color: #8a7769; font-size: 11px; line-height: 1.6; }
    .v07-admin-overview-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
    .v07-admin-overview-actions .v07-admin-section-state { margin: 0; }
    .v07-admin-overview-invite-jump { white-space: nowrap; }
    .v07-admin-section-heading-actions { align-items: center; }
    .v07-admin-section-state { min-height: 17px; margin: 0 0 12px; color: #9a8373; font-size: 11px; line-height: 1.5; }
    .v07-admin-catalog-price-reminder { display: flex; align-items: center; gap: 10px; margin: -1px 0 13px; padding: 9px 11px; border: 1px solid #efd2b4; border-radius: 11px; background: #fff8ee; color: #7d5a43; }
    .v07-admin-catalog-price-reminder[hidden] { display: none !important; }
    .v07-admin-catalog-price-reminder-icon { display: grid; width: 22px; height: 22px; flex: 0 0 22px; place-items: center; border-radius: 50%; background: #e8a36c; color: #fffaf4; font-size: 13px; font-weight: 900; }
    .v07-admin-catalog-price-reminder-copy { display: grid; min-width: 0; gap: 2px; flex: 1; }
    .v07-admin-catalog-price-reminder-copy strong { color: #704b37; font-size: 11px; }
    .v07-admin-catalog-price-reminder-copy span { color: #9a7761; font-size: 10px; line-height: 1.45; }
    .v07-admin-catalog-price-reminder-action { min-height: 29px !important; padding: 5px 9px !important; border-color: #d58a5d !important; background: #fffaf4 !important; color: #a65332 !important; white-space: nowrap; }
    .v07-admin-catalog-price-reminder-action:hover { background: #fff0e2 !important; }
    .v07-admin-attention { margin: 0 0 20px; padding: clamp(16px, 2.6vw, 24px); border: 1px solid #e7b48f; border-radius: 18px; background: linear-gradient(135deg, #fff9f1, #fff5eb); box-shadow: 0 10px 26px rgba(153, 89, 49, .07); }
    .v07-admin-attention[hidden] { display: none !important; }
    .v07-admin-attention-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
    .v07-admin-attention-head h2 { margin: 5px 0 5px; color: #57372a; font-size: 19px; letter-spacing: -.02em; }
    .v07-admin-attention-head p { margin: 0; color: #98725d; font-size: 11px; line-height: 1.6; }
    .v07-admin-attention-count { display: inline-grid; min-width: 42px; height: 42px; box-sizing: border-box; place-items: center; padding: 0 10px; border-radius: 999px; background: #ad4f2f; color: #fffaf2; font-size: 18px; font-weight: 900; line-height: 1; }
    .v07-admin-attention-list { display: grid; gap: 8px; }
    .v07-admin-attention-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-width: 0; padding: 10px 11px; border: 1px solid #efd8c3; border-radius: 11px; background: rgba(255, 253, 249, .86); }
    .v07-admin-attention-item[data-level="critical"] { border-color: #e2a096; background: #fff3f0; }
    .v07-admin-attention-item-icon { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: #e8a36c; color: #fffaf4; font-size: 13px; font-weight: 900; }
    .v07-admin-attention-item[data-level="critical"] .v07-admin-attention-item-icon { background: #c64d35; }
    .v07-admin-attention-item-copy { display: grid; min-width: 0; gap: 3px; }
    .v07-admin-attention-item-copy strong { overflow: hidden; color: #704b37; font-size: 11px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
    .v07-admin-attention-item-copy small { overflow: hidden; color: #9a7761; font-size: 10px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
    .v07-admin-attention-item-count { color: #6f3d2d; font-size: 16px; font-weight: 900; white-space: nowrap; }
    .v07-admin-attention-item-action { min-height: 29px !important; padding: 5px 9px !important; border-color: #d58a5d !important; background: #fffaf4 !important; color: #a65332 !important; white-space: nowrap; }
    .v07-admin-attention-item-action:hover { background: #fff0e2 !important; }
    .v07-admin-overview-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
    .v07-admin-metric { min-width: 0; min-height: 98px; box-sizing: border-box; padding: 14px; border: 1px solid #eee2d5; border-radius: 13px; background: #fffaf3; }
    .v07-admin-metric span { display: block; color: #9a8373; font-size: 10px; font-weight: 700; }
    .v07-admin-metric strong { display: block; overflow: hidden; margin: 9px 0 5px; color: #4c3a2f; font-size: clamp(18px, 2vw, 25px); line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
    .v07-admin-metric small { display: block; overflow: hidden; color: #aa9586; font-size: 10px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
    .v07-admin-metric-wide { grid-column: span 2; }
    .v07-admin-data-grid { margin-bottom: 14px; }

    .v07-admin-engagement { margin-top: 24px; padding-top: 23px; border-top: 1px solid #f0e6db; }
    .v07-admin-engagement-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; margin-bottom: 10px; }
    .v07-admin-engagement-head h3 { margin: 5px 0 6px; color: #4c3a2f; font-size: 21px; letter-spacing: -.025em; }
    .v07-admin-engagement-head p { max-width: 690px; margin: 0; color: #8a7769; font-size: 11px; line-height: 1.65; }
    .v07-admin-engagement-controls { display: grid; min-width: 180px; gap: 7px; justify-items: end; }
    .v07-admin-engagement-controls label { display: grid; min-width: 124px; gap: 5px; color: #8a7769; font-size: 10px; font-weight: 800; }
    .v07-admin-engagement-controls select { min-height: 34px; padding: 7px 9px; border: 1px solid #dfd2c3; border-radius: 8px; background: #fff; color: #4c3a2f; font: inherit; font-size: 11px; }
    .v07-admin-engagement-controls > span { color: #a68b78; font-size: 9px; line-height: 1.35; text-align: right; }
    .v07-admin-engagement-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-bottom: 12px; }
    .v07-admin-engagement-metric { min-width: 0; min-height: 91px; padding: 13px; border: 1px solid #eee2d5; border-radius: 12px; background: #fffaf3; }
    .v07-admin-engagement-metric.is-primary { border-color: #e7b48f; background: linear-gradient(145deg, #fff9f1, #fff6ee); }
    .v07-admin-engagement-metric > span { display: block; color: #9a8373; font-size: 10px; font-weight: 800; }
    .v07-admin-engagement-metric > strong { display: block; margin: 9px 0 4px; overflow: hidden; color: #4c3a2f; font-size: clamp(20px, 2.4vw, 29px); line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
    .v07-admin-engagement-metric > small { display: block; overflow: hidden; color: #aa9586; font-size: 9px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
    .v07-admin-engagement-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(290px, .85fr); gap: 12px; margin-bottom: 12px; }
    .v07-admin-engagement-card { min-width: 0; padding: 15px; border: 1px solid #eee2d5; border-radius: 14px; background: #fffdf9; }
    .v07-admin-engagement-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
    .v07-admin-engagement-card-kicker { display: block; color: #b95735; font-size: 9px; font-weight: 800; letter-spacing: .14em; line-height: 1.3; }
    .v07-admin-engagement-card h4 { margin: 4px 0 0; color: #4c3a2f; font-size: 16px; letter-spacing: -.02em; }
    .v07-admin-engagement-card-head > span { max-width: 46%; color: #a68b78; font-size: 9px; line-height: 1.4; text-align: right; }
    .v07-admin-engagement-chart-scroll { overflow-x: auto; padding-bottom: 3px; }
    .v07-admin-engagement-chart { display: flex; align-items: stretch; gap: 6px; min-width: 520px; height: 176px; padding: 7px 4px 0; border-bottom: 1px solid #eadfd3; background: repeating-linear-gradient(to bottom, transparent 0, transparent 42px, rgba(234, 223, 211, .55) 43px, transparent 44px); }
    .v07-admin-engagement-chart-empty { display: grid; width: 100%; place-items: center; color: #a68b78; font-size: 10px; }
    .v07-admin-engagement-chart-item { display: grid; min-width: 0; flex: 1 1 0; grid-template-rows: minmax(0, 1fr) 18px; align-items: end; gap: 4px; }
    .v07-admin-engagement-chart-bar-area { display: flex; height: 100%; align-items: flex-end; justify-content: center; }
    .v07-admin-engagement-chart-bar { display: block; width: min(18px, 72%); min-height: 3px; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #d06d47, #ad4f2f); box-shadow: 0 3px 8px rgba(173, 79, 47, .16); }
    .v07-admin-engagement-chart-label { min-height: 12px; overflow: hidden; color: #b09b8b; font-size: 8px; line-height: 1.4; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
    .v07-admin-engagement-funnel { display: grid; gap: 12px; }
    .v07-admin-engagement-funnel-row { display: grid; gap: 5px; }
    .v07-admin-engagement-funnel-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: #8a7769; font-size: 10px; }
    .v07-admin-engagement-funnel-meta strong { color: #4c3a2f; font-size: 13px; }
    .v07-admin-engagement-funnel-track { height: 8px; overflow: hidden; border-radius: 999px; background: #f1e8db; }
    .v07-admin-engagement-funnel-fill { display: block; height: 100%; min-width: 0; border-radius: inherit; background: #d8885f; }
    .v07-admin-engagement-funnel-row:first-child .v07-admin-engagement-funnel-fill { background: #b95735; }
    .v07-admin-engagement-funnel-row small { color: #aa9586; font-size: 9px; line-height: 1.35; }
    .v07-admin-engagement-attention-card { margin-bottom: 12px; }
    .v07-admin-engagement-attention-list { display: grid; gap: 7px; min-height: 35px; }
    .v07-admin-engagement-attention-empty { padding: 11px; border: 1px dashed #dfd2c3; border-radius: 9px; color: #9a8373; font-size: 10px; text-align: center; }
    .v07-admin-engagement-attention-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 11px; padding: 9px 10px; border: 1px solid #f0e6db; border-radius: 10px; background: #fffaf3; }
    .v07-admin-engagement-attention-copy { display: grid; min-width: 0; gap: 3px; }
    .v07-admin-engagement-attention-copy strong { overflow: hidden; color: #4c3a2f; font-size: 11px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
    .v07-admin-engagement-attention-copy small { overflow: hidden; color: #9a8373; font-size: 9px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
    .v07-admin-engagement-attention-reason { padding: 3px 7px; border-radius: 999px; background: #fff0e5; color: #a65332; font-size: 9px; font-weight: 800; white-space: nowrap; }
    .v07-admin-engagement-attention-item button { min-height: 29px; padding: 5px 9px; font-size: 10px; white-space: nowrap; }
    .v07-admin-engagement-view-accounts { margin-top: 10px; }
    .v07-admin-engagement-placeholder { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 15px; border: 1px dashed #d9c9ba; border-radius: 14px; background: #fbf7f1; }
    .v07-admin-engagement-placeholder h4 { margin: 4px 0 5px; color: #6d5749; font-size: 14px; }
    .v07-admin-engagement-placeholder p { max-width: 720px; margin: 0; color: #a68b78; font-size: 10px; line-height: 1.55; }
    .v07-admin-engagement-placeholder-badge { flex: 0 0 auto; padding: 5px 8px; border: 1px solid #e5d8cb; border-radius: 999px; color: #a68b78; font-size: 9px; font-weight: 800; white-space: nowrap; }

    .v07-admin-resource-wrap { overflow-x: auto; border: 1px solid #eee2d5; border-radius: 12px; background: #fffaf3; }
    .v07-admin-resource-table { width: 100%; border-collapse: collapse; min-width: 560px; table-layout: fixed; }
    .v07-admin-resource-table th, .v07-admin-resource-table td { padding: 10px 12px; border-bottom: 1px solid #f0e6db; color: #6d5749; font-size: 10px; line-height: 1.5; text-align: left; vertical-align: top; }
    .v07-admin-resource-table th { color: #9a8373; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
    .v07-admin-resource-table th:nth-child(1), .v07-admin-resource-table td:nth-child(1) { width: 37%; }
    .v07-admin-resource-table th:nth-child(2), .v07-admin-resource-table td:nth-child(2) { width: 18%; }
    .v07-admin-resource-table th:nth-child(3), .v07-admin-resource-table td:nth-child(3) { width: 18%; }
    .v07-admin-resource-table th:nth-child(4), .v07-admin-resource-table td:nth-child(4) { width: 27%; }
    .v07-admin-resource-table tr:last-child td { border-bottom: 0; }
    .v07-admin-resource-table td strong { display: block; color: #4c3a2f; font-size: 11px; }
    .v07-admin-resource-table td small { display: block; margin-top: 3px; color: #a68b78; font-size: 9px; }

    .v07-admin-filter-bar { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
    .v07-admin-filter-field { display: grid; min-width: 170px; gap: 5px; color: #8a7769; font-size: 10px; font-weight: 800; }
    .v07-admin-filter-field input, .v07-admin-filter-field select { width: 100%; box-sizing: border-box; min-height: 34px; padding: 7px 9px; border: 1px solid #dfd2c3; border-radius: 8px; background: #fff; color: #4c3a2f; font: inherit; font-size: 11px; }
    .v07-admin-catalog-category-wrap { display: grid; min-width: 300px; flex: 1 1 600px; gap: 5px; }
    .v07-admin-filter-label { color: #8a7769; font-size: 10px; font-weight: 800; }
    .v07-admin-catalog-category-filters { display: flex; flex-wrap: wrap; gap: 6px; }
    .v07-admin-catalog-category-button { min-height: 32px; padding: 6px 10px; border: 1px solid #ead9ca; border-radius: 999px; background: #fffaf4; color: #755746; font: inherit; font-size: 11px; cursor: pointer; white-space: nowrap; }
    .v07-admin-catalog-category-button:hover { border-color: #cc7858; color: #a94f31; }
    .v07-admin-catalog-category-button.is-active { border-color: #b95735; background: #b95735; color: #fffaf4; box-shadow: 0 4px 12px rgba(159, 75, 46, .16); }
    .v07-admin-catalog-featured-toggle { min-height: 32px; padding: 6px 11px; border: 1px solid #e7c8b8; border-radius: 999px; background: #fffaf4; color: #8f4e36; font: inherit; font-size: 11px; cursor: pointer; white-space: nowrap; }
    .v07-admin-catalog-featured-toggle:hover { border-color: #c96848; }
    .v07-admin-catalog-featured-toggle.is-active { border-color: #b95735; background: #b95735; color: #fffaf4; }
    .v07-admin-catalog-price-toggle { min-height: 32px; padding: 6px 11px; border: 1px solid #e7c8b8; border-radius: 999px; background: #fffaf4; color: #8f4e36; font: inherit; font-size: 11px; cursor: pointer; white-space: nowrap; }
    .v07-admin-catalog-price-toggle:hover { border-color: #c96848; }
    .v07-admin-catalog-price-toggle.is-active { border-color: #b95735; background: #b95735; color: #fffaf4; }
    .v07-admin-catalog-price-toggle:disabled { border-color: #eadfd3; background: #fbf8f3; color: #b8a79a; cursor: not-allowed; }
    .v07-admin-filter-bar > button { min-height: 34px; }
    .v07-admin-filter-state { min-height: 16px; margin-left: auto; padding-bottom: 8px; color: #9a8373; font-size: 10px; white-space: nowrap; }

    .v07-admin-accounts-list { display: grid; gap: 10px; }
    .v07-admin-account-row { display: grid; grid-template-columns: minmax(260px, 1.2fr) minmax(260px, .8fr); align-items: center; gap: 18px; padding: 14px; border: 1px solid #eee2d5; border-radius: 14px; background: #fffaf3; }
    .v07-admin-account-main { min-width: 0; }
    .v07-admin-account-details { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px 16px; color: #8a7769; font-size: 10px; line-height: 1.5; text-align: right; }
    .v07-admin-account-details span { white-space: nowrap; }
    .v07-admin-account-inspector { grid-column: 1 / -1; padding: 14px; border-top: 1px dashed #eadfd3; border-radius: 10px; background: #fffdf9; color: #6d5749; }
    .v07-admin-account-inspector[hidden] { display: none !important; }
    .v07-admin-account-inspector.is-loading { color: #9a8373; font-size: 11px; }
    .v07-admin-account-inspector.is-error { border: 1px solid #efd2b4; background: #fff8ee; color: #a44a3d; font-size: 11px; line-height: 1.5; }
    .v07-admin-account-inspector-head, .v07-admin-account-inspector-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
    .v07-admin-account-inspector-head { margin-bottom: 11px; }
    .v07-admin-account-inspector-head > div { display: grid; gap: 4px; }
    .v07-admin-account-inspector-head > div > strong { color: #4c3a2f; font-size: 13px; }
    .v07-admin-account-inspector-head > span, .v07-admin-account-inspector-section-head > span { color: #a68b78; font-size: 9px; text-align: right; }
    .v07-admin-account-inspector-grid, .v07-admin-account-inspector-data-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
    .v07-admin-account-inspector-metric { min-width: 0; padding: 9px 10px; border: 1px solid #f0e6db; border-radius: 10px; background: #fffaf3; }
    .v07-admin-account-inspector-metric > span { display: block; overflow: hidden; color: #a68b78; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
    .v07-admin-account-inspector-metric > strong { display: block; overflow: hidden; margin-top: 5px; color: #4c3a2f; font-size: 14px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
    .v07-admin-account-inspector-metric > small { display: block; overflow: hidden; margin-top: 4px; color: #9a8373; font-size: 9px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
    .v07-admin-account-inspector-section { margin-top: 13px; padding-top: 12px; border-top: 1px dashed #eadfd3; }
    .v07-admin-account-inspector-section-head { margin-bottom: 8px; }
    .v07-admin-account-inspector-section-head > strong { color: #6d5749; font-size: 11px; }
    .v07-admin-account-login-list, .v07-admin-account-module-list { display: grid; gap: 6px; }
    .v07-admin-account-login-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 9px; border: 1px solid #f0e6db; border-radius: 8px; background: #fffaf3; }
    .v07-admin-account-login-item strong { color: #6d5749; font-size: 10px; font-weight: 700; }
    .v07-admin-account-login-item span { color: #a65332; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; }
    .v07-admin-account-module-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 9px; border: 1px solid #f0e6db; border-radius: 8px; background: #fffaf3; }
    .v07-admin-account-module-copy { display: grid; min-width: 0; gap: 3px; }
    .v07-admin-account-module-copy strong { color: #6d5749; font-size: 10px; }
    .v07-admin-account-module-copy small { overflow: hidden; color: #9a8373; font-size: 9px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
    .v07-admin-account-module-row > span { flex: 0 0 auto; color: #a68b78; font-size: 9px; text-align: right; }
    .v07-admin-account-detail-empty { padding: 9px; border: 1px dashed #dfd2c3; border-radius: 8px; color: #9a8373; font-size: 10px; text-align: center; }
    .v07-admin-account-detail-note { margin: 10px 0 0; color: #a68b78; font-size: 9px; line-height: 1.5; }

    .v07-admin-members-list { display: grid; gap: 10px; }
    .v07-admin-member-row { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(390px, 1.25fr); align-items: center; gap: 18px; padding: 14px; border: 1px solid #eee2d5; border-radius: 14px; background: #fffaf3; transition: border-color .2s ease, opacity .2s ease; }
    .v07-admin-member-row.is-busy { border-color: rgba(173, 79, 47, .28); opacity: .72; }
    .v07-admin-member-main { min-width: 0; }
    .v07-admin-member-top { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
    .v07-admin-member-top strong { min-width: 0; overflow: hidden; color: #4c3a2f; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
    .v07-admin-member-meta { margin: 7px 0 0; overflow: hidden; color: #8a7769; font-size: 11px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
    .v07-admin-account-registration-source { margin: 6px 0 0; color: #8a7769; font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
    .v07-admin-account-registration-source:empty { display: none; }
    .v07-admin-xiaohongshu-link { color: #b95735; font-weight: 800; text-decoration: none; }
    .v07-admin-xiaohongshu-link:hover, .v07-admin-xiaohongshu-link:focus-visible { color: #8f3e28; text-decoration: underline; }
    .v07-admin-member-meta .v07-admin-xiaohongshu-link { white-space: nowrap; }
    .v07-admin-account-inspector-head .v07-admin-xiaohongshu-link { white-space: nowrap; }
    .v07-admin-member-hint { margin: 7px 0 0; color: #a68b78; font-size: 10px; line-height: 1.45; }
    .v07-admin-status { display: inline-flex; align-items: center; min-height: 21px; padding: 2px 8px; border-radius: 999px; background: #f1e8db; color: #8a7769; font-size: 10px; font-weight: 800; }
    .v07-admin-status[data-status="active"] { background: #e9f4e8; color: #4c7a50; }
    .v07-admin-status[data-status="suspended"], .v07-admin-status[data-status="disabled"], .v07-admin-status[data-status="inactive"] { background: #fff0df; color: #9c643c; }
    .v07-admin-status[data-status="removed"] { background: #f7e8e5; color: #a44a3d; }
    .v07-admin-member-controls { display: grid; grid-template-columns: minmax(132px, .7fr) minmax(0, 1.3fr); align-items: end; gap: 10px; }
    .v07-admin-role-control { display: grid; gap: 5px; color: #8a7769; font-size: 10px; font-weight: 800; }
    .v07-admin-role-control select, .v07-admin-password-dialog input { width: 100%; box-sizing: border-box; min-height: 34px; padding: 7px 9px; border: 1px solid #dfd2c3; border-radius: 8px; background: #fff; color: #4c3a2f; font: inherit; font-size: 11px; }
    .v07-admin-member-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
    .v07-admin-member-actions button { min-height: 30px; padding: 6px 9px; font-size: 10px; }
    .v07-admin-empty { padding: 18px 12px; border: 1px dashed #dfd2c3; border-radius: 10px; color: #9a8373; font-size: 11px; text-align: center; }

    .v07-admin-audit-wrap { overflow-x: auto; border: 1px solid #eee2d5; border-radius: 12px; background: #fffaf3; }
    .v07-admin-audit-table { width: 100%; border-collapse: collapse; min-width: 650px; table-layout: fixed; }
    .v07-admin-audit-table th, .v07-admin-audit-table td { padding: 11px 12px; border-bottom: 1px solid #f0e6db; color: #6d5749; font-size: 10px; line-height: 1.5; text-align: left; vertical-align: top; }
    .v07-admin-audit-table th { color: #9a8373; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
    .v07-admin-audit-table th:nth-child(1), .v07-admin-audit-table td:nth-child(1) { width: 17%; }
    .v07-admin-audit-table th:nth-child(2), .v07-admin-audit-table td:nth-child(2) { width: 18%; }
    .v07-admin-audit-table th:nth-child(3), .v07-admin-audit-table td:nth-child(3) { width: 25%; }
    .v07-admin-audit-table th:nth-child(4), .v07-admin-audit-table td:nth-child(4) { width: 25%; }
    .v07-admin-audit-table th:nth-child(5), .v07-admin-audit-table td:nth-child(5) { width: 15%; }
    .v07-admin-audit-table tr:last-child td { border-bottom: 0; }
    .v07-admin-audit-table td strong { display: block; color: #4c3a2f; font-size: 11px; }
    .v07-admin-audit-table td small { display: block; margin-top: 3px; color: #a68b78; font-size: 9px; }
    .v07-admin-audit-result { display: inline-flex; padding: 3px 7px; border-radius: 999px; background: #f1e8db; color: #8a7769; font-size: 9px; font-weight: 800; }
    .v07-admin-audit-result[data-outcome="success"], .v07-admin-audit-result[data-outcome="allowed"] { background: #e9f4e8; color: #4c7a50; }
    .v07-admin-audit-result[data-outcome="failure"], .v07-admin-audit-result[data-outcome="denied"] { background: #f7e8e5; color: #a44a3d; }

    .v07-admin-password-dialog { position: fixed; inset: 0; z-index: 9200; display: grid; place-items: center; padding: 20px; background: rgba(58, 39, 29, .34); }
    .v07-admin-password-card { width: min(430px, 100%); box-sizing: border-box; padding: 22px; border: 1px solid rgba(173, 79, 47, .18); border-radius: 18px; background: #fffdf9; box-shadow: 0 24px 80px rgba(61, 37, 25, .22); }
    .v07-admin-password-card h2 { margin: 5px 0 0; color: #4c3a2f; font-size: 19px; }
    .v07-admin-password-hint { margin: 16px 0 8px; color: #8a7769; font-size: 11px; line-height: 1.65; }
    .v07-admin-password-member { margin: 0 0 15px; padding: 9px 10px; border-radius: 8px; background: #fff5e9; color: #76552b; font-size: 11px; font-weight: 800; }
    .v07-admin-password-form { display: grid; gap: 11px; }
    .v07-admin-password-form label { display: grid; gap: 6px; color: #6d5749; font-size: 11px; font-weight: 800; }
    .v07-admin-form-error { min-height: 16px; margin: 0; color: #a44a3d; font-size: 11px; line-height: 1.5; }
    .v07-admin-catalog-form .v07-admin-form-error { display: none; }
    .v07-admin-catalog-form .v07-admin-form-error:not(:empty) { display: flex; align-items: flex-start; gap: 10px; min-height: 0; margin: 15px 0 0; padding: 13px 15px; border: 2px solid #c64d35; border-left-width: 6px; border-radius: 10px; background: #fff0eb; box-shadow: 0 4px 14px rgba(164, 74, 61, .14); color: #982c1f; font-size: 14px; font-weight: 800; line-height: 1.6; white-space: pre-line; }
    .v07-admin-catalog-form .v07-admin-form-error:not(:empty)::before { flex: 0 0 auto; color: #b53b27; content: "⚠"; font-size: 18px; line-height: 1.4; }
    .v07-admin-password-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 3px; }

    @media (max-width: 700px) {
      .v07-permission-dock { right: 10px; bottom: 10px; left: 10px; justify-content: flex-start; overflow-x: auto; }
      .v07-members-form { grid-template-columns: 1fr; }
      .v07-member-row { align-items: flex-start; flex-direction: column; }
      .v07-admin-header { align-items: stretch; flex-direction: column; gap: 14px; }
      .v07-admin-header-actions { justify-content: flex-start; }
      .v07-admin-section-heading, .v07-admin-section-heading-actions { align-items: stretch; flex-direction: column; gap: 12px; }
      .v07-admin-section-heading-actions > button { align-self: flex-start; }
      .v07-admin-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .v07-admin-metric-wide { grid-column: span 2; }
      .v07-admin-attention-item { grid-template-columns: 28px minmax(0, 1fr) auto; }
      .v07-admin-attention-item-action { grid-column: 2 / -1; justify-self: start; }
      .v07-admin-catalog-category-wrap { min-width: 0; flex-basis: 100%; }
      .v07-admin-catalog-price-reminder { align-items: flex-start; flex-wrap: wrap; }
      .v07-admin-catalog-price-reminder-action { margin-left: 32px; }
      .v07-admin-filter-state { margin-left: 0; width: 100%; padding-bottom: 0; }
      .v07-admin-account-row { grid-template-columns: 1fr; gap: 13px; }
      .v07-admin-account-details { justify-content: flex-start; text-align: left; }
      .v07-admin-account-inspector-grid, .v07-admin-account-inspector-data-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .v07-admin-member-row { grid-template-columns: 1fr; gap: 13px; }
      .v07-admin-member-controls { grid-template-columns: 1fr; align-items: stretch; }
      .v07-admin-member-actions { justify-content: flex-start; }
      .v07-admin-audit-wrap { margin-right: -2px; margin-left: -2px; border-radius: 9px; }
      .v07-admin-audit-table { min-width: 0; }
      .v07-admin-audit-table thead { display: none; }
      .v07-admin-audit-table, .v07-admin-audit-table tbody, .v07-admin-audit-table tr, .v07-admin-audit-table td { display: block; width: auto !important; }
      .v07-admin-audit-table tr { padding: 11px 12px; border-bottom: 1px solid #f0e6db; }
      .v07-admin-audit-table tr:last-child { border-bottom: 0; }
      .v07-admin-audit-table td { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; padding: 4px 0; border: 0; }
      .v07-admin-audit-table td::before { color: #a68b78; content: attr(data-label); font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
    }

    @media (max-width: 420px) {
      .v07-admin-shell { padding-right: 12px; padding-left: 12px; }
      .v07-admin-header { margin-right: -12px; margin-left: -12px; padding-right: 12px; padding-left: 12px; }
      .v07-admin-overview-grid { grid-template-columns: 1fr; }
      .v07-admin-metric-wide { grid-column: span 1; }
      .v07-admin-attention-head { align-items: flex-start; }
      .v07-admin-attention-item { grid-template-columns: 28px minmax(0, 1fr) auto; }
      .v07-admin-attention-item-copy small { white-space: normal; }
      .v07-admin-filter-field { min-width: 100%; }
      .v07-admin-header-actions button { flex: 1 1 auto; }
      .v07-admin-catalog-price-reminder-action { flex: 1 1 auto; margin-left: 0; }
      .v07-admin-password-actions { justify-content: stretch; }
      .v07-admin-password-actions button { flex: 1; }
      .v07-admin-account-inspector { padding: 12px; }
      .v07-admin-account-inspector-grid, .v07-admin-account-inspector-data-grid { grid-template-columns: 1fr; }
      .v07-admin-account-inspector-head, .v07-admin-account-inspector-section-head, .v07-admin-account-module-row { align-items: flex-start; flex-direction: column; gap: 5px; }
      .v07-admin-account-inspector-head > span, .v07-admin-account-inspector-section-head > span, .v07-admin-account-module-row > span { text-align: left; }
    }

.v07-own-password-dialog {
  width: min(500px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  box-sizing: border-box;
  padding: 0;
  overflow: auto;
  border: 1px solid rgba(173, 79, 47, .18);
  border-radius: 24px;
  color: #40382e;
  background: #fffdf9;
  box-shadow: 0 28px 90px rgba(61, 37, 25, .24), 0 4px 12px rgba(61, 37, 25, .08);
}
.v07-own-password-dialog::backdrop { background: rgba(48, 36, 29, .42); backdrop-filter: blur(4px); }
.v07-own-password-form { gap: 0; padding: 28px; }
.v07-own-password-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.v07-own-password-heading { min-width: 0; }
.v07-own-password-kicker { display: block; color: #b95735; font-size: 10px; font-weight: 850; letter-spacing: .16em; line-height: 1.4; }
.v07-own-password-heading h2 { margin: 7px 0 8px; color: #4c3a2f; font-family: Georgia, "Times New Roman", serif; font-size: clamp(24px, 4vw, 30px); letter-spacing: -.035em; line-height: 1.12; }
.v07-own-password-heading p { max-width: 390px; margin: 0; color: #8a7769; font-size: 12px; line-height: 1.65; }
.v07-own-password-close {
  display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center;
  margin: -4px -4px 0 0; padding: 0; border: 1px solid #eadfd3; border-radius: 50%;
  color: #8a7769; background: #fffaf3; cursor: pointer; font-size: 23px; font-weight: 400; line-height: 1;
}
.v07-own-password-close:hover { border-color: #d89a7c; color: #9b4b34; background: #fff3e8; }
.v07-own-password-close:focus-visible { outline: 3px solid rgba(173, 79, 47, .22); outline-offset: 2px; }
.v07-own-password-note {
  display: flex; align-items: center; gap: 11px; margin: 22px 0 21px; padding: 12px 13px;
  border: 1px solid #f0d9c4; border-radius: 14px; background: #fff6ec;
}
.v07-own-password-note-icon { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border-radius: 10px; color: #9b4b34; background: #f7dfcc; font-size: 12px; font-weight: 850; }
.v07-own-password-note div { display: grid; min-width: 0; gap: 3px; }
.v07-own-password-note strong { color: #704735; font-size: 12px; line-height: 1.3; }
.v07-own-password-note small { color: #9a7560; font-size: 10px; line-height: 1.45; }
.v07-own-password-fields { display: grid; gap: 14px; }
.v07-own-password-form label { display: grid; gap: 7px; color: #6d5749; font-size: 12px; font-weight: 800; line-height: 1.35; }
.v07-own-password-form label > span { display: block; }
.v07-own-password-dialog input {
  width: 100%; min-height: 46px; box-sizing: border-box; padding: 11px 13px; border: 1px solid #dfd2c3;
  border-radius: 12px; color: #4c3a2f; background: #fff; font: inherit; font-size: 14px; line-height: 1.3;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.v07-own-password-dialog input::placeholder { color: #b4a59a; }
.v07-own-password-dialog input:hover { border-color: #cdb6a5; }
.v07-own-password-dialog input:focus { outline: none; border-color: #b95735; background: #fffdfb; box-shadow: 0 0 0 4px rgba(185, 87, 53, .13); }
.v07-own-password-error { display: none; min-height: 0; margin: 16px 0 0; padding: 10px 12px; border: 1px solid #efc4b8; border-radius: 11px; background: #fff0ec; color: #a44a3d; font-size: 11px; line-height: 1.5; white-space: pre-line; }
.v07-own-password-error:not(:empty) { display: block; }
.v07-own-password-actions { align-items: center; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid #f0e6db; }
.v07-own-password-actions button { min-height: 44px; padding: 10px 18px; border-radius: 11px; font-size: 13px; font-weight: 800; }
.v07-own-password-secondary { border: 1px solid #dfd2c3; color: #765f50; background: #fffaf3; cursor: pointer; }
.v07-own-password-secondary:hover { border-color: #cdb6a5; background: #fff4e9; }
.v07-own-password-submit { min-width: 132px; }
@media (max-width: 560px) {
  .v07-own-password-dialog { width: min(500px, calc(100vw - 20px)); max-height: calc(100dvh - 20px); border-radius: 20px; }
  .v07-own-password-form { padding: 22px 18px 18px; }
  .v07-own-password-note { margin-top: 18px; }
  .v07-own-password-actions { align-items: stretch; }
  .v07-own-password-actions button { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .v07-own-password-dialog input { transition: none; }
}

/* Account entry belongs to the top toolbar, with an on-demand dropdown. */
.topbar .top-actions { flex-shrink: 0; }
.topbar .search-box { min-width: 0; flex-shrink: 1; }
.v07-permission-dock {
  position: relative; inset: auto; z-index: 30; display: block;
  flex: 0 0 auto; max-width: none; padding: 0; border: 0;
  background: transparent; box-shadow: none; backdrop-filter: none;
  overflow: visible; font-size: 13px;
}
.v07-account-trigger {
  display: flex; align-items: center; gap: 8px; min-height: 40px;
  padding: 4px 9px; border: 1px solid var(--line, #e6dace);
  border-radius: 12px; background: var(--paper, #fffdf9); cursor: pointer;
  list-style: none; font-weight: 700;
}
.v07-account-trigger::-webkit-details-marker { display: none; }
.v07-account-trigger:focus-visible { outline: 2px solid #ad4f2f; outline-offset: 3px; }
.v07-account-avatar {
  display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 50%; background: #f5e6d6; color: #8e4935; flex-shrink: 0;
}
#v07AccountName { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v07-account-menu {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: min(260px, calc(100vw - 24px)); padding: 12px;
  border: 1px solid #e6dace; border-radius: 16px; background: #fffdf9;
  box-shadow: 0 12px 32px rgba(86, 53, 37, .16);
  display: grid; gap: 7px;
}
.v07-permission-dock:not([open]) .v07-account-menu { display: none; }
.v07-account-identity { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 5px 3px 12px; border-bottom: 1px solid #eee4da; }
.v07-account-identity #v07MemberName { white-space: normal; overflow-wrap: anywhere; }
.v07-account-menu button { width: 100%; min-height: 40px; text-align: left; }
@media (max-width: 1200px) {
  #v07AccountName, .v07-account-chevron { display: none; }
  .v07-account-trigger { padding: 5px; }
}

/* Media inventory is a separate admin page: storage numbers stay distinct
   from catalog maintenance and from the ordinary workspace data summary. */
.v07-admin-media-top-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.v07-admin-media-quota {
  margin: 14px 0 12px;
  padding: 15px 16px 13px;
  border: 1px solid #eadfd3;
  border-radius: 14px;
  background: #fffaf3;
}
.v07-admin-media-quota.is-warning { border-color: #e7b48f; background: #fff8ee; }
.v07-admin-media-quota.is-danger { border-color: #c64d35; background: #fff0eb; }
.v07-admin-media-quota-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.v07-admin-media-quota-head > div { display: grid; gap: 4px; }
.v07-admin-media-quota-head strong { color: #4c3a2f; font-size: 13px; }
.v07-admin-media-quota-head > strong { font-size: 15px; white-space: nowrap; }
.v07-admin-media-kicker { color: #b65a38; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.v07-admin-media-quota-track { height: 9px; margin: 12px 0 8px; overflow: hidden; border-radius: 999px; background: #f0e5d9; }
.v07-admin-media-quota-track > span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #b95735, #d8895d); transition: width .25s ease; }
.v07-admin-media-quota.is-warning .v07-admin-media-quota-track > span { background: #d38b4e; }
.v07-admin-media-quota.is-danger .v07-admin-media-quota-track > span { background: #bd4b32; }
.v07-admin-media-quota p { margin: 0; color: #9a8373; font-size: 10px; line-height: 1.45; }
.v07-admin-media-note { display: flex; align-items: flex-start; gap: 9px; margin: 12px 0 14px; padding: 10px 12px; border: 1px dashed #dfd2c3; border-radius: 11px; background: #fffdf9; }
.v07-admin-media-note > span { display: grid; width: 20px; height: 20px; flex: 0 0 20px; place-items: center; border-radius: 50%; background: #f5e6d6; color: #a65332; font-size: 11px; font-weight: 900; }
.v07-admin-media-note p { margin: 1px 0 0; color: #8a7769; font-size: 10px; line-height: 1.55; }
.v07-admin-media-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.v07-admin-media-panel { min-width: 0; padding: 15px; border: 1px solid #eee2d5; border-radius: 15px; background: #fffaf3; }
.v07-admin-media-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.v07-admin-media-panel-head h3 { margin: 5px 0 0; color: #4c3a2f; font-size: 15px; }
.v07-admin-media-panel-meta { max-width: 52%; color: #a68b78; font-size: 10px; line-height: 1.5; text-align: right; }
.v07-admin-media-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-bottom: 14px; }
.v07-admin-media-stat-grid article { min-width: 0; padding: 9px 10px; border: 1px solid #f0e6db; border-radius: 10px; background: #fffdf9; }
.v07-admin-media-stat-grid article span { display: block; overflow: hidden; color: #a68b78; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.v07-admin-media-stat-grid article strong { display: block; overflow: hidden; margin-top: 5px; color: #4c3a2f; font-size: 16px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.v07-admin-media-subgrid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 12px; align-items: start; }
.v07-admin-media-subhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 7px; }
.v07-admin-media-subhead strong { color: #6d5749; font-size: 11px; }
.v07-admin-media-subhead span { color: #b09b8b; font-size: 9px; text-align: right; }
.v07-admin-media-table-wrap { overflow: hidden; border: 1px solid #eee2d5; border-radius: 10px; background: #fffdf9; }
.v07-admin-media-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.v07-admin-media-table th, .v07-admin-media-table td { padding: 8px 9px; border-bottom: 1px solid #f0e6db; color: #6d5749; font-size: 10px; line-height: 1.35; text-align: left; vertical-align: top; }
.v07-admin-media-table th { color: #a68b78; font-size: 8px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.v07-admin-media-table tr:last-child td { border-bottom: 0; }
.v07-admin-media-table td strong { display: block; color: #4c3a2f; font-size: 10px; }
.v07-admin-media-table td small { display: block; margin-top: 2px; color: #a68b78; font-size: 8px; }
.v07-admin-media-missing-list { display: flex; flex-wrap: wrap; gap: 5px; min-height: 36px; align-content: flex-start; }
.v07-admin-media-missing-item, .v07-admin-media-missing-empty { display: inline-flex; align-items: center; min-height: 25px; padding: 4px 7px; border: 1px solid #efd2b4; border-radius: 7px; background: #fff8ee; color: #8c5a3d; font-size: 9px; line-height: 1.35; }
.v07-admin-media-missing-empty { width: 100%; box-sizing: border-box; justify-content: center; border-style: dashed; color: #668067; }
.v07-admin-media-missing-empty.is-good { border-color: #cfe2cb; background: #f3f9f1; }
.v07-admin-media-largest-head { margin-top: 15px; padding-top: 13px; border-top: 1px dashed #eadfd3; }
.v07-admin-media-file-list { display: grid; gap: 7px; }
.v07-admin-media-file-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-width: 0; padding: 7px; border: 1px solid #f0e6db; border-radius: 10px; background: #fffdf9; }
.v07-admin-media-file-row.is-missing { border-color: #efd2b4; background: #fff8ee; }
.v07-admin-media-file-row.is-uploaded { border-left: 3px solid #d4885c; }
.v07-admin-media-file-thumb { display: grid; width: 48px; height: 48px; place-items: center; overflow: hidden; border: 1px solid #eadfd3; border-radius: 8px; background: #f4ece3; color: #a68b78; font-size: 8px; line-height: 1.25; text-align: center; }
.v07-admin-media-file-thumb img { width: 100%; height: 100%; object-fit: contain; }
.v07-admin-media-file-thumb.is-broken { color: #a44a3d; }
.v07-admin-media-file-copy { min-width: 0; }
.v07-admin-media-file-copy strong { display: block; overflow: hidden; color: #4c3a2f; font-size: 10px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.v07-admin-media-file-copy small { display: block; overflow: hidden; margin-top: 3px; color: #9a8373; font-size: 8px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.v07-admin-media-file-size { color: #6d5749; font-size: 10px; font-weight: 800; white-space: nowrap; }
.v07-admin-media-file-empty { padding: 14px 10px; border: 1px dashed #dfd2c3; border-radius: 9px; color: #9a8373; font-size: 10px; text-align: center; }
.v07-admin-media-storage-alert { min-height: 72px; box-sizing: border-box; padding: 10px; border: 1px dashed #cfe2cb; border-radius: 10px; background: #f3f9f1; color: #668067; font-size: 10px; line-height: 1.55; }
.v07-admin-media-storage-alert[data-state="warning"] { border-color: #efd2b4; background: #fff8ee; color: #8c5a3d; }
@media (max-width: 980px) {
  .v07-admin-media-columns { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .v07-admin-media-top-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v07-admin-media-subgrid { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .v07-admin-media-top-grid { grid-template-columns: 1fr; }
  .v07-admin-media-quota-head { align-items: flex-start; flex-direction: column; gap: 8px; }
  .v07-admin-media-quota-head > strong { white-space: normal; }
  .v07-admin-media-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v07-admin-media-panel { padding: 12px; }
  .v07-admin-media-file-row { grid-template-columns: 42px minmax(0, 1fr); }
  .v07-admin-media-file-thumb { width: 42px; height: 42px; }
  .v07-admin-media-file-size { grid-column: 2; font-size: 9px; }
}

/* Mobile admin center: keep the desktop console intact, but give narrow
   screens a compact shell, grouped navigation, and task-sized cards. */
.v07-admin-mobile-chrome { display: none; }
.v07-admin-account-secondary-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.v07-admin-account-more { display: none; }

@media (max-width: 760px) {
  .v07-admin-panel {
    display: block;
    min-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .v07-admin-mobile-chrome {
    position: sticky;
    top: 0;
    z-index: 8;
    display: block;
    border-bottom: 1px solid rgba(173, 79, 47, .15);
    background: rgba(245, 239, 231, .96);
    box-shadow: 0 5px 16px rgba(86, 53, 37, .07);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }

  .v07-admin-mobile-toolbar {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto 42px;
    align-items: center;
    gap: 7px;
    min-height: 56px;
    box-sizing: border-box;
    padding: max(6px, env(safe-area-inset-top)) 10px 6px;
  }

  .v07-admin-mobile-title { display: grid; min-width: 0; gap: 2px; }
  .v07-admin-mobile-title strong { overflow: hidden; color: #4c3a2f; font-size: 16px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
  .v07-admin-mobile-title span { overflow: hidden; color: #9a8373; font-size: 10px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
  .v07-admin-mobile-role { max-width: 66px; overflow: hidden; padding: 4px 8px; border: 1px solid rgba(173, 79, 47, .16); border-radius: 999px; background: #fffaf3; color: #8e4935; font-size: 10px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
  .v07-admin-mobile-toolbar button { display: grid; width: 42px; height: 42px; place-items: center; box-sizing: border-box; padding: 0; border: 1px solid #ead9ca; border-radius: 12px; background: #fffdf9; color: #8d513e; font-size: 24px; line-height: 1; }
  .v07-admin-mobile-toolbar button:hover { background: #fff5eb; }
  .v07-admin-mobile-refresh { font-size: 22px !important; }

  .v07-admin-mobile-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; padding: 0 10px 7px; }
  .v07-admin-mobile-nav button { min-width: 0; min-height: 40px; padding: 7px 5px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #806e62; font-size: 12px; font-weight: 800; white-space: nowrap; }
  .v07-admin-mobile-nav button[aria-current="page"] { border-color: #e7c8b8; background: #fffaf4; color: #ad4f2f; box-shadow: 0 3px 9px rgba(91, 58, 39, .08); }
  .v07-admin-mobile-nav button:focus-visible, .v07-admin-mobile-subnav button:focus-visible { outline: 3px solid rgba(173, 79, 47, .22); outline-offset: 1px; }

  .v07-admin-mobile-subnav { padding: 0 10px; }
  .v07-admin-mobile-subnav > div:not([hidden]) { display: flex; gap: 6px; padding: 0 0 9px; overflow-x: auto; scrollbar-width: none; }
  .v07-admin-mobile-subnav > div::-webkit-scrollbar { display: none; }
  .v07-admin-mobile-subnav button { flex: 0 0 auto; min-height: 32px; padding: 6px 10px; border: 1px solid #ead9ca; border-radius: 999px; background: #fffaf4; color: #806e62; font-size: 11px; font-weight: 800; white-space: nowrap; }
  .v07-admin-mobile-subnav button[aria-current="page"] { border-color: #b95735; background: #b95735; color: #fffaf4; }
  .v07-admin-mobile-subnav button[data-admin-mobile-invite-jump] { border-color: #e5b99f; background: #fff3e9; color: #a64b2d; }

  .v07-admin-sidebar { display: none !important; }
  .v07-admin-shell { width: 100%; min-height: 0; box-sizing: border-box; padding: 0 12px calc(96px + env(safe-area-inset-bottom)); }
  .v07-admin-header { display: none; }
  .v07-admin-feedback { margin: 12px 0; padding: 11px 12px; border-radius: 12px; font-size: 13px; line-height: 1.5; }
  .v07-admin-section { margin: 12px 0; padding: 15px; border-radius: 18px; box-shadow: 0 6px 18px rgba(86, 53, 37, .045); }
  .v07-admin-section-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 9px; margin-bottom: 12px; }
  .v07-admin-section-heading h2 { margin: 4px 0 0; font-size: 21px; line-height: 1.15; }
  .v07-admin-section-heading p { display: -webkit-box; max-width: none; margin-top: 7px; overflow: hidden; font-size: 12px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .v07-admin-section-heading > button { align-self: start; min-height: 40px; padding: 8px 10px; white-space: nowrap; }
  .v07-admin-section-heading > .v07-admin-header-actions { grid-column: 1 / -1; justify-content: flex-start; gap: 6px; }
  .v07-admin-section-heading > .v07-admin-header-actions button { min-height: 40px; }
  .v07-admin-overview-invite-jump { display: none; }
  .v07-admin-section-state { min-height: 18px; margin-bottom: 10px; font-size: 12px; }

  .v07-admin-attention { margin-bottom: 14px; padding: 14px; border-radius: 17px; }
  .v07-admin-attention-head { gap: 10px; margin-bottom: 11px; }
  .v07-admin-attention-head h2 { font-size: 19px; }
  .v07-admin-attention-head p { font-size: 11px; line-height: 1.45; }
  .v07-admin-attention-count { min-width: 38px; height: 38px; font-size: 16px; }
  .v07-admin-attention-item { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; padding: 9px; }
  .v07-admin-attention-item-icon { width: 24px; height: 24px; }
  .v07-admin-attention-item-copy strong { font-size: 12px; }
  .v07-admin-attention-item-copy small { display: -webkit-box; white-space: normal; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .v07-admin-attention-item-action { grid-column: 2 / -1; justify-self: start; min-height: 38px !important; margin-top: 1px; font-size: 12px !important; }

  .v07-admin-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .v07-admin-metric { min-height: 82px; padding: 11px; border-radius: 13px; }
  .v07-admin-metric span { font-size: 11px; }
  .v07-admin-metric strong { margin: 7px 0 4px; font-size: 21px; }
  .v07-admin-metric small { font-size: 11px; line-height: 1.35; }
  .v07-admin-metric-wide { grid-column: span 2; }
  #v07AdminWorkspaceName { font-size: 17px; }

  #v07AdminAccountsSection .v07-admin-filter-bar,
  #v07AdminAuditSection .v07-admin-filter-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; }
  #v07AdminAccountsSection .v07-admin-filter-field,
  #v07AdminAuditSection .v07-admin-filter-field { min-width: 0; width: auto; }
  #v07AdminAccountsSection .v07-admin-filter-field:first-child,
  #v07AdminAuditSection .v07-admin-filter-field:first-child { grid-column: 1 / -1; }
  #v07AdminAccountsSection .v07-admin-filter-field input,
  #v07AdminAccountsSection .v07-admin-filter-field select,
  #v07AdminAuditSection .v07-admin-filter-field input,
  #v07AdminAuditSection .v07-admin-filter-field select,
  #v07AdminAccountsSection .v07-admin-filter-bar > button,
  #v07AdminAuditSection .v07-admin-filter-bar > button { min-height: 42px; font-size: 12px; }
  #v07AdminAccountsSection .v07-admin-filter-state,
  #v07AdminAuditSection .v07-admin-filter-state { grid-column: 1 / -1; width: auto; padding: 0; }

  .v07-admin-account-row { gap: 10px; padding: 13px; border-radius: 16px; }
  .v07-admin-member-meta { margin-top: 6px; font-size: 12px; line-height: 1.45; white-space: normal; }
  .v07-admin-member-hint { display: none; }
  .v07-admin-account-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: initial; gap: 6px 8px; font-size: 11px; line-height: 1.35; text-align: left; }
  .v07-admin-account-details span { min-width: 0; overflow: hidden; white-space: normal; text-overflow: ellipsis; }
  .v07-admin-member-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; width: 100%; }
  .v07-admin-member-actions button { width: 100%; min-height: 42px; padding: 8px 10px; font-size: 12px; }
  .v07-admin-account-overview-toggle { grid-column: 1; }
  .v07-admin-account-more { display: inline-flex; grid-column: 2; align-items: center; justify-content: center; min-width: 82px; }
  .v07-admin-account-more::after { margin-left: 5px; content: "⌄"; font-size: 14px; }
  .v07-admin-account-more[aria-expanded="true"]::after { content: "⌃"; }
  .v07-admin-account-secondary-actions { display: none; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .v07-admin-account-row.is-actions-open .v07-admin-account-secondary-actions { display: grid; }
  .v07-admin-account-row.is-actions-open .v07-admin-account-more { border-color: #b95735; background: #fff0e5; color: #a94f31; }
  .v07-admin-account-inspector { padding: 12px; border-radius: 13px; }
  .v07-admin-account-inspector-grid, .v07-admin-account-inspector-data-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v07-admin-account-inspector-metric { padding: 8px 9px; }
  .v07-admin-account-inspector-metric > span, .v07-admin-account-inspector-metric > small { font-size: 10px; }
  .v07-admin-account-inspector-metric > strong { font-size: 15px; }

  .v07-admin-member-row { gap: 10px; padding: 13px; border-radius: 16px; }
  .v07-admin-member-controls { gap: 9px; }
  .v07-admin-role-control { font-size: 11px; }
  .v07-admin-role-control select { min-height: 42px; font-size: 12px; }
  .v07-admin-member-row .v07-admin-member-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v07-admin-member-actions button { min-height: 42px; }

  .v07-admin-catalog-row { border-radius: 14px; }
  .v07-admin-catalog-row .v07-admin-catalog-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 7px; }
  .v07-admin-catalog-row .v07-admin-catalog-actions button { min-height: 40px; width: 100%; }
  .v07-admin-catalog-price-reminder { gap: 8px; padding: 10px; }
  .v07-admin-catalog-price-reminder-action { min-height: 38px !important; margin-left: 30px; }

  .v07-admin-media-top-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v07-admin-media-columns { gap: 10px; }
  .v07-admin-media-panel { padding: 13px; border-radius: 14px; }
  .v07-admin-media-panel-head { flex-direction: column; gap: 5px; }
  .v07-admin-media-panel-meta { max-width: none; text-align: left; }
  .v07-admin-media-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v07-admin-media-quota { padding: 13px; }

  .v07-admin-audit-wrap { margin-right: -1px; margin-left: -1px; }
  .v07-admin-audit-table td { grid-template-columns: 64px minmax(0, 1fr); font-size: 11px; }
  .v07-admin-audit-table td strong { font-size: 12px; }

  .v07-members-dialog, .v07-admin-password-dialog, .v07-admin-catalog-dialog, .v07-admin-catalog-image-reuse-dialog { align-items: end; padding: 0; }
  .v07-members-card, .v07-admin-password-card, .v07-admin-catalog-form, .v07-admin-catalog-image-reuse-card { width: 100%; max-height: 92dvh; box-sizing: border-box; border-radius: 20px 20px 0 0; padding: 18px; }
  .v07-admin-password-actions { justify-content: stretch; }
  .v07-admin-password-actions button { flex: 1; min-height: 42px; }
}

@media (max-width: 900px) {
  .v07-admin-engagement-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .v07-admin-engagement { margin-top: 20px; padding-top: 19px; }
  .v07-admin-engagement-head { align-items: stretch; flex-direction: column; gap: 12px; }
  .v07-admin-engagement-head h3 { font-size: 19px; }
  .v07-admin-engagement-controls { min-width: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; justify-items: stretch; }
  .v07-admin-engagement-controls label { min-width: 0; }
  .v07-admin-engagement-controls > span { align-self: end; text-align: left; }
  .v07-admin-engagement-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .v07-admin-engagement-metric { min-height: 86px; padding: 11px; }
  .v07-admin-engagement-metric > strong { margin-top: 8px; font-size: 24px; }
  .v07-admin-engagement-card { padding: 12px; border-radius: 13px; }
  .v07-admin-engagement-chart { min-width: 470px; height: 158px; }
  .v07-admin-engagement-attention-item { grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
  .v07-admin-engagement-attention-reason { justify-self: end; }
  .v07-admin-engagement-attention-item button { grid-column: 1 / -1; justify-self: start; min-height: 38px; }
  .v07-admin-engagement-placeholder { align-items: flex-start; flex-direction: column; gap: 10px; }
}

@media (max-width: 350px) {
  .v07-admin-mobile-toolbar { grid-template-columns: 40px minmax(0, 1fr) 40px; }
  .v07-admin-mobile-role { display: none; }
  .v07-admin-mobile-toolbar button { width: 40px; height: 40px; }
  .v07-admin-account-inspector-grid, .v07-admin-account-inspector-data-grid { grid-template-columns: 1fr; }
}

/* Mobile admin center warm-paper skin: share the main workspace palette while
   keeping the operational console's existing information structure intact. */
@media (max-width: 760px) {
  .v07-admin-panel {
    background:
      radial-gradient(circle at 92% 0%, rgba(228, 184, 79, .08), transparent 28rem),
      linear-gradient(115deg, rgba(255, 255, 255, .34), transparent 35rem),
      var(--paper, #f5f0e6);
  }

  .v07-admin-mobile-chrome {
    border-bottom-color: rgba(114, 91, 62, .14);
    background: rgba(245, 240, 230, .94);
    box-shadow: 0 5px 16px rgba(73, 57, 38, .055);
  }

  .v07-admin-mobile-toolbar button {
    border-color: rgba(114, 91, 62, .16);
    background: rgba(255, 253, 248, .86);
  }

  .v07-admin-mobile-nav button[aria-current="page"] {
    border-color: rgba(173, 79, 47, .22);
    background: rgba(255, 253, 248, .86);
    box-shadow: 0 3px 9px rgba(73, 57, 38, .07);
  }

  .v07-admin-section {
    border-color: rgba(114, 91, 62, .12);
    background: rgba(255, 253, 248, .82);
    box-shadow: 0 8px 22px rgba(73, 57, 38, .045);
  }

  .v07-admin-metric,
  .v07-admin-account-row,
  .v07-admin-member-row,
  .v07-admin-engagement-card {
    border-color: rgba(114, 91, 62, .1);
    background: rgba(255, 250, 243, .68);
  }
}

@media (prefers-reduced-motion: reduce) {
  .v07-admin-mobile-chrome, .v07-admin-mobile-nav button, .v07-admin-mobile-subnav button { scroll-behavior: auto; transition: none; }
}

/* Invitation-gated self-service registration and campaign controls. */
.v07-auth-card .v07-auth-switch {
  border: 1px solid #e8d5c3;
  background: #fff8ef;
  color: #8e4a32;
  font-weight: 800;
}
.v07-auth-card .v07-auth-switch:hover { border-color: #cd8f6e; background: #fff1e2; }
.v07-auth-field-hint { color: #9a8373; font-size: 10px; font-weight: 400; line-height: 1.4; }
.v07-register-card {
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.v07-register-card > label { margin-top: 11px; }
.v07-register-card > p:first-of-type { margin-bottom: 14px; }
.v07-admin-registration-invites {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #eadfd3;
}
.v07-admin-registration-invites-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.v07-admin-registration-invites-head h3 { margin: 5px 0 0; color: #4c3a2f; font-size: 17px; }
.v07-admin-registration-invites-head p { max-width: 690px; margin: 7px 0 0; color: #8a7769; font-size: 11px; line-height: 1.55; }
.v07-admin-invite-form {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) minmax(105px, .65fr) minmax(180px, 1fr) minmax(150px, .95fr) auto;
  align-items: end;
  gap: 10px;
  padding: 13px;
  border: 1px solid #eee2d5;
  border-radius: 12px;
  background: #fffaf3;
}
.v07-admin-invite-form label { display: grid; min-width: 0; gap: 6px; color: #6d5749; font-size: 10px; font-weight: 800; }
.v07-admin-invite-form input { width: 100%; min-width: 0; box-sizing: border-box; min-height: 38px; padding: 8px 10px; border: 1px solid #dfd2c3; border-radius: 9px; background: #fff; color: #4c3a2f; font: inherit; font-size: 12px; }
.v07-admin-invite-form input:focus { outline: 2px solid rgba(185, 87, 53, .22); border-color: #b95735; }
.v07-admin-invite-form button { min-height: 38px; white-space: nowrap; }
.v07-admin-invite-field-hint { color: #a68b78; font-size: 9px; font-weight: 400; line-height: 1.4; }
.v07-admin-invite-state { min-height: 17px; margin: 10px 2px; color: #8a7769; font-size: 10px; }
.v07-admin-invite-state[data-tone="error"] { color: #a44a3d; }
.v07-admin-invite-state[data-tone="success"] { color: #527c51; }
.v07-admin-invite-created {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 12px 0;
  padding: 13px 14px;
  border: 1px solid #d6e4d0;
  border-radius: 12px;
  background: #f4faf1;
}
.v07-admin-invite-created[hidden] { display: none !important; }
.v07-admin-invite-created > div { min-width: 0; }
.v07-admin-invite-created strong { display: block; color: #466d43; font-size: 12px; }
.v07-admin-invite-created p { margin: 4px 0 8px; color: #728e6d; font-size: 10px; line-height: 1.45; }
.v07-admin-invite-created code { display: inline-block; max-width: 100%; padding: 7px 9px; border: 1px dashed #b8ceaf; border-radius: 7px; background: #fff; color: #3f5c3d; font-size: 13px; font-weight: 800; letter-spacing: .05em; overflow-wrap: anywhere; user-select: all; }
.v07-admin-invite-created button { flex: 0 0 auto; }
.v07-admin-invite-list { display: grid; gap: 8px; }
.v07-admin-invite-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 13px;
  border: 1px solid #eee2d5;
  border-radius: 11px;
  background: #fffdf9;
}
.v07-admin-invite-row.is-revoked,
.v07-admin-invite-row.is-expired,
.v07-admin-invite-row.is-exhausted { background: #faf7f2; }
.v07-admin-invite-main { min-width: 0; }
.v07-admin-invite-main strong { display: block; overflow: hidden; color: #4c3a2f; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.v07-admin-invite-main small { display: block; margin-top: 4px; color: #9a8373; font-size: 10px; line-height: 1.45; }
.v07-admin-invite-code { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.v07-admin-invite-code code { max-width: 100%; padding: 5px 7px; border: 1px dashed #dfd2c3; border-radius: 7px; background: #fff; color: #4c3a2f; font-size: 11px; font-weight: 800; letter-spacing: .04em; overflow-wrap: anywhere; user-select: all; }
.v07-admin-invite-code.is-unavailable code { color: #9a8373; font-size: 10px; font-weight: 600; letter-spacing: 0; }
.v07-admin-invite-code button { min-height: 30px; padding: 5px 8px; font-size: 10px; }
.v07-admin-invite-status { padding: 4px 8px; border-radius: 999px; background: #edf5ea; color: #4c7a50; font-size: 10px; font-weight: 800; white-space: nowrap; }
.v07-admin-invite-row.is-revoked .v07-admin-invite-status,
.v07-admin-invite-row.is-expired .v07-admin-invite-status,
.v07-admin-invite-row.is-exhausted .v07-admin-invite-status { background: #f1e9df; color: #8a7769; }
.v07-admin-invite-row button { min-height: 34px; padding: 6px 10px; }
.v07-admin-invite-row button:disabled { opacity: .5; cursor: not-allowed; }
.v07-admin-invite-empty { padding: 16px 12px; border: 1px dashed #dfd2c3; border-radius: 10px; color: #9a8373; font-size: 11px; text-align: center; }
@media (max-width: 760px) {
  .v07-register-card { max-height: calc(100dvh - 24px); }
  .v07-admin-registration-invites { margin-top: 20px; padding-top: 17px; }
  .v07-admin-registration-invites-head { flex-direction: column; gap: 10px; }
  .v07-admin-registration-invites-head > button { align-self: flex-start; min-height: 40px; }
  .v07-admin-invite-form { grid-template-columns: 1fr; gap: 10px; padding: 11px; }
  .v07-admin-invite-form button { min-height: 42px; }
  .v07-admin-invite-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 11px; }
  .v07-admin-invite-status { justify-self: start; grid-row: 2; }
  .v07-admin-invite-row > button { grid-column: 2; grid-row: 1 / span 2; min-height: 40px; }
  .v07-admin-invite-row .v07-admin-invite-code button { grid-column: auto; grid-row: auto; min-height: 36px; }
  .v07-admin-invite-created { align-items: stretch; flex-direction: column; }
  .v07-admin-invite-created button { min-height: 40px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .v07-admin-invite-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v07-admin-invite-form > button { grid-column: 1 / -1; }
}
/* Keep calculator labels and measurements easy to scan on screen. */
#calculator,
#calculator h1,
#calculator h2,
#calculator h3,
#calculator input,
#calculator select,
#calculator button,
#calculator .calc-summary strong,
#calculator .calc-summary small,
#calculator .calc-summary h2,
#calculator .calc-summary h3 {
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

#calculator .calc-summary h2,
#calculator .calc-summary h3 {
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0;
}

#calculator .summary-number strong {
  font-size: 26px;
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1.35;
  letter-spacing: 0;
  white-space: nowrap;
}

#calculator .summary-number small {
  font-size: 12px;
  line-height: 1.5;
  color: #ded8cf;
}

#calculator table {
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  font-variant-numeric: lining-nums tabular-nums;
}

@media (max-width: 640px) {
  #calculator .summary-number strong { font-size: 22px; }
}

/* V0.7 desktop calculator: give the controls only the width they need and
   reserve the remaining canvas for the result. The preparation workflow stays
   full-width below the focused single-recipe calculator. */
@media screen and (min-width: 901px) {
  #calculator .page-header {
    max-width: 980px;
    margin-bottom: 20px;
  }

  #calculator .page-header h1 {
    font-size: clamp(32px, 3.2vw, 42px);
  }

  #calculator .page-header p {
    max-width: 760px;
    line-height: 1.6;
  }

  #calculator .calculator-layout {
    gap: 24px;
  }

  #calculator .calculator-controls,
  #calculator .calculator-result {
    border-radius: 18px;
    box-shadow: var(--shadow-soft, 0 8px 24px rgba(69, 51, 34, .065));
  }

  #calculator .calculator-controls {
    padding: 20px;
    top: 98px;
  }

  #calculator .calculator-controls .control-group {
    margin-bottom: 18px;
  }

  #calculator .calculator-controls .wide-select,
  #calculator .calculator-controls .wide-input {
    height: 44px;
  }

  #calculator .calculator-controls .mode-switch {
    gap: 3px;
    padding: 3px;
  }

  #calculator .calculator-controls .mode-button {
    min-height: 36px;
    padding: 6px 4px;
    font-size: 11px;
  }

  #calculator .calculator-controls .quick-values {
    gap: 5px;
    margin-top: 7px;
  }

  #calculator .calculator-controls .quick-button {
    min-height: 32px;
    padding: 5px 8px;
    font-size: 10px;
  }

  #calculator .calculator-controls .calc-note {
    padding: 11px 12px;
    line-height: 1.55;
  }

  #calculator .calculator-result .calc-summary {
    gap: 20px;
    padding: 20px 24px;
  }

  #calculator .calculator-result .calc-summary h2 {
    font-size: 22px;
  }

  #calculator .calculator-result .summary-number {
    min-width: 86px;
    padding-left: 18px;
    border-left: 1px solid rgba(255, 250, 241, .14);
  }

  #calculator .calculator-result .summary-number strong {
    font-size: 24px;
  }

  #calculator .calculator-result table {
    table-layout: fixed;
  }

  #calculator .calculator-result table th,
  #calculator .calculator-result table td {
    padding: 12px 20px;
  }

  #calculator .calculator-result table tbody tr:not(.table-total) td:nth-child(n + 2),
  #calculator .calculator-result table thead th:nth-child(n + 2) {
    text-align: right;
  }

  #calculator .calculator-result table tbody tr:not(.table-total) td:nth-child(1),
  #calculator .calculator-result table thead th:nth-child(1) {
    width: 30%;
  }

  #calculator .calculator-result table tbody tr:not(.table-total) td:nth-child(2),
  #calculator .calculator-result table thead th:nth-child(2) {
    width: 22%;
  }

  #calculator .calculator-result table tbody tr:not(.table-total) td:nth-child(3),
  #calculator .calculator-result table thead th:nth-child(3) {
    width: 20%;
  }

  #calculator .calculator-result table tbody tr:not(.table-total) td:nth-child(4),
  #calculator .calculator-result table thead th:nth-child(4) {
    width: 28%;
  }

  #calculator .calculator-result tbody tr:not(.table-total):hover td {
    background: rgba(173, 79, 47, .035);
  }

  #calculator .calculator-result .calc-footer {
    padding: 12px 18px;
  }

  #calculator .calc-prep-launcher {
    margin-top: 6px;
    padding: 14px 18px;
    border-radius: 14px;
  }

  #calculator .calc-prep-planner {
    gap: 16px;
    margin-top: 6px;
    padding: 22px;
    border-radius: 18px;
    box-shadow: var(--shadow-soft, 0 8px 24px rgba(69, 51, 34, .065));
  }

  #calculator .calc-prep-head h2 {
    font-size: 20px;
  }

  #calculator .calc-prep-toolbar {
    padding: 12px 14px 12px 17px;
  }

  #calculator .calc-prep-memory {
    gap: 10px;
    padding: 12px 14px;
  }

  #calculator .calc-prep-row {
    grid-template-columns: minmax(280px, 1.05fr) minmax(260px, 1fr);
    gap: 14px;
    padding: 14px 14px 14px 17px;
    border-radius: 12px;
    box-shadow: none;
  }

  #calculator .calc-prep-summary {
    padding: 12px 14px;
  }

  #calculator .calc-prep-table-block {
    gap: 8px;
    padding: 14px;
    border-radius: 14px;
  }
}

@media screen and (min-width: 1181px) {
  /* A desktop form does not need to grow with the result table. */
  #calculator .calculator-layout {
    grid-template-columns: minmax(360px, 410px) minmax(0, 1fr);
  }
}

/* V0.7 mobile calculator: reduce nested card chrome and keep the weighing
   flow compact. Desktop layout and calculation behavior stay unchanged. */
@media screen and (max-width: 760px) {
  #calculator .calculator-layout {
    gap: 12px;
  }

  #calculator .calculator-controls {
    padding: 12px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  #calculator .calculator-controls .control-group {
    margin-bottom: 12px;
  }

  #calculator .calculator-controls .control-group > label {
    margin-bottom: 6px;
    font-size: 12px;
    line-height: 1.35;
  }

  #calculator .calculator-controls .wide-select,
  #calculator .calculator-controls .wide-input {
    height: 44px;
    min-height: 44px;
    padding-right: 12px;
    padding-left: 12px;
  }

  #calculator .calculator-controls .mode-switch {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
    padding: 3px;
    border-radius: 11px;
  }

  #calculator .calculator-controls .mode-button {
    min-width: 0;
    min-height: 38px;
    padding: 5px 2px;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
  }

  #calculator .calculator-controls .quick-values {
    gap: 5px;
    margin-top: 6px;
    padding-bottom: 1px;
  }

  #calculator .calculator-controls .quick-button {
    min-height: 34px;
    padding: 5px 8px;
    font-size: 11px;
  }

  #calculator .calculator-controls .calc-note {
    margin-top: -2px;
    padding: 0 1px;
    border: 0;
    border-radius: 0;
    color: var(--muted, #81766a);
    background: transparent;
    font-size: 11px;
    line-height: 1.45;
  }

  #calculator .calculator-controls .calc-portion-divider {
    margin-top: 8px;
    padding: 0;
    border: 0;
    border-top: 1px solid var(--line, #e5d9ce);
    border-bottom: 1px solid var(--line, #e5d9ce);
    border-radius: 0;
    background: transparent;
  }

  #calculator .calculator-controls .calc-portion-divider-summary {
    padding: 8px 0;
  }

  #calculator .calculator-controls .calc-portion-divider h3 {
    font-size: 15px;
  }

  #calculator .calculator-controls .calc-portion-divider-total strong {
    font-size: 15px;
  }

  #calculator .calculator-controls .calc-portion-divider-summary::after {
    right: 0;
    font-size: 16px;
  }
}

/* At phone widths, use a flat two-line ingredient list instead of one rounded
   card per row. The converted amount remains the primary scan target. */
@media screen and (max-width: 720px) {
  #calculator .calculator-result {
    border-radius: 16px;
  }

  #calculator .calculator-result .calc-summary {
    gap: 8px;
    padding: 14px;
  }

  #calculator .calculator-result .calc-summary h2 {
    font-size: 19px;
  }

  #calculator .calculator-result .calc-summary p {
    font-size: 9px;
  }

  #calculator .calculator-result > .table-wrap {
    overflow: visible;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }

  #calculator .calculator-result table {
    display: block;
    width: 100%;
    min-width: 0 !important;
    border: 0;
    border-collapse: separate;
  }

  #calculator .calculator-result thead {
    display: none;
  }

  #calculator .calculator-result tbody {
    display: block;
  }

  #calculator .calculator-result tbody tr:not(.table-total) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name scaled"
      "source ratio";
    gap: 2px 10px;
    min-width: 0;
    padding: 9px 14px;
    border: 0;
    border-bottom: 1px solid rgba(83, 67, 49, .12);
    border-radius: 0;
    background: transparent;
  }

  #calculator .calculator-result tbody tr:not(.table-total) td {
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  #calculator .calculator-result tbody tr:not(.table-total) td:nth-child(1) {
    grid-area: name;
    align-self: center;
    color: var(--ink, #46382d);
    font-size: 14px;
    font-weight: 800;
  }

  #calculator .calculator-result tbody tr:not(.table-total) td:nth-child(2) {
    grid-area: source;
    color: var(--muted, #81766a);
    font-size: 10px;
  }

  #calculator .calculator-result tbody tr:not(.table-total) td:nth-child(2)::before {
    content: "原始 ";
    color: #9a8878;
  }

  #calculator .calculator-result tbody tr:not(.table-total) td:nth-child(3) {
    grid-area: ratio;
    color: var(--muted, #81766a);
    font-size: 10px;
    text-align: right;
  }

  #calculator .calculator-result tbody tr:not(.table-total) td:nth-child(3)::before {
    content: "比例 ";
    color: #9a8878;
  }

  #calculator .calculator-result tbody tr:not(.table-total) td:nth-child(4) {
    grid-area: scaled;
    align-self: center;
    min-width: 74px;
    color: var(--rust, #ad4f2f);
    font-size: 16px;
    font-weight: 800;
    text-align: right;
    white-space: nowrap;
  }

  #calculator .calculator-result tbody tr.table-total {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 11px 14px;
    border-top: 2px solid var(--ink, #46382d);
    border-bottom: 0;
    background: rgba(251, 248, 242, .96);
  }

  #calculator .calculator-result tbody tr.table-total td {
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  #calculator .calculator-result tbody tr.table-total td:nth-child(2),
  #calculator .calculator-result tbody tr.table-total td:nth-child(3) {
    display: none;
  }

  #calculator .calculator-result tbody tr.table-total td:first-child {
    color: var(--ink, #46382d);
    font-size: 14px;
    font-weight: 800;
  }

  #calculator .calculator-result tbody tr.table-total td:last-child {
    color: var(--ink, #46382d);
    font-size: 15px;
    font-weight: 800;
    text-align: right;
    white-space: nowrap;
  }

  #calculator .calculator-result .calc-footer {
    padding: 10px 14px;
  }

  /* One section panel, with flat rows inside it, is easier to scan than a
     card wrapped around several more cards on a narrow screen. */
  #calculator .calc-prep-planner {
    gap: 12px;
    margin-top: 12px;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }

  #calculator .calc-prep-head {
    gap: 4px;
  }

  #calculator .calc-prep-head p {
    max-width: none;
    margin-top: 4px;
    font-size: 10px;
    line-height: 1.45;
  }

  #calculator .calc-prep-toolbar {
    gap: 9px;
    padding: 10px 0;
    border: 0;
    border-top: 1px solid var(--line, #e5d9ce);
    border-bottom: 1px solid var(--line, #e5d9ce);
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }

  #calculator .calc-prep-toolbar small {
    display: none;
  }

  #calculator .calc-prep-toolbar strong {
    font-size: 12px;
  }

  #calculator .calc-prep-toolbar-actions button {
    min-height: 38px;
    padding: 6px 9px;
    font-size: 11px;
  }

  #calculator .calc-prep-memory,
  #calculator .calc-prep-memory[open] {
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }

  #calculator .calc-prep-memory:not([open]) .calc-prep-memory-head {
    min-height: 0;
    flex-direction: row;
    align-items: center;
    padding: 9px 32px 9px 0;
    border-top: 1px solid var(--line, #e5d9ce);
    border-bottom: 1px solid var(--line, #e5d9ce);
  }

  #calculator .calc-prep-memory:not([open]) .calc-prep-memory-head p {
    display: none;
  }

  #calculator .calc-prep-memory:not([open]) .calc-prep-memory-head h3 {
    font-size: 14px;
  }

  #calculator .calc-prep-memory:not([open]) .calc-prep-memory-head::after {
    right: 0;
    width: 22px;
    height: 22px;
  }

  #calculator .calc-prep-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid var(--line, #e5d9ce);
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }

  #calculator .calc-prep-row-note {
    display: none;
  }

  #calculator .calc-prep-row select,
  #calculator .calc-prep-row input {
    min-height: 42px;
    height: 42px;
    font-size: 14px;
  }

  #calculator .calc-prep-remove:disabled {
    display: none;
  }

  /* Removal is a row action, not a third input. Keep it in the card corner
     so every additional recipe only adds its actual preparation fields. */
  #calculator .calc-prep-row {
    position: relative;
    padding-right: 40px;
  }

  #calculator .calc-prep-remove {
    position: absolute;
    top: 10px;
    right: 0;
    display: grid;
    width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    place-items: center;
    border-radius: 50%;
    color: var(--muted, #786a5b);
    background: rgba(255, 253, 248, .84);
    font-size: 0;
    line-height: 1;
  }

  #calculator .calc-prep-remove::before {
    content: "×";
    color: currentColor;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
  }

  #calculator .calc-prep-remove:hover:not(:disabled),
  #calculator .calc-prep-remove:focus-visible {
    color: var(--rust, #ad4f2f);
    background: rgba(173, 79, 47, .08);
  }

  #calculator .calc-prep-summary {
    padding: 10px 12px;
    border-radius: 0 10px 10px 0;
    box-shadow: none;
  }

  #calculator .calc-prep-table-block {
    gap: 8px;
    padding: 0;
    border: 0;
    border-top: 1px solid var(--line, #e5d9ce);
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }
}

@media screen and (max-width: 360px) {
  #calculator .calculator-controls .mode-button {
    font-size: 11px;
  }

  #calculator .calculator-controls .quick-button {
    padding-right: 6px;
    padding-left: 6px;
  }
}

/* The calculator is a focused mobile task. Its own recipe selector and the
   bottom navigation already provide the required context, so the global
   toolbar only repeats search, theme, sidebar and new-recipe actions here. */
@media screen and (max-width: 900px) {
  body[data-active-view="calculator"] .topbar,
  body:has(#calculator.view.active) .topbar {
    display: none !important;
  }

  body[data-active-view="calculator"] .content,
  body:has(#calculator.view.active) .content {
    padding-top: 18px;
  }

  /* The fixed mobile navigation already owns the viewport edge. Let the
     calculator finish after its safe bottom padding instead of inheriting
     the desktop app's full-viewport minimum and leaving a blank tail. */
  body:has(#calculator.view.active) .app {
    min-height: 0;
  }
}
/* V0.7: show global material prices as an explicit, non-persistent recipe reference. */
#recipeDetailContent .v07-public-reference-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 17px;
  padding: 14px 16px 14px 18px;
  border: 1px solid rgba(196, 135, 72, .27);
  border-radius: 14px;
  background: linear-gradient(105deg, rgba(255, 248, 224, .97), rgba(255, 252, 241, .86));
  box-shadow: 0 6px 16px rgba(123, 88, 44, .045);
}

#recipeDetailContent .v07-public-reference-callout::before {
  content: "";
  align-self: stretch;
  width: 3px;
  flex: 0 0 3px;
  margin: -2px 0;
  border-radius: 3px;
  background: #c48748;
}

#recipeDetailContent .v07-public-reference-callout-copy {
  min-width: 0;
  flex: 1 1 auto;
}

#recipeDetailContent .v07-public-reference-kicker {
  display: block;
  color: #a76c2f;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
  line-height: 1.35;
  text-transform: uppercase;
}

#recipeDetailContent .v07-public-reference-callout strong {
  display: block;
  margin-top: 4px;
  color: #5c4330;
  font-size: 12px;
  line-height: 1.35;
}

#recipeDetailContent .v07-public-reference-callout p {
  margin: 4px 0 0;
  color: #89745f;
  font-size: 10px;
  line-height: 1.5;
}

#recipeDetailContent .v07-public-reference-callout-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
  flex: 0 0 auto;
}

#recipeDetailContent .v07-public-reference-callout-actions button,
#recipeDetailContent .v07-public-reference-button,
#recipeDetailContent .v07-public-reference-copy,
#recipeDetailContent .v07-public-reference-reset,
#recipeDetailContent .v07-public-reference-maintain {
  min-height: 30px;
  padding: 6px 9px;
  border: 1px solid rgba(173, 79, 47, .26);
  border-radius: 8px;
  color: #984a31;
  background: rgba(255, 255, 255, .72);
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

#recipeDetailContent .v07-public-reference-callout-actions button:hover,
#recipeDetailContent .v07-public-reference-callout-actions button:focus-visible,
#recipeDetailContent .v07-public-reference-button:hover,
#recipeDetailContent .v07-public-reference-button:focus-visible,
#recipeDetailContent .v07-public-reference-copy:hover,
#recipeDetailContent .v07-public-reference-copy:focus-visible,
#recipeDetailContent .v07-public-reference-maintain:hover,
#recipeDetailContent .v07-public-reference-maintain:focus-visible {
  border-color: rgba(173, 79, 47, .54);
  background: #fff4eb;
  outline: 0;
}

#recipeDetailContent .v07-public-reference-callout-actions .v07-public-reference-button,
#recipeDetailContent .v07-public-reference-button {
  color: #fffaf3;
  border-color: #aa5738;
  background: #b7603f;
  box-shadow: 0 4px 10px rgba(173, 79, 47, .12);
}

#recipeDetailContent .v07-public-reference-callout-actions .v07-public-reference-button:hover,
#recipeDetailContent .v07-public-reference-callout-actions .v07-public-reference-button:focus-visible,
#recipeDetailContent .v07-public-reference-button:hover,
#recipeDetailContent .v07-public-reference-button:focus-visible {
  color: #fff;
  border-color: #8f4229;
  background: #9f4d31;
}

#recipeDetailContent .v07-public-reference-callout.is-loading,
#recipeDetailContent .v07-public-reference-callout.is-error {
  border-color: rgba(173, 153, 132, .26);
  background: rgba(250, 246, 238, .92);
}

#recipeDetailContent .v07-public-reference-callout.is-loading::before,
#recipeDetailContent .v07-public-reference-callout.is-error::before {
  background: #b8a28a;
}

#recipeDetailContent .v07-public-reference-callout.is-error strong {
  color: #8b5740;
}

#recipeDetailContent .v07-public-reference-row td {
  background: rgba(255, 250, 238, .55);
}

#recipeDetailContent .v07-public-reference-row td:first-child {
  box-shadow: inset 3px 0 0 rgba(196, 135, 72, .55);
}

#recipeDetailContent .v07-public-reference-source,
#recipeDetailContent .v07-reference-cost-cell {
  min-width: 120px;
}

#recipeDetailContent .v07-public-reference-source {
  display: grid;
  align-content: center;
  gap: 2px;
}

#recipeDetailContent .v07-public-reference-source strong {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.35;
}

#recipeDetailContent .v07-public-reference-source small,
#recipeDetailContent .v07-reference-cost-cell span,
#recipeDetailContent .v07-reference-cost-cell small {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
}

#recipeDetailContent .v07-public-reference-badge {
  justify-self: start;
  padding: 2px 6px;
  border: 1px solid rgba(196, 135, 72, .24);
  border-radius: 999px;
  color: #a76c2f;
  background: #fff5d9;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

#recipeDetailContent .v07-reference-cost-cell {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 3px;
}

#recipeDetailContent .v07-reference-cost-cell > strong {
  color: var(--rust-dark);
  font-size: 14px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

#recipeDetailContent .v07-reference-cost-cell .v07-reference-cost-label {
  color: #a76c2f;
  font-size: 9px;
  font-weight: 800;
}

#recipeDetailContent .v07-reference-cost-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}

#recipeDetailContent .v07-reference-cost-actions button {
  min-height: 27px;
  padding: 5px 7px;
  border-radius: 7px;
  font-size: 9px;
}

#recipeDetailContent .v07-public-reference-copy {
  color: #806956;
  border-color: rgba(129, 101, 57, .2);
  background: rgba(255, 255, 255, .55);
}

#recipeDetailContent .v07-public-reference-reset {
  padding: 3px 0;
  border: 0;
  color: #9a8f82;
  background: transparent;
  font-size: 9px;
}

#recipeDetailContent .v07-public-reference-reset:hover,
#recipeDetailContent .v07-public-reference-reset:focus-visible {
  color: var(--rust);
  background: transparent;
  outline: 0;
}

#recipeDetailContent .v07-public-reference-readonly {
  color: #9a8f82;
  font-size: 9px;
  line-height: 1.4;
}

#recipeDetailContent .v07-public-reference-note {
  display: block;
  margin-bottom: 7px;
  color: #9a6b36;
  font-size: 10px;
  line-height: 1.55;
}

@media (max-width: 760px) {
  #recipeDetailContent .v07-public-reference-callout {
    align-items: flex-start;
    flex-direction: column;
    gap: 11px;
    padding: 13px 13px 13px 15px;
  }

  #recipeDetailContent .v07-public-reference-callout-actions {
    justify-content: flex-start;
  }

  #recipeDetailContent .v07-public-reference-callout-actions button {
    min-height: 32px;
  }

  #recipeDetailContent .v07-public-reference-source,
  #recipeDetailContent .v07-reference-cost-cell {
    min-width: 0;
  }

  #recipeDetailContent .v07-reference-cost-actions {
    align-items: flex-start;
    flex-direction: column;
  }
}
/* Opt-in catalog surface: separate from private and built-in demo recipes. */
#recipes .rc-trial-switch { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 18px; }
#recipes .rc-trial-switch button { border: 1px solid var(--line); border-radius: 999px; padding: 9px 15px; background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
#recipes .rc-trial-switch button[aria-pressed="true"] { background: var(--rust); border-color: var(--rust); color: white; }
#recipes .rc-trial-switch [data-rc-catalog-tab][hidden] { display: none; }
#recipes .rc-trial-panel[hidden], #recipes.rc-trial-active > .filter-bar, #recipes.rc-trial-active > #recipeGrid, #recipes.rc-trial-active > #mobileRecentRecipeV065, #recipes.rc-trial-active > #recipeCompareDock { display: none !important; }
#recipes.rc-trial-active > .page-header .recipe-library-actions, #recipes.rc-trial-active > .page-header p { display: none !important; }
#recipes .rc-trial-panel { border: 1px solid var(--line); border-radius: 20px; padding: 22px; background: var(--card); }
#recipes .rc-trial-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
#recipes .rc-trial-head h2 { margin: 3px 0 6px; }
#recipes .rc-trial-head p { margin: 0; color: var(--muted); }
#recipes .rc-trial-head-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
#recipes .rc-trial-eyebrow { color: var(--rust); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
#recipes .rc-trial-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
#recipes .rc-trial-card { border: 1px solid var(--line); border-radius: 16px; padding: 18px; background: var(--paper); }
#recipes .rc-trial-category { display: inline-block; padding: 4px 9px; border-radius: 999px; background: #f5e9de; color: #984c32; font-size: 12px; font-weight: 700; }
#recipes .rc-trial-card h3 { margin: 5px 0 9px; font-size: 18px; }
#recipes .rc-trial-card p { color: var(--muted); line-height: 1.5; }
#recipes .rc-trial-card .rc-trial-credit { font-size: 13px; margin: -2px 0 12px; }
#recipes .rc-trial-card button, #recipes .rc-trial-head button, .rc-trial-dialog button { border: 1px solid var(--line); border-radius: 10px; padding: 9px 13px; background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
#recipes .rc-trial-card button:hover, #recipes .rc-trial-head button:hover, .rc-trial-dialog button:hover { border-color: var(--rust); }
#recipes .rc-trial-message { padding: 22px; border: 1px dashed var(--line); border-radius: 14px; line-height: 1.6; color: var(--muted); white-space: pre-wrap; user-select: text; }
.rc-trial-dialog { width: min(680px, calc(100vw - 32px)); max-height: min(85dvh, 800px); overflow: auto; border: 1px solid var(--line); border-radius: 20px; padding: 0; background: var(--card); color: var(--ink); box-shadow: 0 20px 80px #261b1740; }
.rc-trial-dialog::backdrop { background: #221a17a3; }
.rc-trial-dialog > header { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 20px; background: var(--card); border-bottom: 1px solid var(--line); }
.rc-trial-dialog > header strong { font-size: 18px; }
.rc-trial-dialog > main { padding: 20px; }
.rc-trial-dialog h3 { margin: 17px 0 8px; }
.rc-trial-dialog p, .rc-trial-dialog li { line-height: 1.65; }
.rc-trial-dialog .rc-trial-meta { color: var(--muted); }
.rc-trial-dialog .rc-trial-credit { color: var(--muted); font-size: 13px; }
.rc-trial-detail .rc-trial-detail-intro { margin-bottom: 16px; }
.rc-trial-detail .rc-trial-detail-intro p { margin: 0 0 9px; }
.rc-trial-detail .rc-trial-recipe-section { border-top: 1px solid var(--line); padding-top: 8px; }
.rc-trial-detail .rc-trial-recipe-section h3 { margin-top: 11px; }
.rc-trial-detail .rc-trial-recipe-section li { margin: 5px 0; padding-left: 2px; overflow-wrap: anywhere; }
.rc-trial-detail .rc-trial-recipe-section ol { padding-left: 1.7em; }
.rc-trial-detail .rc-trial-copy-top { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 16px 0 20px; }
.rc-trial-detail .rc-trial-copy-top span { color: var(--muted); font-size: 13px; }
.rc-trial-detail [data-rc-copy] { background: var(--rust); border-color: var(--rust); color: white; font-weight: 700; }
.rc-trial-detail [data-rc-copy]:hover { filter: brightness(.94); border-color: var(--rust); }
.rc-trial-detail [data-rc-copy]:disabled { opacity: .6; cursor: progress; }
.rc-trial-dialog label { display: grid; gap: 7px; margin: 15px 0; }
.rc-trial-dialog label:has(input[type="checkbox"]) { display: flex; align-items: flex-start; }
.rc-trial-dialog textarea, .rc-trial-dialog input:not([type="checkbox"]), .rc-trial-dialog select { box-sizing: border-box; width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); color: var(--ink); font: inherit; }
.rc-trial-dialog .rc-trial-picker { display: grid; gap: 6px; margin-top: -7px; }
.rc-trial-dialog .rc-trial-picker-current { display: flex; width: 100%; min-height: 46px; align-items: center; justify-content: space-between; gap: 12px; text-align: left; }
.rc-trial-dialog .rc-trial-picker-menu { display: grid; gap: 7px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.rc-trial-dialog .rc-trial-picker-menu[hidden], .rc-trial-dialog .rc-trial-picker-options [hidden], .rc-trial-dialog .rc-trial-picker-empty[hidden] { display: none !important; }
.rc-trial-dialog .rc-trial-picker-options { display: grid; max-height: 230px; overflow-y: auto; overscroll-behavior: contain; }
.rc-trial-dialog .rc-trial-picker-options button { width: 100%; border: 0; border-radius: 6px; text-align: left; }
.rc-trial-dialog .rc-trial-picker-options button[aria-selected="true"] { background: #f5e7db; color: #8c432e; }
.rc-trial-dialog .rc-trial-picker-empty { margin: 8px; color: var(--muted); }
.rc-trial-dialog .rc-trial-actions { display: flex; gap: 9px; justify-content: flex-end; margin-top: 18px; }
.rc-trial-dialog .rc-trial-error { color: #a02720; white-space: pre-wrap; user-select: text; }
.rc-trial-dialog .rc-trial-error:empty { display: none; }
/* Additional mobile browsing controls are deliberately absent on desktop. */
#recipes .rc-trial-browser,
#recipes .rc-trial-mobile-description,
#recipes .rc-trial-refresh-icon,
#recipes .rc-trial-yield { display: none; }
#recipes .rc-trial-browser[hidden],
#recipes .rc-trial-mine-count[hidden],
#recipes [data-rc-clear-search][hidden] { display: none !important; }
#recipes .rc-trial-mine-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin-left: 5px; padding: 0 3px; border-radius: 999px; background: #f5e9de; color: var(--rust); font-size: 11px; font-weight: 700; }
#recipes .rc-trial-mine-count.has-changes { color: #9e3f27; background: #fbe4db; }
#recipes .rc-trial-message strong { display: block; color: var(--ink); }
#recipes .rc-trial-message p { margin: 8px 0 0; }
#recipes .rc-trial-message button { margin-top: 14px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; color: var(--ink); background: var(--card); font: inherit; cursor: pointer; }
.rc-trial-dialog > header [data-rc-close] { min-width: 44px; min-height: 44px; }
.rc-trial-copy-success { width: 100%; }
.rc-trial-copy-success > strong { color: var(--rust); }
.rc-trial-copy-success p { margin: 6px 0 12px; color: var(--muted); font-size: 13px; }
.rc-trial-copy-success-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.rc-trial-copy-success-actions [data-rc-open-copy] { color: white; background: var(--rust); border-color: var(--rust); }
.rc-trial-copy-success-actions button { min-height: 44px; }
@media (max-width: 900px) {
  #recipes.rc-trial-active > .page-header { margin-bottom: 12px; }
  #recipes.rc-trial-active > .page-header .eyebrow { display: none; }
  #recipes.rc-trial-active > .page-header h1 { font-size: 28px; line-height: 1.25; }
  #recipes .rc-trial-switch { overflow-x: auto; flex-wrap: nowrap; margin: 4px 0 12px; gap: 8px; }
  #recipes .rc-trial-switch button { flex: 0 0 auto; min-height: 44px; padding: 9px 14px; font-size: 14px; }
  #recipes .rc-trial-panel { padding: 0; border: 0; border-radius: 0; background: transparent; }
  #recipes .rc-trial-head { flex-direction: column; gap: 10px; margin-bottom: 12px; }
  #recipes .rc-trial-head h2 { display: none; }
  #recipes .rc-trial-head p { font-size: 13px; line-height: 1.5; }
  #recipes .rc-trial-desktop-description { display: none; }
  #recipes .rc-trial-mobile-description { display: inline; }
  #recipes .rc-trial-head-actions { justify-content: flex-start; flex-wrap: wrap; width: 100%; gap: 8px; }
  #recipes .rc-trial-head-actions button { min-height: 44px; padding: 9px 12px; font-size: 14px; }
  #recipes .rc-trial-head-actions .rc-trial-share { color: var(--rust); border-color: color-mix(in srgb, var(--rust) 35%, var(--line)); background: color-mix(in srgb, var(--rust) 7%, var(--card)); font-weight: 700; }
  #recipes .rc-trial-head-actions .rc-trial-mine { border-color: transparent; background: transparent; color: var(--muted); padding-inline: 8px; }
  #recipes .rc-trial-head-actions .rc-trial-refresh { margin-left: auto; width: 44px; min-width: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
  #recipes .rc-trial-refresh-label { display: none; }
  #recipes .rc-trial-refresh-icon { display: inline; font-size: 24px; line-height: 1; }
  #recipes .rc-trial-refresh:disabled { opacity: .5; cursor: progress; }
  #recipes .rc-trial-browser { display: grid; gap: 10px; margin-bottom: 10px; min-width: 0; }
  #recipes .rc-trial-search { display: flex; align-items: center; gap: 8px; min-height: 46px; padding-left: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
  #recipes .rc-trial-search:focus-within { border-color: var(--rust); }
  #recipes .rc-trial-search-icon { color: var(--muted); font-size: 24px; line-height: 1; }
  #recipes .rc-trial-search input { flex: 1; min-width: 0; width: 100%; height: 44px; padding: 0 10px 0 0; border: 0; outline: 0; border-radius: 0; background: transparent; color: var(--ink); font: inherit; font-size: 16px; box-shadow: none; }
  #recipes .rc-trial-search input::-webkit-search-cancel-button { display: none; }
  #recipes .rc-trial-search button { flex: 0 0 44px; width: 44px; height: 44px; border: 0; padding: 0; border-radius: 10px; background: transparent; color: var(--muted); font-size: 22px; cursor: pointer; }
  #recipes .rc-trial-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  #recipes .rc-trial-categories { display: flex; flex-wrap: nowrap; gap: 7px; overflow-x: auto; padding-bottom: 2px; overscroll-behavior-x: contain; }
  #recipes .rc-trial-categories button { flex: 0 0 auto; min-height: 44px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
  #recipes .rc-trial-categories button[aria-pressed="true"] { color: var(--rust); border-color: color-mix(in srgb, var(--rust) 35%, var(--line)); background: #f5e9de; font-weight: 700; }
  #recipes .rc-trial-result-count { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
  #recipes .rc-trial-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #recipes .rc-trial-card { position: relative; min-width: 0; padding: 14px 52px 14px 16px; border-radius: 15px; }
  #recipes .rc-trial-card h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; margin: 7px 0 6px; font-size: 17px; line-height: 1.4; }
  #recipes .rc-trial-card-summary { margin: 0; font-size: 13px; }
  #recipes .rc-trial-card .rc-trial-yield { display: block; margin: 4px 0 0; font-size: 13px; overflow-wrap: anywhere; }
  #recipes .rc-trial-card .rc-trial-credit { margin: 5px 0 0; font-size: 12px; overflow-wrap: anywhere; }
  #recipes .rc-trial-card button { position: absolute; inset: 0; width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: flex-end; padding: 14px 16px; border: 0; border-radius: inherit; background: transparent; color: var(--rust); }
  #recipes .rc-trial-card button:hover { border: 0; background: transparent; }
  #recipes .rc-trial-card-open-text { display: none; }
  #recipes .rc-trial-card-arrow { font-size: 22px; line-height: 1; }
  #recipes .rc-trial-card:focus-within { outline: 2px solid var(--rust); outline-offset: 3px; }
  #recipes .rc-trial-card button:focus-visible { outline: 0; }
  #recipes .rc-trial-message { padding: 20px 16px; font-size: 14px; }
  #recipes .rc-trial-message button { min-height: 44px; }
  #recipes .rc-trial-head-actions button:focus-visible,
  #recipes .rc-trial-categories button:focus-visible,
  #recipes .rc-trial-search button:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }
  .rc-trial-dialog { box-sizing: border-box; width: 100%; max-width: 100%; max-height: 90dvh; margin: auto 0 0; border-radius: 19px 19px 0 0; }
  .rc-trial-detail { display: flex; flex-direction: column; overflow: hidden; }
  .rc-trial-detail > header { flex: 0 0 auto; }
  .rc-trial-detail > header strong { font-size: 19px; line-height: 1.35; }
  .rc-trial-detail > main { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 20px calc(24px + env(safe-area-inset-bottom)); }
  .rc-trial-detail .rc-trial-copy-top button { width: 100%; min-height: 46px; }
  .rc-trial-copy-success-actions { flex-direction: column; }
}
/* Invite-only recipe catalog controls live inside the existing admin center. */
.v07-admin-sidebar-nav .rca-badge{display:inline-grid;min-width:19px;place-items:center;margin-left:6px;padding:1px 4px;border-radius:999px;background:#f1dfd4;color:#974d31;font-size:10px}
.rca-section .rca-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
.rca-section .rca-tabs button[aria-pressed="true"]{background:#a65332;color:#fffaf4;border-color:#a65332}
.rca-section .rca-summary{color:#806d60;line-height:1.6}
.rca-section .rca-layout{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:20px}
.rca-section .rca-list{display:grid;align-content:start;gap:8px;max-height:58vh;overflow:auto}
.rca-section .rca-row{display:grid;gap:5px;width:100%;text-align:left;padding:12px;border:1px solid #e5dcd2;border-radius:11px;background:#fffdf9;color:inherit}
.rca-section .rca-row.is-active{border-color:#ad4f2f;background:#fff4e9}
.rca-section .rca-row small,.rca-section .rca-muted{color:#89786b;line-height:1.5}
.rca-section .rca-detail{min-width:0;padding:18px;border:1px solid #e5dcd2;border-radius:13px;background:#fffdf9;overflow-wrap:anywhere}
.rca-section .rca-detail h3{margin:3px 0 12px}
.rca-section .rca-detail h4{margin:18px 0 7px}
.rca-section .rca-detail li{margin:4px 0;line-height:1.6;white-space:pre-wrap}
.rca-section .rca-detail textarea{box-sizing:border-box;width:100%;min-height:74px;margin:8px 0;padding:10px;border:1px solid #ded6cb;border-radius:9px;background:#fffdf9;color:inherit;font:inherit}
.rca-section .rca-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.rca-section .rca-feedback{min-height:24px;white-space:pre-wrap;user-select:text;color:#8d4935}
.rca-section .rca-empty{padding:18px;border:1px dashed #d9c9ba;border-radius:11px;color:#89786b;line-height:1.6}
.rca-section .rca-account-search{box-sizing:border-box;width:100%;max-width:420px;margin:5px 0 14px;padding:10px;border:1px solid #ded6cb;border-radius:9px;background:#fffdf9;color:inherit;font:inherit}
.rca-section .rca-account-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:10px}
.rca-section .rca-account{display:grid;gap:9px;padding:13px;border:1px solid #e5dcd2;border-radius:11px;background:#fffdf9}
.rca-section .rca-account label{display:grid;gap:6px;font-size:12px}
.rca-section .rca-account select{box-sizing:border-box;width:100%;padding:8px;border:1px solid #ded6cb;border-radius:8px;background:#fff;color:inherit;font:inherit}
.rca-section .rca-account strong{overflow-wrap:anywhere}
@media(max-width:900px){.rca-section .rca-layout{grid-template-columns:1fr}.rca-section .rca-list{max-height:220px}.rca-section .rca-detail{padding:14px}.rca-section .rca-tabs{overflow-x:auto;flex-wrap:nowrap}.rca-section .rca-tabs button{flex:0 0 auto;min-height:44px}.rca-section .rca-account-grid{grid-template-columns:1fr}}
/* V0.7 mobile material costing. The desktop price table remains unchanged. */

.v07-material-mobile-controls,
.v07-material-mobile-list {
  display: none;
}

@media (max-width: 900px) {
  /* Cost tabs are the local section switcher, so keep them easy to reach below
     the mobile app header without making the three options look like a menu. */
  #costs .competitor-tabs {
    position: sticky;
    top: calc(60px + env(safe-area-inset-top));
    z-index: 24;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: -4px 0 15px;
    padding: 4px;
    border: 1px solid rgba(173, 153, 132, .22);
    border-radius: 14px;
    background: rgba(250, 246, 238, .94);
    box-shadow: 0 8px 22px rgba(70, 48, 31, .06);
    backdrop-filter: blur(16px);
  }

  #costs .competitor-tabs button {
    min-width: 0;
    min-height: 42px;
    padding: 7px 4px;
    border: 0;
    border-bottom: 0;
    border-radius: 10px;
    color: var(--muted, #81766a);
    font-size: 12px;
    line-height: 1.2;
  }

  #costs .competitor-tabs button[aria-selected="true"] {
    color: var(--rust, #a84d32);
    background: #fffdf9;
    box-shadow: 0 2px 8px rgba(91, 57, 36, .08);
  }

  #costs #costMaterialsPanel > .page-header {
    min-height: 42px;
    margin-bottom: 13px;
  }

  #costs #costMaterialsPanel > .cost-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-bottom: 16px;
  }

  #costs #costMaterialsPanel > .cost-stats .cost-stat {
    min-width: 0;
    min-height: 77px;
    padding: 12px 9px 10px;
    border-radius: 14px;
    background: rgba(255, 253, 249, .88);
  }

  #costs #costMaterialsPanel > .cost-stats .cost-stat small {
    min-height: 30px;
    margin-bottom: 5px;
    color: var(--muted, #81766a);
    font-size: 10px;
    line-height: 1.35;
  }

  #costs #costMaterialsPanel > .cost-stats .cost-stat strong {
    font-size: 25px;
  }

  #costs #costMaterialsPanel .price-library {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  #costs #costMaterialsPanel .price-library-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 0 0 11px;
    border-bottom: 0;
  }

  #costs #costMaterialsPanel .price-library-head h3 {
    margin-bottom: 3px;
    font-size: 22px;
  }

  #costs #costMaterialsPanel .price-library-head p {
    max-width: none;
    font-size: 11px;
    line-height: 1.5;
  }

  #costs #costMaterialsPanel .material-search-history-wrap {
    width: 100%;
    min-width: 0;
  }

  #costs #costMaterialsPanel .price-search {
    width: 100%;
    min-height: 46px;
    padding-right: 14px;
    border-radius: 13px;
    background: #fffdf9;
  }

  #costs #costMaterialsPanel .material-search-history-panel {
    top: calc(100% + 6px);
    border-radius: 13px;
  }

  .v07-material-mobile-controls {
    display: grid;
    gap: 9px;
    margin: 0 0 11px;
  }

  .v07-material-mobile-control-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  .v07-material-mobile-filter-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex: 1 1 auto;
    gap: 5px;
    min-width: 0;
    padding: 3px;
    border: 1px solid rgba(173, 153, 132, .2);
    border-radius: 12px;
    background: rgba(244, 237, 228, .72);
  }

  .v07-material-mobile-filter {
    min-width: 0;
    min-height: 36px;
    padding: 5px 3px;
    border: 0;
    border-radius: 9px;
    color: var(--muted, #81766a);
    background: transparent;
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.15;
    cursor: pointer;
  }

  .v07-material-mobile-filter span {
    margin-left: 2px;
    color: #9a8b7d;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
  }

  .v07-material-mobile-filter-list.is-single {
    grid-template-columns: minmax(0, 1fr);
  }

  .v07-material-mobile-filter.is-active,
  .v07-material-mobile-filter:focus-visible {
    color: var(--rust, #a84d32);
    background: #fffdf9;
    box-shadow: 0 2px 7px rgba(91, 57, 36, .08);
    outline: 0;
  }

  .v07-material-mobile-sort {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    color: var(--muted, #81766a);
    font-size: 10px;
    white-space: nowrap;
  }

  .v07-material-mobile-sort select {
    min-height: 36px;
    max-width: 88px;
    padding: 5px 23px 5px 7px;
    border: 1px solid rgba(173, 153, 132, .22);
    border-radius: 9px;
    color: var(--ink, #46382d);
    background: #fffdf9;
    font: inherit;
    font-size: 10px;
  }

  .v07-material-mobile-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 17px;
    color: var(--muted, #81766a);
    font-size: 10px;
  }

  .v07-material-mobile-result strong {
    color: var(--ink-soft, #5e5144);
    font-weight: 800;
  }

  #costs #costMaterialsPanel .price-library .table-wrap {
    overflow: visible;
    border: 0;
  }

  #costs #costMaterialsPanel .price-table {
    display: block;
    width: 100%;
    min-width: 0;
  }

  #costs #costMaterialsPanel .price-table > thead {
    display: none;
  }

  #costs #costMaterialsPanel .price-table > tbody {
    display: block;
  }

  #costs #costMaterialsPanel .price-table > tbody > tr.v07-material-mobile-container-row,
  #costs #costMaterialsPanel .price-table > tbody > tr.v07-material-mobile-container-row > td {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .v07-material-mobile-list {
    display: grid;
    gap: 9px;
  }

  .v07-material-mobile-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(173, 153, 132, .24);
    border-radius: 16px;
    background: rgba(255, 253, 249, .96);
    box-shadow: 0 5px 16px rgba(74, 49, 31, .045);
    text-align: left;
  }

  .v07-material-mobile-card.is-expanded {
    border-color: rgba(173, 79, 47, .28);
    box-shadow: 0 8px 22px rgba(74, 49, 31, .08);
  }

  .v07-material-mobile-card-head {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px 12px 10px;
  }

  .v07-material-mobile-thumb {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    overflow: hidden;
    padding: 0;
    border: 1px dashed #cfb9a4;
    border-radius: 13px;
    color: #a27458;
    background: #faf5ee;
    font-size: 12px;
    font-weight: 800;
  }

  button.v07-material-mobile-thumb {
    cursor: zoom-in;
  }

  .v07-material-mobile-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
  }

  .v07-material-mobile-toggle {
    display: grid;
    min-width: 0;
    align-content: center;
    justify-items: start;
    padding: 0;
    border: 0;
    color: var(--ink, #46382d);
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }

  .v07-material-mobile-toggle:focus-visible {
    outline: 2px solid rgba(173, 79, 47, .42);
    outline-offset: 4px;
    border-radius: 6px;
  }

  .v07-material-mobile-kicker {
    margin-bottom: 3px;
    color: #a87a61;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
  }

  .v07-material-mobile-toggle strong {
    display: block;
    max-width: 100%;
    overflow: hidden;
    font-size: 16px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .v07-material-mobile-aliases {
    display: flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    margin-top: 4px;
    overflow: hidden;
    color: var(--muted, #81766a);
    font-size: 9px;
    line-height: 1.3;
    white-space: nowrap;
  }

  .v07-material-mobile-aliases .material-group-alias-label {
    flex: 0 0 auto;
    margin-right: 4px;
  }

  .v07-material-mobile-aliases .material-group-alias-tags {
    display: inline-flex;
    min-width: 0;
    overflow: hidden;
    flex-wrap: nowrap;
    gap: 3px;
  }

  .v07-material-mobile-aliases .material-group-alias-tags span {
    flex: 0 0 auto;
    max-width: 78px;
    overflow: hidden;
    padding: 2px 5px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .v07-material-mobile-price {
    display: grid;
    justify-items: end;
    min-width: 58px;
    text-align: right;
  }

  .v07-material-mobile-price small,
  .v07-material-mobile-current small,
  .v07-material-mobile-unit small {
    color: var(--muted, #81766a);
    font-size: 9px;
    line-height: 1.35;
  }

  .v07-material-mobile-price strong {
    margin: 2px 0;
    color: var(--ink, #46382d);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    line-height: 1;
    white-space: nowrap;
  }

  .v07-material-mobile-price strong.is-pending {
    color: #a1764c;
    font-family: inherit;
    font-size: 11px;
  }

  .v07-material-mobile-price span {
    max-width: 72px;
    overflow: hidden;
    color: #8f7968;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .v07-material-mobile-card-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 11px;
    border-top: 1px solid rgba(173, 153, 132, .15);
    background: rgba(250, 246, 239, .56);
  }

  .v07-material-mobile-current {
    display: grid;
    min-width: 0;
    gap: 2px;
  }

  .v07-material-mobile-current > span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: var(--ink-soft, #5e5144);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .v07-material-mobile-current > span.is-empty {
    color: #9c9185;
    font-weight: 600;
  }

  .v07-material-mobile-current small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .v07-material-mobile-summary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 34px;
    padding: 6px 9px;
    border: 1px solid rgba(163, 77, 46, .24);
    border-radius: 9px;
    color: var(--rust-dark, #8e4935);
    background: #fff9f3;
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
  }

  .v07-material-mobile-summary-action:hover,
  .v07-material-mobile-summary-action:focus-visible {
    border-color: rgba(163, 77, 46, .5);
    background: #f9e9df;
    outline: 0;
  }

  .v07-material-mobile-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    margin-top: 1px;
    padding: 3px 6px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
  }

  .v07-material-mobile-status::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
  }

  .v07-material-mobile-status.is-ready {
    color: #5f7d60;
    background: #edf4e9;
  }

  .v07-material-mobile-status.is-pending {
    color: #9a7238;
    background: #fbf2df;
  }

  .v07-material-mobile-detail {
    display: grid;
    gap: 13px;
    padding: 13px 12px 14px;
    border-top: 1px solid rgba(173, 79, 47, .16);
    background: #fffaf3;
  }

  .v07-material-mobile-section-head,
  .v07-material-mobile-products-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
  }

  .v07-material-mobile-section-head strong,
  .v07-material-mobile-products-head strong {
    display: block;
    color: var(--ink-soft, #5e5144);
    font-size: 12px;
    line-height: 1.35;
  }

  .v07-material-mobile-section-head small,
  .v07-material-mobile-products-head small {
    display: block;
    margin-top: 2px;
    color: var(--muted, #81766a);
    font-size: 9px;
    line-height: 1.45;
  }

  .v07-material-mobile-autosave {
    flex: 0 0 auto;
    color: #66806a;
    font-size: 9px;
    white-space: nowrap;
  }

  .v07-material-mobile-group-editor {
    display: grid;
    gap: 9px;
    padding: 10px;
    border: 1px solid #c7dada;
    border-radius: 12px;
    background: #f0f8f8;
  }

  .v07-material-mobile-field,
  .v07-material-mobile-product-field {
    display: grid;
    gap: 5px;
    min-width: 0;
    color: #557379;
    font-size: 10px;
    font-weight: 800;
  }

  .v07-material-mobile-field input,
  .v07-material-mobile-product-field input,
  .v07-material-mobile-product-field select {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid rgba(92, 137, 145, .28);
    border-radius: 9px;
    color: var(--ink, #46382d);
    background: rgba(255, 255, 255, .86);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
  }

  .v07-material-mobile-field input:focus,
  .v07-material-mobile-product-field input:focus,
  .v07-material-mobile-product-field select:focus {
    border-color: #4b8991;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(75, 137, 145, .13);
  }

  .v07-material-mobile-delete-group {
    justify-self: start;
    min-height: 30px;
    padding: 3px 0;
    border: 0;
    color: #a15e45;
    background: transparent;
    font: inherit;
    font-size: 10px;
    cursor: pointer;
  }

  .v07-material-mobile-delete-group:hover {
    text-decoration: underline;
  }

  .v07-material-mobile-products-head {
    align-items: center;
    padding-top: 2px;
  }

  .v07-material-mobile-add-product {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 5px 8px;
    border: 1px dashed rgba(163, 77, 46, .38);
    border-radius: 9px;
    color: var(--rust, #a84d32);
    background: #fffdf9;
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
  }

  .v07-material-mobile-product-list {
    display: grid;
    gap: 9px;
  }

  .v07-material-mobile-product {
    display: grid;
    gap: 10px;
    padding: 11px;
    border: 1px solid rgba(173, 153, 132, .22);
    border-radius: 13px;
    background: rgba(255, 253, 249, .88);
  }

  .v07-material-mobile-product-top {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-width: 0;
  }

  .v07-material-mobile-product-top .material-product-image-editor {
    display: grid;
    width: 68px;
    justify-items: center;
    gap: 3px;
  }

  .v07-material-mobile-product-top .material-price-image-editor {
    width: 68px;
    height: auto;
    min-height: 0;
  }

  .v07-material-mobile-product-top .material-image-preview-trigger,
  .v07-material-mobile-product-top .material-image-control.compact {
    flex-basis: 54px;
    width: 54px;
    height: 54px;
  }

  .v07-material-mobile-product-top .material-image-preview-trigger {
    flex-basis: 54px;
    border-radius: 11px;
  }

  .v07-material-mobile-product-top .material-image-upload-action,
  .v07-material-mobile-product-top .material-image-reuse-button {
    width: 68px;
    max-width: 68px;
    min-height: 20px;
    padding: 2px 1px;
    font-size: 9px;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
  }

  .v07-material-mobile-product-top .material-image-upload-action {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .v07-material-mobile-product-top .material-image-reuse-button {
    min-height: 25px;
  }

  .v07-material-mobile-product-title {
    display: grid;
    min-width: 0;
    gap: 3px;
  }

  .v07-material-mobile-product-title small {
    color: #a87a61;
    font-size: 9px;
    font-weight: 800;
  }

  .v07-material-mobile-product-title strong {
    overflow: hidden;
    color: var(--ink-soft, #5e5144);
    font-size: 13px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .v07-material-mobile-product-title strong.is-empty {
    color: #9c9185;
    font-weight: 600;
  }

  .v07-material-mobile-product-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 9px;
  }

  .v07-material-mobile-product-field.is-full {
    grid-column: 1 / -1;
  }

  .v07-material-mobile-package-input,
  .v07-material-mobile-price-input {
    display: flex;
    align-items: center;
    min-width: 0;
  }

  .v07-material-mobile-package-input input,
  .v07-material-mobile-price-input input {
    min-width: 0;
  }

  .v07-material-mobile-package-input select {
    flex: 0 0 55px;
    width: 55px;
    margin-left: 5px;
    padding-right: 20px;
  }

  .v07-material-mobile-price-input > span {
    flex: 0 0 auto;
    margin-right: 4px;
    color: #8d7663;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
  }

  .v07-material-mobile-product-foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 8px;
    padding-top: 1px;
  }

  .v07-material-mobile-unit {
    display: grid;
    min-width: 0;
    gap: 2px;
  }

  .v07-material-mobile-unit strong {
    color: #6a7e68;
    font-size: 12px;
    line-height: 1.35;
  }

  .v07-material-mobile-product-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px;
  }

  .v07-material-mobile-product-actions .material-current-badge,
  .v07-material-mobile-product-actions .material-default-button,
  .v07-material-mobile-product-actions .price-delete {
    font-size: 10px;
  }

  .v07-material-mobile-product-actions .price-delete {
    min-height: 30px;
    padding: 4px 0;
  }

  .v07-material-mobile-details-copy {
    padding-top: 1px;
  }

  .v07-material-mobile-details-copy .material-details-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-top: 0;
    padding: 10px;
    border-radius: 11px;
  }

  .v07-material-mobile-details-copy .material-detail-item {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    padding: 7px 0;
    border-bottom: 1px solid rgba(190, 125, 78, .11);
    text-align: left;
  }

  .v07-material-mobile-details-copy .material-detail-item:last-child {
    border-bottom: 0;
  }

  .v07-material-mobile-details-copy .material-detail-item span,
  .v07-material-mobile-details-copy .material-detail-item p {
    margin: 0;
    text-align: left;
  }

  .v07-material-mobile-details-copy .material-detail-item span {
    line-height: 1.45;
  }

  .v07-material-mobile-details-copy .material-detail-item p {
    line-height: 1.5;
  }

  .v07-material-mobile-empty {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 26px 15px;
    border: 1px dashed rgba(173, 153, 132, .34);
    border-radius: 14px;
    color: var(--muted, #81766a);
    text-align: center;
  }

  .v07-material-mobile-empty strong {
    color: var(--ink-soft, #5e5144);
    font-size: 14px;
  }

  .v07-material-mobile-empty p {
    margin: 0;
    font-size: 11px;
    line-height: 1.55;
  }

  .v07-material-mobile-empty button {
    min-height: 34px;
    margin-top: 3px;
    padding: 5px 10px;
    border: 1px solid rgba(163, 77, 46, .28);
    border-radius: 9px;
    color: var(--rust, #a84d32);
    background: #fff9f3;
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
  }

  #costs #costMaterialsPanel .price-library-foot {
    align-items: stretch;
    flex-direction: column;
    padding: 13px 0 0;
    border-top: 0;
  }

  #costs #costMaterialsPanel .price-library-foot p {
    margin-bottom: 2px;
    font-size: 10px;
    line-height: 1.5;
  }

  #costs #costMaterialsPanel .price-library-foot .secondary-button {
    width: 100%;
    min-height: 44px;
    border-radius: 12px;
  }

  /* The public catalog stays available, but its mobile card is a short
     discovery list instead of a second full-size dashboard. */
  #costs #costMaterialsPanel .material-public-catalog {
    margin: 0 0 15px;
    padding: 14px 14px 15px;
    border-radius: 16px;
    border-color: var(--line, rgba(173, 153, 132, .24));
    background: var(--surface-raised, #fffdf9);
    box-shadow: var(--shadow-soft, 0 8px 22px rgba(74, 49, 31, .06));
  }

  #costs #costMaterialsPanel .material-public-catalog::before {
    background: var(--rust, #a84d32);
  }

  #costs #costMaterialsPanel .material-public-catalog-head,
  #costs #costMaterialsPanel .material-public-catalog-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  #costs #costMaterialsPanel .material-public-catalog-copy h3 {
    margin-top: 4px;
    font-size: 17px;
  }

  #costs #costMaterialsPanel .material-public-catalog-copy p {
    display: -webkit-box;
    max-width: none;
    overflow: hidden;
    font-size: 10px;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  #costs #costMaterialsPanel .material-public-catalog-actions {
    align-items: center;
    justify-content: space-between;
  }

  #costs #costMaterialsPanel .material-public-catalog-actions .secondary-button {
    min-height: 36px;
    padding: 6px 9px;
    border-radius: 9px;
    font-size: 10px;
  }

  #costs #costMaterialsPanel .material-public-catalog-body {
    margin-top: 12px;
    padding-top: 12px;
  }

  #costs #costMaterialsPanel .material-public-catalog-toolbar .price-search {
    flex: 0 0 auto;
    min-height: 42px;
  }

  /* The catalog search wrapper inherits a desktop row-basis. Reset it when
     the toolbar becomes a column, otherwise the icons sit in a tall blank
     area and the filters/cards are pushed below the viewport. */
  #costs #costMaterialsPanel .material-public-catalog-search-wrap {
    flex: 0 0 auto;
  }

  #costs #costMaterialsPanel .material-public-catalog-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  #costs #costMaterialsPanel .material-public-card {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 9px;
    padding: 9px;
    border-radius: 12px;
  }

  #costs #costMaterialsPanel .material-public-card-image {
    width: 54px;
    height: 54px;
    border-radius: 9px;
  }

  #costs #costMaterialsPanel .material-public-card-main {
    gap: 3px;
  }

  #costs #costMaterialsPanel .material-public-card-title strong {
    font-size: 12px;
  }

  #costs #costMaterialsPanel .material-public-card-source,
  #costs #costMaterialsPanel .material-public-card-spec,
  #costs #costMaterialsPanel .material-public-card-detail {
    font-size: 9px;
  }

  #costs #costMaterialsPanel .material-public-card-detail {
    -webkit-line-clamp: 1;
  }

  #costs #costMaterialsPanel .material-public-card-action {
    min-height: 34px;
    margin-top: 3px;
    padding: 5px 7px;
    font-size: 9px;
  }
}

@media (max-width: 900px) {
  /* Keep the public catalog on the same semantic palette as the rest of the
     mobile material page: warm surfaces, rust actions, and green only for
     positive/reused state. */
  #costs #costMaterialsPanel .material-public-catalog-kicker,
  #costs #costMaterialsPanel .material-public-catalog-search-wrap > span {
    color: var(--rust, #a84d32);
  }

  #costs #costMaterialsPanel .material-public-catalog-copy h3,
  #costs #costMaterialsPanel .material-public-catalog-copy p,
  #costs #costMaterialsPanel .material-public-catalog-actions > span,
  #costs #costMaterialsPanel .material-public-catalog-toolbar > span,
  #costs #costMaterialsPanel .material-public-catalog-sort,
  #costs #costMaterialsPanel .material-public-catalog-categories > strong,
  #costs #costMaterialsPanel .material-public-catalog-categories nav button,
  #costs #costMaterialsPanel .material-public-group-meta,
  #costs #costMaterialsPanel .material-public-group-source,
  #costs #costMaterialsPanel .material-public-variant-main p,
  #costs #costMaterialsPanel .material-public-variant-main small {
    color: var(--ink-soft, #5e5144);
  }

  #costs #costMaterialsPanel .material-public-catalog-copy h3 em,
  #costs #costMaterialsPanel .material-public-category-badge,
  #costs #costMaterialsPanel .material-public-detail-button,
  #costs #costMaterialsPanel .material-public-group-toggle,
  #costs #costMaterialsPanel .material-public-card-action,
  #costs #costMaterialsPanel .material-public-catalog-scopes button,
  #costs #costMaterialsPanel .material-public-catalog-view-toggle button,
  #costs #costMaterialsPanel .material-public-catalog-sort select,
  #costs #costMaterialsPanel .material-public-catalog-categories nav button {
    border-color: var(--line, rgba(173, 153, 132, .24));
    color: var(--ink-soft, #5e5144);
    background: var(--control-surface, rgba(255, 253, 248, .86));
  }

  #costs #costMaterialsPanel .material-public-catalog-copy h3 em,
  #costs #costMaterialsPanel .material-public-category-badge,
  #costs #costMaterialsPanel .material-public-catalog-scopes button[aria-pressed="true"],
  #costs #costMaterialsPanel .material-public-catalog-view-toggle button[aria-pressed="true"],
  #costs #costMaterialsPanel .material-public-catalog-categories nav button.is-active {
    border-color: color-mix(in srgb, var(--rust, #a84d32) 30%, var(--line, #e5d9ce));
    color: var(--rust-dark, #873c27);
    background: var(--pink-soft, #f0ddd4);
  }

  #costs #costMaterialsPanel .material-public-catalog-search-wrap .price-search {
    border-color: var(--line, rgba(173, 153, 132, .24));
    color: var(--ink, #46382d);
    background: var(--control-surface, rgba(255, 253, 248, .86));
  }

  #costs #costMaterialsPanel .material-public-catalog-categories {
    border-color: var(--line, rgba(173, 153, 132, .24));
    background: var(--surface-soft, rgba(255, 253, 248, .68));
  }

  #costs #costMaterialsPanel .material-public-group {
    border-color: var(--line, rgba(173, 153, 132, .24));
    background: var(--card, #fffdf9);
  }

  #costs #costMaterialsPanel .material-public-card-image,
  #costs #costMaterialsPanel .material-public-variant-image {
    border-color: var(--line, rgba(173, 153, 132, .24));
    background: var(--control-surface, #fffdf9);
  }

  #costs #costMaterialsPanel .material-public-group-title strong,
  #costs #costMaterialsPanel .material-public-variant-title strong {
    color: var(--ink, #46382d);
  }

  #costs #costMaterialsPanel .material-public-badge.is-recommended,
  #costs #costMaterialsPanel .material-public-added-count,
  #costs #costMaterialsPanel .material-public-status.is-added,
  #costs #costMaterialsPanel .material-public-inline-added {
    color: var(--olive, #687b65);
  }

  #costs #costMaterialsPanel .material-public-badge.is-recommended {
    background: var(--olive-soft, #dfe7dc);
  }

  #costs #costMaterialsPanel .material-public-group-toggle,
  #costs #costMaterialsPanel .material-public-card-action {
    border-color: color-mix(in srgb, var(--rust, #a84d32) 30%, var(--line, #e5d9ce));
    color: var(--rust-dark, #873c27);
    background: var(--pink-soft, #f0ddd4);
  }

  #costs #costMaterialsPanel .material-public-variants {
    border-top-color: var(--line, rgba(173, 153, 132, .2));
    background: var(--surface-soft, rgba(255, 253, 248, .68));
  }

  #costs #costMaterialsPanel .material-public-catalog-state {
    border-color: var(--line, rgba(173, 153, 132, .34));
    color: var(--muted, #81766a);
  }

  .material-public-detail-head span {
    color: var(--rust-dark, #873c27);
  }

  .material-public-detail-note {
    color: var(--ink-soft, #5e5144);
    background: var(--pink-soft, #f0ddd4);
  }
}

@media (max-width: 380px) {
  .v07-material-mobile-filter {
    font-size: 9px;
  }

  .v07-material-mobile-sort select {
    max-width: 76px;
  }

  .v07-material-mobile-card-head {
    grid-template-columns: 50px minmax(0, 1fr) auto;
    gap: 8px;
  }

  .v07-material-mobile-thumb {
    width: 50px;
    height: 50px;
  }

  .v07-material-mobile-toggle strong {
    font-size: 15px;
  }

  .v07-material-mobile-price {
    min-width: 52px;
  }
}

/* V0.7 material-cost pass 3: compact list, detail sheet and quick price edit. */
.v07-material-mobile-compact-list,
.v07-mobile-material-detail-backdrop,
.v07-mobile-material-quick-backdrop {
  display: none;
}

@media (max-width: 900px) {
  #costs #costMaterialsPanel > .cost-stats {
    margin-bottom: 10px;
    padding-top: 7px;
    padding-bottom: 7px;
  }

  #costs #costMaterialsPanel > .cost-stats .cost-stat {
    min-height: 0;
    padding: 3px 5px;
  }

  #costs #costMaterialsPanel > .cost-stats .cost-stat small {
    font-size: 9px;
  }

  #costs #costMaterialsPanel > .cost-stats .cost-stat strong {
    font-size: 16px;
  }

  #costs #costMaterialsPanel .price-library-head h3 {
    font-size: 18px;
  }

  #costs #costMaterialsPanel .price-library-head p {
    font-size: 10px;
  }

  .v07-material-mobile-heading {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .v07-material-mobile-public {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 31px;
    padding: 5px 8px;
    border: 1px solid rgba(163, 77, 46, .24);
    border-radius: 9px;
    color: var(--rust-dark, #873c27);
    background: #fff9f3;
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
  }

  .v07-material-mobile-filter-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .v07-material-mobile-filter-list.is-single {
    grid-template-columns: minmax(0, 1fr);
  }

  .v07-material-mobile-compact-list {
    display: grid;
    gap: 8px;
  }

  .v07-material-compact-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(173, 153, 132, .22);
    border-radius: 13px;
    background: rgba(255, 253, 249, .96);
    box-shadow: 0 3px 11px rgba(74, 49, 31, .035);
  }

  .v07-material-compact-card > .material-image-control,
  .v07-material-compact-thumb {
    display: grid;
    width: 48px;
    height: 48px;
    min-width: 48px;
    place-items: center;
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(207, 185, 164, .72);
    border-radius: 11px;
    color: #a27458;
    background: #faf5ee;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
  }

  .v07-material-compact-card > .material-image-control img,
  .v07-material-compact-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 3px;
  }

  .v07-material-compact-card > .material-image-control .material-image-placeholder,
  .v07-material-compact-card > .material-image-control .material-image-change {
    font-size: 9px;
  }

  .v07-material-compact-main,
  .v07-material-compact-price {
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }

  .v07-material-compact-main {
    display: grid;
    align-content: center;
    gap: 2px;
  }

  .v07-material-compact-main:focus-visible,
  .v07-material-compact-price:focus-visible,
  .v07-material-compact-detail-link:focus-visible {
    outline: 2px solid rgba(163, 77, 46, .4);
    outline-offset: 3px;
    border-radius: 5px;
  }

  .v07-material-compact-kicker {
    color: #a87a61;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.1;
  }

  .v07-material-compact-main strong {
    overflow: hidden;
    color: var(--ink, #46382d);
    font-size: 15px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .v07-material-compact-source,
  .v07-material-compact-spec {
    overflow: hidden;
    color: var(--muted, #81766a);
    font-size: 10px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .v07-material-compact-spec {
    color: #927c6b;
    font-variant-numeric: tabular-nums;
  }

  .v07-material-compact-price {
    display: grid;
    justify-items: end;
    align-content: center;
    gap: 2px;
    max-width: 94px;
    text-align: right;
  }

  .v07-material-compact-price small,
  .v07-material-compact-price span {
    color: var(--muted, #81766a);
    font-size: 9px;
    line-height: 1.2;
    white-space: nowrap;
  }

  .v07-material-compact-price strong {
    max-width: 94px;
    overflow: hidden;
    color: var(--ink, #46382d);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .v07-material-compact-price strong.is-pending {
    color: #9a7238;
    font-family: inherit;
    font-size: 10px;
  }

  .v07-material-compact-foot {
    display: flex;
    grid-column: 2 / -1;
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding-top: 7px;
    border-top: 1px solid rgba(173, 153, 132, .14);
    color: var(--muted, #81766a);
    font-size: 9px;
    line-height: 1.2;
  }

  .v07-material-compact-pending {
    color: #9a7238;
    font-weight: 800;
  }

  .v07-material-compact-detail-link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: 28px;
    margin-left: auto;
    padding: 3px 0 3px 7px;
    border: 0;
    color: var(--rust-dark, #873c27);
    background: transparent;
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
  }

  .v07-mobile-material-detail-backdrop,
  .v07-mobile-material-quick-backdrop {
    position: fixed;
    z-index: 120;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 14px 0 0;
    background: rgba(45, 31, 22, .34);
    overscroll-behavior: contain;
  }

  .v07-mobile-material-quick-backdrop {
    z-index: 130;
    background: rgba(45, 31, 22, .42);
  }

  .v07-mobile-material-detail-sheet,
  .v07-mobile-material-quick-sheet {
    display: grid;
    width: min(100%, 640px);
    max-height: min(90vh, 760px);
    overflow: hidden;
    border-radius: 22px 22px 0 0;
    color: var(--ink, #46382d);
    background: #fffaf4;
    box-shadow: 0 -12px 40px rgba(46, 30, 21, .2);
  }

  .v07-mobile-material-detail-sheet {
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .v07-mobile-material-quick-sheet {
    max-height: min(78vh, 560px);
  }

  .v07-material-detail-header,
  .v07-mobile-material-quick-sheet > header {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    align-items: center;
    gap: 8px;
    padding: 13px 15px 11px;
    border-bottom: 1px solid rgba(173, 153, 132, .2);
    background: #fffdf9;
  }

  .v07-material-detail-header button,
  .v07-mobile-material-quick-sheet > header button {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 9px;
    color: var(--rust-dark, #873c27);
    background: #f7e9df;
    font: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
  }

  .v07-material-detail-header > div,
  .v07-mobile-material-quick-sheet > header > div {
    min-width: 0;
    text-align: center;
  }

  .v07-material-detail-header span,
  .v07-mobile-material-quick-sheet > header span {
    color: #a87a61;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
  }

  .v07-material-detail-header h2,
  .v07-mobile-material-quick-sheet > header h2 {
    margin: 1px 0 0;
    overflow: hidden;
    font-size: 18px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .v07-material-detail-scroll,
  .v07-mobile-material-quick-sheet form {
    min-height: 0;
    overflow-y: auto;
    padding: 14px 15px calc(16px + env(safe-area-inset-bottom));
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .v07-material-detail-scroll {
    display: grid;
    gap: 11px;
  }

  .v07-material-detail-unit-price,
  .v07-material-detail-current-option,
  .v07-material-detail-options,
  .v07-material-detail-editor,
  .v07-material-detail-management {
    border: 1px solid rgba(173, 153, 132, .22);
    border-radius: 14px;
    background: rgba(255, 253, 249, .92);
  }

  .v07-material-detail-unit-price {
    display: grid;
    gap: 3px;
    padding: 15px;
    border-color: rgba(163, 77, 46, .22);
    background: #fdf1e8;
  }

  .v07-material-detail-unit-price span,
  .v07-material-detail-unit-price small {
    color: var(--muted, #81766a);
    font-size: 10px;
  }

  .v07-material-detail-unit-price strong {
    color: var(--rust-dark, #873c27);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 27px;
    line-height: 1.15;
  }

  .v07-material-detail-current-option,
  .v07-material-detail-options,
  .v07-material-detail-editor {
    padding: 13px;
  }

  .v07-material-detail-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
  }

  .v07-material-detail-section-head strong {
    display: block;
    font-size: 13px;
    line-height: 1.3;
  }

  .v07-material-detail-section-head small {
    display: block;
    margin-top: 2px;
    color: var(--muted, #81766a);
    font-size: 10px;
    line-height: 1.4;
  }

  .v07-material-detail-section-head > button {
    min-height: 31px;
    padding: 4px 8px;
    border: 1px solid rgba(163, 77, 46, .26);
    border-radius: 8px;
    color: var(--rust-dark, #873c27);
    background: #fff9f3;
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
  }

  .v07-material-detail-current {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    padding: 3px 7px;
    border-radius: 999px;
    color: #5f7d60;
    background: #edf4e9;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
  }

  .v07-material-detail-option-main {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-width: 0;
  }

  .v07-material-detail-option-main > .material-image-control,
  .v07-material-detail-option-main > .v07-material-compact-thumb {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(207, 185, 164, .72);
    border-radius: 10px;
    background: #faf5ee;
  }

  .v07-material-detail-option-main .material-image-control img,
  .v07-material-detail-option-main .v07-material-compact-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 3px;
  }

  .v07-material-detail-option-main > div {
    min-width: 0;
  }

  .v07-material-detail-option-main strong {
    display: block;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .v07-material-detail-option-main small {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: var(--muted, #81766a);
    font-size: 10px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .v07-material-detail-quick-price {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
    margin-top: 11px;
    padding: 7px 10px;
    border: 1px solid rgba(163, 77, 46, .25);
    border-radius: 10px;
    color: var(--rust-dark, #873c27);
    background: #fff8f1;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
  }

  .v07-material-detail-option-list {
    display: grid;
    gap: 7px;
  }

  .v07-material-detail-option {
    display: grid;
    gap: 8px;
    padding: 9px;
    border-top: 1px solid rgba(173, 153, 132, .16);
  }

  .v07-material-detail-option:first-child {
    border-top: 0;
  }

  .v07-material-detail-option .v07-material-detail-option-main {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .v07-material-detail-option .v07-material-detail-option-main > .material-image-control,
  .v07-material-detail-option .v07-material-detail-option-main > .v07-material-compact-thumb {
    width: 42px;
    height: 42px;
  }

  .v07-material-detail-option-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
  }

  .v07-material-detail-option-actions button,
  .v07-material-detail-editor-foot button {
    min-height: 31px;
    padding: 4px 8px;
    border: 1px solid rgba(163, 77, 46, .23);
    border-radius: 8px;
    color: var(--rust-dark, #873c27);
    background: #fff9f3;
    font: inherit;
    font-size: 10px;
    font-weight: 800;
  }

  .v07-material-detail-option-actions span {
    margin-right: auto;
    color: #9a7238;
    font-size: 10px;
    font-weight: 800;
  }

  .v07-material-detail-empty {
    margin: 0;
    color: var(--muted, #81766a);
    font-size: 10px;
  }

  .v07-material-detail-management {
    overflow: hidden;
  }

  .v07-material-detail-management summary {
    min-height: 43px;
    padding: 12px 13px;
    color: var(--ink-soft, #5e5144);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
  }

  .v07-material-detail-management-body {
    display: grid;
    gap: 9px;
    padding: 0 13px 13px;
  }

  .v07-material-detail-management-body label,
  .v07-material-detail-editor > label,
  .v07-material-detail-editor-grid label,
  .v07-mobile-material-quick-sheet form > label {
    display: grid;
    gap: 5px;
    color: #6a7e80;
    font-size: 10px;
    font-weight: 800;
  }

  .v07-material-detail-management-body input,
  .v07-material-detail-editor input,
  .v07-material-detail-editor select,
  .v07-mobile-material-quick-sheet input {
    width: 100%;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid rgba(92, 137, 145, .25);
    border-radius: 9px;
    color: var(--ink, #46382d);
    background: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
  }

  .v07-material-detail-management-body small {
    color: var(--muted, #81766a);
    font-size: 10px;
    line-height: 1.45;
  }

  .v07-material-detail-danger {
    justify-self: start;
    min-height: 30px;
    padding: 4px 0;
    border: 0 !important;
    color: #a15e45 !important;
    background: transparent !important;
    font: inherit;
    font-size: 10px;
    font-weight: 700;
  }

  .v07-material-detail-editor {
    display: grid;
    gap: 10px;
    border-color: rgba(92, 137, 145, .3);
    background: #f4faf9;
  }

  .v07-material-detail-editor-identity {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
  }

  .v07-material-detail-editor-identity .material-product-image-editor {
    display: grid;
    width: 58px;
    justify-items: center;
  }

  .v07-material-detail-editor-identity .material-price-image-editor,
  .v07-material-detail-editor-identity .material-image-preview-trigger,
  .v07-material-detail-editor-identity .material-image-control.compact {
    width: 52px;
    height: 52px;
  }

  .v07-material-detail-editor-identity > div {
    display: grid;
    min-width: 0;
    gap: 3px;
  }

  .v07-material-detail-editor-label {
    color: #6a7e80;
    font-size: 9px;
    font-weight: 800;
  }

  .v07-material-detail-editor-identity strong {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .v07-material-detail-editor-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
  }

  .v07-material-detail-package,
  .v07-material-detail-money {
    display: flex;
    align-items: center;
    min-width: 0;
  }

  .v07-material-detail-package select {
    flex: 0 0 57px;
    width: 57px;
    margin-left: 4px;
    padding-right: 18px;
  }

  .v07-material-detail-money > span {
    flex: 0 0 auto;
    margin-right: 4px;
    color: #8d7663;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
  }

  .v07-material-detail-editor-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    color: var(--muted, #81766a);
    font-size: 10px;
  }

  .v07-material-detail-editor-foot > span:first-child {
    margin-right: auto;
  }

  .v07-material-detail-editor-foot strong {
    color: #5f7d60;
    font-size: 12px;
  }

  .v07-material-detail-footer {
    padding: 9px 15px calc(9px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(173, 153, 132, .18);
    background: #fffdf9;
  }

  .v07-material-detail-footer button {
    width: 100%;
    min-height: 42px;
    border: 0;
    border-radius: 11px;
    color: #fffaf4;
    background: var(--rust, #a84d32);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
  }

  .v07-mobile-material-quick-sheet form {
    display: grid;
    gap: 13px;
  }

  .v07-mobile-material-quick-sheet dl {
    display: grid;
    gap: 7px;
    margin: 0;
  }

  .v07-mobile-material-quick-sheet dl div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 7px;
    border-bottom: 1px solid rgba(173, 153, 132, .14);
  }

  .v07-mobile-material-quick-sheet dt {
    color: var(--muted, #81766a);
    font-size: 10px;
  }

  .v07-mobile-material-quick-sheet dd {
    max-width: 70%;
    margin: 0;
    overflow: hidden;
    color: var(--ink-soft, #5e5144);
    font-size: 11px;
    font-weight: 700;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .v07-material-quick-price-input {
    display: flex;
    align-items: center;
  }

  .v07-material-quick-price-input > span {
    flex: 0 0 auto;
    margin-right: 5px;
    color: #8d7663;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
  }

  .v07-mobile-material-quick-sheet form > p {
    margin: 0;
    color: var(--muted, #81766a);
    font-size: 11px;
  }

  .v07-mobile-material-quick-sheet form > p strong {
    color: #5f7d60;
    font-size: 14px;
  }

  .v07-mobile-material-quick-sheet form > footer {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 8px;
  }

  .v07-mobile-material-quick-sheet form > footer button {
    min-height: 43px;
    border: 0;
    border-radius: 10px;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
  }

  .v07-mobile-material-quick-sheet form > footer button[type="submit"] {
    color: #fffaf4;
    background: var(--rust, #a84d32);
  }

  .v07-material-quick-cancel {
    color: var(--ink-soft, #5e5144);
    background: #f4ece4;
  }

  html.v07-mobile-material-sheet-open {
    overflow: hidden;
  }
}

@media (max-width: 380px) {
  .v07-material-compact-card {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 7px;
    padding: 8px;
  }

  .v07-material-compact-card > .material-image-control,
  .v07-material-compact-thumb {
    width: 44px;
    height: 44px;
    min-width: 44px;
  }

  .v07-material-compact-main strong {
    font-size: 14px;
  }

  .v07-material-compact-price {
    max-width: 82px;
  }
}

/* A main material can have many purchasable products. Keep the product used
   for costing fully editable, then demote the rest to compact alternatives so
   the relationship stays obvious instead of reading as several peer materials. */
@media (max-width: 900px) {
  .v07-material-mobile-product-section {
    display: grid;
    gap: 9px;
  }

  .v07-material-mobile-current-product {
    padding: 9px;
    border: 1px solid rgba(95, 126, 97, .28);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(237, 244, 233, .78), rgba(255, 253, 249, .92) 62%);
  }

  .v07-material-mobile-current-product > .v07-material-mobile-product,
  .v07-material-mobile-option-editor > .v07-material-mobile-product {
    gap: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .v07-material-mobile-current-product .v07-material-mobile-product-title small {
    color: #5f7d60;
  }

  .v07-material-mobile-current-product .material-current-badge {
    min-height: 28px;
    padding: 5px 7px;
    border-radius: 8px;
    color: #557257;
    background: #e9f2e6;
    font-size: 9px;
  }

  .v07-material-mobile-alternatives {
    overflow: hidden;
    border: 1px solid rgba(173, 153, 132, .25);
    border-radius: 12px;
    background: rgba(255, 253, 249, .88);
  }

  .v07-material-mobile-alternatives-toggle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    width: 100%;
    min-height: 54px;
    gap: 8px;
    padding: 8px 10px;
    border: 0;
    color: var(--ink-soft, #5e5144);
    background: rgba(250, 246, 239, .7);
    font: inherit;
    text-align: left;
    cursor: pointer;
  }

  .v07-material-mobile-alternatives-toggle:focus-visible {
    outline: 2px solid rgba(173, 79, 47, .42);
    outline-offset: -2px;
  }

  .v07-material-mobile-alternatives-toggle > span:first-child {
    display: grid;
    min-width: 0;
    gap: 2px;
  }

  .v07-material-mobile-alternatives-toggle strong {
    font-size: 11px;
    line-height: 1.25;
  }

  .v07-material-mobile-alternatives-toggle small {
    overflow: hidden;
    color: var(--muted, #81766a);
    font-size: 9px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .v07-material-mobile-alternatives-count {
    display: inline-grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 50%;
    color: var(--rust-dark, #8e4935);
    background: #f8e6db;
    font-size: 10px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }

  .v07-material-mobile-alternatives-chevron,
  .v07-material-mobile-option-chevron {
    color: var(--rust, #a84d32);
    font-size: 14px;
    line-height: 1;
  }

  .v07-material-mobile-alternatives-list {
    display: grid;
    margin: 0 8px 8px;
    overflow: hidden;
    border: 1px solid rgba(173, 153, 132, .19);
    border-radius: 10px;
    background: #fffdf9;
  }

  .v07-material-mobile-option {
    min-width: 0;
    background: #fffdf9;
  }

  .v07-material-mobile-option + .v07-material-mobile-option {
    border-top: 1px solid rgba(173, 153, 132, .16);
  }

  .v07-material-mobile-option.is-match {
    background: #fff9f2;
  }

  .v07-material-mobile-option-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 8px 9px 3px;
  }

  .v07-material-mobile-option .v07-material-mobile-thumb {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    font-size: 10px;
  }

  .v07-material-mobile-option .v07-material-mobile-thumb img {
    padding: 3px;
  }

  .v07-material-mobile-option-toggle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-width: 0;
    gap: 7px;
    padding: 0;
    border: 0;
    color: var(--ink-soft, #5e5144);
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }

  .v07-material-mobile-option-toggle:focus-visible {
    outline: 2px solid rgba(173, 79, 47, .36);
    outline-offset: 3px;
    border-radius: 5px;
  }

  .v07-material-mobile-option-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
  }

  .v07-material-mobile-option-copy strong,
  .v07-material-mobile-option-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .v07-material-mobile-option-copy strong {
    color: var(--ink-soft, #5e5144);
    font-size: 11px;
    line-height: 1.3;
  }

  .v07-material-mobile-option-copy strong.is-empty {
    color: #9c9185;
    font-weight: 600;
  }

  .v07-material-mobile-option-copy small {
    color: var(--muted, #81766a);
    font-size: 9px;
    line-height: 1.25;
  }

  .v07-material-mobile-option-foot {
    display: flex;
    align-items: center;
    min-height: 30px;
    gap: 5px;
    padding: 0 9px 8px 59px;
  }

  .v07-material-mobile-option-foot .v07-material-mobile-status {
    margin: 0;
  }

  .v07-material-mobile-option-price {
    overflow: hidden;
    color: #6a7e68;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 11px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .v07-material-mobile-option-set-current {
    min-height: 27px;
    margin-left: auto;
    padding: 4px 7px;
    border: 1px solid rgba(95, 126, 97, .3);
    border-radius: 7px;
    color: #557257;
    background: #edf4e9;
    font: inherit;
    font-size: 9px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
  }

  .v07-material-mobile-option-set-current:hover,
  .v07-material-mobile-option-set-current:focus-visible {
    border-color: rgba(95, 126, 97, .58);
    background: #dfedda;
    outline: 0;
  }

  .v07-material-mobile-option-note {
    margin-left: auto;
    color: #9a7238;
    font-size: 9px;
    white-space: nowrap;
  }

  .v07-material-mobile-option-editor {
    padding: 9px;
    border-top: 1px solid rgba(173, 153, 132, .16);
    background: #fffaf3;
  }

  .v07-material-mobile-option-editor .v07-material-mobile-product-top {
    padding-bottom: 1px;
  }

  .v07-material-mobile-option-editor .v07-material-mobile-product-title small {
    color: #a87a61;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v07-material-mobile-card,
  .v07-material-mobile-filter,
  .v07-material-mobile-summary-action {
    transition: none;
  }
}

/* Keep the expanded editor readable on a phone: preserve the context row,
   then give the actual fields a denser, calmer editing rhythm. */
@media (max-width: 900px) {
  .v07-material-mobile-card.is-expanded {
    scroll-margin-top: calc(60px + env(safe-area-inset-top) + 62px);
  }

  .v07-material-mobile-detail {
    gap: 10px;
    padding: 11px 12px 14px;
  }

  .v07-material-mobile-card.is-expanded .v07-material-mobile-card-summary {
    padding: 7px 12px 8px;
  }

  .v07-material-mobile-card.is-expanded .v07-material-mobile-current {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 6px;
  }

  .v07-material-mobile-card.is-expanded .v07-material-mobile-current > small {
    display: none;
  }

  .v07-material-mobile-card.is-expanded .v07-material-mobile-current > span:first-of-type {
    grid-column: 1;
    grid-row: 1;
    font-size: 11px;
  }

  .v07-material-mobile-card.is-expanded .v07-material-mobile-current > .v07-material-mobile-status {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
  }

  .v07-material-mobile-group-editor {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 9px;
  }

  .v07-material-mobile-group-editor .v07-material-mobile-delete-group {
    grid-column: 1 / -1;
    min-height: 27px;
    padding-top: 7px;
    border-top: 1px solid rgba(92, 137, 145, .16);
  }

  .v07-material-mobile-products-head {
    padding-top: 0;
  }

  .v07-material-mobile-product-list {
    gap: 8px;
  }

  .v07-material-mobile-product {
    gap: 8px;
    padding: 9px;
    border-radius: 12px;
  }

  .v07-material-mobile-product-top {
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 4px 8px;
  }

  /* Move the secondary image action beside the product title instead of
     stacking both actions under the thumbnail. */
  .v07-material-mobile-product-top .material-product-image-editor {
    display: contents;
    width: auto;
  }

  .v07-material-mobile-product-top .material-price-image-editor {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    width: 58px;
  }

  .v07-material-mobile-product-top > .v07-material-mobile-product-title {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

  .v07-material-mobile-product-top .material-image-reuse-button {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    width: auto;
    max-width: 100%;
    min-height: 22px;
    padding: 2px 0;
    font-size: 9px;
  }

  .v07-material-mobile-product-top .material-image-preview-trigger,
  .v07-material-mobile-product-top .material-image-control.compact {
    flex-basis: 50px;
    width: 50px;
    height: 50px;
  }

  .v07-material-mobile-product-top .material-image-upload-action {
    width: 58px;
    max-width: 58px;
    min-height: 18px;
    padding: 1px 0;
    font-size: 8px;
  }

  .v07-material-mobile-product-grid {
    gap: 7px;
  }

  .v07-material-mobile-field input,
  .v07-material-mobile-product-field input,
  .v07-material-mobile-product-field select {
    min-height: 40px;
    padding: 7px 9px;
  }
}

@media (max-width: 360px) {
  .v07-material-mobile-group-editor {
    grid-template-columns: minmax(0, 1fr);
  }

  .v07-material-mobile-group-editor .v07-material-mobile-delete-group {
    grid-column: auto;
  }
}

/* Public catalog mobile controls and view-specific layouts. The list stays
   scan-first; the card view gets a clearly different reading rhythm. */
@media (max-width: 900px) {
  #costs #costMaterialsPanel .material-public-catalog-control-row {
    display: grid;
    gap: 10px;
    margin-bottom: 12px;
  }

  #costs #costMaterialsPanel .material-public-catalog-scopes {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    gap: 5px;
    padding: 4px;
    border: 1px solid var(--line, rgba(173, 153, 132, .24));
    border-radius: 12px;
    background: var(--surface-soft, rgba(244, 237, 228, .72));
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  #costs #costMaterialsPanel .material-public-catalog-scopes::-webkit-scrollbar {
    display: none;
  }

  #costs #costMaterialsPanel .material-public-catalog-scopes button.material-public-scope-button {
    flex: 1 0 68px;
    min-width: 68px;
    min-height: 36px;
    padding: 6px 8px;
    border: 0;
    border-radius: 9px;
    color: var(--muted, #81766a);
    background: transparent;
    font-size: 10px;
    line-height: 1.15;
    white-space: nowrap;
  }

  #costs #costMaterialsPanel .material-public-catalog-scopes button.material-public-scope-button:hover,
  #costs #costMaterialsPanel .material-public-catalog-scopes button.material-public-scope-button:focus-visible {
    border-color: transparent;
    color: var(--rust-dark, #873c27);
    background: rgba(255, 253, 249, .8);
    outline: 0;
  }

  #costs #costMaterialsPanel .material-public-catalog-scopes button.material-public-scope-button[aria-pressed="true"] {
    border-color: color-mix(in srgb, var(--rust, #a84d32) 28%, var(--line, #e5d9ce));
    color: var(--rust-dark, #873c27);
    background: var(--pink-soft, #f0ddd4);
    box-shadow: 0 2px 7px rgba(91, 57, 36, .08);
  }

  #costs #costMaterialsPanel .material-public-catalog-scopes button.material-public-scope-button > span {
    min-width: 17px;
    height: 17px;
    margin-left: 4px;
    background: rgba(255, 253, 249, .78);
  }

  #costs #costMaterialsPanel .material-public-catalog-view-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    width: 100%;
  }

  #costs #costMaterialsPanel .material-public-catalog-sort {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    min-width: 0;
    gap: 6px;
  }

  #costs #costMaterialsPanel .material-public-catalog-sort select {
    width: 100%;
    min-width: 0;
  }

  #costs #costMaterialsPanel .material-public-catalog-view-toggle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
    padding: 3px;
    border: 1px solid var(--line, rgba(173, 153, 132, .24));
    border-radius: 11px;
    background: var(--surface-soft, rgba(244, 237, 228, .72));
  }

  #costs #costMaterialsPanel .material-public-catalog-view-toggle button.material-public-view-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 48px;
    min-height: 36px;
    padding: 4px 7px;
    border: 0;
    border-radius: 8px;
    color: var(--muted, #81766a);
    background: transparent;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.15;
  }

  #costs #costMaterialsPanel .material-public-catalog-view-toggle button.material-public-view-button:hover,
  #costs #costMaterialsPanel .material-public-catalog-view-toggle button.material-public-view-button:focus-visible {
    border-color: transparent;
    color: var(--rust-dark, #873c27);
    background: rgba(255, 253, 249, .8);
    outline: 0;
  }

  #costs #costMaterialsPanel .material-public-catalog-view-toggle button.material-public-view-button[aria-pressed="true"] {
    border-color: color-mix(in srgb, var(--rust, #a84d32) 28%, var(--line, #e5d9ce));
    color: var(--rust-dark, #873c27);
    background: var(--pink-soft, #f0ddd4);
    box-shadow: 0 2px 7px rgba(91, 57, 36, .08);
  }

  #costs #costMaterialsPanel .material-public-view-icon {
    display: inline-grid;
    width: 15px;
    height: 15px;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
  }

  /* List: keep the image and key facts on one scan line, with actions just
     below the copy so two buttons never squeeze the material name. */
  #costs #costMaterialsPanel .material-public-catalog-grid.is-list {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  #costs #costMaterialsPanel .material-public-catalog-grid.is-list .material-public-group-summary {
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: start;
    gap: 9px;
    padding: 10px;
  }

  #costs #costMaterialsPanel .material-public-catalog-grid.is-list .material-public-card-image {
    width: 52px;
    height: 52px;
    border-radius: 10px;
  }

  #costs #costMaterialsPanel .material-public-catalog-grid.is-list .material-public-group-main {
    gap: 3px;
  }

  #costs #costMaterialsPanel .material-public-catalog-grid.is-list .material-public-group-title strong {
    font-size: 14px;
  }

  #costs #costMaterialsPanel .material-public-catalog-grid.is-list .material-public-group-meta,
  #costs #costMaterialsPanel .material-public-catalog-grid.is-list .material-public-group-source {
    font-size: 10px;
  }

  #costs #costMaterialsPanel .material-public-catalog-grid.is-list .material-public-group-actions {
    grid-column: 2;
    justify-content: flex-start;
    gap: 6px;
    padding-top: 1px;
  }

  #costs #costMaterialsPanel .material-public-catalog-grid.is-list .material-public-group-actions button {
    min-height: 32px;
    padding: 5px 7px;
    font-size: 10px;
  }

  #costs #costMaterialsPanel .material-public-catalog-grid.is-list .material-public-variants {
    padding: 9px 10px 10px 71px;
  }

  /* Card: deliberately switch to a vertical information hierarchy. At a
     wider phone width two compact cards can sit side by side; a narrow phone
     remains one card per row without losing the distinction. */
  #costs #costMaterialsPanel .material-public-catalog-grid.is-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  #costs #costMaterialsPanel .material-public-catalog-grid.is-grid .material-public-group {
    display: flex;
    flex-direction: column;
  }

  #costs #costMaterialsPanel .material-public-catalog-grid.is-grid .material-public-group-summary {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
    padding: 12px;
  }

  #costs #costMaterialsPanel .material-public-catalog-grid.is-grid .material-public-card-image {
    align-self: flex-start;
    width: 72px;
    height: 72px;
    border-radius: 12px;
  }

  #costs #costMaterialsPanel .material-public-catalog-grid.is-grid .material-public-group-main {
    gap: 5px;
  }

  #costs #costMaterialsPanel .material-public-catalog-grid.is-grid .material-public-group-title strong {
    font-size: 15px;
  }

  #costs #costMaterialsPanel .material-public-catalog-grid.is-grid .material-public-group-meta {
    gap: 4px 8px;
    font-size: 10px;
  }

  #costs #costMaterialsPanel .material-public-catalog-grid.is-grid .material-public-group-source {
    display: -webkit-box;
    overflow: hidden;
    font-size: 10px;
    line-height: 1.45;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  #costs #costMaterialsPanel .material-public-catalog-grid.is-grid .material-public-group-actions {
    display: flex;
    width: 100%;
    justify-content: stretch;
    gap: 6px;
    padding: 0;
  }

  #costs #costMaterialsPanel .material-public-catalog-grid.is-grid .material-public-group-actions button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 35px;
    padding: 5px 6px;
    font-size: 10px;
  }

  #costs #costMaterialsPanel .material-public-catalog-grid.is-grid .material-public-group.is-expanded {
    grid-column: 1 / -1;
  }

  #costs #costMaterialsPanel .material-public-catalog-grid.is-grid .material-public-variants {
    padding: 10px 12px 12px;
  }

  #costs #costMaterialsPanel .material-public-catalog-grid.is-grid .material-public-variant-row {
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: start;
  }

  #costs #costMaterialsPanel .material-public-catalog-grid.is-grid .material-public-variant-actions {
    grid-column: 2;
    justify-content: flex-start;
    padding-left: 0;
  }
}

@media (min-width: 520px) and (max-width: 900px) {
  #costs #costMaterialsPanel .material-public-catalog-grid.is-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 380px) {
  #costs #costMaterialsPanel .material-public-catalog-scopes button.material-public-scope-button {
    flex-basis: 62px;
    min-width: 62px;
    padding-right: 6px;
    padding-left: 6px;
    font-size: 9px;
  }

  #costs #costMaterialsPanel .material-public-catalog-view-toggle button.material-public-view-button {
    min-width: 44px;
    padding-right: 5px;
    padding-left: 5px;
    font-size: 9px;
  }
}

/* V0.7 material-cost pass 2: keep the phone view scan-first. The desktop
   renderer and its information architecture remain unchanged. */
.v07-material-mobile-toolbar,
.v07-material-mobile-heading {
  display: contents;
}

.v07-material-mobile-add,
.costs-subtitle-mobile,
.material-public-catalog-mobile-secondary {
  display: none;
}

@media (max-width: 900px) {
  #costs,
  #costs.view.active,
  #costs #costMaterialsPanel,
  #costs #costMaterialsPanel .price-library,
  #costs #costMaterialsPanel .price-library-head,
  #costs #costMaterialsPanel .table-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  #costs .competitor-tabs {
    position: static;
    top: auto;
    z-index: auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    backdrop-filter: none;
  }

  #costs #costMaterialsPanel > .page-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-height: 0;
    margin-bottom: 11px;
    text-align: left;
  }

  #costs #costMaterialsPanel > .page-header > div {
    width: 100%;
    min-width: 0;
  }

  #costs #costMaterialsPanel > .page-header .eyebrow {
    display: block !important;
    font-size: 9px;
    letter-spacing: .08em;
  }

  #costs #costMaterialsPanel > .page-header h1 {
    margin: 2px 0 3px;
    font-size: 27px;
    line-height: 1.08;
  }

  #costs #costMaterialsPanel > .page-header p {
    max-width: none;
    margin: 0;
    font-size: 10px;
    line-height: 1.45;
  }

  #costs #costMaterialsPanel > .page-header .costs-subtitle-desktop {
    display: none;
  }

  #costs #costMaterialsPanel > .page-header .costs-subtitle-mobile {
    display: inline;
  }

  #costs #costMaterialsPanel > .page-header > #addPriceItemButton {
    display: none;
  }

  #costs #costMaterialsPanel > .cost-stats {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0 0 12px;
    padding: 8px 0;
    border-top: 1px solid rgba(173, 153, 132, .2);
    border-bottom: 1px solid rgba(173, 153, 132, .2);
    background: transparent;
  }

  #costs #costMaterialsPanel > .cost-stats .cost-stat {
    display: flex;
    flex: 1 1 0;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    min-height: 0;
    padding: 0 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #costs #costMaterialsPanel > .cost-stats .cost-stat[hidden] {
    display: none !important;
  }

  #costs #costMaterialsPanel > .cost-stats .cost-stat + .cost-stat {
    border-left: 1px solid rgba(173, 153, 132, .18);
  }

  #costs #costMaterialsPanel > .cost-stats .cost-stat small {
    min-height: 0;
    margin: 0;
    color: var(--muted, #81766a);
    font-size: 10px;
    line-height: 1.2;
    white-space: nowrap;
  }

  #costs #costMaterialsPanel > .cost-stats .cost-stat strong {
    color: var(--ink, #46382d);
    font-size: 17px;
    line-height: 1;
  }

  .v07-material-mobile-toolbar {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    position: sticky;
    top: calc(60px + env(safe-area-inset-top));
    z-index: 20;
    margin: 0 0 8px;
    padding: 7px 0 4px;
    background: linear-gradient(180deg, rgba(250, 246, 238, .98), rgba(250, 246, 238, .9) 78%, rgba(250, 246, 238, 0));
    backdrop-filter: blur(14px);
  }

  #costs #costMaterialsPanel .price-library-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    padding: 0 0 6px;
  }

  .v07-material-mobile-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .v07-material-mobile-heading > div {
    min-width: 0;
  }

  #costs #costMaterialsPanel .price-library-head h3 {
    margin: 0 0 2px;
    font-size: 18px;
    line-height: 1.2;
  }

  #costs #costMaterialsPanel .price-library-head p {
    max-width: none;
    font-size: 10px;
    line-height: 1.35;
  }

  .v07-material-mobile-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 31px;
    padding: 5px 8px;
    border: 1px solid rgba(163, 77, 46, .26);
    border-radius: 9px;
    color: var(--rust-dark, #8e4935);
    background: rgba(255, 249, 243, .9);
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
  }

  .v07-material-mobile-add:hover,
  .v07-material-mobile-add:focus-visible {
    border-color: rgba(163, 77, 46, .5);
    background: #fffdf9;
    outline: 0;
  }

  #costs #costMaterialsPanel .price-search {
    min-height: 40px;
    border-radius: 11px;
  }

  .v07-material-mobile-controls {
    gap: 5px;
    margin: 0;
  }

  .v07-material-mobile-control-row {
    gap: 6px;
  }

  .v07-material-mobile-filter-list {
    gap: 2px;
    padding: 2px;
    border-radius: 10px;
  }

  .v07-material-mobile-filter {
    min-height: 31px;
    padding: 4px 2px;
    border-radius: 8px;
    font-size: 9px;
  }

  .v07-material-mobile-filter span {
    font-size: 9px;
  }

  .v07-material-mobile-sort {
    gap: 4px;
    font-size: 9px;
  }

  .v07-material-mobile-sort select {
    min-height: 31px;
    max-width: 82px;
    padding: 4px 19px 4px 6px;
    border-radius: 8px;
    font-size: 9px;
  }

  .v07-material-mobile-result {
    min-height: 14px;
    padding: 0 2px;
    font-size: 9px;
  }

  .v07-material-mobile-result > span {
    display: none;
  }

  .v07-material-mobile-list {
    gap: 6px;
  }

  .v07-material-mobile-card {
    border-radius: 12px;
    box-shadow: none;
  }

  .v07-material-mobile-card.is-expanded {
    box-shadow: 0 5px 16px rgba(74, 49, 31, .07);
  }

  .v07-material-mobile-card-head {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 8px 10px 7px;
  }

  .v07-material-mobile-thumb {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    font-size: 10px;
  }

  .v07-material-mobile-thumb img {
    padding: 3px;
  }

  .v07-material-mobile-kicker {
    margin-bottom: 2px;
    font-size: 8px;
  }

  .v07-material-mobile-toggle strong {
    font-size: 14px;
    line-height: 1.2;
  }

  .v07-material-mobile-aliases {
    display: none;
  }

  .v07-material-mobile-price {
    min-width: 48px;
  }

  .v07-material-mobile-price small {
    display: none;
  }

  .v07-material-mobile-price strong {
    margin: 0;
    font-size: 15px;
  }

  .v07-material-mobile-price strong.is-pending {
    font-size: 10px;
  }

  .v07-material-mobile-price span {
    max-width: 62px;
    font-size: 8px;
  }

  .v07-material-mobile-card-summary,
  .v07-material-mobile-card.is-expanded .v07-material-mobile-card-summary {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    padding: 6px 10px 7px;
  }

  .v07-material-mobile-current,
  .v07-material-mobile-card.is-expanded .v07-material-mobile-current {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    overflow: hidden;
  }

  .v07-material-mobile-current > small:first-child,
  .v07-material-mobile-card.is-expanded .v07-material-current > small:first-child {
    display: none;
  }

  .v07-material-mobile-current > span,
  .v07-material-mobile-card.is-expanded .v07-material-current > span:first-of-type {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 11px;
    line-height: 1.2;
  }

  .v07-material-mobile-current > small:nth-of-type(2),
  .v07-material-mobile-card.is-expanded .v07-material-current > small:nth-of-type(2) {
    display: block;
    flex: 0 1 auto;
    max-width: 100px;
    font-size: 8px;
    line-height: 1.2;
  }

  .v07-material-mobile-current > .v07-material-mobile-status,
  .v07-material-mobile-card.is-expanded .v07-material-current > .v07-material-mobile-status {
    flex: 0 0 auto;
    margin: 0;
    padding: 2px 4px;
    font-size: 8px;
  }

  .v07-material-mobile-summary-action {
    min-height: 27px;
    padding: 3px 2px 3px 4px;
    border: 0;
    color: var(--rust-dark, #8e4935);
    background: transparent;
    font-size: 9px;
  }

  .v07-material-mobile-summary-action:hover,
  .v07-material-mobile-summary-action:focus-visible {
    background: transparent;
  }

  #costs #costMaterialsPanel .price-library-foot {
    display: none;
    align-items: center;
    justify-content: flex-end;
    flex-direction: row;
    gap: 8px;
    padding: 9px 0 0;
    border-top: 1px solid rgba(173, 153, 132, .16);
  }

  #costs #costMaterialsPanel .price-library-foot p {
    display: none;
  }

  #costs #costMaterialsPanel .price-library-foot .secondary-button {
    width: auto;
    min-height: 30px;
    padding: 5px 8px;
    border-radius: 9px;
    font-size: 9px;
  }

  /* The public example library is a launch banner; its full browser remains
     available after tapping the action. */
  #costs #costMaterialsPanel .material-public-catalog {
    margin: 0 0 11px;
    padding: 10px 11px 11px;
    border-radius: 12px;
    box-shadow: none;
  }

  #costs #costMaterialsPanel .material-public-catalog-head {
    align-items: center;
    flex-direction: row;
    gap: 8px;
  }

  #costs #costMaterialsPanel .material-public-catalog-copy {
    min-width: 0;
  }

  #costs #costMaterialsPanel .material-public-catalog-kicker,
  #costs #costMaterialsPanel .material-public-catalog-copy p,
  #costs #costMaterialsPanel .material-public-catalog-actions > span {
    display: none;
  }

  #costs #costMaterialsPanel .material-public-catalog-copy h3 {
    margin: 0;
    gap: 4px;
    font-size: 13px;
    line-height: 1.25;
  }

  #costs #costMaterialsPanel .material-public-catalog-copy h3 em {
    padding: 2px 5px;
    font-size: 8px;
  }

  #costs #costMaterialsPanel .material-public-catalog-actions {
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
  }

  #costs #costMaterialsPanel .material-public-catalog-actions .material-public-desktop-contributions {
    display: none;
  }

  #costs #costMaterialsPanel .material-public-catalog-mobile-secondary {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
  }

  #costs #costMaterialsPanel .material-public-catalog-mobile-secondary button {
    min-height: 30px;
    padding: 5px 8px;
    border-radius: 8px;
    font-size: 9px;
  }

  #costs #costMaterialsPanel .material-public-catalog-view-controls {
    display: none;
  }

  #costs #costMaterialsPanel .material-public-catalog-actions .secondary-button {
    min-height: 29px;
    padding: 4px 6px;
    border-radius: 8px;
    font-size: 9px;
  }

  #costs #costMaterialsPanel .material-public-catalog-body {
    margin-top: 10px;
    padding-top: 10px;
  }
}

@media (max-width: 380px) {
  .v07-material-mobile-heading {
    gap: 5px;
  }

  .v07-material-mobile-add {
    padding-right: 6px;
    padding-left: 6px;
    font-size: 9px;
  }

  .v07-material-mobile-card-head {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 7px;
  }

  .v07-material-mobile-thumb {
    width: 40px;
    height: 40px;
  }

  .v07-material-mobile-toggle strong {
    font-size: 13px;
  }

  .v07-material-mobile-current > small:nth-of-type(2),
  .v07-material-mobile-card.is-expanded .v07-material-current > small:nth-of-type(2) {
    display: none;
  }
}

/* V0.7 public catalog mobile pass: make the catalog a compact picker. The
   desktop catalog keeps its full filter rail and detailed card actions. */
.material-public-mobile-category-control {
  display: none;
}

.material-public-catalog-title-mobile,
.material-public-catalog-badge-mobile {
  display: none;
}

@media (max-width: 900px) {
  #costs #costMaterialsPanel .material-public-catalog-title-desktop,
  #costs #costMaterialsPanel .material-public-catalog-badge-desktop {
    display: none;
  }

  #costs #costMaterialsPanel .material-public-catalog-title-mobile,
  #costs #costMaterialsPanel .material-public-catalog-badge-mobile {
    display: inline;
  }

  #costs #costMaterialsPanel .material-public-catalog-mobile-secondary {
    display: none;
  }

  #costs #costMaterialsPanel .material-public-mobile-category-control {
    display: block;
    margin: 0 0 10px;
  }

  #costs #costMaterialsPanel .material-public-mobile-category-control button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 36px;
    padding: 7px 10px;
    border: 1px solid var(--line, rgba(173, 153, 132, .24));
    border-radius: 10px;
    color: var(--ink-soft, #5e5144);
    background: var(--surface-soft, rgba(255, 253, 248, .72));
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    text-align: left;
  }

  #costs #costMaterialsPanel .material-public-mobile-category-control button > strong {
    min-width: 0;
    margin-left: auto;
    overflow: hidden;
    color: var(--rust-dark, #873c27);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #costs #costMaterialsPanel .material-public-mobile-category-control button > span:last-child {
    flex: 0 0 auto;
    color: var(--rust, #a84d32);
    font-size: 14px;
    line-height: 1;
  }

  #costs #costMaterialsPanel .material-public-catalog-categories {
    display: none;
    margin: 0 0 10px;
    padding: 8px;
    border-radius: 10px;
  }

  #costs #costMaterialsPanel .material-public-catalog.is-mobile-category-open .material-public-catalog-categories {
    display: block;
  }

  #costs #costMaterialsPanel .material-public-catalog-categories > strong {
    display: none;
  }

  #costs #costMaterialsPanel .material-public-catalog-categories nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  #costs #costMaterialsPanel .material-public-catalog-categories nav button {
    min-height: 34px;
    padding: 6px 8px;
    border: 1px solid var(--line, rgba(173, 153, 132, .24));
    border-radius: 8px;
    font-size: 10px;
  }

  #costs #costMaterialsPanel .material-public-catalog-categories > p {
    display: none;
  }

  #costs #costMaterialsPanel .material-public-mobile-group .material-public-group-summary {
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: start;
    gap: 9px;
    padding: 10px;
  }

  #costs #costMaterialsPanel .material-public-mobile-group .material-public-card-image {
    width: 52px;
    height: 52px;
    border-radius: 10px;
  }

  #costs #costMaterialsPanel .material-public-mobile-group .material-public-group-main {
    gap: 4px;
  }

  #costs #costMaterialsPanel .material-public-mobile-group .material-public-group-title strong {
    font-size: 14px;
  }

  #costs #costMaterialsPanel .material-public-mobile-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px 8px;
    color: var(--ink-soft, #5e5144);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
  }

  #costs #costMaterialsPanel .material-public-mobile-meta > span + span::before {
    margin-right: 8px;
    color: var(--muted, #81766a);
    content: "·";
  }

  #costs #costMaterialsPanel .material-public-mobile-meta > span.is-added {
    color: var(--olive, #687b65);
  }

  #costs #costMaterialsPanel .material-public-mobile-meta > span.is-available {
    color: var(--rust-dark, #873c27);
  }

  #costs #costMaterialsPanel .material-public-mobile-source {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--ink-soft, #5e5144);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  #costs #costMaterialsPanel .material-public-mobile-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 2px;
  }

  #costs #costMaterialsPanel .material-public-mobile-action,
  #costs #costMaterialsPanel .material-public-mobile-actions .material-public-detail-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 32px;
    padding: 5px 8px;
    border: 1px solid var(--line, rgba(173, 153, 132, .24));
    border-radius: 8px;
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
  }

  #costs #costMaterialsPanel .material-public-mobile-action.is-primary {
    border-color: color-mix(in srgb, var(--rust, #a84d32) 30%, var(--line, #e5d9ce));
    color: var(--rust-dark, #873c27);
    background: var(--pink-soft, #f0ddd4);
    cursor: pointer;
  }

  #costs #costMaterialsPanel .material-public-mobile-action.is-added {
    border-color: rgba(95, 126, 97, .25);
    color: var(--olive, #687b65);
    background: var(--olive-soft, #dfe7dc);
  }

  #costs #costMaterialsPanel .material-public-mobile-action.is-readonly,
  #costs #costMaterialsPanel .material-public-mobile-action.is-copying {
    color: var(--muted, #81766a);
    background: var(--surface-soft, rgba(244, 237, 228, .72));
  }

  #costs #costMaterialsPanel .material-public-mobile-actions .material-public-detail-button {
    color: var(--ink-soft, #5e5144);
    background: var(--control-surface, rgba(255, 253, 248, .86));
    cursor: pointer;
  }

  #costs #costMaterialsPanel .material-public-mobile-actions .material-public-detail-button:hover,
  #costs #costMaterialsPanel .material-public-mobile-actions .material-public-detail-button:focus-visible,
  #costs #costMaterialsPanel .material-public-mobile-action.is-primary:hover,
  #costs #costMaterialsPanel .material-public-mobile-action.is-primary:focus-visible {
    border-color: color-mix(in srgb, var(--rust, #a84d32) 48%, var(--line, #e5d9ce));
    outline: 0;
  }

  #costs #costMaterialsPanel .material-public-mobile-group .material-public-variants {
    padding: 9px 10px 10px 71px;
  }
}

@media (max-width: 380px) {
  #costs #costMaterialsPanel .material-public-mobile-group .material-public-group-summary {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 8px;
  }

  #costs #costMaterialsPanel .material-public-mobile-group .material-public-card-image {
    width: 46px;
    height: 46px;
  }

  #costs #costMaterialsPanel .material-public-mobile-group .material-public-group-title strong {
    font-size: 13px;
  }

  #costs #costMaterialsPanel .material-public-mobile-meta,
  #costs #costMaterialsPanel .material-public-mobile-source,
  #costs #costMaterialsPanel .material-public-mobile-action,
  #costs #costMaterialsPanel .material-public-mobile-actions .material-public-detail-button {
    font-size: 9px;
  }
}

/* V0.7 mobile material-cost interaction feedback.
   Keep this limited to paint-only button feedback: no card height, display,
   layout, input, autosave, or scroll behavior is animated here. */
@media (max-width: 900px) {
  :root {
    --v07-material-motion-fast: var(--v07-motion-fast, 150ms);
    --v07-material-motion-ease: var(--v07-motion-ease, cubic-bezier(.2, .7, .2, 1));
    --v07-material-focus-ring: rgba(163, 77, 46, .24);
  }

  :where(
    .v07-material-mobile-filter,
    .v07-material-mobile-summary-action,
    .v07-material-mobile-toggle,
    button.v07-material-mobile-thumb,
    .v07-material-compact-main,
    .v07-material-compact-price,
    .v07-material-compact-detail-link,
    .v07-material-mobile-add,
    .v07-material-mobile-add-product,
    .v07-material-mobile-public,
    .v07-material-mobile-alternatives-toggle,
    .v07-material-mobile-option-toggle,
    .v07-material-mobile-option-set-current,
    .material-default-button,
    .material-contribute-button,
    .price-delete,
    .v07-material-detail-quick-price,
    .v07-material-detail-option-actions button,
    .v07-material-detail-editor-foot button
  ) {
    transition:
      color var(--v07-material-motion-fast) var(--v07-material-motion-ease),
      background-color var(--v07-material-motion-fast) var(--v07-material-motion-ease),
      border-color var(--v07-material-motion-fast) var(--v07-material-motion-ease),
      box-shadow var(--v07-material-motion-fast) var(--v07-material-motion-ease),
      transform var(--v07-material-motion-fast) var(--v07-material-motion-ease);
  }

  :where(
    .v07-material-mobile-filter,
    .v07-material-mobile-summary-action,
    .v07-material-mobile-toggle,
    button.v07-material-mobile-thumb,
    .v07-material-compact-main,
    .v07-material-compact-price,
    .v07-material-compact-detail-link,
    .v07-material-mobile-add,
    .v07-material-mobile-add-product,
    .v07-material-mobile-public,
    .v07-material-mobile-alternatives-toggle,
    .v07-material-mobile-option-toggle,
    .v07-material-mobile-option-set-current,
    .material-default-button,
    .material-contribute-button,
    .price-delete,
    .v07-material-detail-quick-price,
    .v07-material-detail-option-actions button,
    .v07-material-detail-editor-foot button
  ):not(:disabled):focus-visible {
    outline: 2px solid var(--v07-material-focus-ring);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(163, 77, 46, .09);
  }

}

@media (max-width: 900px) and (hover: hover) {
    .v07-material-mobile-filter:not(:disabled):hover {
      color: var(--rust, #a84d32);
      background: #fffdf9;
      box-shadow: 0 2px 8px rgba(91, 57, 36, .08);
    }

    :where(
      .v07-material-mobile-summary-action,
      .v07-material-mobile-add,
      .v07-material-mobile-add-product,
      .v07-material-mobile-public,
      .v07-material-detail-quick-price,
      .v07-material-detail-option-actions button,
      .v07-material-detail-editor-foot button,
      .material-default-button,
      .material-contribute-button
    ):not(:disabled):hover {
      border-color: rgba(163, 77, 46, .46);
      color: var(--rust-dark, #8e4935);
      background: #f9e9df;
      box-shadow: 0 2px 8px rgba(91, 57, 36, .07);
    }

    :where(
      .v07-material-mobile-toggle,
      button.v07-material-mobile-thumb,
      .v07-material-compact-main,
      .v07-material-compact-price,
      .v07-material-compact-detail-link
    ):not(:disabled):hover {
      background: rgba(253, 241, 232, .56);
    }

    .v07-material-mobile-alternatives-toggle:not(:disabled):hover {
      background: #fff9f2;
      box-shadow: inset 0 0 0 1px rgba(173, 79, 47, .12);
    }

    .v07-material-mobile-option-toggle:not(:disabled):hover {
      background: rgba(253, 241, 232, .56);
    }

    .price-delete:not(:disabled):hover {
      color: #8e4935;
      background: rgba(163, 77, 46, .08);
    }
}

@media (max-width: 900px) {
  :where(
    .v07-material-mobile-filter,
    .v07-material-mobile-summary-action,
    .v07-material-mobile-toggle,
    button.v07-material-mobile-thumb,
    .v07-material-compact-main,
    .v07-material-compact-price,
    .v07-material-compact-detail-link,
    .v07-material-mobile-add,
    .v07-material-mobile-add-product,
    .v07-material-mobile-public,
    .v07-material-mobile-alternatives-toggle,
    .v07-material-mobile-option-toggle,
    .v07-material-mobile-option-set-current,
    .material-default-button,
    .material-contribute-button,
    .price-delete,
    .v07-material-detail-quick-price,
    .v07-material-detail-option-actions button,
    .v07-material-detail-editor-foot button
  ):not(:disabled):active {
    transform: translateY(1px) scale(.985);
    box-shadow: none;
  }

  :where(
    .v07-material-mobile-filter,
    .v07-material-mobile-summary-action,
    .v07-material-mobile-add,
    .v07-material-mobile-add-product,
    .v07-material-mobile-public,
    .v07-material-detail-quick-price,
    .v07-material-detail-option-actions button,
    .v07-material-detail-editor-foot button,
    .material-default-button,
    .material-contribute-button
  ):not(:disabled):active {
    border-color: rgba(163, 77, 46, .58);
    color: var(--rust-dark, #8e4935);
    background-color: #f7e8df;
  }

  :where(
    .v07-material-mobile-toggle,
    button.v07-material-mobile-thumb,
    .v07-material-compact-main,
    .v07-material-compact-price,
    .v07-material-compact-detail-link,
    .v07-material-mobile-alternatives-toggle,
    .v07-material-mobile-option-toggle
  ):not(:disabled):active {
    color: var(--rust-dark, #8e4935);
    background-color: rgba(253, 241, 232, .9);
  }

  .v07-material-mobile-option-set-current:not(:disabled):active {
    border-color: rgba(95, 126, 97, .58);
    color: #557257;
    background-color: #dfedda;
  }

  .price-delete:not(:disabled):active {
    color: #8e4935;
    background-color: rgba(163, 77, 46, .12);
  }

  :where(
    .v07-material-mobile-status,
    .v07-material-compact-pending,
    .v07-material-detail-current,
    .material-current-badge
  ) {
    transition:
      color var(--v07-material-motion-fast) var(--v07-material-motion-ease),
      background-color var(--v07-material-motion-fast) var(--v07-material-motion-ease),
      box-shadow var(--v07-material-motion-fast) var(--v07-material-motion-ease);
  }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  :where(
    .v07-material-mobile-filter,
    .v07-material-mobile-summary-action,
    .v07-material-mobile-toggle,
    button.v07-material-mobile-thumb,
    .v07-material-compact-main,
    .v07-material-compact-price,
    .v07-material-compact-detail-link,
    .v07-material-mobile-add,
    .v07-material-mobile-add-product,
    .v07-material-mobile-public,
    .v07-material-mobile-alternatives-toggle,
    .v07-material-mobile-option-toggle,
    .v07-material-mobile-option-set-current,
    .material-default-button,
    .material-contribute-button,
    .price-delete,
    .v07-material-detail-quick-price,
    .v07-material-detail-option-actions button,
    .v07-material-detail-editor-foot button,
    .v07-material-mobile-status,
    .v07-material-compact-pending,
    .v07-material-detail-current,
    .material-current-badge
  ) {
    transition: none;
  }

  :where(
    .v07-material-mobile-filter,
    .v07-material-mobile-summary-action,
    .v07-material-mobile-toggle,
    button.v07-material-mobile-thumb,
    .v07-material-compact-main,
    .v07-material-compact-price,
    .v07-material-compact-detail-link,
    .v07-material-mobile-add,
    .v07-material-mobile-public,
    .v07-material-mobile-alternatives-toggle,
    .v07-material-mobile-option-toggle,
    .v07-material-mobile-option-set-current,
    .material-default-button,
    .material-contribute-button,
    .price-delete,
    .v07-material-detail-quick-price,
    .v07-material-detail-option-actions button,
    .v07-material-detail-editor-foot button
  ):not(:disabled):active {
    transform: none;
  }
}

/* V0.7 mobile material-cost pass 4: use the UI sans font for operational
   prices and never hide the value that determines recipe costing. The
   low-frequency management section remains intentionally collapsed. */
@media (max-width: 900px) {
  .v07-material-compact-card,
  .v07-mobile-material-detail-sheet,
  .v07-mobile-material-quick-sheet {
    font-family: var(--font-ui, "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", system-ui, -apple-system, sans-serif);
  }

  .v07-material-compact-price {
    max-width: 128px;
  }

  .v07-material-compact-price strong {
    max-width: 128px;
    overflow: visible;
    font-family: var(--font-ui, "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", system-ui, -apple-system, sans-serif);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.2;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .v07-material-detail-unit-price strong {
    font-family: var(--font-ui, "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", system-ui, -apple-system, sans-serif);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    letter-spacing: -.025em;
  }

  .v07-mobile-material-quick-sheet dd,
  .v07-material-detail-option-main strong,
  .v07-material-detail-option-main small {
    font-family: inherit;
  }
}

/* Scan-first material list. Only the phone layout changes; the desktop table
   and the public catalog's copy-to-workspace behavior stay untouched. */
@media (max-width: 900px) {
  #costs #costMaterialsPanel > .page-header,
  #costs #costMaterialsPanel > .cost-stats,
  #costs #costMaterialsPanel .price-library-head p,
  #costs #costMaterialsPanel .material-public-catalog:has(> .material-public-catalog-body[hidden]) {
    display: none;
  }

  #costs .competitor-tabs { margin-bottom: 9px; }
  #costs #costMaterialsPanel .price-library-head { gap: 5px; padding-bottom: 2px; }
  #costs #costMaterialsPanel .price-library-head h3 { margin: 0; font-size: 20px; }
  .v07-material-mobile-heading { grid-template-columns: minmax(0, 1fr) auto auto; }
  .v07-material-mobile-add,
  .v07-material-mobile-public { min-height: 38px; padding: 7px 10px; font-size: 11px; }

  #costs #costMaterialsPanel .v07-material-mobile-controls {
    position: relative;
    z-index: 31;
    gap: 3px;
    margin: 0 0 5px;
  }
  .v07-material-mobile-filter-list {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .v07-material-mobile-filter-list::-webkit-scrollbar { display: none; }
  .v07-material-mobile-filter { flex: 0 0 auto; min-height: 38px; padding: 6px 8px; font-size: 11px; }
  .v07-material-mobile-filter span { font-size: 10px; }
  .v07-material-mobile-sort select { min-height: 38px; font-size: 11px; }
  .v07-material-mobile-result { min-height: 18px; font-size: 11px; }
  .v07-material-mobile-result[hidden] { display: none; }
  .v07-material-mobile-result > span { display: inline; }

  .v07-material-mobile-compact-list { gap: 0; background: #fffdf9; border-radius: 13px; }
  .v07-material-compact-card {
    grid-template-columns: 42px minmax(0, 1fr) minmax(78px, auto);
    gap: 10px;
    min-height: 72px;
    padding: 10px 5px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }
  .v07-material-compact-card + .v07-material-compact-card { border-top: 1px solid rgba(173, 153, 132, .18); }
  .v07-material-compact-card > .material-image-control,
  .v07-material-compact-thumb { width: 42px; height: 42px; min-width: 42px; }
  .v07-material-compact-main { min-height: 48px; }
  .v07-material-compact-main strong { font-size: 14px; }
  .v07-material-compact-source,
  .v07-material-compact-spec { font-size: 10px; }
  .v07-material-compact-price { min-height: 48px; min-width: 78px; max-width: 128px; }
  .v07-material-compact-price strong { font-size: 15px; }
  .v07-material-compact-price span { font-size: 10px; }
}

@media (max-width: 380px) {
  .v07-material-compact-card { grid-template-columns: 38px minmax(0, 1fr) minmax(72px, auto); gap: 6px; }
  .v07-material-compact-card > .material-image-control,
  .v07-material-compact-thumb { width: 38px; height: 38px; min-width: 38px; }
  .v07-material-compact-price { min-width: 72px; max-width: 104px; }
}

@media (max-width: 380px) {
  .v07-material-compact-price {
    max-width: 104px;
  }

  .v07-material-compact-price strong {
    max-width: 104px;
    font-size: 13px;
  }
}

/* Mobile material-cost refinement: the page already has a local search.
   Never hide the shared global search on another view or a desktop viewport. */
@media (max-width: 900px) {
  body:has(#costs.view.active) .topbar.v07-mobile-header {
    grid-template-columns: minmax(0, 1fr) auto;
    height: calc(52px + env(safe-area-inset-top));
    min-height: calc(52px + env(safe-area-inset-top));
  }

  body:has(#costs.view.active) .topbar.v07-mobile-header .search-box {
    display: none !important;
  }

  body:has(#costs.view.active) .topbar.v07-mobile-header .mobile-title {
    width: auto !important;
    min-width: 0 !important;
    gap: 9px;
  }

  body:has(#costs.view.active) .topbar.v07-mobile-header .mobile-title #activeViewLabel {
    display: inline !important;
    color: var(--ink, #46382d);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
  }

  body:has(#costs.view.active) .topbar.v07-mobile-header > .top-actions {
    grid-column: 2;
  }

  body:has(#costs.view.active) .content {
    padding-top: 8px;
  }

  #costs .competitor-tabs {
    margin-top: 0;
    margin-bottom: 7px;
    padding: 3px;
    border-radius: 12px;
  }

  #costs .competitor-tabs button {
    min-height: 38px;
    padding: 6px 4px;
  }

  #costs .v07-material-mobile-toolbar {
    top: calc(52px + env(safe-area-inset-top));
    margin-bottom: 5px;
    padding-top: 3px;
  }

  #costs #costMaterialsPanel .price-library-head h3 {
    font-family: inherit;
    font-size: 17px;
    font-weight: 750;
  }

  #costs .v07-material-mobile-heading {
    gap: 7px;
  }

  #costs .v07-material-mobile-add {
    min-height: 40px;
    border-color: var(--rust, #a84d32);
    color: var(--button-text-on-dark, #fffaf4);
    background: var(--rust, #a84d32);
  }

  #costs .v07-material-mobile-add:hover,
  #costs .v07-material-mobile-add:focus-visible {
    background: var(--rust-dark, #873c27);
  }

  #costs .v07-material-mobile-public {
    min-height: 40px;
    padding: 7px 4px;
    border-color: transparent;
    color: var(--rust-dark, #873c27);
    background: transparent;
  }

  #costs .v07-material-mobile-public:focus-visible {
    outline: 2px solid var(--rust, #a84d32);
    outline-offset: 2px;
  }

  #costs .v07-material-mobile-filter-list {
    border-color: transparent;
    background: var(--surface-soft, rgba(244, 237, 228, .6));
  }

  #costs .v07-material-mobile-filter {
    min-height: 40px;
    padding: 6px 7px;
  }

  #costs .v07-material-mobile-sort select[hidden] {
    display: none;
  }

  #costs .v07-material-mobile-sort-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 40px;
    padding: 6px 8px;
    border: 1px solid var(--line, #e5d9ce);
    border-radius: 10px;
    color: var(--ink-soft, #5e5144);
    background: var(--card, #fffdf9);
    font: inherit;
    font-size: 11px;
    white-space: nowrap;
    cursor: pointer;
  }

  #costs .v07-material-compact-card {
    grid-template-columns: 42px minmax(0, 1fr) minmax(86px, auto);
    gap: 9px;
    padding: 10px 5px;
  }

  #costs .v07-material-compact-actions {
    display: grid;
    justify-items: end;
    gap: 2px;
    min-width: 0;
    max-width: 136px;
  }

  #costs .v07-material-compact-price {
    gap: 3px;
    min-height: 44px;
    min-width: 86px;
    max-width: 136px;
  }

  #costs .v07-material-compact-price > span {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 3px;
    white-space: normal;
  }

  #costs .v07-material-compact-price > span svg {
    flex: 0 0 auto;
    opacity: .75;
  }

  #costs .v07-material-compact-price.is-pending {
    justify-items: center;
    min-width: 76px;
    padding: 6px 9px;
    border: 1px solid color-mix(in srgb, var(--rust, #a84d32) 22%, var(--line, #e5d9ce));
    border-radius: 10px;
    background: var(--pink-soft, #f0ddd4);
  }

  #costs .v07-material-compact-price strong.is-pending {
    color: var(--rust-dark, #873c27);
    font-size: 12px;
  }

  #costs .v07-material-compact-options {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    min-height: 30px;
    padding: 3px 5px;
    border: 0;
    border-radius: 6px;
    color: var(--rust-dark, #873c27);
    background: var(--surface-soft, #faf6ee);
    font: inherit;
    font-size: 10px;
    white-space: nowrap;
    cursor: pointer;
  }

  #costs .v07-material-mobile-sort-trigger:focus-visible,
  #costs .v07-material-compact-options:focus-visible {
    outline: 2px solid var(--rust, #a84d32);
    outline-offset: 2px;
  }

  .v07-material-compact-thumb.is-empty {
    color: var(--muted, #9a8b7d);
    background: var(--surface-soft, #faf6ee);
  }

  .v07-material-detail-option-unit {
    color: var(--rust-dark, #873c27);
    font-variant-numeric: tabular-nums;
  }

  .v07-mobile-material-sort-backdrop {
    position: fixed;
    z-index: 125;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 16px 10px 0;
    background: rgba(40, 30, 22, .38);
  }

  .v07-mobile-material-sort-sheet {
    box-sizing: border-box;
    width: min(100%, 520px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
    border: 1px solid var(--line, #e5d9ce);
    border-radius: 20px 20px 0 0;
    color: var(--ink, #46382d);
    background: var(--card, #fffdf9);
    box-shadow: 0 -8px 30px rgba(40, 30, 22, .12);
  }

  .v07-mobile-material-sort-sheet > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
  }

  .v07-mobile-material-sort-sheet h2 {
    margin: 0;
    font: inherit;
    font-size: 17px;
    font-weight: 750;
  }

  .v07-mobile-material-sort-sheet > header button {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    color: var(--ink-soft, #5e5144);
    background: var(--surface-soft, #faf6ee);
    font-size: 24px;
    cursor: pointer;
  }

  .v07-material-sort-choices {
    display: grid;
    gap: 4px;
  }

  .v07-material-sort-choices button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--ink-soft, #5e5144);
    background: transparent;
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
  }

  .v07-material-sort-choices button[aria-pressed="true"] {
    border-color: var(--line, #e5d9ce);
    color: var(--rust-dark, #873c27);
    background: var(--pink-soft, #f0ddd4);
  }

  .v07-material-sort-choices button:focus-visible,
  .v07-mobile-material-sort-sheet > header button:focus-visible {
    outline: 2px solid var(--rust, #a84d32);
    outline-offset: -2px;
  }

  .v07-mobile-material-sort-sheet > p {
    margin: 12px 0 0;
    color: var(--muted, #81766a);
    font-size: 11px;
    line-height: 1.5;
  }
}

@media (max-width: 380px) {
  #costs .v07-material-compact-card {
    grid-template-columns: 38px minmax(0, 1fr) minmax(80px, auto);
    gap: 6px;
  }

  #costs .v07-material-compact-price {
    min-width: 80px;
    max-width: 112px;
  }

  #costs .v07-material-mobile-filter {
    padding-right: 5px;
    padding-left: 5px;
  }

  #costs .v07-material-mobile-sort-trigger {
    padding-right: 6px;
    padding-left: 6px;
  }
}

/* Preserve fill-first creation without replacing the beta.10 compact list. */
@media(max-width:900px){
.v07-mobile-material-create-backdrop {
    z-index: 135;
  }
.v07-mobile-material-create-sheet {
    max-height: min(90vh, 760px);
    max-height: min(90dvh, 760px);
    grid-template-rows: auto minmax(0, 1fr);
  }
.v07-mobile-material-create-sheet form {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: 0;
  }
.v07-mobile-material-create-sheet form > .v07-material-detail-management-body {
    overflow-y: auto;
    align-content: start;
    padding: 16px 15px 22px;
    -webkit-overflow-scrolling: touch;
  }
.v07-mobile-material-create-sheet .v07-material-detail-editor-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
.v07-material-create-section {
    display: grid;
    gap: 16px;
    padding: 16px;
    border: 1px solid rgba(173, 153, 132, .22);
    border-radius: 13px;
    background: #fffdf9;
  }
.v07-material-create-section h3 {
    margin: 0;
    color: var(--ink, #46382d);
    font-size: 15px;
  }
.v07-mobile-material-create-sheet .v07-material-detail-management-body label {
    gap: 7px;
    font-size: 12px;
  }
.v07-mobile-material-create-sheet .v07-material-detail-package input {
    min-width: 0;
  }
.v07-material-create-extra {
    padding: 12px 14px;
    border: 1px solid rgba(173, 153, 132, .22);
    border-radius: 13px;
    background: #fffdf9;
  }
.v07-material-create-extra summary {
    color: var(--ink-soft, #5e5144);
    font-size: 12px;
    font-weight: 700;
  }
.v07-material-create-extra label {
    margin-top: 12px;
  }
.v07-mobile-material-create-sheet .v07-material-detail-management-body input,
.v07-mobile-material-create-sheet .v07-material-detail-management-body select {
    font-size: 16px;
  }
}

@media(max-width:900px){
 .v07-material-inline-quick {display:grid;gap:12px;padding:14px 0 0;min-width:0;}
 .v07-material-inline-quick dl {display:grid;gap:8px;margin:0;font-size:12px;}
 .v07-material-inline-quick dl>div {display:grid;grid-template-columns:65px minmax(0,1fr);gap:8px;}
 .v07-material-inline-quick dd {margin:0;overflow-wrap:anywhere;}
 .v07-material-inline-quick label {display:grid;gap:8px;font-size:12px;}
 .v07-material-inline-quick input {min-width:0;width:100%;font-size:16px;min-height:44px;}
 .v07-material-inline-quick footer {display:flex;justify-content:flex-end;gap:8px;}
 .v07-material-inline-quick footer button {min-height:44px;min-width:64px;}
}
/* Reservation-first mobile pilot; desktop business workflow remains unchanged. */

.biz-mobile-orders,
.biz-mobile-production,
.biz-mobile-overview,
.biz-mobile-next-action,
.biz-mobile-operating-label,
.biz-mobile-empty-action {
  display: none;
}

@media screen and (max-width: 900px) {
  /* The mobile page has one contextual action in the next-action card. */
  #business > .page-header > .primary-button {
    display: none;
  }

  #business > .page-header {
    gap: 8px;
    margin-bottom: 11px;
  }

  #business > .page-header p {
    display: none;
  }

  #business .biz-mobile-orders,
  #business .biz-mobile-production,
  #business .biz-mobile-overview,
  #business .biz-mobile-next-action,
  #business .biz-mobile-operating-label {
    display: block;
  }

  #business .biz-mobile-overview {
    margin: 0 0 10px;
    padding: 13px;
    border: 1px solid rgba(173, 79, 47, .2);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255, 250, 242, .96), rgba(248, 239, 228, .82));
    box-shadow: 0 6px 18px rgba(74, 53, 38, .04);
  }

  #business .biz-mobile-orders,
  #business .biz-mobile-production {
    margin: 0 0 11px;
    padding: 13px;
    border: 1px solid rgba(92, 73, 60, .13);
    border-radius: 18px;
    background: rgba(255, 255, 255, .76);
    box-shadow: 0 6px 18px rgba(74, 53, 38, .04);
  }

  #business .biz-mobile-orders {
    border-color: rgba(173, 79, 47, .25);
    background: linear-gradient(135deg, #fffaf2, #f8eee3);
  }

  #business .biz-mobile-section-head,
  #business .biz-mobile-production-day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  #business .biz-mobile-section-head h2 {
    margin: 3px 0 0;
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 21px;
    line-height: 1.2;
  }

  #business .biz-mobile-primary {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 8px 11px;
    border: 1px solid var(--rust);
    border-radius: 10px;
    color: #fffaf0;
    background: var(--rust);
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
  }

  #business .biz-mobile-trial-warning {
    margin: 12px 0;
    padding: 9px 10px;
    border-left: 3px solid var(--rust);
    border-radius: 6px;
    color: var(--ink-soft);
    background: rgba(255, 255, 255, .8);
    font-size: 11px;
    line-height: 1.5;
  }

  #business .biz-mobile-order-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
  }

  #business .biz-mobile-order-stats span {
    flex: 1 1 calc(50% - 4px);
    padding: 8px 10px;
    border-radius: 10px;
    color: var(--ink-soft);
    background: rgba(255, 255, 255, .7);
    font-size: 11px;
  }

  #business .biz-mobile-order-stats strong {
    margin-right: 4px;
    color: var(--rust-dark);
    font-size: 17px;
  }

  #business .biz-mobile-order-stats small {
    flex: 1 1 100%;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.3;
  }

  #business .biz-mobile-order-list,
  #business .biz-mobile-production-list {
    display: grid;
    gap: 7px;
  }

  #business .biz-mobile-order-row,
  #business .biz-mobile-production-day {
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(92, 73, 60, .1);
    border-radius: 11px;
    background: rgba(255, 255, 255, .78);
  }

  #business .biz-mobile-order-row > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
  }

  #business .biz-mobile-order-row strong,
  #business .biz-mobile-production-day-head strong {
    color: var(--ink);
    font-size: 12px;
  }

  #business .biz-mobile-order-row em {
    margin-left: 5px;
    padding: 2px 5px;
    border-radius: 5px;
    color: var(--rust-dark);
    background: #f8eee3;
    font-size: 9px;
    font-style: normal;
  }

  #business .biz-mobile-order-row small,
  #business .biz-mobile-production-day-head small {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 10px;
  }

  #business .biz-mobile-order-row p {
    margin: 5px 0 0;
    color: var(--ink-soft);
    font-size: 11px;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  #business .biz-mobile-text-link {
    margin-top: 10px;
    padding: 4px 0;
    border: 0;
    color: var(--rust-dark);
    background: transparent;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
  }

  #business .biz-mobile-section-note {
    margin: 9px 0;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.45;
  }

  #business .biz-mobile-production-line {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding-top: 7px;
    font-size: 11px;
  }

  #business .biz-mobile-production-line span {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  #business .biz-mobile-production-line strong {
    flex: 0 1 auto;
    color: var(--rust-dark);
    font-weight: 800;
    text-align: right;
  }

  #business .biz-mobile-empty {
    margin: 0;
    padding: 14px 10px;
    border-radius: 10px;
    color: var(--muted);
    background: rgba(255, 255, 255, .72);
    font-size: 11px;
    line-height: 1.5;
  }

  /* The desktop marketing workflow is intact, but absent from the phone flow. */
  #business > .biz-loop,
  #business > .biz-summary-grid,
  #business > .biz-mobile-operating-label,
  #business > .biz-toolbar,
  #business > .biz-section-head,
  #business > .biz-campaign-list,
  #business > .biz-task-panel {
    display: none;
  }

  #business .biz-mobile-overview-head,
  #business .biz-mobile-next-action,
  #business .biz-mobile-finance-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  #business .biz-mobile-overview-head h2 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 21px;
    font-weight: 650;
    line-height: 1.2;
  }

  #business .biz-mobile-overview-head .biz-kicker {
    margin-bottom: 3px;
    font-size: 9px;
  }

  #business .biz-mobile-link,
  #business .biz-mobile-empty-action {
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid rgba(173, 79, 47, .22);
    border-radius: 9px;
    color: var(--rust-dark);
    background: rgba(255, 255, 255, .7);
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
  }

  #business .biz-mobile-link:hover,
  #business .biz-mobile-empty-action:hover {
    border-color: rgba(173, 79, 47, .5);
    background: #fffdf9;
  }

  #business .biz-mobile-finance-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 11px;
  }

  #business .biz-mobile-finance-card {
    min-width: 0;
    min-height: 67px;
    padding: 9px 10px;
    border: 1px solid rgba(92, 73, 60, .1);
    border-radius: 12px;
    background: rgba(255, 255, 255, .72);
  }

  #business .biz-mobile-finance-card.is-attention {
    border-color: rgba(173, 79, 47, .28);
    background: rgba(255, 248, 241, .9);
  }

  #business .biz-mobile-finance-card small {
    display: block;
    overflow: hidden;
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #business .biz-mobile-finance-card strong {
    display: block;
    margin-top: 5px;
    overflow: hidden;
    color: var(--rust-dark);
    font-family: var(--font-serif);
    font-size: 20px;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #business .biz-mobile-finance-card p {
    margin: 4px 0 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 9px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #business .biz-mobile-finance-foot {
    margin-top: 10px;
    color: var(--muted);
    font-size: 10px;
  }

  #business .biz-mobile-finance-foot strong {
    color: var(--ink-soft);
    font-size: 10px;
  }

  #business .biz-mobile-progress {
    height: 6px;
    margin-top: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(92, 73, 60, .1);
  }

  #business .biz-mobile-progress span {
    display: block;
    height: 100%;
    min-width: 2px;
    border-radius: inherit;
    background: var(--rust);
  }

  #business .biz-mobile-next-action {
    align-items: flex-start;
    margin: 0 0 12px;
    padding: 11px 12px;
    border: 1px solid rgba(92, 73, 60, .12);
    border-radius: 14px;
    background: rgba(255, 255, 255, .66);
  }

  #business .biz-mobile-next-copy {
    min-width: 0;
  }

  #business .biz-mobile-next-copy .biz-kicker {
    margin-bottom: 3px;
    font-size: 9px;
  }

  #business .biz-mobile-next-copy strong {
    display: block;
    color: var(--ink);
    font-size: 12px;
    line-height: 1.35;
  }

  #business .biz-mobile-next-copy p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.4;
  }

  #business .biz-mobile-next-action > button {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 8px 10px;
    border: 1px solid var(--rust);
    border-radius: 10px;
    color: #fffaf0;
    background: var(--rust);
    box-shadow: 0 5px 12px rgba(173, 79, 47, .16);
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
  }

  #business .biz-mobile-operating-label {
    margin: 12px 0 6px;
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 800;
  }

  #business .biz-mobile-operating-label span {
    color: var(--muted);
    font-size: 9px;
    font-weight: 600;
  }

  /* Keep the process visible, but treat it as a compact horizontal cue. */
  #business .biz-loop {
    margin-top: 0;
    margin-bottom: 9px;
  }

  #business .booking-trial-actions [data-booking-open-settings] {
    border-color: var(--rust);
    color: #fffaf0;
    background: var(--rust);
  }

  #business .booking-trial-actions [data-booking-reset] {
    padding-right: 2px;
    padding-left: 2px;
    border: 0;
    color: var(--muted);
    background: transparent;
  }

  #business .booking-trial-next {
    display: none;
  }

  #business .biz-empty {
    display: grid;
    justify-items: center;
    gap: 9px;
  }

  #business .biz-empty .biz-mobile-empty-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
  }

  /* At <=650px the legacy stylesheet switches the nav back to a grid, which
     clips the next item. The business view keeps it swipeable instead. */
  body.biz-mobile-center-active .sidebar .nav {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  body.biz-mobile-center-active .sidebar .nav::-webkit-scrollbar {
    display: none;
  }

  body.biz-mobile-center-active .sidebar .nav-button {
    flex: 0 0 68px;
    min-width: 68px;
  }

  body.biz-mobile-center-active .content {
    padding-bottom: calc(112px + env(safe-area-inset-bottom));
  }
}

@media screen and (max-width: 520px) {
  #business .biz-mobile-overview {
    padding: 12px;
  }

  #business .biz-mobile-finance-card {
    min-height: 63px;
    padding: 8px 9px;
  }

  #business .biz-mobile-finance-card strong {
    font-size: 18px;
  }

  #business .biz-mobile-next-action {
    gap: 8px;
    padding: 10px;
  }

  #business .biz-mobile-next-action > button {
    padding-right: 8px;
    padding-left: 8px;
    font-size: 9px;
  }
}

@media screen and (max-width: 900px) {
  #business {
    scroll-margin-top: calc(60px + env(safe-area-inset-top) + 12px);
  }

  #business .biz-loop {
    justify-content: flex-start;
    gap: 7px;
    margin-bottom: 11px;
    padding: 8px 10px;
    overflow-x: auto;
    border-radius: 12px;
    font-size: 11px;
    line-height: 1.3;
    white-space: nowrap;
    scrollbar-width: none;
  }

  #business .biz-loop::-webkit-scrollbar {
    display: none;
  }

  #business .biz-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 13px;
  }

  #business .biz-summary-card {
    min-height: 78px;
    padding: 10px 11px;
    border-radius: 14px;
    box-shadow: none;
  }

  #business .biz-summary-card small {
    font-size: 10px;
  }

  #business .biz-summary-card strong {
    margin: 5px 0 3px;
    font-size: 23px;
  }

  #business .biz-summary-card p {
    overflow: hidden;
    font-size: 10px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #business .booking-trial {
    margin: 14px 0 20px;
    padding: 14px;
    border-radius: 18px;
    box-shadow: 0 6px 18px rgba(74, 53, 38, .04);
  }

  #business .booking-trial-head {
    gap: 9px;
  }

  #business .booking-trial-head > div:first-child,
  #business .biz-card-head > div:first-child {
    min-width: 0;
  }

  #business .booking-trial-head h2 {
    font-size: 20px;
    line-height: 1.2;
  }

  #business .booking-trial-head p {
    font-size: 10px;
    line-height: 1.45;
  }

  #business .booking-trial-actions {
    gap: 6px;
  }

  #business .booking-trial-actions button,
  #business .booking-card-head button {
    min-height: 34px;
    padding: 7px 9px;
    border-radius: 9px;
    font-size: 11px;
  }

  #business .booking-trial-notice {
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 10px;
    line-height: 1.45;
  }

  #business .booking-trial-tabs {
    gap: 4px;
    margin: 11px 0 9px;
    padding: 3px;
    border-radius: 11px;
  }

  #business .booking-trial-tabs button {
    min-height: 34px;
    padding: 6px 10px;
    border-radius: 9px;
    font-size: 11px;
  }

  #business .booking-trial-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-bottom: 9px;
  }

  #business .booking-trial-kpi {
    min-height: 68px;
    padding: 9px 10px;
    border-radius: 12px;
  }

  #business .booking-trial-kpi small,
  #business .booking-trial-kpi p {
    font-size: 9px;
  }

  #business .booking-trial-kpi strong {
    margin-top: 4px;
    font-size: 20px;
  }

  #business .booking-trial-kpi p {
    margin-top: 3px;
    line-height: 1.3;
  }

  #business .booking-trial-grid {
    gap: 9px;
  }

  #business .booking-card {
    padding: 12px;
    border-radius: 14px;
  }

  #business .booking-card-head {
    gap: 8px;
    margin-bottom: 8px;
  }

  #business .booking-card-head h3 {
    font-size: 15px;
  }

  #business .booking-settings-summary {
    gap: 7px;
  }

  #business .booking-settings-dates {
    padding: 8px 9px;
    border-radius: 10px;
    font-size: 10px;
  }

  #business .booking-settings-products,
  #business .booking-order-list,
  #business .booking-production-list,
  #business .booking-packing-list {
    gap: 7px;
  }

  #business .booking-settings-product,
  #business .booking-order-card,
  #business .booking-production-item,
  #business .booking-packing-card {
    padding: 9px 10px;
    border-radius: 11px;
  }

  #business .booking-settings-product strong,
  #business .booking-order-card-head h4,
  #business .booking-production-head h4 {
    font-size: 12px;
  }

  #business .booking-settings-product small,
  #business .booking-order-card-meta,
  #business .booking-production-head small,
  #business .booking-packing-head small {
    font-size: 9px;
  }

  #business .booking-order-items {
    gap: 4px;
    margin: 7px 0;
    padding: 7px 8px;
  }

  #business .booking-order-item,
  #business .booking-packing-items {
    font-size: 10px;
  }

  #business .booking-order-card-actions {
    gap: 7px;
    padding-top: 7px;
  }

  #business .booking-order-card-actions > div:last-child {
    gap: 5px;
  }

  #business .booking-production-copy {
    gap: 5px 9px;
    margin-top: 8px;
    font-size: 9px;
  }

  #business .booking-capacity {
    height: 6px;
    margin-top: 8px;
  }

  #business .biz-toolbar {
    gap: 8px;
    margin: 10px 0 14px;
    padding: 10px;
    border-radius: 14px;
  }

  #business .biz-field input,
  #business .biz-field select,
  #business .biz-field textarea {
    min-height: 38px;
    padding: 7px 9px;
    font-size: 12px;
  }

  #business .biz-section-head {
    gap: 8px;
    margin: 14px 0 8px;
  }

  #business .biz-section-head h2 {
    font-size: 20px;
    line-height: 1.2;
  }

  #business .biz-campaign-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  #business .biz-campaign-card {
    padding: 12px;
    border-radius: 15px;
    box-shadow: none;
  }

  #business .biz-card-head {
    gap: 7px;
  }

  #business .biz-card-head h3 {
    margin: 2px 0 3px;
    font-size: 16px;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  #business .biz-card-subtitle {
    overflow-wrap: anywhere;
    font-size: 10px;
  }

  #business .biz-stage {
    padding: 4px 7px;
    font-size: 9px;
  }

  #business .biz-chips {
    gap: 4px;
    margin: 7px 0;
  }

  #business .biz-chip {
    padding: 3px 6px;
    font-size: 9px;
  }

  #business .biz-card-copy {
    min-height: 0;
    margin: 9px 0;
    font-size: 11px;
    line-height: 1.5;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  #business .biz-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    margin: 9px 0;
  }

  #business .biz-metric {
    padding: 7px;
    border-radius: 10px;
  }

  #business .biz-metric small {
    font-size: 8px;
  }

  #business .biz-metric strong {
    margin-top: 3px;
    font-size: 12px;
  }

  #business .biz-card-actions {
    gap: 4px 7px;
    padding-top: 8px;
  }

  #business .biz-card-actions button,
  #business .biz-task-actions button {
    min-height: 28px;
    padding: 4px 0;
    font-size: 10px;
  }

  #business .biz-task-panel {
    margin-top: 16px;
    padding: 12px;
    border-radius: 15px;
  }

  #business .biz-task-list {
    gap: 6px;
  }

  #business .biz-task-row {
    gap: 8px;
    padding: 9px 10px;
    border-radius: 11px;
  }

  #business .biz-task-main {
    gap: 8px;
  }

  #business .biz-task-toggle {
    width: 22px;
    height: 22px;
  }

  #business .biz-task-copy strong {
    font-size: 12px;
  }

  #business .biz-task-copy small {
    font-size: 9px;
  }

  #business .biz-task-actions {
    gap: 5px;
  }

  #business .biz-empty {
    padding: 23px 13px;
    border-radius: 13px;
    font-size: 11px;
  }
}

@media screen and (max-width: 520px) {
  #business .biz-summary-card {
    min-height: 70px;
    padding: 9px 10px;
  }

  #business .biz-summary-card strong {
    margin-top: 4px;
    font-size: 21px;
  }

  #business .biz-summary-card p {
    font-size: 9px;
  }

  #business .booking-trial {
    margin-top: 12px;
    padding: 12px;
  }

  #business .booking-trial-kpis {
    gap: 6px;
  }

  #business .booking-trial-kpi {
    min-height: 62px;
    padding: 8px 9px;
  }

  #business .booking-trial-kpi strong {
    font-size: 18px;
  }

  #business .booking-trial-grid {
    gap: 8px;
  }

  #business .biz-toolbar {
    margin-bottom: 12px;
  }

  #business .biz-campaign-list {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  #business .biz-campaign-card {
    padding: 11px;
  }

  #business .biz-task-panel {
    padding: 11px;
  }

  #business .biz-task-row {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  #business .biz-task-main {
    flex: 1 1 100%;
  }

  #business .biz-task-actions {
    margin-left: 30px;
  }

  .biz-modal {
    padding: 8px;
  }

  .biz-modal-card {
    max-height: calc(100dvh - 16px);
    padding: 14px;
    border-radius: 16px;
  }

  .biz-form-section {
    margin-top: 14px;
    padding-top: 12px;
  }

  .biz-form-section h3 {
    margin-bottom: 9px;
    font-size: 13px;
  }

  .biz-form-actions {
    gap: 7px;
    margin-top: 14px;
  }

  .biz-form-actions button {
    min-height: 40px;
    flex: 1 1 0;
  }
}

@media screen and (max-width: 380px) {
  #business .biz-summary-grid {
    gap: 6px;
  }

  #business .biz-summary-card {
    min-height: 66px;
    padding: 8px 9px;
  }

  #business .booking-trial-head h2 {
    font-size: 19px;
  }

  #business .booking-trial-tabs button {
    padding-right: 8px;
    padding-left: 8px;
  }
}
/* V0.7 mobile pricing dashboard: light lists and a single emphasis surface. */

/* Desktop baseline: mobile-only filter and sort slots stay out of the layout. */
.pricing-mobile-tool-slots {
  display: none;
}

@media (max-width: 900px) {
  /* Leave enough room for the sticky header and the fixed bottom navigation. */
  body[data-active-view="pricing"] .content {
    width: 100%;
    padding-bottom: calc(108px + env(safe-area-inset-bottom));
  }

  #pricing,
  #pricingSinglePanel,
  #pricingGiftPanel,
  #pricingCompetitorPanel,
  #pricingDefaultSingleView {
    min-width: 0;
  }

  #pricing {
    overflow-x: hidden;
  }

  /* Keep the editor itself scrollable while the action row remains available.
     Extra bottom space lets the last field clear the sticky row on iOS. */
  #pricingPlanDrawer .pricing-drawer-panel {
    box-sizing: border-box;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    padding: calc(18px + env(safe-area-inset-top)) 16px 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-top: calc(18px + env(safe-area-inset-top));
    scroll-padding-bottom: calc(132px + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
  }

  #pricingPlanForm {
    display: flex;
    flex-direction: column;
    padding-bottom: calc(30px + env(safe-area-inset-bottom));
  }

  #pricingPlanForm > .pricing-drawer-head { order: 1; }
  #pricingPlanForm > input[type="hidden"] { order: 2; }
  #pricingPlanForm > .pricing-form-section { order: 3; }
  #pricingPlanForm > .pricing-mobile-judgement-summary { order: 4; }
  #pricingPlanForm > .pricing-editor-preview { order: 5; }
  #pricingPlanForm > .pricing-advanced { order: 6; }
  #pricingPlanForm > .pricing-efficiency { order: 7; }
  #pricingPlanForm > .pricing-trial { order: 8; }
  #pricingPlanForm > .pricing-notes-field { order: 9; }
  #pricingPlanForm > .pricing-history { order: 10; }
  #pricingPlanForm > .pricing-form-actions { order: 11; }

  #pricingPlanForm .pricing-form-actions {
    position: sticky;
    bottom: 0;
    z-index: 4;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    margin: 18px -16px 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
    background: color-mix(in srgb, var(--card) 95%, transparent);
    box-shadow: 0 -9px 22px rgba(67, 46, 31, .08);
    backdrop-filter: blur(12px);
  }

  #pricingPlanForm .pricing-form-actions > span {
    display: none;
  }

  #pricingPlanForm .pricing-form-actions > .secondary-button {
    grid-column: 2;
  }

  #pricingPlanForm .pricing-form-actions > .primary-button {
    grid-column: 3;
  }

  #pricingPlanForm .pricing-notes-field,
  #pricingPlanForm .pricing-history {
    scroll-margin-bottom: calc(132px + env(safe-area-inset-bottom));
  }

  /* Empty by design: pricing JS can fill this host without changing the
     desktop editor or pushing the basic fields down on larger screens. */
  #pricingPlanForm .pricing-mobile-judgement-summary {
    display: block;
    margin-top: 12px;
    padding: 10px 11px;
    border: 1px solid color-mix(in srgb, var(--rust) 24%, var(--line));
    border-radius: 12px;
    color: var(--ink-soft);
    background: color-mix(in srgb, var(--rust) 6%, var(--card));
  }

  #pricingPlanForm .pricing-mobile-judgement-summary:empty {
    display: none;
  }

  #pricingPlanForm .pricing-mobile-judgement-summary > * {
    margin-top: 0;
    margin-bottom: 0;
  }

  #pricingPlanForm .pricing-mobile-judgement-summary strong {
    color: var(--ink);
    font-size: 13px;
  }

  #pricingPlanForm .pricing-mobile-judgement-summary small {
    color: var(--muted);
    font-size: 9px;
  }

  #pricingPlanForm .pricing-editor-preview {
    margin-top: 12px;
    padding: 12px;
    border-radius: 13px;
  }

  #pricingPlanForm .pricing-preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 8px;
  }

  #pricingPlanForm .pricing-preview-grid div {
    padding: 8px;
  }

  #pricingPlanForm .pricing-preview-grid b {
    margin-top: 4px;
    font-size: 14px;
  }

  #pricingPlanForm .pricing-preview-note {
    margin-top: 8px;
    font-size: 9px;
    line-height: 1.5;
  }

  /* Destructive actions stay available but no longer compete with save. */
  #pricingPlanForm .pricing-destructive-actions {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    opacity: .72;
  }

  #pricingPlanForm .pricing-destructive-actions:has(button:not([hidden]))::before {
    content: "更多操作";
    margin-right: 2px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
  }

  #pricingPlanForm .pricing-destructive-actions:has(button:not([hidden])) .pricing-delete-button,
  #pricingPlanForm .pricing-destructive-actions:has(button:not([hidden])) .pricing-hide-button {
    min-height: 30px;
    padding: 4px 2px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
  }

  #pricingPlanForm .pricing-destructive-actions:has(button:not([hidden])) .pricing-delete-button:hover,
  #pricingPlanForm .pricing-destructive-actions:has(button:not([hidden])) .pricing-hide-button:hover {
    color: var(--rust-dark);
    text-decoration: none;
  }

  #pricing .pricing-page-header,
  #pricing .pricing-product-tabs,
  #pricing .pricing-hero,
  #pricing .pricing-list-panel,
  #pricing #pricingCompetitorPanel,
  #pricing .pricing-hidden-view {
    scroll-margin-top: calc(60px + env(safe-area-inset-top) + 16px);
  }

  #pricing .pricing-page-header {
    display: grid;
    align-items: stretch;
    gap: 10px;
    min-height: 42px;
    margin-top: 6px;
    margin-bottom: 11px;
    padding-top: 3px;
  }

  #pricing .pricing-page-heading p {
    max-width: 42em;
    margin-bottom: 0;
    font-size: 11px;
    line-height: 1.55;
  }

  #pricing .pricing-page-actions {
    width: 100%;
    justify-content: stretch;
  }

  #pricing .pricing-page-actions button {
    width: 100%;
    min-height: 44px;
  }

  #pricing .pricing-page-header h1 {
    max-width: 100%;
    font-size: clamp(23px, 7vw, 29px);
    line-height: 1.16;
  }

  #pricing .pricing-product-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 360px);
    margin: 0 0 16px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
    border-radius: 0;
    background: transparent;
  }

  #pricing .pricing-product-tabs button {
    min-width: 0;
    min-height: 40px;
    padding: 7px 5px;
    border-radius: 0;
    font-size: 12px;
  }

  #pricing .pricing-product-tabs button[aria-selected="true"] {
    background: transparent;
    box-shadow: inset 0 -2px 0 var(--rust);
  }

  #pricing .pricing-status-line {
    min-height: 0;
    margin: 0 2px 9px;
    font-size: 10px;
  }

  /* The price and target price share the first row on a phone. */
  #pricing .pricing-hero-card {
    padding: 14px 13px 13px;
    border-radius: 17px;
    box-shadow: 0 9px 24px rgba(67, 46, 31, .055);
  }

  #pricing .pricing-hero-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px;
  }

  #pricing .pricing-hero-title h2 {
    font-size: 21px;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  #pricing .pricing-hero-title p {
    margin-top: 4px;
    font-size: 10px;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  #pricing .pricing-state {
    min-height: 24px;
    padding: 4px 8px;
    font-size: 9px;
  }

  #pricing .pricing-hero-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 8px;
    margin-top: 14px;
  }

  #pricing .pricing-primary-price {
    min-width: 0;
  }

  #pricing .pricing-primary-price small,
  #pricing .pricing-suggestion small {
    margin-bottom: 3px;
    font-size: 9px;
  }

  #pricing .pricing-primary-price strong {
    font-size: clamp(32px, 9.6vw, 40px);
  }

  #pricing .pricing-price-equivalent {
    margin-top: 5px;
    font-size: 9px;
    line-height: 1.35;
  }

  #pricing .pricing-suggestion {
    min-width: 0;
    padding: 8px 0 7px 11px;
    border-top: 0;
    border-left: 1px solid color-mix(in srgb, var(--rust) 18%, var(--line));
  }

  #pricing .pricing-suggestion strong {
    display: block;
    font-size: 19px;
    line-height: 1.15;
    overflow-wrap: anywhere;
  }

  #pricing .pricing-suggestion span {
    margin-top: 4px;
    font-size: 9px;
    line-height: 1.35;
  }

  #pricing .pricing-metric-row {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  #pricing .pricing-metric {
    min-width: 0;
    padding: 8px 7px;
    border-top: 1px solid color-mix(in srgb, var(--line) 62%, transparent);
    border-radius: 0;
    background: transparent;
  }

  #pricing .pricing-metric small {
    min-height: 2.45em;
    font-size: 8px;
    line-height: 1.25;
  }

  #pricing .pricing-metric strong {
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.15;
  }

  #pricing .pricing-metric em {
    display: -webkit-box;
    margin-top: 3px;
    overflow: hidden;
    font-size: 8px;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  #pricing .pricing-cost-alert {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
    margin-top: 10px;
    padding: 8px 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    font-size: 9px;
  }

  #pricing .pricing-cost-alert span {
    text-align: left;
  }

  #pricing .pricing-cost-alert.down,
  #pricing .pricing-cost-alert.pending,
  #pricing .pricing-cost-alert.baseline {
    background: transparent;
  }

  #pricing .pricing-efficiency-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 9px;
  }

  #pricing .pricing-efficiency-strip > div {
    padding: 8px 7px;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  #pricing .pricing-efficiency-strip small {
    font-size: 8px;
  }

  #pricing .pricing-efficiency-strip strong {
    margin-top: 3px;
    font-size: 12px;
  }

  #pricing .pricing-efficiency-strip em {
    margin-top: 2px;
    font-size: 8px;
  }

  #pricing .pricing-cost-block {
    margin-top: 12px;
    padding-top: 11px;
  }

  #pricing .pricing-cost-track {
    height: 7px;
  }

  #pricing .pricing-cost-legend {
    gap: 7px 11px;
    margin-top: 7px;
    font-size: 8px;
  }

  #pricing .pricing-hero-footer {
    display: grid;
    gap: 9px;
    margin-top: 11px;
  }

  #pricing .pricing-hero-footer p {
    max-width: none;
    font-size: 9px;
    line-height: 1.45;
  }

  #pricing .pricing-hero-actions {
    width: 100%;
    gap: 6px;
  }

  #pricing .pricing-hero-actions button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 38px;
    padding: 7px 8px;
    font-size: 10px;
  }

  #pricing .pricing-empty-hero {
    min-height: 190px;
    padding: 22px 16px;
    border-radius: 17px;
  }

  /* The list is a page section on mobile, not another large panel. */
  #pricing .pricing-list-panel {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  #pricing .pricing-list-head {
    display: grid;
    align-items: stretch;
    gap: 9px;
    margin-bottom: 10px;
  }

  #pricing .pricing-list-head h2 {
    font-size: 20px;
  }

  #pricing .pricing-list-head p {
    margin-top: 3px;
    font-size: 9px;
    line-height: 1.45;
  }

  #pricing .pricing-list-tools {
    padding-bottom: 2px;
  }

  #pricing:not(.pricing-minimal-mode) .pricing-list-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 7px;
  }

  #pricing:not(.pricing-minimal-mode) .pricing-list-tools .pricing-search-label {
    grid-column: 1 / -1;
    width: 100%;
    gap: 4px;
  }

  #pricing:not(.pricing-minimal-mode) .pricing-list-tools .pricing-search-label input {
    min-height: 43px;
    padding: 8px 10px;
    border-radius: 11px;
    font-size: 12px;
  }

  #pricing:not(.pricing-minimal-mode) .pricing-list-tools .pricing-mobile-tool-slots {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  #pricing:not(.pricing-minimal-mode) .pricing-list-tools .pricing-mobile-tool {
    width: 100%;
    min-width: 0;
    min-height: 37px;
    padding: 7px 9px;
    font-size: 10px;
  }

  #pricing:not(.pricing-minimal-mode) .pricing-list-tools .pricing-mobile-filter-slot {
    color: var(--ink);
    background: var(--card);
    cursor: pointer;
    text-align: left;
  }

  #pricing:not(.pricing-minimal-mode) .pricing-list-tools .pricing-minimal-toggle {
    grid-column: 1;
    grid-row: 3;
    justify-self: start;
    min-height: 37px;
    padding: 7px 11px;
    font-size: 10px;
  }

  #pricing:not(.pricing-minimal-mode) .pricing-list-tools .pricing-hidden-entry {
    grid-column: 2;
    grid-row: 3;
    justify-self: end;
    width: auto;
    min-height: 37px;
    padding: 7px 9px;
    font-size: 10px;
  }

  /* Every desktop column becomes a labelled value in a compact list row. */
  #pricing .pricing-table-wrap {
    margin-top: 2px;
    overflow: visible;
  }

  #pricing .pricing-table {
    display: block;
    width: 100%;
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0;
  }

  #pricing .pricing-table > thead {
    display: none;
  }

  #pricing .pricing-table > tbody {
    display: grid;
    gap: 0;
    border-top: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  }

  #pricing .pricing-table > tbody > tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "name name"
      "cost price"
      "profit margin"
      "state action"
      "batch cycle";
    gap: 8px 11px;
    min-width: 0;
    padding: 14px 1px;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #pricing .pricing-table > tbody > tr.active {
    margin: 8px 0;
    padding: 11px;
    border: 1px solid color-mix(in srgb, var(--rust) 40%, var(--line));
    border-radius: 14px;
    background: color-mix(in srgb, var(--rust) 5%, var(--card));
  }

  #pricing .pricing-table > tbody > tr:last-child:not(.active) {
    border-bottom: 0;
  }

  #pricing .pricing-table > tbody > tr:hover {
    background: transparent;
  }

  #pricing .pricing-table > tbody > tr.active:hover {
    background: color-mix(in srgb, var(--rust) 5%, var(--card));
  }

  #pricing .pricing-table > tbody > tr > td {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
    color: var(--ink-soft);
    font-size: 12px;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }

  #pricing .pricing-table > tbody > tr > td::before {
    display: block;
    margin-bottom: 2px;
    color: var(--muted);
    content: attr(data-mobile-label);
    font-size: 9px;
    font-weight: 750;
    line-height: 1.25;
  }

  #pricing .pricing-table > tbody > tr > td:nth-child(1) {
    grid-area: name;
    padding-bottom: 8px;
    border-bottom: 0;
  }

  #pricing .pricing-table > tbody > tr.active > td:nth-child(1) {
    border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  }

  #pricing .pricing-table > tbody > tr > td:nth-child(2) { grid-area: cost; }
  #pricing .pricing-table > tbody > tr > td:nth-child(3) { grid-area: price; }
  #pricing .pricing-table > tbody > tr > td:nth-child(4) { grid-area: profit; }
  #pricing .pricing-table > tbody > tr > td:nth-child(5) { grid-area: batch; }
  #pricing .pricing-table > tbody > tr > td:nth-child(6) { grid-area: cycle; }
  #pricing .pricing-table > tbody > tr > td:nth-child(7) { grid-area: margin; }
  #pricing .pricing-table > tbody > tr > td:nth-child(8) { grid-area: state; align-self: end; }
  #pricing .pricing-table > tbody > tr > td:nth-child(9) {
    grid-area: action;
    align-self: end;
    justify-self: end;
    padding-bottom: 1px;
  }

  #pricing .pricing-table > tbody > tr > td:nth-child(5),
  #pricing .pricing-table > tbody > tr > td:nth-child(6) {
    display: block;
    min-height: 0;
    padding-top: 5px;
    border-top: 1px solid color-mix(in srgb, var(--line) 54%, transparent);
    color: var(--muted);
    font-size: 9px;
    line-height: 1.2;
  }

  #pricing .pricing-table > tbody > tr > td:nth-child(5)::before,
  #pricing .pricing-table > tbody > tr > td:nth-child(6)::before {
    display: inline;
    margin-right: 4px;
    font-size: 8px;
  }

  #pricing .pricing-table > tbody > tr > td:nth-child(5) .pricing-price-note,
  #pricing .pricing-table > tbody > tr > td:nth-child(6) .pricing-price-note {
    display: inline;
    margin: 0 0 0 3px;
    font-size: 8px;
  }

  #pricing .pricing-table > tbody > tr > td:nth-child(1)::before,
  #pricing .pricing-table > tbody > tr > td:nth-child(9)::before {
    display: none;
  }

  #pricing .pricing-plan-name strong {
    display: block;
    max-width: none;
    overflow: hidden;
    font-size: 15px;
    line-height: 1.3;
    overflow-wrap: anywhere;
    text-overflow: ellipsis;
    white-space: normal;
  }

  #pricing .pricing-plan-name small {
    display: block;
    max-width: none;
    margin-top: 3px;
    overflow: hidden;
    font-size: 10px;
    line-height: 1.35;
    overflow-wrap: anywhere;
    text-overflow: ellipsis;
    white-space: normal;
  }

  #pricing .pricing-table td.pricing-table-number {
    font-size: 14px;
    font-weight: 700;
  }

  #pricing .pricing-table .pricing-state {
    min-height: 23px;
    padding: 4px 7px;
    font-size: 9px;
  }

  #pricing .pricing-price-note {
    margin-top: 2px;
    font-size: 9px;
    line-height: 1.25;
    white-space: normal;
  }

  #pricing .pricing-row-action {
    min-height: 24px;
    color: var(--rust);
    font-size: 12px;
    white-space: nowrap;
  }

  #pricing .pricing-table-empty {
    padding: 25px 14px;
    border-radius: 13px;
    font-size: 10px;
  }

  #pricing .pricing-mobile-filter-empty {
    margin: 0;
    padding: 18px 12px;
    border: 1px dashed color-mix(in srgb, var(--line) 82%, transparent);
    border-radius: 12px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.5;
    text-align: center;
  }

  /* Keep the optional minimal menu compact too, without changing its content. */
  #pricing.pricing-minimal-mode .pricing-list-head {
    display: block;
    margin-bottom: 8px;
  }

  #pricing.pricing-minimal-mode .pricing-list-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
  }

  #pricing.pricing-minimal-mode .pricing-list-tools .pricing-search-label {
    grid-column: 1 / -1;
    width: 100%;
  }

  #pricing.pricing-minimal-mode .pricing-list-tools .pricing-mobile-tool-slots {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  #pricing.pricing-minimal-mode .pricing-list-tools .pricing-mobile-tool {
    width: 100%;
    min-width: 0;
    min-height: 37px;
    padding: 7px 9px;
    font-size: 10px;
  }

  #pricing.pricing-minimal-mode .pricing-list-tools .pricing-mobile-filter-slot {
    color: var(--ink);
    background: var(--card);
    cursor: pointer;
    text-align: left;
  }

  #pricing.pricing-minimal-mode .pricing-list-tools .pricing-minimal-toggle {
    grid-column: 1;
    grid-row: 3;
    width: auto;
    justify-self: start;
    min-height: 37px;
  }

  #pricing.pricing-minimal-mode .pricing-list-tools .pricing-hidden-entry {
    grid-column: 2;
    grid-row: 3;
    justify-self: end;
    width: auto;
    min-height: 37px;
  }

  #pricing.pricing-minimal-mode .pricing-list-tools .pricing-minimal-search-history:not([hidden]) {
    grid-column: 1 / -1;
    grid-row: 4;
    width: 100%;
    max-height: none;
  }

  #pricing.pricing-minimal-mode .pricing-minimal-menu {
    padding: 0 0 3px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #pricing.pricing-minimal-mode .pricing-minimal-menu-head {
    padding-bottom: 7px;
  }

  #pricing.pricing-minimal-mode .pricing-minimal-menu-head h2 {
    font-size: 19px;
  }

  #pricing.pricing-minimal-mode .pricing-minimal-item {
    gap: 8px;
    padding: 9px 1px;
  }

  #pricing.pricing-minimal-mode .pricing-minimal-item-copy strong {
    font-size: 13px;
  }

  #pricing.pricing-minimal-mode .pricing-minimal-item-price {
    min-width: 78px;
  }

  #pricing.pricing-minimal-mode .pricing-minimal-item-price strong {
    font-size: 17px;
  }

  /* Competitor reference is a pricing context on mobile: keep the controls
     compact and let the comparison table switch to cards at phone width. */
  #pricing #pricingCompetitorPanel {
    min-width: 0;
    overflow: hidden;
  }

  #pricing #pricingCompetitorPanel .competitor-header {
    display: grid;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 11px;
  }

  #pricing #pricingCompetitorPanel .competitor-header h2 {
    margin: 3px 0 4px;
    font-size: 21px;
    line-height: 1.2;
  }

  #pricing #pricingCompetitorPanel .competitor-header p {
    font-size: 10px;
    line-height: 1.45;
  }

  #pricing #pricingCompetitorPanel .competitor-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  #pricing #pricingCompetitorPanel .competitor-actions button {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 8px 6px;
    font-size: 11px;
  }

  #pricing #pricingCompetitorPanel .competitor-overview {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin: 11px 0;
    padding: 13px;
    border-radius: 15px;
  }

  #pricing #pricingCompetitorPanel .competitor-kicker {
    font-size: 14px;
    line-height: 1.35;
  }

  #pricing #pricingCompetitorPanel .competitor-overview p {
    margin-top: 5px;
    font-size: 10px;
    line-height: 1.5;
  }

  #pricing #pricingCompetitorPanel #competitorCounts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 0;
  }

  #pricing #pricingCompetitorPanel #competitorCounts > div {
    min-width: 0;
    padding: 8px 5px;
    border-top: 1px solid color-mix(in srgb, var(--line) 62%, transparent);
    text-align: center;
  }

  #pricing #pricingCompetitorPanel #competitorCounts strong {
    font-size: 20px;
    line-height: 1.1;
  }

  #pricing #pricingCompetitorPanel #competitorCounts small {
    display: block;
    overflow: hidden;
    font-size: 8px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #pricing #pricingCompetitorPanel .competitor-result-head {
    gap: 8px;
    padding: 10px 0 8px;
    font-size: 9px;
  }

  #pricing #pricingCompetitorPanel .competitor-comparison {
    margin-bottom: 10px;
    padding: 12px;
    border-radius: 15px;
  }

  #pricing #pricingCompetitorPanel .competitor-compare-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    margin-bottom: 10px;
  }

  #pricing #pricingCompetitorPanel .competitor-compare-head strong {
    grid-column: 1 / -1;
    margin-right: 0;
    font-size: 12px;
  }

  #pricing #pricingCompetitorPanel .competitor-compare-head label {
    display: grid;
    grid-column: 1 / -1;
    gap: 4px;
    color: var(--muted);
    font-size: 9px;
  }

  #pricing #pricingCompetitorPanel .competitor-compare-head select {
    width: 100%;
    max-width: none;
    min-height: 38px;
    padding: 8px 9px;
    font-size: 11px;
  }

  #pricing #pricingCompetitorPanel .competitor-compare-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  #pricing #pricingCompetitorPanel .competitor-compare-card {
    min-width: 0;
    padding: 10px 8px;
    border-radius: 12px;
  }

  #pricing #pricingCompetitorPanel .competitor-compare-card strong {
    overflow-wrap: anywhere;
    font-size: 12px;
    line-height: 1.35;
  }

  #pricing #pricingCompetitorPanel .competitor-compare-card small {
    font-size: 9px;
    line-height: 1.35;
  }

  #pricing #pricingCompetitorPanel .competitor-compare-card .competitor-per500 {
    margin: 9px 0 4px;
    font-size: 15px;
  }

  #pricing #pricingCompetitorPanel .competitor-footnote {
    margin: 10px 0;
    font-size: 9px;
    line-height: 1.5;
  }

  /* Gift pricing follows the same light list treatment. */
  #pricing #pricingGiftPanel .gift-pricing-head {
    display: grid;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 11px;
  }

  #pricing #pricingGiftPanel .gift-pricing-head h2 {
    margin: 3px 0 4px;
    font-size: 21px;
  }

  #pricing #pricingGiftPanel .gift-pricing-head p {
    font-size: 10px;
    line-height: 1.45;
  }

  #pricing #pricingGiftPanel .gift-pricing-head > .primary-button {
    width: 100%;
    min-height: 40px;
    font-size: 11px;
  }

  #pricing #pricingGiftPanel .gift-pricing-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin: 11px 0;
  }

  #pricing #pricingGiftPanel .gift-pricing-overview article {
    min-width: 0;
    padding: 9px 7px;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 68%, transparent);
    background: transparent;
    box-shadow: none;
  }

  #pricing #pricingGiftPanel .gift-pricing-overview article:nth-child(3),
  #pricing #pricingGiftPanel .gift-pricing-overview article:nth-child(4) {
    border-bottom: 0;
  }

  #pricing #pricingGiftPanel .gift-pricing-overview small {
    min-height: 2.5em;
    font-size: 8px;
    line-height: 1.25;
  }

  #pricing #pricingGiftPanel .gift-pricing-overview strong {
    margin-top: 4px;
    overflow: hidden;
    font-size: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #pricing #pricingGiftPanel .gift-pricing-toolbar {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  #pricing #pricingGiftPanel .gift-pricing-toolbar label {
    gap: 4px;
    font-size: 9px;
  }

  #pricing #pricingGiftPanel .gift-pricing-toolbar input,
  #pricing #pricingGiftPanel .gift-pricing-toolbar select {
    min-height: 41px;
    padding: 8px 9px;
    font-size: 11px;
  }

  #pricing #pricingGiftPanel .gift-column-filter,
  #pricing #pricingGiftPanel .gift-column-toggle {
    width: 100%;
  }

  #pricing #pricingGiftPanel .gift-column-toggle {
    min-height: 38px;
    font-size: 10px;
  }

  #pricing #pricingGiftPanel .gift-pricing-table-wrap {
    margin-top: 9px;
    overflow: visible;
    border: 0;
    background: transparent;
  }

  #pricing #pricingGiftPanel .gift-pricing-table {
    display: block;
    width: 100%;
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0;
  }

  #pricing #pricingGiftPanel .gift-pricing-table > thead {
    display: none;
  }

  #pricing #pricingGiftPanel .gift-pricing-table > tbody {
    display: grid;
    gap: 0;
    border-top: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  }

  #pricing #pricingGiftPanel .gift-pricing-table > tbody > tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
    min-width: 0;
    padding: 14px 1px;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
    border-radius: 0;
    background: transparent;
  }

  #pricing #pricingGiftPanel .gift-pricing-table > tbody > tr:last-child {
    border-bottom: 0;
  }

  #pricing #pricingGiftPanel .gift-pricing-table > tbody > tr > td {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
    color: var(--ink-soft);
    font-size: 11px;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  #pricing #pricingGiftPanel .gift-pricing-table > tbody > tr > td::before {
    display: block;
    margin-bottom: 2px;
    color: var(--muted);
    content: attr(data-mobile-label);
    font-size: 8px;
    font-weight: 750;
    line-height: 1.25;
  }

  #pricing #pricingGiftPanel .gift-pricing-table > tbody > tr > td:first-child {
    grid-column: 1 / -1;
    padding-bottom: 8px;
    border-bottom: 0;
  }

  #pricing #pricingGiftPanel .gift-pricing-table > tbody > tr > td:first-child::before {
    display: none;
  }

  #pricing #pricingGiftPanel .gift-title-cell {
    min-width: 0;
    gap: 8px;
  }

  #pricing #pricingGiftPanel .gift-package-thumbnail {
    flex-basis: 43px;
    width: 43px;
    height: 43px;
    border-radius: 10px;
  }

  #pricing #pricingGiftPanel .gift-pricing-table td strong {
    font-size: 13px;
    line-height: 1.3;
  }

  #pricing #pricingGiftPanel .gift-pricing-table td small {
    margin-top: 2px;
    font-size: 9px;
    line-height: 1.35;
  }

  #pricing #pricingGiftPanel .gift-final-price strong {
    font-size: 15px !important;
  }

  #pricing #pricingGiftPanel .gift-health {
    padding: 4px 7px;
    font-size: 9px;
  }
}

/* Mobile focus hierarchy: keep the decision surface prominent while leaving
   lower-frequency values available in compact rows or native details. */
@media (max-width: 900px) {
  #pricing .pricing-hero-card {
    padding: 12px 12px 11px;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(67, 46, 31, .05);
  }

  #pricing .pricing-hero-head {
    gap: 6px;
  }

  #pricing .pricing-hero-title h2 {
    font-size: 20px;
  }

  #pricing .pricing-hero-title p {
    display: -webkit-box;
    max-width: 31em;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  #pricing .pricing-hero-body {
    gap: 6px;
    margin-top: 10px;
  }

  #pricing .pricing-primary-price strong {
    font-size: clamp(31px, 9.2vw, 38px);
  }

  #pricing .pricing-suggestion {
    padding: 6px 0 5px 10px;
  }

  #pricing .pricing-suggestion strong {
    font-size: 18px;
  }

  #pricing .pricing-metric-row {
    gap: 4px;
    margin-top: 0;
  }

  #pricing .pricing-metric {
    padding: 6px 5px;
  }

  #pricing .pricing-metric small {
    min-height: 2.15em;
    font-size: 7.5px;
  }

  #pricing .pricing-metric strong {
    margin-top: 2px;
    font-size: 12px;
  }

  #pricing .pricing-metric em {
    margin-top: 2px;
    font-size: 7.5px;
  }

  /* Efficiency remains readable, but its supporting values no longer look
     like three equally important cards in the first viewport. */
  #pricing .pricing-efficiency-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px solid color-mix(in srgb, var(--line) 68%, transparent);
  }

  #pricing .pricing-efficiency-strip > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 2px 4px;
    min-height: 0;
    padding: 5px 4px;
    border: 0;
    border-radius: 8px;
    background: color-mix(in srgb, var(--paper-strong) 42%, transparent);
  }

  #pricing .pricing-efficiency-strip small {
    grid-column: 1;
    min-height: 0;
    overflow: hidden;
    font-size: 7.5px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #pricing .pricing-efficiency-strip strong {
    grid-column: 2;
    margin-top: 0;
    font-size: 10.5px;
    line-height: 1.15;
    text-align: right;
  }

  #pricing .pricing-efficiency-strip em {
    grid-column: 1 / -1;
    margin-top: 0;
    overflow: hidden;
    font-size: 7.5px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #pricing .pricing-cost-block {
    margin-top: 7px;
    padding-top: 8px;
  }

  #pricing .pricing-cost-track {
    height: 5px;
  }

  #pricing .pricing-cost-legend {
    gap: 4px 8px;
    margin-top: 5px;
    font-size: 7.5px;
    line-height: 1.25;
  }

  #pricing .pricing-cost-legend span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #pricing .pricing-hero-footer {
    gap: 7px;
    margin-top: 8px;
  }

  #pricing .pricing-hero-footer p {
    display: -webkit-box;
    max-height: 2.9em;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  #pricing .pricing-hero-actions {
    gap: 5px;
  }

  #pricing .pricing-hero-actions button {
    min-height: 36px;
    padding: 7px 6px;
    font-size: 9.5px;
  }

  #pricing .pricing-hero-actions .primary-button {
    flex-grow: 1.15;
  }

  /* Native details are the accessible expansion affordance for infrequent
     assumptions in the editor. Closed sections stay quiet; open sections
     receive enough contrast to read as an intentional second step. */
  #pricingPlanForm > .pricing-advanced,
  #pricingPlanForm > .pricing-efficiency,
  #pricingPlanForm > .pricing-trial,
  #pricingPlanForm > .pricing-history {
    margin-top: 10px;
    border-radius: 12px;
  }

  #pricingPlanForm > details > summary {
    min-height: 40px;
    padding: 10px 11px;
    gap: 8px;
  }

  #pricingPlanForm > details > summary span {
    font-size: 12px;
  }

  #pricingPlanForm > details > summary small {
    display: block;
    max-width: 44%;
    overflow: hidden;
    font-size: 8.5px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #pricingPlanForm > details:not([open]) {
    background: color-mix(in srgb, var(--paper) 48%, transparent);
  }

  #pricingPlanForm > details[open] {
    background: color-mix(in srgb, var(--paper) 88%, var(--card));
  }

  #pricingPlanForm > details[open] > summary {
    border-bottom: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  }

  #pricingPlanForm > details > summary:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--rust) 48%, transparent);
    outline-offset: -2px;
  }

  #pricingPlanForm > details > .pricing-advanced-grid,
  #pricingPlanForm > details > .pricing-details-grid {
    padding-right: 10px;
    padding-left: 10px;
  }

  #pricingPlanForm > details > .pricing-trial-body,
  #pricingPlanForm > details > .pricing-history-body {
    padding-right: 10px;
    padding-left: 10px;
  }

  /* The plan index is secondary to the hero card on a phone. */
  #pricing .pricing-list-panel {
    margin-top: 6px;
    padding: 0 1px;
  }

  #pricing .pricing-list-head {
    gap: 6px;
    margin-bottom: 7px;
  }

  #pricing .pricing-list-head h2 {
    font-size: 17px;
    line-height: 1.2;
  }

  #pricing .pricing-list-head p {
    display: -webkit-box;
    max-width: 34em;
    margin-top: 2px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  #pricing .pricing-list-tools .pricing-search-label {
    position: relative;
    gap: 0;
  }

  /* Keep the visible input compact while retaining its accessible label. */
  #pricing .pricing-list-tools .pricing-search-label > span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  #pricing:not(.pricing-minimal-mode) .pricing-list-tools .pricing-search-label input {
    min-height: 38px;
    padding: 7px 10px;
    font-size: 11px;
  }

  #pricing:not(.pricing-minimal-mode) .pricing-list-tools .pricing-mobile-tool-slots {
    gap: 5px;
  }

  #pricing:not(.pricing-minimal-mode) .pricing-list-tools .pricing-mobile-tool,
  #pricing:not(.pricing-minimal-mode) .pricing-list-tools .pricing-minimal-toggle,
  #pricing:not(.pricing-minimal-mode) .pricing-list-tools .pricing-hidden-entry {
    min-height: 34px;
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 9px;
  }

  #pricing .pricing-table > tbody > tr {
    gap: 6px 9px;
    padding-top: 11px;
    padding-bottom: 11px;
  }

  #pricing .pricing-table > tbody > tr.active {
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 9px;
  }

  #pricing .pricing-table > tbody > tr > td {
    font-size: 11px;
  }

  #pricing .pricing-table > tbody > tr > td::before {
    font-size: 8px;
  }

  #pricing .pricing-table td.pricing-table-number {
    font-size: 13px;
  }

  /* A single plan does not need a second full-size panel below the hero. */
  #pricing .pricing-list-panel:has(.pricing-table > tbody > tr:only-child) {
    margin-top: 2px;
  }

  #pricing .pricing-list-panel:has(.pricing-table > tbody > tr:only-child) .pricing-list-head {
    gap: 4px;
    margin-bottom: 5px;
  }

  #pricing .pricing-list-panel:has(.pricing-table > tbody > tr:only-child) .pricing-list-head > div:first-child {
    display: flex;
    align-items: baseline;
    gap: 5px;
    flex-wrap: wrap;
  }

  #pricing .pricing-list-panel:has(.pricing-table > tbody > tr:only-child) .pricing-kicker {
    margin-bottom: 0;
    font-size: 8px;
  }

  #pricing .pricing-list-panel:has(.pricing-table > tbody > tr:only-child) .pricing-list-head h2 {
    font-size: 15px;
  }

  #pricing .pricing-list-panel:has(.pricing-table > tbody > tr:only-child) .pricing-list-head p {
    flex-basis: 100%;
    max-width: none;
    margin-top: 0;
  }

  #pricing .pricing-list-panel:has(.pricing-table > tbody > tr:only-child) .pricing-table > tbody {
    border-top: 0;
  }

  #pricing .pricing-list-panel:has(.pricing-table > tbody > tr:only-child) .pricing-table > tbody > tr {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

@media (max-width: 380px) {
  #pricing .pricing-hero-card {
    padding-right: 11px;
    padding-left: 11px;
  }

  #pricing .pricing-metric {
    padding-right: 5px;
    padding-left: 5px;
  }

  #pricing .pricing-metric small {
    font-size: 7px;
  }

  #pricing .pricing-metric strong {
    font-size: 12px;
  }

  #pricing .pricing-table > tbody > tr,
  #pricing #pricingGiftPanel .gift-pricing-table > tbody > tr {
    padding: 10px;
  }

  #pricing .pricing-table > tbody > tr > td,
  #pricing #pricingGiftPanel .gift-pricing-table > tbody > tr > td {
    font-size: 11px;
  }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  #pricing .pricing-hero-card,
  #pricing .pricing-table > tbody > tr,
  #pricing #pricingGiftPanel .gift-pricing-table > tbody > tr {
    transition: none;
  }
}
/*
 * Baking Lab V0.7 · mobile motion primitives
 *
 * This file is intentionally standalone. The V0.7 builder injects it as a
 * shared, opt-in mobile layer so the step stays small and reversible.
 */

/* Mobile-first token surface and explicit, opt-in interaction utilities. */
@media (max-width: 900px) {
  :root,
  .v07-motion-scope {
    --v07-motion-fast: 150ms;
    --v07-motion-normal: 210ms;
    --v07-motion-content: 250ms;
    --v07-motion-panel: 300ms;
    --v07-motion-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .v07-motion-pressable {
    transition:
      transform var(--v07-motion-fast) var(--v07-motion-ease),
      background-color var(--v07-motion-fast) var(--v07-motion-ease),
      border-color var(--v07-motion-fast) var(--v07-motion-ease),
      box-shadow var(--v07-motion-fast) var(--v07-motion-ease);
  }

  .v07-motion-pressable:active {
    transform: scale(0.985);
  }

  .v07-motion-focusable {
    transition:
      outline-offset var(--v07-motion-fast) var(--v07-motion-ease),
      box-shadow var(--v07-motion-fast) var(--v07-motion-ease);
  }

  .v07-motion-focusable:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
  }
}

/* Reduced motion keeps state changes immediate while preserving feedback. */
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  :root,
  .v07-motion-scope {
    --v07-motion-fast: 0ms;
    --v07-motion-normal: 0ms;
    --v07-motion-content: 0ms;
    --v07-motion-panel: 0ms;
    --v07-motion-ease: linear;
  }

  .v07-motion-pressable,
  .v07-motion-focusable {
    transition-duration: 0ms;
  }

  .v07-motion-pressable:active {
    transform: none;
  }
}

/* Phase 1: high-frequency recipe and workbench touch feedback. Keep this
 * opt-in by surface so form controls and production inputs stay direct. */
@media (max-width: 900px) {
  #recipes .recipe-card-action,
  #recipes .recipe-card-action-visual,
  #recipes .mobile-recipe-filter-toggle,
  #recipes .recipe-library-toggle-group button,
  #recipes .mobile-recent-recipe,
  #recipes .recipe-family-detail-chip,
  #recipes .recipe-family-detail-actions > button,
  .recipe-mobile-reader-back,
  .recipe-mobile-reader-size,
  .recipe-mobile-reader-detail,
  .recipe-mobile-reader-nav button,
  .recipe-mobile-reader-convert,
  #recipeDetailModal .recipe-mobile-percentage-toggle,
  #recipeDetailModal .modal-actions [data-edit-current-recipe],
  #recipeDetailModal .modal-actions [data-family-edit-variant],
  .wb-home .wb-recent-card,
  .wb-home .wb-attention-event,
  .wb-home .wb-attention-actions button {
    transition:
      color var(--v07-motion-normal) var(--v07-motion-ease),
      background-color var(--v07-motion-normal) var(--v07-motion-ease),
      border-color var(--v07-motion-normal) var(--v07-motion-ease),
      box-shadow var(--v07-motion-normal) var(--v07-motion-ease),
      transform var(--v07-motion-fast) var(--v07-motion-ease);
  }

  #recipes .recipe-card-action:active,
  #recipes .mobile-recipe-filter-toggle:active,
  #recipes .recipe-library-toggle-group button:active,
  #recipes .mobile-recent-recipe:active,
  #recipes .recipe-family-detail-chip:active,
  #recipes .recipe-family-detail-actions > button:active,
  .recipe-mobile-reader-back:active,
  .recipe-mobile-reader-size:active,
  .recipe-mobile-reader-detail:active,
  .recipe-mobile-reader-nav button:active,
  .recipe-mobile-reader-convert:active,
  #recipeDetailModal .recipe-mobile-percentage-toggle:active,
  #recipeDetailModal .modal-actions [data-edit-current-recipe]:active,
  #recipeDetailModal .modal-actions [data-family-edit-variant]:active,
  .wb-home .wb-recent-card:active,
  .wb-home .wb-attention-event:active,
  .wb-home .wb-attention-actions button:active {
    transform: scale(.985);
  }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  #recipes .recipe-card-action,
  #recipes .recipe-card-action-visual,
  #recipes .mobile-recipe-filter-toggle,
  #recipes .recipe-library-toggle-group button,
  #recipes .mobile-recent-recipe,
  #recipes .recipe-family-detail-chip,
  #recipes .recipe-family-detail-actions > button,
  .recipe-mobile-reader-back,
  .recipe-mobile-reader-size,
  .recipe-mobile-reader-detail,
  .recipe-mobile-reader-nav button,
  .recipe-mobile-reader-convert,
  #recipeDetailModal .recipe-mobile-percentage-toggle,
  #recipeDetailModal .modal-actions [data-edit-current-recipe],
  #recipeDetailModal .modal-actions [data-family-edit-variant],
  .wb-home .wb-recent-card,
  .wb-home .wb-attention-event,
  .wb-home .wb-attention-actions button {
    transition: none;
  }

  #recipes .recipe-card-action:active,
  #recipes .mobile-recipe-filter-toggle:active,
  #recipes .recipe-library-toggle-group button:active,
  #recipes .mobile-recent-recipe:active,
  #recipes .recipe-family-detail-chip:active,
  #recipes .recipe-family-detail-actions > button:active,
  .recipe-mobile-reader-back:active,
  .recipe-mobile-reader-size:active,
  .recipe-mobile-reader-detail:active,
  .recipe-mobile-reader-nav button:active,
  .recipe-mobile-reader-convert:active,
  #recipeDetailModal .recipe-mobile-percentage-toggle:active,
  #recipeDetailModal .modal-actions [data-edit-current-recipe]:active,
  #recipeDetailModal .modal-actions [data-family-edit-variant]:active,
  .wb-home .wb-recent-card:active,
  .wb-home .wb-attention-event:active,
  .wb-home .wb-attention-actions button:active {
    transform: none;
  }
}
/* V0.7 mobile "My" page. The page is intentionally a light account and
   device-preference center, not a second copy of the workbench dashboard. */
.mobile-me-page-header {
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
}

.mobile-me-page-header > div { width: 100%; }

.mobile-me-device-tip {
  display: flex;
  align-items: flex-start;
  max-width: 36em;
  gap: 8px;
  margin: 10px 0 0;
  padding: 8px 10px;
  border-left: 3px solid var(--rust);
  border-radius: 0 10px 10px 0;
  color: #6f5a4c;
  background: rgba(253, 239, 228, .82);
  font-size: 12px;
  line-height: 1.5;
}

.mobile-me-device-tip-label {
  flex: 0 0 auto;
  color: var(--rust);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  white-space: nowrap;
}

.mobile-me-device-tip-copy {
  min-width: 0;
}

.mobile-me-identity-card,
.mobile-me-card {
  min-width: 0;
  border: 1px solid rgba(92, 73, 60, .12);
  border-radius: 20px;
  background: rgba(255, 253, 249, .76);
  box-shadow: 0 9px 24px rgba(74, 53, 38, .045);
}

.mobile-me-identity-card {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 18px 0 13px;
  padding: 15px 17px;
}

.mobile-me-avatar {
  display: grid;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  place-items: center;
  border-radius: 17px 17px 17px 5px;
  color: #fffaf0;
  background: linear-gradient(145deg, var(--rust), var(--rust-dark));
  box-shadow: 0 8px 18px rgba(173, 79, 47, .18);
  font-family: var(--font-serif);
  font-size: 23px;
  font-weight: 700;
}

.mobile-me-identity-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.mobile-me-identity-copy strong {
  overflow: hidden;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 21px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-me-identity-copy span {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-me-status {
  margin-left: auto;
  padding: 6px 9px;
  border-radius: 999px;
  color: #59715a;
  background: #e8f0e5;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.mobile-me-status.is-anonymous,
.mobile-me-status.is-warning {
  color: #8b5b34;
  background: #f7ead9;
}

.mobile-me-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.mobile-me-card {
  padding: 17px;
}

.mobile-me-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 15px;
}

.mobile-me-kicker {
  display: block;
  color: var(--rust);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .16em;
}

.mobile-me-card h2 {
  margin: 5px 0 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.2;
}

.mobile-me-card-mark {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 10px;
  color: var(--rust-dark);
  background: var(--pink-soft);
  font-size: 13px;
  font-weight: 800;
}

.mobile-me-card-mark.is-status {
  color: #59715a;
  background: #e8f0e5;
  font-size: 20px;
  line-height: 1;
}

.mobile-me-card-mark.is-status.is-warning {
  color: #8b5b34;
  background: #f7ead9;
}

.mobile-me-detail-list {
  display: grid;
  gap: 10px;
}

.mobile-me-detail-list > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 15px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(92, 73, 60, .09);
}

.mobile-me-detail-list > div:last-child { border-bottom: 0; }

.mobile-me-detail-list span {
  color: var(--muted);
  font-size: 11px;
}

.mobile-me-detail-list strong {
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 12px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-me-card-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
}

.mobile-me-module-card {
  margin-top: 13px;
}

.mobile-me-module-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0;
}

.mobile-me-module-card-mark {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(173, 79, 47, .14);
  border-radius: 10px;
  color: var(--rust-dark);
  background: #f8e7dc;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
}

.mobile-me-module-note {
  margin: 7px 0 13px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.mobile-me-module-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.mobile-me-module-button {
  min-width: 0;
  min-height: 80px;
  padding: 9px 4px 8px;
  border: 1px solid rgba(92, 73, 60, .1);
  border-radius: 14px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 6px;
  color: var(--ink);
  background: rgba(255, 255, 255, .62);
  cursor: pointer;
  font: inherit;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.mobile-me-module-button:hover {
  border-color: rgba(173, 79, 47, .3);
  background: #fff9f2;
  transform: translateY(-1px);
}

.mobile-me-module-button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--rust) 65%, white);
  outline-offset: 2px;
}

.mobile-me-module-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 13px;
  color: #9b4b3e;
  background: #f7e3dc;
}

.mobile-me-module-icon svg {
  width: 22px;
  height: 22px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.55;
}

.mobile-me-module-button[data-tone="tools"] .mobile-me-module-icon { color: #8a6543; background: #f5ead9; }
.mobile-me-module-button[data-tone="schedule"] .mobile-me-module-icon { color: #6b718d; background: #e9ebf4; }
.mobile-me-module-button[data-tone="materials"] .mobile-me-module-icon { color: #657655; background: #e8efdf; }
.mobile-me-module-button[data-tone="business"] .mobile-me-module-icon { color: #9a6338; background: #f6e8d3; }
.mobile-me-module-button[data-tone="ideas"] .mobile-me-module-icon { color: #92714a; background: #f7edd5; }
.mobile-me-module-button[data-tone="links"] .mobile-me-module-icon { color: #6c756f; background: #e8efeb; }
.mobile-me-module-button[data-tone="search"] .mobile-me-module-icon { color: #68758d; background: #e9edf5; }
.mobile-me-module-button[data-tone="documents"] .mobile-me-module-icon { color: #9a6848; background: #f6e7d7; }
.mobile-me-module-button[data-tone="pricing"] .mobile-me-module-icon { color: #a95e3d; background: #f8e2d1; }
.mobile-me-module-button[data-tone="theme"] .mobile-me-module-icon { color: var(--rust-dark); background: var(--pink-soft); }

.mobile-me-module-label {
  max-width: 100%;
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-me-action-card { margin-top: 13px; }

.mobile-me-action-list {
  display: grid;
  gap: 7px;
}

.mobile-me-action {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 55px;
  padding: 8px 9px;
  border: 1px solid rgba(92, 73, 60, .09);
  border-radius: 13px;
  color: var(--ink);
  background: rgba(255, 255, 255, .58);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.mobile-me-action:hover {
  border-color: rgba(173, 79, 47, .28);
  background: rgba(255, 248, 239, .88);
  transform: translateY(-1px);
}

.mobile-me-action-icon {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border-radius: 9px;
  color: var(--rust-dark);
  background: var(--pink-soft);
  font-size: 12px;
  font-weight: 850;
}

.mobile-me-action-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.mobile-me-action-copy strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-me-action-copy small {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-me-action-arrow {
  margin-left: auto;
  color: var(--muted);
  font-size: 21px;
  line-height: 1;
}

.mobile-me-action.is-danger { color: #9b4b3e; }
.mobile-me-action.is-danger .mobile-me-action-icon { color: #9b4b3e; background: #f7e3dc; }
.mobile-me-action.is-login { color: #a34f32; }
.mobile-me-action.is-login .mobile-me-action-icon { color: #a34f32; background: #fff0e3; }

.mobile-me-site-info-card { display: none; }

.mobile-me-site-info-copy {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.mobile-me-site-info-copy a {
  width: fit-content;
  color: var(--rust-dark);
  text-decoration: none;
  text-underline-offset: 3px;
}

.mobile-me-site-info-copy a:hover,
.mobile-me-site-info-copy a:focus-visible {
  text-decoration: underline;
}

@media (min-width: 901px) {
  /* The request is mobile-first; desktop keeps the compact account menu as
     the primary account affordance while the shared view remains routable. */
  .sidebar .mobile-me-nav-button { display: none !important; }
  #me { max-width: 860px; }
  .mobile-me-module-card { display: none !important; }
}

@media (max-width: 900px) {
  /* Navigation modules are the main reason to open “我的” on a phone, so
     keep them close to the identity card instead of pushing them below the
     workspace/connection detail cards. */
  #me.view.active {
    display: flex;
    flex-direction: column;
  }

  #me.view.active .mobile-me-page-header { order: 0; }
  #me.view.active .mobile-me-identity-card { order: 1; }
  #me.view.active .mobile-me-module-card { order: 2; }
  #me.view.active .mobile-me-card-grid {
    order: 3;
    margin-top: 13px;
  }
  #me.view.active .mobile-me-action-card { order: 4; }
  #me.view.active .mobile-me-site-info-card { order: 5; }

  .mobile-me-page-header { margin-bottom: 13px; }
  .mobile-me-identity-card { margin-top: 10px; }
  .mobile-me-card { padding: 14px; border-radius: 17px; box-shadow: none; }
  .mobile-me-card h2 { font-size: 20px; }

  /* The module list is a section, not another card around the cards. */
  .mobile-me-module-card {
    padding: 2px 1px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .mobile-me-module-card-mark { display: none; }
  .mobile-me-module-note { margin-top: 5px; }
}

@media (max-width: 650px) {
  .mobile-me-card-grid { grid-template-columns: 1fr; gap: 9px; }
  .mobile-me-identity-card { padding: 12px; border-radius: 16px; }
  .mobile-me-avatar { width: 46px; height: 46px; flex-basis: 46px; font-size: 20px; }
  .mobile-me-identity-copy strong { font-size: 18px; }
  .mobile-me-status { padding: 5px 7px; font-size: 9px; }
  .mobile-me-action-card { margin-top: 9px; }
  .mobile-me-module-card { margin-top: 7px; }
  #me.view.active .mobile-me-card-grid { margin-top: 9px; }
  .mobile-me-module-grid { gap: 6px; }
  .mobile-me-module-button { min-height: 72px; padding: 7px 3px 6px; border-radius: 12px; gap: 5px; }
  .mobile-me-module-icon { width: 34px; height: 34px; border-radius: 11px; }
  .mobile-me-module-icon svg { width: 20px; height: 20px; }
  .mobile-me-module-label { font-size: 10px; }
}

/* Mobile visual pass: keep the page structured with rhythm and dividers,
   rather than stacking white rounded cards inside a warm paper canvas. */
@media (max-width: 900px) {
  body:has(#me.view.active) {
    --mobile-me-bg: var(--paper, #f5f0e6);
    --mobile-me-line: rgba(114, 91, 62, .14);
    --mobile-me-soft-line: rgba(114, 91, 62, .09);
    background: var(--mobile-me-bg);
  }

  body:has(#me.view.active) .content {
    background: var(--mobile-me-bg);
  }

  body:has(#me.view.active) .topbar.v07-mobile-header {
    background: rgba(249, 246, 238, .94);
    border-bottom-color: var(--mobile-me-line);
    box-shadow: 0 4px 18px rgba(73, 57, 38, .035);
  }

  body:has(#me.view.active) .sidebar {
    background: rgba(249, 246, 238, .9);
    border-top-color: var(--line);
  }

  #me.view.active {
    margin: -24px -18px 0;
    padding: 24px 18px 0;
    background:
      radial-gradient(circle at 92% 0%, rgba(228, 184, 79, .08), transparent 28rem),
      linear-gradient(115deg, rgba(255, 255, 255, .34), transparent 35rem),
      var(--mobile-me-bg);
  }

  #me.view.active .mobile-me-identity-card,
  #me.view.active .mobile-me-card {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #me.view.active .mobile-me-identity-card {
    margin: 18px 0 22px;
    padding: 0 0 18px;
    border-bottom: 1px solid var(--mobile-me-line);
  }

  #me.view.active .mobile-me-card-grid {
    gap: 0;
    margin-top: 0;
    padding: 0;
    border-top: 1px solid var(--mobile-me-line);
    border-bottom: 1px solid var(--mobile-me-line);
  }

  #me.view.active .mobile-me-card-grid > .mobile-me-card {
    padding: 18px 0;
  }

  #me.view.active .mobile-me-card-grid > .mobile-me-card + .mobile-me-card {
    border-top: 1px solid var(--mobile-me-line);
  }

  #me.view.active .mobile-me-card-head {
    margin-bottom: 12px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--mobile-me-soft-line);
  }

  #me.view.active .mobile-me-card h2 {
    font-size: 19px;
  }

  #me.view.active .mobile-me-detail-list {
    gap: 0;
  }

  #me.view.active .mobile-me-detail-list > div {
    padding: 10px 0;
    border-bottom-color: var(--mobile-me-soft-line);
  }

  #me.view.active .mobile-me-module-card {
    margin-top: 27px;
    padding: 0;
  }

  #me.view.active .mobile-me-module-card-head {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--mobile-me-line);
  }

  #me.view.active .mobile-me-module-note {
    margin: 10px 0 4px;
    color: #75817b;
  }

  #me.view.active .mobile-me-module-grid {
    gap: 0;
    margin: 0 -4px;
  }

  #me.view.active .mobile-me-module-button {
    min-height: 68px;
    padding: 10px 2px;
    border: 0;
    border-radius: 12px;
    background: transparent;
  }

  #me.view.active .mobile-me-module-button:hover {
    border-color: transparent;
    background: rgba(255, 255, 255, .34);
    transform: none;
  }

  #me.view.active .mobile-me-module-icon {
    background: color-mix(in srgb, currentColor 11%, var(--mobile-me-bg));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 10%, transparent);
  }

  #me.view.active .mobile-me-action-card {
    margin-top: 27px;
    padding: 0;
  }

  #me.view.active .mobile-me-site-info-card {
    display: block;
    margin-top: 27px;
    padding: 0 0 18px;
    border-top: 1px solid var(--mobile-me-line);
  }

  #me.view.active .mobile-me-site-info-card .mobile-me-card-head {
    margin: 0;
    padding: 18px 0 10px;
    border-bottom: 1px solid var(--mobile-me-soft-line);
  }

  #me.view.active .mobile-me-site-info-copy {
    padding-top: 10px;
    color: #75817b;
    font-size: 10px;
  }

  #me.view.active .mobile-me-site-info-copy a {
    color: var(--rust-dark);
  }

  /* Page density is not exposed as a complete mobile setting yet.  Keep the
     unfinished entry out of the phone surface while the desktop control
     remains available. */
  #me.view.active section[aria-labelledby="mobileMePreferencesTitle"] {
    display: none !important;
  }

  #me.view.active .mobile-me-action-list {
    gap: 0;
  }

  #me.view.active .mobile-me-action {
    min-height: 58px;
    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid var(--mobile-me-soft-line);
    border-radius: 0;
    background: transparent;
  }

  #me.view.active .mobile-me-action:last-child {
    border-bottom: 0;
  }

  #me.view.active .mobile-me-action:hover {
    border-color: var(--mobile-me-soft-line);
    background: rgba(255, 255, 255, .28);
    transform: none;
  }

  #me.view.active .mobile-me-device-tip {
    color: #65716b;
    background: rgba(255, 255, 255, .32);
  }

  /* Workspace and connection are status summaries on mobile, not primary
     work areas. Keep the values visible while removing their desktop-sized
     explanatory treatment. */
  #me.view.active .mobile-me-card-grid {
    border-top: 0;
    border-bottom: 0;
  }

  #me.view.active .mobile-me-card-grid > .mobile-me-card {
    padding: 12px 0;
  }

  #me.view.active .mobile-me-card-grid > .mobile-me-card + .mobile-me-card {
    border-top-color: var(--mobile-me-soft-line);
  }

  #me.view.active .mobile-me-card-grid .mobile-me-card-head {
    align-items: flex-start;
    margin-bottom: 9px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--mobile-me-soft-line);
  }

  #me.view.active .mobile-me-card-grid .mobile-me-card-head > div {
    display: block;
    min-width: 0;
  }

  #me.view.active .mobile-me-card-grid .mobile-me-kicker {
    font-size: 10px;
    letter-spacing: .16em;
  }

  #me.view.active .mobile-me-card-grid .mobile-me-card h2 {
    margin: 5px 0 0;
    font-size: 19px;
    line-height: 1.2;
  }

  #me.view.active .mobile-me-card-grid .mobile-me-card-mark {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    font-size: 11px;
  }

  #me.view.active .mobile-me-card-grid .mobile-me-card-mark.is-status {
    font-size: 16px;
  }

  #me.view.active .mobile-me-card-grid .mobile-me-card-note {
    display: none;
  }
}

@media (max-width: 650px) {
  #me.view.active .mobile-me-card-grid .mobile-me-detail-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
  }

  #me.view.active .mobile-me-card-grid .mobile-me-detail-list > div {
    display: grid;
    align-items: start;
    gap: 2px;
    padding: 6px 0;
    border-bottom: 0;
  }

  #me.view.active .mobile-me-card-grid .mobile-me-detail-list span {
    font-size: 10px;
  }

  #me.view.active .mobile-me-card-grid .mobile-me-detail-list strong {
    font-size: 11px;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-me-action { transition: none; }
  .mobile-me-action:hover { transform: none; }
  .mobile-me-module-button { transition: none; }
  .mobile-me-module-button:hover { transform: none; }
}
.v07-android-beta-top-link{color:var(--rust-dark);font-size:12px;font-weight:700;white-space:nowrap;text-decoration:none;padding:7px 9px;border-radius:8px}.v07-android-beta-top-link:hover{background:rgba(173,79,47,.09)}.v07-android-beta-top-link:focus-visible{outline:2px solid var(--rust);outline-offset:2px}@media(max-width:900px){.v07-android-beta-top-link{display:none}}
/* V0.7 mobile navigation: keep peer modules discoverable without a second-level menu. */
.sidebar .nav-icon-label { display: inline; }

.sidebar .nav-icon-svg {
  display: none;
  width: 19px;
  height: 19px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
}

@media (max-width: 900px) {
  .sidebar {
    position: fixed;
    overflow: hidden;
  }

  html,
  body {
    overflow-x: hidden;
  }

  html {
    scroll-padding-bottom: calc(108px + env(safe-area-inset-bottom));
  }

  .content,
  .view {
    min-width: 0;
  }

  .content {
    padding-bottom: calc(108px + env(safe-area-inset-bottom));
  }

  .sidebar {
    box-sizing: border-box;
    height: 68px;
    min-height: 68px;
    padding: 5px 7px calc(5px + env(safe-area-inset-bottom));
    --mobile-nav-motion-fast: var(--v07-motion-fast, 150ms);
    --mobile-nav-motion-normal: var(--v07-motion-normal, 210ms);
  }

  .sidebar .nav {
    box-sizing: border-box;
    height: 58px;
    min-height: 58px;
    display: flex !important;
    grid-template-columns: none !important;
    gap: 2px;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .sidebar .nav::-webkit-scrollbar {
    display: none;
  }

  .sidebar .nav-button {
    box-sizing: border-box;
    flex: 0 0 60px;
    min-width: 60px !important;
    min-height: 53px;
    padding: 3px 4px;
    gap: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 10px;
    line-height: 1.15;
    scroll-snap-align: start;
    -webkit-tap-highlight-color: transparent;
    transition:
      color var(--mobile-nav-motion-normal) ease,
      background var(--mobile-nav-motion-normal) ease,
      border-color var(--mobile-nav-motion-normal) ease,
      box-shadow var(--mobile-nav-motion-normal) ease,
      transform var(--mobile-nav-motion-fast) ease-out;
  }

  .sidebar .nav-button:active {
    transform: scale(.97);
  }

  .sidebar .nav-button:focus-visible {
    outline: 2px solid rgba(173, 79, 47, .58);
    outline-offset: 3px;
  }

  .sidebar .nav-button .nav-icon,
  .sidebar .nav-button .nav-icon-svg {
    transition:
      color var(--mobile-nav-motion-normal) ease,
      background-color var(--mobile-nav-motion-normal) ease,
      border-color var(--mobile-nav-motion-normal) ease,
      box-shadow var(--mobile-nav-motion-normal) ease;
  }

  .sidebar .nav-button > span:last-child {
    display: block;
    width: 100%;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* With only the five core destinations visible, use the full phone width.
     If optional primary entries are enabled later, the normal horizontal
     scrolling strip returns automatically. */
  .sidebar.mobile-nav-compact .nav {
    justify-content: stretch;
    gap: 0;
    overflow-x: hidden !important;
  }

  .sidebar.mobile-nav-compact .nav-button {
    flex: 1 1 0;
    min-width: 0 !important;
  }

  /* Low-frequency pages now live behind the icon grid on "我的". */
  .sidebar .nav-button[data-mobile-secondary="true"] {
    display: none !important;
  }

  .sidebar .nav-icon {
    width: 22px;
    height: 22px;
    font-size: 0 !important;
  }

  .sidebar .nav-icon-label { display: none !important; }

  .sidebar .nav-icon-svg {
    display: block !important;
    width: 19px;
    height: 19px;
  }

  .sidebar::before,
  .sidebar::after {
    position: absolute;
    z-index: 4;
    top: 7px;
    bottom: calc(7px + env(safe-area-inset-bottom));
    width: 34px;
    pointer-events: none;
    content: "";
    opacity: 0;
    transition: opacity .18s ease;
  }

  .sidebar::before {
    left: 0;
    background: linear-gradient(90deg, var(--surface-sidebar), transparent);
  }

  .sidebar::after {
    right: 0;
    background: linear-gradient(90deg, transparent, var(--surface-sidebar));
  }

  .sidebar.mobile-nav-has-prev::before {
    opacity: 1;
  }

  .sidebar.mobile-nav-has-next::after {
    opacity: 1;
  }

  .sidebar.mobile-nav-at-end::after,
  .sidebar.mobile-nav-no-scroll::after {
    opacity: 0;
  }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .sidebar .nav-button,
  .sidebar .nav-button .nav-icon,
  .sidebar .nav-button .nav-icon-svg {
    transition: none;
  }

  .sidebar .nav-button:active {
    transform: none;
  }

  .sidebar::before,
  .sidebar::after {
    transition: none;
  }
}
/* V0.7 mobile calculator: prioritize one-hand reading without changing desktop. */

#calculator .calc-single-cost-switch {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 3px;
  margin: 0 14px 12px auto;
  padding: 3px;
  border: 1px solid rgba(173, 79, 47, .16);
  border-radius: 999px;
  background: rgba(242, 232, 219, .72);
}

#calculator .calc-single-cost-switch button {
  min-height: 34px;
  padding: 6px 14px;
  border: 0;
  border-radius: 999px;
  color: var(--muted, #81766a);
  background: transparent;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}

#calculator .calc-single-cost-switch button.is-active {
  color: var(--rust-dark, #963f25);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 3px 8px rgba(86, 55, 36, .08);
  font-weight: 800;
}

#calculator .calc-single-cost-switch button:focus-visible {
  outline: 2px solid rgba(173, 79, 47, .3);
  outline-offset: 2px;
}

#calculator .calc-single-cost-details[hidden] { display: none !important; }
#calculator .calc-single-cost-details:not([hidden]) { display: grid; gap: 12px; }
#calculator .calc-single-cost-card { margin: 0; }
#calculator .calc-single-cost-card > .table-wrap { margin-top: 0; }
#calculator .calc-single-cost-table { min-width: 600px; }
#calculator .calc-single-cost-note { margin: 0 14px 14px; }

@media screen and (max-width: 720px) {
  #calculator .calc-single-cost-switch {
    width: auto;
    margin: 0 12px 10px;
  }

  #calculator .calc-single-cost-switch button {
    flex: 1 1 0;
    min-height: 40px;
  }

  #calculator .calc-single-cost-overview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 10px;
    padding: 10px;
  }

  #calculator .calc-single-cost-overview .calc-prep-cost-overview-main {
    grid-column: 1 / -1;
  }
}

#calculator .v07-mobile-calculator-back {
  display: none;
}

@media screen and (max-width: 900px) {
  #calculator .v07-mobile-calculator-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 36px;
    margin: 0 0 10px -6px;
    padding: 0 10px 0 4px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--rust, #ad4f2f);
    background: transparent;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
  }

  #calculator .v07-mobile-calculator-back:hover,
  #calculator .v07-mobile-calculator-back:focus-visible {
    border-color: color-mix(in srgb, var(--rust, #ad4f2f) 26%, var(--line, #ded6ca));
    background: color-mix(in srgb, var(--rust, #ad4f2f) 7%, var(--card, #fffdf8));
    outline: none;
  }

  #calculator .v07-mobile-calculator-back > span:first-child {
    font-size: 24px;
    font-weight: 400;
    line-height: .7;
  }
}

@media screen and (max-width: 760px) {
  #calculator .calculator-result,
  #calculator .calc-prep-planner {
    scroll-margin-top: calc(60px + env(safe-area-inset-top) + 14px);
  }
}

/* At phone widths, show the information needed while weighing first. */
@media screen and (max-width: 520px) {
  #calculator .calc-single-cost-switch { gap: 2px; margin-inline: 10px; }
  #calculator .calc-single-cost-switch button { min-height: 40px; padding-inline: 8px; font-size: 11px; }
  #calculator .calc-single-cost-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  #calculator .calc-single-cost-overview .calc-prep-cost-overview-stat.is-primary { grid-column: 1 / -1; }
  #calculator .calc-single-cost-overview .calc-prep-cost-overview-stat { padding: 8px; }
  #calculator .calc-single-cost-overview .calc-prep-cost-overview-stat strong { font-size: 13px; }
  #calculator .calc-single-cost-overview .calc-prep-cost-overview-stat.is-primary strong { font-size: 18px; }
  #calculator .calc-single-cost-card .table-wrap { margin: 0 8px 10px; }
  #calculator .calc-single-cost-table { display: block; width: 100%; min-width: 0 !important; border: 0; border-collapse: separate; }
  #calculator .calc-single-cost-table thead { display: none; }
  #calculator .calc-single-cost-table tbody { display: grid; gap: 8px; }
  #calculator .calc-single-cost-table tbody tr:not(.table-total) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name cost" "amount source";
    gap: 3px 10px;
    padding: 10px 11px;
    border: 1px solid rgba(83, 67, 49, .14);
    border-radius: 12px;
    background: rgba(255, 253, 248, .92);
  }
  #calculator .calc-single-cost-table tbody tr:not(.table-total) td {
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  #calculator .calc-single-cost-table tbody tr:not(.table-total) td:nth-child(1) {
    grid-area: name;
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 38px;
    align-self: center;
    color: var(--ink, #46382d);
    font-size: 13px;
    font-weight: 800;
  }
  #calculator .calc-single-cost-table tbody tr:not(.table-total) td:nth-child(2) {
    grid-area: amount;
    color: var(--muted, #81766a);
    font-size: 10px;
  }
  #calculator .calc-single-cost-table tbody tr:not(.table-total) td:nth-child(2)::before { content: "本次用量 "; color: #9a8878; }
  #calculator .calc-single-cost-table tbody tr:not(.table-total) td:nth-child(3) {
    grid-area: source;
    min-width: 0;
    overflow: hidden;
    color: var(--muted, #81766a);
    font-size: 10px;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #calculator .calc-single-cost-details .calc-single-cost-table tbody tr:not(.table-total) td:nth-child(3)::before { content: "计价 "; color: #9a8878; }
  #calculator .calc-single-cost-table tbody tr:not(.table-total) td:nth-child(4) {
    grid-area: cost;
    align-self: center;
    color: var(--rust, #ad4f2f);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
    text-align: right;
  }
  #calculator .calc-single-cost-table tbody tr.table-total {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 11px;
    border-top: 2px solid var(--ink, #46382d);
    border-bottom: 0;
    background: rgba(251, 248, 242, .96);
  }
  #calculator .calc-single-cost-table tbody tr.table-total td {
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }
  #calculator .calc-single-cost-table tbody tr.table-total td:first-child { color: var(--ink, #46382d); font-size: 13px; font-weight: 800; }
  #calculator .calc-single-cost-table tbody tr.table-total td:last-child { color: var(--ink, #46382d); font-size: 15px; font-weight: 800; text-align: right; white-space: nowrap; }
  #calculator .calc-single-cost-table .calc-prep-cost-pending { justify-content: flex-end; }
  #calculator .calc-single-cost-note { margin: 0 10px 10px; }

  #calculator .calc-prep-row select,
  #calculator .calc-prep-row input,
  #calculator .calc-prep-memory-card-actions button,
  #calculator .calc-prep-cost-action {
    min-height: 38px;
  }

  #calculator .calc-prep-row select,
  #calculator .calc-prep-row input {
    min-height: 44px;
  }

  #calculator .calc-prep-view-switch button {
    min-height: 40px;
    padding-right: 8px;
    padding-left: 8px;
    font-size: 11px;
  }

  #calculator .calculator-result > .table-wrap,
  #calculator .calc-prep-table-block .table-wrap,
  #calculator .calc-prep-detail-card .table-wrap,
  #calculator .calc-prep-cost-card .table-wrap {
    overflow: visible;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }

  #calculator .calculator-result table,
  #calculator .calc-prep-table-block table {
    display: block;
    width: 100%;
    min-width: 0 !important;
    border: 0;
    border-collapse: separate;
  }

  #calculator .calculator-result thead,
  #calculator .calc-prep-table-block thead {
    display: none;
  }

  #calculator .calculator-result tbody,
  #calculator #calcPrepAggregateView tbody,
  #calculator #calcPrepDetailView tbody,
  #calculator #calcPrepCostView tbody {
    display: grid;
    gap: 8px;
  }

  #calculator .calculator-result tbody tr:not(.table-total),
  #calculator #calcPrepAggregateView tbody tr:not(.calc-prep-source-breakdown),
  #calculator #calcPrepDetailView tbody tr,
  #calculator #calcPrepCostView tbody tr:not(.table-total) {
    display: grid;
    min-width: 0;
    border: 1px solid rgba(83, 67, 49, .14);
    border-radius: 12px;
    background: rgba(255, 253, 248, .92);
  }

  #calculator .calculator-result tbody tr:not(.table-total) {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name scaled"
      "source ratio";
    gap: 3px 10px;
    padding: 11px 12px;
  }

  #calculator .calculator-result tbody tr:not(.table-total) td,
  #calculator #calcPrepAggregateView tbody tr:not(.calc-prep-source-breakdown) td,
  #calculator #calcPrepDetailView tbody tr td,
  #calculator #calcPrepCostView tbody tr:not(.table-total) td {
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  #calculator .calculator-result tbody tr:not(.table-total) td:nth-child(1) {
    grid-area: name;
    align-self: center;
    color: var(--ink, #46382d);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
  }

  #calculator .calculator-result tbody tr:not(.table-total) td:nth-child(2) {
    grid-area: source;
    color: var(--muted, #81766a);
    font-size: 10px;
    line-height: 1.35;
  }

  #calculator .calculator-result tbody tr:not(.table-total) td:nth-child(2)::before {
    content: "原始 ";
    color: #9a8878;
  }

  #calculator .calculator-result tbody tr:not(.table-total) td:nth-child(3) {
    grid-area: ratio;
    color: var(--muted, #81766a);
    font-size: 10px;
    line-height: 1.35;
    text-align: right;
  }

  #calculator .calculator-result tbody tr:not(.table-total) td:nth-child(3)::before {
    content: "比例 ";
    color: #9a8878;
  }

  #calculator .calculator-result tbody tr:not(.table-total) td:nth-child(4) {
    grid-area: scaled;
    align-self: center;
    min-width: 74px;
    color: var(--rust, #ad4f2f);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.25;
    text-align: right;
    white-space: nowrap;
  }

  #calculator .calculator-result tbody tr.table-total {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 12px;
    border-top: 2px solid var(--ink, #46382d);
    border-bottom: 0;
    background: rgba(251, 248, 242, .96);
  }

  #calculator .calculator-result tbody tr.table-total td {
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  #calculator .calculator-result tbody tr.table-total td:nth-child(2),
  #calculator .calculator-result tbody tr.table-total td:nth-child(3) {
    display: none;
  }

  #calculator .calculator-result tbody tr.table-total td:first-child {
    color: var(--ink, #46382d);
    font-size: 15px;
    font-weight: 800;
  }

  #calculator .calculator-result tbody tr.table-total td:last-child {
    color: var(--ink, #46382d);
    font-size: 16px;
    font-weight: 800;
    text-align: right;
    white-space: nowrap;
  }

  #calculator #calcPrepAggregateView tbody tr:not(.calc-prep-source-breakdown) {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name amount"
      "source status";
    gap: 3px 10px;
    padding: 11px 12px;
  }

  #calculator #calcPrepAggregateView tbody tr:not(.calc-prep-source-breakdown) td:nth-child(1) {
    grid-area: name;
    align-self: center;
    color: var(--ink, #46382d);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
  }

  #calculator #calcPrepAggregateView tbody tr:not(.calc-prep-source-breakdown) td:nth-child(2) {
    grid-area: amount;
    align-self: center;
    color: var(--rust, #ad4f2f);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.25;
    text-align: right;
    white-space: nowrap;
  }

  #calculator #calcPrepAggregateView tbody tr:not(.calc-prep-source-breakdown) td:nth-child(3) {
    grid-area: source;
    color: var(--muted, #81766a);
    font-size: 10px;
    line-height: 1.35;
  }

  #calculator #calcPrepAggregateView tbody tr:not(.calc-prep-source-breakdown) td:nth-child(4) {
    grid-area: status;
    color: var(--muted, #81766a);
    font-size: 10px;
    line-height: 1.35;
    text-align: right;
  }

  #calculator #calcPrepAggregateView tbody tr.calc-prep-source-breakdown {
    display: block;
    padding: 0 8px 2px;
    border: 0;
    background: transparent;
  }

  #calculator #calcPrepAggregateView tbody tr.calc-prep-source-breakdown td {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
  }

  #calculator #calcPrepAggregateView .calc-prep-source-item {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 8px;
  }

  #calculator #calcPrepAggregateView .calc-prep-source-item > div {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  #calculator #calcPrepAggregateView .calc-prep-source-item > strong {
    grid-column: 2;
    grid-row: 1;
  }

  #calculator #calcPrepAggregateView .calc-prep-source-item > small {
    grid-column: 2;
    grid-row: 2;
    text-align: right;
  }

  #calculator #calcPrepDetailView tbody tr {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name target"
      "original target";
    gap: 3px 10px;
    padding: 10px 11px;
  }

  #calculator #calcPrepDetailView tbody tr td:nth-child(1) {
    grid-area: name;
    align-self: center;
    color: var(--ink, #46382d);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
  }

  #calculator #calcPrepDetailView tbody tr td:nth-child(2) {
    grid-area: original;
    color: var(--muted, #81766a);
    font-size: 10px;
    line-height: 1.35;
  }

  #calculator #calcPrepDetailView tbody tr td:nth-child(2)::before {
    content: "原始 ";
    color: #9a8878;
  }

  #calculator #calcPrepDetailView tbody tr td:nth-child(3) {
    grid-area: target;
    align-self: center;
    color: var(--rust, #ad4f2f);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
    text-align: right;
    white-space: nowrap;
  }

  #calculator #calcPrepCostView tbody tr:not(.table-total) {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name cost"
      "amount source";
    gap: 3px 10px;
    padding: 10px 11px;
  }

  #calculator #calcPrepCostView tbody tr:not(.table-total) td:nth-child(1) {
    grid-area: name;
    align-self: center;
    color: var(--ink, #46382d);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
  }

  #calculator #calcPrepCostView tbody tr:not(.table-total) td:nth-child(2) {
    grid-area: amount;
    color: var(--muted, #81766a);
    font-size: 10px;
    line-height: 1.35;
  }

  #calculator #calcPrepCostView tbody tr:not(.table-total) td:nth-child(2)::before {
    content: "备料 ";
    color: #9a8878;
  }

  #calculator #calcPrepCostView tbody tr:not(.table-total) td:nth-child(3) {
    grid-area: source;
    min-width: 0;
    overflow: hidden;
    color: var(--muted, #81766a);
    font-size: 10px;
    line-height: 1.35;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #calculator #calcPrepCostView tbody tr:not(.table-total) td:nth-child(4) {
    grid-area: cost;
    align-self: center;
    color: var(--rust, #ad4f2f);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
    text-align: right;
    white-space: nowrap;
  }

  #calculator #calcPrepCostView tbody tr.table-total {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 11px;
    border-top: 2px solid var(--ink, #46382d);
    border-bottom: 0;
    background: rgba(251, 248, 242, .96);
  }

  #calculator #calcPrepCostView tbody tr.table-total td {
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  #calculator #calcPrepCostView tbody tr.table-total td:first-child {
    color: var(--ink, #46382d);
    font-size: 13px;
    font-weight: 800;
  }

  #calculator #calcPrepCostView tbody tr.table-total td:last-child {
    color: var(--ink, #46382d);
    font-size: 15px;
    font-weight: 800;
    text-align: right;
    white-space: nowrap;
  }
}

@media screen and (max-width: 380px) {
  #calculator .calc-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 8px;
  }

  #calculator .calc-summary .summary-yield {
    grid-column: 1 / -1;
  }

  #calculator .calc-summary .summary-yield strong {
    white-space: normal;
    font-size: 18px;
  }
}

/* V0.7 calculator efficiency pass: shorten the path from recipe selection to
   the first usable result while keeping comfortable touch targets. */
@media screen and (max-width: 760px) {
  #calculator.view.active {
    padding-bottom: calc(92px + env(safe-area-inset-bottom));
  }

  #calculator .page-header {
    gap: 6px;
    margin-bottom: 10px;
  }

  #calculator .page-header .eyebrow {
    display: none;
  }

  #calculator .page-header h1 {
    margin-bottom: 3px;
    font-size: clamp(28px, 8vw, 34px);
    line-height: 1.08;
  }

  #calculator .page-header p {
    max-width: none;
    font-size: 11px;
    line-height: 1.45;
  }

  #calculator .calculator-layout {
    gap: 10px;
  }

  #calculator .calculator-controls {
    padding: 13px 14px 12px;
    border-radius: 16px;
  }

  #calculator .control-group {
    margin-bottom: 10px;
  }

  #calculator .control-group > label {
    margin-bottom: 5px;
    font-size: 12px;
    line-height: 1.35;
  }

  #calculator .wide-input,
  #calculator .wide-select {
    height: 48px;
    min-height: 48px;
    padding-right: 12px;
    padding-left: 12px;
  }

  #calculator .mode-switch {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3px;
    padding: 3px;
    border-radius: 12px;
  }

  #calculator .mode-button {
    min-width: 0;
    min-height: 42px;
    padding: 5px 3px;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
  }

  #calculator .quick-values {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    margin-top: 6px;
    padding: 1px 1px 3px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  #calculator .quick-values::-webkit-scrollbar {
    display: none;
  }

  #calculator .quick-button {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    white-space: nowrap;
  }

  #calculator .calc-note {
    margin-top: 0;
    padding: 0;
    font-size: 11px;
    line-height: 1.45;
  }

  #calculator .calc-recipe-search-hint {
    margin-top: 5px;
    font-size: 10px;
    line-height: 1.35;
  }

  #calculator .calc-recipe-search-hint.is-selected {
    color: var(--rust-dark, #8f4229);
  }

  #calculator .calc-portion-divider {
    margin-top: 8px;
    padding: 0 10px;
    border-radius: 12px;
  }

  #calculator .calc-portion-divider-summary {
    min-height: 44px;
    padding: 8px 0;
  }

  #calculator .calc-portion-divider h3 {
    font-size: 14px;
  }

  #calculator .calc-portion-divider-total strong {
    font-size: 15px;
  }

  #calculator .calculator-result {
    margin-top: 0;
    border-radius: 16px;
  }

  #calculator .calculator-result .calc-summary {
    gap: 8px;
    padding: 14px;
  }

  #calculator .calculator-result .calc-summary h2 {
    font-size: 19px;
    line-height: 1.3;
  }

  #calculator .calculator-result .calc-summary p {
    font-size: 10px;
  }

  #calculator .calculator-result .summary-number small {
    margin-bottom: 2px;
    font-size: 9px;
  }

  #calculator .calculator-result .summary-number strong {
    font-size: 20px;
    line-height: 1.15;
  }

  #calculator .calculator-result tbody tr:not(.table-total) {
    gap: 2px 8px;
    padding: 10px 14px;
  }

  #calculator .calculator-result tbody tr:not(.table-total) td:nth-child(1) {
    font-size: 14px;
  }

  #calculator .calculator-result tbody tr:not(.table-total) td:nth-child(4) {
    font-size: 16px;
  }

  #calculator .calc-footer {
    padding: 10px 14px;
  }

  #calculator .calc-footer #copyCalcButton {
    min-height: 44px;
    flex-basis: 100%;
  }

  #calculator .calc-prep-launcher {
    gap: 10px;
    margin-top: 12px;
    padding: 14px;
    border-radius: 16px;
  }

  #calculator .calc-prep-launcher p {
    font-size: 11px;
    line-height: 1.5;
  }

  #calculator #calcPrepLaunchButton {
    width: 100%;
    min-height: 44px;
  }

  .v07-mobile-calc-copy-dialog {
    width: min(390px, calc(100vw - 28px));
    max-width: calc(100vw - 28px);
    margin: auto;
    padding: 0;
    border: 1px solid rgba(83, 67, 49, .16);
    border-radius: 18px;
    color: var(--ink, #46382d);
    background: #fffdf8;
    box-shadow: 0 24px 70px rgba(42, 29, 18, .28);
  }

  .v07-mobile-calc-copy-dialog::backdrop {
    background: rgba(41, 30, 20, .34);
    backdrop-filter: blur(2px);
  }

  .v07-mobile-calc-copy-dialog[open] {
    display: block;
  }

  .v07-mobile-calc-copy-shell {
    padding: 18px;
  }

  .v07-mobile-calc-copy-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
  }

  .v07-mobile-calc-copy-head > div {
    min-width: 0;
  }

  .v07-mobile-calc-copy-head span {
    color: var(--rust, #ad4f2f);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
  }

  .v07-mobile-calc-copy-head h3 {
    margin: 3px 0 4px;
    font-size: 20px;
  }

  .v07-mobile-calc-copy-head p {
    margin: 0;
    color: var(--muted, #81766a);
    font-size: 11px;
    line-height: 1.5;
  }

  .v07-mobile-calc-copy-close {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: var(--muted, #81766a);
    background: var(--paper, #f6f2ea);
    font-size: 20px;
    line-height: 1;
  }

  .v07-mobile-calc-copy-options {
    display: grid;
    gap: 8px;
    margin-top: 16px;
  }

  .v07-mobile-calc-copy-options button {
    display: grid;
    min-height: 52px;
    gap: 2px;
    justify-items: start;
    padding: 10px 13px;
    text-align: left;
  }

  .v07-mobile-calc-copy-options button strong {
    font-size: 13px;
  }

  .v07-mobile-calc-copy-options button small {
    font-size: 10px;
    font-weight: 500;
    opacity: .78;
  }
}

@media screen and (min-width: 761px) {
  .v07-mobile-calc-copy-dialog {
    display: none !important;
  }
}

@media screen and (max-width: 380px) {
  #calculator .calculator-result .calc-summary {
    gap: 7px 6px;
  }

  #calculator .calculator-result .summary-number strong {
    font-size: 18px;
  }

}

/* V2 mobile calculator polish: clarify the single-recipe result versus the
   multi-recipe preparation workflow without changing calculation behavior. */
@media screen and (max-width: 720px) {
  #calculator .calculator-result .calc-summary .summary-number {
    min-width: 0;
    overflow: hidden;
  }

  #calculator .calculator-result .calc-summary .summary-number strong {
    max-width: 100%;
    overflow: hidden;
    font-size: clamp(17px, 5.2vw, 24px);
    line-height: 1.15;
    white-space: pre-line;
    overflow-wrap: anywhere;
  }

  #calculator .calculator-result .calc-summary .summary-number small {
    white-space: nowrap;
  }

  #calculator .calculator-controls {
    padding: 15px;
    border-radius: 17px;
  }

  #calculator .control-group { margin-bottom: 14px; }
  #calculator .mode-switch { gap: 3px; border-radius: 14px; }
  #calculator .mode-button { min-height: 42px; }
  #calculator .quick-values { gap: 6px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  #calculator .quick-values::-webkit-scrollbar { display: none; }
  #calculator .quick-button { flex: 0 0 auto; min-width: 62px; min-height: 38px; padding-inline: 9px; }
  #calculator .calculator-controls .mode-button { min-height: 42px; }
  #calculator .calculator-controls .quick-button { min-height: 36px; padding: 6px 10px; }
  #calculator #quickValues .quick-button[aria-pressed="true"] {
    color: var(--rust-dark, #963f25);
    border-color: rgba(173, 79, 47, .42);
    background: rgba(255, 239, 231, .88);
    box-shadow: 0 3px 10px rgba(173, 79, 47, .12);
  }

  #calculator .v07-mobile-calc-materials-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px 9px;
    border-top: 1px solid rgba(83, 67, 49, .12);
    background: rgba(255, 253, 248, .58);
  }

  #calculator .v07-mobile-calc-materials-title {
    display: grid;
    min-width: 0;
    gap: 2px;
  }

  #calculator .v07-mobile-calc-materials-title span {
    color: var(--rust, #ad4f2f);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .13em;
    line-height: 1;
  }

  #calculator .v07-mobile-calc-materials-title strong {
    color: var(--ink, #46382d);
    font-size: 15px;
    line-height: 1.25;
  }

  #calculator .v07-mobile-calc-materials-count {
    flex: 0 0 auto;
    color: var(--muted, #81766a);
    font-size: 10px;
    line-height: 1.25;
    white-space: nowrap;
  }

  #calculator .calculator-result { margin-top: 12px; border-radius: 18px; }
  #calculator .calculator-result .calc-summary { padding: 17px; }
  #calculator .calculator-result table tbody tr:not(.table-total) td:nth-child(2) { color: var(--muted, #81766a); }
  #calculator .calculator-result table tbody tr:not(.table-total) td:nth-child(3) { color: var(--rust, #ad4f2f); font-weight: 800; }

  #calculator .calc-prep-planner { margin-top: 18px; padding: 14px; border-radius: 17px; }
  #calculator .calc-prep-head { padding-bottom: 2px; }
  #calculator .calc-prep-head h2 { font-size: 21px; }
  #calculator .calc-prep-stat { font-size: 10px; }
  #calculator .calc-prep-toolbar { margin-top: 2px; padding: 10px; border-radius: 12px; }
  #calculator .calc-prep-toolbar-actions { gap: 7px; }
  #calculator .calc-prep-toolbar-actions button { min-height: 40px; }
  #calculator .calc-prep-memory,
  #calculator .calc-prep-memory[open] { margin-top: 2px; padding: 10px; border-radius: 12px; }
  #calculator .calc-prep-memory-head { min-height: 36px; }
  #calculator .calc-prep-memory:not([open]) { min-height: 58px; }
  #calculator .calc-prep-row { padding: 12px; border-radius: 13px; }
  #calculator .calc-prep-detail-card:not([open]) .calc-prep-detail-body { display: none; }
  #calculator .calc-prep-detail-card summary { min-height: 42px; }
  #calculator .calc-prep-view-switch { gap: 3px; border-radius: 999px; }
  #calculator .calc-prep-view-switch button { min-height: 40px; padding-inline: 8px; }
}

@media screen and (min-width: 721px) {
  #calculator .v07-mobile-calc-materials-head {
    display: none;
  }
}

/* V3 mobile calculator layout: make the hybrid hierarchy visible at a glance.
   The extra rail is created by the companion JS only for the calculator view;
   desktop keeps the original two-column structure. */
#calculator .v07-mobile-calc-result-rail {
  display: none;
}

@media screen and (max-width: 720px) {
  #calculator .v07-mobile-calc-layout {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  #calculator .v07-mobile-calc-layout > .calculator-controls {
    order: 1;
  }

  #calculator .v07-mobile-calc-layout > .v07-mobile-calc-result-rail {
    order: 2;
  }

  #calculator .v07-mobile-calc-layout > .calculator-result {
    order: 3;
  }

  #calculator .calculator-controls {
    padding: 14px;
    border: 1px solid rgba(173, 79, 47, .18);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(255, 252, 245, .98), rgba(247, 239, 225, .9));
    box-shadow: 0 10px 24px rgba(102, 75, 48, .08);
  }

  #calculator .v07-mobile-calc-result-rail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 66px;
    padding: 10px 13px;
    border: 1px solid rgba(173, 79, 47, .24);
    border-radius: 17px;
    background: linear-gradient(110deg, rgba(255, 248, 237, .98), rgba(255, 253, 248, .96));
    box-shadow: 0 7px 18px rgba(102, 75, 48, .08);
  }

  #calculator .v07-mobile-calc-result-rail-main {
    display: grid;
    min-width: 0;
    gap: 3px;
  }

  #calculator .v07-mobile-calc-result-rail-main span {
    color: var(--rust, #ad4f2f);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.2;
  }

  #calculator .v07-mobile-calc-result-rail-main strong {
    color: var(--ink, #46382d);
    font-size: 23px;
    font-weight: 900;
    line-height: 1.05;
    white-space: nowrap;
  }

  #calculator .v07-mobile-calc-result-rail-meta {
    display: grid;
    flex: 0 0 auto;
    gap: 4px;
    justify-items: end;
    color: var(--muted, #81766a);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.25;
    text-align: right;
  }

  #calculator .calculator-result {
    margin-top: 0;
    border: 1px solid rgba(83, 67, 49, .11);
    border-radius: 21px;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(77, 58, 40, .1);
  }

  #calculator .calculator-result .calc-summary {
    gap: 6px;
    padding: 13px 15px 12px;
  }

  #calculator .calculator-result .calc-summary h2 {
    margin-bottom: 2px;
    font-size: 19px;
    line-height: 1.22;
  }

  #calculator .calculator-result .calc-summary p {
    margin-bottom: 2px;
    font-size: 10px;
    line-height: 1.3;
  }

  #calculator .calculator-result .summary-number strong {
    font-size: clamp(19px, 5vw, 23px);
  }

  #calculator .calculator-result > .v07-mobile-calc-materials-head {
    margin-top: 0;
    padding: 11px 14px 9px;
    border-top: 1px solid rgba(83, 67, 49, .13);
    background: rgba(255, 252, 245, .88);
  }

  #calculator .calculator-result > .table-wrap {
    padding: 3px 8px 5px;
    background: rgba(255, 253, 248, .9);
  }

  #calculator .calculator-result tbody {
    gap: 7px;
  }

  #calculator .calculator-result tbody tr:not(.table-total) {
    min-height: 62px;
    padding: 10px 12px;
    border-color: rgba(83, 67, 49, .2);
    border-radius: 14px;
    background: linear-gradient(110deg, rgba(255, 254, 251, .98), rgba(250, 246, 238, .96));
    box-shadow: 0 1px 0 rgba(255, 255, 255, .9), 0 3px 9px rgba(84, 63, 41, .045);
  }

  #calculator .calculator-result tbody tr:not(.table-total) td:nth-child(1) {
    font-size: 15px;
  }

  #calculator .calculator-result tbody tr:not(.table-total) td:nth-child(4) {
    min-width: 78px;
    font-size: 17px;
  }

  #calculator .calculator-result tbody tr.table-total {
    margin-top: 1px;
    padding: 13px 12px 12px;
    border-top-width: 2px;
    background: rgba(255, 252, 245, .98);
  }

  #calculator .calc-footer {
    padding: 10px 14px 14px;
    background: rgba(255, 252, 245, .98);
  }

  #calculator .calc-footer #copyCalcButton {
    min-height: 48px;
    border-radius: 14px;
    font-size: 14px;
    box-shadow: 0 7px 14px rgba(173, 79, 47, .14);
  }

  #calculator .calc-prep-launcher {
    gap: 12px;
    margin-top: 16px;
    padding: 17px 15px 15px;
    border: 1px solid rgba(173, 79, 47, .26);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(255, 250, 243, .98), rgba(255, 253, 249, .96));
    box-shadow: 0 9px 22px rgba(102, 75, 48, .07);
  }

  #calculator .calc-prep-launcher .calc-prep-kicker {
    display: block;
    margin-bottom: 4px;
    color: var(--rust, #ad4f2f);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .14em;
    line-height: 1.2;
  }

  #calculator .calc-prep-launcher h2 {
    margin-bottom: 5px;
    font-size: 20px;
    line-height: 1.2;
  }

  #calculator .calc-prep-launcher p {
    margin-bottom: 2px;
    font-size: 11px;
    line-height: 1.55;
  }

  #calculator #calcPrepLaunchButton {
    min-height: 48px;
    border: 1px solid rgba(173, 79, 47, .42);
    border-radius: 14px;
    color: var(--rust-dark, #8f4229);
    background: rgba(255, 250, 243, .9);
    font-size: 13px;
    font-weight: 800;
  }
}

/* V4 mobile calculator details: reuse maintained material images and give the
   result actions one quiet, consistent icon language. */
@media screen and (max-width: 720px) {
  #calculator .v07-mobile-calc-materials-title {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  #calculator .v07-mobile-calc-section-icon,
  #calculator .v07-mobile-calc-total-icon,
  #calculator .v07-mobile-calc-prep-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    color: var(--rust, #ad4f2f);
    background: rgba(190, 94, 58, .1);
  }

  #calculator .v07-mobile-calc-section-icon {
    width: 27px;
    height: 27px;
    border-radius: 9px;
  }

  #calculator .v07-mobile-calc-section-icon svg,
  #calculator .v07-mobile-calc-total-icon svg,
  #calculator .v07-mobile-calc-prep-icon svg,
  #calculator .v07-mobile-calc-copy-icon svg {
    display: block;
    width: 16px;
    height: 16px;
  }

  #calculator .v07-mobile-calc-materials-title-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
  }

  #calculator .v07-mobile-calc-materials-title .v07-mobile-calc-materials-kicker {
    color: var(--rust, #ad4f2f);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .13em;
    line-height: 1;
  }

  #calculator .v07-mobile-calc-materials-title strong {
    font-size: 16px;
    line-height: 1.2;
  }

  #calculator .v07-mobile-calc-materials-title > .v07-mobile-calc-section-icon {
    color: var(--rust, #ad4f2f);
    font-size: 0;
    letter-spacing: normal;
    line-height: 1;
  }

  #calculator .calculator-result tbody tr:not(.table-total) td.ingredient-name {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
  }

  #calculator .v07-mobile-calc-material-thumb {
    display: grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(160, 112, 77, .18);
    border-radius: 10px;
    color: var(--rust, #ad4f2f);
    background: #f4ece3;
    font-size: 11px;
    font-weight: 800;
  }

  #calculator .v07-mobile-calc-material-thumb svg {
    width: 19px;
    height: 19px;
  }

  #calculator .v07-mobile-calc-material-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  #calculator .v07-mobile-calc-material-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #calculator .calculator-result tbody tr.table-total td:first-child {
    display: flex;
    align-items: center;
  }

  #calculator .v07-mobile-calc-total-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  #calculator .v07-mobile-calc-total-icon {
    width: 25px;
    height: 25px;
    border-radius: 8px;
  }

  #calculator .calc-footer #copyCalcButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
  }

  #calculator .v07-mobile-calc-copy-icon {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    line-height: 0;
  }

  #calculator .v07-mobile-calc-copy-icon svg {
    width: 17px;
    height: 17px;
  }

  #calculator .calc-prep-launcher .v07-mobile-calc-prep-title-row {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
  }

  #calculator .v07-mobile-calc-prep-icon {
    width: 35px;
    height: 35px;
    border-radius: 11px;
  }

  #calculator .calc-prep-launcher .v07-mobile-calc-prep-title-row h2 {
    min-width: 0;
    margin-bottom: 0;
  }
}

@media screen and (max-width: 380px) {
  #calculator .v07-mobile-calc-material-thumb {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
    border-radius: 9px;
  }

  #calculator .calculator-result tbody tr:not(.table-total) td.ingredient-name {
    gap: 7px;
  }

  #calculator .v07-mobile-calc-material-name {
    font-size: 13px;
  }
}

/* Keep the single-recipe cost summary directly below the view switch on
   phones, with consistent numeric typography and one total location. */
@media screen and (max-width: 900px) {
  #calculator .calc-single-cost-card { order: 1; }
  #calculator .calc-single-cost-overview {
    order: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0 10px;
    padding: 10px;
  }
  #calculator .calc-single-cost-overview .calc-prep-cost-overview-main { display: none; }
  #calculator .calc-single-cost-overview .calc-prep-cost-overview-stat {
    justify-content: center;
    min-height: 58px;
    padding: 8px 7px;
    border-radius: 9px;
  }
  #calculator .calc-single-cost-overview .calc-prep-cost-overview-stat.is-primary { grid-column: auto; }
  #calculator .calc-single-cost-overview .calc-prep-cost-overview-stat small {
    font-size: 9px;
    line-height: 1.35;
  }
  #calculator .calc-single-cost-overview .calc-prep-cost-overview-stat strong {
    margin-top: 4px;
    color: var(--rust-dark, #74321f);
    font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: lining-nums tabular-nums;
    line-height: 1.25;
    letter-spacing: 0;
  }
  #calculator .calc-single-cost-overview .calc-prep-cost-overview-stat.is-primary strong {
    color: var(--rust, #ad4f2f);
    font-size: 18px;
    line-height: 1.2;
  }
  #calculator .calc-single-cost-note { order: 2; }
  #calculator .calc-prep-cost-source.is-same-material small { margin-top: 0; }
}

/* V5 mobile hierarchy: one result surface, flat rows, and section dividers.
   The calculator already lives inside the page canvas, so another rounded
   shell around the controls and another summary rail only add visual noise.
   Keep the desktop treatment and all calculation behavior unchanged. */
@media screen and (max-width: 720px) {
  #calculator .v07-mobile-calc-layout {
    display: flex;
    gap: 18px;
  }

  /* The result header below contains the same yield, scale and total values. */
  #calculator .v07-mobile-calc-result-rail {
    display: none !important;
  }

  #calculator .calculator-controls {
    padding: 0 0 15px;
    border: 0;
    border-bottom: 1px solid rgba(83, 67, 49, .14);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #calculator .calculator-result {
    margin-top: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #calculator .calculator-result .calc-summary {
    border-radius: 16px 16px 0 0;
  }

  #calculator .calculator-result > .v07-mobile-calc-materials-head {
    padding: 14px 0 9px;
    border-top: 1px solid rgba(83, 67, 49, .14);
    background: transparent;
  }

  #calculator .calculator-result > .table-wrap {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #calculator .calculator-result tbody {
    gap: 0;
  }

  #calculator .calculator-result tbody tr:not(.table-total) {
    min-height: 0;
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid rgba(83, 67, 49, .12);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #calculator .calculator-result tbody tr.table-total {
    margin-top: 0;
    padding: 13px 0 12px;
    border-top: 2px solid var(--ink, #46382d);
    background: transparent;
  }

  #calculator .calc-footer {
    padding: 12px 0 0;
    border-top: 1px solid rgba(83, 67, 49, .12);
    background: transparent;
  }

  #calculator .calc-prep-launcher {
    gap: 12px;
    margin-top: 0;
    padding: 14px 0;
    border: 0;
    border-top: 1px solid rgba(83, 67, 49, .14);
    border-bottom: 1px solid rgba(83, 67, 49, .14);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #calculator .calc-prep-launcher #calcPrepLaunchButton {
    width: auto;
    min-width: 132px;
  }

  #calculator .calc-prep-planner {
    gap: 0;
    margin-top: 18px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #calculator .calc-prep-head {
    padding: 0 0 12px;
    border-bottom: 1px solid rgba(83, 67, 49, .14);
  }

  #calculator .calc-prep-toolbar {
    margin: 0;
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid rgba(83, 67, 49, .12);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #calculator .calc-prep-memory,
  #calculator .calc-prep-memory[open] {
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid rgba(83, 67, 49, .12);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #calculator .calc-prep-row {
    padding: 12px 40px 12px 0;
    border: 0;
    border-bottom: 1px solid rgba(83, 67, 49, .12);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #calculator .calc-prep-summary {
    margin: 12px 0;
    border-radius: 0;
    box-shadow: none;
  }

  #calculator .calc-prep-table-block {
    gap: 0;
    padding: 12px 0 0;
    border: 0;
    border-top: 1px solid rgba(83, 67, 49, .14);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #calculator .calc-prep-table-block .table-wrap {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #calculator .calc-prep-detail-card,
  #calculator .calc-prep-detail-card[open] {
    border: 0;
    border-bottom: 1px solid rgba(83, 67, 49, .12);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
}

/* V6 mobile calculator direction: warm white canvas, explicit control steps,
   quiet presets, and a distinct division tool. Keep this mobile-only so the
   mature desktop calculator keeps its existing surface and density. */
@media screen and (max-width: 720px) {
  body[data-active-view="calculator"],
  body:has(#calculator.view.active) {
    --paper: #fbfcfb;
    --card: #fffefa;
    --surface-raised: rgba(255, 254, 250, .96);
    --surface-soft: rgba(255, 255, 252, .72);
    background:
      radial-gradient(circle at 100% -4%, rgba(226, 174, 99, .11), transparent 22rem),
      radial-gradient(circle at 0 42%, rgba(255, 255, 255, .86), transparent 26rem),
      linear-gradient(180deg, #f8faf9 0%, #fffefa 48%, #fff9f1 100%) !important;
  }

  body[data-active-view="calculator"]::before,
  body:has(#calculator.view.active)::before {
    opacity: .07;
    background-image:
      linear-gradient(rgba(80, 60, 40, .018) 1px, transparent 1px),
      linear-gradient(90deg, rgba(80, 60, 40, .014) 1px, transparent 1px);
  }

  #calculator {
    --calc-line: rgba(83, 67, 49, .14);
    --calc-line-soft: rgba(83, 67, 49, .1);
    --calc-field: rgba(255, 255, 253, .95);
    --calc-warm: rgba(255, 248, 237, .72);
  }

  /* Main flow: recipe → mode → quantity. */
  #calculator .calculator-controls > .control-group {
    margin-bottom: 19px;
  }

  #calculator .calculator-controls > .control-group > label {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-bottom: 7px;
    color: #413a34;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.35;
  }

  #calculator .calculator-controls > .control-group > label::before {
    flex: 0 0 auto;
    color: var(--rust, #ad4f2f);
    font-family: Georgia, serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1;
  }

  #calculator .calculator-controls > .calc-recipe-picker > label::before {
    content: "01";
  }

  #calculator .calculator-controls > .control-group:has(.mode-switch) > label::before {
    content: "02";
  }

  #calculator .calculator-controls > .control-group:has(#calcValue) > label::before {
    content: "03";
  }

  #calculator .calculator-controls > .calc-recipe-picker {
    margin-bottom: 20px;
  }

  #calculator .calculator-controls > .control-group:has(.mode-switch) {
    margin-bottom: 19px;
  }

  #calculator .calculator-controls > .control-group:has(#calcValue) {
    margin-bottom: 10px;
  }

  #calculator .calc-recipe-search,
  #calculator #calcValue {
    border-color: rgba(83, 67, 49, .18);
    border-radius: 13px;
    background: var(--calc-field);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .95), 0 4px 12px rgba(82, 63, 42, .035);
  }

  #calculator .calc-recipe-search {
    min-height: 50px;
  }

  #calculator #calcValue {
    min-height: 52px;
    color: var(--ink, #46382d);
    font-size: 20px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }

  #calculator .calc-recipe-search:focus,
  #calculator #calcValue:focus {
    border-color: rgba(173, 79, 47, .46);
    box-shadow: 0 0 0 3px rgba(173, 79, 47, .08), 0 4px 12px rgba(82, 63, 42, .035);
  }

  /* The segmented switch is the decision point, with only the active choice
     carrying the stronger surface and rust accent. */
  #calculator .calculator-controls .mode-switch {
    gap: 3px;
    padding: 4px;
    border: 1px solid rgba(83, 67, 49, .15);
    border-radius: 14px;
    background: rgba(245, 241, 235, .72);
  }

  #calculator .calculator-controls .mode-button {
    min-height: 42px;
    padding: 5px 3px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #81766c;
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
  }

  #calculator .calculator-controls .mode-button:hover {
    color: #62574d;
    background: rgba(255, 255, 255, .62);
  }

  #calculator .calculator-controls .mode-button.active {
    color: var(--rust-dark, #8f4229);
    border-color: rgba(173, 79, 47, .34);
    background: rgba(255, 255, 253, .98);
    box-shadow: 0 3px 9px rgba(93, 60, 38, .1);
    outline: 0;
  }

  /* Presets are a secondary shortcut rail, not a second row of primary
     buttons. The small “快捷” marker makes that relationship explicit. */
  #calculator #quickValues {
    align-items: center;
    gap: 5px;
    margin-top: 10px;
    padding: 9px 0 1px;
    border-top: 1px dashed rgba(83, 67, 49, .16);
  }

  #calculator #quickValues::before {
    flex: 0 0 auto;
    color: #a09489;
    content: "快捷";
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
  }

  #calculator #quickValues .quick-button {
    min-width: 0;
    min-height: 30px;
    padding: 4px 9px;
    border: 1px solid rgba(83, 67, 49, .13);
    border-radius: 999px;
    color: #81766c;
    background: rgba(255, 255, 253, .55);
    box-shadow: none;
    font-size: 10px;
    font-weight: 700;
  }

  #calculator #quickValues .quick-button:hover {
    color: #655a51;
    border-color: rgba(83, 67, 49, .22);
    background: rgba(255, 255, 253, .88);
  }

  #calculator #quickValues .quick-button[aria-pressed="true"],
  #calculator #quickValues .quick-button.is-selected {
    color: var(--rust-dark, #8f4229);
    border-color: rgba(173, 79, 47, .4);
    background: rgba(255, 239, 230, .9);
    box-shadow: 0 2px 7px rgba(173, 79, 47, .1);
  }

  #calculator .calc-note {
    margin: 2px 0 0;
    padding: 0 1px;
    color: #897d72;
    font-size: 10px;
    line-height: 1.5;
  }

  /* Division is a utility: give it a dashed, warm tool surface and a visible
     ÷ cue so it cannot be mistaken for another form section. */
  #calculator .calc-portion-divider {
    margin-top: 17px;
    padding: 0 12px 12px;
    border: 1px dashed rgba(173, 79, 47, .34);
    border-radius: 15px;
    background:
      radial-gradient(circle at 100% 0, rgba(226, 174, 99, .12), transparent 9rem),
      linear-gradient(135deg, rgba(255, 249, 239, .92), rgba(255, 255, 252, .78));
    box-shadow: none;
  }

  #calculator .calc-portion-divider-summary {
    min-height: 54px;
    align-items: center;
    gap: 9px;
    padding: 9px 25px 9px 0;
  }

  #calculator .calc-portion-divider-summary::before {
    display: grid;
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    place-items: center;
    border-radius: 9px;
    color: var(--rust, #ad4f2f);
    background: rgba(173, 79, 47, .12);
    content: "÷";
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
  }

  #calculator .calc-portion-divider-summary > div:first-of-type {
    min-width: 0;
    flex: 1 1 auto;
  }

  #calculator .calc-portion-divider-kicker {
    margin-bottom: 3px;
    color: var(--rust, #ad4f2f);
    font-size: 8px;
    letter-spacing: .11em;
  }

  #calculator .calc-portion-divider h3 {
    font-size: 15px;
    line-height: 1.25;
  }

  #calculator .calc-portion-divider-head p {
    max-width: none;
    margin-top: 3px;
    font-size: 9px;
    line-height: 1.45;
  }

  #calculator .calc-portion-divider-total {
    min-width: 62px;
    padding-left: 4px;
  }

  #calculator .calc-portion-divider-total strong {
    margin-top: 2px;
    font-size: 15px;
  }

  #calculator .calc-portion-divider-summary::after {
    right: 0;
    color: rgba(173, 79, 47, .72);
    font-size: 16px;
  }

  #calculator .calc-portion-divider-body {
    padding-top: 11px;
    border-top: 1px dashed rgba(173, 79, 47, .2);
  }

  #calculator .calc-portion-divider-field {
    margin-top: 0;
  }

  #calculator .calc-portion-divider-field label {
    margin-bottom: 5px;
    color: #6f6258;
    font-size: 10px;
  }

  #calculator .calc-portion-divider-field .wide-input {
    min-height: 44px;
    height: 44px;
    border-color: rgba(173, 79, 47, .2);
    background: rgba(255, 255, 253, .86);
  }

  #calculator .calc-portion-quick-values {
    gap: 5px;
    margin-top: 8px;
    padding: 0;
    border-top: 0;
  }

  #calculator .calc-portion-quick-values::before {
    display: none;
  }

  #calculator .calc-portion-quick-values .quick-button {
    min-height: 30px;
    padding: 4px 7px;
    border-color: rgba(173, 79, 47, .18);
    color: #8b7464;
    background: rgba(255, 255, 253, .5);
  }

  #calculator .calc-portion-quick-values .quick-button[aria-pressed="true"] {
    color: #fffaf3;
    border-color: var(--rust, #ad4f2f);
    background: var(--rust, #ad4f2f);
    box-shadow: 0 3px 8px rgba(173, 79, 47, .14);
  }

  #calculator .calc-portion-result {
    margin-top: 11px;
    padding: 9px 10px;
    border-top: 1px solid rgba(173, 79, 47, .14);
    border-left: 3px solid var(--rust, #ad4f2f);
    border-radius: 0 9px 9px 0;
    background: rgba(255, 255, 253, .66);
  }

  #calculator .calc-portion-result strong {
    font-size: 18px;
  }
}

/* Final V0.7 phone hierarchy: one compact flow for every mobile viewport.
   The desktop calculator remains on its existing density and card treatment. */
#calculator .calculator-subtitle-mobile {
  display: none;
}

@media screen and (max-width: 900px) {
  #calculator .page-header {
    align-items: flex-start;
    gap: 0;
    margin-bottom: 14px;
  }

  #calculator .page-header .eyebrow {
    display: inline-block;
    margin-bottom: 5px;
    color: var(--rust, #ad4f2f);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .16em;
    line-height: 1;
  }

  #calculator .page-header h1 {
    margin-bottom: 3px;
    font-size: clamp(26px, 5.8vw, 30px);
    line-height: 1.12;
    letter-spacing: -.025em;
  }

  #calculator .page-header p {
    max-width: 100%;
    color: var(--muted, #81766a);
    font-size: 10px;
    line-height: 1.45;
  }

  #calculator .calculator-subtitle-desktop {
    display: none;
  }

  #calculator .calculator-subtitle-mobile {
    display: inline;
  }

  #calculator .calculator-layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  #calculator .calculator-layout > * {
    min-width: 0;
    width: 100%;
  }

  #calculator .calculator-controls {
    position: static;
    padding: 0 0 14px;
    border: 0;
    border-bottom: 1px solid var(--calc-line, rgba(83, 67, 49, .14));
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #calculator .calculator-controls > .control-group {
    margin-bottom: 14px;
  }

  #calculator .calculator-controls > .control-group > label {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 6px;
    color: var(--ink, #46382d);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
  }

  #calculator .calculator-controls > .control-group > label::before {
    flex: 0 0 auto;
    color: var(--rust, #ad4f2f);
    font-family: Georgia, serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1;
  }

  #calculator .calculator-controls > .calc-recipe-picker > label::before {
    content: "01";
  }

  #calculator .calculator-controls > .control-group:has(.mode-switch) > label::before {
    content: "02";
  }

  #calculator .calculator-controls > .control-group:has(#calcValue) > label::before {
    content: "03";
  }

  #calculator .calculator-controls > .calc-recipe-picker {
    margin-bottom: 15px;
  }

  #calculator .calculator-controls > .control-group:has(.mode-switch) {
    margin-bottom: 14px;
  }

  #calculator .calculator-controls > .control-group:has(#calcValue) {
    margin-bottom: 8px;
  }

  #calculator .calc-recipe-search,
  #calculator #calcValue {
    min-height: 46px;
    height: 46px;
    border-radius: 11px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .9), 0 3px 10px rgba(82, 63, 42, .03);
  }

  #calculator #calcValue {
    color: var(--ink, #46382d);
    font-size: 18px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }

  #calculator .calc-recipe-search-hint {
    margin-top: 4px;
    font-size: 9px;
    line-height: 1.35;
  }

  #calculator .calculator-controls .mode-switch {
    gap: 2px;
    padding: 3px;
    border-radius: 11px;
  }

  #calculator .calculator-controls .mode-button {
    min-width: 0;
    min-height: 39px;
    padding: 4px 3px;
    border-radius: 8px;
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
  }

  #calculator #quickValues {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 5px;
    margin-top: 7px;
    padding: 0 0 2px;
    border-top: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  #calculator #quickValues::-webkit-scrollbar {
    display: none;
  }

  #calculator #quickValues::before {
    flex: 0 0 auto;
    color: #a09489;
    content: "快捷";
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
  }

  #calculator #quickValues .quick-button {
    flex: 0 0 auto;
    min-width: 0;
    min-height: 29px;
    padding: 4px 8px;
    border-radius: 999px;
    box-shadow: none;
    font-size: 10px;
    white-space: nowrap;
  }

  #calculator .calc-note {
    margin: 1px 0 0;
    padding: 0 1px;
    color: #897d72;
    font-size: 9px;
    line-height: 1.45;
  }

  /* Portion division is a utility row, not another card in the form. */
  #calculator .calc-portion-divider {
    margin: 7px 0 0;
    padding: 0;
    border: 0;
    border-top: 1px solid var(--calc-line-soft, rgba(83, 67, 49, .1));
    border-bottom: 1px solid var(--calc-line-soft, rgba(83, 67, 49, .1));
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #calculator .calc-portion-divider-summary {
    min-height: 42px;
    align-items: center;
    gap: 7px;
    padding: 7px 21px 7px 0;
  }

  #calculator .calc-portion-divider-summary::before {
    display: grid;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    place-items: center;
    border-radius: 6px;
    color: var(--rust, #ad4f2f);
    background: rgba(173, 79, 47, .08);
    content: "÷";
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
  }

  #calculator .calc-portion-divider-kicker,
  #calculator .calc-portion-divider-head p {
    display: none;
  }

  #calculator .calc-portion-divider-summary > div:first-of-type {
    min-width: 0;
    flex: 1 1 auto;
  }

  #calculator .calc-portion-divider h3 {
    overflow: hidden;
    color: var(--ink, #46382d);
    font-size: 12px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #calculator .calc-portion-divider-total {
    min-width: 58px;
    padding-left: 3px;
  }

  #calculator .calc-portion-divider-total small {
    font-size: 8px;
  }

  #calculator .calc-portion-divider-total strong {
    margin-top: 1px;
    font-size: 14px;
  }

  #calculator .calc-portion-divider-summary::after {
    right: 0;
    color: rgba(173, 79, 47, .68);
    font-size: 14px;
  }

  #calculator .calc-portion-divider-body {
    padding: 9px 0 10px;
    border-top: 1px solid var(--calc-line-soft, rgba(83, 67, 49, .1));
  }

  #calculator .calc-portion-divider-field {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    margin-top: 0;
  }

  #calculator .calc-portion-divider-field label {
    margin-bottom: 0;
    color: var(--muted, #81766a);
    font-size: 10px;
    white-space: nowrap;
  }

  #calculator .calc-portion-divider-field .wide-input {
    min-height: 40px;
    height: 40px;
    border-color: rgba(173, 79, 47, .18);
    border-radius: 10px;
    background: rgba(255, 255, 253, .86);
  }

  #calculator .calc-portion-quick-values {
    gap: 5px;
    margin-top: 7px;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  #calculator .calc-portion-quick-values::-webkit-scrollbar {
    display: none;
  }

  #calculator .calc-portion-quick-values::before {
    display: none;
  }

  #calculator .calc-portion-quick-values .quick-button {
    flex: 0 0 auto;
    min-height: 28px;
    padding: 4px 7px;
    font-size: 10px;
  }

  #calculator .calc-portion-result {
    margin-top: 8px;
    padding: 8px 9px;
    border-top: 1px solid rgba(173, 79, 47, .12);
    border-left-width: 2px;
    border-radius: 0 7px 7px 0;
    background: rgba(255, 255, 253, .58);
  }

  #calculator .calc-portion-result small {
    font-size: 9px;
  }

  #calculator .calc-portion-result strong {
    font-size: 16px;
  }

  #calculator .calculator-result {
    margin-top: 0;
    border-radius: 15px;
  }

  #calculator .calculator-result .calc-summary {
    gap: 8px;
    padding: 14px;
    border-radius: 15px 15px 0 0;
  }

  #calculator .calculator-result .calc-summary h2 {
    font-size: 18px;
    line-height: 1.3;
  }

  #calculator .calculator-result .calc-summary p {
    font-size: 9px;
  }

  #calculator .calculator-result .summary-number small {
    font-size: 9px;
  }

  #calculator .calculator-result .summary-number strong {
    font-size: clamp(17px, 4.8vw, 22px);
  }
}

/* V6 mobile image treatment: keep the material thumbnail as a recognition
   anchor, but reduce the feeling of a second card inside every ingredient row. */
@media screen and (max-width: 720px) {
  #calculator .v07-mobile-calc-material-thumb {
    border-color: rgba(160, 112, 77, .1);
    background: rgba(244, 236, 227, .58);
  }
}

/* V0.7 multi-recipe mode marker: make the workflow switch visible without
   bringing back a heavy nested card on the phone-sized calculator. */
@media screen and (max-width: 900px) {
  #calculator .calc-prep-planner {
    scroll-margin-top: calc(60px + env(safe-area-inset-top) + 14px);
  }

  #calculator .calc-prep-planner.is-multi-mode {
    margin-top: 26px;
  }

  #calculator .calc-prep-toolbar-reset {
    display: none;
  }

  #calculator .calc-prep-toolbar-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  #calculator .calc-prep-mode-banner {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 11px 12px;
    border: 1px solid rgba(173, 79, 47, .25);
    border-radius: 14px;
    background: linear-gradient(105deg, rgba(255, 246, 233, .96), rgba(255, 251, 245, .82));
  }

  #calculator .calc-prep-mode-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
  }

  #calculator .calc-prep-mode-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #fffaf4;
    background: var(--rust, #ad4f2f);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
  }

  #calculator .calc-prep-mode-copy {
    min-width: 0;
  }

  #calculator .calc-prep-mode-label {
    display: block;
    margin-bottom: 2px;
    color: var(--rust, #ad4f2f);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
    line-height: 1.2;
  }

  #calculator .calc-prep-mode-copy strong {
    display: block;
    color: var(--ink, #46382d);
    font-size: 14px;
    line-height: 1.3;
  }

  #calculator .calc-prep-mode-copy p {
    margin: 3px 0 0;
    color: var(--muted, #81766a);
    font-size: 10px;
    line-height: 1.4;
  }

  #calculator .calc-prep-mode-badge {
    align-self: start;
    padding: 5px 7px;
    border: 1px solid rgba(173, 79, 47, .2);
    border-radius: 999px;
    color: var(--rust-dark, #74321f);
    background: rgba(173, 79, 47, .08);
    font-size: 9px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
  }

  #calculator .calc-prep-mode-reset {
    min-height: 32px;
    padding: 6px 9px;
    border: 1px solid rgba(173, 79, 47, .2);
    border-radius: 9px;
    color: var(--rust-dark, #74321f);
    background: rgba(255, 255, 255, .56);
    font-size: 10px;
    white-space: nowrap;
  }

  #calculator .calc-prep-mode-reset:hover,
  #calculator .calc-prep-mode-reset:focus-visible {
    border-color: rgba(173, 79, 47, .42);
    background: rgba(173, 79, 47, .08);
    outline: none;
  }
}

@media screen and (max-width: 720px) {
  #calculator .calc-prep-planner.is-multi-mode {
    margin-top: 26px;
    padding-top: 14px;
    border-top: 2px solid var(--rust, #ad4f2f);
  }

  #calculator .calc-prep-mode-banner {
    margin-bottom: 12px;
  }

  #calculator .calc-prep-rows {
    gap: 0;
    border-top: 1px solid rgba(83, 67, 49, .14);
  }

  #calculator .calc-prep-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 14px 0;
    border: 0;
    border-bottom: 1px solid rgba(83, 67, 49, .14);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #calculator .calc-prep-row-main,
  #calculator .calc-prep-row-params {
    grid-column: 1 / -1;
  }

  #calculator .calc-prep-row-main {
    gap: 8px;
    padding-right: 38px;
  }

  #calculator .calc-prep-row-head {
    min-height: 30px;
  }

  #calculator .calc-prep-row::before {
    display: none;
  }

  #calculator .calc-prep-row-selection > .calc-prep-row-label {
    margin-bottom: 6px;
    color: #786a5b;
  }

  #calculator .calc-prep-row-note {
    display: none;
  }

  #calculator .calc-prep-row-compact-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 1px;
    padding-top: 9px;
    border-top: 1px solid rgba(83, 67, 49, .1);
  }

  #calculator .calc-prep-row-compact-meta > span {
    display: flex;
    align-items: baseline;
    gap: 7px;
    min-width: 0;
  }

  #calculator .calc-prep-row-compact-meta small {
    flex: 0 0 auto;
    color: var(--muted, #81766a);
    font-size: 10px;
    line-height: 1.3;
  }

  #calculator .calc-prep-row-compact-meta strong {
    overflow: hidden;
    color: var(--rust-dark, #74321f);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #calculator .calc-prep-row-params-toggle {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 30px;
    padding: 4px 0 4px 8px;
    border: 0;
    color: var(--rust, #ad4f2f);
    background: transparent;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
  }

  #calculator .calc-prep-row-params-toggle:focus-visible {
    outline: 1px solid rgba(173, 79, 47, .34);
    outline-offset: 2px;
  }

  #calculator .calc-prep-row-params {
    display: none;
    gap: 9px;
    margin-top: 10px;
    padding: 10px 0 0;
    border: 0;
    border-top: 1px dashed rgba(173, 79, 47, .2);
    border-radius: 0;
    background: transparent;
  }

  #calculator .calc-prep-row.is-params-open .calc-prep-row-params {
    display: grid;
  }

  #calculator .calc-prep-row-params {
    grid-column: 1 / -1;
  }

  #calculator .calc-prep-row-fields {
    gap: 8px;
  }

  #calculator .calc-prep-remove {
    top: 10px;
    right: 0;
  }
}

@media screen and (max-width: 380px) {
  #calculator .calc-prep-mode-banner {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  #calculator .calc-prep-mode-mark {
    width: 28px;
    height: 28px;
  }

  #calculator .calc-prep-mode-badge {
    grid-column: 2;
    justify-self: start;
    margin-top: -4px;
  }

  #calculator .calc-prep-mode-actions {
    grid-column: 2;
    align-items: flex-start;
  }

  #calculator .calc-prep-mode-copy p {
    display: none;
  }

  #calculator .calc-prep-row-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The cost tab follows the same quiet ingredient-row layout as the weighing
   tab; only the right-hand figures change from ratio/weight to unit/total cost. */
@media screen and (max-width: 900px) {
  #calculator .calc-single-cost-card {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #calculator .calc-single-cost-card > .table-wrap {
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #calculator .calc-single-cost-details .calc-single-cost-table tbody { gap: 0; }

  #calculator .calc-single-cost-details .calc-single-cost-table tbody tr:not(.table-total) {
    grid-template-areas: "name cost" "amount source";
    gap: 3px 10px;
    min-height: 0;
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid rgba(83, 67, 49, .12);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #calculator .calc-single-cost-details .calc-single-cost-table tbody tr:not(.table-total) td {
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  #calculator .calc-single-cost-details .calc-single-cost-table tbody tr:not(.table-total) td:nth-child(1) {
    grid-area: name;
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    min-height: 38px;
    color: var(--ink, #46382d);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
  }

  #calculator .calc-single-cost-details .calc-single-cost-table tbody tr:not(.table-total) td:nth-child(2) {
    grid-area: amount;
    color: var(--muted, #81766a);
    font-size: 10px;
    line-height: 1.35;
  }

  #calculator .calc-single-cost-details .calc-single-cost-table tbody tr:not(.table-total) td:nth-child(2)::before {
    content: "本次用量 ";
    color: #9a8878;
  }

  #calculator .calc-single-cost-details .calc-single-cost-table tbody tr:not(.table-total) td:nth-child(3) {
    grid-area: source;
    min-width: 0;
    overflow: visible;
    color: var(--muted, #81766a);
    font-size: 10px;
    line-height: 1.35;
    text-align: right;
    text-overflow: clip;
    white-space: normal;
  }

  #calculator .calc-single-cost-details .calc-single-cost-table tbody tr:not(.table-total) td:nth-child(3)::before {
    display: none;
    content: none;
  }

  #calculator .calc-single-cost-details .calc-prep-cost-source {
    min-width: 0;
  }

  #calculator .calc-single-cost-details .calc-prep-cost-source small {
    margin-top: 0;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.35;
  }

  #calculator .calc-single-cost-details .calc-single-cost-table tbody tr:not(.table-total) td:nth-child(4) {
    grid-area: cost;
    align-self: center;
    min-width: 78px;
    color: var(--rust, #ad4f2f);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.25;
    text-align: right;
  }

  #calculator .calc-single-cost-details .calc-prep-cost-value strong {
    color: var(--rust, #ad4f2f);
    font-size: 16px;
    font-weight: 800;
    font-variant-numeric: lining-nums tabular-nums;
    line-height: 1.25;
  }

  #calculator .calc-single-cost-details .calc-single-cost-table tbody tr.table-total {
    display: none;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    margin-top: 0;
    padding: 13px 0 12px;
    border-top: 2px solid var(--ink, #46382d);
    border-bottom: 0;
    background: transparent;
  }

  #calculator .calc-single-cost-details .calc-single-cost-table tbody tr.table-total td {
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  #calculator .calc-single-cost-details .calc-single-cost-table tbody tr.table-total td:first-child {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    color: var(--ink, #46382d);
    font-size: 15px;
    font-weight: 800;
  }

  #calculator .calc-single-cost-details .calc-single-cost-table tbody tr.table-total td:last-child {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    color: var(--ink, #46382d);
    font-size: 16px;
    font-weight: 800;
    text-align: right;
    white-space: nowrap;
  }
}
/* V0.7 mobile inventory reminder: turn wide data tables into readable cards.
   Desktop keeps the original table so this file only changes the phone layout. */



@media (max-width: 900px) {
  #materials .lab-inventory-panel,
  #materials .lab-assessment-panel {
    padding: 14px;
  }

  #materials .lab-inventory-panel .lab-table-wrap,
  #materials .lab-assessment-panel .lab-table-wrap {
    overflow: visible;
  }

  #materials .lab-inventory-panel .lab-table,
  #materials .lab-assessment-panel .lab-table {
    display: block;
    width: 100%;
    min-width: 0;
  }

  #materials .lab-inventory-panel .lab-table > thead,
  #materials .lab-assessment-panel .lab-table > thead {
    display: none;
  }

  #materials .lab-inventory-panel .lab-table > tbody,
  #materials .lab-assessment-panel .lab-table > tbody {
    display: grid;
    gap: 10px;
  }

  #materials .lab-inventory-panel .lab-table > tbody > tr,
  #materials .lab-assessment-panel .lab-table > tbody > tr {
    display: grid;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid rgba(173, 153, 132, .24);
    border-radius: 16px;
    background: rgba(255, 253, 249, .94);
    box-shadow: 0 5px 16px rgba(74, 49, 31, .045);
  }

  #materials .lab-inventory-panel .lab-table > tbody > tr > td,
  #materials .lab-assessment-panel .lab-table > tbody > tr > td {
    display: block;
    min-width: 0;
    box-sizing: border-box;
    padding: 0;
    border: 0;
    background: transparent;
  }

  #materials .lab-inventory-panel .lab-table > tbody > tr > td:not(:first-child)::before,
  #materials .lab-assessment-panel .lab-table > tbody > tr > td:not(:first-child)::before {
    display: block;
    margin-bottom: 4px;
    color: var(--muted, #81766a);
    font-size: 9px;
    font-weight: 750;
    line-height: 1.3;
  }

  /* Inventory cards: the material identity leads, then the operational fields
     are paired so the important information is visible without swiping. */
  #materials .lab-inventory-panel .lab-table > tbody > tr {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "material material"
      "quantity minimum"
      "date date"
      "countdown price"
      "status actions";
    gap: 0 12px;
    padding: 12px;
  }

  #materials .lab-inventory-panel .lab-table > tbody > tr > td:nth-child(1) {
    grid-area: material;
    padding-bottom: 11px;
    border-bottom: 1px solid rgba(173, 153, 132, .16);
  }

  #materials .lab-inventory-panel .lab-table > tbody > tr > td:nth-child(1)::before {
    display: block;
    margin-bottom: 7px;
    color: #a87a61;
    content: "材料";
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
  }

  #materials .lab-inventory-panel .lab-table > tbody > tr > td:nth-child(2) {
    grid-area: quantity;
    padding-top: 11px;
  }

  #materials .lab-inventory-panel .lab-table > tbody > tr > td:nth-child(2)::before {
    content: "当前库存";
  }

  #materials .lab-inventory-panel .lab-table > tbody > tr > td:nth-child(3) {
    grid-area: minimum;
    padding-top: 11px;
  }

  #materials .lab-inventory-panel .lab-table > tbody > tr > td:nth-child(3)::before {
    content: "最低库存";
  }

  #materials .lab-inventory-panel .lab-table > tbody > tr > td:nth-child(4) {
    grid-area: date;
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px solid rgba(173, 153, 132, .12);
  }

  #materials .lab-inventory-panel .lab-table > tbody > tr > td:nth-child(4)::before {
    content: "日期";
  }

  #materials .lab-inventory-panel .lab-table > tbody > tr > td:nth-child(5) {
    grid-area: countdown;
    margin-top: 11px;
  }

  #materials .lab-inventory-panel .lab-table > tbody > tr > td:nth-child(5)::before {
    content: "倒计时";
  }

  #materials .lab-inventory-panel .lab-table > tbody > tr > td:nth-child(6) {
    grid-area: price;
    margin-top: 11px;
  }

  #materials .lab-inventory-panel .lab-table > tbody > tr > td:nth-child(6)::before {
    content: "采购价";
  }

  #materials .lab-inventory-panel .lab-table > tbody > tr > td:nth-child(7) {
    display: flex;
    grid-area: status;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px solid rgba(173, 153, 132, .12);
  }

  #materials .lab-inventory-panel .lab-table > tbody > tr > td:nth-child(7)::before {
    width: 100%;
    margin-bottom: 0;
    content: "状态";
  }

  #materials .lab-inventory-panel .lab-table > tbody > tr > td:nth-child(8) {
    display: flex;
    grid-area: actions;
    align-items: flex-end;
    justify-content: flex-end;
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px solid rgba(173, 153, 132, .12);
  }

  #materials .lab-inventory-panel .lab-table > tbody > tr > td:nth-child(8)::before {
    align-self: center;
    margin: 0 auto 0 0;
    content: "操作";
  }

  #materials .lab-inventory-panel .lab-material-name-cell {
    min-width: 0;
    gap: 10px;
  }

  #materials .lab-inventory-panel .lab-material-name-cell > div:last-child {
    min-width: 0;
  }

  #materials .lab-inventory-panel .lab-material-name-cell strong {
    display: block;
    overflow: hidden;
    font-size: 15px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #materials .lab-inventory-panel .lab-material-subline {
    max-width: 100%;
    overflow: hidden;
    flex-wrap: nowrap;
  }

  #materials .lab-inventory-panel .lab-material-subline small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #materials .lab-inventory-panel .lab-quantity-control {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  #materials .lab-inventory-panel .lab-quantity-input {
    flex: 1 1 auto;
    min-width: 0;
  }

  #materials .lab-inventory-panel .lab-table > tbody > tr > td:nth-child(3),
  #materials .lab-inventory-panel .lab-table > tbody > tr > td:nth-child(6) {
    color: var(--ink-soft, #5e5144);
    font-size: 13px;
    font-weight: 750;
    line-height: 1.35;
  }

  #materials .lab-inventory-panel .lab-material-date-cell strong {
    font-size: 11px;
  }

  #materials .lab-inventory-panel .lab-material-date-cell small {
    font-size: 9px;
  }

  #materials .lab-inventory-panel .lab-countdown {
    min-width: 0;
    padding: 5px 8px;
  }

  #materials .lab-inventory-panel .lab-table-actions {
    gap: 10px;
  }

  #materials .lab-inventory-panel .lab-table-actions button {
    min-height: 30px;
    padding: 5px 0;
    font-size: 10px;
  }

  /* Assessment cards use the same treatment, so the second table does not
     reintroduce a hidden horizontal scrollbar lower on the page. */
  #materials .lab-assessment-panel .lab-table > tbody > tr {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "name name"
      "current filling"
      "now plan"
      "after daily"
      "status actions";
    gap: 0 12px;
    padding: 12px;
  }

  #materials .lab-assessment-panel .lab-table > tbody > tr > td:nth-child(1) {
    grid-area: name;
    padding-bottom: 11px;
    border-bottom: 1px solid rgba(173, 153, 132, .16);
  }

  #materials .lab-assessment-panel .lab-table > tbody > tr > td:nth-child(1)::before {
    display: block;
    margin-bottom: 7px;
    color: #a87a61;
    content: "评估规格";
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
  }

  #materials .lab-assessment-panel .lab-table > tbody > tr > td:nth-child(2) {
    grid-area: current;
    padding-top: 11px;
  }

  #materials .lab-assessment-panel .lab-table > tbody > tr > td:nth-child(2)::before {
    content: "当前库存";
  }

  #materials .lab-assessment-panel .lab-table > tbody > tr > td:nth-child(3) {
    grid-area: filling;
    padding-top: 11px;
  }

  #materials .lab-assessment-panel .lab-table > tbody > tr > td:nth-child(3)::before {
    content: "每个用馅";
  }

  #materials .lab-assessment-panel .lab-table > tbody > tr > td:nth-child(4) {
    grid-area: now;
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px solid rgba(173, 153, 132, .12);
  }

  #materials .lab-assessment-panel .lab-table > tbody > tr > td:nth-child(4)::before {
    content: "现在可做";
  }

  #materials .lab-assessment-panel .lab-table > tbody > tr > td:nth-child(5) {
    grid-area: plan;
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px solid rgba(173, 153, 132, .12);
  }

  #materials .lab-assessment-panel .lab-table > tbody > tr > td:nth-child(5)::before {
    content: "未来计划消耗";
  }

  #materials .lab-assessment-panel .lab-table > tbody > tr > td:nth-child(6) {
    grid-area: after;
    margin-top: 11px;
  }

  #materials .lab-assessment-panel .lab-table > tbody > tr > td:nth-child(6)::before {
    content: "计划后可做";
  }

  #materials .lab-assessment-panel .lab-table > tbody > tr > td:nth-child(7) {
    grid-area: daily;
    margin-top: 11px;
  }

  #materials .lab-assessment-panel .lab-table > tbody > tr > td:nth-child(7)::before {
    content: "计划日均";
  }

  #materials .lab-assessment-panel .lab-table > tbody > tr > td:nth-child(8) {
    display: flex;
    grid-area: status;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px solid rgba(173, 153, 132, .12);
  }

  #materials .lab-assessment-panel .lab-table > tbody > tr > td:nth-child(8)::before {
    width: 100%;
    margin-bottom: 0;
    content: "状态";
  }

  #materials .lab-assessment-panel .lab-table > tbody > tr > td:nth-child(9) {
    display: flex;
    grid-area: actions;
    align-items: flex-end;
    justify-content: flex-end;
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px solid rgba(173, 153, 132, .12);
  }

  #materials .lab-assessment-panel .lab-table > tbody > tr > td:nth-child(9)::before {
    align-self: center;
    margin: 0 auto 0 0;
    content: "操作";
  }

  #materials .lab-assessment-panel .lab-assessment-name strong {
    display: block;
    overflow-wrap: anywhere;
    font-size: 14px;
    line-height: 1.35;
  }

  #materials .lab-assessment-panel .lab-assessment-name small {
    line-height: 1.45;
  }

  #materials .lab-assessment-panel .lab-table > tbody > tr > td:nth-child(2),
  #materials .lab-assessment-panel .lab-table > tbody > tr > td:nth-child(3),
  #materials .lab-assessment-panel .lab-table > tbody > tr > td:nth-child(5),
  #materials .lab-assessment-panel .lab-table > tbody > tr > td:nth-child(7) {
    color: var(--ink-soft, #5e5144);
    font-size: 12px;
    line-height: 1.4;
  }

  #materials .lab-assessment-panel .lab-table > tbody > tr > td strong {
    font-size: 14px;
  }

  #materials .lab-assessment-panel .lab-table-actions {
    gap: 10px;
  }

  #materials .lab-assessment-panel .lab-table-actions button {
    min-height: 30px;
    padding: 5px 0;
    font-size: 10px;
  }

  #materials .lab-inventory-panel .lab-table > tbody > tr > td[colspan],
  #materials .lab-assessment-panel .lab-table > tbody > tr > td[colspan] {
    grid-column: 1 / -1;
  }
}

@media (max-width: 420px) {
  #materials .lab-inventory-panel .lab-table > tbody > tr,
  #materials .lab-assessment-panel .lab-table > tbody > tr {
    gap: 0 9px;
    padding: 11px;
  }

  #materials .lab-inventory-panel .lab-table > tbody > tr > td:nth-child(2),
  #materials .lab-inventory-panel .lab-table > tbody > tr > td:nth-child(3),
  #materials .lab-assessment-panel .lab-table > tbody > tr > td:nth-child(2),
  #materials .lab-assessment-panel .lab-table > tbody > tr > td:nth-child(3) {
    padding-top: 10px;
  }

  #materials .lab-inventory-panel .lab-quantity-button {
    width: 24px;
    height: 26px;
    }
}

/* Compact pass: keep the card model, but remove repeated vertical chrome so
   several materials can be scanned in one phone viewport. */
@media (max-width: 900px) {
  #materials .lab-inventory-panel .lab-table > tbody > tr,
  #materials .lab-assessment-panel .lab-table > tbody > tr {
    border-radius: 14px;
    padding: 9px 10px;
  }

  #materials .lab-inventory-panel .lab-table > tbody > tr > td:nth-child(1),
  #materials .lab-assessment-panel .lab-table > tbody > tr > td:nth-child(1) {
    padding-bottom: 8px;
  }

  #materials .lab-inventory-panel .lab-table > tbody > tr > td:nth-child(1)::before,
  #materials .lab-assessment-panel .lab-table > tbody > tr > td:nth-child(1)::before {
    display: none;
  }

  #materials .lab-inventory-panel .lab-material-name-cell {
    gap: 8px;
  }

  #materials .lab-inventory-panel .lab-material-thumb.table {
    flex-basis: 38px;
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }

  #materials .lab-inventory-panel .lab-material-name-cell strong {
    font-size: 14px;
  }

  #materials .lab-inventory-panel .lab-table > tbody > tr > td:nth-child(2),
  #materials .lab-inventory-panel .lab-table > tbody > tr > td:nth-child(3),
  #materials .lab-assessment-panel .lab-table > tbody > tr > td:nth-child(2),
  #materials .lab-assessment-panel .lab-table > tbody > tr > td:nth-child(3) {
    padding-top: 8px;
  }

  #materials .lab-inventory-panel .lab-table > tbody > tr > td:nth-child(4),
  #materials .lab-assessment-panel .lab-table > tbody > tr > td:nth-child(4),
  #materials .lab-assessment-panel .lab-table > tbody > tr > td:nth-child(5) {
    margin-top: 8px;
    padding-top: 7px;
  }

  #materials .lab-inventory-panel .lab-table > tbody > tr > td:nth-child(4)::before {
    display: inline-block;
    width: auto;
    margin: 0 8px 0 0;
    content: "日期";
  }

  #materials .lab-inventory-panel .lab-table > tbody > tr > td:nth-child(5),
  #materials .lab-inventory-panel .lab-table > tbody > tr > td:nth-child(6),
  #materials .lab-assessment-panel .lab-table > tbody > tr > td:nth-child(6),
  #materials .lab-assessment-panel .lab-table > tbody > tr > td:nth-child(7) {
    margin-top: 8px;
  }

  #materials .lab-inventory-panel .lab-table > tbody > tr > td:nth-child(7),
  #materials .lab-inventory-panel .lab-table > tbody > tr > td:nth-child(8),
  #materials .lab-assessment-panel .lab-table > tbody > tr > td:nth-child(8),
  #materials .lab-assessment-panel .lab-table > tbody > tr > td:nth-child(9) {
    margin-top: 8px;
    padding-top: 7px;
  }

  #materials .lab-inventory-panel .lab-table > tbody > tr > td:nth-child(7)::before,
  #materials .lab-inventory-panel .lab-table > tbody > tr > td:nth-child(8)::before,
  #materials .lab-assessment-panel .lab-table > tbody > tr > td:nth-child(8)::before,
  #materials .lab-assessment-panel .lab-table > tbody > tr > td:nth-child(9)::before {
    width: auto;
    margin: 0 8px 0 0;
  }

  #materials .lab-inventory-panel .lab-table > tbody > tr > td:nth-child(7)::before,
  #materials .lab-assessment-panel .lab-table > tbody > tr > td:nth-child(8)::before {
    content: "状态";
  }

  #materials .lab-inventory-panel .lab-table > tbody > tr > td:nth-child(8)::before,
  #materials .lab-assessment-panel .lab-table > tbody > tr > td:nth-child(9)::before {
    content: "操作";
  }

  #materials .lab-inventory-panel .lab-table > tbody > tr > td:nth-child(7),
  #materials .lab-inventory-panel .lab-table > tbody > tr > td:nth-child(8),
  #materials .lab-assessment-panel .lab-table > tbody > tr > td:nth-child(8),
  #materials .lab-assessment-panel .lab-table > tbody > tr > td:nth-child(9) {
    align-items: center;
  }

  #materials .lab-inventory-panel .lab-material-date-cell {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 8px;
  }

  #materials .lab-inventory-panel .lab-material-date-cell strong,
  #materials .lab-inventory-panel .lab-material-date-cell small {
    display: inline;
    margin-top: 0;
  }

  #materials .lab-inventory-panel .lab-material-date-cell strong {
    font-size: 11px;
  }

  #materials .lab-inventory-panel .lab-material-date-cell small {
    font-size: 9px;
  }

  #materials .lab-inventory-panel .lab-quantity-control {
    padding: 2px;
  }

  #materials .lab-inventory-panel .lab-quantity-button {
    width: 28px;
    height: 28px;
  }

  #materials .lab-inventory-panel .lab-table-actions,
  #materials .lab-assessment-panel .lab-table-actions {
    gap: 9px;
  }

  #materials .lab-inventory-panel .lab-table-actions button,
  #materials .lab-assessment-panel .lab-table-actions button {
    min-height: 28px;
  }
}

@media (max-width: 420px) {
  #materials .lab-inventory-panel .lab-table > tbody > tr,
  #materials .lab-assessment-panel .lab-table > tbody > tr {
    gap: 0 8px;
    padding: 8px 9px;
  }

  #materials .lab-inventory-panel .lab-material-thumb.table {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
  }
}

/* Mobile hierarchy pass: show decisions before the supporting inventory
   details, and reserve enough room for the fixed navigation bar. */
.lab-material-mobile-status {
  display: none;
}

.lab-empty-action {
  min-height: 32px;
  padding: 6px 11px;
  border: 1px solid rgba(173, 79, 47, .26);
  border-radius: 999px;
  color: var(--rust-dark, #8f4935);
  background: rgba(255, 253, 249, .82);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.lab-empty-action:hover,
.lab-empty-action:focus-visible {
  border-color: rgba(173, 79, 47, .5);
  background: #fffdf9;
  outline: none;
}

@media (max-width: 900px) {
  .content {
    padding-bottom: calc(132px + env(safe-area-inset-bottom));
  }

  #materials.view.active {
    display: flex;
    flex-direction: column;
    padding-bottom: calc(26px + env(safe-area-inset-bottom));
  }

  #materials.view.active > .page-header {
    order: 1;
    margin-bottom: 7px;
  }

  #materials.view.active > .page-header .lab-material-mobile-status {
    display: block !important;
    max-width: none;
    margin: 5px 0 0;
    color: var(--rust-dark, #8f4935);
    font-size: 11px;
    font-weight: 750;
    line-height: 1.4;
  }

  #materials.view.active > .lab-material-layout {
    display: contents;
  }

  #materials.view.active > .lab-material-layout > .lab-alert-panel {
    order: 3;
    margin: 0 0 12px;
  }

  #materials.view.active > .lab-summary-grid {
    order: 2;
    margin: 0 0 12px;
    gap: 8px;
  }

  #materials.view.active > .lab-material-layout > .lab-demand-panel {
    order: 4;
    margin: 0 0 12px;
  }

  #materials.view.active > .lab-inventory-panel {
    order: 5;
    margin: 0 0 12px;
  }

  #materials.view.active > .lab-assessment-panel {
    order: 6;
    margin: 0;
  }

  #materials.view.active .lab-panel {
    padding: 14px;
    border-radius: 18px;
  }

  #materials.view.active .lab-panel-title {
    gap: 9px;
    margin-bottom: 10px;
  }

  #materials.view.active .lab-panel-title h2 {
    font-size: 20px;
  }

  #materials.view.active .lab-panel-title > button {
    flex: 0 0 auto;
    padding: 4px 0;
    color: var(--rust-dark, #8f4935);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
  }

  #materials.view.active > .lab-summary-grid .lab-metric-card {
    min-height: 76px;
    padding: 10px 11px;
    border-radius: 15px;
  }

  #materials.view.active > .lab-summary-grid .lab-metric-card.good {
    color: #5e7863;
    background: rgba(255, 253, 249, .82);
  }

  #materials.view.active > .lab-summary-grid .lab-metric-card small {
    font-size: 10px;
  }

  #materials.view.active > .lab-summary-grid .lab-metric-card strong {
    margin: 5px 0 3px;
    font-size: 25px;
  }

  #materials.view.active > .lab-summary-grid .lab-metric-card p {
    overflow: hidden;
    font-size: 10px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #materials.view.active .lab-alert-list {
    gap: 6px;
  }

  #materials.view.active .lab-alert-item {
    min-height: 54px;
    padding: 9px 10px;
    gap: 8px;
  }

  #materials.view.active .lab-material-thumb.alert {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
    border-radius: 9px;
  }

  #materials.view.active .lab-alert-copy {
    min-width: 0;
    flex: 1 1 auto;
  }

  #materials.view.active .lab-alert-copy strong {
    margin-bottom: 2px;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #materials.view.active .lab-alert-copy p {
    display: -webkit-box;
    overflow: hidden;
    font-size: 10px;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  #materials.view.active .lab-alert-action {
    flex: 0 0 auto;
    min-height: 29px;
    padding: 5px 8px;
    border: 1px solid rgba(173, 79, 47, .22);
    border-radius: 8px;
    color: var(--rust-dark, #8f4935);
    background: rgba(255, 253, 249, .74);
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
  }

  #materials.view.active .lab-alert-action:hover,
  #materials.view.active .lab-alert-action:focus-visible {
    border-color: rgba(173, 79, 47, .46);
    background: #fffdf9;
    outline: none;
  }

  #materials.view.active .lab-demand-panel .lab-empty {
    min-height: 82px;
    margin: 0;
    padding: 13px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    text-align: center;
  }

  #materials.view.active .lab-inventory-panel .lab-panel-title,
  #materials.view.active .lab-assessment-panel .lab-panel-title {
    align-items: flex-start;
    flex-direction: column;
  }

  #materials.view.active .lab-inventory-tools,
  #materials.view.active .lab-assessment-actions {
    width: 100%;
  }

  #materials.view.active .lab-inventory-tools {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  #materials.view.active .lab-storage-filter {
    width: 100%;
    box-sizing: border-box;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  #materials.view.active .lab-storage-filter::-webkit-scrollbar {
    display: none;
  }

  #materials.view.active .lab-storage-filter-label {
    display: none;
  }

  #materials.view.active .lab-storage-filter button {
    flex: 1 0 auto;
    min-width: 54px;
  }

  #materials.view.active .lab-inventory-add {
    width: 100%;
    min-height: 44px;
  }

  #materials.view.active .lab-assessment-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  #materials.view.active .lab-assessment-horizon {
    width: 100%;
    justify-content: space-between;
  }

  #materials.view.active .lab-assessment-horizon select {
    flex: 1;
  }

  #materials.view.active .lab-assessment-actions .primary-button {
    width: 100%;
  }

  #materials.view.active .lab-assessment-panel.is-empty .lab-assessment-summary {
    display: none;
  }

  #materials.view.active .lab-assessment-empty {
    min-height: 132px;
    padding: 15px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: var(--muted, #81766a);
    text-align: center;
  }

  #materials.view.active .lab-assessment-empty strong {
    color: var(--ink, #46382d);
    font-size: 14px;
  }

  #materials.view.active .lab-assessment-empty span {
    max-width: 260px;
    font-size: 11px;
    line-height: 1.5;
  }
}

@media (max-width: 420px) {
  #materials.view.active .lab-panel {
    padding: 12px;
  }

  #materials.view.active > .lab-summary-grid .lab-metric-card {
    min-height: 70px;
    padding: 9px 10px;
  }

  #materials.view.active > .lab-summary-grid .lab-metric-card strong {
    font-size: 23px;
  }

  #materials.view.active .lab-alert-item {
    padding-inline: 9px;
  }

  #materials.view.active .lab-alert-action {
    padding-inline: 7px;
  }
}

/* Reminder refinement: disclosure replaces secondary fields on phones only.
   Eight desktop table columns and all stock/price persistence remain intact. */
@media (max-width: 900px) {
  #materials.view.active .lab-panel-title > button,
  #materials.view.active .lab-empty-action,
  #materials.view.active .lab-alert-action {
    min-height: 44px;
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 11px;
  }

  #materials.view.active .lab-panel-title > button:disabled {
    display: none;
  }

  #materials.view.active .lab-alert-copy p {
    -webkit-line-clamp: 3;
    font-size: 11px;
  }

  #materials.view.active .lab-demand-panel .lab-empty {
    justify-content: space-between;
    text-align: left;
  }

  #materials.view.active .lab-inventory-panel .lab-table > tbody > tr {
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    grid-template-areas:
      "material material"
      "quantity price"
      "countdown status"
      "actions actions";
    padding: 11px;
    gap: 8px 10px;
  }

  #materials.view.active .lab-inventory-panel .lab-table > tbody > tr > td:nth-child(3),
  #materials.view.active .lab-inventory-panel .lab-table > tbody > tr > td:nth-child(4),
  #materials.view.active .lab-inventory-panel .lab-material-subline > small {
    display: none;
  }

  #materials.view.active .lab-inventory-panel .lab-table > tbody > tr > td:nth-child(2),
  #materials.view.active .lab-inventory-panel .lab-table > tbody > tr > td:nth-child(5),
  #materials.view.active .lab-inventory-panel .lab-table > tbody > tr > td:nth-child(6),
  #materials.view.active .lab-inventory-panel .lab-table > tbody > tr > td:nth-child(7),
  #materials.view.active .lab-inventory-panel .lab-table > tbody > tr > td:nth-child(8) {
    margin: 0;
    padding: 0;
    border: 0;
  }

  #materials.view.active .lab-inventory-panel .lab-table > tbody > tr > td:nth-child(5)::before {
    content: "有效期";
  }

  #materials.view.active .lab-inventory-panel .lab-table > tbody > tr > td:nth-child(7) {
    align-content: end;
    align-items: center;
  }

  #materials.view.active .lab-inventory-panel .lab-table > tbody > tr > td:nth-child(7)::before,
  #materials.view.active .lab-inventory-panel .lab-table > tbody > tr > td:nth-child(8)::before {
    display: none;
  }

  #materials.view.active .lab-inventory-panel .lab-table > tbody > tr > td:nth-child(8) {
    position: relative;
    display: block;
    min-height: 44px;
    border-top: 1px solid rgba(173, 153, 132, .12);
  }

  #materials.view.active .lab-inventory-panel .lab-quantity-button {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
  }

  #materials.view.active .lab-inventory-panel .lab-quantity-input {
    width: 0;
    min-height: 44px;
    font-size: 16px;
  }

  #materials.view.active .lab-inventory-panel .lab-quantity-control {
    gap: 1px;
    padding: 1px;
  }

  #materials.view.active .lab-inventory-panel .lab-table-actions {
    position: absolute;
    top: 0;
    right: 0;
    gap: 4px;
  }

  #materials.view.active .lab-inventory-panel .lab-table-actions button {
    min-width: 44px;
    min-height: 44px;
    font-size: 11px;
  }

  #materials.view.active .lab-material-mobile-details {
    display: block;
  }

  #materials.view.active .lab-material-mobile-details > summary {
    display: flex;
    align-items: center;
    width: fit-content;
    min-height: 44px;
    padding: 0 10px;
    color: var(--rust-dark, #8f4935);
    font-size: 11px;
    font-weight: 750;
    cursor: pointer;
    list-style: none;
  }

  #materials.view.active .lab-material-mobile-details > summary::-webkit-details-marker {
    display: none;
  }

  #materials.view.active .lab-material-mobile-details > summary::after {
    content: "⌄";
    margin-left: 7px;
  }

  #materials.view.active .lab-material-mobile-details[open] > summary::after {
    content: "⌃";
  }

  #materials.view.active .lab-material-mobile-details .lab-details-collapse,
  #materials.view.active .lab-material-mobile-details[open] .lab-details-expand,
  #materials.view.active .lab-inventory-panel .lab-expiry-pending {
    display: none;
  }

  #materials.view.active .lab-material-mobile-details[open] .lab-details-collapse {
    display: inline;
  }

  #materials.view.active .lab-material-mobile-details dl {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 10px;
    border-radius: 10px;
    background: rgba(246, 240, 232, .65);
    font-size: 11px;
    line-height: 1.5;
  }

  #materials.view.active .lab-material-mobile-details dl > div {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 8px;
  }

  #materials.view.active .lab-material-mobile-details dt {
    color: var(--muted, #81766a);
  }

  #materials.view.active .lab-material-mobile-details dd {
    margin: 0;
    overflow-wrap: anywhere;
  }

  #materials.view.active .lab-inventory-panel .lab-safety-inactive:not(:only-child) {
    display: none;
  }

  #materials.view.active .lab-assessment-panel.is-empty .lab-assessment-actions,
  #materials.view.active .lab-assessment-panel.is-empty .lab-assessment-note,
  #materials.view.active .lab-assessment-panel.is-empty .lab-panel-title p {
    display: none;
  }

  #materials.view.active .lab-assessment-panel.is-empty .lab-assessment-empty {
    min-height: 0;
    padding: 12px 8px;
  }

  #materials.view.active .lab-assessment-panel.is-empty .lab-table > tbody > tr {
    display: block;
  }

  #materials.view.active .lab-assessment-panel.is-empty td::before {
    display: none;
  }

  #labMaterialPriceReview .lab-form-actions > button,
  #labMaterialPriceReview .lab-modal-close {
    min-height: 44px;
    min-width: 44px;
  }

  #labMaterialPriceReview .lab-form-actions {
    flex-wrap: wrap;
  }
}

@media (max-width: 360px) {
  /* Keep four-digit stock readable without shrinking the 44px controls. */
  #materials.view.active .lab-inventory-panel .lab-table > tbody > tr {
    grid-template-areas:
      "material material"
      "quantity quantity"
      "countdown price"
      "status status"
      "actions actions";
  }

  #materials.view.active .lab-storage-filter button {
    min-width: 44px;
    padding-inline: 6px;
  }
}

/* Round 2: phone-only grouping; desktop keeps its individual reminder rows. */
@media (max-width: 900px) {
  #materials.view.active .lab-reminder-desktop { display: none; }
  #materials.view.active .lab-reminder-mobile {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 12px;
  }
  #materials.view.active .lab-reminder-mobile > p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
    overflow-wrap: anywhere;
  }
  #materials.view.active .lab-reminder-identity { display: flex; gap: 8px; align-items: center; min-width: 0; }
  #materials.view.active .lab-reminder-identity > div { min-width: 0; }
  #materials.view.active .lab-reminder-identity strong { display: block; color: var(--ink-soft); font-size: 14px; overflow-wrap: anywhere; }
  #materials.view.active .lab-reminder-identity small { display: block; color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
  #materials.view.active .lab-reminder-badges { display: flex; flex-wrap: wrap; gap: 5px; }
  #materials.view.active .lab-reminder-details summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--rust-dark); font-size: 12px; }
  #materials.view.active .lab-reminder-details ul { margin: 0; padding-left: 18px; font-size: 12px; color: var(--muted); line-height: 1.7; overflow-wrap: anywhere; }
  #materials.view.active .lab-reminder-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
  #materials.view.active .lab-reminder-price-tools { align-items: stretch; flex-direction: column; }
  #materials.view.active .lab-reminder-price-tools .lab-alert-action { align-self: flex-start; max-width: 100%; }
  #materials.view.active .lab-reminder-result { font-size: 11px; }
  #labMaterialReminderQueue .lab-modal-close,
  #labMaterialReminderQueue .lab-form-actions button,
  #labMaterialReminderQueueSelect { min-height: 44px; }
  #labMaterialReminderQueue .lab-form-actions { flex-wrap: wrap; }
  #labMaterialReminderQueueContext,
  #labMaterialReminderQueueProgress { overflow-wrap: anywhere; font-size: 12px; line-height: 1.6; }
}
/* V0.7 mobile production schedule: agenda first, calendar as a compact date picker. */

.v07-schedule-calendar-toggle {
  display: none;
}

.v07-mobile-calendar-count {
  display: none;
}

@media (max-width: 900px) {
  #schedule .page-header {
    margin-bottom: 12px;
  }

  #schedule .lab-calendar-shell {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* The selected day is the primary mobile surface. */
  #schedule .lab-agenda-panel {
    order: 1;
    padding: 14px;
    border-radius: 18px;
    background: color-mix(in srgb, var(--card, #fffdf9) 86%, transparent);
    box-shadow: 0 8px 22px rgba(74, 53, 38, .045);
  }

  #schedule .lab-calendar-main {
    order: 2;
    padding: 12px;
    border-radius: 18px;
    background: color-mix(in srgb, var(--card, #fffdf9) 76%, transparent);
    box-shadow: none;
  }

  #schedule .lab-calendar-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
  }

  #schedule .lab-calendar-title {
    grid-column: 1 / -1;
    min-width: 0;
    justify-content: space-between;
    gap: 8px;
  }

  #schedule .lab-calendar-title h2 {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    font-size: 19px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #schedule .lab-calendar-title .lab-icon-button {
    width: 36px;
    min-width: 36px;
    height: 36px;
    border-radius: 11px;
  }

  #schedule #labCalendarToday,
  #schedule .v07-schedule-calendar-toggle {
    min-height: 34px;
    padding: 7px 10px;
    border-radius: 10px;
    font-size: 11px;
    white-space: nowrap;
  }

  #schedule .v07-schedule-calendar-toggle {
    grid-column: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    color: var(--ink-soft);
    background: rgba(255, 255, 255, .72);
    cursor: pointer;
  }

  #schedule .v07-schedule-calendar-toggle:hover {
    border-color: rgba(173, 79, 47, .32);
    background: var(--pink-soft, #f8e6dc);
  }

  #schedule .lab-calendar-weekdays {
    margin: 12px 0 5px;
  }

  #schedule .lab-calendar-weekdays span {
    padding: 2px 3px;
    color: var(--muted);
    font-size: 10px;
  }

  #schedule .lab-calendar-grid {
    gap: 5px;
    row-gap: 6px;
  }

  #schedule .lab-calendar-day {
    position: relative;
    min-height: 68px;
    padding: 7px 2px 6px;
    border-radius: 11px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #schedule .lab-day-number {
    width: 100%;
    margin-bottom: 0;
    align-items: center;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1px;
    font-size: 13px;
    line-height: 1.2;
  }

  #schedule .lab-day-meta {
    min-height: 10px;
    justify-content: center;
  }

  #schedule .lab-lunar-day {
    max-width: 100%;
    overflow: hidden;
    font-size: 8px;
    text-overflow: ellipsis;
  }

  #schedule .lab-day-number i {
    display: none;
  }

  /* The agenda provides the labels; the month grid only marks busy dates. */
  #schedule .lab-calendar-event,
  #schedule .lab-calendar-event.is-single-event {
    display: block;
    width: 22px;
    min-width: 22px;
    height: 7px;
    min-height: 7px;
    margin: 5px 0 0;
    padding: 0;
    flex: 0 0 7px;
    border: 0;
    border-radius: 999px;
    font-size: 0;
    line-height: 0;
  }

  #schedule .lab-calendar-event:nth-of-type(n+4) {
    display: none;
  }

  #schedule .lab-calendar-day.has-events {
    border-color: color-mix(in srgb, var(--rust, #b85d3e) 28%, var(--line, #e2d9ce));
    background: color-mix(in srgb, var(--pink-soft, #f8e6dc) 32%, var(--card, #fffdf9));
  }

  #schedule .lab-calendar-day[data-v07-day-tone="running"] {
    border-color: rgba(184, 93, 62, .55);
  }

  #schedule .lab-calendar-day[data-v07-day-tone="complete"] {
    border-color: rgba(92, 107, 88, .46);
  }

  #schedule .lab-calendar-day[data-v07-day-tone="reminder"] {
    border-color: rgba(78, 104, 113, .42);
  }

  #schedule .v07-mobile-calendar-count {
    position: absolute;
    right: 5px;
    bottom: 5px;
    display: inline-grid;
    min-width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    border-radius: 999px;
    color: #8f4229;
    background: #f3d8ca;
    font-size: 8px;
    font-weight: 800;
    line-height: 1;
  }

  #schedule .lab-calendar-day[data-v07-day-tone="running"] .v07-mobile-calendar-count {
    color: #8f4229;
    background: #f3d2c4;
  }

  #schedule .lab-calendar-day[data-v07-day-tone="complete"] .v07-mobile-calendar-count {
    color: #4e6b4f;
    background: #dfe8dc;
  }

  #schedule .lab-calendar-day[data-v07-day-tone="reminder"] .v07-mobile-calendar-count {
    color: #4e6871;
    background: #dfeaec;
  }

  #schedule .lab-calendar-day.is-selected .v07-mobile-calendar-count {
    color: var(--rust-dark, #8f4229);
    background: rgba(255, 255, 255, .78);
  }

  #schedule .lab-calendar-main.is-collapsed {
    padding-bottom: 12px;
  }

  #schedule .lab-calendar-main.is-collapsed .lab-calendar-weekdays,
  #schedule .lab-calendar-main.is-collapsed .lab-calendar-grid {
    display: none;
  }

  #schedule .lab-agenda-head {
    align-items: center;
    gap: 10px;
  }

  #schedule .lab-agenda-head h3 {
    font-size: 20px;
  }

  #schedule .lab-agenda-lunar {
    margin-top: 2px;
  }

  #schedule .lab-small-button {
    min-height: 36px;
    padding: 8px 11px;
    border-radius: 10px;
    white-space: nowrap;
  }

  #schedule .lab-agenda-list {
    gap: 7px;
  }

  #schedule .lab-agenda-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    margin-top: 7px;
    padding: 11px;
    border-radius: 13px;
  }

  #schedule .lab-agenda-item > div:first-child {
    min-width: 0;
  }

  #schedule .lab-agenda-item strong {
    overflow: hidden;
    margin-bottom: 3px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #schedule .lab-agenda-item > div:last-child {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    flex-wrap: wrap;
  }

  #schedule .lab-agenda-item button {
    min-height: 30px;
    padding: 5px 7px;
    border-radius: 8px;
    font-size: 11px;
  }

  #schedule .lab-demand-preview {
    margin-top: 14px;
    padding-top: 13px;
  }

  #schedule .lab-demand-preview .lab-panel-title {
    align-items: center;
    gap: 8px;
  }

  #schedule .lab-demand-preview .lab-panel-title strong {
    font-size: 12px;
  }

  #schedule .lab-rhythm-section {
    margin-top: 14px;
    padding: 14px;
    border-radius: 18px;
  }

  #schedule .lab-rhythm-head h2,
  #schedule .lab-task-board-head h2 {
    font-size: 21px;
  }

  #schedule .lab-rhythm-head p,
  #schedule .lab-task-board-head p {
    display: none;
  }

  #schedule .lab-rhythm-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
  }

  #schedule .lab-rhythm-meta > span:first-of-type {
    display: none;
  }

  #schedule .lab-rhythm-view-controls,
  #schedule .lab-rhythm-legend {
    grid-column: 1 / -1;
  }

  #schedule .lab-rhythm-view-controls {
    width: 100%;
    margin-left: 0;
  }

  #schedule .lab-rhythm-legend {
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
    white-space: nowrap;
  }

  #schedule .lab-task-board-section {
    margin-top: 14px;
    padding-top: 14px;
  }

  #schedule .lab-task-board-head {
    margin-bottom: 12px;
  }

  #schedule .lab-task-board-actions {
    gap: 7px;
  }
}

@media (max-width: 520px) {
  #schedule .lab-calendar-main {
    padding: 10px;
  }

  #schedule .lab-calendar-day {
    min-height: 62px;
    padding-top: 6px;
  }

  #schedule .v07-mobile-calendar-count {
    right: 4px;
    bottom: 4px;
  }

  #schedule .lab-calendar-event,
  #schedule .lab-calendar-event.is-single-event {
    width: 18px;
    min-width: 18px;
  }

  #schedule .lab-lunar-day {
    display: none;
  }

  #schedule .lab-agenda-panel {
    padding: 12px;
  }

  #schedule .lab-agenda-item {
    grid-template-columns: minmax(0, 1fr);
  }

  #schedule .lab-agenda-item > div:last-child {
    justify-content: flex-start;
  }
}
/* V0.7 mobile production task board: one-dimensional, touch-friendly task flow. */

.v07-mobile-task-board {
  display: none;
}

@media (max-width: 900px) {
  /* Keep the desktop swimlanes and native drag/drop intact outside the mobile view. */
  #schedule .lab-task-board {
    display: none !important;
  }

  #schedule .v07-mobile-task-board {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
    margin-top: 2px;
  }

  #schedule .lab-task-board-section,
  #schedule .v07-mobile-task-board,
  #schedule .v07-mobile-board-list,
  #schedule .v07-mobile-board-card {
    min-width: 0;
    box-sizing: border-box;
  }

  #schedule .lab-task-board-head {
    align-items: center;
    flex-direction: row;
    gap: 10px;
    margin-bottom: 12px;
  }

  #schedule .lab-task-board-head > div:first-child {
    min-width: 0;
    flex: 1 1 auto;
  }

  #schedule .lab-task-board-head h2 {
    margin: 0;
    font-size: 21px;
    line-height: 1.2;
  }

  #schedule .lab-task-board-head p {
    display: none;
  }

  #schedule .lab-task-board-actions {
    width: auto;
    flex: 0 0 auto;
  }

  #schedule .lab-task-board-actions button {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 8px 11px;
    border-radius: 11px;
    font-size: 12px;
    white-space: nowrap;
  }

  /* Column creation and rename live in the compact mobile board manager. */
  #schedule .lab-task-board-actions [data-lab-new-board-column] {
    display: none;
  }

  .v07-mobile-board-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 9px;
    padding: 10px 12px;
    border: 1px solid rgba(173, 79, 47, .15);
    border-radius: 14px;
    background: rgba(255, 253, 249, .66);
  }

  .v07-mobile-board-summary {
    min-width: 0;
  }

  .v07-mobile-board-summary strong,
  .v07-mobile-board-summary small {
    display: block;
  }

  .v07-mobile-board-summary strong {
    overflow: hidden;
    color: var(--ink, #362d28);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .v07-mobile-board-summary small {
    margin-top: 2px;
    color: var(--muted, #8c7a6a);
    font-size: 10px;
  }

  .v07-mobile-board-manager-toggle,
  .v07-mobile-board-manager-panel button,
  .v07-mobile-board-empty button {
    min-height: 34px;
    border: 1px solid rgba(92, 73, 60, .16);
    border-radius: 10px;
    color: var(--ink-soft, #6e5c4e);
    background: rgba(255, 255, 255, .7);
    font: inherit;
    font-size: 11px;
    cursor: pointer;
  }

  .v07-mobile-board-manager-toggle {
    flex: 0 0 auto;
    padding: 7px 9px;
    white-space: nowrap;
  }

  .v07-mobile-board-manager-toggle:hover,
  .v07-mobile-board-manager-panel button:hover,
  .v07-mobile-board-empty button:hover {
    border-color: rgba(173, 79, 47, .34);
    color: var(--rust-dark, #9e4e2e);
    background: #fff8f2;
  }

  .v07-mobile-board-manager-panel {
    margin: -2px 0 10px;
    padding: 10px;
    border: 1px solid rgba(92, 73, 60, .12);
    border-radius: 13px;
    background: rgba(247, 242, 234, .8);
  }

  .v07-mobile-board-manager-panel[hidden] {
    display: none !important;
  }

  .v07-mobile-board-manager-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 7px;
    color: var(--muted, #8c7a6a);
    font-size: 10px;
  }

  .v07-mobile-board-manager-list {
    display: grid;
    gap: 6px;
  }

  .v07-mobile-board-manager-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    padding: 7px 8px;
    border-radius: 9px;
    background: rgba(255, 253, 249, .72);
  }

  .v07-mobile-board-manager-row > span:first-child {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
    color: var(--ink-soft, #6e5c4e);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .v07-mobile-board-manager-row > span:first-child::before {
    display: block;
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: var(--board-accent, #b86a42);
    content: "";
  }

  .v07-mobile-board-manager-panel button {
    min-height: 30px;
    padding: 5px 8px;
    font-size: 10px;
  }

  .v07-mobile-board-filterbar {
    display: flex;
    gap: 6px;
    max-width: 100%;
    margin-bottom: 10px;
    padding: 1px 1px 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .v07-mobile-board-filterbar::-webkit-scrollbar {
    display: none;
  }

  .v07-mobile-board-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid rgba(92, 73, 60, .13);
    border-radius: 999px;
    color: var(--ink-soft, #6e5c4e);
    background: rgba(255, 253, 249, .68);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
  }

  .v07-mobile-board-filter .v07-mobile-board-filter-count {
    display: inline-grid;
    min-width: 18px;
    height: 18px;
    place-items: center;
    padding: 0 4px;
    border-radius: 999px;
    color: #795c46;
    background: #eee2d4;
    font-size: 9px;
  }

  .v07-mobile-board-filter.is-active {
    border-color: var(--rust, #b85d3e);
    color: #fffaf4;
    background: var(--rust, #b85d3e);
    box-shadow: 0 4px 10px rgba(173, 79, 47, .15);
  }

  .v07-mobile-board-filter.is-active .v07-mobile-board-filter-count {
    color: var(--rust-dark, #9e4e2e);
    background: rgba(255, 255, 255, .84);
  }

  .v07-mobile-board-list {
    display: grid;
    gap: 8px;
    min-width: 0;
  }

  .v07-mobile-board-card {
    min-width: 0;
    padding: 12px;
    border: 1px solid #e0d3c4;
    border-top: 3px solid var(--board-accent, #b86a42);
    border-radius: 14px;
    background: #fffdf9;
    box-shadow: 0 5px 14px rgba(88, 63, 45, .045);
  }

  .v07-mobile-board-card-top,
  .v07-mobile-board-card-meta,
  .v07-mobile-board-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
  }

  .v07-mobile-board-card-top {
    justify-content: flex-start;
  }

  .v07-mobile-board-card-status {
    max-width: 46%;
    overflow: hidden;
    color: var(--muted, #8c7a6a);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .v07-mobile-board-card-title {
    display: block;
    margin: 8px 0 5px;
    color: var(--ink, #362d28);
    font-size: 15px;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  .v07-mobile-board-card-note {
    display: -webkit-box;
    overflow: hidden;
    margin: 0 0 9px;
    color: var(--muted, #8c7a6a);
    font-size: 11px;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .v07-mobile-board-card-meta {
    justify-content: flex-start;
    padding-top: 8px;
    border-top: 1px solid rgba(92, 73, 60, .1);
    color: #7d6b5d;
    font-size: 10px;
  }

  .v07-mobile-board-card-meta span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .v07-mobile-board-card-actions {
    justify-content: flex-start;
    margin-top: 10px;
  }

  .v07-mobile-board-card-edit {
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid rgba(92, 73, 60, .14);
    border-radius: 9px;
    color: #795c46;
    background: #f1e7dc;
    font: inherit;
    font-size: 11px;
    cursor: pointer;
  }

  .v07-mobile-board-move {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    color: var(--muted, #8c7a6a);
    font-size: 10px;
  }

  .v07-mobile-board-move select {
    min-width: 0;
    min-height: 34px;
    max-width: 145px;
    padding: 6px 24px 6px 8px;
    border: 1px solid rgba(92, 73, 60, .14);
    border-radius: 9px;
    color: var(--ink-soft, #6e5c4e);
    background: #fffdf9;
    font: inherit;
    font-size: 10px;
  }

  .v07-mobile-board-empty {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 22px 14px;
    border: 1px dashed #d7c8b7;
    border-radius: 13px;
    color: #9a897a;
    font-size: 12px;
    text-align: center;
  }

  .v07-mobile-board-empty button {
    padding: 6px 9px;
  }
}

@media (max-width: 420px) {
  #schedule .lab-task-board-head h2 {
    font-size: 20px;
  }

  #schedule .lab-task-board-actions button {
    padding-right: 9px;
    padding-left: 9px;
  }

  .v07-mobile-board-card-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .v07-mobile-board-move select {
    max-width: 190px;
  }
}
/* V0.7.6: make near-duplicate ingredient names reviewable before weighing. */
.calc-prep-similarity-review {
  display: grid;
  gap: 11px;
  padding: 15px 16px 14px 19px;
  border: 1px solid rgba(180, 122, 55, .36);
  border-left: 4px solid #c48748;
  border-radius: 0 15px 15px 0;
  box-shadow: 0 7px 17px rgba(86, 55, 36, .045);
  background: linear-gradient(105deg, rgba(255, 247, 230, .97), rgba(255, 253, 247, .86));
}

.calc-prep-similarity-review[hidden] {
  display: none !important;
}

.calc-prep-similarity-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 15px;
}

.calc-prep-similarity-kicker {
  display: block;
  margin-bottom: 4px;
  color: #a66b2e;
  font-family: Georgia, serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
}

.calc-prep-similarity-head strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
}

.calc-prep-similarity-head p,
.calc-prep-similarity-note {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
}

.calc-prep-similarity-count {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid rgba(180, 122, 55, .25);
  border-radius: 999px;
  color: #965c25;
  background: rgba(255, 255, 255, .62);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.calc-prep-similarity-list {
  display: grid;
  gap: 7px;
}

.calc-prep-similarity-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
  padding: 10px 11px;
  border: 1px solid rgba(180, 122, 55, .19);
  border-radius: 11px;
  background: rgba(255, 255, 255, .66);
}

.calc-prep-similarity-item-copy {
  min-width: 0;
}

.calc-prep-similarity-item-names {
  color: var(--ink);
  font-size: 11px;
  line-height: 1.45;
}

.calc-prep-similarity-item-names strong {
  font-size: 12px;
}

.calc-prep-similarity-item-copy small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
}

.calc-prep-similarity-item-copy small strong {
  color: #965c25;
  font-size: inherit;
}

.calc-prep-similarity-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
}

.calc-prep-similarity-actions button {
  min-height: 32px;
  padding: 6px 9px;
  border: 1px solid rgba(173, 79, 47, .24);
  border-radius: 8px;
  color: var(--rust-dark);
  background: rgba(255, 255, 255, .74);
  font: inherit;
  font-size: 10px;
  cursor: pointer;
  white-space: nowrap;
}

.calc-prep-similarity-actions button:first-child {
  border-color: rgba(173, 79, 47, .4);
  background: rgba(173, 79, 47, .1);
  font-weight: 700;
}

.calc-prep-similarity-actions button:hover,
.calc-prep-similarity-actions button:focus-visible {
  border-color: var(--rust);
  color: var(--rust-dark);
  background: rgba(173, 79, 47, .14);
  outline: 0;
}

.calc-prep-similarity-note {
  margin-top: -1px;
  padding-top: 8px;
  border-top: 1px solid rgba(180, 122, 55, .17);
}

@media (max-width: 700px) {
  .calc-prep-similarity-review {
    padding: 13px 12px 12px 15px;
  }

  .calc-prep-similarity-head {
    display: grid;
    gap: 7px;
  }

  .calc-prep-similarity-count {
    justify-self: start;
  }

  .calc-prep-similarity-item {
    align-items: stretch;
    flex-direction: column;
    gap: 9px;
  }

  .calc-prep-similarity-actions {
    width: 100%;
  }

  .calc-prep-similarity-actions button {
    flex: 1;
    min-height: 38px;
  }
}
.material-contribute-button{display:block;margin-bottom:9px;border:1px solid #d8b6a5;border-radius:8px;padding:8px 10px;background:transparent;color:#a34f32;font:inherit;font-size:12px;cursor:pointer;white-space:nowrap}
.mc-section-heading{margin:0 0 15px;padding:13px 15px;border-radius:12px;background:#b8794610;border:1px solid #ead7c8}.mc-section-heading p{margin:5px 0 0;color:#7f7268;font-size:12px}.mc-form label em{font-style:normal;font-size:11px;color:#a95c3e;font-weight:500}.mc-optional{margin:18px 0;border:1px solid #e5dace;border-radius:12px;background:#fffaf5}.mc-optional summary{cursor:pointer;list-style:none;padding:13px 15px;font-size:13px;font-weight:650;color:#734c39}.mc-optional summary::-webkit-details-marker{display:none}.mc-optional summary::before{content:'＋';display:inline-block;margin-right:7px;color:#b76544;font-weight:800}.mc-optional[open] summary::before{content:'−'}.mc-optional summary span{margin-left:8px;font-size:11px;font-weight:400;color:#97887b}.mc-optional-body{padding:0 15px 4px;border-top:1px solid #eee2d8}.mc-core-section{margin-bottom:18px}
.mc-dialog{box-sizing:border-box;width:min(780px,calc(100vw - 32px));max-height:90dvh;padding:0;border:1px solid #ded4c6;border-radius:22px;background:var(--card,#fffdf8);color:var(--text,#39362f);box-shadow:0 24px 100px #30221935;overflow:auto}
.mc-dialog::backdrop{background:#342c245c;backdrop-filter:blur(3px)}
.mc-dialog header{display:flex;align-items:start;justify-content:space-between;gap:20px;padding:26px 28px 20px;border-bottom:1px solid #e7dfd4;background:var(--card,#fffdf8)}
.mc-dialog h2{font-size:26px;margin:7px 0 10px}.mc-dialog h3{font-size:18px;margin:8px 0}.mc-dialog p{line-height:1.7;margin:8px 0;overflow-wrap:anywhere}.mc-dialog header p{font-size:13px;color:#82766b}.mc-eyebrow{font-size:11px;letter-spacing:.1em;color:#b76544;font-weight:700}.mc-dialog button{font:inherit;font-size:13px;cursor:pointer;border:1px solid #d9cbbd;border-radius:9px;padding:9px 14px;background:transparent;color:inherit}.mc-dialog button:disabled{opacity:.5;cursor:wait}.mc-dialog header>button{font-size:24px;padding:0 10px;border:0}.mc-body{padding:24px 28px}.mc-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}.mc-fields[hidden]{display:none}.mc-form label>span{display:block;font-size:13px;font-weight:600;margin-bottom:8px}.mc-form input:not([type=checkbox]):not([type=file]),.mc-form textarea{box-sizing:border-box;width:100%;border:1px solid #ded3c8;border-radius:9px;padding:10px 12px;background:var(--surface,#fff);color:inherit;font:inherit;font-size:14px}.mc-form textarea{min-height:76px;resize:vertical}.mc-form input:focus,.mc-form textarea:focus{outline:2px solid #bb714d55;outline-offset:1px}.mc-check{display:flex;align-items:start;gap:9px;font-size:13px;line-height:1.8;margin:18px 0}.mc-check input{margin-top:5px;accent-color:#ba6848;flex-shrink:0}.mc-note{font-size:12px;color:#867a6e;background:#b9946010;padding:12px 16px;border-radius:10px}.mc-preview{padding:18px 20px;border:1px solid #e6ccbb;border-radius:12px;background:#bd7d4010}.mc-preview p{font-size:13px;white-space:pre-wrap}.mc-image-section{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:0 0 20px}.mc-image-section img{width:76px;height:76px;object-fit:contain;background:white;border:1px solid #e5d9cb;border-radius:10px}.mc-image-section span{font-size:12px;color:#8a7d6f}.mc-upload{font-size:13px;max-width:240px}.mc-upload input{display:block;font-size:11px;margin-top:7px;max-width:100%}.mc-error{font-size:13px;color:#b64035}.mc-dialog footer{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}.mc-dialog .mc-primary{background:#b76544;color:white;border-color:#b76544}.mc-summary{display:flex;align-items:center;gap:16px;margin-bottom:18px;font-size:13px}.mc-summary button{margin-left:auto}.mc-item{padding:20px;border:1px solid #e5dace;border-radius:14px;margin-bottom:14px}.mc-item-head{display:flex;justify-content:space-between;align-items:center;gap:15px}.mc-item p{font-size:13px}.mc-item small{color:#918172;font-size:12px}.mc-status{flex-shrink:0;border-radius:30px;background:#ba864518;color:#9f6b36;padding:5px 10px;font-size:12px}.mc-status.is-published{background:#73946a20;color:#4f7548}.mc-review{padding:12px;border-radius:8px;background:#bb956212;white-space:pre-wrap}.mc-item-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.mc-empty{text-align:center;padding:36px 16px}.mc-empty p{font-size:14px;color:#8a7d6f}
@media(max-width:600px){.mc-dialog{width:calc(100vw - 16px);max-height:94dvh;border-radius:16px}.mc-dialog header{padding:20px}.mc-body{padding:18px}.mc-fields{grid-template-columns:1fr;gap:13px}.mc-dialog footer{position:sticky;bottom:-18px;padding:14px 0;background:var(--card,#fffdf8)}.mc-dialog h2{font-size:23px}.mc-item{padding:14px}.mc-item-head{align-items:start}.mc-status{font-size:11px}.mc-summary{gap:10px}.mc-image-section{gap:10px}}
.mc-public-credits{border:1px solid #e6d4c5;border-radius:12px;padding:16px;background:#b8794610}.mc-public-credits h3{font-size:13px;color:#a66645;margin:0 0 12px}.mc-public-credits>div+div{border-top:1px solid #e6d4c5;padding-top:12px;margin-top:12px}.mc-public-credits strong{font-size:14px}.mc-public-credits p{font-size:12px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--muted,#86786b)}
.mcr-badge{display:inline-grid;place-items:center;min-width:24px;margin-left:6px;border-radius:20px;background:#f1dfd4;color:#974d31;font-size:12px}.mcr-filter{display:flex;align-items:center;gap:12px;margin:18px 0}.mcr-filter select{padding:9px;border:1px solid #dfd7cd;border-radius:8px;background:var(--panel,#fff)}.mcr-layout{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:24px}.mcr-row{display:flex;flex-direction:column;gap:7px;text-align:left;width:100%;padding:16px;margin-bottom:9px;border:1px solid #e5dcd2;border-radius:12px;background:var(--panel,#fff);color:inherit;cursor:pointer}.mcr-row.is-active{border-color:#bc6947;background:#f9eee5}.mcr-row span,.mcr-row small{font-size:12px;color:#85796f}.mcr-empty{padding:28px 16px;color:#85796f}.mcr-section #mcr-detail{min-width:0;border:1px solid #e5dcd2;border-radius:14px;padding:22px;background:var(--panel,#fff)}.mcr-detail-head{display:flex;justify-content:space-between;gap:16px;align-items:center}.mcr-detail-head h3{margin:0}.mcr-source{padding:16px;background:rgba(166,138,100,.07);border-radius:10px;margin:18px 0}.mcr-source p,.mcr-section form>p{font-size:13px;line-height:1.7;color:#827568;white-space:pre-wrap}.mcr-image{display:block;max-width:160px;max-height:160px;object-fit:contain;border:1px solid #e5dcd2;border-radius:12px}.mcr-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}.mcr-section fieldset{border:0;padding:0;margin:0}.mcr-section form label{display:flex;flex-direction:column;gap:7px;font-size:13px;margin:12px 0;color:inherit}.mcr-section input,.mcr-section textarea,.mcr-section form select{width:100%;box-sizing:border-box;border:1px solid #ded6cb;border-radius:8px;padding:10px;background:var(--panel,#fff);color:inherit;font:inherit}.mcr-section input:focus,.mcr-section textarea:focus,.mcr-section select:focus{outline:2px solid #bf7755;outline-offset:2px}.mcr-section #mcr-matches{overflow:auto;max-height:250px}.mcr-section table{font-size:12px;width:100%;border-collapse:collapse;margin-top:12px}.mcr-section td,.mcr-section th{padding:10px;text-align:left;border-bottom:1px solid #e5dcd2}.mcr-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.mcr-section #mcr-feedback{min-height:24px;color:#9b5134}.mcr-section button:disabled{opacity:.55;cursor:wait}@media(max-width:800px){.mcr-layout{grid-template-columns:1fr}.mcr-section #mcr-list{max-height:280px;overflow:auto}.mcr-fields{grid-template-columns:1fr}.mcr-section #mcr-detail{padding:15px}}
/* V0.7 Figma mobile home exports: optimized external assets, loaded on demand. */
:root {
  --wb-figma-hero-image: url("./figma-home-hero.webp");
  --global-search-hero-image: url("./figma-global-search-hero.webp");
  --wb-figma-prep-icon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGQ9Ik0xMi44IDIuMjAwMDFINS4yQzQuMDk1NDMgMi4yMDAwMSAzLjIgMy4wOTU0NCAzLjIgNC4yMDAwMVYxMy44QzMuMiAxNC45MDQ2IDQuMDk1NDMgMTUuOCA1LjIgMTUuOEgxMi44QzEzLjkwNDYgMTUuOCAxNC44IDE0LjkwNDYgMTQuOCAxMy44VjQuMjAwMDFDMTQuOCAzLjA5NTQ0IDEzLjkwNDYgMi4yMDAwMSAxMi44IDIuMjAwMDFaIiBzdHJva2U9IiNCNjREMkUiIHN0cm9rZS13aWR0aD0iMS41Ii8+DQo8cGF0aCBkPSJNNiA2LjIwMDAxSDEySDZaTTYgOS4wMDAwMUgxMkg2Wk02IDExLjhIMTBINloiIGZpbGw9ImJsYWNrIi8+DQo8cGF0aCBkPSJNNiA2LjIwMDAxSDEyTTYgOS4wMDAwMUgxMk02IDExLjhIMTAiIHN0cm9rZT0iI0I2NEQyRSIgc3Ryb2tlLXdpZHRoPSIxLjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPg0KPC9zdmc+DQo=");
  --wb-figma-attention-icon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGQ9Ik0xMi41IDIuNUg1LjVDMy44NDMxNSAyLjUgMi41IDMuODQzMTUgMi41IDUuNVYxMi41QzIuNSAxNC4xNTY5IDMuODQzMTUgMTUuNSA1LjUgMTUuNUgxMi41QzE0LjE1NjkgMTUuNSAxNS41IDE0LjE1NjkgMTUuNSAxMi41VjUuNUMxNS41IDMuODQzMTUgMTQuMTU2OSAyLjUgMTIuNSAyLjVaIiBzdHJva2U9IiNCNjREMkUiIHN0cm9rZS13aWR0aD0iMS41Ii8+DQo8cGF0aCBkPSJNNS40IDkuMjAwMDJMNy42IDExLjRMMTIuNCA2LjQwMDAyIiBzdHJva2U9IiNCNjREMkUiIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4NCjwvc3ZnPg0K");
  --wb-figma-favorite-icon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGQ9Ik0zIDEzLjZDNS44IDEyLjggNy41IDEzLjggOSAxNC44QzEwLjUgMTMuOCAxMi4yIDEyLjggMyAxMy42VjMuMjAwMDFDNS44IDIuNDAwMDEgNy41IDMuNDAwMDEgOSA0LjQwMDAxTTkgNC40MDAwMVYxNC44TTkgNC40MDAwMUMxMC41IDMuNDAwMDEgMTIuMiAyLjQwMDAxIDE1IDMuMjAwMDFMMyAxMy42IiBzdHJva2U9IiNCNjREMkUiIHN0cm9rZS13aWR0aD0iMS40IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+DQo8L3N2Zz4NCg==");
  --wb-figma-upcoming-icon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGQ9Ik0xMy4zIDMuNzk5OTlINC43QzMuNDg0OTcgMy43OTk5OSAyLjUgNC43ODQ5NiAyLjUgNS45OTk5OVYxM0MyLjUgMTQuMjE1IDMuNDg0OTcgMTUuMiA0LjcgMTUuMkgxMy4zQzE0LjUxNSAxNS4yIDE1LjUgMTQuMjE1IDE1LjUgMTNWNS45OTk5OUMxNS41IDQuNzg0OTYgMTQuNTE1IDMuNzk5OTkgMTMuMyAzLjc5OTk5WiIgc3Ryb2tlPSIjQjY0RDJFIiBzdHJva2Utd2lkdGg9IjEuNCIvPg0KPHBhdGggZD0iTTUuMiAyLjVWNS41VjIuNVpNMTIuOCAyLjVWNS41VjIuNVpNMi44IDcuMkgxNS4ySDIuOFpNNS40IDEwSDcuNUg1LjRaTTEwLjUgMTBIMTIuNkgxMC41Wk01LjQgMTIuNUg3LjVINS40WiIgZmlsbD0iYmxhY2siLz4NCjxwYXRoIGQ9Ik01LjIgMi41VjUuNU0xMi44IDIuNVY1LjVNMi44IDcuMkgxNS4yTTUuNCAxMEg3LjVNMTAuNSAxMEgxMi42TTUuNCAxMi41SDcuNSIgc3Ryb2tlPSIjQjY0RDJFIiBzdHJva2Utd2lkdGg9IjEuMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+DQo8L3N2Zz4NCg==");
}

@media (max-width: 900px) {
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home .wb-heading {
    background-image:
      linear-gradient(90deg, rgba(255, 252, 247, .94) 0%, rgba(255, 249, 240, .84) 54%, rgba(255, 249, 240, .24) 100%),
      linear-gradient(180deg, rgba(255, 252, 247, .16), rgba(255, 248, 239, .52)),
      var(--wb-figma-hero-image);
    background-position: center right;
    background-size: cover;
  }
}
/* Public ICP filing notice: desktop keeps one shared site-level footer;
   mobile exposes the same link from “我的” to avoid competing with bottom nav. */
.v07-icp-footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px 14px;
  padding: 12px 24px 18px;
  color: rgba(91, 77, 64, .72);
  background: var(--paper, #f5f0e6);
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
}

.v07-icp-footer a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 3px;
}

.v07-icp-footer a:hover,
.v07-icp-footer a:focus-visible {
  color: var(--rust-dark, #74321f);
  text-decoration: underline;
}

@media (max-width: 600px) {
  .v07-icp-footer {
    gap: 2px 9px;
    padding: 10px 16px calc(14px + env(safe-area-inset-bottom));
    font-size: 10px;
  }
}

@media screen and (max-width: 900px) {
  /* Keep the filing link discoverable from “我的” without competing with
     the fixed mobile navigation on every workbench page. */
  .v07-icp-footer {
    display: none;
  }
}
/* V0.7 shared mobile header: brand / global search / account only. */

@media (max-width: 900px) {
  .topbar.v07-mobile-header {
    position: sticky;
    top: 0;
    z-index: 80;
    box-sizing: border-box;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    width: 100%;
    height: calc(60px + env(safe-area-inset-top));
    min-height: calc(60px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 14px 0;
    gap: 8px;
    background: color-mix(in srgb, var(--paper, #f7f1e7) 94%, transparent);
    border-bottom-color: color-mix(in srgb, var(--line, #e5d9ce) 82%, transparent);
    box-shadow: 0 4px 18px rgba(73, 49, 28, .045);
  }

  /* The sidebar remains the bottom navigation on mobile. */
  .topbar.v07-mobile-header .sidebar-toggle-button {
    display: none !important;
  }

  .topbar.v07-mobile-header .mobile-title {
    grid-column: 1;
    grid-row: 1;
    min-width: 34px !important;
    width: 34px !important;
    flex: 0 0 34px !important;
    height: 40px;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    overflow: visible;
    cursor: pointer;
  }

  .topbar.v07-mobile-header .mobile-title #activeViewLabel {
    display: none !important;
  }

  .topbar.v07-mobile-header .mobile-title::after {
    display: none !important;
    content: none !important;
  }

  .topbar.v07-mobile-header .mobile-brand {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 10px 10px 10px 4px;
    color: #fffaf0;
    background: var(--rust, #a84d32);
    box-shadow: none;
    font-size: 17px;
  }

  /* Keep one real search field in the center so the entry point is shared by
     every page and remains discoverable without an extra search button. */
  .topbar.v07-mobile-header .search-box {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    box-sizing: border-box;
    display: flex !important;
    width: min(520px, 100%) !important;
    min-width: 0;
    height: 40px;
    min-height: 40px;
    padding: 0 10px 0 12px;
    gap: 7px;
    border-radius: 13px;
    background: color-mix(in srgb, var(--card, #fffdf9) 92%, transparent);
    box-shadow: none;
  }

  .topbar.v07-mobile-header .search-box input {
    min-width: 0;
    font-size: 12px;
    border: 0 !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
    appearance: none;
  }

  /* The search field owns the focus state. Do not draw a second pink frame
     around the native input inside it. */
  .topbar.v07-mobile-header .search-box:focus-within {
    border-color: color-mix(in srgb, var(--rust, #a84d32) 38%, var(--line, #e5d9ce));
    box-shadow: none !important;
  }

  .topbar.v07-mobile-header .search-box input:focus,
  .topbar.v07-mobile-header .search-box input:focus-visible {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
  }

  .topbar.v07-mobile-header .search-shortcut {
    display: none !important;
  }

  .topbar.v07-mobile-header .global-search-top-clear {
    flex: 0 0 auto;
  }

  /* Theme, sidebar customization, date/density, and page-specific + are
     intentionally not global mobile-header controls. Their functions remain
     available from the mobile "我的" page or inside the active page. */
  .topbar.v07-mobile-header > .top-actions {
    grid-column: 3;
    grid-row: 1;
    box-sizing: border-box;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    width: 40px !important;
    min-width: 40px !important;
    gap: 0 !important;
  }

  .topbar.v07-mobile-header > .top-actions > .theme-settings-button,
  .topbar.v07-mobile-header > .top-actions > .sidebar-settings-button,
  .topbar.v07-mobile-header > .top-actions > .today,
  .topbar.v07-mobile-header > .top-actions > .density-toggle,
  .topbar.v07-mobile-header > .top-actions > .primary-button {
    display: none !important;
  }

  .topbar.v07-mobile-header > .top-actions > .v07-permission-dock {
    position: relative;
    inset: auto;
    z-index: 30;
    display: block !important;
    flex: 0 0 40px;
    width: 40px;
    min-width: 40px;
    height: 40px;
    max-width: none;
    padding: 0;
    overflow: visible;
    font-size: 0;
  }

  .topbar.v07-mobile-header .v07-account-trigger {
    box-sizing: border-box;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 5px;
    border-radius: 12px;
    justify-content: center;
    gap: 0;
  }

  .topbar.v07-mobile-header .v07-account-avatar {
    width: 28px;
    height: 28px;
    color: #8e4935;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
  }

  .topbar.v07-mobile-header #v07AccountName,
  .topbar.v07-mobile-header .v07-account-chevron {
    display: none !important;
  }

  .topbar.v07-mobile-header .v07-account-menu {
    top: calc(100% + 9px);
    right: 0;
    color: var(--ink, #46382d);
    font-size: 13px;
  }

  .topbar.v07-mobile-header .v07-account-menu strong,
  .topbar.v07-mobile-header .v07-account-menu span,
  .topbar.v07-mobile-header .v07-account-menu button {
    font-size: 13px;
  }

  /* Do not reserve space for the removed global +. Page actions should live
     in their own page header or content action row instead. */
  .topbar.v07-mobile-header ~ .content .filter-bar,
  .topbar.v07-mobile-header ~ .content .data-filter-bar {
    top: calc(60px + env(safe-area-inset-top) + 4px) !important;
  }
}

@media (max-width: 600px) {
  .topbar.v07-mobile-header {
    padding-right: 11px;
    padding-left: 11px;
    gap: 7px;
  }

  .topbar.v07-mobile-header .mobile-title {
    min-width: 32px !important;
    width: 32px !important;
    flex-basis: 32px !important;
  }

  .topbar.v07-mobile-header .mobile-brand {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }

  .topbar.v07-mobile-header .search-box {
    height: 38px;
    min-height: 38px;
    border-radius: 12px;
  }

  .topbar.v07-mobile-header .search-box input {
    font-size: 11px;
  }

  .topbar.v07-mobile-header > .top-actions > .v07-permission-dock,
  .topbar.v07-mobile-header .v07-account-trigger {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
  }

  .topbar.v07-mobile-header > .top-actions > .v07-permission-dock {
    flex-basis: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .topbar.v07-mobile-header .mobile-title:active {
    transform: none;
  }
}
@media (max-width: 900px) {
  #recipeFormModal.modal {
    align-items: flex-end;
    padding: 0;
  }

  #recipeFormModal .modal-card {
    width: 100%;
    max-height: calc(100dvh - env(safe-area-inset-top) - 8px);
    border-radius: 22px 22px 0 0;
    border-bottom: 0;
    overflow: auto;
    overscroll-behavior: contain;
  }

  #recipeFormModal .modal-head {
    min-height: 60px;
    padding: 10px 16px 10px 18px;
  }

  #recipeFormModal .modal-head strong {
    font-size: 18px;
  }

  #recipeFormModal .modal-body {
    padding: 14px 16px 20px;
  }

  #recipeFormModal .modal-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--card) 96%, transparent);
    backdrop-filter: blur(14px);
  }

  #recipeFormModal .modal-actions button {
    min-height: 44px;
    border-radius: 13px;
  }

  .v07-recipe-entry-shell {
    margin: 0 0 14px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--rust) 18%, var(--line));
    border-radius: 17px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--rust) 5%, var(--card)), var(--card) 68%);
  }

  .v07-recipe-entry-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    padding: 4px;
    border-radius: 13px;
    background: color-mix(in srgb, var(--paper-deep) 65%, var(--card));
  }

  .v07-recipe-entry-tab {
    min-width: 0;
    min-height: 43px;
    padding: 5px 3px;
    border: 0;
    border-radius: 10px;
    color: var(--muted);
    background: transparent;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.15;
  }

  .v07-recipe-entry-tab[aria-pressed="true"] {
    color: var(--rust-dark, var(--rust));
    background: var(--card);
    box-shadow: 0 2px 8px rgba(62, 44, 30, .09);
  }

  .v07-recipe-entry-tab[data-v07-coming-soon="true"] {
    border: 1px dashed color-mix(in srgb, var(--muted) 40%, var(--line));
    color: color-mix(in srgb, var(--muted) 76%, var(--paper));
    background: transparent;
    cursor: pointer;
  }

  .v07-recipe-entry-tab[data-v07-coming-soon="true"]:active {
    background: color-mix(in srgb, var(--paper-deep) 55%, transparent);
  }

  .v07-recipe-entry-tab small {
    display: block;
    margin-top: 2px;
    font-size: 8px;
    font-weight: 600;
  }

  .v07-recipe-entry-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
  }

  .v07-recipe-text-panel {
    margin-top: 12px;
  }

  .v07-recipe-parser-modes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 11px;
  }

  .v07-recipe-parser-mode {
    min-height: 37px;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--muted);
    background: var(--card);
    font: inherit;
    font-size: 11px;
    font-weight: 750;
  }

  .v07-recipe-parser-mode[aria-pressed="true"] {
    border-color: color-mix(in srgb, var(--rust) 48%, var(--line));
    color: var(--rust-dark, var(--rust));
    background: color-mix(in srgb, var(--rust) 7%, var(--card));
  }

  .v07-recipe-entry-label {
    display: block;
    margin: 0;
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
  }

  .v07-recipe-example {
    min-height: 30px;
    padding: 4px 9px;
    border: 1px solid color-mix(in srgb, var(--rust) 28%, var(--line));
    border-radius: 9px;
    color: var(--rust-dark, var(--rust));
    background: color-mix(in srgb, var(--rust) 5%, var(--card));
    font: inherit;
    font-size: 10px;
    font-weight: 750;
  }

  .v07-recipe-source-text {
    display: block;
    width: 100%;
    min-height: 150px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 13px;
    color: var(--ink);
    background: color-mix(in srgb, var(--card) 92%, var(--paper));
    font: inherit;
    font-size: 14px;
    line-height: 1.6;
    resize: vertical;
  }

  .v07-recipe-source-text:focus {
    border-color: var(--rust);
    outline: 3px solid color-mix(in srgb, var(--rust) 14%, transparent);
  }

  .v07-recipe-entry-hint {
    margin: 7px 1px 0;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.45;
  }

  .v07-recipe-manual-format-hint {
    margin: 10px 1px 0;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.5;
  }

  .v07-recipe-manual-format-hint[hidden] {
    display: none;
  }

  .v07-recipe-recognize {
    width: 100%;
    min-height: 45px;
    margin-top: 10px;
    border: 0;
    border-radius: 13px;
    color: #fffaf3;
    background: var(--rust);
    font: inherit;
    font-size: 13px;
    font-weight: 850;
  }

  .v07-recipe-recognize:active {
    transform: translateY(1px);
  }

  .v07-recipe-preview {
    display: grid;
    gap: 9px;
    margin-top: 12px;
    padding: 11px;
    border: 1px solid color-mix(in srgb, var(--line) 85%, var(--rust));
    border-radius: 14px;
    background: color-mix(in srgb, var(--paper) 45%, var(--card));
  }

  .v07-recipe-preview[hidden] {
    display: none;
  }

  .v07-recipe-preview-title {
    color: var(--ink);
    font-size: 13px;
    font-weight: 850;
  }

  .v07-recipe-preview-summary {
    margin: -4px 0 1px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.5;
  }

  .v07-recipe-preview .v07-recipe-entry-label {
    margin-top: 2px;
  }

  .v07-recipe-preview-textarea {
    width: 100%;
    min-height: 88px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 11px;
    color: var(--ink);
    background: var(--card);
    font: inherit;
    font-size: 12px;
    line-height: 1.55;
    resize: vertical;
  }

  .v07-recipe-preview-unrecognized {
    display: grid;
    gap: 7px;
    padding: 9px;
    border: 1px solid color-mix(in srgb, #d79b31 36%, var(--line));
    border-radius: 11px;
    background: color-mix(in srgb, #f0cf79 12%, var(--card));
  }

  .v07-recipe-preview-unrecognized[hidden] {
    display: none;
  }

  .v07-recipe-preview-unrecognized small {
    color: var(--muted);
    font-size: 10px;
    line-height: 1.45;
  }

  .v07-recipe-preview-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    margin-top: 2px;
  }

  .v07-recipe-preview-actions button {
    min-height: 42px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    background: var(--card);
    font: inherit;
    font-size: 11px;
    font-weight: 800;
  }

  .v07-recipe-preview-actions .v07-recipe-preview-apply {
    border-color: var(--rust);
    color: #fffaf3;
    background: var(--rust);
  }

  .v07-recipe-entry-status {
    margin: 9px 1px 0;
    padding: 8px 10px;
    border-radius: 11px;
    color: #73542e;
    background: color-mix(in srgb, #e4b84f 18%, var(--card));
    font-size: 11px;
    line-height: 1.5;
  }

  .v07-recipe-entry-status:empty {
    display: none;
  }

  .v07-recipe-entry-status[data-tone="error"] {
    color: #8b3327;
    background: color-mix(in srgb, #c85b43 12%, var(--card));
  }

  .v07-recipe-entry-status[data-tone="success"] {
    color: #355d45;
    background: color-mix(in srgb, #6c9b70 13%, var(--card));
  }

  #recipeForm.v07-recipe-text-entry .modal-body > .form-two,
  #recipeForm.v07-recipe-text-entry .modal-body > .form-one,
  #recipeForm.v07-recipe-text-entry .recipe-current-edit-only,
  #recipeForm.v07-recipe-text-entry .v07-recipe-advanced {
    display: none !important;
  }

  #recipeForm.v07-recipe-text-entry .modal-actions [type="submit"] {
    display: none;
  }

  #recipeForm .form-two {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  #recipeForm .form-one {
    margin-top: 12px;
  }

  #recipeForm .form-label {
    margin-bottom: 6px;
    font-size: 12px;
  }

  #recipeForm .form-help {
    margin-top: 5px;
    font-size: 10px;
    line-height: 1.45;
  }

  #recipeForm .wide-input,
  #recipeForm .wide-select {
    min-height: 48px;
    border-radius: 13px;
  }

  #recipeForm #newRecipeIngredients {
    min-height: 174px;
    line-height: 1.55;
  }

  #recipeForm .v07-recipe-empty-shell {
    display: none !important;
  }

  .v07-recipe-advanced {
    margin-top: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--paper) 45%, var(--card));
  }

  .v07-recipe-advanced > summary {
    min-height: 49px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--ink);
    font-size: 12px;
    font-weight: 850;
    list-style: none;
    cursor: pointer;
  }

  .v07-recipe-advanced > summary::-webkit-details-marker {
    display: none;
  }

  .v07-recipe-advanced > summary::after {
    content: "+";
    color: var(--rust);
    font-size: 18px;
    font-weight: 500;
  }

  .v07-recipe-advanced[open] > summary::after {
    content: "−";
  }

  .v07-recipe-advanced > summary small {
    flex: 1 1 auto;
    overflow: hidden;
    color: var(--muted);
    font-size: 9px;
    font-weight: 600;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .v07-recipe-advanced-content {
    padding: 0 12px 12px;
    border-top: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  }

  .v07-recipe-advanced-content > :first-child {
    margin-top: 11px;
  }
}

@media (min-width: 901px) {
  #recipeFormModal #recipeForm.v07-recipe-text-entry {
    width: min(980px, calc(100vw - 48px));
  }

  #recipeForm .v07-recipe-entry-shell {
    margin-bottom: 19px;
    padding: 15px 18px;
    border: 1px solid color-mix(in srgb, var(--rust) 16%, var(--line));
    border-radius: 16px;
    background: color-mix(in srgb, var(--rust) 3%, var(--card));
  }

  #recipeForm .v07-recipe-entry-tabs {
    display: flex;
    gap: 8px;
    align-items: center;
  }

  #recipeForm .v07-recipe-entry-tab {
    min-width: 130px;
    min-height: 39px;
    padding: 8px 15px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--muted);
    background: var(--card);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
  }

  #recipeForm .v07-recipe-entry-tab[aria-pressed="true"] {
    border-color: color-mix(in srgb, var(--rust) 55%, var(--line));
    color: var(--rust-dark, var(--rust));
    background: color-mix(in srgb, var(--rust) 8%, var(--card));
  }

  #recipeForm .v07-recipe-entry-tab:disabled {
    border-style: dashed;
    opacity: .58;
    cursor: not-allowed;
  }

  #recipeForm .v07-recipe-entry-tab small {
    display: block;
    font-size: 10px;
  }

  #recipeForm .v07-recipe-text-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    margin-top: 17px;
  }

  #recipeForm .v07-recipe-text-panel:has(.v07-recipe-preview:not([hidden])) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }

  #recipeForm .v07-recipe-text-panel[hidden],
  #recipeForm .v07-recipe-preview[hidden],
  #recipeForm .v07-recipe-preview-unrecognized[hidden],
  #recipeForm .v07-recipe-manual-format-hint[hidden] {
    display: none;
  }

  #recipeForm .v07-recipe-editor-column,
  #recipeForm .v07-recipe-preview {
    min-width: 0;
  }

  #recipeForm .v07-recipe-parser-modes {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
  }

  #recipeForm .v07-recipe-parser-mode,
  #recipeForm .v07-recipe-example,
  #recipeForm .v07-recipe-preview-actions button {
    min-height: 34px;
    padding: 7px 13px;
    border: 1px solid var(--line);
    border-radius: 9px;
    color: var(--muted);
    background: var(--card);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
  }

  #recipeForm .v07-recipe-parser-mode[aria-pressed="true"],
  #recipeForm .v07-recipe-example {
    border-color: color-mix(in srgb, var(--rust) 40%, var(--line));
    color: var(--rust-dark, var(--rust));
    background: color-mix(in srgb, var(--rust) 6%, var(--card));
  }

  #recipeForm .v07-recipe-entry-label-row,
  #recipeForm .v07-recipe-preview-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
  }

  #recipeForm .v07-recipe-entry-label {
    display: block;
    margin: 0 0 6px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 750;
  }

  #recipeForm .v07-recipe-entry-label-row .v07-recipe-entry-label { margin: 0; }

  #recipeForm .v07-recipe-source-text,
  #recipeForm .v07-recipe-preview-textarea {
    display: block;
    width: 100%;
    min-height: 90px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    background: var(--card);
    font: inherit;
    font-size: 13px;
    line-height: 1.6;
    resize: vertical;
  }

  #recipeForm .v07-recipe-source-text { min-height: 265px; }
  #recipeForm .v07-recipe-preview-textarea { margin-bottom: 10px; }

  #recipeForm .v07-recipe-entry-hint,
  #recipeForm .v07-recipe-preview-summary,
  #recipeForm .v07-recipe-preview-unrecognized small,
  #recipeForm .v07-recipe-manual-format-hint {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
  }

  #recipeForm .v07-recipe-recognize,
  #recipeForm .v07-recipe-preview-apply {
    min-height: 41px;
    padding: 8px 18px;
    border: 1px solid var(--rust);
    border-radius: 10px;
    color: #fffaf3;
    background: var(--rust);
    font: inherit;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
  }

  #recipeForm .v07-recipe-preview {
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--paper) 45%, var(--card));
  }

  #recipeForm .v07-recipe-preview-title { font-size: 15px; }
  #recipeForm .v07-recipe-preview-unrecognized { margin-bottom: 10px; }
  #recipeForm .v07-recipe-preview-actions { justify-content: flex-start; margin: 12px 0 0; }
  #recipeForm .v07-recipe-preview-actions .v07-recipe-preview-apply { color: #fffaf3; background: var(--rust); }

  #recipeForm .v07-recipe-entry-status:not(:empty) {
    margin: 12px 0 0;
    padding: 9px 12px;
    border-radius: 9px;
    color: var(--rust-dark, var(--rust));
    background: color-mix(in srgb, var(--rust) 9%, var(--card));
    font-size: 12px;
  }

  #recipeForm .v07-recipe-entry-status[data-tone="error"] { color: #8b3327; }
  #recipeForm.v07-recipe-text-entry .modal-body > .form-two,
  #recipeForm.v07-recipe-text-entry .modal-body > .form-one,
  #recipeForm.v07-recipe-text-entry .recipe-current-edit-only,
  #recipeForm.v07-recipe-text-entry .modal-actions [type="submit"] {
    display: none !important;
  }
}
/* The light daily workbench is a phone/tablet presentation only.
   All overrides stay inside the existing mobile viewport boundary; the hero
   reuses the independently cached WebP already supplied by the cloud build. */
@media (max-width: 900px) {
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .content {
    padding-inline: 0 !important;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .topbar.v07-mobile-header {
    height: calc(60px + env(safe-area-inset-top));
    min-height: calc(60px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 14px 0;
    border-bottom: 1px solid rgba(227, 212, 196, .45);
    background-color: #fbfaf7;
    background-image: none;
    box-shadow: none;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light {
    gap: 10px;
    padding-bottom: 18px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light .wb-heading {
    display: grid;
    gap: 10px;
    min-height: 0;
    margin: 0;
    padding: 12px 17px 14px;
    border: 0;
    border-radius: 0;
    background-color: #fbf8f2;
    background-image:
      linear-gradient(90deg, #fbf8f2 0%, rgba(251, 248, 242, .97) 52%, rgba(251, 248, 242, .46) 100%),
      var(--wb-figma-hero-image);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: auto, auto 112px;
    box-shadow: none;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light .wb-heading-copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title date" "subtitle subtitle";
    align-items: center;
    gap: 5px 8px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light .wb-heading-meta {
    grid-area: date;
    justify-self: end;
    min-height: 0;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light .wb-heading-meta > small {
    color: #986c53;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light .wb-heading h1 {
    grid-area: title;
    margin: 0;
    color: #38251a;
    font-size: 27px;
    line-height: 1.2;
    letter-spacing: -.025em;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light .wb-heading p {
    grid-area: subtitle;
    margin: 0;
    color: #806f60;
    font-size: 13px;
    line-height: 1.5;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light .wb-heading-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    max-width: none;
    margin: 0;
    overflow: visible;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light .wb-heading-actions > button {
    width: 100%;
    min-width: 0;
    height: 44px;
    min-height: 44px;
    gap: 6px;
    padding: 0 8px;
    border: 1px solid #e9ded2;
    border-radius: 12px;
    color: #675246;
    background: rgba(255, 253, 249, .94);
    box-shadow: none;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light .wb-heading-actions > button.primary-button {
    border-color: #bb5c3b;
    color: #fffdf9;
    background: #bb5c3b;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light .wb-heading-actions > button > span:nth-child(2) {
    font-size: 13px;
    font-weight: 600;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light .wb-action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    padding: 0;
    color: inherit;
    background: none;
    flex: 0 0 17px;
  }

  .v07-mobile-home-light .wb-action-icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light .wb-main {
    display: contents;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbPrepPanel {
    display: none;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbAttentionPanel,
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbRecentPanel {
    margin: 0 14px;
    padding: 14px 14px 8px;
    border: 1px solid #e9dfd4;
    border-radius: 16px;
    background: #fffefb;
    box-shadow: none;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbFavoritesPanel,
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbUpcomingPanel {
    margin: 0 14px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light .wb-section-head,
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbAttentionPanel .wb-section-head,
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbFavoritesPanel .wb-section-head,
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbUpcomingPanel:not(.wb-panel-compact) .wb-section-head {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    margin: 0 0 10px;
    padding: 0;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light .wb-section-head h2,
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbAttentionPanel .wb-section-head h2,
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbFavoritesPanel .wb-section-head h2 {
    margin: 0;
    color: #4a3427;
    font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
    font-size: 16px;
    font-weight: 650;
    line-height: 1.4;
    letter-spacing: 0;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light .wb-section-count {
    margin-left: 6px;
    padding: 3px 7px;
    border: 0;
    border-radius: 7px;
    color: #a65e3e;
    background: #f8eee6;
    font-size: 10px;
    font-weight: 500;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light .wb-section-head > button,
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbFavoritesPanel .wb-section-head > button {
    min-height: 44px;
    margin: -10px 0;
    padding: 0 2px;
    border: 0;
    color: #806f60;
    background: none;
    font-size: 12px;
    font-weight: 400;
    box-shadow: none;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbAttention .wb-attention-event {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 12px;
    grid-template-areas: "copy date arrow";
    align-items: center;
    flex-wrap: nowrap;
    column-gap: 10px;
    width: 100%;
    min-height: 67px;
    margin: 0;
    padding: 11px 0;
    border: 0;
    border-bottom: 1px solid #f0e7de;
    border-radius: 0;
    color: #4a3427;
    background: transparent;
    box-shadow: none;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light .wb-attention-event .wb-event-copy {
    grid-area: copy;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 7px;
    min-width: 0;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light .wb-attention-event .wb-event-copy strong {
    flex: 0 0 100%;
    min-width: 0;
    overflow: hidden;
    color: #49382d;
    font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
    font-size: 14px;
    font-weight: 550;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light .wb-attention-event .wb-event-copy small {
    order: 2;
    margin: 0;
    color: #806f60;
    font-size: 11px;
    line-height: 1.5;
  }

  .v07-mobile-home-light .wb-light-status {
    order: 1;
    padding: 1px 5px;
    border-radius: 4px;
    color: #5c6c47;
    background: #f0f3e9;
    font-size: 10px;
    line-height: 1.5;
  }

  .v07-mobile-home-light .wb-light-status.is-overdue {
    color: #a05235;
    background: #faeee5;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light .wb-attention-event .wb-event-date {
    grid-area: date;
    width: auto;
    min-width: 38px;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    text-align: right;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light .wb-attention-event .wb-event-date strong {
    color: #806f60;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light .wb-attention-event .wb-event-date small {
    display: none;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light .wb-attention-event .wb-event-arrow {
    grid-area: arrow;
    color: #b5a18e;
    font-size: 19px;
    text-align: right;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbAttention .wb-material-alert {
    grid-template-areas: "copy status arrow";
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light .wb-material-alert .wb-event-status {
    grid-area: status;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    font-size: 13px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbAttention .wb-attention-summary {
    margin: 10px 0 0;
    color: #806f60;
    font-size: 11px;
    line-height: 1.6;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbAttention .wb-empty-note {
    margin: 5px 0 0;
    color: #806f60;
    font-size: 11px;
    line-height: 1.6;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbAttention .wb-attention-actions {
    gap: 12px;
    margin: 2px 0 0;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbAttention .wb-attention-actions button {
    min-height: 44px;
    padding: 0 2px;
    border: 0;
    color: #8d6e56;
    background: none;
    font-size: 12px;
    box-shadow: none;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbRecent {
    display: block;
    margin: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbRecent .wb-recent-card {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "icon title actions"
      "icon meta actions";
    align-items: center;
    gap: 3px 10px;
    min-height: 62px;
    aspect-ratio: auto;
    margin: 0;
    padding: 8px 0 12px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbRecent .wb-recent-card ~ .wb-recent-card,
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light .wb-recent-kicker,
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light .wb-recent-indicator {
    display: none;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbRecent .wb-recent-card::before {
    position: static;
    grid-area: icon;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background-color: #f7f0e6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239e7859' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5c3-1 5-1 8 1v14c-3-2-5-2-8-1Zm16 0c-3-1-5-1-8 1v14c3-2 5-2 8-1Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
    content: "";
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbRecent .wb-recent-card > strong {
    display: block;
    align-self: end;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    color: #4a382b;
    font-size: 14px;
    font-weight: 550;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbRecent .wb-recent-card > small {
    align-self: start;
    margin: 0;
    padding: 0;
    color: #806f60;
    font-size: 11px;
    line-height: 1.5;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbRecent .wb-row-actions {
    gap: 0;
    margin: 0;
    padding: 0;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbRecent .wb-recent-primary {
    min-width: 44px;
    min-height: 44px;
    padding: 0 4px;
    border: 0;
    color: #94684d;
    background: transparent;
    box-shadow: none;
    font-size: 12px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbRecentPanel > #wbPrep {
    border-top: 1px solid #f0e7de;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light .wb-summary-row,
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbPrep .wb-summary-row,
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbAttentionPanel.wb-panel-compact .wb-summary-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 68px;
    margin: 0;
    padding: 8px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: left;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light .wb-summary-icon,
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbPrep .wb-summary-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background-color: #f7f0e6;
    background-size: 19px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light .wb-summary-copy strong {
    color: #4a382b;
    font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
    font-size: 14px;
    font-weight: 550;
    line-height: 1.4;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light .wb-summary-copy small {
    margin-top: 4px;
    color: #806f60;
    font-size: 11px;
    line-height: 1.5;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light .wb-summary-trailing,
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light .wb-summary-action {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 0 2px;
    border: 0;
    color: #94684d;
    background: transparent;
    box-shadow: none;
    font-size: 12px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbRecent .wb-empty-state {
    min-height: 62px;
    padding: 4px 0 12px;
    border: 0;
    border-radius: 0;
    background: none;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbRecent .wb-empty-state .wb-empty {
    font-size: 12px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbRecent .wb-empty-state button {
    min-height: 44px;
    padding: 0 2px;
    border: 0;
    color: #94684d;
    background: none;
    font-size: 12px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbFavoritesPanel #wbFavorites {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    padding: 0;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbFavoritesPanel.wb-panel-compact #wbFavorites {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbFavoritesPanel.wb-panel-compact .wb-summary-copy strong,
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbAttentionPanel.wb-panel-compact .wb-summary-copy strong {
    display: none;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbFavoritesPanel.wb-panel-compact #wbFavorites > .wb-summary-row {
    padding: 6px 12px;
    border: 1px dashed #e9dfd4;
    border-radius: 12px;
    background: rgba(255, 253, 249, .6);
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbFavoritesPanel .wb-favorite-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(40px, auto) auto auto;
    grid-template-areas: "title" "meta" "action";
    align-items: start;
    gap: 5px;
    margin: 0;
    padding: 12px 12px 4px;
    border: 1px solid #e9dfd4;
    border-radius: 13px;
    background: #fffefb;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbFavoritesPanel .wb-favorite-card > strong {
    display: -webkit-box;
    min-width: 0;
    overflow: hidden;
    color: #4a382b;
    font-size: 14px;
    font-weight: 550;
    line-height: 1.45;
    text-overflow: clip;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbFavoritesPanel .wb-favorite-card > small {
    margin: 0;
    color: #806f60;
    font-size: 11px;
    line-height: 1.5;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbFavoritesPanel .wb-favorite-card .wb-row-actions {
    align-self: end;
    margin: 0;
    padding: 0;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbFavoritesPanel .wb-favorite-card [data-wb-calc],
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbFavoritesPanel .wb-favorite-card [data-wb-label] {
    display: none;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbFavoritesPanel .wb-favorite-card [data-open-recipe] {
    width: 100%;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #94684d;
    background: transparent;
    box-shadow: none;
    font-size: 12px;
    text-align: left;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbUpcomingPanel .wb-section-head label {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #806f60;
    font-size: 11px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbUpcomingPanel select {
    min-height: 44px;
    padding: 0 8px;
    border-color: #e9dfd4;
    border-radius: 10px;
    color: #776251;
    background: #fffefb;
    font-size: 12px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbUpcoming .wb-event {
    min-height: 54px;
    margin: 0;
    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid #ece3d9;
    border-radius: 0;
    background: transparent;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbUpcoming .wb-event > strong {
    color: #675344;
    font-size: 13px;
    font-weight: 500;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbUpcomingPanel.wb-panel-compact .wb-summary-icon,
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbUpcomingPanel.wb-panel-compact .wb-summary-copy strong,
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbUpcomingPanel.wb-panel-compact .wb-summary-controls label,
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbUpcomingPanel.wb-panel-compact .wb-summary-controls select {
    display: none;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbUpcomingPanel.wb-panel-compact .wb-summary-row {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 44px;
    padding: 0;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light #wbUpcomingPanel.wb-panel-compact .wb-summary-controls {
    display: flex;
    align-items: center;
  }

  .v07-mobile-home-light button:focus-visible,
  .v07-mobile-home-light select:focus-visible {
    outline: 2px solid #bb5c3b;
    outline-offset: 3px;
  }
}

@media (max-width: 360px) {
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light .wb-heading-actions {
    gap: 6px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light .wb-heading-actions > button {
    gap: 4px;
    padding: 0 5px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light .wb-heading-actions > button > span:nth-child(2) {
    font-size: 12px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light .wb-summary-trailing,
  html[data-release-channel="cloud"]:has(#dashboard.view.active) .wb-home.v07-mobile-home-light .wb-summary-action {
    font-size: 11px;
  }
}
/* New presentation controls never replace desktop surfaces. */
.v07-plan-week,
.v07-plan-demand-toggle,
.v07-plan-rhythm-summary,
.v07-plan-rhythm-toggle,
.v07-plan-rhythm-note,
.v07-plan-task-count,
.v07-plan-board-more {
  display: none;
}

@media (max-width: 900px) {
  #schedule.v07-plan-light {
    min-width: 0;
    padding-bottom: 16px;
  }

  #schedule.v07-plan-light .page-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
  }

  #schedule.v07-plan-light .page-header > div {
    flex: 1;
    min-width: 0;
  }

  #schedule.v07-plan-light .eyebrow,
  #schedule.v07-plan-light .lab-kicker {
    display: none;
  }

  #schedule.v07-plan-light .page-header h1 {
    margin: 0 0 5px;
    font-size: 27px;
    line-height: 1.25;
  }

  #schedule.v07-plan-light .page-header p {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ink-soft);
  }

  #schedule.v07-plan-light .page-header > button,
  #schedule.v07-plan-light .lab-task-board-actions > button {
    flex: 0 0 auto;
    width: auto;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0 12px;
    border-radius: 12px;
    font-size: 13px;
    box-shadow: none;
  }

  #schedule.v07-plan-light .lab-calendar-shell {
    gap: 10px;
  }

  #schedule.v07-plan-light .v07-plan-week {
    order: 0;
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 8px 0 2px;
  }

  #schedule.v07-plan-light .v07-plan-date-tools {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px auto auto;
    align-items: center;
    gap: 4px;
  }

  #schedule.v07-plan-light .v07-plan-date-tools button,
  #schedule.v07-plan-light .v07-plan-rhythm-toggle,
  #schedule.v07-plan-light .v07-plan-board-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: 11px;
    color: var(--ink-soft);
    background: var(--card, #fffdf9);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
  }

  #schedule.v07-plan-light .v07-plan-date-tools [data-v07-plan-action$="-week"] {
    font-size: 24px;
  }

  #schedule.v07-plan-light .v07-plan-week-label {
    padding-left: 5px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 600;
  }

  #schedule.v07-plan-light .v07-plan-week-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
  }

  #schedule.v07-plan-light .v07-plan-day {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 5px;
    min-width: 0;
    min-height: 68px;
    padding: 6px 0;
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--ink-soft);
    background: transparent;
    font: inherit;
    cursor: pointer;
  }

  #schedule.v07-plan-light .v07-plan-day small {
    font-size: 11px;
    line-height: 1.2;
  }

  #schedule.v07-plan-light .v07-plan-day > span {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
  }

  #schedule.v07-plan-light .v07-plan-day i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: transparent;
  }

  #schedule.v07-plan-light .v07-plan-day i.has-events {
    background: var(--rust);
  }

  #schedule.v07-plan-light .v07-plan-day.is-today small {
    color: var(--rust-dark);
  }

  #schedule.v07-plan-light .v07-plan-day[aria-pressed="true"] {
    border-color: var(--rust);
    color: #fffdf9;
    background: var(--rust);
  }

  #schedule.v07-plan-light .v07-plan-day[aria-pressed="true"] small {
    color: inherit;
  }

  #schedule.v07-plan-light .v07-plan-day[aria-pressed="true"] i.has-events {
    background: #fffdf9;
  }

  #schedule.v07-plan-light .v07-plan-day:focus-visible,
  #schedule.v07-plan-light [data-v07-plan-action]:focus-visible {
    outline: 2px solid var(--rust-dark);
    outline-offset: 2px;
  }

  #schedule.v07-plan-light .lab-calendar-main {
    order: 1;
    display: none;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: none;
  }

  #schedule.v07-plan-light.v07-plan-month-open .lab-calendar-main {
    display: block;
  }

  #schedule.v07-plan-light .lab-calendar-toolbar {
    display: block;
  }

  #schedule.v07-plan-light #labCalendarToday,
  #schedule.v07-plan-light #v07ScheduleCalendarToggle {
    display: none;
  }

  #schedule.v07-plan-light .lab-calendar-title .lab-icon-button {
    min-width: 44px;
    width: 44px;
    height: 44px;
  }

  #schedule.v07-plan-light.v07-plan-month-open .lab-calendar-weekdays,
  #schedule.v07-plan-light.v07-plan-month-open .lab-calendar-grid {
    display: grid;
  }

  #schedule.v07-plan-light .lab-calendar-day {
    min-height: 52px;
    padding-top: 6px;
  }

  #schedule.v07-plan-light .lab-agenda-panel {
    order: 2;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--card, #fffdf9);
    box-shadow: none;
  }

  #schedule.v07-plan-light .lab-agenda-head {
    margin-bottom: 8px;
  }

  #schedule.v07-plan-light .lab-agenda-head h3 {
    font-size: 20px;
    line-height: 1.4;
  }

  #schedule.v07-plan-light .lab-agenda-lunar {
    font-size: 11px;
  }

  #schedule.v07-plan-light #labAddSelectedDate {
    min-width: 44px;
    min-height: 44px;
    padding: 0 8px;
    border: 0;
    color: var(--rust-dark);
    background: transparent;
    box-shadow: none;
    font-size: 12px;
  }

  #schedule.v07-plan-light .lab-agenda-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    margin: 0;
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
  }

  #schedule.v07-plan-light .lab-agenda-item > div:first-child > strong {
    display: -webkit-box;
    overflow: hidden;
    font-family: var(--font-sans, "Microsoft YaHei", sans-serif);
    font-size: 14px;
    line-height: 1.5;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  #schedule.v07-plan-light .lab-agenda-item small {
    display: block;
    color: var(--ink-soft);
    font-size: 11px;
    line-height: 1.6;
    overflow-wrap: anywhere;
  }

  #schedule.v07-plan-light .lab-agenda-item small.v07-plan-agenda-status {
    margin-top: 3px;
    color: var(--rust-dark);
  }

  #schedule.v07-plan-light .lab-agenda-item small.v07-plan-agenda-status.is-done {
    color: #51664e;
  }

  #schedule.v07-plan-light .lab-agenda-item > div:last-child {
    flex-wrap: nowrap;
    gap: 0;
  }

  #schedule.v07-plan-light .lab-agenda-item button {
    min-width: 44px;
    min-height: 44px;
    padding: 0 5px;
    border: 0;
    color: var(--rust-dark);
    background: transparent;
    font-size: 12px;
  }

  #schedule.v07-plan-light #labAgendaList > .lab-empty,
  #schedule.v07-plan-light #labScheduleDemandPreview .lab-empty {
    min-height: 0;
    margin: 0;
    padding: 12px 0;
    border: 0;
    border-radius: 0;
    color: var(--ink-soft);
    background: transparent;
    font-size: 12px;
    line-height: 1.7;
    text-align: left;
  }

  #schedule.v07-plan-light .lab-demand-preview {
    margin-top: 8px;
    padding-top: 12px;
  }

  #schedule.v07-plan-light .lab-demand-preview .lab-panel-title {
    margin-bottom: 0;
  }

  #schedule.v07-plan-light .lab-demand-preview .lab-panel-title > button {
    min-height: 44px;
    margin: -10px 0;
    padding: 0;
    font-size: 11px;
  }

  #schedule.v07-plan-light .v07-plan-demand-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 4px 0;
    border: 0;
    color: var(--ink-soft);
    background: transparent;
    font: inherit;
    font-size: 12px;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
  }

  #schedule.v07-plan-light #labScheduleDemandPreview,
  #schedule.v07-plan-light .lab-rhythm-meta,
  #schedule.v07-plan-light .lab-rhythm-scroll {
    display: none;
  }

  #schedule.v07-plan-light.v07-plan-demand-open #labScheduleDemandPreview {
    display: block;
    padding-bottom: 4px;
  }

  #schedule.v07-plan-light .lab-demand-row {
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 0;
    font-size: 12px;
  }

  #schedule.v07-plan-light .lab-rhythm-section,
  #schedule.v07-plan-light .lab-task-board-section {
    min-width: 0;
    margin-top: 10px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--card, #fffdf9);
    box-shadow: none;
  }

  #schedule.v07-plan-light .lab-rhythm-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 8px;
    align-items: center;
    margin: 0;
  }

  #schedule.v07-plan-light .lab-rhythm-head h2,
  #schedule.v07-plan-light .lab-task-board-head h2 {
    margin: 0;
    font-family: var(--font-sans, "Microsoft YaHei", sans-serif);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
  }

  #schedule.v07-plan-light #labRhythmSummary {
    display: none;
  }

  #schedule.v07-plan-light .v07-plan-rhythm-summary {
    display: block;
    grid-column: 1;
    margin: 0;
    color: var(--ink-soft);
    font-size: 11px;
    line-height: 1.6;
  }

  #schedule.v07-plan-light .v07-plan-rhythm-toggle {
    grid-column: 2;
    grid-row: 1 / 3;
  }

  #schedule.v07-plan-light.v07-plan-rhythm-conflict .v07-plan-rhythm-summary {
    color: var(--rust-dark);
    font-weight: 600;
  }

  #schedule.v07-plan-light.v07-plan-rhythm-empty .v07-plan-rhythm-summary,
  #schedule.v07-plan-light.v07-plan-rhythm-empty .v07-plan-rhythm-toggle {
    display: none;
  }

  #schedule.v07-plan-light.v07-plan-rhythm-empty .v07-plan-rhythm-note {
    display: block;
    margin: 8px 0 0;
    color: var(--ink-soft);
    font-size: 12px;
    line-height: 1.7;
  }

  #schedule.v07-plan-light.v07-plan-rhythm-open .lab-rhythm-meta {
    display: grid;
    min-width: 0;
    gap: 8px;
    margin-top: 12px;
  }

  #schedule.v07-plan-light .lab-rhythm-date-label,
  #schedule.v07-plan-light #labRhythmDateLabel {
    font-size: 12px;
  }

  #schedule.v07-plan-light .lab-rhythm-view-controls {
    min-width: 0;
    flex-wrap: wrap;
  }

  #schedule.v07-plan-light .lab-rhythm-view-controls button {
    min-width: 44px;
    min-height: 44px;
  }

  #schedule.v07-plan-light .lab-rhythm-legend {
    min-width: 0;
    overflow: visible;
    white-space: normal;
    line-height: 2;
    font-size: 10px;
  }

  #schedule.v07-plan-light.v07-plan-rhythm-open .lab-rhythm-scroll {
    display: block;
    min-width: 0;
    max-width: 100%;
    margin-top: 10px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  #schedule.v07-plan-light .lab-task-board-head {
    flex-direction: row;
    gap: 8px;
    margin-bottom: 8px;
  }

  #schedule.v07-plan-light .lab-task-board-actions {
    gap: 6px;
  }

  #schedule.v07-plan-light .v07-plan-task-count {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 6px;
    border-radius: 6px;
    color: var(--rust-dark);
    background: var(--pink-soft);
    font-size: 10px;
    font-weight: 500;
    vertical-align: middle;
  }

  #schedule.v07-plan-light .v07-plan-board-more {
    padding: 0 5px;
    border: 0;
    font-size: 11px;
  }

  #schedule.v07-plan-light .v07-mobile-board-toolbar,
  #schedule.v07-plan-light.v07-plan-board-empty .v07-mobile-board-filterbar,
  #schedule.v07-plan-light.v07-plan-board-empty .v07-mobile-board-empty button {
    display: none;
  }

  #schedule.v07-plan-light .v07-mobile-board-filter {
    min-height: 44px;
    padding: 0 10px;
    font-size: 12px;
    box-shadow: none;
  }

  #schedule.v07-plan-light .v07-mobile-board-card {
    padding: 12px;
    border-radius: 12px;
    box-shadow: none;
  }

  #schedule.v07-plan-light .v07-mobile-board-card-actions {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  #schedule.v07-plan-light .v07-mobile-board-card-edit,
  #schedule.v07-plan-light .v07-mobile-board-move select,
  #schedule.v07-plan-light .v07-mobile-board-manager-panel button {
    min-width: 44px;
    min-height: 44px;
  }

  #schedule.v07-plan-light .v07-mobile-board-empty {
    min-height: 0;
    padding: 12px 0;
    border: 0;
    border-radius: 0;
    color: var(--ink-soft);
    background: transparent;
    text-align: left;
    justify-items: start;
  }
}
/* Only the schedule editor and schedule-backed agenda rows, only mobile. */
.v07-plan-type-switch,
.v07-plan-form-hint,
.v07-plan-form-more,
.v07-plan-form-extra,
.v07-plan-card-meta,
.v07-plan-card-detail,
.v07-plan-save-feedback {
  display: none;
}

@media (max-width: 900px) {
  #labScheduleEditor.v07-plan-form-mobile {
    top: var(--v07-plan-viewport-top, 0px);
    bottom: auto;
    height: var(--v07-plan-viewport-height, 100dvh);
    padding: 8px 0 0;
    place-items: end center;
  }

  #labScheduleEditor.v07-plan-form-mobile #labScheduleForm {
    display: flex;
    flex-direction: column;
    width: min(620px, 100%);
    max-height: calc(var(--v07-plan-viewport-height, 100dvh) - 16px);
    padding: 0;
    overflow: hidden;
    border-radius: 22px 22px 0 0;
  }

  #labScheduleEditor.v07-plan-form-mobile .lab-modal-head {
    flex: 0 0 auto;
    min-width: 0;
    gap: 12px;
    padding: 17px 18px 12px;
  }

  #labScheduleEditor.v07-plan-form-mobile .lab-kicker {
    display: none;
  }

  #labScheduleEditor.v07-plan-form-mobile .lab-modal-head h2 {
    font-family: var(--font-sans, "Microsoft YaHei", sans-serif);
    font-size: 21px;
    font-weight: 600;
  }

  #labScheduleEditor.v07-plan-form-mobile .lab-modal-close {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
  }

  #labScheduleEditor.v07-plan-form-mobile .lab-form-grid {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 13px 12px;
    margin: 0;
    padding: 0 18px 14px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block: 12px;
  }

  #labScheduleEditor.v07-plan-form-mobile .lab-form-grid > .lab-field:has(#labScheduleType) {
    display: none;
  }

  #labScheduleEditor.v07-plan-form-mobile .v07-plan-type-switch,
  #labScheduleEditor.v07-plan-form-mobile .v07-plan-form-hint,
  #labScheduleEditor.v07-plan-form-mobile #labScheduleRecipeField,
  #labScheduleEditor.v07-plan-form-mobile #labScheduleScaleField,
  #labScheduleEditor.v07-plan-form-mobile .lab-span-2,
  #labScheduleEditor.v07-plan-form-mobile .v07-plan-form-more,
  #labScheduleEditor.v07-plan-form-mobile .v07-plan-form-extra {
    grid-column: 1 / -1;
  }

  #labScheduleEditor.v07-plan-form-mobile .v07-plan-type-switch {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: rgba(239, 229, 216, .45);
  }

  #labScheduleEditor.v07-plan-form-mobile .v07-plan-type-switch button {
    min-height: 44px;
    min-width: 0;
    padding: 0 8px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--ink-soft);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
  }

  #labScheduleEditor.v07-plan-form-mobile .v07-plan-type-switch [aria-pressed="true"] {
    color: var(--rust-dark);
    background: var(--card, #fffdf9);
    box-shadow: 0 1px 4px rgba(49, 39, 32, .08);
    font-weight: 600;
  }

  #labScheduleEditor.v07-plan-form-mobile .v07-plan-form-hint {
    display: block;
    margin: -4px 0 0;
    color: var(--ink-soft);
    font-size: 11px;
    line-height: 1.7;
  }

  #labScheduleEditor.v07-plan-form-mobile .lab-field {
    min-width: 0;
    gap: 7px;
    color: var(--ink-soft);
    font-size: 12px;
  }

  #labScheduleEditor.v07-plan-form-mobile input:not([type="checkbox"]),
  #labScheduleEditor.v07-plan-form-mobile select,
  #labScheduleEditor.v07-plan-form-mobile textarea {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 10px;
    border-radius: 11px;
    font-size: 16px;
    box-sizing: border-box;
  }

  #labScheduleEditor.v07-plan-form-mobile .v07-plan-form-more {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 10px 0;
    border: 0;
    border-top: 1px solid var(--line);
    color: var(--rust-dark);
    background: transparent;
    font: inherit;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
  }

  #labScheduleEditor.v07-plan-form-mobile .v07-plan-form-extra {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    min-width: 0;
  }

  #labScheduleEditor.v07-plan-form-mobile .v07-plan-form-extra > * {
    grid-column: 1;
  }

  #labScheduleEditor.v07-plan-form-mobile .lab-rhythm-form-head {
    display: grid;
    gap: 12px;
  }

  #labScheduleEditor.v07-plan-form-mobile .lab-rhythm-preset-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    min-width: 0;
  }

  #labScheduleEditor.v07-plan-form-mobile .lab-rhythm-preset-control > label {
    grid-column: 1 / -1;
  }

  #labScheduleEditor.v07-plan-form-mobile .lab-rhythm-preset-control > button {
    min-width: 48px;
    min-height: 44px;
  }

  #labScheduleEditor.v07-plan-form-mobile .lab-rhythm-stage-editor {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  #labScheduleEditor.v07-plan-form-mobile .lab-rhythm-stage-edit > label {
    display: flex;
    align-items: center;
    min-height: 44px;
    gap: 8px;
  }

  #labScheduleEditor.v07-plan-form-mobile .lab-form-actions {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 10px;
    margin: 0;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
    background: #fbf7ef;
    border-top: 1px solid var(--line);
  }

  #labScheduleEditor.v07-plan-form-mobile .lab-form-actions > button {
    min-height: 48px;
    margin: 0;
    padding: 0 12px;
    border-radius: 12px;
    font-size: 14px;
  }

  #labScheduleEditor.v07-plan-form-mobile [hidden] {
    display: none !important;
  }

  #labScheduleEditor.v07-plan-form-mobile button:focus-visible {
    outline: 2px solid var(--rust-dark);
    outline-offset: 2px;
  }

  #schedule.v07-plan-light .lab-agenda-item[data-v07-plan-card-status] {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 14px 0 8px;
  }

  #schedule.v07-plan-light .lab-agenda-item .v07-plan-card-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 6px;
    color: var(--ink-soft);
    font-size: 11px;
    line-height: 1.5;
  }

  #schedule.v07-plan-light .v07-plan-card-meta > span:first-child {
    color: var(--ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  #schedule.v07-plan-light .v07-plan-card-meta > span:last-child {
    color: var(--rust-dark);
  }

  #schedule.v07-plan-light .lab-agenda-item .v07-plan-card-source,
  #schedule.v07-plan-light .lab-agenda-item .v07-plan-agenda-status {
    display: none;
  }

  #schedule.v07-plan-light .v07-plan-card-detail {
    display: grid;
    gap: 3px;
    margin-top: 6px;
  }

  #schedule.v07-plan-light .lab-agenda-item .v07-plan-card-risk {
    color: var(--rust-dark);
    font-weight: 600;
  }

  #schedule.v07-plan-light .lab-agenda-item[data-v07-plan-card-status] > div:last-child {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
  }

  #schedule.v07-plan-light .lab-agenda-item[data-v07-plan-card-status="done"] .v07-plan-card-meta > span:last-child {
    color: #51664e;
  }

  #schedule.v07-plan-light .lab-agenda-item[data-v07-plan-card-status="done"] strong,
  #schedule.v07-plan-light .lab-agenda-item[data-v07-plan-card-status="cancelled"] strong,
  #schedule.v07-plan-light .lab-agenda-item[data-v07-plan-card-status="cancelled"] .v07-plan-card-meta > span {
    color: var(--ink-soft);
  }

  #schedule.v07-plan-light .v07-plan-save-feedback:not([hidden]) {
    display: block;
    margin: 0 0 10px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--ink-soft);
    background: var(--card, #fffdf9);
    font-size: 12px;
    line-height: 1.7;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    user-select: text;
  }

  #schedule.v07-plan-light .v07-plan-save-feedback[data-tone="error"],
  #schedule.v07-plan-light .v07-plan-save-feedback[data-tone="warning"] {
    color: var(--rust-dark);
  }

  #schedule.v07-plan-light .v07-plan-save-feedback[data-tone="success"] {
    color: #51664e;
  }
}
/* Preparation library: mobile presentation only. No business/schema changes. */
@media screen and (max-width: 900px) {
  #tools[data-mobile-prep-ready].view.active {
    gap: 0;
    padding-bottom: calc(88px + env(safe-area-inset-bottom));
  }
  #tools[data-mobile-prep-ready].view.active > .recipe-tools-workbench-library {
    scroll-margin-top: calc(74px + env(safe-area-inset-top));
  }

  #tools[data-mobile-prep-ready] .recipe-tools-workbench-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    margin-bottom: 14px;
  }

  #tools[data-mobile-prep-ready] .recipe-tools-workbench-header > div { min-width: 0; }
  #tools[data-mobile-prep-ready] .recipe-tools-workbench-header h1 { margin: 0; font-size: 25px; line-height: 1.25; }
  #tools[data-mobile-prep-ready] .recipe-tools-workbench-header p { margin: 7px 0 0; font-size: 12px; line-height: 1.5; }
  #tools[data-mobile-prep-ready] .recipe-tools-workbench-header .primary-button {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 13px;
    white-space: nowrap;
    border-radius: 12px;
    box-shadow: none;
  }

  #tools[data-mobile-prep-ready] .eyebrow,
  #tools[data-mobile-prep-ready] .recipe-tools-workbench-kicker,
  #tools[data-mobile-prep-ready] .recipe-tools-workbench-jump-nav { display: none; }

  #tools[data-mobile-prep-ready] .recipe-tools-workbench-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin-bottom: 14px;
    padding: 8px 0;
    border: 1px solid var(--line, #e5d9ce);
    border-radius: 13px;
    background: var(--card, #fffdfa);
    box-shadow: none;
  }

  #tools[data-mobile-prep-ready] .recipe-tools-workbench-summary-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 56px;
    padding: 3px 5px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    text-align: center;
  }

  #tools[data-mobile-prep-ready] .recipe-tools-workbench-summary-card + .recipe-tools-workbench-summary-card {
    border-left: 1px solid var(--line, #e5d9ce);
    border-radius: 0;
  }
  #tools[data-mobile-prep-ready] .recipe-tools-workbench-summary-card small { font-size: 11px; line-height: 1.3; }
  #tools[data-mobile-prep-ready] .recipe-tools-workbench-summary-card strong { margin: 0; font-size: 23px; line-height: 1.1; }
  #tools[data-mobile-prep-ready] .recipe-tools-workbench-summary-card p { display: none; }
  #tools[data-mobile-prep-ready] .recipe-tools-workbench-summary-card.is-active { color: var(--rust); background: rgba(181, 78, 42, .055); }
  #tools[data-mobile-prep-ready] .recipe-tools-workbench-summary-card.is-active small { color: var(--rust-dark); }
  #tools[data-mobile-prep-ready] .recipe-tools-workbench-summary-card:hover { transform: none; box-shadow: none; }

  #tools[data-mobile-prep-ready] .mobile-prep-tabs {
    order: 3;
    display: flex;
    gap: 3px;
    padding: 4px;
    margin-bottom: 12px;
    border-radius: 12px;
    background: var(--paper, #f5efe6);
    border: 1px solid var(--line, #e5d9ce);
  }
  #tools[data-mobile-prep-ready] .mobile-prep-tabs button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    padding: 8px 5px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--muted, #7b7065);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
  }
  #tools[data-mobile-prep-ready] .mobile-prep-tabs button[aria-selected="true"] {
    background: var(--card, #fffdfa);
    color: var(--rust-dark, #93482e);
    box-shadow: 0 1px 4px rgba(65, 48, 34, .06);
  }

  #tools[data-mobile-prep-ready][data-mobile-prep-view="library"] > .recipe-tools-workbench-scope,
  #tools[data-mobile-prep-ready][data-mobile-prep-view="library"] > .recipe-tools-workbench-recommendations,
  #tools[data-mobile-prep-ready][data-mobile-prep-view="recommendations"] > .recipe-tools-workbench-scope,
  #tools[data-mobile-prep-ready][data-mobile-prep-view="scope"] > .recipe-tools-workbench-recommendations,
  #tools[data-mobile-prep-ready]:not([data-mobile-prep-view="library"]) > .recipe-tools-workbench-library,
  #tools[data-mobile-prep-ready]:not([data-mobile-prep-view="library"]) > .recipe-tools-workbench-toolbar {
    display: none;
  }

  #tools[data-mobile-prep-ready] .recipe-tools-workbench-toolbar {
    padding: 0;
    margin-bottom: 8px;
    gap: 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  #tools[data-mobile-prep-ready] .recipe-tools-workbench-search > span,
  #tools[data-mobile-prep-ready] .recipe-tools-workbench-category-filter { display: none; }
  #tools[data-mobile-prep-ready] .recipe-tools-workbench-search input { min-height: 44px; font-size: 16px; }
  #tools[data-mobile-prep-ready] .recipe-tools-workbench-filter-toggle { min-height: 44px; font-size: 13px; }
  #tools[data-mobile-prep-ready] .recipe-tools-workbench-toolbar-options { grid-template-columns: minmax(0, 1fr); }
  #tools[data-mobile-prep-ready] .recipe-tools-workbench-count { font-size: 11px; color: var(--muted); }
  #tools[data-mobile-prep-ready] .mobile-prep-categories {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 1px 0 3px;
  }
  #tools[data-mobile-prep-ready] .mobile-prep-categories::-webkit-scrollbar { display: none; }
  #tools[data-mobile-prep-ready] .mobile-prep-categories button {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--line, #e5d9ce);
    border-radius: 999px;
    background: var(--card, #fffdfa);
    color: var(--muted);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
  }
  #tools[data-mobile-prep-ready] .mobile-prep-categories button[aria-pressed="true"] {
    border-color: var(--rust, #b54e2a);
    background: rgba(181, 78, 42, .065);
    color: var(--rust-dark);
    font-weight: 700;
  }

  #tools[data-mobile-prep-ready] .recipe-tools-workbench-library {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  #tools[data-mobile-prep-ready] .recipe-tools-workbench-library-head { justify-content: flex-end; margin-bottom: 8px; }
  #tools[data-mobile-prep-ready] .recipe-tools-workbench-library-title-row h2,
  #tools[data-mobile-prep-ready] .recipe-tools-workbench-library-head p,
  #tools[data-mobile-prep-ready] .recipe-tools-workbench-library-key { display: none; }
  #tools[data-mobile-prep-ready] .recipe-tools-workbench-workspace-badge {
    padding: 0;
    color: var(--muted);
    background: transparent;
    font-size: 10px;
    font-weight: 400;
  }
  #tools[data-mobile-prep-ready] .recipe-tools-workbench-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #tools[data-mobile-prep-ready] .recipe-tool-workbench-item {
    grid-template-rows: auto auto;
    gap: 8px;
    padding: 12px;
    border-radius: 14px;
    box-shadow: none;
  }
  #tools[data-mobile-prep-ready] .recipe-tool-workbench-item:hover { transform: none; box-shadow: none; }
  #tools[data-mobile-prep-ready] .recipe-tool-workbench-item-head { grid-template-columns: 58px minmax(0, 1fr); gap: 10px; }
  #tools[data-mobile-prep-ready] .recipe-tool-workbench-image { width: 58px; height: 58px; border-radius: 11px; }
  #tools[data-mobile-prep-ready] .recipe-tool-workbench-item-copy h3 { margin: 0 0 5px; font-size: 16px; line-height: 1.35; }
  #tools[data-mobile-prep-ready] .recipe-tool-workbench-item-copy p { min-height: 0; font-size: 12px; line-height: 1.5; }
  #tools[data-mobile-prep-ready] .recipe-tool-workbench-role-badges { margin-bottom: 5px; }
  #tools[data-mobile-prep-ready] .recipe-tool-workbench-role-badge { font-size: 10px; }
  #tools[data-mobile-prep-ready] .recipe-tool-workbench-example-badge { font-size: 9px; font-weight: 400; }
  #tools[data-mobile-prep-ready] .recipe-tool-workbench-usage,
  #tools[data-mobile-prep-ready] .recipe-tool-workbench-item > .recipe-tool-workbench-links,
  #tools[data-mobile-prep-ready] .recipe-tool-workbench-item > .recipe-tool-workbench-item-actions { display: none; }
  #tools[data-mobile-prep-ready] .mobile-prep-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid var(--line, #e5d9ce);
  }
  #tools[data-mobile-prep-ready] .mobile-prep-card-actions button {
    min-height: 44px;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 12px;
    color: var(--rust-dark);
    cursor: pointer;
  }
  #tools[data-mobile-prep-ready] .mobile-prep-card-actions [data-mobile-prep-detail] {
    flex: 1 1 auto;
    padding: 8px 0;
    text-align: left;
    font-weight: 700;
  }
  #tools[data-mobile-prep-ready] .mobile-prep-card-actions [data-mobile-prep-detail].is-unlinked { color: var(--muted); font-weight: 400; }
  #tools[data-mobile-prep-ready] .mobile-prep-card-actions [data-mobile-prep-more] { flex: 0 0 auto; padding: 8px 10px; color: var(--muted); }
  #tools[data-mobile-prep-ready] .recipe-tools-workbench-scope,
  #tools[data-mobile-prep-ready] .recipe-tools-workbench-recommendations { margin: 0; padding: 14px; }
  #tools[data-mobile-prep-ready] .recipe-tools-workbench-scope-title h2,
  #tools[data-mobile-prep-ready] .recipe-tools-workbench-recommendation-head h2 { font-size: 20px; }
  #tools[data-mobile-prep-ready] .recipe-tools-workbench-recommendation-toggle-row { display: none; }
  #tools[data-mobile-prep-ready][data-mobile-prep-view="recommendations"] .recipe-tools-workbench-recommendation-body { display: block; }
  #tools[data-mobile-prep-ready] .recipe-tools-workbench-recommendation-summary { margin-top: 12px; }
  #tools[data-mobile-prep-ready] .recipe-tools-workbench-recommendation-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #tools[data-mobile-prep-ready] .recipe-tools-workbench-recommendation-action { min-height: 44px; }
  #tools[data-mobile-prep-ready] button:focus-visible,
  #mobilePrepActions button:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }
  #tools[data-mobile-prep-ready] .mobile-prep-tabs[hidden],
  #tools[data-mobile-prep-ready] .mobile-prep-categories[hidden],
  #tools[data-mobile-prep-ready] .mobile-prep-card-actions[hidden],
  #tools[data-mobile-prep-ready] [data-mobile-prep-source][hidden] { display: none; }

  #mobilePrepActions {
    position: fixed;
    inset: 0;
    z-index: 260;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }
  #mobilePrepActions[hidden] { display: none; }
  #mobilePrepActions .mobile-prep-actions-backdrop { position: absolute; inset: 0; background: rgba(45, 34, 26, .32); }
  #mobilePrepActions .mobile-prep-actions-panel {
    position: relative;
    width: min(100%, 540px);
    box-sizing: border-box;
    padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
    border-radius: 22px 22px 0 0;
    background: var(--card, #fffdfa);
    box-shadow: 0 -8px 40px rgba(45, 34, 26, .12);
  }
  #mobilePrepActions h2 { margin: 0 0 6px; font-size: 18px; overflow-wrap: anywhere; }
  #mobilePrepActions p { margin: 0 0 14px; font-size: 12px; color: var(--muted); line-height: 1.5; }
  #mobilePrepActions button {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    margin-top: 8px;
    border: 1px solid var(--line, #e5d9ce);
    border-radius: 12px;
    background: transparent;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
  }
  #mobilePrepActions [data-mobile-prep-edit] { color: var(--rust-dark); font-weight: 700; }
  #mobilePrepActions [data-mobile-prep-delete] { color: #a4412a; }
  #mobilePrepActions [data-mobile-prep-close] { color: var(--muted); }
}

@media screen and (min-width: 601px) and (max-width: 900px) {
  #tools[data-mobile-prep-ready] .recipe-tools-workbench-grid,
  #tools[data-mobile-prep-ready] .recipe-tools-workbench-recommendation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Dialog enhancement is init-gated and strictly mobile. The original desktop
   form and its DOM order are restored when the viewport crosses 900px. */
.mobile-prep-origin-new { display: none; }
@media screen and (max-width: 900px) {
  #recipeToolWorkbenchModal[data-mobile-prep-dialog-ready],
  #recipeToolWorkbenchDetailModal[data-mobile-prep-dialog-ready] {
    z-index: 270;
    top: var(--mobile-prep-viewport-top, 0px);
    bottom: auto;
    height: var(--mobile-prep-viewport-height, 100dvh);
    padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
    box-sizing: border-box;
  }
  #recipeToolWorkbenchModal[data-mobile-prep-dialog-ready] .recipe-tool-workbench-card,
  #recipeToolWorkbenchDetailModal[data-mobile-prep-dialog-ready] .recipe-tool-workbench-card {
    width: min(620px, 100%);
    box-sizing: border-box;
    max-height: 100%;
    border-radius: 18px;
    padding: 16px;
    overscroll-behavior: contain;
    overflow-wrap: anywhere;
  }
  #recipeToolWorkbenchModal[data-mobile-prep-dialog-ready] #recipeToolWorkbenchForm {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
  }
  [data-mobile-prep-dialog-ready] .recipe-tool-workbench-modal-head {
    flex: 0 0 auto;
    align-items: center;
    margin: 0 0 14px;
  }
  #recipeToolWorkbenchModal[data-mobile-prep-dialog-ready] .recipe-tool-workbench-modal-head {
    margin: 0;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line, #e5d9ce);
  }
  [data-mobile-prep-dialog-ready] .recipe-tools-workbench-kicker { display: none; }
  [data-mobile-prep-dialog-ready] .recipe-tool-workbench-modal-head h2 { font-size: 20px; margin: 0; }
  [data-mobile-prep-dialog-ready] .recipe-tool-workbench-close { width: 44px; height: 44px; flex: 0 0 auto; }
  [data-mobile-prep-dialog-ready] .mobile-prep-editor-body {
    min-height: 0;
    padding: 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding: 14px;
  }
  [data-mobile-prep-dialog-ready] .recipe-tool-workbench-editor-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  [data-mobile-prep-dialog-ready] .recipe-tool-workbench-fields { gap: 10px; }
  [data-mobile-prep-dialog-ready] .recipe-tool-workbench-fields input,
  [data-mobile-prep-dialog-ready] .recipe-tool-workbench-fields select,
  [data-mobile-prep-dialog-ready] .recipe-tool-workbench-fields textarea {
    min-height: 44px;
    font-size: 16px;
    box-sizing: border-box;
  }
  [data-mobile-prep-dialog-ready] .recipe-tool-workbench-fields textarea { min-height: 84px; height: 84px; }
  [data-mobile-prep-dialog-ready] .recipe-tool-workbench-image-editor {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 3px 10px;
    padding: 10px;
    border: 1px solid var(--line, #e5d9ce);
    border-radius: 12px;
    background: var(--card, #fffdfa);
  }
  [data-mobile-prep-dialog-ready] #recipeToolWorkbenchImagePreview {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 64px;
    height: 64px;
    box-sizing: border-box;
    border-radius: 10px;
    font-size: 24px;
  }
  [data-mobile-prep-dialog-ready] .mobile-prep-image-hint { grid-column: 2; grid-row: 1; align-self: end; }
  [data-mobile-prep-dialog-ready] [data-recipe-tool-workbench-pick-image] {
    grid-column: 2;
    grid-row: 2;
    min-height: 44px;
    padding: 6px 0;
    border: 0;
    background: transparent;
    font-size: 12px;
    text-align: left;
  }
  [data-mobile-prep-dialog-ready] [data-recipe-tool-workbench-clear-image] {
    grid-column: 3;
    grid-row: 1 / 3;
    min-height: 44px;
    padding: 6px;
  }
  [data-mobile-prep-dialog-ready] .recipe-tool-workbench-image-editor > small:not(.mobile-prep-image-hint) { display: none; }
  [data-mobile-prep-dialog-ready] .recipe-tool-workbench-links { margin-top: 16px; padding-top: 14px; }
  [data-mobile-prep-dialog-ready] .recipe-tool-workbench-links-head { gap: 10px; }
  [data-mobile-prep-dialog-ready] .recipe-tool-workbench-links-head h3 { margin-top: 0; }
  [data-mobile-prep-dialog-ready] .mobile-prep-link-controls { margin-top: 12px; }
  [data-mobile-prep-dialog-ready] .mobile-prep-link-controls > label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--muted);
  }
  [data-mobile-prep-dialog-ready] #mobilePrepRecipeSearch {
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    border: 1px solid var(--line, #e5d9ce);
    border-radius: 11px;
    padding: 10px 12px;
    background: var(--card, #fffdfa);
    color: var(--ink);
    font: inherit;
    font-size: 16px;
  }
  [data-mobile-prep-dialog-ready] .mobile-prep-link-controls > div { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
  [data-mobile-prep-dialog-ready] [data-mobile-prep-link-mode] {
    min-height: 44px;
    padding: 8px 15px;
    border: 1px solid var(--line, #e5d9ce);
    border-radius: 999px;
    color: var(--muted);
    background: transparent;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
  }
  [data-mobile-prep-dialog-ready] [data-mobile-prep-link-mode][aria-pressed="true"] {
    border-color: var(--rust);
    color: var(--rust-dark);
    background: rgba(181, 78, 42, .055);
    font-weight: 700;
  }
  [data-mobile-prep-dialog-ready] .mobile-prep-link-controls small,
  [data-mobile-prep-dialog-ready] .mobile-prep-link-empty { color: var(--muted); font-size: 11px; line-height: 1.5; }
  [data-mobile-prep-dialog-ready] #recipeToolWorkbenchRecipeList {
    grid-template-columns: minmax(0, 1fr);
    max-height: 240px;
    margin-top: 8px;
    scrollbar-gutter: stable;
  }
  [data-mobile-prep-dialog-ready] .recipe-tool-workbench-recipe-option {
    align-items: center;
    min-height: 48px;
    padding: 10px;
    box-sizing: border-box;
    font-size: 13px;
  }
  [data-mobile-prep-dialog-ready] .recipe-tool-workbench-recipe-option span { white-space: normal; overflow-wrap: anywhere; }
  [data-mobile-prep-dialog-ready] .recipe-tool-workbench-recipe-option input { width: 18px; height: 18px; margin-top: 0; }
  [data-mobile-prep-dialog-ready] .mobile-prep-recipe-meta { display: block; font-size: 10px; color: var(--muted); margin-top: 3px; }
  #recipeToolWorkbenchModal[data-mobile-prep-dialog-ready] .recipe-tool-workbench-form-actions {
    flex: 0 0 auto;
    grid-template-columns: minmax(70px, .6fr) minmax(0, 1fr);
    gap: 6px 10px;
    margin: 0;
    padding: 12px 16px;
    border-top: 1px solid var(--line, #e5d9ce);
    background: #fffaf4;
    box-shadow: 0 -3px 12px rgba(65, 48, 34, .035);
  }
  [data-mobile-prep-dialog-ready] .recipe-tool-workbench-form-actions button { min-height: 44px; font-size: 13px; padding: 8px 12px; }
  [data-mobile-prep-dialog-ready] #mobilePrepDraftStatus { grid-column: 1 / -1; font-size: 11px; text-align: right; color: var(--muted); }
  [data-mobile-prep-dialog-ready] .recipe-tool-workbench-detail-tool { grid-template-columns: 64px minmax(0, 1fr); align-items: start; gap: 10px; padding: 12px; }
  [data-mobile-prep-dialog-ready] .recipe-tool-workbench-detail-tool > div:last-child { display: contents; }
  [data-mobile-prep-dialog-ready] #recipeToolWorkbenchDetailImage { grid-column: 1; grid-row: 1; width: 64px; height: 64px; border-radius: 10px; }
  [data-mobile-prep-dialog-ready] .mobile-prep-detail-label { grid-column: 1 / -1; grid-row: 2; display: block; font-size: 11px; color: var(--muted); margin-top: 4px; }
  [data-mobile-prep-dialog-ready] #recipeToolWorkbenchDetailNote { grid-column: 1 / -1; grid-row: 3; margin: 0; white-space: pre-wrap; font-size: 13px; line-height: 1.65; -webkit-line-clamp: unset; overflow: visible; }
  [data-mobile-prep-dialog-ready] #recipeToolWorkbenchDetailMeta { grid-column: 2; grid-row: 1; align-self: center; gap: 5px; }
  [data-mobile-prep-dialog-ready] .mobile-prep-adjust-links { width: 100%; margin: 12px 0 0; min-height: 44px; font-size: 13px; }
  [data-mobile-prep-dialog-ready] .recipe-tool-workbench-detail-recipe { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  [data-mobile-prep-dialog-ready] .recipe-tool-workbench-detail-recipe small { white-space: normal; line-height: 1.6; }
  [data-mobile-prep-dialog-ready] [data-recipe-tool-workbench-open-recipe] { min-height: 44px; }
  [data-mobile-prep-dialog-ready] button:focus-visible,
  [data-mobile-prep-dialog-ready] input:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }
  [data-mobile-prep-dialog-ready] [hidden] { display: none !important; }
  body[data-mobile-prep-dialogs-ready] .mobile-prep-origin-new {
    display: block;
    width: 100%;
    min-height: 44px;
    margin: 12px 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--rust-dark);
    background: var(--card);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
  }
  body[data-mobile-prep-dialogs-ready] .recipe-tools-manager:has(.mobile-prep-origin-new) > .recipe-tool-create { display: none; }
}
/* Progressive mobile-only admin presentation. Match the existing 760px admin
   chrome breakpoint; desktop content, density and permission controls stay put. */
.v07-mobile-admin-only,
.v07-mobile-admin-account-controls,
.v07-mobile-admin-account-identity,
.v07-mobile-admin-account-login,
.v07-mobile-admin-filter-toggle { display: none; }
.v07-mobile-admin-dialog:not([open]) { display: none; }

@media (max-width: 760px) {
  body:has(#v07AdminPanel[data-mobile-compact-ready]:not([hidden])) > .toast { display: none; }
  #v07AdminPanel[data-mobile-compact-ready] .v07-mobile-admin-only { display: block; }
  #v07AdminPanel[data-mobile-compact-ready] .v07-mobile-admin-only[hidden] { display: none; }
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-shell { padding: 0 10px calc(28px + env(safe-area-inset-bottom)); }
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-section {
    margin: 10px 0; padding: 14px; border-radius: 16px; box-shadow: none;
  }
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-section-kicker,
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-engagement-card-kicker,
  #v07AdminPanel[data-mobile-compact-ready] .v07-mobile-admin-long-description,
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-section-state[data-state="success"],
  #v07AdminPanel[data-mobile-compact-ready] #v07AdminFeedback[data-state="success"] { display: none; }
  #v07AdminPanel[data-mobile-compact-ready] #v07AdminFeedback {
    user-select: text; -webkit-user-select: text; overflow-wrap: anywhere;
  }
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-section-heading { gap: 8px; margin-bottom: 12px; }
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-section-heading h2 { margin: 0; font-size: 20px; line-height: 1.35; }
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-mobile-toolbar button { width: 44px; height: 44px; }
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-mobile-toolbar { grid-template-columns: 44px minmax(0, 1fr) auto 44px; }
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-mobile-nav button,
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-mobile-subnav button { min-height: 44px; }
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-mobile-nav { padding-bottom: 4px; }
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-mobile-subnav > div:not([hidden]) { padding-bottom: 6px; }
  .v07-mobile-admin-explanation { margin-top: 4px; color: #806e62; font-size: 12px; line-height: 1.5; }
  .v07-mobile-admin-explanation summary { min-height: 44px; display: flex; align-items: center; list-style: none; }
  #v07AdminPanel .v07-mobile-admin-explanation > p {
    display: block; overflow: visible; -webkit-line-clamp: unset; margin: 4px 0 8px; font-size: 12px;
  }
  .v07-mobile-admin-note { color: #8a7769; font-size: 12px; line-height: 1.5; margin: 8px 0; overflow-wrap: anywhere; }

  /* Platform account statistics and current-workspace membership are separate. */
  #v07AdminPanel[data-mobile-compact-ready] #v07AdminOverviewSection { display: flex; flex-direction: column; gap: 16px; }
  #v07AdminPanel[data-mobile-compact-ready] #v07AdminOverviewSection[hidden] { display: none; }
  #v07AdminPanel[data-mobile-compact-ready] #v07AdminOverviewSection > .v07-admin-section-heading { display: none; }
  .v07-mobile-admin-summary { order: 0; }
  .v07-mobile-admin-summary h2 { margin: 0 0 10px; font-size: 19px; }
  .v07-mobile-admin-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .v07-mobile-admin-summary-grid > div,
  .v07-mobile-admin-summary-grid > button { padding: 10px 12px; border: 0; border-radius: 12px; background: #f8f2e8; text-align: left; font-family: inherit; }
  .v07-mobile-admin-summary-grid > button { min-height: 88px; cursor: pointer; }
  .v07-mobile-admin-summary-grid > button:focus-visible { outline: 2px solid #ad4f2f; outline-offset: 2px; }
  .v07-mobile-admin-summary > button { min-height: 44px; width: 100%; margin-top: 4px; }
  .v07-mobile-admin-summary-grid span { color: #8a7769; font-size: 12px; }
  .v07-mobile-admin-summary-grid strong { display: block; margin-top: 4px; font-size: 25px; color: #4c3a2f; }
  #v07AdminPanel[data-mobile-compact-ready] #v07AdminOverviewCards {
    order: 2; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; border-top: 1px solid #eee2d5; padding-top: 14px;
  }
  #v07AdminPanel[data-mobile-compact-ready] #v07AdminOverviewCards::before {
    grid-column: 1 / -1; content: "当前工作区成员"; font-size: 16px; font-weight: 700;
  }
  #v07AdminPanel[data-mobile-compact-ready] #v07AdminOverviewCards .v07-admin-metric { min-height: 0; padding: 8px; border: 0; background: transparent; }
  #v07AdminPanel[data-mobile-compact-ready] #v07AdminOverviewCards .v07-admin-metric:nth-child(1),
  #v07AdminPanel[data-mobile-compact-ready] #v07AdminOverviewCards .v07-admin-metric:nth-child(5),
  #v07AdminPanel[data-mobile-compact-ready] #v07AdminOverviewCards .v07-admin-metric small { display: none; }
  #v07AdminPanel[data-mobile-compact-ready] #v07AdminOverviewCards .v07-admin-metric-wide { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  #v07AdminPanel[data-mobile-compact-ready] #v07AdminLastActivity { margin: 0; font-size: 13px; white-space: normal; overflow: visible; }
  #v07AdminPanel[data-mobile-compact-ready] #v07AdminEngagementDashboard { order: 1; margin: 0; padding: 0; border: 0; }
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-engagement-head {
    flex-direction: row; align-items: center; gap: 8px; margin-bottom: 8px;
  }
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-engagement-head > div:first-child { min-width: 0; }
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-engagement-head h3 { margin: 0; font-size: 17px; }
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-engagement-head p,
  #v07AdminPanel[data-mobile-compact-ready] #v07AdminEngagementScope,
  #v07AdminPanel[data-mobile-compact-ready] #v07AdminEngagementDashboard > .v07-admin-engagement-metrics,
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-engagement-grid > .v07-admin-engagement-card:nth-child(2),
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-engagement-placeholder { display: none; }
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-engagement-controls { flex: 0 0 auto; width: 108px; min-width: 0; grid-template-columns: 1fr; }
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-engagement-controls label { font-size: 0; }
  #v07AdminPanel[data-mobile-compact-ready] #v07AdminEngagementRange { min-height: 44px; width: 108px; font-size: 14px; }
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-engagement-grid { margin-bottom: 8px; }
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-engagement-trend-card { padding: 8px 0; border: 0; background: transparent; }
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-engagement-trend-card .v07-admin-engagement-card-head { margin-bottom: 8px; }
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-engagement-trend-card h4 { display: none; }
  #v07AdminPanel[data-mobile-compact-ready] #v07AdminEngagementChartHint { max-width: 100%; font-size: 11px; text-align: left; }
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-engagement-chart { min-width: 0; height: 128px; gap: 3px; }
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-engagement-chart-item { position: relative; }
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-engagement-chart-label {
    position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    overflow: visible; width: 36px; font-size: 0; line-height: 1.4; text-overflow: clip;
  }
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-engagement-chart-label::after { content: attr(data-mobile-label); font-size: 11px; line-height: 1.4; }
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-engagement-chart-label:not([data-mobile-label]),
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-engagement-chart-label[data-mobile-label=""] { display: none; }
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-engagement-chart-item:first-child .v07-admin-engagement-chart-label { left: 0; transform: none; text-align: left; }
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-engagement-chart-item:last-child .v07-admin-engagement-chart-label { left: auto; right: 0; transform: none; text-align: right; }
  .v07-mobile-admin-login-more > summary { min-height: 44px; color: #ad4f2f; font-size: 13px; line-height: 44px; }
  .v07-mobile-admin-login-more .v07-admin-engagement-metrics { margin-top: 8px; }
  .v07-mobile-admin-login-more .v07-admin-engagement-metric { padding: 10px; }
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-engagement-attention-card { padding: 10px; box-shadow: none; }
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-engagement-attention-card:has(.v07-admin-engagement-attention-empty) { display: none; }

  /* Existing filters remain authoritative; only their initial presentation folds. */
  #v07AdminPanel[data-mobile-compact-ready] .v07-mobile-admin-filter { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  #v07AdminPanel[data-mobile-compact-ready] .v07-mobile-admin-filter > .v07-admin-filter-field:first-child { grid-column: 1; grid-row: 1; font-size: 0; }
  #v07AdminPanel[data-mobile-compact-ready] .v07-mobile-admin-filter input { min-height: 44px; font-size: 16px; }
  #v07AdminPanel[data-mobile-compact-ready] .v07-mobile-admin-filter-toggle { display: block; grid-column: 2; grid-row: 1; min-height: 44px; }
  #v07AdminPanel[data-mobile-compact-ready] .v07-mobile-admin-filter > .v07-admin-filter-field:nth-child(2) { display: none; grid-column: 1 / -1; grid-row: 2; }
  #v07AdminPanel[data-mobile-compact-ready] .v07-mobile-admin-filter.is-filter-open > .v07-admin-filter-field:nth-child(2) { display: block; }
  #v07AdminPanel[data-mobile-compact-ready] .v07-mobile-admin-filter select { min-height: 44px; font-size: 16px; }
  #v07AdminPanel[data-mobile-compact-ready] #v07AdminAccountFilterClear,
  #v07AdminPanel[data-mobile-compact-ready] #v07AdminAuditFilterClear { display: none; grid-column: 1 / -1; }
  #v07AdminPanel[data-mobile-compact-ready] .v07-mobile-admin-filter[data-has-filters="true"] > #v07AdminAccountFilterClear,
  #v07AdminPanel[data-mobile-compact-ready] .v07-mobile-admin-filter[data-has-filters="true"] > #v07AdminAuditFilterClear { display: block; }

  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-account-row { gap: 8px; padding: 12px; border-radius: 13px; box-shadow: none; }
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-account-main > .v07-admin-member-meta,
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-account-main > .v07-admin-account-registration-source,
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-account-row > .v07-admin-account-details,
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-account-row > .v07-admin-member-actions,
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-account-row > .v07-admin-account-inspector { display: none; }
  #v07AdminPanel[data-mobile-compact-ready] .v07-mobile-admin-account-identity,
  #v07AdminPanel[data-mobile-compact-ready] .v07-mobile-admin-account-login { display: block; font-size: 12px; line-height: 1.5; margin: 5px 0 0; color: #8a7769; }
  .v07-mobile-admin-account-identity span { display: block; overflow-wrap: anywhere; }
  #v07AdminPanel[data-mobile-compact-ready] .v07-mobile-admin-account-login[data-no-record="true"] { color: #ad4f2f; font-weight: 700; }
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-account-row.is-mobile-filtered,
  #v07AdminPanel[data-mobile-compact-ready] #v07AdminAccountFilterState { display: none; }
  #v07AdminPanel[data-mobile-compact-ready] .v07-mobile-admin-account-quick {
    display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px;
  }
  .v07-mobile-admin-account-quick button { min-height: 44px; padding: 8px 10px; font-size: 12px; }
  .v07-mobile-admin-account-quick button[aria-pressed="true"] { color: #ad4f2f; background: #fbf0e6; border-color: #d8a080; }
  #v07AdminPanel[data-mobile-compact-ready] { height: var(--v07-admin-visible-height, 100dvh); bottom: auto; box-sizing: border-box; }
  #v07MobileAdminInvitesBack { min-height: 44px; margin-bottom: 12px; }
  #v07MobileAdminInvitesSection .v07-admin-registration-invites { margin: 0; padding: 0; border: 0; }
  #v07MobileAdminInvitesSection .v07-admin-registration-invites-head { display: flex; flex-direction: row; gap: 8px; align-items: center; }
  #v07MobileAdminInvitesSection .v07-admin-registration-invites-head > div { min-width: 0; flex: 1; }
  #v07MobileAdminInvitesSection .v07-admin-registration-invites-head h3 { font-size: 20px; margin: 0; }
  #v07MobileAdminInvitesSection .v07-admin-registration-invites-head > button { min-height: 44px; flex: 0 0 auto; font-size: 12px; }
  .v07-mobile-admin-invite-create { padding: 0 12px; margin: 12px 0; border: 1px solid #ead9ca; border-radius: 12px; background: #fffaf4; }
  .v07-mobile-admin-invite-create > summary { min-height: 48px; line-height: 48px; color: #ad4f2f; font-size: 14px; font-weight: 700; }
  #v07MobileAdminInvitesSection .v07-admin-invite-form { grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 8px 0 12px; }
  #v07MobileAdminInvitesSection .v07-admin-invite-form label { min-width: 0; font-size: 13px; }
  #v07MobileAdminInvitesSection .v07-admin-invite-form input { min-width: 0; width: 100%; box-sizing: border-box; min-height: 44px; font-size: 16px; }
  #v07MobileAdminInvitesSection .v07-admin-invite-form button { min-height: 44px; width: 100%; }
  #v07MobileAdminInvitesSection .v07-admin-invite-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 12px; border-radius: 12px; }
  #v07MobileAdminInvitesSection .v07-admin-invite-main { grid-column: 1 / -1; min-width: 0; }
  #v07MobileAdminInvitesSection .v07-admin-invite-main strong { font-size: 15px; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  #v07MobileAdminInvitesSection .v07-admin-invite-main small { font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
  #v07MobileAdminInvitesSection .v07-admin-invite-code { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  #v07MobileAdminInvitesSection .v07-admin-invite-code code,
  #v07MobileAdminInvitesSection .v07-admin-invite-created code { min-width: 0; font-size: 12px; white-space: normal; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
  #v07MobileAdminInvitesSection .v07-admin-invite-row button,
  #v07MobileAdminInvitesSection .v07-admin-invite-created button { min-height: 44px; font-size: 12px; }
  #v07MobileAdminInvitesSection .v07-admin-invite-row > button { grid-column: 2; grid-row: 2; }
  #v07MobileAdminInvitesSection .v07-admin-invite-status { justify-self: start; align-self: center; }
  #v07MobileAdminInvitesSection .v07-admin-invite-state { font-size: 12px; line-height: 1.6; user-select: text; -webkit-user-select: text; overflow-wrap: anywhere; }
  #v07MobileAdminInvitesSection .v07-admin-invite-created { flex-wrap: wrap; min-width: 0; }
  #v07MobileAdminInvitesSection .v07-admin-invite-created > div { min-width: 0; }
  #v07AdminPanel[data-mobile-compact-ready] .v07-mobile-admin-account-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .v07-mobile-admin-account-controls button { min-height: 44px; font-size: 13px; padding: 8px 16px; }
  .v07-mobile-admin-account-controls button:first-child { color: #ad4f2f; background: #fbf0e6; }

  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-resource-wrap,
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-audit-wrap,
  #v07AdminPanel[data-mobile-compact-ready] #v07AdminAuditFilterState { display: none; }
  #v07AdminPanel[data-mobile-compact-ready] #v07AdminDataUpdatedAt {
    font-size: 15px; line-height: 1.45; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere;
  }
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-data-grid .v07-admin-metric { min-height: 0; padding: 10px; background: #f8f2e8; border: 0; }
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-data-grid .v07-admin-metric small { white-space: normal; overflow: visible; line-height: 1.5; }
  .v07-mobile-admin-resource { border-bottom: 1px solid #eee2d5; }
  .v07-mobile-admin-resource summary { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 52px; font-size: 14px; list-style: none; }
  .v07-mobile-admin-resource summary span { color: #8a7769; font-size: 13px; }
  .v07-mobile-admin-resource summary span::after { content: " ›"; }
  .v07-mobile-admin-resource[open] summary span::after { content: " ⌄"; }
  .v07-mobile-admin-resource p { margin: 0 0 12px; font-size: 12px; line-height: 1.7; color: #8a7769; overflow-wrap: anywhere; }
  .v07-mobile-admin-audit-controls label { display: flex; align-items: center; gap: 10px; color: #8a7769; font-size: 12px; }
  .v07-mobile-admin-audit-controls select { min-width: 0; min-height: 44px; padding: 8px 10px; font-size: 16px; border: 1px solid #ead9ca; border-radius: 10px; background: #fffaf4; color: #4c3a2f; }
  .v07-mobile-admin-audit-item { border-bottom: 1px solid #eee2d5; }
  .v07-mobile-admin-audit-item summary { min-height: 44px; padding: 12px 0; list-style: none; }
  .v07-mobile-admin-audit-headline { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
  .v07-mobile-admin-audit-headline strong { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
  .v07-mobile-admin-audit-headline .v07-admin-audit-result { flex: 0 0 auto; font-size: 11px; }
  .v07-mobile-admin-audit-target, .v07-mobile-admin-audit-item time { display: block; margin-top: 4px; font-size: 12px; color: #8a7769; overflow-wrap: anywhere; }
  .v07-mobile-admin-audit-item time::after { content: " · 展开详情"; color: #ad4f2f; }
  .v07-mobile-admin-audit-item[open] time::after { content: " · 收起详情"; }
  .v07-mobile-admin-audit-technical { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; padding: 10px; margin: 0 0 12px; background: #f8f2e8; border-radius: 10px; font-size: 12px; line-height: 1.6; }
  .v07-mobile-admin-audit-technical dt { color: #8a7769; }
  .v07-mobile-admin-audit-technical dd { margin: 0; overflow-wrap: anywhere; user-select: text; }
  #v07MobileAdminAuditMore { min-height: 44px; width: 100%; margin-top: 12px; font-size: 13px; }

  /* Native dialog provides focus trapping/Escape; source handlers provide permissions. */
  .v07-mobile-admin-dialog[open] {
    display: block; box-sizing: border-box; position: fixed; inset: auto 0 0; margin: 0 auto;
    width: min(100%, 620px); max-width: 100%; max-height: min(88dvh, calc(var(--v07-admin-visible-height, 100dvh) * .88)); padding: 0;
    bottom: var(--v07-admin-keyboard-inset, 0px);
    border: 1px solid #ead9ca; border-radius: 18px 18px 0 0; background: #fffdf9; color: #4c3a2f;
    overscroll-behavior: contain; overflow-y: auto; font-family: inherit;
  }
  .v07-mobile-admin-dialog::backdrop { background: rgba(55, 39, 30, .42); }
  .v07-mobile-admin-dialog-head { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; background: #fffdf9; border-bottom: 1px solid #eee2d5; z-index: 1; }
  .v07-mobile-admin-dialog-head h2 { margin: 0; font-size: 17px; line-height: 1.5; overflow-wrap: anywhere; }
  .v07-mobile-admin-dialog button { min-height: 44px; padding: 8px 14px; border: 1px solid #ead9ca; border-radius: 10px; color: #ad4f2f; background: #fffaf4; font-size: 14px; }
  .v07-mobile-admin-dialog-head button { flex: 0 0 auto; }
  .v07-mobile-admin-dialog-body { padding: 12px 14px calc(18px + env(safe-area-inset-bottom)); }
  .v07-mobile-admin-dialog-body > button { display: block; width: 100%; margin-top: 10px; }
  .v07-mobile-admin-sheet-meta { color: #8a7769; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; margin-bottom: 12px; }
  .v07-mobile-admin-sheet-meta .v07-admin-account-details { display: grid; grid-template-columns: 1fr; gap: 4px; text-align: left; }
  .v07-mobile-admin-dialog .v07-admin-account-inspector { margin: 0; padding: 0; border: 0; box-shadow: none; }
  .v07-mobile-admin-dialog .v07-admin-account-inspector.is-error { user-select: text; -webkit-user-select: text; overflow-wrap: anywhere; line-height: 1.6; }
  .v07-mobile-admin-dialog .v07-admin-media-kicker { display: none; }
  .v07-mobile-admin-dialog .v07-admin-account-inspector-head { flex-direction: column; gap: 6px; }
  .v07-mobile-admin-dialog .v07-admin-account-inspector-metric > strong { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
  .v07-mobile-admin-dialog .v07-admin-account-module-row { flex-direction: column; gap: 4px; align-items: flex-start; }
  #v07AdminPanel[data-mobile-compact-ready] .v07-mobile-admin-toast:not([hidden]) {
    display: block; position: fixed; bottom: calc(20px + env(safe-area-inset-bottom)); left: 50%;
    transform: translateX(-50%); max-width: calc(100% - 40px); box-sizing: border-box;
    padding: 10px 16px; border-radius: 12px; background: #4c3a2f; color: #fffaf4; font-size: 13px; z-index: 10; pointer-events: none;
  }
}
@media (max-width: 350px) {
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-mobile-toolbar { grid-template-columns: 44px minmax(0, 1fr) 44px; }
  .v07-mobile-admin-summary h2 { font-size: 17px; }
}

/* 2026-10-16 first pass: presentation only, retaining the existing admin
   breakpoint and original authorized handlers / older-WebView fallback. */
@media (max-width: 760px) {
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-mobile-toolbar {
    grid-template-columns: 44px minmax(0, 1fr) 44px 44px;
    gap: 4px;
  }
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-mobile-toolbar button {
    border-color: transparent; background: transparent; box-shadow: none;
  }
  .v07-mobile-admin-toolbar-meta { display: flex; align-items: center; gap: 6px; min-width: 0; }
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-mobile-role {
    display: inline; flex: 0 0 auto; max-width: 60px; padding: 0;
    border: 0; background: transparent; font-size: 10px; line-height: 1.3;
  }
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-mobile-chrome > .ps-admin-mobile-actions { display: none; }
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-mobile-nav { gap: 8px; padding-bottom: 0; }
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-mobile-nav button {
    border: 0; border-bottom: 2px solid transparent; border-radius: 0; box-shadow: none; background: transparent;
    font-size: 14px;
  }
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-mobile-nav button[aria-current="page"] {
    border-bottom-color: #ad4f2f; background: transparent; box-shadow: none;
  }
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-mobile-subnav > div:not([hidden]) {
    gap: 8px; padding-bottom: 0;
  }
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-mobile-subnav button {
    padding: 6px 8px; border: 0; border-radius: 0; background: transparent; font-size: 12px;
  }
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-mobile-subnav button[aria-current="page"] {
    color: #ad4f2f; background: transparent; text-decoration: underline; text-underline-offset: 6px;
  }
  #v07AdminPanel[data-mobile-compact-ready] .v07-mobile-admin-explanation { margin: 0; }
  #v07AdminPanel[data-mobile-compact-ready] .v07-mobile-admin-explanation summary { width: fit-content; }
  #v07AdminPanel[data-mobile-compact-ready] #v07AdminAccountsSection .v07-admin-section-heading { margin-bottom: 4px; }
  #v07AdminPanel[data-mobile-compact-ready] .v07-mobile-admin-account-quick { margin: 0; gap: 8px; }
  #v07AdminPanel[data-mobile-compact-ready] .v07-mobile-admin-account-quick button {
    padding: 6px 8px; border-color: transparent; background: transparent; border-radius: 6px;
  }
  #v07AdminPanel[data-mobile-compact-ready] .v07-mobile-admin-account-quick button[aria-pressed="true"] {
    background: #fbf0e6; border-color: #d8a080;
  }
  #v07AdminPanel[data-mobile-compact-ready] #v07AdminAccountsList { gap: 0; }
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-account-row {
    display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: start;
    gap: 4px 8px; padding: 10px 0; border: 0; border-bottom: 1px solid #eee2d5;
    border-radius: 0; background: transparent;
  }
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-account-main { min-width: 0; cursor: pointer; }
  #v07AdminPanel[data-mobile-compact-ready] .v07-admin-account-main:focus-visible {
    outline: 2px solid #ad4f2f; outline-offset: 3px; border-radius: 4px;
  }
  #v07AdminPanel[data-mobile-compact-ready] .v07-mobile-admin-account-identity {
    display: flex; flex-wrap: wrap; gap: 0 6px; margin-top: 3px;
  }
  .v07-mobile-admin-account-identity span + span::before { content: "· "; }
  #v07AdminPanel[data-mobile-compact-ready] .v07-mobile-admin-account-login { margin-top: 3px; }
  #v07AdminPanel[data-mobile-compact-ready] .v07-mobile-admin-account-controls {
    display: flex; flex-direction: column-reverse; gap: 0; grid-column: 2; grid-row: 1;
  }
  #v07AdminPanel[data-mobile-compact-ready] .v07-mobile-admin-account-controls button {
    width: 44px; height: 44px; padding: 0; border: 0; background: transparent;
    color: #ad4f2f; font-size: 0;
  }
  .v07-mobile-admin-account-controls button:first-child::after { content: "›"; font-size: 24px; }
  .v07-mobile-admin-account-controls button:last-child::after { content: "⋯"; font-size: 22px; }
}
/* Isolated desktop candidate. Do not change shared/mobile calculator rules. */
@media screen and (min-width: 901px) {
  #calculator { max-width: 1560px; margin-inline: auto; }
  #calculator .calculator-layout { align-items: start; }
  #calculator .dc-single-header {
    display: grid; align-items: center;
    grid-template-columns: repeat(3, max-content) minmax(0, 1fr);
    gap: 12px 20px; padding: 18px 22px 14px;
    color: var(--ink); background: #fbf8f3;
    border-bottom: 1px solid var(--line);
  }
  #calculator .calculator-result .calc-summary { display: contents; }
  #calculator .calc-summary > :first-child { grid-column: 1 / -1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 10px; }
  #calculator .calculator-result .calc-summary h2 { grid-column: 1; margin: 0; color: var(--ink); font-size: 20px; line-height: 1.4; overflow-wrap: anywhere; }
  #calculator .calc-summary p { grid-column: 1 / -1; margin: 5px 0 0; color: var(--muted); font-size: 12px; }
  #calculator .dc-recipe-badge { grid-column: 2; grid-row: 1; display: inline-block; padding: 2px 7px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); font-size: 11px; }
  #calculator .calculator-result .summary-number {
    display: flex; align-items: baseline; gap: 7px;
    min-width: 0; padding: 0; border: 0;
  }
  #calculator .calculator-result .summary-number small { margin: 0; color: var(--muted); font-size: 12px; letter-spacing: 0; }
  #calculator .calculator-result .summary-number strong { font-size: 17px; line-height: 1.4; color: var(--ink); }
  #calculator .calculator-result .dc-total-metric strong { color: var(--rust-dark); font-weight: 750; }
  #calculator .dc-single-header .calc-single-cost-switch {
    grid-column: 4; grid-row: 2; justify-self: end; align-self: center;
    width: auto; gap: 2px; margin: 0; padding: 3px;
    border: 1px solid var(--line); border-radius: 9px; background: #f3eee7;
  }
  #calculator .dc-single-header .calc-single-cost-switch button { min-height: 32px; padding: 5px 10px; font-size: 12px; border-radius: 6px; white-space: nowrap; }
  #calculator .dc-single-header.dc-wrap-switch .calc-single-cost-switch { grid-column: 1 / -1; grid-row: 3; }
  #calculator .calculator-result .dc-total-metric strong { max-width: 250px; white-space: normal; overflow-wrap: anywhere; }
  #calculator .calculator-result table th,
  #calculator .calculator-result table td { padding: 10px 18px; line-height: 1.5; }
  #calculator #calcSingleAmountView tbody tr:not(.table-total) { height: 46px; }
  #calculator #calcSingleAmountView th,
  #calculator #calcSingleAmountView td:nth-child(2),
  #calculator #calcSingleAmountView td:nth-child(3) { color: var(--muted); font-size: 13px; }
  #calculator #calcSingleAmountView td.scaled-amount { font-size: 17px; }
  #calculator #calcSingleAmountView th:not(:first-child),
  #calculator #calcSingleAmountView td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
  #calculator #calcSingleAmountView .table-total td:last-child { color: var(--rust-dark); font-size: 17px; }
  #calculator .dc-production-note {
    grid-column: 1 / -1; grid-row: 3; margin: 0; font-size: 12px;
    line-height: 1.65; color: var(--muted); overflow-wrap: anywhere;
  }
  #calculator .dc-wrap-switch .dc-production-note { grid-row: 4; }
  #calculator .calc-portion-divider-kicker { display: none; }
  #calculator .dc-weigh-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
    padding: 10px 18px; border-bottom: 1px solid var(--line);
  }
  #calculator .dc-weigh-toolbar button { min-height: 36px; font-size: 12px; }
  #calculator .dc-weigh-toolbar button[aria-pressed="true"] { color: var(--rust-dark); border-color: var(--rust); }
  #calculator .dc-weigh-status { flex: 1; min-width: 160px; color: var(--muted); font-size: 12px; line-height: 1.6; }
  #calculator .dc-weighing tbody tr:not(.table-total) { cursor: pointer; }
  #calculator .dc-weighing tbody tr:not(.table-total):hover { background: rgba(173, 79, 47, .04); }
  #calculator .dc-weigh-check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; min-height: 30px; padding: 0; margin-right: 8px; vertical-align: middle;
    color: var(--rust-dark); font-size: 16px;
  }
  #calculator .dc-weigh-check:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }
  #calculator #calcSingleAmountView .dc-weighed td { background: rgba(92, 123, 79, .06); color: var(--muted); }
  #calculator #calcSingleAmountView .dc-weighed td.scaled-amount { color: var(--muted); }
  #calculator .dc-ingredient-note { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 400; overflow-wrap: anywhere; }
  #calculator .calculator-result .calc-footer { padding: 10px 16px; }
  #calculator .calculator-result .calc-footer button { min-height: 36px; padding: 7px 12px; font-size: 12px; }
  #calculator .calc-prep-planner { gap: 12px; padding: 18px; }
  #calculator .calc-prep-toolbar { padding: 9px 12px; }
  #calculator .calc-prep-memory { padding: 0 12px; background: var(--card); box-shadow: none; }
  #calculator .calc-prep-memory-head { min-height: 48px; padding: 10px 136px 10px 0; flex-direction: row; align-items: center; }
  #calculator .calc-prep-memory-head::before,
  #calculator .calc-prep-memory-head .calc-prep-kicker,
  #calculator .calc-prep-memory-head p { display: none; }
  #calculator .calc-prep-memory-head h3 { margin: 0; font-size: 14px; }
  #calculator .calc-prep-memory-head::after { content: "保存 / 恢复 ▾"; width: auto; height: auto; padding: 6px 10px; border-radius: 8px; font-size: 12px; }
  #calculator .calc-prep-memory[open] .calc-prep-memory-head::after { content: "收起方案 ▴"; }
  #calculator .calc-prep-memory-create { padding-bottom: 10px; }
  #calculator .calc-prep-memory-list { padding-bottom: 12px; }
  #calculator .calc-prep-rows { gap: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
  #calculator .calc-prep-row {
    grid-template-columns: minmax(240px, 1fr) minmax(210px, .7fr) 120px;
    align-items: center; gap: 14px; padding: 12px 48px 12px 14px;
    border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
    background: transparent; box-shadow: none;
  }
  #calculator .calc-prep-row:last-child { border-bottom: 0; }
  #calculator .calc-prep-row::before,
  #calculator .calc-prep-row-head > .calc-prep-row-label { display: none; }
  #calculator .calc-prep-row-main { gap: 0; }
  #calculator .calc-prep-row-head { height: 0; }
  #calculator .calc-prep-remove { position: absolute; right: 10px; top: 34px; }
  #calculator .calc-prep-row-params { padding: 0; border: 0; background: transparent; }
  #calculator .calc-prep-row select,
  #calculator .calc-prep-row input { min-height: 40px; font-size: 13px; }
  #calculator .calc-prep-row-label { font-size: 11px; }
  #calculator .dc-row-result { display: grid; gap: 5px; font-variant-numeric: tabular-nums; }
  #calculator .dc-row-result small { color: var(--muted); font-size: 11px; }
  #calculator .dc-row-result strong { color: var(--rust-dark); font-size: 16px; white-space: nowrap; }
  #calculator .dc-row-result span { color: var(--muted); font-size: 11px; }
  #calculator .calc-prep-summary { padding: 10px 14px; }
  #calculator .calc-prep-view-switch {
    position: sticky; top: 82px; z-index: 12; min-height: 46px;
    flex-wrap: wrap; gap: 4px; background: var(--card, #fffdf8);
    box-shadow: 0 3px 9px rgba(69, 51, 34, .08);
  }
  #calculator .dc-actions { display: flex; gap: 6px; margin-left: auto; align-items: center; }
  #calculator .dc-actions button { min-height: 34px; padding: 6px 10px; font-size: 12px; }
  #calculator .calc-prep-table-actions [data-calc-prep-edit] { display: none; }
  #calculator .calc-prep-detail-card-head { padding: 14px 16px; }
  #calculator .calc-prep-detail-card-head strong,
  #calculator .calc-prep-cost-card-head strong { font-size: 16px; }
  #calculator .dc-summary { display: block; margin-top: 7px; color: var(--rust-dark); font-size: 13px; font-variant-numeric: tabular-nums; }
  #calculator .dc-detail-toggle { margin-left: auto; flex-shrink: 0; }
  #calculator .dc-collapsed > .calc-prep-cost-kpis,
  #calculator .dc-collapsed > .table-wrap { display: none; }
  #calculator .calc-prep-detail-hint { display: none; }
  #calculator .calc-prep-cost-card-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
  #calculator .calc-prep-cost-card-head > div { flex: 1; min-width: 0; }
  #calculator .calc-prep-cost-overview { padding: 14px; }
  #calculator .calc-prep-cost-overview-main .calc-prep-kicker { display: none; }
  #calculator .calc-prep-detail-body td:not(:first-child),
  #calculator .calc-prep-detail-body th:not(:first-child),
  #calculator .calc-prep-cost-table td:nth-child(2),
  #calculator .calc-prep-cost-table th:nth-child(2),
  #calculator .calc-prep-cost-table td:last-child,
  #calculator .calc-prep-cost-table th:last-child,
  #calculator #calcPrepAggregateView td:nth-child(2),
  #calculator #calcPrepAggregateView th:nth-child(2) { text-align: right; font-variant-numeric: tabular-nums; }
  #calculator .dc-normal-status td:last-child { color: transparent; font-size: 0; }
  #calculator .dc-all-normal th:last-child,
  #calculator .dc-all-normal tbody > tr:not(.calc-prep-source-breakdown) > td:last-child { display: none; }
  #calculator .dc-all-normal th:first-child { width: 35%; }
  #calculator .dc-all-normal th:nth-child(2) { width: 25%; }
  #calculator .dc-all-normal th:nth-child(3) { width: 40%; }
  #calculator .calculator-controls .calc-note { border-color: var(--line); background: var(--paper, #f7f4ee); color: var(--muted); }
  #calculator .calculator-controls .quick-button.dc-selected { border-color: var(--rust); color: var(--rust-dark); background: rgba(173, 79, 47, .09); }
}
@media screen and (min-width: 1181px) {
  #calculator .calculator-layout { grid-template-columns: minmax(320px, 380px) minmax(0, 1fr); }
}
@media screen and (min-width: 901px) and (max-width: 1400px) {
  #calculator .dc-single-header { gap: 10px; padding-inline: 16px; }
  #calculator .calculator-result .summary-number { gap: 5px; }
  #calculator .dc-single-header .calc-single-cost-switch button { padding-inline: 7px; }
}
@media screen and (min-width: 901px) and (max-width: 1180px) {
  #calculator .calculator-layout { grid-template-columns: minmax(0, 1fr); }
  #calculator .calc-prep-row { grid-template-columns: minmax(0, 1fr) minmax(180px, .8fr); gap: 10px; }
  #calculator .dc-row-result { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; }
  #calculator .calc-prep-view-switch { top: 82px; }
}
@media screen and (min-width: 1181px) and (min-height: 800px) {
  #calculator .calculator-controls { position: sticky; align-self: start; top: 98px; }
}
@media print {
  #calculator [data-dc-owned]:not(.dc-single-header) { display: none !important; }
  #calculator .dc-collapsed > .table-wrap,
  #calculator .dc-collapsed > .calc-prep-cost-kpis { display: block !important; }
}
/* Desktop candidate only. No declarations apply at the mobile boundary. */
@media (min-width: 901px) {
  html[data-release-channel="cloud"] {
    --sidebar: 240px;
  }

  html[data-release-channel="cloud"] .sidebar .nav-button {
    min-height: 42px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  html[data-release-channel="cloud"] .sidebar .brand-copy small {
    font-size: 10px;
    white-space: nowrap;
  }

  html[data-release-channel="cloud"] .topbar {
    gap: 12px;
    padding-right: 24px;
    padding-left: 24px;
  }

  html[data-release-channel="cloud"] .topbar .search-box {
    flex: 1 1 360px;
    width: auto;
    min-width: 120px;
    max-width: 620px;
  }

  html[data-release-channel="cloud"] .top-actions {
    flex: 0 0 auto;
    gap: 8px;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .top-actions > .primary-button,
  html[data-release-channel="cloud"]:has(#dashboard.view.active) #todayText {
    display: none;
  }

  html[data-release-channel="cloud"]:has(#dashboard.view.active) .content {
    max-width: 1600px;
    padding: 24px clamp(24px, 2.4vw, 36px) 48px;
  }

  html[data-release-channel="cloud"] .wb-home {
    gap: 24px;
  }

  html[data-release-channel="cloud"] .wb-home .wb-heading {
    gap: 16px;
    padding: 0 0 4px;
  }

  html[data-release-channel="cloud"] .wb-home .wb-heading h1 {
    margin: 3px 0 5px;
    font-size: 28px;
  }

  html[data-release-channel="cloud"] .wb-home .wb-heading p {
    margin: 0;
  }

  html[data-release-channel="cloud"] .wb-home .wb-dashboard-main {
    grid-template-columns: minmax(0, 1.8fr) minmax(240px, 1fr);
    grid-template-areas: "recent attention" "recent prep";
    grid-template-rows: auto 1fr;
    gap: 20px 32px;
    align-items: start;
  }

  html[data-release-channel="cloud"] .wb-home #wbRecentPanel { grid-area: recent; }
  html[data-release-channel="cloud"] .wb-home #wbAttentionPanel { grid-area: attention; }
  html[data-release-channel="cloud"] .wb-home #wbPrepPanel { grid-area: prep; }

  html[data-release-channel="cloud"] .wb-home .wb-panel {
    padding: 18px 0 0;
    border: 0;
    border-top: 1px solid var(--line, #e8ded2);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  html[data-release-channel="cloud"] .wb-home #wbRecentPanel {
    padding-right: 28px;
    border-right: 1px solid var(--line, #e8ded2);
  }

  html[data-release-channel="cloud"] .wb-home .wb-section-icon,
  html[data-release-channel="cloud"] .wb-home .wb-summary-icon {
    display: none;
  }

  html[data-release-channel="cloud"] .wb-home .wb-section-count,
  html[data-release-channel="cloud"] .wb-home #wbUpcomingCount {
    margin-left: 8px;
    color: var(--muted, #81766a);
    font-size: 12px;
    font-weight: 400;
  }

  html[data-release-channel="cloud"] .wb-home .wb-section-head {
    gap: 10px;
    margin-bottom: 12px;
  }

  html[data-release-channel="cloud"] .wb-home h2 {
    font-size: 18px;
  }

  html[data-release-channel="cloud"] .wb-home .wb-section-head > button {
    padding: 5px 0;
    border: 0;
    color: var(--muted, #81766a);
    background: transparent;
    font-size: 12px;
    white-space: nowrap;
  }

  html[data-release-channel="cloud"] .wb-home .wb-recent-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  html[data-release-channel="cloud"] .wb-home .wb-recent-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 115px auto;
    align-items: center;
    gap: 12px;
    min-height: 62px;
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid var(--line, #e8ded2);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  html[data-release-channel="cloud"] .wb-home .wb-recent-card:last-child {
    border-bottom: 0;
  }

  html[data-release-channel="cloud"] .wb-home .wb-recent-card:hover {
    background: var(--paper-deep, #f7eee5);
  }

  html[data-release-channel="cloud"] .wb-home .wb-recent-kicker {
    display: none;
  }

  html[data-release-channel="cloud"] .wb-home .wb-recent-card > strong {
    display: block;
    min-height: 0;
    overflow: hidden;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html[data-release-channel="cloud"] .wb-home .wb-recent-card > small,
  html[data-release-channel="cloud"] .wb-home .wb-recent-card .wb-row-actions {
    margin: 0;
  }

  html[data-release-channel="cloud"] .wb-home .wb-recipe > small,
  html[data-release-channel="cloud"] .wb-home .wb-empty,
  html[data-release-channel="cloud"] .wb-home .wb-empty-note {
    color: var(--muted, #81766a);
  }

  html[data-release-channel="cloud"] .wb-home .wb-recent-card .wb-recent-primary {
    min-height: 32px;
    padding: 6px 10px;
    border-color: var(--line, #e8ded2);
    color: var(--rust, #a65332);
    background: transparent;
    box-shadow: none;
    font-size: 12px;
  }

  html[data-release-channel="cloud"] .wb-home .wb-recent-card .wb-recent-primary:hover {
    background: var(--paper-deep, #f7eee5);
  }

  html[data-release-channel="cloud"] .wb-home #wbPrepPanel > .wb-today-label {
    display: none;
  }

  html[data-release-channel="cloud"] .wb-home #wbPrep .wb-summary-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 8px 10px;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
  }

  html[data-release-channel="cloud"] .wb-home #wbPrep .wb-summary-copy {
    display: grid;
    min-width: 0;
    gap: 5px;
  }

  html[data-release-channel="cloud"] .wb-home #wbPrep .wb-summary-copy strong {
    font-size: 17px;
  }

  html[data-release-channel="cloud"] .wb-home #wbPrep .wb-summary-copy small {
    color: var(--muted, #81766a);
    font-size: 12px;
    line-height: 1.6;
    overflow-wrap: anywhere;
  }

  html[data-release-channel="cloud"] .wb-home #wbPrep .wb-summary-trailing,
  html[data-release-channel="cloud"] .wb-home #wbPrep .wb-summary-action {
    grid-column: 1;
    justify-self: start;
    color: var(--rust, #a65332);
    font-size: 12px;
  }

  html[data-release-channel="cloud"] .wb-home .wb-attention-actions button {
    padding: 6px 8px;
    font-size: 12px;
  }

  html[data-release-channel="cloud"] .wb-home .wb-attention-event .wb-event-copy strong {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  html[data-release-channel="cloud"] .wb-desktop-status {
    display: inline-block;
    margin-top: 4px;
    color: var(--rust, #a65332);
    font-size: 11px;
    font-weight: 700;
  }

  html[data-release-channel="cloud"] .wb-home .wb-favorites {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 24px;
  }

  html[data-release-channel="cloud"] .wb-home .wb-favorite-card {
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid var(--line, #e8ded2);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  html[data-release-channel="cloud"] .wb-home .wb-favorite-card > strong {
    font-size: 15px;
    line-height: 1.4;
  }

  html[data-release-channel="cloud"] .wb-home .wb-favorite-card .wb-row-actions {
    gap: 5px;
  }

  html[data-release-channel="cloud"] .wb-home .wb-favorite-card .wb-row-actions button {
    padding: 5px 8px;
    font-size: 12px;
  }

  /* The maintained renderer supplies mobile summary titles/filters too.
     Desktop already has section headings and a range filter: display each once,
     without replacing live nodes or their delegated actions. */
  html[data-release-channel="cloud"] .wb-home #wbAttention > .wb-summary-row,
  html[data-release-channel="cloud"] .wb-home #wbFavorites > .wb-summary-row,
  html[data-release-channel="cloud"] .wb-home #wbUpcoming > .wb-summary-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    min-height: 42px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  html[data-release-channel="cloud"] .wb-home #wbFavorites > .wb-summary-row {
    grid-column: 1 / -1;
  }

  html[data-release-channel="cloud"] .wb-home #wbAttention .wb-summary-copy,
  html[data-release-channel="cloud"] .wb-home #wbFavorites .wb-summary-copy,
  html[data-release-channel="cloud"] .wb-home #wbUpcoming .wb-summary-copy {
    display: block;
    flex: 1 1 160px;
    min-width: 0;
  }

  html[data-release-channel="cloud"] .wb-home #wbAttention .wb-summary-copy strong,
  html[data-release-channel="cloud"] .wb-home #wbFavorites .wb-summary-copy strong,
  html[data-release-channel="cloud"] .wb-home #wbUpcoming .wb-summary-copy strong,
  html[data-release-channel="cloud"] .wb-home #wbFavorites .wb-summary-action,
  html[data-release-channel="cloud"] .wb-home .wb-summary-controls label,
  html[data-release-channel="cloud"] .wb-home .wb-summary-controls select {
    display: none;
  }

  html[data-release-channel="cloud"] .wb-home .wb-summary-copy small {
    color: var(--muted, #81766a);
    font-size: 13px;
    line-height: 1.6;
    overflow-wrap: anywhere;
  }

  html[data-release-channel="cloud"] .wb-home .wb-summary-controls {
    display: flex;
    align-items: center;
  }

  html[data-release-channel="cloud"] .wb-home .wb-summary-action,
  html[data-release-channel="cloud"] .wb-home #wbPrep .wb-summary-action,
  html[data-release-channel="cloud"] .wb-home .wb-attention-actions button {
    min-height: 32px;
    padding: 6px 0;
    border: 0;
    color: var(--rust, #a65332);
    background: transparent;
    box-shadow: none;
    font-size: 12px;
    white-space: nowrap;
  }

  html[data-release-channel="cloud"] .wb-home .wb-empty-state {
    padding: 10px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  html[data-release-channel="cloud"] .wb-home .wb-event {
    margin: 0;
    padding: 11px 0;
    border: 0;
    border-bottom: 1px solid var(--line, #e8ded2);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  html[data-release-channel="cloud"] .wb-home .wb-event:hover {
    background: var(--paper-deep, #f7eee5);
  }

  html[data-release-channel="cloud"] .wb-home .wb-material-alert {
    padding-right: 8px;
    padding-left: 8px;
    background: var(--paper-deep, #f7eee5);
  }

  html[data-release-channel="cloud"] .wb-home button:focus-visible,
  html[data-release-channel="cloud"] .wb-home select:focus-visible {
    outline: 2px solid var(--rust, #a65332);
    outline-offset: 3px;
  }

  .wb-desktop-display {
    position: relative;
    flex: 0 0 auto;
  }

  .wb-desktop-display > summary {
    padding: 9px 12px;
    border: 1px solid var(--line, #e8ded2);
    border-radius: 12px;
    background: var(--card, #fffdf9);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
  }

  .wb-desktop-display > summary::-webkit-details-marker { display: none; }
  .wb-desktop-display > summary::after { content: " ⌄"; }
  .wb-desktop-display > summary:focus-visible {
    outline: 2px solid var(--rust, #a65332);
    outline-offset: 3px;
  }

  .wb-desktop-display-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    display: grid;
    gap: 6px;
    width: 180px;
    padding: 10px;
    border: 1px solid var(--line, #e8ded2);
    border-radius: 14px;
    background: var(--card, #fffdf9);
    box-shadow: var(--shadow, 0 12px 28px #49392618);
  }

  .wb-desktop-display-menu > button {
    width: 100%;
    justify-content: flex-start;
    margin: 0;
    white-space: nowrap;
  }
}

@media (min-width: 901px) and (max-width: 1199px) {
  html[data-release-channel="cloud"] .wb-home .wb-recent-card {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title action" "date action";
    gap: 3px 8px;
  }
  html[data-release-channel="cloud"] .wb-home .wb-recent-card > strong { grid-area: title; }
  html[data-release-channel="cloud"] .wb-home .wb-recent-card > small { grid-area: date; }
  html[data-release-channel="cloud"] .wb-home .wb-recent-card .wb-row-actions { grid-area: action; }
  html[data-release-channel="cloud"] .wb-home .wb-heading { align-items: flex-start; }
  html[data-release-channel="cloud"] .wb-home .wb-heading-actions { max-width: 220px; justify-content: flex-end; }
  html[data-release-channel="cloud"] .wb-home .wb-panel { padding-top: 15px; }
  html[data-release-channel="cloud"] .wb-home #wbRecentPanel { padding-right: 18px; }
  html[data-release-channel="cloud"] .wb-home .wb-dashboard-main { column-gap: 20px; }
  html[data-release-channel="cloud"] .wb-home .wb-favorites { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1600px) {
  html[data-release-channel="cloud"] .wb-home .wb-favorites {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Keep the retained Android download/account actions within narrow desktops. */
@media (min-width: 901px) and (max-width: 1200px) {
  html[data-release-channel="cloud"] .topbar { flex-wrap: wrap; }
  html[data-release-channel="cloud"] .topbar .search-box { flex-basis: 180px; }
  html[data-release-channel="cloud"] .top-actions { max-width: 100%; flex-wrap: wrap; }
}
/* Owned desktop layer; phone selectors and layout are deliberately untouched. */
.dmc-stat-label, .dmc-toolbar, .dmc-head-copy, .dmc-stats .dmc-button, .dmc-unit-note { display: none; }
@media (min-width: 901px) {
  #costMaterialsPanel > .page-header { margin-bottom: 16px; }
  #costMaterialsPanel > .page-header h1 { margin-bottom: 5px; }
  #costMaterialsPanel .dmc-stats {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px;
    margin-bottom: 16px; padding: 12px 16px;
    border: 1px solid var(--line); border-radius: 13px; background: var(--card);
  }
  #costMaterialsPanel .dmc-stats .cost-stat { display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; }
  #costMaterialsPanel .dmc-stats small { display: none; }
  #costMaterialsPanel .dmc-stat-label { display: inline; color: var(--muted); font-size: 12px; }
  #costMaterialsPanel .dmc-stats strong { font-family: inherit; font-size: 20px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
  #costMaterialsPanel .dmc-stats .dmc-button { display: inline-flex; padding: 4px 9px; min-height: 28px; }
  #costMaterialsPanel .material-public-catalog { margin-bottom: 16px; padding: 0; }
  #costMaterialsPanel .material-public-catalog-head { padding: 14px 18px; gap: 14px; }
  #costMaterialsPanel .material-public-catalog-kicker { display: none; }
  #costMaterialsPanel .material-public-catalog-copy h3 { margin: 0 0 4px; font-size: 16px; }
  #costMaterialsPanel .material-public-catalog-copy p { margin: 0; font-size: 11px; font-weight: 400; }
  #costMaterialsPanel .material-public-catalog-actions { flex-shrink: 0; gap: 8px; }
  #costMaterialsPanel .material-public-catalog-actions > span { font-size: 10px; }
  #costMaterialsPanel .material-public-catalog-actions button { min-height: 34px; padding: 7px 12px; font-size: 11px; }
  #costMaterialsPanel .price-library-head { padding: 16px 18px; gap: 14px; }
  #costMaterialsPanel .price-library-head h3 { font-size: 20px; }
  #costMaterialsPanel .price-library-head p:not(.dmc-head-copy) { display: none; }
  #costMaterialsPanel .price-library-head .dmc-head-copy { display: block; margin: 3px 0 0; font-size: 11px; }
  #costMaterialsPanel .v07-material-mobile-public { display: none !important; }
  #costMaterialsPanel .dmc-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 18px; border-bottom: 1px solid var(--line); }
  #costMaterialsPanel .dmc-filters { display: flex; flex-wrap: wrap; gap: 6px; }
  #costMaterialsPanel .dmc-button {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 32px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 9px;
    background: var(--card); color: var(--ink); font: inherit; font-size: 11px; cursor: pointer; white-space: nowrap;
  }
  #costMaterialsPanel .dmc-button[hidden] { display: none; }
  #costMaterialsPanel .dmc-button:hover { border-color: var(--rust); background: rgba(163,77,46,.05); }
  #costMaterialsPanel .dmc-button:focus-visible, #costMaterialsPanel .dmc-management > summary:focus-visible,
  #costMaterialsPanel .dmc-more > summary:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }
  #costMaterialsPanel .dmc-filters [aria-pressed="true"] { border-color: rgba(163,77,46,.3); background: rgba(163,77,46,.09); color: var(--rust-dark); font-weight: 700; }
  #costMaterialsPanel .dmc-result { color: var(--muted); font-size: 11px; }
  #costMaterialsPanel .dmc-toolbar > [data-dmc-action="density"] { margin-left: auto; }
  #costMaterialsPanel .price-table { min-width: 950px; }
  #costMaterialsPanel .price-table th, #costMaterialsPanel .price-sort-button span { white-space: nowrap; }
  #costMaterialsPanel .price-table th:first-child, #costMaterialsPanel .price-table td:first-child { width: 230px; }
  #costMaterialsPanel .price-table th:nth-child(2), #costMaterialsPanel .price-table td:nth-child(2) { width: 215px; }
  #costMaterialsPanel .price-table th:last-child, #costMaterialsPanel .price-table td:last-child { width: 130px; }
  #costMaterialsPanel .material-group-main { min-width: 210px; }
  #costMaterialsPanel .material-group-row td { padding-top: 12px; padding-bottom: 12px; border-top-width: 3px; }
  #costMaterialsPanel .material-group-row:first-child td { border-top-width: 0; }
  #costMaterialsPanel .material-group-row .material-image-upload-action,
  #costMaterialsPanel .material-group-alias-empty,
  #costMaterialsPanel .material-group-row .price-unit-value small,
  #costMaterialsPanel .material-group-row .material-current-badge { display: none; }
  #costMaterialsPanel .material-group-aliases:has(.material-group-alias-empty) { display: none; }
  #costMaterialsPanel .material-group-row .material-price-image-editor { flex-basis: 52px; width: 52px; }
  #costMaterialsPanel .material-group-row .material-image-preview-trigger,
  #costMaterialsPanel .material-group-row .material-image-control.compact { width: 48px; height: 48px; flex-basis: 48px; }
  #costMaterialsPanel .material-current-product strong { font-weight: 500; }
  #costMaterialsPanel .material-group-row td:nth-child(4),
  #costMaterialsPanel .material-group-row td:nth-child(5),
  #costMaterialsPanel .material-product-row td:nth-child(3),
  #costMaterialsPanel .material-product-row td:nth-child(4) { text-align: right; font-variant-numeric: tabular-nums; }
  #costMaterialsPanel .price-table th:nth-child(4), #costMaterialsPanel .price-table th:nth-child(5) { text-align: right; }
  #costMaterialsPanel .price-table th:nth-child(4) .price-sort-button,
  #costMaterialsPanel .price-table th:nth-child(5) .price-sort-button { margin-left: auto; }
  #costMaterialsPanel .dmc-unit-note { display: inline; font-size: 11px; font-weight: 400; color: var(--muted); line-height: 1.4; }
  #costMaterialsPanel .dmc-unit-note[hidden] { display: none; }
  #costMaterialsPanel .dmc-management { border: 1px solid var(--line); border-radius: 10px; }
  #costMaterialsPanel .dmc-management > summary { padding: 10px 12px; cursor: pointer; font-size: 11px; color: var(--muted); }
  #costMaterialsPanel .material-group-editor-row td { padding: 0 14px 10px; text-align: left; }
  #costMaterialsPanel .material-add-product-row td { text-align: left; }
  #costMaterialsPanel .material-group-editor { border: 0; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; box-shadow: none; background: rgba(245,240,230,.35); grid-template-columns: minmax(180px,1fr) minmax(200px,1.4fr) auto; }
  #costMaterialsPanel .material-group-editor::before { display: none; }
  #costMaterialsPanel .material-group-editor p { grid-column: 1 / 3; grid-row: 2; padding: 0; background: none; }
  #costMaterialsPanel .material-delete-group { grid-column: 3; grid-row: 1 / 3; }
  #costMaterialsPanel .dmc-reading .material-image-upload-action,
  #costMaterialsPanel .dmc-reading .material-image-reuse-button,
  #costMaterialsPanel .dmc-reading .price-unit-value small { display: none; }
  #costMaterialsPanel .dmc-reading .material-product-image-editor { width: 52px; flex-basis: 52px; }
  #costMaterialsPanel .dmc-reading .material-image-preview-trigger,
  #costMaterialsPanel .dmc-reading .material-image-control.compact { width: 44px; height: 44px; flex-basis: 44px; }
  #costMaterialsPanel .dmc-product-copy { min-width: 0; }
  #costMaterialsPanel .dmc-product-copy strong { white-space: normal; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; }
  #costMaterialsPanel .dmc-save-hint { font-size: 10px; color: var(--muted); font-weight: 400; }
  #costMaterialsPanel .dmc-product-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
  #costMaterialsPanel .dmc-more { position: relative; }
  #costMaterialsPanel .dmc-more > summary { cursor: pointer; color: var(--muted); padding: 8px 0; font-size: 11px; white-space: nowrap; }
  #costMaterialsPanel .dmc-more-menu { display: grid; justify-items: end; gap: 8px; margin: 5px 0; }
  #costMaterialsPanel .dmc-more .material-contribute-button { padding: 6px 8px; font-size: 10px; white-space: normal; }
  #costMaterialsPanel .dmc-more .price-delete { margin: 0; font-size: 10px; }
  #costMaterialsPanel.dmc-compact .material-group-row td { padding-top: 7px; padding-bottom: 7px; }
  #costMaterialsPanel.dmc-compact .material-group-row .material-image-preview-trigger,
  #costMaterialsPanel.dmc-compact .material-group-row .material-image-control.compact { width: 36px; height: 36px; flex-basis: 36px; }
  #costMaterialsPanel.dmc-compact .material-group-copy { gap: 3px; }
}
@media (min-width: 901px) and (max-width: 1200px) {
  #costMaterialsPanel .material-public-catalog-head { flex-wrap: wrap; }
  #costMaterialsPanel .material-public-catalog-actions { flex-wrap: wrap; }
  #costMaterialsPanel .price-library-head { flex-wrap: wrap; }
  #costMaterialsPanel .material-search-history-wrap { flex: 1 1 280px; }
  #costMaterialsPanel #priceSearch { width: 100%; }
}
/* All styles belong to the desktop materials view, never to phone/dialogs. */
@media (min-width: 901px) {
  #materials .lab-material-layout { align-items: start; }
  #materials .lab-panel { min-width: 0; }
  #materials #labMaterialSummary { gap: 12px; }
  #materials .dmw-metric-slot {
    display: flex; flex-direction: column; min-width: 0; overflow: hidden;
    border: 1px solid rgba(92, 73, 60, .1); border-radius: 17px;
    background: var(--card, #fffdf9);
  }
  #materials .dmw-metric-slot .lab-metric-card {
    display: flex; flex: 1; flex-direction: column; align-items: flex-start;
    min-height: 130px; width: 100%; padding: 16px 18px 12px;
    border: 0; border-radius: 0; text-align: left; box-shadow: none;
  }
  #materials .dmw-metric-slot .lab-metric-card strong { font-size: 30px; line-height: 1.15; }
  #materials .dmw-metric-slot .lab-metric-card small { font-size: 12px; font-weight: 750; }
  #materials .dmw-metric-slot .lab-metric-card p { margin: 7px 0 0; font-size: 11px; line-height: 1.5; }
  #materials .dmw-metric-context { margin: 9px 0 3px; color: var(--muted); font-size: 10px; }
  #materials .dmw-metric-footer {
    display: flex; align-items: center; min-height: 39px; padding: 6px 18px;
    border-top: 1px solid rgba(92, 73, 60, .07); color: var(--muted); font-size: 10px;
  }
  #materials .dmw-metric-footer .dmw-button { padding: 3px 0; min-height: 26px; border: 0; background: none; }
  #materials .lab-panel-title > button,
  #materials .dmw-button,
  #materials .lab-alert-action,
  #materials .lab-table-actions > button,
  #materials .dmw-more summary {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    min-height: 32px; padding: 6px 11px; border: 1px solid rgba(173, 79, 47, .2);
    border-radius: 9px; color: var(--rust-dark, #8f4935); background: #fffdf9;
    font: inherit; font-size: 11px; font-weight: 650; line-height: 1.4;
    white-space: nowrap; cursor: pointer;
  }
  #materials .dmw-button.is-primary,
  #materials .dmw-record-actions .dmw-action-primary {
    border-color: var(--rust, #ad4f2f); color: #fffaf4; background: var(--rust, #ad4f2f);
  }
  #materials .lab-panel-title > button:hover,
  #materials .dmw-button:hover,
  #materials .lab-alert-action:hover,
  #materials .lab-table-actions > button:hover,
  #materials .dmw-more summary:hover { filter: brightness(.96); }
  #materials button:focus-visible, #materials summary:focus-visible {
    outline: 2px solid var(--rust, #ad4f2f); outline-offset: 3px;
  }
  #materials .dmw-alert-section { display: grid; min-width: 0; gap: 9px; }
  #materials .dmw-alert-section + .dmw-alert-section {
    margin-top: 10px; padding-top: 14px; border-top: 1px solid rgba(92, 73, 60, .1);
  }
  #materials .dmw-section-heading h3 { margin: 0; font-size: 13px; color: var(--ink-soft); }
  #materials .dmw-section-heading h3 small { margin-left: 6px; font-size: 10px; font-weight: 500; color: var(--muted); }
  #materials .dmw-section-heading p { margin: 4px 0 2px; color: var(--muted); font-size: 10px; line-height: 1.5; }
  #materials .dmw-record { display: block; padding: 13px 14px; background: rgba(250, 246, 239, .6); }
  #materials .dmw-record.danger { border-left: 3px solid #b7583b; }
  #materials .dmw-record.warning { border-left: 3px solid #b8893e; }
  #materials .dmw-record-heading { display: flex; align-items: center; gap: 10px; }
  #materials .dmw-record-heading > div { flex: 1; min-width: 0; }
  #materials .dmw-record-heading strong { color: var(--ink-soft); font-size: 13px; overflow-wrap: anywhere; }
  #materials .dmw-record-heading small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
  #materials .dmw-record-count { flex-shrink: 0; color: var(--muted); font-size: 10px; }
  #materials .dmw-badges { display: flex; flex-wrap: wrap; gap: 5px; margin: 9px 0; }
  #materials .dmw-primary-detail,
  #materials .dmw-details { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.65; overflow-wrap: anywhere; }
  #materials .dmw-details { margin-top: 6px; }
  #materials .dmw-details summary { cursor: pointer; color: var(--rust-dark); }
  #materials .dmw-details ul { margin: 7px 0 0; padding-left: 18px; }
  #materials .dmw-details li + li { margin-top: 5px; }
  #materials .dmw-record-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; margin-top: 11px; }
  #materials .dmw-bulk-toolbar { margin: 4px 0 0; padding: 10px 0 0; border-top: 1px dashed rgba(92, 73, 60, .15); }
  #materials .dmw-demand-empty-content { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px; text-align: left; }
  #materials .dmw-demand-empty-content strong { font-size: 13px; color: var(--ink-soft); }
  #materials .dmw-demand-empty-content p { margin: 0; font-size: 11px; line-height: 1.7; }
  #materials .lab-table { min-width: 900px; }
  #materials .lab-inventory-panel .lab-table th { white-space: nowrap; }
  #materials .lab-inventory-panel .lab-table th:last-child { min-width: 110px; }
  #materials .lab-inventory-panel .lab-table td { vertical-align: middle; }
  #materials .lab-inventory-panel td:nth-child(3) .dmw-button,
  #materials .lab-inventory-panel td:nth-child(4) .dmw-button { margin-top: 5px; min-height: 27px; padding: 3px 8px; }
  #materials .lab-inventory-panel td:nth-child(3) .dmw-cell-muted { display: block; }
  #materials .dmw-cell-muted { color: var(--muted); font-size: 10px; }
  #materials .dmw-quantity-step { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
  #materials .lab-table-actions { display: flex; justify-content: flex-end; flex-wrap: nowrap; gap: 6px; }
  #materials .dmw-more { position: relative; }
  #materials .dmw-more summary { list-style: none; }
  #materials .dmw-more summary::-webkit-details-marker { display: none; }
  #materials .dmw-more-content {
    position: relative; display: grid; margin-top: 5px; padding: 4px;
    border: 1px solid rgba(92, 73, 60, .13); border-radius: 9px; background: #fffdf9;
  }
  #materials .dmw-more-content button {
    min-height: 30px; padding: 5px 9px; border: 0; border-radius: 6px;
    color: #a44232; background: #fcf0eb; font: inherit; font-size: 11px; cursor: pointer;
  }
  #materials .lab-assessment-panel.is-empty .lab-assessment-note,
  #materials .lab-assessment-panel.is-empty .lab-assessment-summary,
  #materials .lab-assessment-panel.is-empty .lab-assessment-actions,
  #materials .lab-assessment-panel.is-empty thead { display: none; }
  #materials .lab-assessment-panel.is-empty .lab-assessment-table { min-width: 0; }
  #materials .lab-assessment-panel.is-empty .lab-assessment-empty {
    display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-start;
    gap: 8px 14px; padding: 16px; text-align: left;
  }
  #materials .lab-assessment-panel.is-empty .lab-assessment-empty strong { display: none; }
  #materials .lab-assessment-panel.is-empty .lab-assessment-empty .lab-empty-action { margin-left: auto; }
  #materials .lab-assessment-panel:not(.is-empty) .lab-assessment-table td:nth-child(4) > strong,
  #materials .lab-assessment-panel:not(.is-empty) .lab-assessment-table td:nth-child(6) > strong { color: var(--rust-dark); font-size: 15px; }
}
/* Flat desktop preparation list. Mobile and dialog styles are untouched. */
@media (min-width: 901px) {
  #tools .recipe-tools-workbench-jump-nav { display: none; }
  #tools .recipe-tools-workbench-header { margin-bottom: 18px; }
  #tools .recipe-tools-workbench-header > button { flex-shrink: 0; white-space: nowrap; }
  #tools .recipe-tools-workbench-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    margin: 0 0 16px;
    border-bottom: 1px solid var(--line);
  }
  #tools .recipe-tools-workbench-summary-card {
    display: flex;
    align-items: center;
    gap: 9px;
    width: auto;
    min-height: 44px;
    padding: 10px 2px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
    transition: color .15s ease, border-color .15s ease;
  }
  #tools .recipe-tools-workbench-summary-card small { font-size: 13px; font-weight: 600; }
  #tools .recipe-tools-workbench-summary-card strong { margin: 0; font-size: 16px; font-weight: 700; }
  #tools .recipe-tools-workbench-summary-card.is-active { border-bottom-color: var(--rust); }
  #tools .recipe-tools-workbench-summary-card.is-active small,
  #tools .recipe-tools-workbench-summary-card.is-active strong,
  #tools .recipe-tools-workbench-summary-card:hover small { color: var(--rust); }
  #tools .recipe-tools-workbench-toolbar {
    grid-template-columns: minmax(160px, 1fr) 150px 160px auto;
    gap: 12px;
    padding: 0;
    margin: 0 0 26px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  #tools .recipe-tools-workbench-search > span,
  #tools .recipe-tools-workbench-filter > span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  #tools .recipe-tools-workbench-search input,
  #tools .recipe-tools-workbench-filter select { border-radius: 8px; background: #fffdfa; }
  #tools .recipe-tools-workbench-count { margin: 0; align-self: center; }
  #tools .recipe-tools-workbench-library {
    padding: 0;
    margin-bottom: 24px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  #tools .recipe-tools-workbench-library-head { margin-bottom: 12px; align-items: center; }
  #tools .desktop-prep-layout-switch {
    display: inline-flex;
    flex-shrink: 0;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: transparent;
  }
  #tools .desktop-prep-layout-switch button {
    min-width: 52px;
    min-height: 30px;
    padding: 5px 10px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
  }
  #tools .desktop-prep-layout-switch button[aria-pressed="true"] {
    background: rgba(181, 78, 42, .09);
    color: var(--rust);
    font-weight: 700;
  }
  #tools .desktop-prep-layout-switch button:hover { color: var(--rust); }
  #tools .recipe-tools-workbench-library-key,
  #tools .recipe-tools-workbench-library-head .recipe-tools-workbench-kicker,
  #tools .recipe-tools-workbench-library-head p { display: none; }
  #tools .recipe-tools-workbench-library-head h2 { margin: 0; font-size: 18px; }
  #tools .recipe-tools-workbench-workspace-badge {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    font-weight: 400;
  }
  #tools .desktop-prep-list-head,
  #tools .recipe-tool-workbench-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px 104px;
    gap: 20px;
    align-items: center;
    padding: 12px 8px;
  }
  #tools .desktop-prep-list-head {
    padding-top: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
  }
  #tools .desktop-prep-list-head span:last-child { text-align: right; }
  #tools .desktop-prep-list-head[hidden] { display: none; }
  #tools .recipe-tools-workbench-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  #tools .recipe-tool-workbench-item {
    grid-template-rows: auto;
    min-height: 74px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    transform: none;
    transition: background-color .15s ease;
  }
  #tools .recipe-tool-workbench-item[data-recipe-tool-workbench-detail]:hover,
  #tools .recipe-tool-workbench-item[data-recipe-tool-workbench-detail]:focus-visible {
    border-color: var(--line);
    background: rgba(181, 78, 42, .035);
    box-shadow: none;
    transform: none;
  }
  #tools .recipe-tool-workbench-item.is-conflict { background: rgba(181, 78, 42, .045); }
  #tools .recipe-tool-workbench-item-head { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; }
  #tools .recipe-tool-workbench-image {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    font-size: 22px;
  }
  #tools .recipe-tool-workbench-image img { padding: 0; }
  #tools .desktop-prep-title-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-bottom: 4px; }
  #tools .recipe-tool-workbench-item-copy h3 { margin: 0; font-size: 14px; line-height: 1.4; }
  #tools .desktop-prep-type { color: var(--muted); font-size: 11px; line-height: 1.4; }
  #tools .recipe-tool-workbench-item-copy p {
    display: block;
    min-height: 0;
    font-size: 11px;
    line-height: 1.55;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #tools .recipe-tool-workbench-links { margin: 0; padding: 0; border: 0; }
  #tools .desktop-prep-relations {
    min-height: 32px;
    padding: 6px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #775a43;
    font: inherit;
    font-size: 12px;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
  }
  #tools .desktop-prep-link-action { color: var(--rust); }
  #tools .desktop-prep-relations:hover { color: var(--rust); text-decoration: underline; text-underline-offset: 4px; }
  #tools .recipe-tool-workbench-item-actions { align-items: center; margin: 0; gap: 12px; }
  #tools .recipe-tool-workbench-item-actions .recipe-tool-workbench-edit {
    min-height: 32px;
    padding: 6px 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    font-weight: 500;
  }
  #tools .recipe-tool-workbench-item-actions .recipe-tool-workbench-edit:hover { color: var(--rust); }
  #tools .desktop-prep-more { position: relative; }
  #tools .desktop-prep-more summary {
    display: grid;
    place-items: center;
    min-width: 32px;
    min-height: 32px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #775a43;
    font-size: 18px;
    line-height: 1;
    list-style: none;
    cursor: pointer;
  }
  #tools .desktop-prep-more summary:hover { background: rgba(181, 78, 42, .06); }
  #tools .desktop-prep-more summary::-webkit-details-marker { display: none; }
  #tools .desktop-prep-more-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 5px);
    z-index: 10;
    min-width: 110px;
    padding: 5px;
    border: 1px solid #eadbcd;
    border-radius: 10px;
    background: #fffdfa;
    box-shadow: 0 8px 25px rgba(71, 44, 29, .12);
  }
  #tools .desktop-prep-more-panel button { width: 100%; text-align: left; }
  #tools .desktop-prep-more-panel button:hover { background: #fff0e6; }
  #tools .recipe-tools-workbench-summary-card:focus-visible,
  #tools .recipe-tool-workbench-item:focus-visible,
  #tools .desktop-prep-more summary:focus-visible,
  #tools .desktop-prep-relations:focus-visible,
  #tools .desktop-prep-collected-toggle:focus-visible,
  #tools .desktop-prep-scope-toggle:focus-visible,
  #tools .desktop-prep-layout-switch button:focus-visible,
  #tools .recipe-tool-workbench-recipe-chip:focus-visible {
    outline: 2px solid var(--rust);
    outline-offset: 3px;
  }
  #tools .recipe-tool-workbench-empty { min-height: 160px; border: 0; border-radius: 0; background: transparent; }
  #tools .recipe-tools-workbench-recommendations {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px 18px;
    padding: 16px 0;
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  #tools .recipe-tools-workbench-recommendation-head { grid-template-columns: minmax(0, 1fr) 170px; align-items: center; }
  #tools .recipe-tools-workbench-recommendation-head h2 { margin: 0; font-size: 15px; }
  #tools .recipe-tools-workbench-recommendation-head .recipe-tools-workbench-kicker,
  #tools .recipe-tools-workbench-recommendation-select > span { display: none; }
  #tools .recipe-tools-workbench-recommendation-head p { margin-top: 5px; }
  #tools .recipe-tools-workbench-recommendation-select select { min-height: 34px; border-radius: 8px; font-size: 11px; }
  #tools .recipe-tools-workbench-recommendation-toggle-row { margin: 0; }
  #tools .recipe-tools-workbench-recommendation-body { grid-column: 1 / -1; }
  #tools .recipe-tools-workbench-recommendations[data-desktop-collapsed="true"] .recipe-tools-workbench-recommendation-body,
  #tools .recipe-tools-workbench-recommendations[data-desktop-collapsed="true"] .recipe-tools-workbench-recommendation-head p { display: none; }
  #tools .recipe-tools-workbench-recommendations[data-desktop-collapsed="true"] .recipe-tools-workbench-recommendation-toggle::after { transform: none; }
  #tools .recipe-tools-workbench-recommendations[data-desktop-collapsed="false"] .recipe-tools-workbench-recommendation-toggle::after { transform: rotate(180deg); }
  #tools .recipe-tools-workbench-recommendation-summary { border: 0; border-radius: 0; background: transparent; padding: 0; margin-top: 0; }
  #tools .desktop-prep-recommendation-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0 12px; color: var(--muted); font-size: 11px; }
  #tools .desktop-prep-collected-toggle,
  #tools .desktop-prep-scope-toggle { padding: 6px 0; border: 0; background: transparent; color: var(--rust); font: inherit; font-size: 11px; cursor: pointer; white-space: nowrap; }
  #tools .recipe-tools-workbench-recommendation-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  #tools .recipe-tools-workbench-recommendation { grid-template-columns: minmax(0, 1fr) 210px; align-items: center; gap: 20px; padding: 12px 8px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
  #tools .recipe-tools-workbench-recommendation-image { background: transparent; border-radius: 4px; }
  #tools .recipe-tools-workbench-recommendation-footer { border: 0; padding: 0; align-items: flex-end; flex-direction: column; gap: 3px; }
  #tools .recipe-tools-workbench-recommendation-meta span { border: 0; background: transparent; padding: 0; color: var(--muted); }
  #tools .recipe-tools-workbench-recommendation-meta .is-ready { background: transparent; }
  #tools .desktop-prep-recommendation-empty { margin: 0; padding: 12px 0; color: var(--muted); font-size: 12px; }
  #tools .recipe-tools-workbench-scope { padding: 16px 0; margin: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; gap: 16px; }
  #tools .recipe-tools-workbench-scope .recipe-tools-workbench-kicker,
  #tools .recipe-tools-workbench-scope-flow { display: none; }
  #tools .recipe-tools-workbench-scope-title { margin: 0; }
  #tools .recipe-tools-workbench-scope-title h2 { font-size: 15px; margin: 0; }
  #tools .recipe-tools-workbench-readonly { border: 0; border-radius: 0; background: transparent; padding: 0; color: var(--muted); font-weight: 400; }
  #tools .recipe-tools-workbench-scope-main p { margin-bottom: 0; font-size: 11px; }
  #tools .recipe-tools-workbench-scope[data-desktop-scope-collapsed="true"] .recipe-tools-workbench-scope-main p { display: none; }
}
/* Optional compact cards affect only the library, not the flat surrounding
   toolbar/statistics or the unchanged phone layout. */
@media (min-width: 901px) {
  #tools[data-desktop-prep-layout="cards"] .recipe-tools-workbench-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 12px;
  }
  #tools[data-desktop-prep-layout="cards"] .recipe-tool-workbench-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    min-height: 0;
    padding: 14px;
    border: 1px solid #e2d7ca;
    border-radius: 16px;
    background: #fffdfa;
    box-shadow: 0 7px 19px rgba(65, 48, 34, .035);
  }
  #tools[data-desktop-prep-layout="cards"] .recipe-tool-workbench-item:hover,
  #tools[data-desktop-prep-layout="cards"] .recipe-tool-workbench-item:focus-visible {
    border-color: rgba(181, 78, 42, .42);
    box-shadow: 0 10px 24px rgba(125, 74, 42, .07);
  }
  #tools[data-desktop-prep-layout="cards"] .recipe-tool-workbench-item.is-conflict { background: #fff8f0; }
  #tools[data-desktop-prep-layout="cards"] .recipe-tool-workbench-item-head {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
  }
  #tools[data-desktop-prep-layout="cards"] .recipe-tool-workbench-image {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: linear-gradient(145deg, #f1e7da, #faf6ef);
  }
  #tools[data-desktop-prep-layout="cards"] .recipe-tool-workbench-image img { padding: 5px; }
  #tools[data-desktop-prep-layout="cards"] .recipe-tool-workbench-item-copy h3 { font-size: 15px; margin: 0 0 5px; }
  #tools[data-desktop-prep-layout="cards"] .recipe-tool-workbench-example-badge {
    border-color: transparent;
    background: #f5f0e9;
    color: var(--muted);
    font-weight: 500;
  }
  #tools[data-desktop-prep-layout="cards"] .recipe-tool-workbench-item-copy p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    text-overflow: clip;
  }
  #tools[data-desktop-prep-layout="cards"] .recipe-tool-workbench-usage { margin-top: 8px; }
  #tools[data-desktop-prep-layout="cards"] .recipe-tool-workbench-links {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid #eee4d9;
  }
  #tools[data-desktop-prep-layout="cards"] .recipe-tool-workbench-recipe-chips { flex-wrap: nowrap; }
  #tools[data-desktop-prep-layout="cards"] .recipe-tool-workbench-recipe-chip {
    display: block;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 46%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #tools[data-desktop-prep-layout="cards"] .desktop-prep-more-count { flex-shrink: 0; }
  #tools[data-desktop-prep-layout="cards"] .recipe-tool-workbench-item-actions { gap: 6px; }
  #tools[data-desktop-prep-layout="cards"] .recipe-tool-workbench-edit {
    border: 1px solid #d8c4b2;
    border-radius: 9px;
    padding: 6px 10px;
    background: #fff;
    color: #6e513c;
    font-weight: 700;
  }
  #tools[data-desktop-prep-layout="cards"] .desktop-prep-more summary {
    border: 1px solid #e9ddd0;
    border-radius: 9px;
    background: #fffdfa;
  }
}
@media (min-width: 901px) and (max-width: 1100px) {
  #tools[data-desktop-prep-layout="cards"] .recipe-tools-workbench-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 901px) and (max-width: 1150px) {
  #tools .recipe-tools-workbench-toolbar { grid-template-columns: minmax(0, 1fr) 135px 145px; }
  #tools .recipe-tools-workbench-count { grid-column: 1 / -1; }
  #tools .desktop-prep-list-head,
  #tools .recipe-tool-workbench-item { grid-template-columns: minmax(0, 1fr) 125px 96px; gap: 12px; }
  #tools .recipe-tools-workbench-recommendation-head { gap: 12px; grid-template-columns: minmax(0, 1fr) 150px; }
  #tools .recipe-tools-workbench-recommendation { grid-template-columns: minmax(0, 1fr) 170px; }
}
/* Scoped additive UI: existing desktop workspace layout is untouched. */
.ps-dialog{width:min(720px,calc(100vw - 32px));max-height:85dvh;padding:0;border:1px solid #dfd4c8;border-radius:20px;color:#403b34;background:#fffdf8}
.ps-dialog::backdrop{background:rgba(38,32,27,.42)}
.ps-dialog>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 24px;border-bottom:1px solid #e9e0d6}
.ps-dialog h2,.ps-dialog h3{margin:0}.ps-dialog .ps-body{padding:20px 24px;overflow-wrap:anywhere}
.ps-dialog button{border:1px solid #dfd4c8;border-radius:10px;padding:9px 14px;background:#f5eee5;color:inherit;cursor:pointer;font:inherit}
.ps-dialog button:disabled{opacity:.55;cursor:wait}.ps-dialog .ps-primary{background:#ae573a;color:white;border-color:#ae573a}
.ps-dialog label{display:block;margin:14px 0}.ps-dialog input:not([type=checkbox]),.ps-dialog textarea,.ps-dialog select{display:block;width:100%;box-sizing:border-box;padding:11px;border:1px solid #d9cec1;border-radius:10px;font:inherit;background:white;color:inherit;margin-top:6px}
.ps-dialog textarea{min-height:120px;resize:vertical}.ps-dialog footer,.ps-dialog .ps-toolbar{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}
.ps-dialog .ps-card{border:1px solid #e6dbcf;border-radius:14px;padding:16px;margin:14px 0}
.ps-dialog .ps-card button{width:100%;text-align:left;background:transparent;border:0;padding:0}
.ps-dialog .ps-copy{white-space:pre-wrap;user-select:text;line-height:1.7;margin:12px 0}
.ps-dialog .ps-note{color:#797268;font-size:14px}.ps-dialog .ps-error{color:#a72d26;white-space:pre-wrap;user-select:text}
.ps-dialog .ps-admin-message{background:#f9efe4}.ps-dialog .ps-images{display:flex;flex-wrap:wrap;gap:8px}.ps-dialog .ps-images img{width:100px;height:90px;object-fit:contain;border-radius:8px;border:1px solid #e6dbcf}
.ps-dialog .ps-images a{display:inline-block}.ps-unread{display:inline-block;background:#bb4d34;color:white;border-radius:12px;min-width:18px;padding:0 4px;font-size:12px;text-align:center;margin-left:4px}
.ps-unread[hidden]{display:none}
.ps-admin-mobile-actions{display:none}
@media(max-width:760px){.ps-admin-mobile-actions{display:flex;gap:8px;padding:0 10px 10px}.ps-admin-mobile-actions button{min-height:44px;padding:8px 12px;border:1px solid #ead9ca;border-radius:12px;color:#8d513e;background:#fffdf9;font:inherit}}
@media(max-width:900px){.ps-dialog{width:calc(100vw - 16px);max-height:90dvh;border-radius:16px}.ps-dialog>header,.ps-dialog .ps-body{padding:16px}.ps-dialog button{min-height:44px}.ps-dialog input,.ps-dialog textarea,.ps-dialog select{font-size:16px}}

/* October 9: desktop library refinement; shared/mobile structure stays untouched. */
@media (min-width: 901px) {
  body:has(#recipes.view.active) .topbar [data-new-recipe] {
    color: var(--ink); background: var(--card) !important;
    border: 1px solid var(--line) !important; box-shadow: none !important;
  }
  #recipes .rd-activity {
    grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap;
    gap: 6px; border-top: 1px solid var(--line); padding-top: 10px;
  }
  #recipes .rd-activity button {
    border: 1px solid transparent; border-radius: 7px; padding: 5px 9px;
    min-height: 30px; background: transparent; color: var(--muted);
    font: inherit; font-size: 12px; cursor: pointer;
  }
  #recipes .rd-activity button[aria-pressed="true"] {
    color: var(--rust); background: color-mix(in srgb, var(--rust) 8%, var(--card));
  }
  #recipes .rd-activity small { margin-left: auto; font-size: 11px; color: var(--muted); }
  #recipes .recipe-card .rd-generic-description { min-height: 16px; font-size: 10px; margin-bottom: 6px; }
  #recipes .recipe-card-title-row h3 { min-height: 36px; }
  #recipes .version-label { white-space: nowrap; font-size: 11px; }
  #recipes .rd-card-summary {
    display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center;
    margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--line);
    color: var(--muted); font-size: 11px; line-height: 1.6;
  }
  #recipes .rd-current-flavor { color: var(--rust); }
  #recipes .rd-completeness {
    border: 0; border-radius: 5px; padding: 3px 0; background: transparent;
    color: var(--rust); font: inherit; text-align: left; cursor: pointer;
  }
  #recipes .rd-completeness:hover { text-decoration: underline; }
  #recipes .rd-more-actions .rd-workflow-action { color: var(--ink); font: inherit; font-size: 12px; }
  #recipes .rd-more-actions { max-height: min(340px, 65vh); overflow-y: auto; }
}
/* Desktop-only presentation. Business renderers and the mobile reader remain authoritative. */
@media (min-width: 901px) {
  #recipeDetailModal.rdd-desktop .detail-card {
    width: min(1160px, 100%);
    scroll-padding-top: calc(var(--rdd-head, 58px) + var(--rdd-actions, 62px) + 58px);
  }
  #recipeDetailModal.rdd-desktop .modal-head {
    min-height: 58px;
    padding: 10px 20px;
    background: var(--card);
    z-index: 12;
    isolation: isolate;
  }
  #recipeDetailModal.rdd-desktop .modal-head strong {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 17px;
  }
  #recipeDetailModal.rdd-desktop .close-button { flex-shrink: 0; }
  #recipeDetailModal.rdd-desktop .detail-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr);
    gap: 4px 24px;
    padding: 18px 20px;
    background: var(--paper);
  }
  #recipeDetailModal.rdd-desktop .detail-topline { margin: 0; }
  #recipeDetailModal.rdd-desktop .detail-hero h2 {
    margin: 2px 0;
    font-size: 28px;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }
  #recipeDetailModal.rdd-desktop .detail-hero > p {
    margin: 2px 0 0;
    font-size: 12px;
    line-height: 1.6;
  }
  #recipeDetailModal.rdd-desktop .detail-facts {
    grid-column: 2;
    grid-row: 1 / 4;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-self: center;
  }
  #recipeDetailModal.rdd-desktop .detail-fact {
    min-width: 0;
    padding: 7px 10px;
    background: var(--card);
  }
  #recipeDetailModal.rdd-desktop .detail-fact small { font-size: 11px; }
  #recipeDetailModal.rdd-desktop .detail-fact strong {
    font-size: 13px;
    overflow-wrap: anywhere;
  }
  #recipeDetailModal.rdd-desktop .recipe-family-detail-panel {
    margin: 10px 20px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--card);
  }
  #recipeDetailModal.rdd-desktop .recipe-family-detail-panel.is-standalone {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 12px;
  }
  #recipeDetailModal.rdd-desktop .is-standalone .recipe-family-kicker,
  #recipeDetailModal.rdd-desktop .is-standalone > div > p,
  #recipeDetailModal.rdd-desktop .recipe-family-detail-foot { display: none; }
  #recipeDetailModal.rdd-desktop .recipe-family-detail-panel strong { font-size: 13px; }
  #recipeDetailModal.rdd-desktop .recipe-family-detail-actions { gap: 8px; }
  #recipeDetailModal.rdd-desktop .recipe-family-detail-actions button {
    min-height: 32px;
    padding: 6px 10px;
    font-size: 12px;
    box-shadow: none;
  }
  #recipeDetailModal.rdd-desktop #recipeDetailContent > .modal-actions {
    position: sticky;
    top: var(--rdd-head, 58px);
    z-index: 11;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 10px 20px;
    margin: 0;
    background: var(--card);
    border-bottom: 1px solid var(--line);
  }
  #recipeDetailModal.rdd-desktop .modal-actions > button,
  #recipeDetailModal.rdd-desktop .rdd-more > summary {
    min-height: 38px;
    padding: 8px 12px;
    font-size: 13px;
    white-space: nowrap;
  }
  #recipeDetailModal.rdd-desktop .recipe-detail-total-cost {
    min-width: 0;
    flex: 1;
    margin: 0 8px 0 0;
  }
  #recipeDetailModal.rdd-desktop .recipe-detail-total-cost strong { font-size: 15px; }
  #recipeDetailModal.rdd-desktop .recipe-detail-total-cost small,
  #recipeDetailModal.rdd-desktop .recipe-detail-total-cost > span { font-size: 11px; }
  #recipeDetailModal.rdd-desktop .rdd-more { position: relative; }
  #recipeDetailModal.rdd-desktop .rdd-more > summary {
    cursor: pointer;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    list-style: none;
  }
  #recipeDetailModal.rdd-desktop .rdd-more > summary::-webkit-details-marker { display: none; }
  #recipeDetailModal.rdd-desktop .rdd-more-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 220px;
    max-height: 50vh;
    overflow: auto;
    display: grid;
    gap: 6px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
    box-shadow: 0 10px 28px var(--theme-shadow-color);
  }
  #recipeDetailModal.rdd-desktop .rdd-more-panel button {
    width: 100%;
    padding: 10px;
    font-size: 13px;
    text-align: left;
    white-space: normal;
  }
  #recipeDetailModal.rdd-desktop .detail-tabs-row {
    position: sticky;
    top: calc(var(--rdd-head, 58px) + var(--rdd-actions, 62px));
    z-index: 10;
    background: var(--card);
    isolation: isolate;
    padding-inline: 20px;
    gap: 12px;
    border-bottom: 1px solid var(--line);
  }
  #recipeDetailModal.rdd-desktop .detail-tabs { gap: 18px; }
  #recipeDetailModal.rdd-desktop .detail-tab {
    font-size: 13px;
    padding: 12px 0;
  }
  #recipeDetailModal.rdd-desktop .detail-content { padding: 18px 20px; min-height: 250px; }
  #recipeDetailModal.rdd-desktop .recipe-formula-detail {
    grid-template-columns: minmax(0, 2.6fr) minmax(220px, 1fr);
    align-items: start;
    gap: 18px;
  }
  #recipeDetailModal.rdd-desktop .recipe-formula-main,
  #recipeDetailModal.rdd-desktop .recipe-formula-sidebar { min-width: 0; }
  #recipeDetailModal.rdd-desktop .rdd-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 0 0 10px;
    color: var(--muted);
    font-size: 12px;
  }
  #recipeDetailModal.rdd-desktop .rdd-metrics strong { margin-left: 5px; color: var(--ink); }
  #recipeDetailModal.rdd-desktop .recipe-percentage-toolbar { padding: 10px 12px; }
  #recipeDetailModal.rdd-desktop .recipe-formula-main table { table-layout: fixed; width: 100%; }
  #recipeDetailModal.rdd-desktop .recipe-formula-main th,
  #recipeDetailModal.rdd-desktop .recipe-formula-main td {
    padding: 10px 14px;
    font-size: 13px;
    overflow-wrap: anywhere;
  }
  #recipeDetailModal.rdd-desktop .recipe-formula-main th:first-child { width: 40%; }
  #recipeDetailModal.rdd-desktop .recipe-formula-main th:not(:first-child) { width: 30%; }
  #recipeDetailModal.rdd-desktop .recipe-formula-main td:not(:first-child),
  #recipeDetailModal.rdd-desktop .recipe-formula-main th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
  #recipeDetailModal.rdd-desktop .rdd-group th { text-align: left; color: var(--muted); background: var(--paper-deep); }
  #recipeDetailModal.rdd-desktop .rdd-group-note { display: none; }
  #recipeDetailModal.rdd-desktop .rdd-percent-note { padding: 8px 12px; font-size: 11px; line-height: 1.6; color: var(--muted); }
  #recipeDetailModal.rdd-desktop .recipe-formula-sidebar { gap: 10px; }
  #recipeDetailModal.rdd-desktop .recipe-formula-sidebar-card { padding: 12px; background: var(--card); }
  #recipeDetailModal.rdd-desktop .rdd-snapshot { display: none; }
  #recipeDetailModal.rdd-desktop .recipe-formula-sidebar-head > span,
  #recipeDetailModal.rdd-desktop .recipe-formula-sidebar-alert-head > span { display: none; }
  #recipeDetailModal.rdd-desktop .recipe-formula-sidebar-alert { order: -1; }
  #recipeDetailModal.rdd-desktop .recipe-formula-sidebar-alert strong { font-size: 14px; }
  #recipeDetailModal.rdd-desktop .recipe-formula-sidebar-alert p { font-size: 12px; margin: 8px 0; }
  #recipeDetailModal.rdd-desktop .rdd-links > summary { cursor: pointer; font-size: 13px; font-weight: 700; }
  #recipeDetailModal.rdd-desktop .rdd-links .recipe-formula-sidebar-list { margin-top: 8px; }
  #recipeDetailModal.rdd-desktop .recipe-formula-sidebar-row { padding-block: 8px; }
  #recipeDetailModal.rdd-desktop .recipe-formula-sidebar-row-copy strong { font-size: 12px; }
  #recipeDetailModal.rdd-desktop .recipe-formula-tags { margin-top: 6px; gap: 5px; }
  #recipeDetailModal.rdd-desktop .recipe-formula-tags .tag { font-size: 11px; padding: 4px 8px; }
  #recipeDetailModal.rdd-desktop .lab-batch-history { margin: 0 20px 20px; padding: 16px 0 0; }
  #recipeDetailModal.rdd-desktop .lab-batch-history h3 { font-size: 19px; }
  #recipeDetailModal.rdd-desktop .lab-batch-history .lab-kicker,
  #recipeDetailModal.rdd-desktop .lab-batch-history [data-lab-new-batch] { display: none; }
  #recipeDetailModal.rdd-desktop .lab-batch-history-head p { font-size: 12px; }
  #recipeDetailModal.rdd-desktop .lab-batch-history .lab-empty { padding: 18px; font-size: 12px; }
  #recipeDetailModal.rdd-desktop :is(button, summary):focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }
  @media (max-width: 1100px) {
    #recipeDetailModal.rdd-desktop .detail-hero { grid-template-columns: minmax(0, 1fr); }
    #recipeDetailModal.rdd-desktop .detail-facts {
      grid-column: 1;
      grid-row: auto;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      margin-top: 6px;
    }
    #recipeDetailModal.rdd-desktop .recipe-detail-total-cost > span { display: none; }
    #recipeDetailModal.rdd-desktop .detail-tabs { gap: 12px; }
  }
}

/* Reading-first refinement, scoped strictly to the existing desktop detail. */
@media (min-width: 901px) {
  #recipeDetailModal.rdd-desktop .detail-card {
    width: min(1180px, 100%);
    font-family: system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
  }
  #recipeDetailModal.rdd-desktop :is(h2, h3, button, table, .modal-head strong) { font-family: inherit; }
  #recipeDetailModal.rdd-desktop .detail-hero {
    display: flex; flex-direction: column; gap: 8px; padding: 20px 28px 14px;
    background: var(--card);
  }
  #recipeDetailModal.rdd-desktop .detail-hero h2 { font-size: 28px; font-weight: 650; margin: 0; }
  #recipeDetailModal.rdd-desktop .detail-hero > p { font-size: 14px; max-width: 70ch; }
  #recipeDetailModal.rdd-desktop .detail-facts {
    display: flex; flex-wrap: wrap; align-self: auto; gap: 8px 22px; margin: 0;
  }
  #recipeDetailModal.rdd-desktop .detail-fact {
    display: flex; align-items: baseline; gap: 8px; border: 0; border-radius: 0; padding: 0;
  }
  #recipeDetailModal.rdd-desktop .detail-fact small { font-size: 13px; }
  #recipeDetailModal.rdd-desktop .detail-fact strong { font-size: 14px; font-weight: 500; }
  #recipeDetailModal.rdd-desktop .rdr-hidden,
  #recipeDetailModal.rdd-desktop #recipeDetailContent > .modal-actions > .recipe-detail-total-cost { display: none !important; }
  #recipeDetailModal.rdd-desktop #recipeDetailContent > .modal-actions {
    position: static; padding: 0 28px 16px; border: 0; gap: 10px;
  }
  #recipeDetailModal.rdd-desktop .modal-actions > button,
  #recipeDetailModal.rdd-desktop .rdd-more > summary {
    min-height: 40px; font-size: 14px; padding: 9px 16px; box-shadow: none;
  }
  #recipeDetailModal.rdd-desktop .modal-actions > [data-lab-new-batch],
  #recipeDetailModal.rdd-desktop .modal-actions > [data-edit-current-recipe],
  #recipeDetailModal.rdd-desktop .modal-actions > [data-family-edit-variant] {
    background: var(--card) !important; color: var(--ink); border: 1px solid var(--line) !important; box-shadow: none !important;
  }
  #recipeDetailModal.rdd-desktop .detail-tabs-row {
    top: var(--rdd-head, 58px); padding-inline: 28px;
  }
  #recipeDetailModal.rdd-desktop .detail-tab { font-size: 14px; padding-block: 14px; }
  #recipeDetailModal.rdd-desktop .detail-content { padding: 20px 28px; }
  #recipeDetailModal.rdd-desktop .recipe-formula-detail { grid-template-columns: minmax(0, 1fr) 230px; gap: 24px; }
  #recipeDetailModal.rdd-desktop .rdd-metrics { font-size: 13px; }
  #recipeDetailModal.rdd-desktop .recipe-percentage-toolbar {
    background: transparent; border: 0; padding: 0 0 12px; border-radius: 0;
  }
  #recipeDetailModal.rdd-desktop .recipe-percentage-toolbar-copy strong { display: none; }
  #recipeDetailModal.rdd-desktop .recipe-percentage-toolbar-copy small { font-size: 12px; }
  #recipeDetailModal.rdd-desktop .recipe-percentage-switch button:disabled { display: none; }
  #recipeDetailModal.rdd-desktop .recipe-percentage-switch button { min-height: 36px; box-shadow: none; }
  #recipeDetailModal.rdd-desktop .recipe-formula-main th,
  #recipeDetailModal.rdd-desktop .recipe-formula-main td { font-size: 15px; padding: 13px 14px; }
  #recipeDetailModal.rdd-desktop .recipe-formula-main tbody td:first-child { font-weight: 500; }
  #recipeDetailModal.rdd-desktop .recipe-formula-main tbody td:last-child { color: var(--muted); font-weight: 400; }
  #recipeDetailModal.rdd-desktop .recipe-formula-sidebar-card { border-radius: 12px; box-shadow: none; }
  #recipeDetailModal.rdd-desktop .rdr-disclosure { margin: 0; padding: 12px 0; }
  #recipeDetailModal.rdd-desktop .rdr-disclosure > summary,
  #recipeDetailModal.rdd-desktop .rdd-links > summary { cursor: pointer; min-height: 36px; align-content: center; font-size: 14px; }
  #recipeDetailModal.rdd-desktop #recipeDetailContent > .rdr-disclosure {
    margin: 0 28px 20px; border-top: 1px solid var(--line);
  }
  #recipeDetailModal.rdd-desktop .rdr-disclosure .lab-batch-history { margin: 8px 0 0; }
  #recipeDetailModal.rdd-desktop .rdr-disclosure .lab-batch-history-head { margin-top: 0; }
  #recipeDetailModal.rdd-desktop .rdd-more-panel { width: min(280px, 75vw); z-index: 30; }
  #recipeDetailModal.rdd-desktop .rdd-more-panel .is-standalone { display: block; margin: 8px 0 0; padding: 0; border: 0; }
  #recipeDetailModal.rdd-desktop .rdd-more-panel .is-standalone > div:first-child { display: none; }
  #recipeDetailModal.rdd-desktop .rdd-more-panel .recipe-family-detail-actions { display: grid; }
  #recipeDetailModal.rdd-desktop .detail-card { scroll-padding-top: calc(var(--rdd-head, 58px) + 60px); }
  /* Low-frequency panels have no footprint until explicitly chosen in More. */
  #recipeDetailModal.rdd-desktop .detail-content > [data-nutrition-recipe],
  #recipeDetailModal.rdd-desktop .lab-batch-history { display: none; }
  #recipeDetailModal.rdd-desktop[data-rdr-section="nutrition"] .detail-content > [data-nutrition-recipe] {
    display: block; margin: 0;
  }
  #recipeDetailModal.rdd-desktop[data-rdr-section="history"] .detail-content { display: none; }
  #recipeDetailModal.rdd-desktop[data-rdr-section="history"] .lab-batch-history { display: block; }
  @media (max-width: 1100px) {
    #recipeDetailModal.rdd-desktop .recipe-formula-detail { grid-template-columns: minmax(0, 1fr); }
    #recipeDetailModal.rdd-desktop .recipe-formula-sidebar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
}
/* Desktop-only candidate. No rules apply at/below the maintained 900px boundary. */
@media (min-width: 901px) {
  #recipes .page-header {
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
  }
  #recipes .page-header h1 { font-size: 32px; line-height: 1.2; }
  #recipes .page-header p { margin: 4px 0 0; font-size: 12px; }
  #recipes .recipe-library-actions { gap: 8px; }
  #recipes .recipe-library-actions > button { min-height: 40px; border-radius: 11px; padding-inline: 14px; }
  /* The shared theme marks primary gradients important; locally downgrade import. */
  html[data-release-channel="cloud"] #recipes .recipe-library-actions > .rd-import {
    color: var(--ink); background: var(--card) !important;
    border: 1px solid var(--line) !important; box-shadow: none !important;
  }
  #recipes .rc-trial-switch { margin-bottom: 12px; gap: 20px; border-bottom: 1px solid var(--line); }
  #recipes .rc-trial-switch button {
    padding: 10px 2px 12px; border: 0; border-radius: 0;
    border-bottom: 2px solid transparent; background: transparent; color: var(--muted);
  }
  #recipes .rc-trial-switch button[aria-pressed="true"] {
    color: var(--rust); border-color: var(--rust); background: transparent; font-weight: 750;
  }
  #recipes .filter-bar {
    position: relative; top: auto; margin-bottom: 14px; padding: 12px;
    grid-template-columns: minmax(180px, 1fr) minmax(115px, 150px) minmax(110px, 135px) minmax(165px, 195px);
    gap: 10px; border-radius: 14px; box-shadow: none;
  }
  #recipes .filter-search, #recipes .filter-bar .select-field { min-height: 40px; border-radius: 9px; }
  #recipes .recipe-search-history-wrap { grid-column: 1; grid-row: 1; }
  #recipes #categoryFilter { grid-column: 2; grid-row: 1; min-width: 0; width: 100%; }
  #recipes #statusFilter { grid-column: 3; grid-row: 1; min-width: 0; width: 100%; }
  #recipes #recipeSort { grid-column: 4; grid-row: 1; min-width: 0; width: 100%; }
  #recipes .recipe-library-toggle-group { grid-column: 1 / 3; grid-row: 2; justify-content: flex-start; }
  #recipes .recipe-library-toggle-group button {
    flex: 0 0 auto; min-height: 32px; padding: 5px 12px; border-radius: 8px;
    font-size: 12px; background: transparent;
  }
  #recipes .recipe-library-toggle-group button[aria-pressed="true"] {
    color: var(--rust); background: color-mix(in srgb, var(--rust) 8%, var(--card)); border-color: transparent;
  }
  #recipes .recipe-count { grid-row: 3; grid-column: 1 / -1; font-size: 11px; }
  #recipes .rd-controls { grid-column: 3 / -1; grid-row: 2; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
  #recipes .rd-controls button {
    min-height: 32px; border: 1px solid var(--line); padding: 5px 10px; border-radius: 8px;
    color: var(--muted); background: var(--card); font: inherit; font-size: 12px; cursor: pointer;
  }
  #recipes .rd-view-toggle { display: flex; gap: 3px; }
  #recipes .rd-view-toggle button[aria-pressed="true"] { color: var(--rust); background: color-mix(in srgb, var(--rust) 8%, var(--card)); }
  #recipes .rd-controls [hidden] { display: none; }
  #recipes .rd-conditions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; font-size: 11px; color: var(--muted); }
  #recipes .rd-conditions:empty { display: none; }
  #recipes .rd-conditions span { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; }
  #recipes .recipe-grid { gap: 14px; }
  #recipes .recipe-card, body[data-density="compact"] #recipes .recipe-card {
    min-height: 202px; border-radius: 14px; box-shadow: 0 3px 12px rgba(69,51,34,.025);
  }
  #recipes .recipe-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(69,51,34,.06); }
  #recipes .recipe-card-accent, #recipes .recipe-card:hover .recipe-card-accent { height: 3px; flex-basis: 3px; opacity: .35; }
  #recipes .recipe-body, body[data-density="compact"] #recipes .recipe-body { padding: 14px 16px; }
  #recipes .recipe-card-topline { margin-bottom: 8px; padding-right: 0; }
  #recipes .recipe-card-category { font-size: 11px; letter-spacing: 0; }
  #recipes .recipe-card-meta { flex-wrap: wrap; }
  #recipes .recipe-card-title-row { padding-right: 0; gap: 8px; }
  #recipes .recipe-card-title-row h3, body[data-density="compact"] #recipes .recipe-card-title-row h3 {
    min-height: 48px; font-size: 19px; line-height: 1.3;
  }
  #recipes .recipe-card .recipe-description, body[data-density="compact"] #recipes .recipe-card .recipe-description {
    min-height: 20px; max-height: 20px; font-size: 11px; -webkit-line-clamp: 1; margin: 0 0 10px;
  }
  #recipes .recipe-card-bottom { padding-top: 10px; }
  #recipes .recipe-family-card-variants { margin: 0 0 8px; }
  #recipes .recipe-facts.is-adaptive { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  #recipes .recipe-facts.is-adaptive .recipe-fact.is-long { grid-column: auto; }
  #recipes .recipe-card .recipe-facts small { font-size: 10px; }
  #recipes .recipe-card .recipe-facts strong { min-height: 30px; font-size: 13px; }
  #recipes .recipe-card.is-recipe-pinned::before { display: none; }
  #recipes .recipe-card-actions, #recipes .recipe-card.is-recipe-pinned .recipe-card-actions {
    top: auto; bottom: 78px; right: 10px; background: var(--card); border-radius: 10px;
  }
  #recipes .recipe-card[data-rd-decorated] .recipe-card-actions [data-recipe-library-action="star"] { opacity: 1; }
  #recipes .rd-label { padding: 3px 7px; border-radius: 6px; font-size: 10px; color: var(--muted); background: var(--paper); border: 1px solid var(--line); }
  #recipes .rd-flavor { color: var(--rust); }
  #recipes .rd-row, #recipes .rd-list-head { display: none; }
  #recipes .recipe-grid.rd-list { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
  #recipes .rd-list .rd-list-head, #recipes .rd-list .rd-row {
    display: grid; grid-template-columns: minmax(170px, 2fr) 65px 64px 65px minmax(95px, 1fr) 80px 85px 144px;
    align-items: center; gap: 10px; padding: 12px 16px;
  }
  #recipes .rd-list .rd-list-head { background: var(--paper); color: var(--muted); font-size: 11px; }
  #recipes .rd-list .recipe-card, body[data-density="compact"] #recipes .rd-list .recipe-card {
    min-height: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; overflow: visible;
  }
  #recipes .rd-list .recipe-card:hover { transform: none; background: color-mix(in srgb, var(--rust) 3%, var(--card)); }
  #recipes .rd-list .recipe-body, #recipes .rd-list .recipe-card-accent { display: none; }
  #recipes .rd-row { font-size: 12px; min-height: 68px; }
  #recipes .rd-row > span { min-width: 0; overflow-wrap: anywhere; }
  #recipes .rd-row-title { font-weight: 750; font-size: 14px; }
  #recipes .rd-row-title small { display: block; font-weight: 400; font-size: 11px; color: var(--muted); margin-top: 4px; }
  #recipes .rd-list .recipe-card-actions, #recipes .rd-list .recipe-card.is-recipe-pinned .recipe-card-actions {
    top: 50%; bottom: auto; right: 12px; transform: translateY(-50%); opacity: 1; pointer-events: auto; background: transparent;
  }
  #recipes .rd-list .recipe-card-action { width: 32px; height: 34px; }
  #recipes .rd-list .recipe-card-action-visual { width: 28px; height: 28px; box-shadow: none; }
  #recipes button:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }
}
@media (min-width: 901px) and (max-width: 1200px) {
  #recipes .recipe-grid:not(.rd-list) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #recipes .rd-list .rd-list-head, #recipes .rd-list .rd-row {
    grid-template-columns: minmax(145px, 2fr) 55px 60px 60px minmax(80px, 1fr) 70px 136px;
    gap: 8px; padding-inline: 12px;
  }
  #recipes .rd-list .rd-updated { display: none; }
}

/* Round two: persistent primary actions, a reversible disclosure, and sortable columns. */
@media (min-width: 901px) {
  #recipes .recipe-card { overflow: visible; }
  #recipes .recipe-card-accent { border-radius: 14px 14px 0 0; }
  #recipes .recipe-card-topline { padding-right: 98px; min-height: 30px; }
  #recipes .recipe-card-actions, #recipes .recipe-card.is-recipe-pinned .recipe-card-actions {
    top: 10px; bottom: auto; right: 10px; opacity: 1; pointer-events: auto; transform: none;
    gap: 2px; background: transparent;
  }
  #recipes .recipe-card-action { width: 30px; height: 32px; padding: 1px; }
  #recipes .recipe-card-action-visual { width: 28px; height: 28px; box-shadow: none; }
  #recipes .recipe-card-actions > [data-recipe-library-action="star"] { order: 0; }
  #recipes .recipe-card-actions > .recipe-compare-action { order: 1; }
  #recipes .recipe-card-actions > .rd-more-button { order: 2; }
  #recipes .rd-more-button .recipe-card-action-visual { font: 800 18px/1 Arial, sans-serif; }
  #recipes .recipe-card-actions .rd-more-actions {
    position: absolute; right: 0; top: 38px; width: 160px; padding: 5px;
    display: none; flex-direction: column; gap: 2px; border: 1px solid var(--line);
    border-radius: 10px; background: var(--card); box-shadow: 0 12px 28px rgba(69,51,34,.16);
  }
  #recipes .recipe-card.rd-more-open { z-index: 8; }
  #recipes .rd-more-open .recipe-card-actions .rd-more-actions { display: flex; }
  #recipes .rd-more-actions .recipe-card-action { width: 100%; height: 36px; justify-content: flex-start; gap: 7px; padding: 3px 6px; border-radius: 7px; }
  #recipes .rd-more-actions .recipe-card-action:hover { background: var(--paper); }
  #recipes .rd-action-label { color: var(--ink); font-size: 12px; }
  #recipes .recipe-grid.rd-list { overflow: visible; }
  #recipes .rd-list .rd-list-head, #recipes .rd-list .rd-row {
    grid-template-columns: minmax(140px, 2fr) 60px 60px 60px minmax(85px, 1fr) 70px 80px 104px;
  }
  #recipes .rd-list .rd-list-head { border-radius: 12px 12px 0 0; }
  #recipes .rd-list .recipe-card:last-child { border-radius: 0 0 12px 12px; }
  #recipes .rd-list .recipe-card-actions, #recipes .rd-list .recipe-card.is-recipe-pinned .recipe-card-actions { top: 50%; right: 12px; transform: translateY(-50%); }
  #recipes .rd-list .rd-list-head > button {
    min-width: 0; padding: 4px 0; border: 0; background: transparent; color: var(--muted);
    font: inherit; text-align: left; cursor: pointer; white-space: normal;
  }
  #recipes .rd-list .rd-list-head > button:hover, #recipes .rd-list .rd-list-head > button[aria-pressed="true"] { color: var(--rust); }
  #recipes .rd-row-title { display: block; overflow: visible; line-height: 1.5; }
  #recipes .rd-row-title .rd-name-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  #recipes .rd-row > span { font-variant-numeric: tabular-nums; }
  #recipes .rd-row .rd-pending { color: var(--muted); font-size: 11px; }
  #recipes .rd-controls > [data-rd-compare-mode][aria-pressed="true"] { color: var(--rust); border-color: var(--rust); background: color-mix(in srgb, var(--rust) 6%, var(--card)); }
  #recipes .rd-compare-hint { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
  #recipes .rd-compare-hint[hidden] { display: none; }
  #recipes .rd-compare-summary {
    grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
    border-top: 1px solid var(--line); padding-top: 10px; font-size: 11px;
  }
  #recipes .rd-compare-summary[hidden] { display: none; }
  #recipes .rd-compare-summary button {
    min-height: 32px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 7px;
    background: var(--card); color: var(--ink); font: inherit; cursor: pointer;
  }
  #recipes .rd-compare-summary .rd-compare-chip { max-width: 180px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: var(--paper); }
  #recipes .rd-compare-summary [data-open-recipe-compare] { color: var(--rust); border-color: var(--rust); }
  #recipes .rd-compare-summary button:disabled { opacity: .5; cursor: not-allowed; }
  #recipes .rd-selected-label { color: var(--rust); font-size: 10px; font-weight: 700; }
  #recipes .rd-row .rd-row-selected { color: var(--rust); }
  #recipes .rd-compare-mode .recipe-compare-action .recipe-card-action-visual { border-color: var(--rust); color: var(--rust); }
  #recipes .recipe-card.is-recipe-compared { background: color-mix(in srgb, var(--rust) 3%, var(--card)); }
  #recipes .recipe-compare-dock { flex-wrap: wrap; }
  #recipes .recipe-compare-dock-copy span { font-size: 11px; }
}
@media (min-width: 1101px) and (max-width: 1200px) {
  #recipes .rd-list .rd-list-head, #recipes .rd-list .rd-row {
    grid-template-columns: minmax(120px, 2fr) 45px 50px 48px minmax(70px, 1fr) 60px 104px;
    gap: 8px; padding-inline: 12px;
  }
}
@media (min-width: 901px) and (max-width: 1100px) {
  #recipes .filter-bar { grid-template-columns: minmax(120px, 1fr) minmax(90px, 100px) minmax(90px, 100px) minmax(145px, 160px); }
  #recipes .recipe-library-toggle-group { grid-column: 1 / -1; grid-row: 2; }
  #recipes .rd-controls { grid-column: 1 / -1; grid-row: 3; justify-content: flex-start; flex-wrap: wrap; }
  #recipes .recipe-count { grid-row: 4; }
  #recipes .rd-list .rd-list-head, #recipes .rd-list .rd-row {
    grid-template-columns: minmax(100px, 2fr) 45px 50px minmax(65px, 1fr) 60px 104px;
    gap: 8px; padding-inline: 12px;
  }
  #recipes .rd-list .rd-version { display: none; }
}
.recipe-egg-panel-v08 {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(173, 100, 67, .26);
  border-radius: 12px;
  background: rgba(251, 245, 235, .8);
}
.recipe-egg-panel-v08[hidden], .recipe-egg-custom-v08[hidden] { display: none !important; }
.recipe-egg-panel-v08 > strong { display: block; font-size: 13px; }
.recipe-egg-panel-v08 > p { margin: 5px 0 12px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.recipe-egg-row-v08 { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(130, 99, 68, .15); }
.recipe-egg-row-v08 label { display: grid; gap: 4px; min-width: min(100%, 150px); font-size: 12px; }
.recipe-egg-row-v08 label > span { color: var(--muted); }
.recipe-egg-row-v08 select, .recipe-egg-row-v08 input[type="number"] { width: 100%; min-height: 36px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: inherit; font: inherit; }
.recipe-egg-row-v08 .recipe-egg-measured-v08 { display: flex; align-items: center; min-width: auto; padding-bottom: 9px; }
@media (max-width: 900px) {
  .recipe-egg-row-v08 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .recipe-egg-row-v08 label { min-width: 0; }
  .recipe-egg-row-v08 .recipe-egg-measured-v08 { grid-column: 1 / -1; padding-bottom: 0; }
}
@media (max-width: 460px) {
  .recipe-egg-row-v08 { grid-template-columns: minmax(0, 1fr); }
}
  
/* No regular navigation, customization or shortcut can re-enable these views. */
html:not([data-incubation-active="schedule-board"]) #schedule .lab-task-board-section,
html:not([data-incubation-active="schedule-rhythm"]) #schedule .lab-rhythm-section,
html[data-incubation-active="schedule-board"] #schedule > :not(.lab-task-board-section),
html[data-incubation-active="schedule-rhythm"] #schedule > :not(.lab-rhythm-section) {
  display: none !important;
}
[data-go="components"], [data-go="works"], [data-go="business"],
[data-mobile-me-view="components"], [data-mobile-me-view="works"], [data-mobile-me-view="business"],
#sidebarNavigation [data-view="components"],
#sidebarNavigation [data-view="works"],
#sidebarNavigation [data-view="business"],
[data-sidebar-row="components"], [data-sidebar-row="works"], [data-sidebar-row="business"],
html:not([data-incubation-active="components"]) #components,
html:not([data-incubation-active="works"]) #works,
html:not([data-incubation-active="business"]) #business,
html:not([data-incubation-active="components"]) [data-new-assembly-recipe],
html:not([data-incubation-active="components"]) [data-new-assembly-version],
html:not([data-incubation-active="components"]) [data-edit-assembly-recipe],
html:not([data-incubation-active="components"]) [data-open-component-detail],
html:not([data-incubation-active="works"]) [data-add-recipe-photo] {
  display: none !important;
}
.incubation-catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.incubation-catalog-item {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--line, #ded7ce);
  border-radius: 16px;
  background: var(--paper, #fffaf4);
}
.incubation-catalog-item h3 { margin: 0 0 10px; }
.incubation-catalog-item p { line-height: 1.7; }
.incubation-module-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px 16px;
  border: 1px solid var(--line, #ded7ce);
  border-radius: 12px;
  background: var(--paper, #fffaf4);
}
.incubation-module-banner[hidden] { display: none !important; }
.incubation-module-banner small { display: block; margin-top: 5px; }
@media (max-width: 900px) {
  .incubation-catalog-grid { grid-template-columns: 1fr; gap: 12px; }
  .incubation-catalog-item { padding: 16px; }
}

/* Login analytics only: preserve the surrounding desktop workbench. */
#v07AdminPanel #v07AdminEngagementChart { height: 210px; padding: 24px 4px 0; gap: 5px; background: none; }
#v07AdminPanel #v07AdminEngagementChart .v07-admin-engagement-chart-item {
  padding: 0; border: 0; border-radius: 4px; background: transparent;
  color: inherit; font: inherit; cursor: pointer;
  min-width: 37px; grid-template-rows: minmax(0, 1fr) 26px;
}
#v07AdminPanel #v07AdminEngagementChart .v07-admin-engagement-chart-item:hover { background: #f7eee4; }
#v07AdminPanel #v07AdminEngagementChart .v07-admin-engagement-chart-item:focus-visible { outline: 2px solid #ad4f2f; outline-offset: -2px; }
#v07AdminPanel #v07AdminEngagementChart .v07-admin-engagement-chart-bar-area { position: relative; border-bottom: 1px solid #eadfd3; }
#v07AdminPanel #v07AdminEngagementChart .v07-admin-engagement-chart-label {
  display: block; position: static; transform: none; width: auto; overflow: visible;
  color: #776153; font-size: 11px; line-height: 22px; text-overflow: clip; white-space: nowrap;
}
#v07AdminPanel #v07AdminEngagementChart .v07-admin-engagement-chart-label::after { content: none; }
.v07-admin-login-bar-value { position: absolute; left: 0; right: 0; margin-bottom: 3px; color: #6a4b39; font-size: 12px; text-align: center; pointer-events: none; }
.v07-admin-login-axis { display: flex; flex: 0 0 30px; flex-direction: column; justify-content: space-between; padding-bottom: 30px; color: #776153; font-size: 11px; text-align: right; position: sticky; left: 0; z-index: 2; background: #fffdf9; }
#v07AdminPanel[data-mobile-compact-ready] #v07AdminEngagementDashboard .v07-admin-engagement-trend-card h4 { display: block; }
.v07-admin-login-chart-note { margin: 10px 0; color: #806c5d; font-size: 12px; line-height: 1.6; }
.v07-admin-login-pages { display: flex; gap: 10px; margin-top: 12px; }
#v07AdminLoginDetails { margin-bottom: 12px; }
#v07AdminLoginDetails .v07-admin-engagement-attention-item { grid-template-columns: minmax(0, 1fr) auto; }
#v07AdminLoginDetails .v07-admin-engagement-attention-copy > strong { font-size: 14px; }
#v07AdminLoginDetails .v07-admin-engagement-attention-copy > small { font-size: 12px; line-height: 1.65; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
#v07AdminPanel #v07AdminLoginDetails #v07AdminLoginDetailsState { display: block; user-select: text; overflow-wrap: anywhere; }
.v07-admin-engagement-metric [data-login-period] { margin-top: 8px; min-height: 36px; white-space: normal; }
@media (max-width: 900px) {
  #v07AdminLoginDetails .v07-admin-engagement-attention-item { grid-template-columns: minmax(0, 1fr); }
  #v07AdminLoginDetails button, .v07-admin-engagement-metric [data-login-period] { min-height: 44px; }
  #v07AdminLoginDetails button { font-size: 12px; }
}

/* Scoped optional panels only; no list columns, sidebar, or layout rewrite. */
.nutrition-editor, .nutrition-estimate {
  margin: 12px 0; padding: 12px; border: 1px solid #d9d2c7;
  border-radius: 10px; background: #faf8f3; color: #403c34;
  white-space: normal; min-width: 0; text-align: left;
}
.nutrition-editor summary, .nutrition-estimate summary { cursor: pointer; font-weight: 650; padding: 4px 0; }
.nutrition-editor p, .nutrition-estimate p { font-size: 13px; line-height: 1.65; margin: 10px 0; overflow-wrap: anywhere; }
.nutrition-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.nutrition-controls { min-width: 0; margin: 0; padding: 0; border: 0; }
.nutrition-fields label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; min-width: 0; }
.nutrition-fields input, .nutrition-fields select {
  box-sizing: border-box; width: 100%; min-width: 0; min-height: 40px;
  padding: 8px; background: white; border: 1px solid #cbc2b4; border-radius: 6px; color: inherit;
}
.nutrition-editor button { padding: 9px 12px; border: 1px solid #94765e; border-radius: 6px; background: #fff; color: #60452e; }
.nutrition-estimate [data-nutrition-confirm-portions] { padding: 8px 10px; white-space: normal; border: 1px solid #b7a491; border-radius: 6px; background: white; color: #60452e; }
.nutrition-status, .nutrition-disclaimer { user-select: text; -webkit-user-select: text; }
.nutrition-warning { color: #8d4f21; font-weight: 600; }
.nutrition-rows { padding-left: 20px; font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }
.nutrition-rows li { margin: 8px 0; }
.nutrition-result { padding: 12px; border-radius: 8px; background: #fff; border: 1px solid #e5ded2; }
.nutrition-result > strong { font-size: 16px; line-height: 1.6; }
.nutrition-subheading { font-size: 14px; margin: 18px 0 8px; }
.nutrition-breakdown, .nutrition-method { margin: 12px 0; border-top: 1px solid #e5ded2; padding-top: 8px; }
.nutrition-missing { margin-top: 12px; }
.nutrition-editor :disabled { cursor: not-allowed; opacity: .65; }
.nutrition-editor :focus-visible, .nutrition-estimate :focus-visible { outline: 2px solid #a35a36; outline-offset: 3px; }
@media (max-width: 900px) {
  .nutrition-editor, .nutrition-estimate { margin: 12px 0; padding: 12px; }
}
@media (max-width: 420px) {
  .nutrition-fields { grid-template-columns: 1fr; }
}

/* Explicit product dialogs and opt-in desktop energy column only. */
@media (min-width: 901px) {
  .mpe-energy-toggle[aria-pressed="true"] { color: #945335; background: #f7eee5; border-color: #c9a58c; }
  #costMaterialsPanel .price-table.mpe-energy-table { min-width: 1080px; }
  #costMaterialsPanel .price-table .mpe-energy-cell {
    width: 132px; min-width: 112px; padding-left: 16px; padding-right: 20px;
    text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;
  }
  #costMaterialsPanel .price-table td.mpe-energy-cell { color: #6b5140; font-size: 14px; font-weight: 550; }
  #costMaterialsPanel .price-table th.mpe-energy-cell { font-size: 13px; }
  .dmc-product-actions > .mpe-row-delete {
    min-width: 44px; min-height: 40px; padding: 8px 9px;
    color: #a25b48; background: transparent; border: 1px solid transparent;
    border-radius: 8px; font-size: 13px; cursor: pointer; white-space: nowrap;
  }
  .dmc-product-actions > .mpe-row-delete:hover { background: #fff1eb; border-color: #edcec2; color: #963e29; }
  .dmc-product-actions > .mpe-row-delete:focus-visible { outline: 2px solid #a65736; outline-offset: 2px; }
}
@media (max-width: 900px) {
  .mpe-energy-toggle, .mpe-energy-cell { display: none !important; }
}
body.mpe-open { overflow: hidden; }
.mpe-name-choice { display: flex; flex-direction: column; gap: 8px; font-size: 13px; min-width: 0; }
.mpe-name-choice > span { color: #756658; }
.mpe-name-choice strong { font-weight: 500; overflow-wrap: anywhere; }
.mpe-inherit { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.mpe-inherit input { width: 18px; height: 18px; }
.mpe-dialog [hidden] { display: none !important; }
.mpe-material-info .material-group-editor { padding-top: 16px; padding-bottom: 16px; }
.mpe-backdrop {
  position: fixed; inset: 0; z-index: 18000; background: rgb(41 34 28 / 32%);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  box-sizing: border-box; color: #403b35;
}
.mpe-dialog {
  width: 540px; max-width: 100%; max-height: calc(100dvh - 48px);
  display: flex; flex-direction: column; background: #fffdfa;
  border: 1px solid #e7ded2; border-radius: 18px; box-shadow: 0 16px 64px rgb(40 30 20 / 18%);
  overflow: hidden; text-align: left;
}
.mpe-header { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px 18px; border-bottom: 1px solid #eee8df; }
.mpe-header p { font-size: 12px; margin: 0 0 5px; color: #8c7d6e; overflow-wrap: anywhere; }
.mpe-header h2 { font-size: 21px; margin: 0; line-height: 1.4; }
.mpe-dialog button { border: 1px solid #dfd4c7; border-radius: 9px; background: #fffdfa; color: #685444; padding: 9px 18px; min-height: 42px; cursor: pointer; }
.mpe-dialog .mpe-close { padding: 0; width: 42px; flex: 0 0 42px; font-size: 26px; border: 0; background: transparent; }
.mpe-form { display: flex; flex-direction: column; min-height: 0; margin: 0; overflow: hidden; }
.mpe-body { padding: 22px 24px; overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.mpe-controls, .mpe-energy-controls { padding: 0; border: 0; margin: 0; min-width: 0; }
.mpe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.mpe-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; font-size: 13px; font-weight: 500; }
.mpe-field > span { color: #756658; }
.mpe-field input, .mpe-field select {
  font: inherit; font-size: 15px; width: 100%; min-width: 0; box-sizing: border-box;
  height: 44px; border: 1px solid #dbd2c6; border-radius: 8px; padding: 10px 12px;
  background: white; color: #403b35;
}
.mpe-field input::placeholder { color: #a99e90; font-size: 13px; }
.mpe-spec { display: grid; grid-template-columns: minmax(0, 1fr) 76px; gap: 6px; }
.mpe-spec select { padding-left: 10px; padding-right: 4px; }
.mpe-price-preview { font-size: 12px; margin: 14px 0 24px; color: #8b7a68; }
.mpe-price-preview strong { color: #645347; margin-left: 8px; font-weight: 500; }
.mpe-nutrition { border-top: 1px solid #ece5db; border-bottom: 1px solid #ece5db; }
.mpe-nutrition > summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 15px 0; cursor: pointer; font-size: 14px; list-style: none; }
.mpe-nutrition > summary::-webkit-details-marker { display: none; }
.mpe-nutrition > summary > span:first-child::before { content: "›"; display: inline-block; width: 16px; color: #947960; }
.mpe-nutrition[open] > summary > span:first-child::before { content: "⌄"; }
.mpe-nutrition summary small { font-size: 11px; color: #988877; margin-left: 6px; font-weight: 400; }
.mpe-summary-value { color: #978572; font-size: 11px; text-align: right; }
.mpe-energy-row { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 12px; }
.mpe-hint { font-size: 12px; line-height: 1.6; color: #968574; margin: 10px 0 16px; }
.mpe-source .mpe-grid { margin-top: 12px; }
.mpe-energy-controls .mpe-field { gap: 5px; }
.mpe-energy-controls .mpe-source .mpe-grid { gap: 12px; }
.mpe-energy-hint { margin: 10px 0 14px; }
.mpe-create-primary { display: grid; gap: 18px; }
.mpe-create-primary .mpe-hint { margin: -9px 0 20px; }
.mpe-procurement { border-top: 1px solid #ece5db; }
.mpe-procurement > summary { padding: 16px 0; cursor: pointer; color: #685444; font-size: 14px; }
.mpe-procurement > summary small { display: inline-block; color: #9a8978; font-size: 11px; margin-left: 8px; }
.mpe-procurement > .mpe-grid { margin-top: 8px; }
.mpe-footer { padding: 16px 24px 20px; border-top: 1px solid #eee8df; background: #fffdfa; display: flex; align-items: center; gap: 14px; justify-content: space-between; }
.mpe-footer > p { font-size: 12px; color: #94816d; margin: 0; line-height: 1.55; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.mpe-footer > div { display: flex; gap: 8px; flex-shrink: 0; }
.mpe-dialog .mpe-save { background: #a65736; color: white; border-color: #a65736; min-width: 80px; }
.mpe-footer .mpe-error { color: #ab422d; }
.mpe-dialog :disabled { cursor: not-allowed; opacity: .6; }
.mpe-dialog :focus-visible { outline: 2px solid #ac6543; outline-offset: 3px; }
@media (max-width: 900px) {
  .mpe-backdrop { padding: 16px; }
  .mpe-dialog { max-height: calc(100dvh - 32px); }
}
@media (max-width: 480px) {
  .mpe-backdrop { padding: 0; align-items: stretch; }
  .mpe-dialog { width: 100%; max-height: 100dvh; border: 0; border-radius: 0; }
  .mpe-header { padding: 18px 20px 16px; padding-top: max(18px, env(safe-area-inset-top)); }
  .mpe-body { padding: 22px 20px; flex: 1; }
  .mpe-form { flex: 1; }
  .mpe-grid { grid-template-columns: 1fr; gap: 18px; }
  .mpe-field input, .mpe-field select { font-size: 16px; min-height: 46px; }
  .mpe-price-preview { margin-bottom: 24px; }
  .mpe-energy-row { grid-template-columns: minmax(0, 1fr) 126px; gap: 10px; }
  .mpe-footer { flex-direction: column; align-items: stretch; padding: 14px 20px max(18px, env(safe-area-inset-bottom)); gap: 10px; }
  .mpe-footer > div { justify-content: flex-end; }
  .mpe-footer > div button { flex: 1; }
}

/* Explicit cross-device availability policy, not a mobile visual redesign. */
html:not([data-assessment-incubation-active]) #labInventoryAssessmentPanel,
html:not([data-assessment-incubation-active]) [data-lab-new-assessment],
html:not([data-assessment-incubation-active]) [data-lab-edit-assessment],
html:not([data-assessment-incubation-active]) [data-lab-delete-assessment],
html:not([data-assessment-incubation-active]) #labAssessmentEditor,
html[data-assessment-incubation-active] #materials > :not(#labInventoryAssessmentPanel):not(#assessmentIncubationBanner):not(.lab-modal) {
  display: none !important;
}

  
/* Hide both desktop select and mobile type chips; keep legacy data adapter. */
#labScheduleForm [data-schedule-fixed-type],
#labScheduleForm [data-schedule-fixed-status],
#labScheduleForm .v07-plan-type-switch {
  display: none !important;
}

/* Additive local candidate. Existing desktop density/layout stays untouched. */
.cost-confidence {
  margin: 12px 0;
  padding: 12px 14px;
  border: 1px solid var(--line, #ddd);
  border-left: 3px solid #60806a;
  border-radius: 10px;
  background: var(--surface-raised, var(--card, #fff));
  color: var(--ink, #292929);
  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: anywhere;
  user-select: text;
}
.cost-confidence.is-partial { border-left-color: #b47838; }
.cost-confidence.is-estimated { border-left-color: #967044; }
.cost-confidence p { margin: 6px 0; }
.cost-confidence ul { margin: 8px 0; padding-left: 20px; }
.cost-confidence li + li { margin-top: 7px; }
.cost-confidence small { display: block; color: var(--muted, #666); }
.cost-confidence summary { cursor: pointer; padding: 8px 0; font-weight: 600; }
.cost-confidence summary:focus-visible,
.cost-confidence select:focus-visible { outline: 2px solid #60806a; outline-offset: 3px; }
.cost-confidence select { max-width: 100%; padding: 7px; border: 1px solid var(--line, #ddd); border-radius: 6px; }
.cost-confidence [data-open-recipe] { display: block; margin-top: 4px; }
.cost-confidence-tag { display: inline-block; font-size: 11px; color: #856138; margin-left: 5px; }
@media (max-width: 900px) {
  .cost-confidence { padding: 10px 12px; }
  .cost-confidence-impact label { display: grid; gap: 5px; }
  .cost-confidence-impact select { width: 100%; min-height: 44px; }
  .cost-confidence summary { min-height: 44px; display: flex; align-items: center; }
  .cost-confidence [data-open-recipe] { min-height: 44px; }
}

/* Only desktop trial. Mobile and the public material catalog remain unchanged. */
.dtl-material-switch { display: none; }
@media (min-width: 901px) {
  #costMaterialsPanel .dtl-material-switch { display: inline-flex; gap: 4px; }
  #costMaterialsPanel .dtl-material-switch [aria-pressed="true"] {
    color: var(--rust); border-color: var(--rust); background: var(--paper);
  }
  #costMaterialsPanel.dtl-no-images .material-group-main { min-width: 140px; }
  #costMaterialsPanel.dtl-no-images .material-group-row td {
    padding-block: 10px; border-top-width: 1px;
  }
  #costMaterialsPanel.dtl-no-images .material-group-row .material-price-image-editor,
  #costMaterialsPanel.dtl-no-images .dmc-reading .material-product-image-editor { display: none; }
  #costMaterialsPanel.dtl-no-images .material-group-copy strong { font-size: 14px; }
  #recipes .rd-list .rd-list-head, #recipes .rd-list .rd-row {
    grid-template-columns: minmax(200px, 2fr) minmax(120px, 1fr) minmax(180px, 1fr) 104px;
    gap: 18px; padding: 14px 18px;
  }
  #recipes .rd-list .rd-list-head > :nth-child(2),
  #recipes .rd-list .rd-list-head > :nth-child(3),
  #recipes .rd-list .rd-list-head > :nth-child(4),
  #recipes .rd-list .rd-list-head > :nth-child(6),
  #recipes .rd-list .rd-list-head > :nth-child(7),
  #recipes .rd-list .rd-row > :nth-child(2),
  #recipes .rd-list .rd-row > :nth-child(3),
  #recipes .rd-list .rd-row > :nth-child(4),
  #recipes .rd-list .rd-row > :nth-child(6),
  #recipes .rd-list .rd-row > :nth-child(7) { display: none; }
  #recipes .rd-list .rd-row > :nth-child(5),
  #recipes .rd-list .rd-list-head > :nth-child(5) { grid-column: 2; grid-row: 1; }
  #recipes .rd-list .rd-action-space,
  #recipes .rd-list .rd-list-head > :nth-child(8) { grid-column: 4; grid-row: 1; }
  #recipes .rd-list .dtl-cost, #recipes .rd-list .dtl-cost-head {
    grid-column: 3; grid-row: 1; text-align: right;
  }
  #recipes .rd-list .dtl-cost strong { display: block; font-size: 16px; }
  #recipes .rd-list .dtl-cost small { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; }
  #recipes .rd-list .rd-row-title { font-size: 15px; }
  #recipes .rd-list .dtl-recipe-meta { line-height: 1.5; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  #recipes .rd-list .rd-list-head, #recipes .rd-list .rd-row {
    grid-template-columns: minmax(140px, 2fr) minmax(85px, 1fr) minmax(130px, 1fr) 100px;
    gap: 10px; padding-inline: 12px;
  }
}

#recipes .rc-trial-view-toggle { display: none; }
/* Desktop catalog: same two-button convention as the private library.
   Keep the established mobile surface and full-card touch targets untouched. */
@media (min-width: 901px) {
  #recipes .rc-trial-panel { padding: 8px 0 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  #recipes .rc-trial-head { align-items: center; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 22px; }
  #recipes .rc-trial-head h2 { display: none; }
  #recipes .rc-trial-head p { font-size: 13px; line-height: 1.6; }
  #recipes .rc-trial-head-actions { margin-left: auto; }
  #recipes .rc-trial-view-toggle { display: flex; gap: 3px; order: 1; }
  #recipes .rc-trial-head button { min-height: 32px; padding: 5px 10px; border-radius: 8px; font-size: 12px; color: var(--muted); }
  #recipes .rc-trial-view-toggle button[aria-pressed="true"] { color: var(--rust); background: color-mix(in srgb, var(--rust) 8%, var(--card)); }
  #recipes .rc-trial-grid { gap: 20px 28px; }
  #recipes .rc-trial-card { min-width: 0; padding: 16px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
  #recipes .rc-trial-category { padding: 0; border-radius: 0; background: transparent; color: var(--muted); font-size: 12px; font-weight: 400; }
  #recipes .rc-trial-card h3 { margin: 8px 0; line-height: 1.4; overflow-wrap: anywhere; }
  #recipes .rc-trial-card-summary { margin: 0 0 10px; font-size: 12px; }
  #recipes .rc-trial-card .rc-trial-credit { margin: 0 0 10px; font-size: 12px; }
  #recipes .rc-trial-card button { padding: 6px 0; border: 0; border-radius: 0; background: transparent; color: var(--rust); font-size: 13px; }
  #recipes .rc-trial-card button:hover { text-decoration: underline; }
  #recipes .rc-trial-list { display: flex; flex-direction: column; gap: 0; }
  #recipes .rc-trial-list-head,
  #recipes .rc-trial-list .rc-trial-card { display: grid; grid-template-columns: minmax(180px, 2fr) 80px minmax(110px, 1fr) minmax(90px, 1fr) 100px; align-items: center; gap: 16px; padding: 16px 12px; }
  #recipes .rc-trial-list-head { border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
  #recipes .rc-trial-list .rc-trial-card { min-height: 70px; }
  #recipes .rc-trial-list .rc-trial-card:hover { background: color-mix(in srgb, var(--rust) 3%, transparent); }
  #recipes .rc-trial-list .rc-trial-card h3 { grid-column: 1; grid-row: 1; margin: 0; font-size: 15px; }
  #recipes .rc-trial-list .rc-trial-category { grid-column: 2; grid-row: 1; }
  #recipes .rc-trial-list .rc-trial-card-summary { grid-column: 3; grid-row: 1; margin: 0; }
  #recipes .rc-trial-list .rc-trial-credit { grid-column: 4; grid-row: 1; margin: 0; overflow-wrap: anywhere; }
  #recipes .rc-trial-list .rc-trial-card button { grid-column: 5; grid-row: 1; text-align: left; }
  #recipes .rc-trial-view-toggle button:focus-visible,
  #recipes .rc-trial-card button:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }
}

/* All presentation changes are strictly mobile-only. Desktop CSS unchanged. */
@media (max-width: 900px) {
  #me.mp-enabled {
    --mp-surface: var(--card, #fffdfa);
    --mp-line: var(--line, rgba(85,65,49,.12));
    --mp-accent: var(--rust-dark, #934c33);
    --mp-muted: var(--muted, #6b6b60);
    display: none;
  }
  #me.mp-enabled.active { display: block; padding-top: 12px; }
  #me.mp-enabled > :not(#mpMe) { display: none !important; }
  #mpMe [hidden] { display: none !important; }
  #mpMe[data-has-identity="true"] #mobileMeLoginAction { display: none !important; }
  #mpMe { color: var(--ink); padding-bottom: 24px; }
  #mpMe h1, #mpMe h2, #mpMe h3 { font-family: inherit; }
  #mpMe *, #mpMe *::before, #mpMe *::after { box-sizing: border-box; }
  #mpMe button, #mpMe a { -webkit-tap-highlight-color: transparent; }
  #mpMe button { font: inherit; cursor: pointer; }
  #mpMe svg { width: 22px; height: 22px; flex-shrink: 0; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  #mpMe button:focus-visible, #mpMe a:focus-visible { outline: 2px solid var(--mp-accent); outline-offset: 3px; }
  #mpMe button:active, #mpMe a:active { background-color: color-mix(in srgb, var(--mp-accent) 9%, transparent); }
  #mpMe .mp-home-head { display: flex; align-items: center; justify-content: space-between; min-height: 48px; margin-bottom: 16px; }
  #mpMe .mp-home-head h1 { margin: 0; font-size: 24px; line-height: 1.3; font-weight: 750; letter-spacing: -.03em; }
  #mpMe .mp-settings { display: flex; align-items: center; gap: 6px; min-height: 48px; min-width: 64px; padding: 0 4px 0 12px; border: 0; border-radius: 12px; background: transparent; color: var(--mp-muted); font-size: 14px; }
  #mpMe .mp-settings svg { width: 19px; height: 19px; }
  #mpMe .mp-profile { border: 1px solid var(--mp-line); border-radius: 20px; background: var(--mp-surface); overflow: hidden; margin-bottom: 28px; }
  #me.mp-enabled #mpMe .mobile-me-identity-card { display: flex; align-items: center; gap: 14px; margin: 0; padding: 22px 20px 18px; border: 0; background: transparent; border-radius: 0; }
  #mpMe .mobile-me-avatar { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 17px; font-size: 24px; box-shadow: none; }
  #mpMe .mobile-me-identity-copy { min-width: 0; gap: 5px; }
  #mpMe .mobile-me-identity-copy strong { font-size: 22px; line-height: 1.3; font-family: inherit; overflow-wrap: anywhere; white-space: normal; }
  #mpMe .mobile-me-identity-copy > span { font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; white-space: normal; color: var(--mp-muted); }
  #mpMe .mobile-me-status { display: none; }
  #mpMe .mp-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 13px 16px; border: 0; border-radius: 0; background: transparent; color: var(--ink); text-align: left; text-decoration: none; }
  #mpMe .mp-row > svg:last-child { width: 16px; height: 16px; color: var(--mp-muted); }
  #mpMe .mp-row-icon { display: grid; place-items: center; color: var(--mp-accent); flex: 0 0 22px; }
  #mpMe .mp-row-label { flex: 1; font-size: 15px; line-height: 1.5; min-width: 0; }
  #mpMe .mp-row-detail { margin-left: auto; max-width: 46%; color: var(--mp-muted); font-size: 12px; line-height: 1.5; text-align: right; overflow-wrap: anywhere; }
  #mpMe .mp-workspace { border-top: 1px solid var(--mp-line); min-height: 54px; padding: 12px 20px; gap: 9px; }
  #mpMe .mp-workspace .mp-row-icon svg { width: 18px; height: 18px; }
  #mpMe .mp-workspace-name { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 13px; line-height: 1.5; }
  #mpMe .mp-workspace-role { flex-shrink: 0; color: var(--mp-muted); font-size: 12px; }
  #mpMe .mp-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
  #mpMe .mp-section-head h2 { margin: 0; font-size: 16px; line-height: 1.5; font-weight: 700; }
  #mpMe .mp-section-head button { display: flex; align-items: center; justify-content: flex-end; gap: 2px; min-height: 48px; padding: 0 0 0 8px; color: var(--mp-muted); font-size: 12px; border: 0; border-radius: 8px; background: transparent; }
  #mpMe .mp-section-head svg { width: 14px; height: 14px; }
  #mpMe .mp-shortcut-grid, #mpMe .mp-tool-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px 0; }
  #me.mp-enabled #mpMe .mobile-me-module-button { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 9px; min-height: 86px; min-width: 0; padding: 8px 2px; margin: 0; border: 0; border-radius: 12px; background: transparent; box-shadow: none; color: var(--ink); text-decoration: none; transform: none; }
  #me.mp-enabled #mpMe .mobile-me-module-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; color: var(--mp-accent); background: color-mix(in srgb,var(--mp-accent) 7%,var(--mp-surface)); box-shadow: none; }
  #me.mp-enabled #mpMe .mobile-me-module-icon svg { width: 23px; height: 23px; }
  #mpMe .mobile-me-module-label { font-size: 12px; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; }
  #mpMe .mp-shortcuts { margin-bottom: 24px; }
  #mpMe .mp-menu { overflow: hidden; background: var(--mp-surface); border: 1px solid var(--mp-line); border-radius: 18px; }
  #mpMe .mp-menu .mp-row + .mp-row { border-top: 1px solid var(--mp-line); }
  #mpMe .mp-warning .mp-row-detail { color: var(--mp-accent); font-weight: 600; }
  #mpMe .mp-footer { margin: 24px 0 0; font-size: 12px; line-height: 1.5; text-align: center; color: var(--mp-muted); }
  #mpMe .mp-screen-head { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; min-height: 56px; margin: 0 0 20px; }
  #mpMe .mp-screen-head h2 { margin: 0; font-size: 19px; line-height: 1.4; text-align: center; }
  #mpMe .mp-screen-head h2:focus { outline: none; }
  #mpMe .mp-back { display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); }
  #mpMe .mp-tool-group { padding: 0 0 20px; margin-bottom: 20px; border-bottom: 1px solid var(--mp-line); }
  #mpMe .mp-tool-group h3 { font-size: 14px; font-weight: 650; margin: 0 0 10px; color: var(--mp-muted); }
  #mpMe .mobile-me-module-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); }
  #mpMe .mobile-me-module-grid > [data-product-support],
  #mpMe .mobile-me-module-grid > [data-mobile-me-action],
  #mpMe .mobile-me-module-grid > [data-mobile-me-view="business"] { display: none !important; }
  #me.mp-enabled #mpMe .mobile-me-card { padding: 20px; margin: 0; border: 1px solid var(--mp-line); border-radius: 18px; background: var(--mp-surface); box-shadow: none; }
  #mpMe .mobile-me-kicker, #mpMe .eyebrow, #mpMe .mobile-me-card-mark,
  #mpMe .mobile-me-action-card .mobile-me-card-head { display: none !important; }
  #mpMe .mobile-me-card-head { margin-bottom: 8px; }
  #mpMe .mobile-me-card-head h2 { margin: 0; font-size: 16px; }
  #mpMe .mobile-me-detail-list { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; }
  #mpMe .mobile-me-detail-list > div { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--mp-line); }
  #mpMe .mobile-me-detail-list span { font-size: 13px; color: var(--mp-muted); }
  #mpMe .mobile-me-detail-list strong { font-size: 14px; max-width: 65%; overflow-wrap: anywhere; text-align: right; }
  #mpMe .mobile-me-card-note, #mpMe .mp-sync-explanation, #mpMe .mp-settings-note { font-size: 13px; line-height: 1.8; color: var(--mp-muted); margin: 16px 0 0; }
  #mpMe .mp-sync-live { margin: 0 0 16px; padding: 16px; border: 1px solid var(--mp-line); border-radius: 14px; background: var(--mp-surface); font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; user-select: text; }
  #mpMe .mobile-me-action-list { display: grid; gap: 0; }
  #me.mp-enabled #mpMe .mobile-me-action { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 13px 0; border: 0; border-bottom: 1px solid var(--mp-line); border-radius: 0; background: transparent; transform: none; }
  #me.mp-enabled #mpMe .mobile-me-action:last-child { border-bottom: 0; }
  #mpMe .mobile-me-action-icon { width: 24px; height: 24px; flex: 0 0 24px; color: var(--mp-accent); border-radius: 0; background: transparent; }
  #mpMe .mobile-me-action-copy strong { font-size: 15px; white-space: normal; }
  #mpMe .mobile-me-action-copy small { display: none; }
  #mpMe .mobile-me-action-arrow { font-size: 20px; }
  #mpMe .mp-about-brand { text-align: center; margin: 24px 0 32px; }
  #mpMe .mp-about-logo { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; color: var(--mp-accent); background: color-mix(in srgb,var(--mp-accent) 9%,var(--mp-surface)); }
  #mpMe .mp-about-logo svg { width: 30px; height: 30px; }
  #mpMe .mp-about-brand h3 { margin: 16px 0 6px; font-size: 22px; }
  #mpMe .mp-about-brand p, #mpMe .mp-channel { font-size: 13px; line-height: 1.6; color: var(--mp-muted); margin: 6px 0; }
  #me.mp-enabled #mpMe [data-mp-screen="about"] > .mobile-me-module-button { flex-direction: row; justify-content: flex-start; min-height: 58px; padding: 13px 16px; }
  #me.mp-enabled #mpMe [data-mp-screen="about"] > .mobile-me-module-button .mobile-me-module-icon { width: 22px; height: 22px; background: transparent; }
  #mpMe [data-mp-screen="about"] > .mobile-me-module-button .mobile-me-module-label { font-size: 15px; }
  #mpMe .mobile-me-site-info-card { display: block; margin-top: 24px !important; padding: 16px 0 !important; border: 0 !important; background: transparent !important; text-align: center; }
  #mpMe .mobile-me-site-info-card .mobile-me-card-head { display: none; }
  #mpMe .mobile-me-site-info-copy { justify-items: center; font-size: 12px; line-height: 1.7; user-select: text; }
  #mpMe .mobile-me-site-info-copy > span { display: none; }
  #mpMe .mobile-me-site-info-copy a { display: inline-flex; align-items: center; min-height: 48px; max-width: 100%; overflow-wrap: anywhere; }
}
@media (max-width: 360px) {
  #mpMe .mp-profile .mobile-me-identity-card { padding-left: 16px; padding-right: 16px; }
  #mpMe .mp-row { gap: 8px; padding-left: 12px; padding-right: 12px; }
  #mpMe .mp-row-label { font-size: 14px; }
  #mpMe .mp-row-detail { font-size: 11px; }
  #mpMe .mp-workspace { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  #mpMe button, #mpMe a { transition: none !important; animation: none !important; }
}

/* Scoped addition. Existing desktop/mobile information architecture is unchanged. */
#v07AdminAdministratorsList .v07-delegation-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border: 1px solid var(--line, #e5d7ca); border-radius: 16px; padding: 18px; margin-top: 12px;
}
.v07-delegation-row > div { min-width: 0; overflow-wrap: anywhere; }
.v07-delegation-row p { margin: 8px 0 0; }
.v07-delegation-badge { display: inline-block; margin: 4px 8px; font-size: 13px; font-weight: 700; color: var(--accent, #9a3f22); }
#v07DelegationDialog {
  box-sizing: border-box; width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 32px);
  padding: 24px; overflow: auto; border: 1px solid var(--line, #e5d7ca); border-radius: 22px;
  color: var(--ink, #43352c); background: var(--card, #fffaf3); font: inherit;
}
#v07DelegationDialog::backdrop { background: rgb(35 27 21 / 50%); }
.v07-delegation-dialog-heading, .v07-delegation-dialog-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.v07-delegation-dialog-heading h2 { margin: 0; font-size: 24px; }
#v07DelegationDialog label { display: block; margin: 14px 0 6px; font-weight: 700; }
#v07DelegationDialog input, #v07DelegationDialog select {
  box-sizing: border-box; width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--line, #cdb7a5);
  border-radius: 10px; background: var(--paper, #fffaf3); color: inherit; font: inherit;
}
#v07DelegationDialog button, #v07AdminAdministratorsSection button { min-height: 44px; cursor: pointer; }
#v07DelegationDialog button {
  padding: 10px 16px; border: 1px solid var(--line, #e5d7ca); border-radius: 12px;
  color: var(--rust-dark, #74321f); background: var(--card, #fffaf3); font: inherit; font-weight: 700;
}
#v07DelegationDialog button:disabled { opacity: .55; cursor: wait; }
#v07DelegationDialog button.v07-admin-primary {
  background: var(--rust, #a34d2e) !important; border-color: var(--rust, #a34d2e) !important; color: #fffaf2 !important;
}
#v07DelegationDialog :focus-visible { outline: 3px solid var(--accent, #9a3f22); outline-offset: 3px; }
#v07DelegationDialog p { line-height: 1.7; overflow-wrap: anywhere; }
#v07DelegationDialog [hidden] { display: none !important; }
#v07DelegationError { min-height: 1.7em; color: #8f271c; user-select: text; }
.v07-delegation-helper { font-size: 13px; }
@media (max-width: 900px) {
  #v07AdminAdministratorsList .v07-delegation-row { align-items: stretch; flex-direction: column; }
  #v07DelegationDialog { padding: 18px; }
  #v07AdminAdministratorsSection button, #v07DelegationDialog button { min-height: 48px; }
}