:root { --bg: #0f1216; --panel: #171b21; --panel-2: #1e242c; --line: #2a323c; --text: #e6e9ee; --muted: #9aa4b2; --accent: #4f9dff; --good: #35c47b; --bad: #ff6b6b; --warn: #f2b134; } /* Light theme — activated by . Default stays dark. */ :root[data-theme="light"] { --bg: #f7f8fa; --panel: #ffffff; --panel-2: #eef1f5; --line: #dfe3e8; --text: #1a1d21; --muted: #5b6472; --accent: #2563eb; --good: #16a34a; --bad: #dc2626; --warn: #b45309; } * { box-sizing: border-box; } body { margin: 0; font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); } header { display: flex; align-items: center; gap: 12px; padding: 18px 24px; border-bottom: 1px solid var(--line); position: relative; } h1 { font-size: 20px; margin: 0; } h2 { font-size: 15px; margin: 0 0 4px; } .badge { font-size: 12px; padding: 3px 9px; border-radius: 20px; background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); } .badge.live { color: var(--good); border-color: var(--good); } .badge.sample { color: var(--warn); border-color: var(--warn); } .supplier-bar { display: flex; align-items: stretch; gap: 8px; padding: 14px 24px 0; flex-wrap: wrap; } .supplier-tab { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 9px 16px; cursor: pointer; min-width: 150px; } .supplier-tab:hover { border-color: var(--muted); } .supplier-tab.active { border-color: var(--accent); background: var(--panel-2); box-shadow: inset 0 -2px 0 var(--accent); } .supplier-tab .st-name { font-weight: 700; font-size: 15px; } .supplier-tab .st-note { font-size: 11px; color: var(--muted); } .supplier-tab .st-count { font-size: 11px; color: var(--muted); } .supplier-tab.active .st-count { color: var(--accent); } .panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; padding: 20px 24px; } .step { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px; } .hint { color: var(--muted); font-size: 13px; margin: 0 0 12px; } .row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } label { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; } label.check { color: var(--text); } input[type="number"] { width: 84px; } input, button { font: inherit; } input[type="number"], input[type="file"] { background: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 7px 9px; } button { background: var(--accent); color: #06101f; border: none; border-radius: 8px; padding: 8px 14px; font-weight: 600; cursor: pointer; } button:hover { filter: brightness(1.08); } button.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); } button.danger { color: var(--bad); border-color: var(--bad); } button:disabled { opacity: .5; cursor: default; } .result { margin-top: 12px; font-size: 13px; color: var(--muted); min-height: 18px; } .tabs { display: flex; align-items: center; gap: 12px; padding: 0 24px; margin-top: 8px; } #count { color: var(--muted); } th.num, td.num { width: 42px; color: var(--muted); text-align: right; padding-right: 6px; } .tab { background: transparent; color: var(--muted); border: 1px solid var(--line); } .tab.active { color: var(--text); border-color: var(--accent); } .spacer { flex: 1; } #table-wrap { overflow: auto; max-height: calc(100vh - 240px); min-height: 200px; padding: 0 24px 40px; } table { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap; } th, td { text-align: right; padding: 9px 12px; border-bottom: 1px solid var(--line); } th:first-child, td:first-child, th.l, td.l { text-align: left; white-space: normal; } th { color: var(--muted); font-weight: 600; cursor: pointer; user-select: none; position: sticky; top: 0; z-index: 2; background: var(--bg); box-shadow: 0 1px 0 var(--line); } tbody tr:hover { background: var(--panel); } tr.reco td { background: rgba(53,196,123,.07); } tr.selrow td { background: rgba(79,157,255,.12); } th .rowsel, td .rowsel, #sel-all { cursor: pointer; } td:first-child, th:first-child { width: 34px; } .pos { color: var(--good); font-weight: 600; } .neg { color: var(--bad); } .pill { font-size: 11px; padding: 2px 7px; border-radius: 10px; border: 1px solid var(--line); color: var(--muted); } .pill.reco { color: var(--good); border-color: var(--good); } .pill.nm { color: var(--bad); border-color: var(--bad); } .star { cursor: pointer; font-size: 16px; color: var(--muted); background: none; border: none; padding: 0; } .star.on { color: var(--warn); } .empty { color: var(--muted); text-align: center; padding: 30px; } .small { font-size: 11px; color: var(--muted); } .pagination { display: flex; align-items: center; gap: 4px; padding: 10px 0; flex-wrap: wrap; } .pag-btn { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 4px; padding: 4px 10px; cursor: pointer; font-size: 13px; } .pag-btn:hover:not(.disabled):not(.active) { background: var(--line); } .pag-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); } .pag-btn.disabled { opacity: 0.4; cursor: default; } .pag-dots { color: var(--muted); padding: 0 4px; font-size: 13px; } .pag-info { color: var(--muted); font-size: 12px; margin-left: 10px; } .pag-size { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 4px; padding: 3px 6px; font-size: 12px; margin-left: 4px; } .match-progress { position: relative; height: 26px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; } .match-progress-bar { position: absolute; top: 0; left: 0; height: 100%; background: var(--accent); opacity: 0.3; transition: width 0.3s ease; } .match-progress-text { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; height: 100%; font-size: 12px; color: var(--text); font-weight: 600; }