:root {
      --canvas: #f4f7fb;
      --surface: #fff;
      --soft: #f8fafc;
      --nav: #0f1d2c;
      --nav-2: #17344d;
      --ink: #17202b;
      --muted: #6e7884;
      --line: #dfe5eb;
      --input: #fff;
      --accent: #1477d4;
      --blue: #1477d4;
      --green: #157b58;
      --red: #b23a31;
      --amber: #a86115;
    }

    * { box-sizing: border-box; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--canvas);
      font: 14px/1.45 "Segoe UI Variable", "Aptos", "Microsoft YaHei", Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      overflow: hidden;
    }
    button, input, select, textarea { font: inherit; }
    button {
      min-height: 34px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: var(--surface);
      color: var(--ink);
      padding: 0 11px;
      cursor: pointer;
      white-space: nowrap;
    }
    button { transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
    button:hover { background: #f8fcff; border-color: #9fc6e8; }
    button:active { transform: translateY(1px); }
    button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(20,119,212,.18); outline-offset: 1px; }
    button.primary { border-color: #1477d4; background: var(--accent); color: #fff; box-shadow: 0 7px 16px rgba(20,119,212,.16); }
    button.danger { color: var(--red); }
    input, select, textarea {
      width: 100%;
      min-height: 34px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: var(--input);
      color: var(--ink);
      padding: 7px 10px;
      outline: none;
    }
    textarea { min-height: 64px; resize: vertical; }
    a { color: var(--blue); text-decoration: none; }
    a:hover { text-decoration: underline; }
    .auth-overlay {
      position: fixed;
      inset: 0;
      z-index: 50;
      display: grid;
      place-items: center;
      padding: 40px 24px;
      overflow-y: auto;
      background: #e9eef3;
    }
    .auth-overlay[hidden], .auth-card[hidden] { display: none; }
    .auth-shell {
      width: min(900px, 100%);
      display: grid;
      grid-template-columns: 1fr 1fr;
      border: 1px solid #d8e0e7;
      border-radius: 16px;
      overflow: hidden;
      background: var(--surface);
      box-shadow: 0 20px 60px rgba(15,29,44,.1);
    }
    .auth-brand {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 44px;
      background: var(--nav);
      color: #fff;
    }
    .auth-brand img { width: 176px; max-width: 100%; height: auto; object-fit: contain; }
    .auth-brand h2 { margin: 28px 0 14px; font-size: 32px; line-height: 1.35; font-weight: 650; letter-spacing: 1px; }
    .auth-brand p { margin: 0; color: #c2cdd7; line-height: 1.8; }
    .auth-brand-footer { margin-top: auto; padding-top: 48px; color: #d5b674; font-size: 12px; }
    .auth-content { display: flex; align-items: center; padding: 46px 40px; min-width: 0; }
    .auth-card { width: 100%; display: grid; gap: 18px; }
    .auth-card h1 { margin: 0; font-size: 26px; font-weight: 650; }
    .auth-card p { margin: 0 0 10px; color: var(--muted); font-size: 13px; line-height: 1.7; }
    .auth-card label { display: grid; gap: 8px; color: #374b5e; font-size: 13px; }
    .auth-card input { min-height: 44px; background: #f9fbfd; padding: 10px 12px; }
    .auth-card .primary { min-height: 44px; margin-top: 4px; background: var(--nav); border-color: var(--nav); box-shadow: none; }
    .auth-card .primary:hover { background: #1a354d; border-color: #1a354d; }
    .auth-switch { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--muted); font-size: 13px; }
    .auth-switch button { padding: 0 2px; border: 0; background: transparent; color: #176caf; min-height: 28px; }
    .auth-error { min-height: 20px; color: var(--red); font-size: 13px; line-height: 1.5; }
    @media (max-width: 680px) {
      .auth-overlay { padding: 20px 16px; align-items: start; }
      .auth-shell { grid-template-columns: minmax(0, 1fr); }
      .auth-brand { padding: 24px; display: grid; grid-template-columns: 86px minmax(0,1fr); column-gap: 18px; }
      .auth-brand img { width: 86px; grid-row: 1 / 3; }
      .auth-brand h2 { margin: 4px 0 8px; font-size: 22px; line-height: 1.3; }
      .auth-brand h2 br { display: none; }
      .auth-brand p { font-size: 12px; }
      .auth-brand-footer { display: none; }
      .auth-content { padding: 28px 24px; }
    }
    .account-status { color: var(--muted); font-size: 12px; white-space: nowrap; }
    .admin-table-wrap { overflow: auto; width: 100%; }
    .admin-table { width: 100%; min-width: 620px; border-collapse: collapse; background: var(--surface); }
    .admin-table th, .admin-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
    .admin-table th { color: var(--muted); font-size: 12px; font-weight: 600; background: var(--soft); }
    .admin-table td { overflow-wrap: anywhere; }

    .app {
      height: 100vh;
      min-height: 0;
      display: grid;
      grid-template-columns: 222px minmax(740px, 1fr) 336px;
      grid-template-rows: auto minmax(0, 1fr);
    }
    .app.detail-closed { grid-template-columns: 222px minmax(740px, 1fr) 0; }

    .nav {
      grid-row: 1 / -1;
      background: var(--nav);
      color: #fff;
      padding: 22px 14px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      min-height: 0;
      overflow-y: auto;
    }
    .brand { padding: 0 6px 20px; border-bottom: 1px solid rgba(255,255,255,.1); }
    .brand strong { display: block; font-size: 15px; line-height: 1.5; }
    .brand span { display: block; margin-top: 6px; line-height: 1.7; color: rgba(255,255,255,.62); font-size: 12px; }
    .nav-group { display: grid; gap: 5px; }
    .nav-button {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border: 0;
      background: transparent;
      color: rgba(255,255,255,.78);
      padding: 9px 12px;
      min-height: 38px;
      gap: 8px;
      text-align: left;
    }
    .nav-button:hover { background: var(--nav-2); color: #fff; }
    .nav-button[hidden] { display: none; }
    .nav-button.active { background: rgba(255,255,255,.12); color: #fff; box-shadow: inset 3px 0 0 #d5b674; }
    .nav-count { font-size: 11px; font-variant-numeric: tabular-nums; color: #d6e0e8; background: rgba(255,255,255,.08); border-radius: 4px; padding: 2px 5px; }
    .nav-count[hidden] { display: none; }
    .nav-footer {
      margin-top: auto;
      padding: 10px;
      border-radius: 8px;
      background: rgba(255,255,255,.07);
      color: rgba(255,255,255,.68);
      font-size: 12px;
    }

    .top {
      grid-column: 2 / -1;
      grid-row: 1;
      background: rgba(255,255,255,.92);
      border-bottom: 1px solid var(--line);
      box-shadow: 0 8px 24px rgba(22,39,59,.04);
      position: relative;
      z-index: 3;
    }
    .top-main {
      min-height: 72px;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 24px;
      border-bottom: 1px solid var(--line);
    }
    .page-title { min-width: 150px; }
    .page-title strong { display: block; font-size: 17px; }
    .page-title span { display: block; color: var(--muted); font-size: 12px; }
    .search { flex: 1; max-width: 520px; }
    .actions { margin-left: auto; display: flex; gap: 8px; }
    .data-freshness {
      align-self: center;
      color: var(--muted);
      font-size: 11px;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }

    .filters {
      display: flex;
      flex-wrap: wrap;
      gap: 7px 8px;
      padding: 10px 24px 11px;
      align-items: end;
    }
    .filter { flex: 0 0 150px; width: 150px; min-width: 150px; display: grid; gap: 3px; }
    .filter.wide { flex-basis: 190px; width: 190px; min-width: 190px; }
    .filter.filter-multi-wrap { flex-basis: 190px; width: 190px; min-width: 190px; }
    .filter label { color: #526274; font-size: 11px; line-height: 1.2; }
    .filters input, .filters select, .filters .filter-multi summary { min-height: 30px; height: 30px; padding: 5px 8px; font-size: 12px; color: #25384c; }
    .filters input::placeholder { color: #7b8794; opacity: 1; }
    .range-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; min-width: 0; }
    .range-two > * { min-width: 0; }
    .filters input[type="date"] { min-width: 0; padding-left: 4px; padding-right: 2px; }
    .filter-multi {
      position: relative;
      width: 100%;
      min-width: 0;
      z-index: 1;
    }
    .filter-multi summary {
      min-height: 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 5px 8px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: var(--input);
      color: var(--ink);
      cursor: pointer;
      list-style: none;
    }
    .filter-multi summary::-webkit-details-marker { display: none; }
    .filter-multi summary::after { content: "▾"; color: var(--muted); font-size: 11px; }
    .filter-multi[open] summary { border-color: #9fc6e8; box-shadow: 0 0 0 3px rgba(20,119,212,.08); }
    .filter-multi[open] { z-index: 20; }
    .filter-multi-panel {
      position: absolute;
      left: 0;
      top: calc(100% + 5px);
      z-index: 8;
      display: grid;
      grid-template-columns: repeat(4, minmax(42px, 1fr));
      gap: 3px 8px;
      width: min(272px, 72vw);
      max-height: 188px;
      overflow-y: auto;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface);
      box-shadow: 0 12px 28px rgba(22,39,59,.16);
    }
    .filter-multi-panel label {
      display: flex;
      align-items: center;
      gap: 4px;
      min-height: 24px;
      color: var(--ink);
      font-size: 12px;
    }
    .filter-multi-panel input[type="checkbox"] {
      width: 16px !important;
      min-width: 16px;
      height: 16px;
      min-height: 16px !important;
      margin: 0;
      padding: 0 !important;
      accent-color: var(--blue);
    }
    .filter-reset {
      min-height: 30px;
      border-color: transparent;
      background: transparent;
      color: var(--blue);
      padding: 0 4px;
    }
    .filter-reset:hover { background: #eef6ff; border-color: #cfe5f8; }
    .hidden { display: none !important; }

    .content { grid-column: 2; grid-row: 2; min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding: 10px 24px 24px; }
    .monitoring-view { padding: 16px 0; }
    .monitoring-view h2 { margin: 0; font-size: 18px; }
    .monitoring-note { color: var(--muted); font-size: 12px; margin: 4px 0 14px; }
    .monitoring-grid { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 8px; }
    .summary {
      display: grid;
      grid-template-columns: repeat(5, minmax(120px, 1fr));
      gap: 1px;
      background: transparent;
      border-bottom: 0;
    }
    .metric { background: var(--surface); padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgba(22,39,59,.05); }
    .metric span { display: block; color: var(--muted); font-size: 12px; }
    .metric strong { display: block; margin-top: 2px; font-size: 20px; font-variant-numeric: tabular-nums; }
    .summary-note { grid-column: 1 / -1; margin: 0; padding: 11px 4px; background: transparent; color: var(--muted); font-size: 12px; }

    .bulkbar {
      display: none;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 42px;
      padding: 7px 14px;
      border-bottom: 1px solid rgba(168, 97, 21, .22);
      background: #fff5e5;
    }
    .bulkbar.active {
      display: flex;
    }
    .bulkbar strong {
      color: var(--amber);
      font-variant-numeric: tabular-nums;
    }
    .bulk-actions {
      display: flex;
      gap: 8px;
      white-space: nowrap;
    }

    .list {
      flex: 1;
      min-height: 0;
      overflow: auto;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 14px;
      box-shadow: 0 8px 28px rgba(22,39,59,.06);
    }
    .list-head,
    .item-card {
      display: grid;
      grid-template-columns: 34px 54px minmax(220px, .9fr) minmax(560px, 2.1fr) 118px;
      gap: 12px;
      align-items: center;
    }
    .list-head {
      position: sticky;
      top: 0;
      z-index: 2;
      min-height: 42px;
      padding: 0 14px;
      background: #f8fafc;
      border-bottom: 1px solid var(--line);
      color: #4e473d;
      font-size: 12px;
      font-weight: 700;
    }
    .item-card {
      min-height: 72px;
      padding: 10px 14px;
      border-bottom: 1px solid var(--line);
      cursor: pointer;
    }
    .item-card:nth-child(even) { background: #fffdf8; }
    .item-card:hover { background: #f8fbfe; }
    .thumb {
      width: 42px;
      height: 42px;
      border: 1px solid var(--line);
      border-radius: 6px;
      object-fit: contain;
      background: #fff;
      cursor: zoom-in;
    }
    .item-main { min-width: 0; }
    .item-title {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--ink);
      font-weight: 500;
    }
    .item-title-link { color: #0757a5; text-decoration: none; }
    .item-title-link:hover { color: #003b78; text-decoration: underline; }
    .item-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 4px 10px;
      margin-top: 3px;
      color: var(--muted);
      font-size: 12px;
    }
    .asin-link { font-weight: 700; font-variant-numeric: tabular-nums; }
    .item-metrics {
      display: grid;
      grid-template-columns: repeat(8, minmax(54px, 1fr));
      gap: 6px;
      align-items: center;
    }
    .metric-mini { min-width: 0; }
    .metric-mini span { display: block; color: var(--muted); font-size: 11px; }
    .metric-mini strong {
      display: block;
      margin-top: 1px;
      font-size: 13px;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .item-actions { display: flex; justify-content: end; gap: 6px; }
    .item-actions button { min-height: 29px; padding: 0 8px; font-size: 12px; }
    .action-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 29px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: var(--surface);
      color: var(--ink);
      padding: 0 8px;
      font-size: 12px;
      text-decoration: none;
    }
    .action-link:hover {
      background: #fffdf8;
      text-decoration: none;
    }
    .tag {
      display: inline-flex;
      align-items: center;
      min-height: 21px;
      padding: 0 7px;
      border: 1px solid var(--line);
      border-radius: 5px;
      background: #f8f2e8;
      color: #5d4a2e;
      font-size: 12px;
      white-space: nowrap;
    }
    .tag.good { background: #e9f6ef; color: var(--green); border-color: rgba(21,123,88,.22); }
    .tag.warn { background: #fff3df; color: var(--amber); border-color: rgba(168,97,21,.22); }
    .tag.bad { background: #fae9e7; color: var(--red); border-color: rgba(178,58,49,.22); }
    .bsr-extra {
      position: relative;
      display: inline-flex;
      align-items: center;
      min-height: 17px;
      margin-top: 2px;
      padding: 0 5px;
      border-radius: 4px;
      background: #eef3fb;
      color: var(--blue);
      font-size: 11px;
      font-weight: 600;
      cursor: default;
    }
    .metric-mini .bsr-popover {
      position: absolute;
      left: 0;
      top: calc(100% + 6px);
      z-index: 8;
      display: none;
      width: 238px;
      padding: 8px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: #fff;
      box-shadow: 0 10px 30px rgba(33, 28, 20, .16);
      color: var(--ink);
      font-size: 12px;
      font-weight: 400;
    }
    .metric-mini .bsr-extra.open .bsr-popover {
      display: grid;
      gap: 5px;
    }
    .bsr-popover-row {
      display: none;
      justify-content: space-between;
      gap: 8px;
    }
    .bsr-extra.open .bsr-popover-row {
      display: flex;
    }
    .bsr-popover-row strong {
      color: var(--ink);
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }
    .bsr-popover-row span {
      color: var(--muted);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .manage {
      flex: 1;
      overflow: auto;
      background: var(--surface);
      padding: 14px;
    }
    .manage-table {
      width: 100%;
      border-collapse: collapse;
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
    }
    .manage-table th,
    .manage-table td {
      padding: 9px 10px;
      border-bottom: 1px solid var(--line);
      text-align: left;
      white-space: nowrap;
    }
    .manage-table th { background: #eee8dc; color: #4e473d; font-size: 12px; }
    .manage-table input[type="number"] { width: 88px; min-height: 30px; padding: 5px 7px; }
    .readonly { color: var(--muted); }
    .admin-only {
      display: table-cell;
    }

    .detail {
      grid-column: 3;
      grid-row: 2;
      min-height: 0;
      border-left: 1px solid var(--line);
      background: var(--soft);
      padding: 14px;
      overflow: auto;
    }
    .detail-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
    .detail h2 { margin: 0 0 4px; font-size: 17px; }
    .detail .sub { margin: 0 0 12px; color: var(--muted); font-size: 12px; }
    .close-detail { width: 32px; min-height: 32px; padding: 0; font-size: 18px; }
    .detail-image {
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: contain;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 8px;
      cursor: zoom-in;
    }
    .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 12px; }
    .field { display: grid; gap: 5px; }
    .field label { color: var(--muted); font-size: 12px; }
    .detail-section { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
    .detail-section h3 { margin: 0 0 9px; font-size: 14px; }
    .bsr-list {
      display: grid;
      gap: 6px;
    }
    .bsr-row {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      padding: 8px 9px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: #fff;
    }
    .bsr-row strong {
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }
    .bsr-row span {
      color: var(--muted);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .image-modal { position: fixed; inset: 0; display: grid; place-items: center; padding: 28px; background: rgba(18,16,13,.62); z-index: 40; }
    .image-modal[hidden] { display: none; }
    .image-modal-card { width: min(980px, 94vw); max-height: 90vh; padding: 12px; border-radius: 8px; background: #fff; box-shadow: 0 18px 60px rgba(33,28,20,.24); }
    .image-modal-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; color: var(--muted); font-size: 12px; }
    .image-modal-bar button { width: 30px; min-height: 30px; padding: 0; font-size: 18px; }
    .image-modal-body { display: grid; place-items: center; min-height: 160px; }
    .image-modal-body img { display: block; max-width: 100%; max-height: 78vh; object-fit: contain; }
    .image-modal-body span { color: var(--muted); font-size: 13px; }

    @media (max-width: 1180px) {
      .app { grid-template-columns: 206px minmax(600px, 1fr); }
      .app.detail-closed { grid-template-columns: 206px minmax(600px, 1fr); }
      .detail { display: none; }
      .list-head, .item-card { grid-template-columns: 34px 48px minmax(260px, 1fr); }
      .item-metrics, .item-actions { grid-column: 3; }
      .item-metrics { grid-template-columns: repeat(4, minmax(70px, 1fr)); }
    }

    .empty-state.retained-list-status { min-height: 0; padding: 16px; }
    @media (max-width: 760px) {
      body { overflow: auto; }
      .app { height: auto; min-height: 100vh; }
    }

    .brand img { width: 118px; max-width: 100%; height: auto; object-fit: contain; display: block; margin-bottom: 16px; }
    .app.detail-closed .detail { display: none; }
    button:disabled, input:disabled, select:disabled { cursor: not-allowed; opacity: .58; }
    .empty-state {
      min-height: 280px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 36px;
      text-align: center;
      color: var(--muted);
    }
    .empty-state strong { color: var(--ink); font-size: 18px; }
    .placeholder-card {
      width: min(620px, 100%);
      margin: 44px auto;
      padding: 28px 30px;
      border: 1px solid #cfe5f8;
      border-radius: 14px;
      background: linear-gradient(135deg, #f5faff, #fff);
      box-shadow: 0 16px 36px rgba(22,39,59,.07);
    }
    .placeholder-card h2 { margin: 10px 0 8px; font-size: 20px; letter-spacing: -.02em; }
    .placeholder-card p { max-width: 52ch; margin: 0; color: var(--muted); }
    .placeholder-card .placeholder-note { margin-top: 16px; padding-top: 14px; border-top: 1px solid #dfeaf4; font-size: 12px; }
    .placeholder-kicker {
      display: inline-flex;
      padding: 3px 8px;
      border: 1px solid #cfe5f8;
      border-radius: 5px;
      color: var(--blue);
      background: #eef6ff;
      font-size: 11px;
      font-weight: 700;
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
    }
    @media (max-width: 760px) {
      .app, .app.detail-closed { display: block; min-width: 0; }
      .nav { max-height: 220px; }
      .top-main { flex-wrap: wrap; }
      .actions { margin-left: 0; flex-wrap: wrap; }
      .data-freshness { width: 100%; }
      .content { min-height: 360px; }
      .summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .monitoring-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .list-head { min-width: 640px; }
    }
    .thumb-placeholder {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border: 1px solid var(--line);
      border-radius: 6px;
      color: var(--muted);
      font-size: 11px;
    }
    .page-size-label { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
    .page-size-label select { width: 78px; }
    .page-jump, .page-jump label { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
    .page-jump input { width: 88px; }
    .pager {
      position: sticky;
      bottom: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 16px;
      padding: 9px;
      border-top: 1px solid var(--line);
      background: var(--soft);
    }
    .detail-title { margin: 12px 0; font-size: 15px; line-height: 1.5; }
    .detail-grid strong { overflow-wrap: anywhere; font-size: 13px; }
    .detail-link { display: inline-block; margin-top: 16px; }
    .export-status { color: var(--muted); font-size: 12px; white-space: nowrap; }
    .export-status:empty { display: none; }
    .admin-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
      padding: 12px 14px;
      border: 1px solid #cfe5f8;
      border-radius: 10px;
      background: linear-gradient(100deg, #f1f8ff, #fff);
    }
    .admin-toolbar-form { display: flex; align-items: center; gap: 8px; }
    .admin-toolbar-form input { width: min(260px, 48vw); min-height: 30px; }
    .small-action { min-height: 29px; padding: 0 9px; border-radius: 7px; font-size: 12px; }
    .small-action.danger { color: var(--red); }
    .readonly { color: var(--muted); font-size: 12px; }
    .row-check { width: 16px; min-height: 16px; accent-color: var(--blue); }
    .group-members { min-width: 190px; min-height: 76px; background: var(--surface); }
    .group-members-list { display: grid; grid-template-columns: repeat(2, minmax(90px, 1fr)); gap: 6px 12px; min-width: 210px; max-height: 140px; overflow: auto; }
    .group-members-list label { display: flex; align-items: center; gap: 5px; font-size: 12px; white-space: nowrap; }
    .group-members-list input { width: 16px; min-height: 16px; height: 16px; margin: 0; }
    .selection-group-select { min-width: 140px; min-height: 30px; padding: 4px 6px; font-size: 12px; }
    .group-actions { display: flex; gap: 6px; flex-wrap: wrap; }
    .user-dialog { width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - 48px); border: 1px solid var(--line); border-radius: 8px; padding: 0; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
    .user-dialog::backdrop { background: rgba(16,24,32,.55); }
    .user-form { display: grid; gap: 14px; padding: 18px; }
    .user-dialog-head, .user-dialog-actions { display: flex; align-items: center; gap: 12px; }
    .user-dialog-head { justify-content: space-between; }
    .user-dialog-head h2 { margin: 0; font-size: 17px; }
    .user-dialog-head button { width: 30px; min-height: 30px; padding: 0; font-size: 18px; }
    .user-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .user-form label { display: grid; gap: 5px; min-width: 0; color: var(--muted); font-size: 12px; }
    .user-form fieldset { margin: 0; padding: 10px; border: 1px solid var(--line); border-radius: 6px; }
    .user-form legend { padding: 0 5px; color: var(--muted); font-size: 12px; }
    .permission-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; }
    .permission-choices label { display: flex; align-items: center; gap: 6px; color: var(--ink); }
    .permission-choices input { width: 16px; min-height: 16px; height: 16px; margin: 0; }
    .user-dialog-actions { justify-content: flex-end; }
    .user-dialog-actions span { margin-right: auto; color: var(--red); font-size: 12px; }
    .selection-dialog { width: min(740px, calc(100vw - 24px)); max-height: calc(100vh - 32px); overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 0; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
    .selection-dialog::backdrop { background: rgba(16,24,32,.55); }
    .selection-form { display: grid; gap: 14px; padding: 18px; }
    .selection-form label { display: grid; gap: 5px; min-width: 0; color: var(--muted); font-size: 12px; }
    .selection-product-head { display: flex; align-items: center; gap: 12px; min-width: 0; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
    .selection-product-head img { width: 72px; height: 72px; object-fit: contain; flex: none; }
    .selection-product-head > div { display: grid; gap: 4px; min-width: 0; }
    .selection-product-head strong { font-size: 14px; overflow-wrap: anywhere; }
    .selection-product-head span { color: var(--muted); font-size: 12px; }
    .selection-product-head a { font-size: 12px; }
    .selection-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .selection-thumb, .selection-thumb-placeholder { width: 50px; height: 50px; flex: none; object-fit: contain; border: 1px solid var(--line); border-radius: 4px; }
    .selection-thumb { cursor: zoom-in; }
    .selection-thumb-placeholder { display: grid; place-items: center; color: var(--muted); font-size: 11px; }
    .selection-product-cell { display: flex; align-items: center; gap: 8px; min-width: 190px; max-width: 300px; }
    .selection-product-title { line-height: 1.35; overflow-wrap: anywhere; }
    @media (max-width: 600px) { .user-form-grid, .permission-choices { grid-template-columns: minmax(0, 1fr); } }
    @media (max-width: 600px) { .selection-fields { grid-template-columns: minmax(0, 1fr); } }
    @media (max-width: 1180px) {
      .app .detail:not([hidden]) {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 10;
        width: min(360px, 100vw);
        height: 100vh;
        box-shadow: -12px 0 40px rgba(33, 28, 20, .18);
      }
    }

/* Only the user management table needs wider readable columns. */
.admin-table.users-table { min-width: 1260px; table-layout: fixed; }
.admin-table.logs-table { min-width: 1020px; table-layout: fixed; }
.logs-table th { white-space: nowrap; }
.logs-table th:nth-child(1) { width: 190px; }
.logs-table th:nth-child(2) { width: 170px; }
.logs-table th:nth-child(3) { width: 190px; }
.logs-table td:nth-child(1), .logs-table td:nth-child(2) { white-space: nowrap; overflow-wrap: normal; }
.logs-table td { vertical-align: top; word-break: normal; }
.logs-table td:nth-child(3) { overflow-wrap: anywhere; }
.log-detail-lines { line-height: 1.8; overflow-wrap: anywhere; }
.log-source-details { margin-top: 8px; color: var(--muted); }
.log-source-details summary { cursor: pointer; white-space: nowrap; }
.log-original-text { margin: 8px 0 0; padding: 10px; background: #f5f7fa; border-radius: 6px; font-size: 12px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.users-table th { white-space: nowrap; }
.users-table th:nth-child(1) { width: 200px; }
.users-table th:nth-child(2), .users-table th:nth-child(3) { width: 110px; }
.users-table th:nth-child(4) { width: 70px; }
.users-table th:nth-child(5) { width: 130px; }
.users-table th:nth-child(6) { width: 260px; }
.users-table th:nth-child(7) { width: 250px; }
.users-table th:nth-child(8) { width: 220px; }
.users-table td:nth-child(2), .users-table td:nth-child(3), .users-table td:nth-child(4), .users-table td:nth-child(5) { white-space: nowrap; overflow-wrap: normal; }
.user-login-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-test-badge { display: inline-block; margin-bottom: 5px; padding: 2px 7px; border-radius: 4px; background: var(--soft); color: var(--muted); font-size: 12px; }
.user-source-details { margin-top: 6px; color: var(--muted); font-size: 12px; }
.user-source-details summary { cursor: pointer; }
.user-original-text { margin-top: 5px; overflow-wrap: anywhere; white-space: normal; }

.user-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.user-delete-reason { display: block; width: 100%; color: var(--muted); font-size: 12px; }
.user-delete-status { color: var(--muted); font-size: 13px; }
/* Source snapshots reuse the existing import table and controls. */
.source-batch-section { margin-top: 24px; }
.source-batch-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 12px 0; }
.source-batch-section .source-batch-row { padding: 12px; border: 1px solid #dbe3eb; border-radius: 8px; }
.source-member-detail { margin-top: 16px; }

.search { display:flex; gap:8px; }
.search select { max-width:190px; border:1px solid #d9e0e8; border-radius:8px; background:white; }
.category-picker { position:relative; min-width:0; }
.category-trigger { width:100%; text-align:left; padding:9px 26px 9px 10px; border:1px solid #d9e0e8; border-radius:7px; background:white; font:inherit; color:inherit; }
.category-trigger::after { content:"▾"; position:absolute; right:9px; }
.category-options { position:absolute; z-index:40; top:100%; min-width:100%; width:max-content; max-width:min(420px,85vw); max-height:320px; overflow:auto; background:white; box-shadow:0 6px 20px #15243c30; border:1px solid #d9e0e8; border-radius:7px; }
.category-options[hidden] { display:none; }
.category-options button { display:flex; width:100%; align-items:center; gap:8px; text-align:left; background:white; border:0; padding:9px 12px; font:inherit; }
.category-options button:focus, .category-options button:hover, .category-options [aria-selected=true] { background:#eff6ff; outline:2px solid #4c8ad7; outline-offset:-2px; }
.category-options small { font-size:11px; color:#627086; margin-left:auto; }
.bulk-confirm { padding:16px; background:#fff4ed; border:1px solid #f2baa1; border-radius:8px; margin:12px 0; }
.bulk-confirm[hidden], #productBatchStatus[hidden] { display:none; }
#productBatchStatus { white-space:pre-wrap; overflow-wrap:anywhere; padding:12px; background:#f0f5fa; }
.public-trash-list { padding:16px; }
.public-trash-row { display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid #e5eaf0; }
.public-trash-row small { margin-left:auto; }
.search input { min-width:0; flex:1; width:auto; }
.bulk-actions { flex-wrap:wrap; }
.filter select[hidden], #categoryCountStatus[hidden] { display:none; }