:root{color-scheme:light}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

:root{
    --paper:#EAF2EC;
    --surface:#FFFFFF;
    --surface-2:#F3F8F4;
    --rule:#CFE0D5;
    --ink:#1B2A20;
    --ink-soft:#54695D;
    --ink-faint:#8BA093;
    --accent:#B4392A;
    --accent-ink:#FFFFFF;
    --link:#2C4A73;
    --good:#2F7D4F;
    --stock-off:#9AA39C;
    --sup-shoppozone:#2F6F62;
    --sup-cheaperzone:#2C4A73;
    --sup-qualityzone:#6B4472;
    --sup-shivdhara:#8A6A1E;
    --sup-holiday:#1E6E8C;
    --sup-valamji:#A6482E;
    --shadow: 0 1px 2px rgba(27,42,32,0.06), 0 4px 14px rgba(27,42,32,0.06);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --paper:#101913;
      --surface:#182018;
      --surface-2:#1C261E;
      --rule:#2B3B30;
      --ink:#E7F0EA;
      --ink-soft:#9FB3A5;
      --ink-faint:#647566;
      --accent:#E2604A;
      --accent-ink:#1B120E;
      --link:#8FB3E0;
      --good:#5CBE85;
      --stock-off:#69766D;
      --sup-shoppozone:#4E9A89;
      --sup-cheaperzone:#7098C7;
      --sup-qualityzone:#A47EAE;
      --sup-shivdhara:#C79F3E;
      --sup-holiday:#4FA8CC;
      --sup-valamji:#E08462;
      --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 4px 18px rgba(0,0,0,0.35);
    }
  }
  :root[data-theme="dark"]{
    --paper:#101913;
    --surface:#182018;
    --surface-2:#1C261E;
    --rule:#2B3B30;
    --ink:#E7F0EA;
    --ink-soft:#9FB3A5;
    --ink-faint:#647566;
    --accent:#E2604A;
    --accent-ink:#1B120E;
    --link:#8FB3E0;
    --good:#5CBE85;
    --stock-off:#69766D;
    --sup-shoppozone:#4E9A89;
    --sup-cheaperzone:#7098C7;
    --sup-qualityzone:#A47EAE;
    --sup-shivdhara:#C79F3E;
    --sup-holiday:#4FA8CC;
    --sup-valamji:#E08462;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 4px 18px rgba(0,0,0,0.35);
  }

  *{box-sizing:border-box;}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:'IBM Plex Sans', system-ui, sans-serif;
    line-height:1.45;
  }
  h1,h2,h3,.display{
    font-family:'Zilla Slab', Georgia, serif;
    text-wrap:balance;
    color:var(--ink);
  }
  .mono, .price, .code, input, select{
    font-family:'IBM Plex Mono', ui-monospace, monospace;
  }
  .tabular{ font-variant-numeric: tabular-nums; }

  a{ color:var(--link); }

  .wrap{
    max-width:1080px;
    margin:0 auto;
    padding:20px 18px 64px;
  }

  /* ---------- Header ---------- */
  header.top{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:16px;
    padding-bottom:14px;
    margin-bottom:18px;
    border-bottom:2px solid var(--ink);
  }
  header.top .brand{
    display:flex;
    align-items:baseline;
    gap:10px;
  }
  header.top h1{
    font-size:28px;
    font-weight:700;
    margin:0;
    letter-spacing:0.2px;
  }
  header.top .tagline{
    font-size:13px;
    color:var(--ink-soft);
  }
  header.top .stamp{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.09em;
    color:var(--ink-faint);
    border:1px solid var(--rule);
    border-radius:3px;
    padding:4px 8px;
    white-space:nowrap;
  }

  .hint{
    background:var(--surface-2);
    border:1px dashed var(--rule);
    border-radius:8px;
    padding:10px 14px;
    font-size:13.5px;
    color:var(--ink-soft);
    margin-bottom:20px;
  }
  .hint b{ color:var(--ink); }

  /* ---------- Search ---------- */
  .search-row{
    display:flex;
    gap:10px;
    margin-bottom:12px;
  }
  .search-box{
    position:relative;
    flex:1;
  }
  .search-box svg{
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    opacity:0.5;
    pointer-events:none;
  }
  #search{
    width:100%;
    font-size:17px;
    padding:14px 14px 14px 42px;
    border-radius:10px;
    border:1.5px solid var(--ink);
    background:var(--surface);
    color:var(--ink);
    font-family:'IBM Plex Sans', sans-serif;
  }
  #search:focus{
    outline:2px solid var(--accent);
    outline-offset:1px;
  }
  #search::placeholder{ color:var(--ink-faint); }

  .filters{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
    margin-bottom:18px;
  }
  .chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 12px;
    border-radius:999px;
    border:1.3px solid var(--rule);
    background:var(--surface);
    color:var(--ink-soft);
    font-size:13px;
    cursor:pointer;
    user-select:none;
    transition:border-color .12s, color .12s, background .12s;
  }
  .chip input{ display:none; }
  .chip .dot{
    width:8px; height:8px; border-radius:50%;
    background:currentColor;
  }
  .chip.on{
    border-color:currentColor;
    background:var(--surface-2);
    font-weight:500;
  }
  .chip-group{ display:inline-flex; flex-wrap:wrap; gap:8px; }

  select#sort, select#category{
    padding:7px 10px;
    border-radius:8px;
    border:1.3px solid var(--rule);
    background:var(--surface);
    color:var(--ink);
    font-size:13px;
  }
  .filters .spacer{ flex:1; }
  label.toggle{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:13px;
    color:var(--ink-soft);
    cursor:pointer;
  }

  /* ---------- Best price callout ---------- */
  #best{
    display:none;
    align-items:center;
    gap:12px;
    background:var(--surface);
    border:1.5px solid var(--accent);
    border-radius:10px;
    padding:12px 16px;
    margin-bottom:16px;
    box-shadow:var(--shadow);
  }
  #best .badge{
    background:var(--accent);
    color:var(--accent-ink);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.07em;
    font-weight:600;
    padding:4px 9px;
    border-radius:5px;
    white-space:nowrap;
  }
  #best .txt{ font-size:14.5px; }
  #best .txt b{ color:var(--ink); }
  #best .price{ margin-left:auto; font-size:20px; font-weight:600; color:var(--accent); }

  /* ---------- Results ---------- */
  #count{
    font-size:12.5px;
    color:var(--ink-faint);
    margin-bottom:8px;
  }
  .results{
    display:flex;
    flex-direction:column;
    border:1px solid var(--rule);
    border-radius:10px;
    overflow:hidden;
    background:var(--surface);
    box-shadow:var(--shadow);
  }
  .row{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:14px;
    padding:10px 14px 10px 0;
    border-bottom:1px solid var(--rule);
    background:var(--surface);
  }
  .row:last-child{ border-bottom:none; }
  .row:nth-child(even){ background:var(--surface-2); }
  .row .stripe{ align-self:stretch; flex:0 0 4px; width:4px; }
  .row.cheapest .stripe{ background:var(--accent); }
  .row .main{ flex:1 1 240px; min-width:0; }
  .row .main .name{
    font-size:14.5px;
    color:var(--ink);
    margin-bottom:4px;
  }
  .row .main .meta{
    display:flex;
    flex-wrap:wrap;
    gap:6px 10px;
    align-items:center;
    font-size:11.5px;
  }
  .sup-tag{
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-weight:600;
    padding:2px 8px 2px 6px;
    border-radius:5px;
    text-transform:uppercase;
    letter-spacing:0.04em;
    font-size:10.5px;
    background:color-mix(in srgb, currentColor 14%, transparent);
  }
  .sup-tag .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
  .cat-tag{ color:var(--ink-faint); }
  .code-tag{ color:var(--ink-faint); }
  .oos{ color:var(--stock-off); font-weight:600; }

  .row .price-group{
    display:flex;
    align-items:center;
    gap:10px;
    flex:0 0 auto;
    margin-left:auto;
  }
  .row .thumb{
    width:44px;
    height:44px;
    border-radius:7px;
    object-fit:cover;
    background:var(--surface-2);
    border:1px solid var(--rule);
    flex:0 0 auto;
  }
  .row .thumb-ph{
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--ink-faint);
  }
  .row img.thumb{ cursor:zoom-in; }
  .thumb-zoom{
    position:fixed;
    z-index:80;
    display:none;
    padding:6px;
    background:var(--surface);
    border:1px solid var(--rule);
    border-radius:10px;
    box-shadow:0 10px 30px rgba(0,0,0,.28);
    pointer-events:none;
  }
  .thumb-zoom img{
    display:block;
    width:220px;
    height:220px;
    object-fit:cover;
    border-radius:7px;
    background:var(--surface-2);
  }
  @media (max-width:640px){
    .thumb-zoom{ display:none !important; }
  }
  .row .price-col{
    text-align:right;
    font-size:16px;
    font-weight:600;
    color:var(--ink);
    white-space:nowrap;
    min-width:64px;
  }
  .row.cheapest .price-col{ color:var(--accent); }
  .row .price-col .oos-label{
    font-size:11px;
    font-weight:500;
    text-decoration:line-through;
    color:var(--stock-off);
  }
  .row .price-col .ask-label{
    font-size:11px;
    font-weight:500;
    color:var(--ink-soft);
  }
  .row .price-col .price-hist{
    font-size:10.5px;
    font-weight:400;
    color:var(--ink-faint);
    margin-top:3px;
    white-space:nowrap;
  }
  .row .price-col .price-hist:empty{ display:none; }

  .row .action{
    flex:0 0 auto;
  }
  .row .action a{
    display:inline-block;
    font-size:11.5px;
    padding:6px 10px;
    border-radius:6px;
    border:1.3px solid var(--rule);
    color:var(--ink-soft);
    text-decoration:none;
    white-space:nowrap;
  }
  .wa-order{
    display:flex;
    align-items:center;
    gap:6px;
  }
  .wa-order .wa-qty{
    width:44px;
    padding:6px 4px;
    text-align:center;
    border-radius:6px;
    border:1.3px solid var(--rule);
    background:var(--surface);
    color:var(--ink);
    font-size:12.5px;
    font-family:'IBM Plex Mono', monospace;
  }
  .wa-order .wa-btn{
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-size:11.5px;
    font-weight:600;
    padding:6px 10px;
    border-radius:6px;
    border:1.3px solid #2FA84F;
    background:#2FA84F;
    color:#FFFFFF;
    text-decoration:none;
    white-space:nowrap;
    cursor:pointer;
  }
  .wa-order .wa-btn:hover{ background:#278F42; border-color:#278F42; }
  .wa-order .wa-btn svg{ flex:0 0 auto; }
  .row .contact-link{
    display:block;
    font-size:10.5px;
    color:var(--ink-faint);
    text-decoration:none;
    margin-top:4px;
    text-align:center;
  }

  .empty{
    padding:40px 20px;
    text-align:center;
    color:var(--ink-faint);
    font-size:14px;
  }

  /* ---------- Suppliers panel ---------- */
  details.suppliers{
    margin-top:26px;
    border:1px solid var(--rule);
    border-radius:10px;
    background:var(--surface);
    overflow:hidden;
  }
  details.suppliers summary{
    cursor:pointer;
    list-style:none;
    padding:13px 16px;
    font-size:14px;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--ink);
  }
  details.suppliers summary::-webkit-details-marker{ display:none; }
  details.suppliers summary:before{
    content:"▸";
    color:var(--ink-faint);
    transition:transform .15s;
  }
  details.suppliers[open] summary:before{ transform:rotate(90deg); }
  .sup-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(230px,1fr));
    gap:1px;
    background:var(--rule);
    border-top:1px solid var(--rule);
  }
  .sup-card{
    background:var(--surface);
    padding:14px 16px;
  }
  .sup-card h3{
    font-size:14px;
    margin:0 0 8px;
    display:flex;
    align-items:center;
    gap:7px;
  }
  .sup-card h3 .dot{ width:9px;height:9px;border-radius:50%; background:currentColor; }
  .sup-card .branch{ font-size:12.5px; color:var(--ink-soft); margin-bottom:7px; }
  .sup-card .branch .bname{ color:var(--ink); font-weight:600; }
  .sup-card .branch .phone{ font-family:'IBM Plex Mono',monospace; }

  footer.note{
    margin-top:22px;
    font-size:12px;
    color:var(--ink-faint);
    text-align:center;
  }

  /* ---------- Add supplier panel ---------- */
  .add-sup-body{
    padding:14px 16px 18px;
    border-top:1px solid var(--rule);
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .beta-badge{
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:0.07em;
    font-weight:700;
    color:var(--accent);
    border:1px solid var(--accent);
    border-radius:4px;
    padding:1px 6px;
    margin-left:2px;
  }
  .add-sup-help{
    font-size:12.5px;
    color:var(--ink-soft);
  }
  .add-sup-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
  }
  .add-sup-row input[type="text"],
  .add-sup-row input:not([type]){
    flex:1 1 200px;
  }
  .add-sup-row input{
    padding:8px 10px;
    border-radius:7px;
    border:1.3px solid var(--rule);
    background:var(--surface);
    color:var(--ink);
    font-size:13px;
    font-family:'IBM Plex Sans', sans-serif;
  }
  .add-sup-row input[type="file"]{ flex:1 1 220px; font-size:12.5px; }
  .add-sup-row label{ font-size:12.5px; color:var(--ink-soft); display:flex; align-items:center; gap:6px; white-space:nowrap; }
  .add-sup-row input[type="number"]{ width:56px; text-align:center; }

  .btn-primary, .btn-secondary, #parseBtn{
    font-family:'IBM Plex Sans', sans-serif;
    font-size:13px;
    font-weight:600;
    padding:9px 16px;
    border-radius:7px;
    cursor:pointer;
    border:1.3px solid transparent;
  }
  #parseBtn, .btn-primary{
    background:var(--ink);
    color:var(--paper);
  }
  #parseBtn:disabled{ opacity:0.5; cursor:default; }
  .btn-secondary{
    background:transparent;
    border-color:var(--rule);
    color:var(--ink-soft);
  }
  .add-sup-status{
    font-size:13px;
    color:var(--ink-soft);
    min-height:18px;
  }
  .add-sup-status b{ color:var(--ink); }
  .preview-list{
    border:1px solid var(--rule);
    border-radius:8px;
    overflow:hidden;
    max-height:260px;
    overflow-y:auto;
  }
  .preview-row{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:7px 12px;
    font-size:12.5px;
    border-bottom:1px solid var(--rule);
    background:var(--surface);
  }
  .preview-row:last-child{ border-bottom:none; }
  .preview-row:nth-child(even){ background:var(--surface-2); }
  .preview-actions{
    display:flex;
    gap:10px;
    margin-top:4px;
  }
  .sup-card .remove-link{
    display:inline-block;
    margin-top:6px;
    font-size:11px;
    color:var(--accent);
    cursor:pointer;
    text-decoration:underline;
  }

  @media (max-width:640px){
    .row{ padding:10px 12px 10px 0; }
    .row .action{ flex:1 1 100%; margin:6px 0 0; padding-left:14px; }
    .row .action .wa-order{ justify-content:flex-start; }
    header.top{ flex-direction:column; align-items:flex-start; gap:4px; }
    #best{ flex-wrap:wrap; }
    #best .price{ margin-left:0; }
  }

  /* ================= v2: login, tabs, Telegram, photo search ================= */
  .login-overlay{
    position:fixed; inset:0; z-index:200;
    display:flex; align-items:center; justify-content:center;
    background:var(--paper); padding:16px;
  }
  .login-card{
    width:100%; max-width:340px;
    background:var(--surface); border:1px solid var(--rule); border-radius:12px;
    box-shadow:var(--shadow); padding:26px 24px 22px;
    display:flex; flex-direction:column; gap:12px; text-align:center;
  }
  .login-card h1{ margin:0; font-size:26px; }
  .login-card p{ margin:0; color:var(--ink-soft); font-size:13.5px; }
  .login-card input{
    font-size:16px; padding:11px 12px; border-radius:8px;
    border:1.5px solid var(--ink); background:var(--surface); color:var(--ink); text-align:center;
  }
  .login-card input:focus{ outline:2px solid var(--accent); outline-offset:1px; }
  .login-err{ color:var(--accent); font-size:13px; min-height:18px; }

  header.top .top-right{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:flex-end; }
  .top-link{ font-size:12.5px; color:var(--link); text-decoration:none; border-bottom:1px dotted currentColor; white-space:nowrap; }

  .tabs{ display:flex; gap:8px; margin-bottom:12px; }
  .tab{
    font:600 13.5px 'IBM Plex Sans', sans-serif;
    padding:8px 16px; border-radius:8px; cursor:pointer;
    border:1.3px solid var(--rule); background:var(--surface); color:var(--ink-soft);
  }
  .tab.on{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
  .tab-count{
    font:500 11px 'IBM Plex Mono', monospace; margin-left:4px; padding:1px 6px; border-radius:999px;
    background:color-mix(in srgb, currentColor 16%, transparent);
  }
  .tab-count:empty{ display:none; }

  .img-btn{
    flex:0 0 auto; display:inline-flex; align-items:center; gap:7px;
    font:600 13.5px 'IBM Plex Sans', sans-serif;
    padding:0 16px; border-radius:10px; cursor:pointer;
    border:1.5px solid var(--accent); background:var(--surface); color:var(--accent);
  }
  .img-btn:hover:not(:disabled){ background:var(--accent); color:var(--accent-ink); }
  .img-btn:disabled{ opacity:.5; cursor:wait; }
  @media (max-width:640px){ .img-btn span{ display:none; } .img-btn{ padding:0 14px; font-size:18px; } }

  .drop-hint{
    position:fixed; inset:0; z-index:150; display:flex; align-items:center; justify-content:center;
    background:color-mix(in srgb, var(--ink) 55%, transparent); color:#fff;
    font:600 22px 'Zilla Slab', serif; pointer-events:none; text-align:center; padding:20px;
  }
  .drop-hint[hidden]{ display:none; }

  .img-panel{
    background:var(--surface); border:1.5px solid var(--rule); border-radius:10px;
    padding:12px 14px; margin-bottom:16px; box-shadow:var(--shadow);
  }
  .img-panel[hidden]{ display:none; }
  .img-panel-top{ display:flex; align-items:center; gap:14px; }
  .img-preview{ width:72px; height:72px; object-fit:cover; border-radius:8px; border:1px solid var(--rule); background:var(--surface-2); flex:0 0 auto; }
  .img-panel-txt{ flex:1; min-width:0; font-size:13.5px; color:var(--ink-soft); }
  .img-panel-txt b{ color:var(--ink); }
  .img-sups{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
  .img-sup{
    min-width:118px; padding:8px 12px; border-radius:8px; border:1.3px solid var(--rule); background:var(--surface-2);
  }
  .img-sup .is-name{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
  .img-sup .is-score{ font-size:18px; font-weight:600; margin-top:2px; }
  .img-sup .is-score small{ font-size:10.5px; font-weight:500; color:var(--ink-faint); }
  .img-sup .is-price{ font:600 13px 'IBM Plex Mono', monospace; color:var(--ink-soft); }
  .img-sup.tier-hi{ border-color:var(--good); }
  .img-sup.tier-hi .is-score{ color:var(--good); }
  .img-sup.tier-mid{ border-color:#C79A2E; }
  .img-warn{ margin-top:10px; font-size:12px; color:var(--accent); }

  .match-tag{ font-weight:600; font-size:10.5px; padding:2px 7px; border-radius:5px; white-space:nowrap; }
  .match-tag.tier-hi{ background:color-mix(in srgb, var(--good) 18%, transparent); color:var(--good); }
  .match-tag.tier-mid{ background:color-mix(in srgb, #C79A2E 20%, transparent); color:#8A6A1E; }
  .match-tag.tier-lo{ background:var(--surface-2); color:var(--ink-faint); }
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .match-tag.tier-mid{ color:#E0B85A; } }

  .tg-tag{ display:inline-flex; align-items:center; gap:4px; color:#2A8AC4; font-weight:500; }
  .row.is-tg .post-text{
    margin-top:5px; font-size:12px; color:var(--ink-faint); white-space:pre-line;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  }
  .row .action a.tg-link{ display:inline-flex; align-items:center; gap:5px; color:#2A8AC4; border-color:#2A8AC4; margin-top:5px; }
  .row .wa-order + .contact-link + a.tg-link{ margin-top:6px; }
  .row.is-tg .thumb{ width:64px; height:64px; }

  .top-link + .top-link{ margin-left:0; }

  /* supplier profile block (address / branches from the Telegram channel description) */
  .sup-card .branch.about{ white-space:pre-line; font-size:12px; line-height:1.5; color:var(--ink-soft); background:var(--surface-2); border-radius:6px; padding:7px 9px; word-break:break-word; }
  .sup-card .about-h{ display:block; font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); margin-bottom:3px; }
  .sup-card a.map-link{ display:inline-block; padding:2px 8px; border:1px solid var(--link); border-radius:999px; font-size:11.5px; text-decoration:none; }

  /* spinning "syncing" indicator */
  @keyframes rc-spin { to { transform: rotate(360deg); } }
  .spinner{ display:inline-block; width:13px; height:13px; border:2px solid var(--rule); border-top-color:var(--accent); border-radius:50%; animation:rc-spin .8s linear infinite; vertical-align:-2px; flex:0 0 auto; }
  .sync-pill{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink-soft); border:1px solid var(--rule); background:var(--surface); border-radius:999px; padding:3px 10px; white-space:nowrap; }
  .sync-pill[hidden]{ display:none; }

  /* toast (e.g. "photo copied - press Ctrl+V in WhatsApp") */
  .toast{ position:fixed; left:50%; bottom:22px; transform:translate(-50%, 30px); opacity:0; pointer-events:none; z-index:300;
    max-width:min(560px, 92vw); background:var(--ink); color:var(--paper); font-size:13.5px; line-height:1.4; padding:11px 16px; border-radius:10px;
    box-shadow:0 10px 30px rgba(0,0,0,.3); transition:opacity .2s, transform .2s; }
  .toast.show{ opacity:1; transform:translate(-50%, 0); }