:root {
      color-scheme: light;
      --bg: #f5f7f8;
      --text: #172026;
      --muted: #65717a;
      --line: #d7dee3;
      --panel: #ffffff;
      --panel-muted: #eef3f5;
      --accent: #0f766e;
      --accent-soft: #e7f5f2;
      --check: #2563eb;
      --check-soft: #eff6ff;
      --test: #7c3aed;
      --test-soft: #f5f3ff;
      --warn: #b45309;
      --warn-soft: #fff7ed;
      --bad: #b91c1c;
      --bad-soft: #fff5f5;
      --good: #15803d;
      --good-soft: #edf8f0;
      --unknown: #475569;
      --shadow: 0 1px 2px rgb(15 23 42 / 6%);
    }
    body.dark {
      color-scheme: dark;
      --bg: #111827;
      --text: #e5e7eb;
      --muted: #9ca3af;
      --line: #334155;
      --panel: #1f2937;
      --panel-muted: #162132;
      --accent: #14b8a6;
      --accent-soft: #123f3c;
      --check: #60a5fa;
      --check-soft: #172554;
      --test: #c4b5fd;
      --test-soft: #2e1065;
      --warn: #f59e0b;
      --warn-soft: #432a0a;
      --bad: #f87171;
      --bad-soft: #3b1518;
      --good: #4ade80;
      --good-soft: #14331e;
      --unknown: #cbd5e1;
      --shadow: 0 1px 2px rgb(0 0 0 / 18%);
    }

    * { box-sizing: border-box; }
    html {
      -webkit-text-size-adjust: 100%;
    }
    body {
      margin: 0;
      font-family: "Segoe UI", Arial, sans-serif;
      background: var(--bg);
      color: var(--text);
      transition: background-color .18s ease, color .18s ease;
    }
    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 18px 24px;
      border-bottom: 1px solid var(--line);
      background: var(--panel);
    }
    h1 {
      margin: 0;
      font-size: 20px;
      font-weight: 650;
      letter-spacing: 0;
    }
    main {
      width: min(1240px, calc(100vw - 32px));
      margin: 20px auto 48px;
    }
    .statusbar {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      justify-content: flex-end;
    }
    .status-group {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      padding: 4px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel-muted);
    }
    .pill {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 4px 9px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: var(--panel);
      color: var(--muted);
      font-size: 13px;
      white-space: nowrap;
    }
    .pill.good { color: var(--good); border-color: #a7d7b6; }
    .pill.bad { color: var(--bad); border-color: #e4a7a7; }
    .top-button {
      background: var(--panel-muted);
      color: var(--text);
      box-shadow: none;
    }
    .top-button.good {
      color: var(--good);
      border-color: color-mix(in srgb, var(--good) 38%, var(--line));
      background: var(--good-soft);
    }
    .top-button.bad {
      color: var(--bad);
      border-color: color-mix(in srgb, var(--bad) 38%, var(--line));
      background: var(--bad-soft);
    }
    .top-button.discovery-on,
    .top-button.funbox-on,
    .top-button.momoshop-on {
      background: var(--good-soft);
      border-color: color-mix(in srgb, var(--good) 45%, var(--line));
      color: var(--good);
      font-weight: 650;
    }
    .top-button.discovery-off,
    .top-button.funbox-off,
    .top-button.momoshop-off {
      background: var(--bad-soft);
      border-color: color-mix(in srgb, var(--bad) 45%, var(--line));
      color: var(--bad);
      font-weight: 650;
    }
    .top-panel {
      display: none;
      grid-template-columns: repeat(4, minmax(110px, 1fr)) auto;
      gap: 10px;
      align-items: end;
      margin: 14px 0 4px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
      box-shadow: var(--shadow);
    }
    .top-panel.open { display: grid; }
    .top-panel.telegram-panel {
      grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(150px, 220px)) minmax(110px, 150px) auto;
    }
    .top-panel.funbox-panel { grid-template-columns: minmax(260px, 2fr) repeat(2, minmax(90px, 1fr)) auto auto auto auto; }
    .top-panel.momoshop-panel { grid-template-columns: repeat(3, minmax(120px, 1fr)) auto auto auto auto; }
    .top-panel.funbox-panel .check,
    .top-panel.momoshop-panel .check {
      align-self: center;
      min-height: 38px;
      padding: 0 10px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: var(--panel-muted);
      color: var(--text);
    }
    .top-panel button {
      align-self: end;
    }
    .shop-list {
      grid-column: 1 / -1;
      display: grid;
      gap: 8px;
      margin-top: 4px;
    }
    .shop-row {
      display: grid;
      grid-template-columns: minmax(130px, 180px) minmax(180px, 1fr) auto auto;
      gap: 8px;
      align-items: center;
      padding: 8px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: var(--panel-muted);
    }
    .keyword-list {
      grid-column: 1 / -1;
      display: grid;
      gap: 8px;
      margin-top: 4px;
    }
    .keyword-row {
      display: grid;
      grid-template-columns: minmax(180px, 1fr) auto;
      gap: 8px;
      align-items: center;
      padding: 8px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: var(--panel-muted);
    }
    .shop-filter-row {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) auto;
      gap: 8px;
      align-items: end;
      margin-top: 6px;
    }
    .icon-button {
      min-width: 42px;
      padding-inline: 10px;
      font-size: 18px;
      line-height: 1;
    }
    .toolbar {
      display: grid;
      grid-template-columns: minmax(140px, 220px) minmax(260px, 1fr) auto auto auto;
      gap: 10px;
      margin: 18px 0;
      align-items: center;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
      box-shadow: var(--shadow);
    }
    .bulk-panel {
      display: none;
      gap: 10px;
      margin: -6px 0 18px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
      box-shadow: var(--shadow);
    }
    .bulk-panel.open {
      display: grid;
    }
    .bulk-actions {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
      align-items: center;
    }
    .settings {
      display: grid;
      grid-template-columns: repeat(6, minmax(90px, 1fr)) auto;
      gap: 10px;
      align-items: end;
      margin: 14px 0 4px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
      box-shadow: var(--shadow);
    }
    .field {
      display: grid;
      gap: 5px;
    }
    .field label {
      color: var(--muted);
      font-size: 12px;
      font-weight: 650;
    }
    input[type="text"], input[type="url"], input[type="password"], textarea {
      width: 100%;
      min-height: 38px;
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 8px 10px;
      background: var(--panel);
      color: var(--text);
      font: inherit;
    }
    textarea {
      min-height: 130px;
      resize: vertical;
      line-height: 1.4;
    }
    input[type="number"] {
      width: 100%;
      min-height: 38px;
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 8px 10px;
      background: var(--panel);
      color: var(--text);
      font: inherit;
    }
    label.check {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: var(--muted);
      font-size: 14px;
      white-space: nowrap;
    }
    button {
      min-height: 36px;
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 7px 11px;
      background: var(--panel-muted);
      color: var(--text);
      font: inherit;
      cursor: pointer;
      transition:
        background-color .16s ease,
        border-color .16s ease,
        color .16s ease,
        box-shadow .16s ease,
        transform .08s ease;
    }
    button:hover:not(:disabled) {
      border-color: var(--accent);
      background: var(--panel);
      box-shadow: 0 1px 4px rgb(15 118 110 / 14%);
    }
    button:active:not(:disabled) {
      transform: translateY(1px);
    }
    button.primary {
      background: var(--accent);
      border-color: var(--accent);
      color: #fff;
    }
    button.primary:hover:not(:disabled) {
      color: #fff;
      background: color-mix(in srgb, var(--accent) 88%, #000);
    }
    button.danger {
      color: var(--bad);
      border-color: color-mix(in srgb, var(--bad) 28%, var(--line));
      background: var(--bad-soft);
    }
    button.action-check {
      color: var(--check);
      border-color: color-mix(in srgb, var(--check) 30%, var(--line));
      background: var(--check-soft);
    }
    button.action-check:hover:not(:disabled) {
      border-color: var(--check);
      box-shadow: 0 1px 4px rgb(37 99 235 / 16%);
    }
    button.action-save {
      color: var(--good);
      border-color: color-mix(in srgb, var(--good) 32%, var(--line));
      background: var(--good-soft);
    }
    button.action-neutral {
      color: var(--text);
      background: var(--panel-muted);
    }
    button.action-test {
      color: var(--test);
      border-color: color-mix(in srgb, var(--test) 32%, var(--line));
      background: var(--test-soft);
    }
    button.action-warn {
      color: var(--warn);
      border-color: color-mix(in srgb, var(--warn) 32%, var(--line));
      background: var(--warn-soft);
    }
    button:disabled {
      opacity: .55;
      cursor: wait;
    }
    .message {
      min-height: 22px;
      margin: 8px 0 12px;
      color: var(--muted);
      font-size: 14px;
    }
    .tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 12px 0 0;
      border-bottom: 1px solid var(--line);
    }
    .subtabs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 0 0 14px;
      border-bottom: 1px solid var(--line);
    }
    .tab,
    .subtab {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      border-bottom-color: transparent;
      background: var(--panel);
      color: var(--muted);
    }
    .tab.active,
    .subtab.active {
      background: var(--panel);
      border-color: var(--line);
      border-bottom-color: var(--panel);
      color: var(--accent);
      font-weight: 650;
    }
    .tab-panel {
      padding-top: 16px;
    }
    .tab-panel.hidden {
      display: none;
    }
    .subtab-panel.hidden {
      display: none;
    }
    .panel-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      align-items: center;
      gap: 8px;
      margin: 0 0 12px;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
      box-shadow: var(--shadow);
    }
    .panel-actions button {
      min-height: 34px;
    }
    .panel-actions .spacer {
      flex: 1 1 auto;
      min-width: 12px;
    }
    .filter-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 0 0 12px;
    }
    .filter-tab {
      background: transparent;
      color: var(--muted);
    }
    .filter-tab.active {
      border-color: var(--accent);
      color: var(--accent);
      font-weight: 650;
      background: var(--accent-soft);
    }
    .selected-actions {
      display: none;
      flex-wrap: wrap;
      gap: 8px;
    }
    .selected-actions.visible {
      display: flex;
    }
    th.select-col, td.select-col {
      width: 42px;
      text-align: center;
    }
    input[type="checkbox"] {
      width: 16px;
      height: 16px;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      box-shadow: var(--shadow);
    }
    th, td {
      padding: 10px 12px;
      border-bottom: 1px solid var(--line);
      text-align: left;
      vertical-align: middle;
      font-size: 14px;
    }
    th {
      color: var(--muted);
      font-size: 12px;
      font-weight: 650;
      text-transform: uppercase;
      letter-spacing: 0;
      background: var(--panel);
    }
    tbody tr:hover {
      background: var(--panel-muted);
    }
    tr:last-child td { border-bottom: 0; }
    .name { font-weight: 600; }
    .name a, .url a {
      color: inherit;
      text-decoration: none;
    }
    .name a:hover, .url a:hover {
      color: var(--accent);
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .url {
      max-width: 420px;
      overflow-wrap: anywhere;
      color: var(--muted);
      font-size: 13px;
    }
    .state {
      display: inline-flex;
      align-items: center;
      min-width: 78px;
      justify-content: center;
      border-radius: 6px;
      padding: 4px 8px;
      border: 1px solid var(--line);
      color: var(--unknown);
      background: var(--panel);
      font-size: 13px;
      font-weight: 600;
    }
    .state.buyable { color: var(--good); background: #effaf2; border-color: #b9dfc5; }
    .state.soldout { color: var(--bad); background: #fff5f5; border-color: #efb6b6; }
    .state.mixed { color: var(--warn); background: #fff8eb; border-color: #e8ca8a; }
    .state.blocked { color: var(--bad); background: #fff1f2; border-color: #f0a5ad; }
    .state.unavailable { color: var(--unknown); background: #f1f5f9; border-color: #cbd5e1; }
    .state.new { color: var(--accent); background: #ecfdf5; border-color: #99d9c8; }
    .state.monitoring { color: var(--good); background: #effaf2; border-color: #b9dfc5; }
    .state.reappeared { color: var(--good); background: #ecfdf5; border-color: #86efac; }
    .state.missing { color: var(--warn); background: #fff8eb; border-color: #e8ca8a; }
    .state.ignored { color: #64748b; background: #f1f5f9; border-color: #cbd5e1; }
    body.dark .state.buyable { color: #bbf7d0; background: #14532d; border-color: #22c55e; }
    body.dark .state.soldout { color: #fecaca; background: #7f1d1d; border-color: #ef4444; }
    body.dark .state.mixed { color: #fde68a; background: #78350f; border-color: #f59e0b; }
    body.dark .state.blocked { color: #fecaca; background: #7f1d1d; border-color: #fb7185; }
    body.dark .state.unavailable { color: #e5e7eb; background: #475569; border-color: #94a3b8; }
    body.dark .state.new { color: #99f6e4; background: #134e4a; border-color: #2dd4bf; }
    body.dark .state.monitoring { color: #bbf7d0; background: #14532d; border-color: #22c55e; }
    body.dark .state.reappeared { color: #bbf7d0; background: #14532d; border-color: #22c55e; }
    body.dark .state.missing { color: #fde68a; background: #78350f; border-color: #f59e0b; }
    body.dark .state.ignored { color: #cbd5e1; background: #334155; border-color: #64748b; }
    .actions {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: flex-end;
    }
    .actions button {
      min-height: 32px;
      padding: 5px 9px;
      font-size: 13px;
    }
    .small {
      color: var(--muted);
      font-size: 12px;
    }
    @media (max-width: 760px) {
      body {
        font-size: 15px;
      }
      header {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
        padding: 14px 12px;
      }
      h1 {
        font-size: 19px;
      }
      main {
        width: min(100% - 16px, 760px);
        margin: 10px auto 32px;
      }
      .statusbar {
        width: 100%;
        justify-content: flex-start;
        gap: 6px;
      }
      .status-group {
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: thin;
      }
      .status-group .top-button {
        flex: 0 0 auto;
      }
      .top-button,
      button {
        min-height: 42px;
      }
      input,
      textarea,
      button {
        font-size: 16px;
      }
      .icon-button {
        min-width: 44px;
      }
      .toolbar,
      .settings {
        grid-template-columns: 1fr;
        gap: 8px;
        margin: 12px 0;
        padding: 10px;
      }
      .top-panel,
      .top-panel.telegram-panel,
      .top-panel.funbox-panel,
      .top-panel.momoshop-panel,
      .shop-row,
      .keyword-row,
      .shop-filter-row {
        grid-template-columns: 1fr;
      }
      .tabs,
      .subtabs,
      .filter-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: thin;
      }
      .tab,
      .subtab,
      .filter-tab {
        flex: 0 0 auto;
      }
      .panel-actions {
        align-items: stretch;
        gap: 8px;
        padding: 10px;
      }
      .panel-actions .check {
        width: 100%;
        min-height: 34px;
      }
      .panel-actions .spacer {
        display: none;
      }
      .selected-actions,
      .selected-actions.visible {
        width: 100%;
        display: none;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }
      .selected-actions.visible {
        display: grid;
      }
      .panel-actions button {
        flex: 1 1 auto;
      }
      .bulk-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }
      .bulk-actions .check {
        grid-column: 1 / -1;
      }
      table {
        display: block;
        border: 0;
        background: transparent;
        box-shadow: none;
      }
      thead {
        display: none;
      }
      tbody {
        display: grid;
        gap: 10px;
      }
      tr {
        display: grid;
        gap: 8px;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--panel);
        box-shadow: var(--shadow);
      }
      tbody tr:hover {
        background: var(--panel);
      }
      td {
        display: grid;
        grid-template-columns: minmax(76px, 30%) minmax(0, 1fr);
        gap: 8px;
        align-items: start;
        border: 0;
        padding: 0;
        min-width: 0;
      }
      td::before {
        color: var(--muted);
        font-size: 12px;
        font-weight: 650;
        line-height: 1.35;
      }
      td.select-col {
        display: flex;
        width: auto;
        justify-content: flex-start;
        align-items: center;
      }
      td.select-col::before {
        content: "選取";
        margin-right: 10px;
      }
      td:last-child {
        display: block;
      }
      td:last-child::before {
        content: none;
      }
      .monitor-table td:nth-child(2)::before,
      .discovered-table td:nth-child(2)::before,
      .funbox-table td:nth-child(2)::before,
      .momoshop-table td:nth-child(3)::before,
      .momosale-table td:nth-child(2)::before { content: "商品"; }
      .monitor-table td:nth-child(3)::before { content: "URL"; }
      .monitor-table td:nth-child(4)::before,
      .discovered-table td:nth-child(4)::before,
      .funbox-table td:nth-child(3)::before,
      .momoshop-table td:nth-child(6)::before { content: "狀態"; }
      .monitor-table td:nth-child(5)::before { content: "最後檢查"; }
      .discovered-table td:nth-child(3)::before { content: "來源"; }
      .discovered-table td:nth-child(5)::before { content: "時間"; }
      .funbox-table td:nth-child(4)::before,
      .momoshop-table td:nth-child(5)::before,
      .momosale-table td:nth-child(5)::before { content: "庫存"; }
      .funbox-table td:nth-child(5)::before { content: "總銷量"; }
      .funbox-table td:nth-child(6)::before { content: "簡介"; }
      .funbox-table td:nth-child(7)::before,
      .momoshop-table td:nth-child(7)::before,
      .momosale-table td:nth-child(7)::before { content: "最後看到"; }
      .momoshop-table td:nth-child(2)::before { content: "賣場"; }
      .momoshop-table td:nth-child(4)::before,
      .momosale-table td:nth-child(4)::before { content: "價格"; }
      .momosale-table td:nth-child(3)::before { content: "開賣"; }
      .momosale-table td:nth-child(6)::before { content: "提醒"; }
      .actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-content: stretch;
      }
      .actions button {
        width: 100%;
        min-height: 40px;
      }
      .url {
        max-width: none;
        min-width: 0;
      }
      .state {
        justify-self: start;
      }
    }

    @media (max-width: 420px) {
      main {
        width: calc(100% - 10px);
      }
      header {
        padding-inline: 8px;
      }
      .top-panel,
      .toolbar,
      .panel-actions,
      tr {
        border-radius: 7px;
      }
      td {
        grid-template-columns: 1fr;
        gap: 4px;
      }
      td.select-col {
        display: flex;
      }
      .actions,
      .bulk-actions,
      .selected-actions.visible {
        grid-template-columns: 1fr;
      }
    }