:root{
    --bg:#F1F2F6;
    --surface:#FFFFFF;
    --surface-2:#F7F8FB;
    --ink:#161A23;
    --muted:#6B7280;
    --faint:#9CA3AF;
    --border:#E3E5EC;
    --accent:#2148C0;
    --accent-ink:#FFFFFF;
    --accent-soft:#E8EDFB;
    --up:#C23B2E;
    --up-soft:#FBEAE8;
    --down:#147D5F;
    --down-soft:#E6F4EF;
    --new:#B7791F;
    --new-soft:#FCF1DD;
    --mono: ui-monospace, "SF Mono", "IBM Plex Mono", Menlo, Consolas, monospace;
    --sans: -apple-system, "Segoe UI", "Inter", Helvetica, Arial, sans-serif;
    --radius: 8px;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.45;}
  ::selection{background:var(--accent-soft);}
  button{font-family:inherit;font-size:13px;cursor:pointer;}
  input,select{font-family:inherit;font-size:13px;}

  #app{max-width:1180px;margin:0 auto;padding:20px 20px 60px;}

  .topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--border);}
  .brand{display:flex;align-items:baseline;gap:10px;}
  .brand .mark{font-family:var(--mono);font-weight:700;font-size:20px;letter-spacing:-0.02em;color:var(--accent);}
  .brand .tag{font-size:12px;color:var(--muted);}
  .tabs{display:flex;flex-wrap:wrap;gap:4px;background:var(--surface-2);padding:4px;border-radius:999px;border:1px solid var(--border);}
  .tab{padding:7px 16px;border-radius:999px;border:none;background:transparent;color:var(--muted);font-weight:600;}
  .tab.active{background:var(--ink);color:#fff;}
  .tab:not(.active):hover{color:var(--ink);}
  .data-status-pill{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border:1px solid var(--border);border-radius:999px;background:var(--surface-2);font-size:12px;font-weight:600;line-height:1;color:var(--muted);white-space:nowrap;}
  .data-status-pill:hover{border-color:var(--muted);}
  .data-status-pill.tone-ok{color:var(--down);background:var(--down-soft);border-color:var(--down-soft);}
  .data-status-pill.tone-warn{color:var(--up);background:var(--up-soft);border-color:var(--up-soft);}
  .data-status-pill.tone-neutral{color:var(--muted);background:var(--surface-2);border-color:var(--border);}

  .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;margin-bottom:16px;}
  .card h2{margin:0 0 4px;font-size:15px;}
  .card .sub{color:var(--muted);font-size:12.5px;margin-bottom:14px;}

  .row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;}
  .field{display:flex;flex-direction:column;gap:5px;min-width:160px;}
  .field label{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600;}
  .field input[type=text], .field input[type=date], .field select{
    padding:8px 10px;border:1px solid var(--border);border-radius:6px;background:#fff;color:var(--ink);
  }
  .field input:focus, .field select:focus{outline:2px solid var(--accent-soft);border-color:var(--accent);}

  .btn{padding:9px 16px;border-radius:6px;border:1px solid var(--border);background:#fff;color:var(--ink);font-weight:600;}
  .btn:hover{border-color:var(--faint);}
  .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;}
  .btn.primary:hover{background:#1b3a9e;}
  .btn.danger{color:var(--up);border-color:var(--up-soft);}
  .btn.danger:hover{background:var(--up-soft);}
  .btn:disabled{opacity:.45;cursor:not-allowed;}
  .btn.small{padding:5px 10px;font-size:12px;}

  .dropzone{border:1.5px dashed var(--border);border-radius:8px;padding:26px;text-align:center;color:var(--muted);background:var(--surface-2);cursor:pointer;transition:border-color .15s, background .15s;}
  .dropzone:hover, .dropzone.drag{border-color:var(--accent);background:var(--accent-soft);color:var(--ink);}
  .dropzone input{display:none;}
  .dropzone .big{font-size:13.5px;font-weight:600;margin-bottom:2px;}
  .dropzone .small{font-size:12px;}

  table{width:100%;border-collapse:collapse;}
  th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);font-weight:700;padding:8px 10px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface);white-space:nowrap;}
  td{padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:top;}
  tr:last-child td{border-bottom:none;}
  .mono{font-family:var(--mono);font-variant-numeric:tabular-nums;}
  .desc-cell{max-width:420px;color:var(--ink);}
  .desc-cell .full{display:none;color:var(--muted);margin-top:4px;font-size:12.5px;}
  tr.expanded .desc-cell .full{display:block;}
  .muted{color:var(--muted);}
  .table-wrap{max-height:560px;overflow:auto;border:1px solid var(--border);border-radius:8px;}
  .table-wrap table{margin:0;}

  .chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:700;font-family:var(--mono);white-space:nowrap;}
  .chip.up{background:var(--up-soft);color:var(--up);}
  .chip.down{background:var(--down-soft);color:var(--down);}
  .chip.new{background:var(--new-soft);color:var(--new);}
  .chip.flat{background:var(--surface-2);color:var(--faint);}

  .badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;background:var(--surface-2);color:var(--muted);border:1px solid var(--border);}

  .summary-grid{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 2px;}
  .stat{flex:1;min-width:120px;border:1px solid var(--border);border-radius:8px;padding:12px 14px;background:var(--surface-2);}
  .stat .n{font-family:var(--mono);font-size:22px;font-weight:700;line-height:1;}
  .stat .l{font-size:11.5px;color:var(--muted);margin-top:5px;text-transform:uppercase;letter-spacing:.03em;}
  .stat.up .n{color:var(--up);}
  .stat.down .n{color:var(--down);}
  .stat.new .n{color:var(--new);}

  .mapping{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin:10px 0 16px;}
  .mapping .m-item{border:1px solid var(--border);border-radius:6px;padding:8px 10px;background:var(--surface-2);}
  .mapping .m-item label{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;margin-bottom:4px;}

  .empty{text-align:center;padding:50px 20px;color:var(--muted);}
  .empty .icon{font-size:28px;margin-bottom:8px;}

  .supplier-block{border:1px solid var(--border);border-radius:8px;padding:14px 16px;margin-bottom:12px;background:var(--surface-2);}
  .supplier-block h3{margin:0 0 8px;font-size:14px;}
  .snap-row{display:flex;align-items:center;justify-content:space-between;padding:6px 0;border-top:1px dashed var(--border);}
  .snap-row:first-of-type{border-top:none;}

  .toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 18px;border-radius:8px;font-size:13px;box-shadow:0 6px 20px rgba(0,0,0,.15);z-index:50;}

  .checkbox-row{display:flex;flex-wrap:wrap;gap:8px;}
  .chk{display:flex;align-items:center;gap:6px;border:1px solid var(--border);padding:5px 10px;border-radius:999px;background:#fff;font-size:12.5px;cursor:pointer;user-select:none;}
  .chk input{margin:0;}
  .chk.on{background:var(--accent-soft);border-color:var(--accent);}

  th.col-disabled{color:var(--faint);}
  td.col-disabled{color:var(--faint);background:var(--surface-2);text-decoration:line-through;text-decoration-color:var(--border);}

  .spinner{display:inline-block;width:13px;height:13px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;vertical-align:-2px;margin-right:6px;}
  @keyframes spin{to{transform:rotate(360deg);}}

  a.link{color:var(--accent);text-decoration:none;font-weight:600;}
  a.link:hover{text-decoration:underline;}

  .product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;}
  .product-card{border:1px solid var(--border);border-radius:8px;background:var(--surface);overflow:hidden;display:flex;flex-direction:column;}
  .product-thumb{aspect-ratio:1/1;background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:28px;overflow:hidden;}
  .product-thumb img{width:100%;height:100%;object-fit:contain;}
  .product-body{padding:10px 12px;display:flex;flex-direction:column;gap:4px;flex:1;}
  .product-body .pb-brand{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;}
  .product-body .pb-sku{font-family:var(--mono);font-size:12.5px;font-weight:700;}
  .product-body .pb-desc{font-size:12px;color:var(--muted);flex:1;}
  .product-body .pb-suppliers{font-size:11px;color:var(--faint);}
  .product-price{display:grid;grid-template-columns:1fr 1fr;gap:2px 8px;padding:8px 12px;border-top:1px solid var(--border);font-size:11.5px;}
  .product-price .muted{margin-right:4px;}
  .product-footer{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-top:1px solid var(--border);}
  .chip.ok{background:var(--down-soft);color:var(--down);}
  .chip.none{background:var(--surface-2);color:var(--faint);}

  .product-edit{padding:12px;border-top:1px solid var(--border);background:var(--surface-2);display:flex;flex-direction:column;gap:8px;}
  .product-edit label{font-size:11px;text-transform:uppercase;color:var(--muted);font-weight:600;}
  .product-edit input[type=text], .product-edit textarea, .product-edit select{width:100%;padding:6px 8px;border:1px solid var(--border);border-radius:6px;font-family:inherit;font-size:12.5px;}
  .product-edit textarea{resize:vertical;min-height:50px;}