*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: system-ui, -apple-system, sans-serif;
      font-size: 15px;
      line-height: 1.5;
      color: #1a1a1a;
      background: #f7f6f3;
      padding: 24px 16px 48px;
    }

    .container { max-width: 1080px; margin: 0 auto; }

    /* ── two-column app layout ── */
    .app-layout { display: flex; gap: 24px; align-items: flex-start; }
    .app-main { flex: 1; min-width: 0; }

    .collection-sidebar {
      width: 162px;
      flex-shrink: 0;
      position: sticky;
      top: 24px;
      background: #fff;
      border: 1px solid #ddd;
      padding: 14px 14px 12px;
    }
    .collection-sidebar-label {
      font-size: 0.75rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.06em;
      color: #444;
    }
    .collection-sidebar-hint {
      font-size: 0.71rem; color: #6b6b6b;
      line-height: 1.4; margin-bottom: 10px;
    }
    .collection-brand-check {
      display: flex; align-items: center; gap: 6px;
      padding: 3px 0; font-size: 0.83rem;
      cursor: pointer; user-select: none; line-height: 1.3;
    }
    .collection-brand-check input { cursor: pointer; flex-shrink: 0; }
    .collection-sidebar-actions {
      margin-top: 10px; padding-top: 8px; border-top: 1px solid #eee;
      display: flex; gap: 6px;
    }
    .collection-action-btn {
      font: inherit; font-size: 0.72rem;
      background: none; border: 1px solid #ccc; color: #555;
      padding: 2px 7px; cursor: pointer;
    }
    .collection-action-btn:hover { border-color: #999; color: #1a1a1a; }

    .collection-summary {
      list-style: none;
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 6px; cursor: default; user-select: none;
    }
    .collection-summary::-webkit-details-marker { display: none; }
    .collection-count { font-size: 0.72rem; color: #6b6b6b; font-weight: 400; text-transform: none; letter-spacing: 0; }

    @media (max-width: 720px) {
      .app-layout { flex-direction: column; }
      .app-main           { order: 1; }
      .collection-sidebar { order: 2; width: 100%; position: static; }
      /* results layout (was 660px) */
      .results-layout { flex-direction: column; }
      .color-sidebar { position: static; width: 100%; display: flex; gap: 14px; align-items: flex-start; }
      .color-sidebar-swatch { width: 60px; height: 60px; aspect-ratio: unset; flex-shrink: 0; }
      /* touch targets */
      .collection-brand-check { padding: 10px 4px; font-size: 0.95rem; }
      .collection-action-btn  { padding: 8px 14px; font-size: 0.85rem; }
      .tab-btn, .subtab-btn   { padding: 11px 16px; }
      /* collapsible sidebar (UI-11) */
      .collection-summary { cursor: pointer; }
      .collection-summary::after { content: '▾'; font-size: 0.8rem; color: #888; }
      .collection-details[open] .collection-summary::after { content: '▴'; }
      /* two-column brand grid (UI-12) */
      #brand-checkboxes { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
    }

    h1 { font-size: 1.4rem; font-weight: 700; margin-bottom: 2px; }
    .subtitle { color: #666; margin-bottom: 24px; font-size: 0.9rem; }

    h2 { font-size: 0.95rem; font-weight: 700; text-transform: uppercase;
         letter-spacing: 0.06em; color: #444; margin: 28px 0 10px; }

    /* ── form ── */
    form { background: #fff; border: 1px solid #ddd; padding: 18px 20px 16px; margin-bottom: 28px; }

    .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 14px; }

    .field { display: flex; flex-direction: column; gap: 3px; }
    .field label { font-size: 0.78rem; font-weight: 600; color: #555; text-transform: uppercase; letter-spacing: 0.04em; }

    input[type="text"], select {
      font: inherit;
      font-size: 16px;
      border: 1px solid #ccc;
      padding: 6px 8px;
      background: #fff;
      height: 34px;
    }
    input[type="text"]:focus, select:focus { outline: 2px solid #1a1a1a; outline-offset: 1px; }
    #query     { width: 100%; max-width: 290px; }
    #mood_color { width: 100%; max-width: 290px; }
    #mood_id    { width: 100%; max-width: 190px; }

    button[type="submit"] {
      font: inherit;
      font-weight: 600;
      background: #1a1a1a;
      color: #fff;
      border: none;
      padding: 0 18px;
      height: 34px;
      cursor: pointer;
    }
    button[type="submit"]:hover { background: #333; }

/* ── target paint ── */
    .target-card {
      display: flex; align-items: center; gap: 14px;
      background: #fff; border: 1px solid #ddd; padding: 12px 16px;
      margin-bottom: 6px;
    }
    .target-card .info { font-size: 0.88rem; color: #555; }
    .target-card strong { font-size: 1rem; }

    /* ── table ── */
    table { width: 100%; border-collapse: collapse; background: #fff; font-size: 0.88rem; }
    thead th {
      text-align: left; padding: 7px 10px;
      border-bottom: 2px solid #1a1a1a;
      font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em;
      background: #fff;
    }
    tbody tr:hover { background: #fafaf8; }
    td { padding: 6px 10px; border-bottom: 1px solid #e8e8e5; vertical-align: middle; }

    /* ── color swatches ── */
    .swatch {
      display: inline-block;
      width: 22px; height: 22px;
      border: 1px solid rgba(0,0,0,0.18);
      vertical-align: middle;
      flex-shrink: 0;
    }
    .swatch-lg {
      display: inline-block;
      width: 36px; height: 36px;
      border: 1px solid rgba(0,0,0,0.18);
      flex-shrink: 0;
    }
    .swatch-pair { display: flex; gap: 2px; }
    .swatch-pair .swatch { width: 11px; }

    /* target-vs-candidate side-by-side comparison swatch */
    .swatch-compare { display: flex; gap: 0; }
    .swatch-compare .swatch:first-child { border-right: none; }

    /* ── tags ── */
    .tag {
      display: inline-block;
      font-size: 0.65rem; font-weight: 700;
      background: #555; color: #fff;
      padding: 1px 4px; letter-spacing: 0.03em;
      vertical-align: middle; margin-left: 4px;
    }
    .tag.warn { background: #a06000; }

    /* ── quality badge ── */
    .quality {
      display: inline-block;
      font-size: 0.72rem; color: #555;
      font-variant-numeric: tabular-nums;
    }
    .de { font-variant-numeric: tabular-nums; }

    /* ── tabs ── */
    .tabs {
      display: flex; gap: 0; margin: 24px 0 0; border-bottom: 2px solid #1a1a1a;
      overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .tabs::-webkit-scrollbar { display: none; }
    .tab-btn {
      font: inherit; font-size: 0.82rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.06em;
      background: none; border: none; border-bottom: 2px solid transparent;
      padding: 8px 18px; margin-bottom: -2px; cursor: pointer; color: #777;
      white-space: nowrap; flex-shrink: 0;
    }
    .tab-btn:hover { color: #1a1a1a; }
    .tab-btn.active { color: #1a1a1a; border-bottom-color: #1a1a1a; background: #fff; }
    .tab-panel { display: none; }
    .tab-panel.active { display: block; }

    /* ── subtabs (harmony sub-navigation) ── */
    .subtab-group { margin-top: 16px; }
    .subtabs {
      display: flex; gap: 0; border-bottom: 1px solid #ccc; margin: 0;
      overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .subtabs::-webkit-scrollbar { display: none; }
    .subtab-btn {
      font: inherit; font-size: 0.78rem; font-weight: 600;
      text-transform: uppercase; letter-spacing: 0.04em;
      background: none; border: none; border-bottom: 2px solid transparent;
      padding: 6px 14px; margin-bottom: -1px; cursor: pointer; color: #888;
      white-space: nowrap; flex-shrink: 0;
    }
    .subtab-btn:hover { color: #1a1a1a; }
    .subtab-btn.active { color: #1a1a1a; border-bottom-color: #555; background: #fafaf8; }
    .subtab-panel { display: none; }
    .subtab-panel.active { display: block; }

    /* ── notice / error ── */
    .notice { background: #fff8e6; border: 1px solid #e8c840; padding: 10px 14px;
              font-size: 0.88rem; margin-bottom: 18px; }
    .error  { background: #fff2f2; border: 1px solid #e88080; padding: 10px 14px;
              font-size: 0.88rem; margin-bottom: 18px; color: #900; }
    .muted  { color: #6b6b6b; font-size: 0.85rem; }

    /* ── fuzzy suggestions ── */
    .suggestions { display: flex; flex-direction: column; gap: 5px; margin-bottom: 24px; }
    .suggestion-btn {
      display: flex; align-items: center; gap: 10px;
      background: #fff; border: 1px solid #ddd; padding: 8px 12px;
      cursor: pointer; font: inherit; text-align: left; width: 100%;
    }
    .suggestion-btn:hover { background: #fafaf8; border-color: #999; }
    .suggestion-name { font-weight: 600; }
    .suggestion-info { margin-left: auto; }

    /* ── page-level nav ── */
    .page-nav {
      display: flex; gap: 0; flex-wrap: wrap;
      border-bottom: 3px solid #1a1a1a;
      margin-bottom: 24px;
    }
    .page-nav-link {
      display: inline-block;
      font-size: 0.88rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.07em;
      text-decoration: none; color: #777;
      padding: 9px 12px;
      border-bottom: 3px solid transparent;
      margin-bottom: -3px;
    }
    .page-nav-link:hover { color: #1a1a1a; }
    .page-nav-link.active { color: #1a1a1a; border-bottom-color: #1a1a1a; background: #fff; }

    /* ── focus & interaction ── */
    .tab-btn:focus-visible, .subtab-btn:focus-visible,
    .page-nav-link:focus-visible, .suggestion-btn:focus-visible,
    .collection-action-btn:focus-visible {
      outline: 2px solid #1a1a1a; outline-offset: 1px;
    }
    .tab-btn:active, .subtab-btn:active,
    .page-nav-link:active, .suggestion-btn:active,
    .collection-action-btn:active,
    button[type="submit"]:active { transform: translateY(1px); }

    /* ── table scroll wrapper ── */
    .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* ── mood input row ── */
    .mood-input-row {
      display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap;
    }
    .mood-color-card {
      display: flex; align-items: center; gap: 14px;
      background: #fff; border: 1px solid #ddd; padding: 12px 16px;
      flex: 1; min-width: 220px;
    }
    .mood-color-card .info { font-size: 0.88rem; color: #555; }
    .mood-color-card strong { font-size: 1rem; }
    .mood-info-compact {
      display: flex; align-items: flex-start; gap: 12px;
      background: #fff; border: 1px solid #ddd; padding: 12px 16px;
      flex: 2; min-width: 280px;
    }
    .mood-compact-swatch { width: 36px; height: 36px; flex-shrink: 0; border: 1px solid rgba(0,0,0,0.18); }
    .mood-info-compact strong { font-size: 0.95rem; font-weight: 700; }
    .mood-info-compact p { font-size: 0.82rem; color: #555; line-height: 1.4; margin-top: 3px; }

    /* ── palette strip ── */
    .palette-strip {
      display: flex; gap: 0;
      border: 1px solid #ddd; overflow: hidden;
    }
    .palette-swatch-cell { flex: 1; display: flex; flex-direction: column; align-items: center; }
    .palette-swatch-color { width: 100%; height: 52px; border-bottom: 1px solid rgba(0,0,0,0.10); }
    .palette-swatch-label {
      font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.03em; color: #444; padding: 4px 3px 5px;
      text-align: center; background: #fff; width: 100%;
    }
    .palette-swatch-cell.is-anchor .palette-swatch-label { color: #a06000; background: #fff8e6; }
    .palette-swatch-cell.is-anchor-approx .palette-swatch-color { outline: 2px dashed #aaa; outline-offset: -2px; }
    .palette-swatch-cell.is-anchor-approx .palette-swatch-label { color: #666; background: #f4f4f4; }

    /* ── anchor classification banner ── */
    .anchor-banner {
      display: flex; align-items: flex-start; gap: 14px;
      background: #fff8e6; border: 1px solid #e8c840;
      padding: 12px 16px; margin-bottom: 20px; font-size: 0.88rem;
    }
    .anchor-banner--accent { background: #f0f4ff; border-color: #7090c8; }
    .anchor-banner-swatches { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
    .anchor-banner-swatches .swatch-lg { flex-shrink: 0; }
    .anchor-arrow { color: #888; font-size: 1.1rem; line-height: 36px; }
    .anchor-banner p { margin: 0; line-height: 1.5; }

    /* ── variant sections (mood palette alternatives) ── */
    .variant-section { padding-bottom: 8px; }
    .variant-heading {
      font-size: 0.88rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.07em;
      color: #1a1a1a; margin: 20px 0 6px;
      padding: 6px 0;
      border-bottom: 2px solid #1a1a1a;
    }
    .variant-divider {
      border: none; border-top: 1px solid #ddd;
      margin: 32px 0;
    }

    /* ── sticky target sidebar ── */
    .results-layout { display: flex; gap: 20px; align-items: flex-start; }
    .color-sidebar {
      position: sticky;
      top: 16px;
      width: 130px;
      flex-shrink: 0;
    }
    .color-sidebar-swatch {
      width: 100%;
      aspect-ratio: 1;
      border: 1px solid rgba(0,0,0,0.18);
      margin-bottom: 8px;
    }
    .color-sidebar-name { font-size: 0.82rem; font-weight: 700; line-height: 1.3; word-break: break-word; }
    .color-sidebar-meta { font-size: 0.72rem; color: #666; line-height: 1.5; margin-top: 4px; }
    .results-main { flex: 1; min-width: 0; }

    /* count badge not needed on desktop — sidebar always open */
    @media (min-width: 721px) { .collection-count { display: none; } }

    /* back-to-search floating button (UI-14) */
    #back-to-search-btn { display: none; }
    @media (max-width: 720px) {
      #back-to-search-btn {
        display: flex; align-items: center; justify-content: center;
        position: fixed; bottom: 20px; right: 16px;
        width: 44px; height: 44px;
        font-family: inherit; font-size: 1.1rem; font-weight: 600;
        background: #1a1a1a; color: #fff;
        border: none; border-radius: 50%;
        cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.3);
        opacity: 0; pointer-events: none;
        transition: opacity 0.15s;
        z-index: 100;
      }
      #back-to-search-btn.visible { opacity: 1; pointer-events: auto; }
    }

    /* card layout for result tables at ≤560px (UI-13)
       .table-mixes (mixes table) is excluded — it has a different 5-column structure */
    @media (max-width: 560px) {
      .table-scroll:not(.table-mixes) { overflow-x: visible; }
      .table-scroll:not(.table-mixes) > table { display: block; }
      .table-scroll:not(.table-mixes) > table thead { display: none; }
      .table-scroll:not(.table-mixes) > table tbody { display: block; }
      .table-scroll:not(.table-mixes) > table tbody tr {
        display: block;
        border: 1px solid #e8e8e5;
        margin-bottom: 8px;
        padding: 8px 10px;
        background: #fff;
      }
      .table-scroll:not(.table-mixes) > table tbody td {
        display: block;
        border-bottom: none;
        padding: 2px 0;
      }
      .table-scroll:not(.table-mixes) > table tbody td:nth-child(1) { padding-bottom: 6px; }
      .table-scroll:not(.table-mixes) > table tbody td:nth-child(2) { font-weight: 600; }
      .table-scroll:not(.table-mixes) > table tbody td:nth-child(4) { display: none; }
      .table-scroll:not(.table-mixes) > table tbody td:nth-child(5),
      .table-scroll:not(.table-mixes) > table tbody td:nth-child(6) { display: inline; }
      .table-scroll:not(.table-mixes) > table tbody td:nth-child(6) { padding-left: 6px; }
    }