:root {
    --bg:#f2f2f2; --surface:#fff; --surface-2:#f7f7f7; --border:#e6e6e6; --text:#1a1a1a; --text-muted:#767676;
    --accent:#ff6000; --ink-btn:#1a1a1a; --ink-btn-ink:#fff;
    --good:#00a651; --good-soft:#e2f7ec; --bad:#e3341f; --bad-soft:#fdeae7; --unknown:#8c8c8c; --unknown-soft:#ececec;
    --shadow:0 1px 2px rgba(20,20,20,.05),0 8px 20px -12px rgba(20,20,20,.18);
  }
  @media (prefers-color-scheme: dark) { :root {
    --bg:#111; --surface:#1b1b1b; --surface-2:#232323; --border:#333; --text:#f2f2f2; --text-muted:#a3a3a3;
    --accent:#ff7a29; --ink-btn:#f2f2f2; --ink-btn-ink:#141414;
    --good:#37c988; --good-soft:#103224; --bad:#ff7a6e; --bad-soft:#3a1917; --unknown:#a8a8a8; --unknown-soft:#292929;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 20px -12px rgba(0,0,0,.6);
  } }
  * { box-sizing: border-box; }
  body { margin:0; background:var(--bg); color:var(--text); font:14px 'DM Sans',system-ui,sans-serif; padding-bottom:56px; }
  h1,h3 { font-family:'Poppins',system-ui,sans-serif; margin:0; }
  .tabular { font-variant-numeric: tabular-nums; }
  button { font-family:inherit; cursor:pointer; }
  button:disabled { opacity:.5; cursor:not-allowed; }
  .wrap { max-width:1260px; margin:0 auto; padding:0 20px; display:flex; flex-direction:column; gap:16px; }

  .topbar { background:var(--surface); border-bottom:1px solid var(--border); }
  .topbar-inner { max-width:1260px; margin:0 auto; padding:14px 20px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; }
  .brandline { display:flex; align-items:center; gap:10px; }
  .logo-mark { width:38px; height:38px; border-radius:10px; background:var(--accent); display:flex; align-items:center; justify-content:center; }
  .logo-mark svg { width:22px; height:16px; } .logo-mark path { fill:none; stroke:#fff; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
  h1 { font-size:22px; font-weight:800; color:var(--accent); }
  .tagline { margin:1px 0 0; color:var(--text-muted); font-size:12.5px; font-weight:500; }
  .stripe { height:5px; display:flex; } .stripe span { flex:1; }

  .actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
  .btn { border:none; border-radius:999px; padding:10px 18px; font-weight:700; font-size:13px; }
  .btn.primary { background:var(--accent); color:#fff; }
  .btn.dark { background:var(--ink-btn); color:var(--ink-btn-ink); }
  .btn.ghost { background:var(--surface-2); color:var(--text); border:1.5px solid var(--border); }
  .btn.danger { background:var(--bad); color:#fff; }

  .job { background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); padding:14px 16px; display:flex; flex-direction:column; gap:8px; }
  .job[hidden] { display:none; }
  .job-head { display:flex; justify-content:space-between; gap:12px; align-items:center; flex-wrap:wrap; }
  .job-title { font-weight:700; font-family:'Poppins',sans-serif; font-size:14px; }
  .bar { height:10px; background:var(--surface-2); border-radius:999px; overflow:hidden; border:1px solid var(--border); }
  .bar > i { display:block; height:100%; width:0; background:var(--accent); transition:width .3s; }
  .job-cur { font-size:12.5px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .logbox { max-height:120px; overflow:auto; font-size:12px; color:var(--text-muted); background:var(--surface-2); border-radius:8px; padding:8px 10px; }
  .logbox div { padding:1px 0; }

  .collect { display:grid; grid-template-columns:minmax(0,1fr); gap:0; background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); overflow:hidden; }
  @media (min-width:900px) { .collect { grid-template-columns:minmax(0,3fr) minmax(0,2fr); } .collect-col + .collect-col { border-left:1px solid var(--border); border-top:none; } }
  .collect-col { padding:16px 18px; display:flex; flex-direction:column; gap:8px; }
  .collect-col + .collect-col { border-top:1px solid var(--border); }
  .collect h3 { font-size:15px; font-weight:700; } .hint { margin:0; color:var(--text-muted); font-size:12.5px; line-height:1.4; }
  .discover-form { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:4px; }
  .discover-form input { border:1.5px solid var(--border); background:var(--bg); color:var(--text); border-radius:999px; padding:9px 14px; font:inherit; }
  .discover-form input[type=url] { flex:1 1 100%; min-width:0; }
  .count-field { display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--text-muted); } .count-field input { width:92px; }
  .auto-row { display:flex; align-items:center; gap:8px; font-size:13px; margin-top:6px; cursor:pointer; } .auto-row input { width:17px; height:17px; accent-color:var(--accent); }
  .selcol { width:34px; } .selcol input, .card .sel { width:16px; height:16px; accent-color:var(--accent); cursor:pointer; }
  .card .sel { position:absolute; top:7px; right:7px; background:#fff; }

  .stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:10px; }
  .stat { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px 16px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:4px; }
  .stat .n { font-family:'Poppins',sans-serif; font-size:24px; font-weight:700; } .stat .l { font-size:12px; color:var(--text-muted); font-weight:500; }
  .stat.good .n { color:var(--good); } .stat.bad .n { color:var(--bad); } .stat.accent .n { color:var(--accent); }

  .controls { display:flex; flex-wrap:wrap; gap:10px; align-items:center; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:10px 12px; box-shadow:var(--shadow); }
  .controls input[type=search] { flex:1 1 220px; min-width:0; border:1.5px solid var(--border); background:var(--bg); color:var(--text); border-radius:999px; padding:9px 14px; font:inherit; }
  .controls select { border:1.5px solid var(--border); background:var(--bg); color:var(--text); border-radius:999px; padding:9px 12px; font:inherit; font-size:13px; }
  .controls input:focus,.controls select:focus,.discover-form input:focus { border-color:var(--accent); outline:none; }
  .count { font-size:12px; color:var(--text-muted); font-weight:600; }
  .view-toggle { display:flex; background:var(--surface-2); border-radius:999px; padding:3px; gap:2px; margin-left:auto; }
  .view-toggle button { border:none; background:transparent; color:var(--text-muted); font-weight:600; font-size:12.5px; padding:7px 14px; border-radius:999px; }
  .view-toggle button.active { background:var(--ink-btn); color:var(--ink-btn-ink); }

  .board { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
  @media (min-width:1000px) { .board { grid-template-columns:minmax(0,1fr) 300px; align-items:start; } }
  .panel { background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); overflow:hidden; }
  .panel-head { padding:12px 14px; border-bottom:1px solid var(--border); }
  .panel-head h3 { font-size:13px; text-transform:uppercase; letter-spacing:.04em; font-weight:700; color:var(--text-muted); }

  table { width:100%; border-collapse:collapse; } .table-shell { max-height:660px; overflow:auto; }
  thead th { position:sticky; top:0; background:var(--surface-2); text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); font-weight:700; padding:10px 12px; border-bottom:1px solid var(--border); white-space:nowrap; }
  tbody td { padding:8px 12px; border-bottom:1px solid var(--border); font-size:13.5px; vertical-align:middle; }
  tbody tr:hover { background:var(--surface-2); }
  .prod { display:flex; align-items:center; gap:10px; min-width:240px; }
  .prod img { width:42px; height:42px; border-radius:8px; object-fit:cover; background:var(--surface-2); border:1px solid var(--border); flex:none; }
  .ptext { display:flex; flex-direction:column; gap:2px; min-width:0; }
  .pname { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:340px; } .pbrand { font-size:11.5px; color:var(--text-muted); }
  .price-now { font-weight:700; font-family:'Poppins',sans-serif; } .price-old { color:var(--text-muted); text-decoration:line-through; font-size:12px; margin-left:6px; }
  .off-pill { display:inline-block; background:var(--good); color:#fff; font-size:11px; font-weight:700; border-radius:5px; padding:1px 6px; margin-left:6px; }
  .pill { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap; }
  .pill.good { background:var(--good-soft); color:var(--good); } .pill.bad { background:var(--bad-soft); color:var(--bad); } .pill.unknown { background:var(--unknown-soft); color:var(--unknown); } .pill.accent { background:#fff1e6; color:var(--accent); }
  .pill .dot { width:6px; height:6px; border-radius:50%; background:currentColor; }
  .row-actions { display:flex; gap:6px; }
  .mini { border:1.5px solid var(--border); background:var(--surface); color:var(--text-muted); border-radius:999px; padding:5px 11px; font-size:12px; font-weight:700; text-decoration:none; }
  .mini:hover:not(:disabled) { color:var(--accent); border-color:var(--accent); }
  .checked-at { color:var(--text-muted); font-size:12px; white-space:nowrap; } .empty { padding:40px 16px; text-align:center; color:var(--text-muted); }

  .grid-shell { max-height:660px; overflow:auto; padding:14px; }
  .card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:12px; }
  .card { background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
  .card .thumb { position:relative; aspect-ratio:1/1; background:var(--surface-2); } .card .thumb img { width:100%; height:100%; object-fit:cover; display:block; }
  .stockflag { position:absolute; top:7px; left:7px; font-size:10.5px; font-weight:700; color:#fff; padding:3px 8px; border-radius:5px; }
  .card .body { padding:10px 11px 12px; display:flex; flex-direction:column; gap:6px; flex:1; }
  .cbrand { font-size:11px; color:var(--text-muted); font-weight:600; text-transform:uppercase; }
  .cname { font-size:12.5px; line-height:1.3; height:2.6em; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
  .cprice { margin-top:auto; display:flex; flex-direction:column; } .cprice-old { font-size:11px; color:var(--text-muted); text-decoration:line-through; } .cprice-now { font-family:'Poppins',sans-serif; font-weight:700; font-size:16px; }
  .card .btns { display:flex; gap:6px; margin-top:6px; } .card .btns .mini { flex:1; text-align:center; }

  .feed { list-style:none; margin:0; padding:6px; max-height:660px; overflow:auto; }
  .feed-item { display:flex; flex-direction:column; gap:3px; padding:10px; border-radius:10px; } .feed-item:hover { background:var(--surface-2); }
  .fname { font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .fmeta { font-size:11.5px; color:var(--text-muted); display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
  .feed-empty { padding:28px 16px; text-align:center; color:var(--text-muted); font-size:13px; }
  [hidden] { display:none !important; }

/* ---------- nav ---------- */
.topbar-inner .nav { display:flex; gap:6px; flex-wrap:wrap; }
.nav a { padding:8px 16px; border-radius:999px; font-weight:700; font-size:13px; text-decoration:none; color:var(--text-muted); border:1.5px solid transparent; }
.nav a:hover { color:var(--text); border-color:var(--border); }
.nav a.active { background:var(--ink-btn); color:var(--ink-btn-ink); }
.nav-n { display:inline-block; min-width:18px; padding:0 6px; border-radius:999px; background:var(--bad); color:#fff; font-size:11px; line-height:18px; text-align:center; }
.nav-n:empty { display:none; }

/* ---------- page header / bulk bar ---------- */
.page-title { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:4px; }
.page-title h2 { font-family:'Poppins',sans-serif; margin:0; font-size:20px; } .page-title p { margin:0; color:var(--text-muted); font-size:13px; }
.bulkbar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.tabs { display:flex; gap:6px; flex-wrap:wrap; }
.tabs button { border:1.5px solid var(--border); background:var(--surface); color:var(--text-muted); border-radius:999px; padding:7px 14px; font-weight:700; font-size:12.5px; }
.tabs button.active { background:var(--ink-btn); color:var(--ink-btn-ink); border-color:var(--ink-btn); }
.mini.danger-mini:hover:not(:disabled) { color:var(--bad); border-color:var(--bad); }
.wide-table { min-width:1180px; }
.sub { display:block; font-size:11.5px; color:var(--text-muted); }

/* ---------- list view (detailed) ---------- */
.plist { display:flex; flex-direction:column; gap:10px; padding:14px; max-height:760px; overflow:auto; }
.pitem { display:grid; grid-template-columns:auto 72px minmax(0,1fr); gap:12px; align-items:start; padding:12px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.pitem:hover { box-shadow:var(--shadow); }
.pitem img { width:72px; height:72px; border-radius:10px; object-fit:cover; background:var(--surface-2); border:1px solid var(--border); }
.pitem .ptop { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:flex-start; }
.pitem .ptitle { font-weight:700; font-size:14px; line-height:1.3; } .pitem .pmeta { color:var(--text-muted); font-size:12px; margin-top:2px; }
.facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px 16px; margin-top:10px; }
.fact .k { font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); font-weight:700; }
.fact .v { font-size:13px; font-weight:600; margin-top:1px; }
.pitem .btns { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }

/* ---------- modal ---------- */
.modal-back { position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; padding:16px; z-index:50; }
.modal { background:var(--surface); color:var(--text); border-radius:14px; width:min(640px,100%); max-height:86vh; overflow:auto; box-shadow:0 20px 60px rgba(0,0,0,.35); }
.modal-head { display:flex; justify-content:space-between; gap:12px; padding:14px 16px; border-bottom:1px solid var(--border); align-items:flex-start; }
.modal-head h3 { font-size:15px; line-height:1.3; } .modal-body { padding:14px 16px; }
.hist-row { display:grid; grid-template-columns:150px 1fr auto; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); font-size:13px; align-items:center; }
.hist-row:last-child { border-bottom:none; }

/* ---------- table fit fixes ---------- */
.wide-table { min-width:0; }
.table-shell table td, .table-shell table th { padding-left:10px; padding-right:10px; }
.row-actions { flex-wrap:nowrap; white-space:nowrap; }
.row-actions .mini { padding:5px 9px; }
.table-shell thead th:last-child, .table-shell tbody td:last-child { position:sticky; right:0; background:var(--surface); box-shadow:-8px 0 8px -8px rgba(0,0,0,.18); }
.table-shell thead th:last-child { background:var(--surface-2); z-index:2; }
.table-shell tbody tr:hover td:last-child { background:var(--surface-2); }
.pname { max-width:260px; }
.pname { max-width:210px; }
.row-actions a.mini { padding:5px 10px; }

.nav a.logout { border-color:var(--border); }
.nav a.logout:hover { color:var(--bad); border-color:var(--bad); }
.extra-opt { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text-muted); font-weight:600; cursor:pointer; }
.extra-opt input { accent-color:var(--accent); width:16px; height:16px; }
.btn.purge { background:var(--bad); color:#fff; }
.mini.purge-mini { color:var(--bad); border-color:var(--bad); }
.mini.purge-mini:hover:not(:disabled) { background:var(--bad); color:#fff; }
.code { font-family:'DM Sans',monospace; font-size:11px; color:var(--text-muted); letter-spacing:.02em; }

.sec-banner { background:#fff4e5; color:#8a4b00; border-bottom:1px solid #ffd9a8; padding:10px 20px; font-size:13px; font-weight:600; display:flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap; }
.sec-banner[hidden] { display:none; }
.pw-form { display:flex; flex-direction:column; gap:12px; }
.pw-form label { display:flex; flex-direction:column; gap:6px; font-size:12.5px; font-weight:700; color:var(--text-muted); }
.pw-form input { border:1.5px solid var(--border); background:var(--bg); color:var(--text); border-radius:999px; padding:10px 14px; font:inherit; font-size:14px; font-weight:400; }
.pw-form input:focus { border-color:var(--accent); outline:none; }
.login-err { color:var(--bad); font-size:13px; font-weight:600; min-height:18px; margin:0; }