:root{
    --bg:#f5f6f8; --surface:#ffffff; --surface-2:#eef0f4; --surface-3:#e6e9ef;
    --ink:#14171c; --muted:#5b6472; --faint:#8a93a2;
    --border:#e2e6ec; --border-strong:#cdd3dc;
    --accent:#2f5bff; --accent-ink:#ffffff; --accent-soft:#e7ecff;
    --good:#0f8a5f; --good-soft:#e2f4ec;
    --warn:#b5641a; --warn-soft:#fdeede;
    --danger:#c9372c; --danger-soft:#fbe9e7;
    --shadow:0 1px 2px rgba(20,23,28,.06), 0 8px 24px rgba(20,23,28,.06);
    --shadow-lift:0 12px 40px rgba(20,23,28,.16);
    --r:14px; --r-sm:10px; --maxw:1200px;
    --f-display:"Prompt", "Segoe UI", system-ui, sans-serif;
    --f-body:"Prompt", "Segoe UI", system-ui, sans-serif;
    --f-mono:"Prompt", "Segoe UI", system-ui, sans-serif;
  }
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
    --bg:#0d1015; --surface:#161a21; --surface-2:#1e232c; --surface-3:#262c36;
    --ink:#eef1f5; --muted:#9aa4b2; --faint:#6c7686;
    --border:#262c36; --border-strong:#333b47;
    --accent:#6a8dff; --accent-ink:#0d1015; --accent-soft:#1c2740;
    --good:#3fce9a; --good-soft:#12271f;
    --warn:#e0a05a; --warn-soft:#2c2113;
    --danger:#f0766a; --danger-soft:#2e1512;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
    --shadow-lift:0 16px 46px rgba(0,0,0,.55);
  }}
  :root[data-theme="dark"]{
    --bg:#0d1015; --surface:#161a21; --surface-2:#1e232c; --surface-3:#262c36;
    --ink:#eef1f5; --muted:#9aa4b2; --faint:#6c7686;
    --border:#262c36; --border-strong:#333b47;
    --accent:#6a8dff; --accent-ink:#0d1015; --accent-soft:#1c2740;
    --good:#3fce9a; --good-soft:#12271f;
    --warn:#e0a05a; --warn-soft:#2c2113;
    --danger:#f0766a; --danger-soft:#2e1512;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
    --shadow-lift:0 16px 46px rgba(0,0,0,.55);
  }
  *{box-sizing:border-box}
  html{overflow-x:hidden}   /* body uses clip, not hidden: hidden on both makes body its own scroll box and breaks every position:sticky */
  body{font-family:var(--f-body);background:var(--bg);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip;touch-action:pan-x pan-y;-ms-touch-action:pan-x pan-y}
  button{font-family:inherit;cursor:pointer}
  input,select,textarea,button{font-size:1rem;font-family:inherit}
  h1,h2,h3{font-family:var(--f-display);margin:0;letter-spacing:-.01em;text-wrap:balance}
  .mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
  :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

  .login{min-height:100%;display:grid;place-items:center;padding:24px}
  .login[hidden],html.authed .login{display:none}
  .login-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-lift);width:min(400px,100%);padding:30px 28px}
  .login-card .brand{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:800;font-size:1.2rem;margin-bottom:6px}
  .login-card .brand .mark{width:28px;height:28px}
  .login-card .sub{color:var(--muted);font-size:.9rem;margin-bottom:22px}
  .login-card label{font-size:.78rem;font-weight:600;color:var(--muted);display:block;margin-bottom:6px}
  .login-card input{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--ink);padding:12px 13px;border-radius:10px}
  .login-card input:focus{border-color:var(--accent);outline:none}
  .login-err{color:var(--danger);font-size:.82rem;margin-top:10px;min-height:1.1em}

  .btn{border:1px solid var(--border-strong);background:var(--surface);color:var(--ink);padding:10px 16px;border-radius:10px;font-weight:600;font-size:.92rem;display:inline-flex;align-items:center;gap:7px;transition:transform .06s ease}
  .btn:active{transform:translateY(1px)}
  .btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
  .btn.primary:hover{filter:brightness(1.06)}
  .btn.block{width:100%;justify-content:center;padding:12px}
  .btn.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,transparent)}
  .btn.danger:hover{background:var(--danger-soft)}
  .btn.ghost{border-color:transparent;background:var(--surface-2)}
  .btn svg{width:16px;height:16px}
  .btn.sm{padding:7px 11px;font-size:.84rem}
  .btn.xs{padding:5px 9px;font-size:.78rem;border-radius:8px}

  .topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--surface) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
  .topbar-in{display:flex;align-items:center;gap:14px;padding:12px 20px;max-width:var(--maxw);margin:0 auto}
  .brand{display:flex;align-items:center;gap:9px;font-family:var(--f-display);font-weight:800;font-size:1.08rem}
  .brand .mark{width:24px;height:24px}
  .brand .tag{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);padding:2px 6px;border-radius:5px;font-weight:600}
  .top-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
  .icon-btn{background:none;border:1px solid transparent;color:var(--ink);width:38px;height:38px;border-radius:10px;display:grid;place-items:center}
  .icon-btn:hover{background:var(--surface-2)}
  .icon-btn svg{width:19px;height:19px}
  .tabs{display:flex;gap:2px;padding:0 14px;max-width:var(--maxw);margin:0 auto;overflow-x:auto;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{background:none;border:none;color:var(--muted);padding:13px 14px;font-weight:600;font-size:.92rem;border-bottom:2px solid transparent;white-space:nowrap;margin-bottom:-1px}
  .tabs button:hover{color:var(--ink)}
  .tab-badge{display:inline-block;min-width:18px;padding:0 5px;border-radius:999px;background:var(--danger);color:#fff;font-size:.68rem;font-weight:700;line-height:18px;text-align:center;margin-left:4px}
  .chat-wrap{display:grid;grid-template-columns:320px 1fr;gap:0;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);height:calc(100vh - 210px);min-height:480px;overflow:hidden}
  .chat-list{height:100%;min-height:0;border-right:1px solid var(--border);overflow-y:auto;overflow-x:hidden}
  .chat-li{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;border:0;border-bottom:1px solid var(--border);background:none;padding:12px 14px;font:inherit;color:var(--ink);cursor:pointer;transition:background .15s}
  .chat-li:hover{background:var(--surface-2)}
  .chat-li.on{background:var(--accent-soft)}
  .chat-li.unread b{color:var(--accent)}
  .cl-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
  .cl-top b{font-size:.88rem;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cl-last{font-size:.8rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cl-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.7rem;color:var(--faint);margin-top:2px}
  .chat-thread{display:flex;flex-direction:column;min-width:0;min-height:0;height:100%;overflow:hidden;background:var(--surface)}
  .ct-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 18px;border-bottom:1px solid var(--border);background:var(--surface);flex-wrap:wrap}
  .ct-msgs{flex:1 1 0%;min-height:0;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px;background:var(--surface-2)}
  .admin-order-issue-card{flex:none}
  .ct-sys{align-self:center;text-align:center;padding:7px 14px;margin:4px auto;font-size:.8rem;color:var(--ink);background:var(--surface);border:1px solid var(--border);border-radius:12px;max-width:85%;line-height:1.45;white-space:pre-wrap}
  .ct-m{max-width:70%;padding:8px 12px;border-radius:14px;font-size:.9rem;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
  .ct-m small{display:block;font-size:.68rem;opacity:.7;margin-top:3px}
  .ct-m.them{align-self:flex-start;background:var(--surface);border:1px solid var(--border)}
  .ct-m.me{align-self:flex-end;background:var(--accent);color:#fff}
  .ct-form{flex:none;display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--border);background:var(--surface)}
  .ct-form textarea{flex:1;resize:none;height:44px;border:1px solid var(--border);border-radius:10px;padding:10px 12px;font:inherit;font-size:.88rem;background:var(--bg);color:var(--ink);line-height:1.4}
  .ct-form textarea:focus{border-color:var(--accent);outline:none}
  .ca-box{display:flex;align-items:center;gap:8px;width:100%;margin-bottom:6px;border:1px solid var(--border);background:var(--surface-2);color:var(--ink);border-radius:10px;padding:6px 9px;font:inherit;font-size:.82rem;text-align:left;cursor:pointer}
  .ct-m.me .ca-box{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.35)}
  .ca-card img{width:34px;height:48px;object-fit:cover;border-radius:5px;flex:none}
  .ca-card span{display:flex;flex-direction:column;min-width:0}
  .ca-card em{font-style:normal;color:var(--accent);font-size:.76rem;font-weight:600}
  .ca-card small{font-size:.7rem;color:var(--faint)}
  .ca-pic{display:block;max-width:260px;max-height:240px;border-radius:10px;margin-bottom:4px}
  .chat-empty{margin:auto;color:var(--muted);font-size:.9rem;padding:20px;text-align:center}
  @media (max-width:760px){.chat-wrap{grid-template-columns:1fr;height:auto;min-height:auto}.chat-list{height:auto;max-height:220px;border-right:0;border-bottom:1px solid var(--border)}.chat-thread{height:60vh;min-height:360px}}
  .tabs button[aria-current="true"]{color:var(--ink);border-bottom-color:var(--accent)}

  main{padding:22px 20px 70px;max-width:var(--maxw);margin:0 auto}
  .page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:wrap}
  .page-head h1{font-size:1.5rem;font-weight:800}
  .page-head p{color:var(--muted);font-size:.9rem;margin:2px 0 0}

  .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:20px}
  .kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px 17px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:5px}
  .kpi .k-label{font-size:.78rem;color:var(--muted);font-weight:500;display:flex;align-items:center;gap:6px}
  .kpi .k-label svg{width:15px;height:15px;color:var(--faint)}
  .kpi .k-val{font-family:var(--f-display);font-weight:800;font-size:1.9rem;line-height:1;font-variant-numeric:tabular-nums}
  .kpi .k-sub{font-size:.76rem;color:var(--faint);font-family:var(--f-mono)}
  .kpi.alert .k-val{color:var(--warn)}

  .panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);margin-bottom:20px;overflow:hidden}
  .panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;border-bottom:1px solid var(--border)}
  .panel-head h2{font-size:1.05rem;font-weight:700}
  .tt-boxes{display:flex;flex-wrap:wrap;gap:10px}
  .tt-box{--tc:#888;width:38px;height:38px;border-radius:50%;padding:0;display:inline-flex;align-items:center;justify-content:center;border:2px solid transparent;background:var(--tc);color:#fff;font:inherit;font-weight:800;font-size:.95rem;cursor:pointer;opacity:.5;transition:opacity .12s,transform .12s,box-shadow .12s;text-shadow:0 1px 2px rgba(0,0,0,.4)}
  .tt-box:hover{opacity:.85}
  .tt-box.on{opacity:1;transform:scale(1.08);box-shadow:0 0 0 3px var(--surface,#fff),0 0 0 5px var(--tc)}
  .tt-box[data-tt=critical]{--tc:#b8860b}.tt-box[data-tt=front]{--tc:#800020}.tt-box[data-tt=heal]{--tc:#0b6b3a}.tt-box[data-tt=draw]{--tc:#e02424}.tt-box[data-tt=none]{--tc:#8a93a0}
  .tt-box[data-tt=over]{--tc:#7048e8;background:linear-gradient(120deg,#e03131,#f08c00,#f2c500,#2f9e44,#1c7ed6,#7048e8)}
  .seg.locked button{cursor:not-allowed;opacity:.65}
  tr.grp-head td{background:var(--surface-2);padding:10px 14px;border-top:2px solid var(--border-strong)}
  .vtable.vfixed{table-layout:fixed;width:100%;min-width:780px}
  .vtable.vfixed .c-img{width:56px}.vtable.vfixed .c-sku{width:128px}.vtable.vfixed .c-num{width:96px}.vtable.vfixed .c-stock{width:70px;text-align:center}.vtable.vfixed .c-pkg{width:44px;text-align:center}
  .vtable.vfixed .eye-col{width:46px;text-align:center}
  .vtable.vfixed td:last-child{text-align:center;padding-left:0;padding-right:0}
  .eye-btn{margin:0 auto;display:inline-grid;place-items:center;width:34px;height:30px;border-radius:8px;border:1px solid var(--border);background:var(--surface-2);color:var(--faint);cursor:pointer}
  .eye-btn.on{color:var(--good,#0f8a5f);border-color:color-mix(in srgb,var(--good,#0f8a5f) 40%,var(--border));background:var(--good-soft,#e2f4ec)}
  .eye-btn:hover{filter:brightness(.96)}
  .nation-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 10px}
  .nation-row .nr-l{font-weight:600;font-size:.9rem;margin-right:4px}
  .nbtn{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;border:1.5px solid var(--border-strong);background:var(--surface);color:var(--ink);font:inherit;font-size:.9rem;cursor:pointer;transition:border-color .12s,box-shadow .12s}
  .nbtn i{width:14px;height:14px;border-radius:50%;background:var(--nc);display:inline-block}
  .nbtn small,.gbtn small{margin-left:4px;opacity:.65;font-size:.74rem}
  .nbtn:hover{border-color:var(--nc)}
  .nbtn.on{border-color:var(--nc);box-shadow:0 0 0 3px color-mix(in srgb,var(--nc) 28%,transparent);font-weight:600}
  .gbtn{padding:7px 14px;border-radius:999px;border:1.5px solid var(--border-strong);background:var(--surface);color:var(--ink);font:inherit;font-size:.86rem;cursor:pointer}
  .gbtn.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
  .gbtn[disabled]{opacity:.4;cursor:default}
  .filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:-6px 0 14px}
  .filters select{max-width:230px}
  .filters .fl{font-size:.78rem;color:var(--muted);font-weight:600;margin-right:2px}
  .panel-head .hint{font-size:.78rem;color:var(--faint)}
  .panel-body{padding:18px}
  .two-col{display:grid;grid-template-columns:1.3fr .9fr;gap:20px}
  @media (max-width:800px){.two-col{grid-template-columns:1fr}}

  .chart-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}
  .chart-row:last-child{margin-bottom:0}
  .chart-row .cat{width:96px;flex:none;font-size:.82rem;color:var(--muted);text-align:right}
  .bar-track{flex:1;height:26px;background:var(--surface-2);border-radius:7px;overflow:hidden}
  .bar-fill{height:100%;background:var(--accent);border-radius:7px;min-width:3px;transition:width .5s cubic-bezier(.3,1,.4,1)}
  .chart-row .val{width:78px;flex:none;font-family:var(--f-mono);font-size:.82rem;font-variant-numeric:tabular-nums;text-align:right}

  .dot{width:11px;height:11px;border-radius:50%;flex:none;display:inline-block;box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--border-strong)}
  .rs-row{text-decoration:none;color:inherit;cursor:pointer;border-radius:8px;padding:2px 0}
  .rs-row:hover .cat{color:var(--ink)}
  .rs-row .cat{width:128px;text-align:left}
  .rs-row .val{width:84px}
  .rs-row .val .of{color:var(--faint)}
  .rs-group{border:1px solid var(--border);border-radius:12px;margin-bottom:10px;background:var(--surface)}
  .rs-group summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:11px;padding:13px 16px;font-size:.95rem}
  .rs-group summary::-webkit-details-marker{display:none}
  .rs-group summary::after{content:'›';margin-left:auto;color:var(--faint);font-size:1.3rem;transition:transform .15s}
  .rs-group[open] summary::after{transform:rotate(90deg)}
  .rs-group[open] summary{border-bottom:1px solid var(--border)}
  .rs-meta{font-size:.78rem;color:var(--muted);margin-left:4px}
  .rs-group .lowlist{padding:4px 16px}
  .rs-more{margin:6px 16px 14px}
  th.sortable{cursor:pointer;user-select:none}
  th.sortable:hover{color:var(--ink)}
  tr.clickable{cursor:pointer}
  .lowlist{display:flex;flex-direction:column;gap:2px}
  .lowlist .li{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--border)}
  .lowlist .li:last-child{border-bottom:none}
  .lowlist .lt{width:34px;height:34px;border-radius:8px;flex:none;display:grid;place-items:center;border:1px solid var(--border);overflow:hidden}
  .lowlist .lt svg{width:64%;height:64%}
  .lowlist .lt img{width:100%;height:100%;object-fit:cover}
  .lowlist .ln{flex:1;font-size:.88rem;font-weight:500;min-width:0}
  .lowlist .lc{font-size:.72rem;color:var(--faint)}
  .pill{font-family:var(--f-mono);font-size:.72rem;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap}
  .pill.warn{background:var(--warn-soft);color:var(--warn)}
  .pill.good{background:var(--good-soft);color:var(--good)}
  .pill.danger{background:var(--danger-soft);color:var(--danger)}
  .pill.neutral{background:var(--surface-2);color:var(--muted)}
  .pill.accent{background:var(--accent-soft);color:var(--accent)}
  /* orders list */
  .sa-all{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border-radius:12px;background:var(--surface-2);margin-bottom:12px;font-size:.84rem;font-weight:600}
  .sc-row{display:flex;gap:6px;flex-wrap:wrap}
  .sc-btn{display:inline-flex;align-items:center;justify-content:center;height:34px;min-width:64px;padding:4px 10px;border-radius:9px;border:1.5px solid var(--border);background:var(--surface);color:var(--ink);font:inherit;font-size:.78rem;font-weight:700;cursor:pointer}
  .sc-btn img{height:18px;width:auto;display:block}
  .sc-btn.sc-flash{background:#ffea00}
  .sc-btn:hover{border-color:var(--accent)}
  .sc-btn.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
  .sa-o{border:1px solid var(--border);border-radius:12px;padding:10px 12px;margin-bottom:8px;display:flex;flex-direction:column;gap:7px}
  .sa-o.bad{border-color:var(--danger)}
  .sa-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
  .sa-top .sa-amt{margin-left:auto;font-family:var(--f-mono);font-weight:700}
  .sa-addr{font-size:.78rem;color:var(--muted)}
  .sa-trk{border:1px solid var(--border);border-radius:9px;padding:8px 10px;font-family:var(--f-mono);font-size:.9rem;background:var(--bg);color:var(--ink)}
  .sa-trk.bad{border-color:var(--danger)}
  .ord-chips{display:flex;gap:6px;flex-wrap:wrap}
  .ord-chips button{border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:999px;padding:6px 13px;font:inherit;font-size:.8rem;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
  .ord-chips button i{width:8px;height:8px;border-radius:50%;background:var(--sc,var(--faint))}
  .ord-chips button:hover{border-color:var(--sc,var(--accent));color:var(--ink)}
  .ord-chips button.on{background:color-mix(in srgb,var(--sc,var(--accent)) 12%,var(--surface));border-color:var(--sc,var(--accent));color:var(--ink)}
  table.ord-t{min-width:860px}
  table.ord-t thead th{background:var(--surface-2);position:sticky;top:0;z-index:1}
  table.ord-t td{padding:12px 14px;vertical-align:top}
  table.ord-t tbody tr{box-shadow:inset 3px 0 0 var(--sc,transparent);transition:background .12s}
  .ord-id,
  .order-pill{
    display:inline-flex;
    align-items:center;
    gap:4px;
    font-family:'Consolas','Courier New',monospace;
    font-size:.82rem;
    font-weight:700;
    letter-spacing:.02em;
    padding:2px 10px;
    border-radius:999px;
    background:color-mix(in srgb,#2f5bff 12%,var(--surface));
    border:1px solid color-mix(in srgb,#2f5bff 35%,var(--border));
    color:var(--accent,#2f5bff);
    box-shadow:0 1px 2px rgba(47,91,255,.06);
    white-space:nowrap;
    vertical-align:middle;
  }
  h2 .order-pill{font-size:1.02rem;padding:3px 12px;margin-left:4px}
  .pk-id .order-pill{font-size:1.05rem;padding:3px 12px}
  .sa-top .order-pill{font-size:.82rem}
  .vf-top .order-pill{font-size:.82rem}
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .ord-id,
    :root:not([data-theme="light"]) .order-pill{
      background:color-mix(in srgb,#2f5bff 22%,var(--surface));
      border-color:color-mix(in srgb,#2f5bff 45%,var(--border));
      color:#8da9ff;
    }
  }
  [data-theme="dark"] .ord-id,
  [data-theme="dark"] .order-pill{
    background:color-mix(in srgb,#2f5bff 22%,var(--surface));
    border-color:color-mix(in srgb,#2f5bff 45%,var(--border));
    color:#8da9ff;
  }
  .ord-sub{font-size:.74rem;color:var(--faint);margin-top:3px;white-space:nowrap}
  .ord-cust b{display:block;font-weight:600;font-size:.88rem}
  .ord-cust .em{font-family:var(--f-mono);font-size:.72rem;color:var(--faint);overflow-wrap:anywhere}
  .ord-cust .pill{display:inline-block}
  .ord-cust-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:5px}   /* member pill + 💬 แชท (2026-10-24: chat moved here from the actions column) */
  .od-box{border:1px solid var(--border);border-radius:12px;padding:10px 12px;margin:0 0 12px;display:grid;gap:8px}.od-box-h{font-weight:700;font-size:.88rem;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
  .od-acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin:0 0 6px}.od-acts .btn{flex:0 1 auto}
  @media (max-width:560px){.od-acts .btn{flex:1 1 140px}}
  .od-items{border:1px solid var(--border);border-radius:12px;overflow:hidden;margin:0 0 12px}
  .od-it{display:grid;grid-template-columns:48px minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--border)}
  .od-im{width:48px;height:48px;border-radius:8px;background:var(--surface-2);overflow:hidden;display:block}.od-im img{width:100%;height:100%;object-fit:cover;display:block}
  .od-main{min-width:0;display:grid;gap:1px}.od-main b{font-weight:600;font-size:.9rem;overflow-wrap:anywhere}.od-main small{font-size:.76rem;color:var(--muted);overflow-wrap:anywhere}.od-main small.vsku{font-family:var(--f-mono);font-size:.7rem;color:var(--faint)}
  .od-q{font-size:.8rem;color:var(--muted);white-space:nowrap;text-align:right}.od-sum{font-weight:700;white-space:nowrap;text-align:right;min-width:64px}
  .od-tot{display:grid;gap:4px;padding:10px 12px;background:var(--surface-2)}.od-tot .r{display:flex;justify-content:space-between;gap:12px;font-size:.85rem;color:var(--muted)}.od-tot .r b{color:var(--ink);font-weight:600}
  .od-tot .r.grand{font-size:.95rem;color:var(--ink);font-weight:700;border-top:1px solid var(--border);padding-top:6px;margin-top:2px}.od-tot .r.grand b{font-weight:800}
  @media (max-width:560px){.od-it{grid-template-columns:44px minmax(0,1fr) auto}.od-im{width:44px;height:44px}.od-q{grid-column:2;text-align:left}.od-sum{grid-column:3;grid-row:1/span 2}}
  .ord-items{display:flex;align-items:center;gap:5px}
  .ord-items .th{position:relative;width:34px;height:47px;border-radius:5px;overflow:hidden;background:var(--surface-2);border:1px solid var(--border);flex:none}
  .ord-items .th img{width:100%;height:100%;object-fit:cover;display:block}
  .ord-items .th b{position:absolute;right:1px;bottom:1px;background:rgba(0,0,0,.72);color:#fff;font-size:.62rem;font-weight:700;border-radius:4px;padding:0 4px;line-height:1.4}
  .ord-items .more{font-size:.74rem;color:var(--muted);font-weight:600;padding-left:2px}
  .ord-items-t{font-size:.74rem;color:var(--muted);margin-top:5px;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ord-total{font-family:var(--f-mono);font-weight:700;font-size:.95rem;text-align:right;white-space:nowrap}
  .ord-total small{display:block;font-family:var(--f-body);font-weight:500;font-size:.72rem;color:var(--good)}
  .ord-st select{width:100%;min-width:150px;border-radius:999px;padding:6px 12px;font-weight:600;font-size:.8rem;border:1.5px solid var(--sc,var(--border));background:color-mix(in srgb,var(--sc,var(--surface)) 10%,var(--surface));color:var(--ink)}
  .ord-st .meta{font-size:.74rem;color:var(--muted);margin-top:6px;display:flex;flex-direction:column;gap:3px}
  .ord-act{display:flex;gap:6px;justify-content:flex-end}

  .toolbar2{display:flex;gap:10px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
  .search{flex:1;min-width:180px;position:relative}
  .search input{width:100%;background:var(--surface);border:1px solid var(--border);color:var(--ink);padding:10px 12px 10px 36px;border-radius:10px}
  .search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--faint)}
  .table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r);background:var(--surface)}
  table{width:100%;border-collapse:collapse;min-width:700px}
  th{text-align:left;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);font-weight:600;padding:12px 14px;border-bottom:1px solid var(--border);white-space:nowrap}
  td{padding:11px 14px;border-bottom:1px solid var(--border);font-size:.9rem;vertical-align:middle}
  tr:last-child td{border-bottom:none}
  tbody tr:hover{background:var(--surface-2)}
  .prod-list{display:flex;flex-direction:column;gap:8px}
  .prow-wrap{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--surface)}
  .prow{display:flex;align-items:center;gap:12px;padding:10px 12px;background:linear-gradient(90deg,color-mix(in srgb,var(--nc,var(--faint)) 30%,var(--surface)) 0%,color-mix(in srgb,var(--nc,var(--faint)) 9%,var(--surface)) 55%,var(--surface) 100%)}
  .prow-edit{flex:none}
  .prow .pt{width:52px;height:52px;border-radius:10px;flex:none;display:grid;place-items:center;border:1px solid var(--border);overflow:hidden;background:var(--surface)}
  .prow .pt img{width:100%;height:100%;object-fit:cover}.prow .pt svg{width:64%;height:64%}
  .prow .pn{flex:1;min-width:0;font-weight:600;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
  .prow-tg{flex:none;display:inline-flex;align-items:center;gap:4px;border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:999px;padding:5px 11px;font:inherit;font-size:.78rem;cursor:pointer}
  .prow-tg i{font-style:normal;transition:transform .15s}.prow-tg[aria-expanded="true"] i{transform:rotate(180deg)}
  .prow-vars[hidden]{display:none}
  .prow-vars{padding:6px 14px 10px 76px;border-top:1px solid var(--border);background:var(--surface-2);display:flex;flex-direction:column;gap:2px}
  .prow-v{display:flex;align-items:center;gap:10px;font-size:.84rem;padding:4px 0;border-bottom:1px dashed var(--border)}
  .prow-v .pv-im{width:34px;height:46px;flex:none;border-radius:5px;overflow:hidden;background:var(--surface);border:1px solid var(--border)}.prow-v .pv-im img{width:100%;height:100%;object-fit:cover;display:block}
  .prow-v .pv-n{flex:1;min-width:0}.prow-v .pv-p{color:var(--muted);white-space:nowrap}.prow-v .pv-p s{color:var(--faint);margin-right:2px}.prow-v b{min-width:28px;text-align:right}.prow-v:last-child{border-bottom:0}
  .prow-v b{font-family:var(--f-mono)}.prow-v b.out{color:var(--danger)}
  .prod-list .grp-head{padding:8px 4px 2px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .gbtn.g-dot{width:36px;height:36px;padding:0;display:inline-grid;place-items:center;border-radius:50%;font-weight:700;font-size:.9rem;line-height:1}
  .gbtn.g-dot[style*="--nc"]{background:var(--nc);border-color:var(--nc);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3)}
  .gbtn.g-dot.on,.gbtn.g-dot[aria-pressed="true"]{box-shadow:0 0 0 3px color-mix(in srgb,var(--nc,var(--accent)) 40%,transparent)}
  .fb-sep{display:inline-block;width:1px;align-self:stretch;min-height:26px;background:var(--border-strong);margin:0 6px}
  #nationRow .nbtn.nc{width:34px;height:34px;padding:0;gap:0;justify-content:center;border-radius:50%}
  #nationRow .nbtn.nc i{width:20px;height:20px}
  #nationRow .nbtn.nmore span{font-size:1.1rem;line-height:1;color:var(--muted)}
  .fbox{display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:10px 14px;margin:0 0 12px;box-shadow:var(--shadow)}
  .fbox .nation-row{background:none;border:0;box-shadow:none;padding:0;margin:0;flex:none}
  .fbox-top,.fbox-set{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
  .fbox-set select{font:inherit;font-size:.86rem;padding:7px 10px;border:1.5px solid var(--border-strong);border-radius:999px;background:var(--surface);color:var(--ink);max-width:100%}
  .rar-chip,.fb-tg{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border-radius:999px;border:1.5px solid var(--border-strong);background:var(--surface);color:var(--ink);font:inherit;font-size:.84rem;cursor:pointer}
  .rar-chip small{opacity:.6;font-size:.72rem}.rar-chip.on,.fb-tg.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}.rar-chip[disabled]{opacity:.4;cursor:default}
  .fb-reset{margin-left:auto;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--border-strong);background:var(--surface);color:var(--muted);cursor:pointer;font-size:.95rem}
  @media(max-width:760px){.fbox{padding:10px}.fbox-set select{flex:1 1 40%;min-width:0}}
  .nbtn.nmore .nm-ar{margin-left:4px;opacity:.7}
  @media(max-width:760px){.prow .pt{width:46px;height:46px}.prow-vars{padding-left:14px}}
  .cell-prod{display:flex;align-items:center;gap:11px}
  .cell-prod .pt{width:40px;height:40px;border-radius:8px;flex:none;display:grid;place-items:center;border:1px solid var(--border);overflow:hidden}
  .cell-prod .pt svg{width:64%;height:64%}
  .cell-prod .pt img{width:100%;height:100%;object-fit:cover}
  .cell-prod .pn{font-weight:600}
  .cell-prod .pid{font-family:var(--f-mono);font-size:.7rem;color:var(--faint)}
  td.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;text-align:right}
  .price-strike{color:var(--faint);text-decoration:line-through;font-size:.8rem}
  .price-sale{color:var(--good);font-weight:600}
  .stock-edit{width:64px;background:var(--bg);border:1px solid var(--border);color:var(--ink);padding:6px 8px;border-radius:8px;font-family:var(--f-mono);text-align:right}
  .stock-edit:focus{border-color:var(--accent);outline:none}
  .row-actions{display:flex;gap:6px;justify-content:flex-end}

  .ed-top{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--border)}
  /* only the Preview / Cancel / Save buttons stay frozen under the top bar; the heading scrolls away. They're a sibling of
     .ed-top (so they can stick for the whole editor) pulled up into its row by placeEdTop(). */
  .ed-actions{position:sticky;top:calc(var(--edtop-y,0px) + 8px);z-index:15;display:flex;align-items:center;gap:10px;width:max-content;max-width:100%;margin-left:auto;
    padding:6px;border-radius:14px;background:color-mix(in srgb,var(--bg,#f4f5f7) 92%,transparent);backdrop-filter:blur(8px);box-shadow:0 6px 18px -12px rgba(0,0,0,.45)}
  .ed-top .back{display:inline-flex;align-items:center;gap:7px;color:var(--muted);background:none;border:none;font-weight:600;font-size:.9rem;padding:6px 4px}
  .ed-top .back:hover{color:var(--ink)}
  .ed-top h1{font-size:1.4rem;font-weight:800}
  .ed-top .spacer{flex:1}
  .ed-grid{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start}
  @media (max-width:820px){.ed-grid{grid-template-columns:1fr}}
  .sec{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);margin-bottom:18px;overflow:hidden}
  .sec-head{padding:14px 17px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px}
  .sec-head h2{font-size:1rem;font-weight:700}
  .sec-head .desc{font-size:.76rem;color:var(--faint);font-weight:400;margin-top:2px}
  .sec-body{padding:16px 17px}
  .field{display:flex;flex-direction:column;gap:5px;margin-bottom:13px}
  .field[hidden]{display:none}
  .field:last-child{margin-bottom:0}
  .field label{font-size:.78rem;font-weight:600;color:var(--muted)}
  .field .fh{font-size:.72rem;color:var(--faint);font-weight:400}
  .field input,.field select,.field textarea{background:var(--bg);border:1px solid var(--border);color:var(--ink);padding:10px 12px;border-radius:10px;width:100%}
  .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);outline:none}
  .field input:disabled{color:var(--muted);background:var(--surface-2)}
  .field textarea{resize:vertical;min-height:70px}
  .grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:13px}
  @media (max-width:520px){.grid2,.grid3{grid-template-columns:1fr}}
  .stock-tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
  .stile{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
  .st-label{font-size:.68rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
  .st-num{font-family:var(--f-display);font-weight:800;font-size:1.5rem;line-height:1;font-variant-numeric:tabular-nums}
  .st-sub{font-size:.66rem;color:var(--faint)}
  .st-input{background:var(--bg);border:1px solid var(--border);color:var(--ink);border-radius:8px;padding:5px 8px;font-family:var(--f-mono);font-size:1.1rem;font-weight:700;width:100%}
  .st-input:focus{border-color:var(--accent);outline:none}
  .stile.t-av{background:color-mix(in srgb,var(--accent) 9%,var(--surface));border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
  .stile.t-av .st-num{color:var(--accent)}
  .stile.t-in{background:color-mix(in srgb,#5b9bff 9%,var(--surface));border-color:color-mix(in srgb,#5b9bff 30%,transparent)}
  .stile.t-in .st-num,.stile.t-in .st-input{color:#3d82f0}
  .stile.t-re{background:color-mix(in srgb,#d97a2b 9%,var(--surface));border-color:color-mix(in srgb,#d97a2b 30%,transparent)}
  .stile.t-re .st-num,.stile.t-re .st-input{color:#c46a1c}
  .stile.clickable{cursor:pointer;transition:box-shadow .12s,transform .12s}.stile.clickable:hover{box-shadow:0 0 0 3px color-mix(in srgb,#d97a2b 30%,transparent);transform:translateY(-1px)}
  .rsv-row:hover td{background:var(--surface-2)}
  .stile.t-aw{background:color-mix(in srgb,#d4a017 9%,var(--surface));border-color:color-mix(in srgb,#d4a017 32%,transparent)}
  .stile.t-aw .st-num,.stile.t-aw .st-input{color:#b98a0d}
  .stile.t-so{background:color-mix(in srgb,var(--good) 9%,var(--surface));border-color:color-mix(in srgb,var(--good) 30%,transparent)}
  .stile.t-so .st-num,.stile.t-so .st-input{color:var(--good)}
  .stile.t-aw.clickable:hover{box-shadow:0 0 0 3px color-mix(in srgb,#d4a017 32%,transparent)}
  .stile.t-so.clickable:hover{box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 30%,transparent)}
  button.invalid{outline:2px solid var(--danger);outline-offset:2px}
  .sold-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin-bottom:12px}
  .sold-sum div{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:8px 10px}
  .sold-sum b{display:block;font-size:1.15rem;font-family:var(--f-display)}
  .ed-bottom-bar{display:flex;justify-content:flex-end;gap:10px;margin-top:6px;padding-top:16px;border-top:1px solid var(--border)}
  .ed-bottom-bar .ed-del{margin-right:auto;background:var(--danger);border-color:var(--danger);color:#fff}.ed-bottom-bar .ed-del:hover{background:var(--danger);filter:brightness(.92)}
  .ed-pv{position:fixed;inset:0;z-index:9997}.ed-pv iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent}
  @media (max-width:640px){.stock-tiles{grid-template-columns:repeat(2,1fr)}}
  .inline-input{background:var(--bg);border:1px solid var(--border);color:var(--ink);padding:8px 10px;border-radius:8px;width:100%}
  .inline-input:focus{border-color:var(--accent);outline:none}
  .margin-note{font-size:.78rem;color:var(--muted);margin-top:2px}
  .margin-note b{color:var(--good)}
  .req{color:var(--danger);font-weight:700;margin-left:2px}
  .invalid{border-color:var(--danger)!important;box-shadow:0 0 0 3px var(--danger-soft)!important}
  .tt-boxes.invalid{border-radius:10px;outline:2px solid var(--danger);outline-offset:3px}

  .seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:11px;padding:3px;gap:3px}
  .seg button{border:none;background:none;color:var(--muted);padding:8px 16px;border-radius:8px;font-weight:600;font-size:.88rem}
  .seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
  #typeSeg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
  .name-row{display:flex;gap:10px;align-items:flex-start}
  .name-row .field:first-child{flex:1;min-width:0}
  .name-row .sku-field{flex:0 0 118px}
  .name-row .sku-field input{font-family:var(--f-mono);font-size:.82rem;font-weight:700;padding-left:6px;padding-right:6px;height:45.6px;text-align:center;color:var(--accent);background:var(--accent-soft);border:1.5px solid var(--accent);opacity:1;-webkit-text-fill-color:var(--accent)}
  .ship-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
  .ship-grid .field label{font-size:.72rem;white-space:nowrap}
  .ship-grid input,.ship-grid select{padding:7px 8px}
  @media (max-width:760px){.ship-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

  .photos{display:flex;flex-wrap:wrap;gap:10px}
  .photo{width:256px;max-width:100%;aspect-ratio:1/1;border-radius:10px;border:1px solid var(--border);overflow:hidden;position:relative;background:var(--surface-2)}
  .photo img{width:100%;height:100%;object-fit:cover}
  .photo.cover{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
  .photo .badge-cover{position:absolute;top:4px;left:4px;background:var(--accent);color:var(--accent-ink);font-family:var(--f-mono);font-size:.6rem;font-weight:600;padding:2px 5px;border-radius:5px}
  .addphoto{width:88px;height:88px;border-radius:10px;border:1.5px dashed var(--border-strong);background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--muted);font-size:.72rem;font-weight:600}
  .addphoto:hover{border-color:var(--accent);color:var(--accent)}
  .addphoto svg{width:20px;height:20px}

  .rrow{display:flex;gap:9px;align-items:center;margin-bottom:9px;flex-wrap:wrap}
  .rrow:last-child{margin-bottom:0}
  .rrow .del{flex:none;background:none;border:1px solid var(--border);color:var(--faint);width:34px;height:34px;border-radius:8px;display:grid;place-items:center}
  .rrow .del:hover{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,transparent)}
  .rrow .del svg{width:15px;height:15px}
  .rrow .lead{flex:none;font-size:.8rem;color:var(--muted)}
  .add-row{margin-top:11px}
  .empty-mini{font-size:.82rem;color:var(--faint);padding:6px 2px}
  .disc-type{width:120px;flex:none}
  .disc-val{width:100px;flex:none}
  .calc-note{font-size:.78rem;color:var(--good);font-weight:500}

  .vtable{width:100%;border-collapse:collapse}
  .vtable th{padding:8px 10px;font-size:.68rem}
  .vtable td{padding:7px 10px}
  .vtable input{width:100%}
  .vkey{font-weight:600;font-size:.85rem}
  .vsku{font-family:var(--f-mono);font-size:.78rem;color:var(--muted)}
  .vsku-txt{font-family:var(--f-mono);font-size:.8rem;font-weight:600;color:var(--accent);white-space:nowrap}
  .vsku-txt.pending{opacity:.55;font-style:italic;font-weight:500}
  .vstock{display:inline-block;font-variant-numeric:tabular-nums;font-weight:600}
  .pkg-btn{margin:0 auto;border:1px solid var(--border);background:var(--surface);border-radius:7px;width:28px;height:28px;display:grid;place-items:center;cursor:pointer;font-size:.95rem;padding:0}
  .pkg-btn:hover{border-color:var(--accent);background:var(--accent-soft)}
  .opt-lockbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;padding:8px 12px;border:1px dashed var(--border-strong);border-radius:10px;font-size:.84rem;color:var(--muted)}
  .opt-lockbar.editing{border-style:solid;border-color:var(--accent);background:var(--accent-soft);color:var(--ink)}
  fieldset.opt-lock{border:0;padding:0;margin:0;min-width:0}
  fieldset.opt-lock[disabled]{opacity:.7;pointer-events:none}
  .photo-wrap{display:flex;flex-direction:column;gap:6px;width:256px;max-width:100%}
  .photo-acts{display:flex;gap:6px}
  .photo-acts .btn{flex:1;justify-content:center}
  .lightbox{position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,.82);display:grid;place-items:center;padding:20px;cursor:zoom-out}
  .lightbox img{display:block;width:auto;height:auto;max-width:min(90vw,720px);max-height:82vh;object-fit:contain;border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,.5);background:#fff}
  .modal.sc-wide{width:min(680px,100%)}
  .modal.st-wide{width:min(1040px,100%)}
  .skr-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0;padding:10px 14px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px}
  .skr-lbl{font-weight:600;font-size:.84rem}
  .skr-per{display:flex;flex-wrap:wrap;border:1px solid var(--border);border-radius:8px;overflow:hidden}
  .skr-per button{background:var(--surface);border:0;border-right:1px solid var(--border);padding:6px 10px;font-size:.8rem;color:var(--muted);cursor:pointer}
  .skr-per button:last-child{border-right:0}
  .skr-per button.on{background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--accent);font-weight:700;box-shadow:inset 0 -3px 0 var(--accent)}
  .skr-per button[style*="color:#fff"].on{color:#fff}
  .skr-range{margin-left:auto;font-size:.82rem;color:var(--muted)}
  .skr-range input{font:inherit;padding:3px 6px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--ink)}
  .skr-tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:12px}
  .skr-tile{position:relative;display:flex;align-items:center;gap:10px;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 26px 10px 12px;cursor:pointer;color:var(--ink);transition:border-color .15s,box-shadow .15s,transform .15s}
  .skr-tile:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-1px)}
  .skr-tile.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset;background:color-mix(in srgb,var(--accent) 7%,var(--surface))}
  .skr-ic{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--surface-2);color:var(--muted)}
  .skr-ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .skr-tile.on .skr-ic{background:var(--accent);color:#fff}
  .skr-tt{display:flex;flex-direction:column;gap:2px;min-width:0}
  .skr-cue{position:absolute;right:7px;top:50%;width:14px;height:14px;margin-top:-7px;fill:none;stroke:var(--faint);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
  .skr-tile:hover .skr-cue,.skr-tile.on .skr-cue{stroke:var(--accent)}
  .skr-tile b{font-size:1.35rem;font-family:var(--f-mono)}
  .skr-tl{font-size:.74rem;color:var(--muted)}
  .skr-tu{font-size:.7rem;color:var(--faint)}
  .skr-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:12px;margin-bottom:12px}
  .skr-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 16px;margin-bottom:12px}
  .skr-grid .skr-card{margin-bottom:0}
  .skr-ch{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
  .skr-ch h3{font-size:.98rem}
  .skr-sub{font-size:.76rem;color:var(--faint);margin:2px 0 8px}
  .skr-ov{font-size:.76rem;color:var(--muted);display:flex;gap:4px;align-items:center;cursor:pointer}
    .skr-daily{position:relative;user-select:none;-webkit-user-select:none}
  .skr-nav{display:inline-flex;align-items:center;gap:6px;margin-left:8px;vertical-align:middle}
  .skr-nav .btn{padding:2px 8px;line-height:1.2}
  .skr-fl{display:flex;align-items:center;gap:8px}
  .skr-fl select{font:inherit;font-size:.8rem;padding:4px 8px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--ink)}
  .skr-sort{background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:0 6px;margin-left:4px;font:inherit;font-weight:700;line-height:1.4;color:var(--accent);cursor:pointer}
  .skr-sort:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
  .skr-oid{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--accent);cursor:pointer;text-decoration:underline dotted}
  .skr-oid:hover{text-decoration:underline}
  tr.skr-hl td{background:color-mix(in srgb,#ffb400 16%,transparent)}
  .skr-chan{display:grid;grid-template-columns:1fr 200px;gap:14px;align-items:center}
  .skr-donut{display:flex;flex-direction:column;align-items:center}
  .lnw-stat{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);margin-bottom:10px}
  .lnw-dot{width:10px;height:10px;border-radius:50%;background:var(--faint)}.lnw-dot.on{background:#22c58b;box-shadow:0 0 0 3px rgba(34,197,139,.25)}
  .lnw-sp{flex:1}.lnw-auto{display:flex;align-items:center;gap:6px;font-size:.84rem;cursor:pointer}
  .lnw-run{padding:8px 12px;border-radius:10px;background:color-mix(in srgb,#d99a06 14%,var(--surface));font-size:.84rem;margin-bottom:10px}.lnw-run.done{background:var(--surface-2);color:var(--muted)}
  .lnw-iss{padding:10px 12px;border:1.5px solid var(--danger);border-radius:12px;background:color-mix(in srgb,var(--danger) 8%,var(--surface));margin-bottom:12px;font-size:.86rem}
  .lnw-iss.lnw-mult{border-color:var(--border);background:var(--surface-2)}.lnw-mult summary{cursor:pointer}.lnw-mult>small{display:block;margin-top:6px;color:var(--muted)}
  .lnw-ir{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;border-top:1px dashed var(--border);margin-top:6px}.lnw-ir small{color:var(--muted)}
  .lnw-tag{display:inline-block;font-size:.68rem;padding:1px 7px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);color:var(--muted);vertical-align:1px}.lnw-tag.auto{color:var(--good)}.lnw-tag.ok{color:var(--good);border-color:color-mix(in srgb,var(--good) 50%,var(--border));background:color-mix(in srgb,var(--good) 10%,var(--surface))}.lnw-tag.bad{color:var(--danger);border-color:var(--danger)}
  .lnw-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
  .lnw-nat{display:flex;align-items:center;gap:8px;margin:14px 0 4px;font-size:1rem}.lnw-nat .dot{width:12px;height:12px;border-radius:50%}
  .lnw-grd{font-size:.78rem;font-weight:700;color:var(--muted);margin:8px 0 4px 20px;text-transform:uppercase}
  .lnw-card{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;margin:0 0 6px 20px;border:1px solid var(--border);border-radius:12px;background:linear-gradient(90deg,color-mix(in srgb,var(--nc,var(--faint)) 22%,var(--surface)),var(--surface) 70%)}
  .lnw-card .pt{width:48px;height:48px;border-radius:9px;flex:none;overflow:hidden;border:1px solid var(--border);background:var(--surface);display:grid;place-items:center}.lnw-card .pt img{width:100%;height:100%;object-fit:cover}
  .lnw-main{flex:1;min-width:0}.lnw-nm{font-weight:600;line-height:1.3;margin-bottom:4px}
  .lnw-main ul{list-style:none;margin:0;padding:0;font-size:.82rem;display:flex;flex-direction:column;gap:2px}
  .lnw-k{display:inline-block;min-width:3.4rem;color:var(--muted);font-weight:600}.lnw-k.lnw-new{color:var(--good)}.lnw-k.lnw-del{color:var(--danger)}
  .lnw-old{color:var(--faint);text-decoration:line-through}.lnw-up{color:var(--good)}.lnw-dn{color:var(--danger)}
  .lnw-act{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none}.lnw-sync{border:1px solid var(--border);background:var(--surface)}.lnw-sync svg{width:18px;height:18px}
  @media(max-width:760px){.lnw-card,.lnw-grd{margin-left:0}}
  .skr-tools{display:inline-flex;gap:6px;align-items:center}
  .skr-sym{min-width:32px;padding:3px 8px;font-size:1rem;line-height:1.2}
  .skr-leg{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:.76rem;color:var(--muted)}
  .skr-leg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
  .skr-lg{display:inline-flex;align-items:center;gap:0;border:1px solid var(--border);border-radius:999px;background:var(--surface);padding:3px 10px;font:inherit;font-size:.76rem;color:var(--ink);cursor:pointer}
  .skr-lg.off{opacity:.5;text-decoration:line-through}
  .skr-rl{margin-left:auto;color:var(--faint)}
  @media(max-width:760px){
    .modal-wrap:has(.modal.st-wide){padding:0;place-items:stretch}
    .modal.st-wide{width:100%;height:100%;max-height:100%;border-radius:0;border:0;display:flex;flex-direction:column;overflow:hidden}
    .modal.st-wide .modal-head{padding:12px 14px;border-bottom:1px solid var(--border);flex:none}
    .modal.st-wide .modal-head h2{font-size:1rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .modal.st-wide .modal-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:10px 12px 16px;-webkit-overflow-scrolling:touch}
    .modal.st-wide .modal-foot{flex:none;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border);background:var(--surface)}
    .skr .sc-head{gap:10px}.skr .sc-head img,.skr .sc-head .vthumb{width:40px;height:40px}
    .skr-bar{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:8px;padding:8px 10px}
    .skr-bar>*{min-width:0;max-width:100%}
    .skr-per{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
    .skr-per::-webkit-scrollbar{display:none}
    .skr-per button{flex:none;white-space:nowrap;padding:8px 12px}
    .skr-range{margin-left:0;font-size:.78rem}
    .skr-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
    .skr-tile:last-child{grid-column:1/-1}
    .skr-tile{padding:8px 22px 8px 8px;gap:8px}
    .skr-ic{width:28px;height:28px;border-radius:8px}.skr-ic svg{width:16px;height:16px}
    .skr-tile b{font-size:1.1rem}.skr-tl{font-size:.7rem}
    .skr-grid,.skr-chan{grid-template-columns:minmax(0,1fr)}
    .skr-card{padding:12px 12px;border-radius:12px}
    .skr-fl{width:100%;justify-content:space-between}.skr-fl select{flex:1;min-width:0}
    .skr-rl{margin-left:0;width:100%}
    .skr .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
    .skr .table-wrap table{min-width:500px!important}
    .skr-sym{min-width:38px;padding:6px 10px}
    .skr-donut{margin-top:8px}
  }
  /* ---- pack mode (full screen, made for a phone in one hand) ---- */
  html.pk-open,html.pk-open body{overflow:hidden}
  .pk{position:fixed;inset:0;z-index:90;background:var(--bg,#f4f5f8);display:flex;flex-direction:column;font-size:16px}
  .pk-bar{display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 14px 10px;background:var(--surface);border-bottom:1px solid var(--border)}
  .pk-bar h2{margin:0;font-size:1.05rem;flex:1}
  .pk-bar .x{width:42px;height:42px;border-radius:12px;border:1px solid var(--border);background:var(--surface);font-size:1.3rem;cursor:pointer;color:var(--ink)}
  .pk-prog{height:4px;background:var(--border)}.pk-prog i{display:block;height:100%;background:var(--good);transition:width .25s}
  .pk-main{flex:1;overflow:auto;padding:14px;max-width:720px;width:100%;margin:0 auto;-webkit-overflow-scrolling:touch}
  .pk-head{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:14px;margin-bottom:12px}
  .pk-id{display:flex;justify-content:space-between;align-items:center;gap:8px}
  .pk-id b{font-family:var(--f-mono);font-size:1.15rem}
  .pk-name{font-size:1.25rem;font-weight:700;margin:6px 0 2px}
  .pk-sub{color:var(--muted);font-size:.9rem;line-height:1.45}
  .pk-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
  .pk-tag{border-radius:999px;padding:4px 11px;font-size:.84rem;font-weight:700;background:var(--surface-2);border:1px solid var(--border)}
  .pill.mailpill{background:#e8f5ff;color:#0b6bcb;border-color:#b6dcff}
  .pk-tag.mail{background:#e8f5ff;color:#0b6bcb;border-color:#b6dcff}
  .pk-tag.cod{background:#111;color:#fff;border-color:#111}
  .pk-tag.pick{background:#fff4d6;color:#8a5a00;border-color:#f1c75b}
  .pk-note{margin-top:10px;background:#fff8e1;border:1px solid #f1c75b;color:#6b4a00;border-radius:12px;padding:9px 11px;font-size:.92rem}
  .pk-count{display:flex;justify-content:space-between;align-items:center;margin:4px 2px 8px;font-weight:700}
  .pk-count span{color:var(--muted);font-weight:600;font-size:.88rem}
  .pk-it{position:relative;overflow:hidden;display:flex;gap:10px;align-items:center;padding-right:24px !important;background:var(--surface);border:2px solid var(--border);border-radius:16px;padding:10px;margin-bottom:10px;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;transition:border-color .15s,background .15s}
  .pk-it img,.pk-it .ph{width:76px;height:76px;border-radius:10px;object-fit:cover;background:var(--surface-2);flex:none}
  .pk-it .tx{flex:1;min-width:0}
  .pk-it .t{font-weight:600;line-height:1.3;font-size:.95rem;overflow-wrap:anywhere}
  .pk-it .k{font-family:var(--f-mono);font-size:.8rem;color:var(--muted);margin-top:3px}
  .pk-it .qc{flex:none;display:flex;flex-direction:column;align-items:center;gap:3px}
  .pk-it .pr{font-size:.72rem;font-weight:700;color:var(--muted);white-space:nowrap;font-family:var(--f-mono)}
  .pk-it .q{flex:none;min-width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:1rem;font-weight:800;background:var(--surface-2);border:1px solid var(--border)}
  .pk-it .q.many{background:#fff1e6;border-color:#f59f00;color:#b45309}
  .pk-it .q.x4{background:#2f5bff;border-color:#2f5bff;color:#fff}
  .pk-it .v{font-size:.8rem;color:var(--muted);margin-top:2px;line-height:1.35;overflow-wrap:anywhere}
  .pk-it .v .vk{font-weight:800;color:var(--ink)}.pk-it .v .vk.red{color:#d32f2f}
  /* folded top-right corner: a small grey dog-ear until the item is ticked, then a big green one with a check */
  .pk-it .fold{position:absolute;top:0;right:0;width:16px;height:16px;background:linear-gradient(225deg,var(--bg,#f4f5f8) 50%,var(--border) 50%);border-bottom-left-radius:6px;box-shadow:-2px 2px 4px rgba(0,0,0,.08);transition:width .15s,height .15s}
  .pk-it .fold b{position:absolute;left:4px;bottom:3px;color:#fff;font-size:.8rem;line-height:1;opacity:0}
  .pk-it.on .fold{width:32px;height:32px;background:linear-gradient(225deg,var(--bg,#f4f5f8) 50%,var(--good) 50%);box-shadow:-3px 3px 6px rgba(0,0,0,.18)}
  .pk-it.on .fold b{opacity:1}
  .pk-it.on{border-color:var(--good);background:var(--good-soft)}
  .pk-it.on .t{text-decoration:line-through;opacity:.7}
  .pk-foot{display:flex;flex-wrap:wrap;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--border)}
  .pk-foot button{min-height:54px;border-radius:14px;font:inherit;font-weight:700;font-size:.95rem;border:1px solid var(--border);background:var(--surface);color:var(--ink);cursor:pointer;padding:0 12px}
  .pk-foot .go{flex:1 1 150px;background:var(--good);border-color:var(--good);color:#fff;font-size:1.05rem}
  .pk-foot .go.wait{background:var(--surface-2);border-color:var(--border);color:var(--muted)}
  .pk-foot button:disabled{opacity:.5}
  .pk-done{text-align:center;padding:40px 10px}
  .pk-done .big{font-size:3.4rem}
  .pk-done h3{font-size:1.35rem;margin:10px 0 6px}
  .pk-list{text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:6px 12px;margin:16px 0}
  .pk-list div{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border);font-size:.92rem}.pk-list div:last-child{border:0}
  .pk-zoom{position:fixed;inset:0;z-index:95;background:rgba(0,0,0,.88);display:grid;place-items:center;padding:16px}
  .pk-zoom img{max-width:100%;max-height:100%;border-radius:12px}
  @media (max-width:420px){.pk-foot .sm-hide{display:none}.pk-it img,.pk-it .ph{width:64px;height:64px}}
  .modal.vf-wide{width:min(1100px,100%);height:min(92vh,1000px);display:flex;flex-direction:column;overflow:hidden}
  .modal.vf-wide .modal-body{flex:1;overflow:auto;min-height:0}
  .vf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
  .vf-o{border:2px solid var(--border);border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:8px;background:var(--surface)}
  .vf-o.on{border-color:var(--good,#16a34a)}
  .vf-o.off{opacity:.55}
  .vf-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:.8rem}
  .vf-top .mono{font-size:.82rem}
  .vf-amt{display:flex;justify-content:space-between;align-items:center;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:7px 10px;font-size:.78rem;color:var(--muted)}
  .vf-amt b{font-size:1.25rem;color:var(--ink);font-family:var(--f-mono)}
  .vf-slip{display:flex;align-items:center;justify-content:center;min-height:200px;background:var(--surface-2);border-radius:10px;overflow:hidden;cursor:zoom-in;font-size:.8rem;color:var(--muted)}
  .vf-slip img{width:100%;max-height:360px;object-fit:contain;display:block}
  .vf-slip.big{cursor:zoom-out}.vf-slip.big img{max-height:none}
  .vf-act{display:flex;gap:6px;align-items:center;justify-content:space-between}
  .vf-act label{display:flex;gap:6px;align-items:center;font-size:.84rem;font-weight:600;cursor:pointer}
  .vf-act input{width:18px;height:18px;accent-color:var(--good,#16a34a)}
  .ord-tl{margin:0 0 12px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}.ord-tl-h{font-weight:700;font-size:.85rem;margin-bottom:6px}
  .ord-tl ol{list-style:none;margin:0;padding:0 0 0 14px;border-left:2px solid var(--border)}
  .ord-tl li{position:relative;padding:4px 0 6px 10px;display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline;font-size:.84rem}
  .ord-tl li::before{content:"";position:absolute;left:-21px;top:9px;width:10px;height:10px;border-radius:50%;background:var(--sc);box-shadow:0 0 0 2px var(--surface)}
  .ord-tl li span{color:var(--muted);font-size:.78rem}.ord-tl li small{flex-basis:100%;color:var(--muted);font-size:.76rem}
  .ord-chips .ofn{color:var(--muted);font-weight:500;font-size:.92em}
  .ord-chips .cnt{background:var(--danger);color:#fff;border-radius:999px;padding:0 7px;font-size:.72rem;line-height:1.5}
  .modal.rs-wide{width:min(980px,100%);height:min(88vh,900px);display:flex;flex-direction:column;overflow:hidden}
  .modal.rs-wide .modal-body{flex:1;overflow:auto;min-height:0}
  .rs-steps{display:flex;gap:6px;padding:0 20px 6px;flex-wrap:wrap}
  .rs-steps span{font-size:.78rem;font-weight:600;color:var(--faint);padding:5px 10px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border)}
  .rs-steps span.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
  .rs-steps span.done{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
  .rs-modes{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .rs-mode{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;padding:20px;border:1.5px solid var(--border);border-radius:16px;background:var(--surface);cursor:pointer;font:inherit;color:inherit;transition:border-color .12s,box-shadow .12s,transform .06s}
  .rs-mode:hover{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
  .rs-mode:active{transform:translateY(1px)}
  .rs-mode .ic{font-size:2rem;line-height:1}
  .rs-mode b{font-size:1.08rem}
  .rs-mode span:last-child{font-size:.84rem;color:var(--muted);line-height:1.45}
  .rs-cost{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:.7rem;color:var(--muted)}
  .rs-cost input{width:84px;height:34px;text-align:right;border:1px solid var(--border);border-radius:9px;background:var(--bg);padding:0 8px;color:var(--ink)}
  @media (max-width:640px){.rs-modes{grid-template-columns:1fr}}
  .rs-price{font-size:1.6rem;font-weight:800;font-family:var(--f-display);text-align:center;padding:14px!important}
  .rs-nats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  .rs-nats .nbtn{justify-content:center;padding:18px 12px;font-size:1rem;border-radius:14px}
  .rs-bar{position:sticky;top:-14px;z-index:2;background:var(--surface);padding:10px 0;display:flex;flex-wrap:wrap;gap:8px;align-items:center;border-bottom:1px solid var(--border);margin-bottom:12px}
  .rs-bar .search{flex:1;min-width:180px}
  .rs-count{margin-left:auto;font-weight:700;font-size:.9rem;white-space:nowrap}
  .rs-count small{font-weight:500;color:var(--muted)}
  .rs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px}
  .rs-item{position:relative;border:1.5px solid var(--border);border-radius:12px;background:var(--surface);padding:6px;cursor:pointer;text-align:left;font:inherit;color:inherit;display:flex;flex-direction:column;gap:5px}
  .rs-item:hover{border-color:var(--accent)}
  .rs-item.open{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
  .rs-item img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;background:var(--surface-2)}
  .rs-item .nm{font-size:.76rem;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .rs-item .gr{font-size:.68rem;color:var(--faint)}
  .rs-item .got{position:absolute;top:10px;right:10px;background:var(--accent);color:var(--accent-ink);font-weight:800;border-radius:999px;min-width:26px;height:26px;display:grid;place-items:center;font-size:.8rem;padding:0 7px;box-shadow:var(--shadow)}
  .rs-pick{border:1.5px solid var(--accent);border-radius:14px;background:var(--accent-soft);padding:12px;margin-bottom:14px}
  .rs-pick-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
  .rs-pick-h b{flex:1;min-width:0}
  .rs-vrow{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:6px 8px;margin-bottom:6px}
  .rs-vrow img,.rs-vrow .vthumb{width:40px;height:40px;border-radius:6px;object-fit:cover;flex:none}
  .rs-vrow .vn{flex:1;min-width:0}.rs-vrow .vn span{display:block;font-size:.74rem;color:var(--muted)}
  .rs-step{display:flex;align-items:center;gap:4px}
  .rs-step button{width:34px;height:34px;border-radius:9px;border:1px solid var(--border);background:var(--surface-2);font-size:1.1rem;cursor:pointer}
  .rs-step input{width:52px;height:34px;text-align:center;border:1px solid var(--border);border-radius:9px;background:var(--bg);font-weight:700;color:var(--ink)}
  .rs-sum{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
  .rs-sum div{border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:var(--surface-2)}
  .rs-sum span{display:block;font-size:.74rem;color:var(--muted);font-weight:600}.rs-sum b{font-size:1.2rem;font-family:var(--f-display)}
  .rs-sum .hl{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 35%,transparent)}.rs-sum .hl b{color:var(--accent)}
  .rs-route{display:flex;align-items:center;justify-content:center;gap:2px;flex-wrap:nowrap;width:100%;padding:8px 0 4px;pointer-events:none;user-select:none}
  .rs-st{display:inline-flex;flex-direction:column;font-size:.74rem;font-weight:700;padding:3px 9px;border-radius:10px;background:var(--surface-2);border:1px solid var(--border);color:var(--faint);line-height:1.25}
  .rs-st small{font-weight:500;font-size:.66rem}
  .rs-st.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
  .rs-st.done{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
  .rs-arr{font-style:normal;color:var(--faint)}
  .rs-dot{position:relative;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--border-strong);background:var(--surface);color:var(--ink);font-weight:700;font-size:.86rem;line-height:1;vertical-align:middle}
  .rs-dot[style*="--nc"]{background:var(--nc);border-color:var(--nc);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3)}
  .rs-dot em{position:absolute;top:-6px;right:-7px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--ink);color:var(--bg);font:700 .62rem/16px var(--f-body,sans-serif);text-align:center;font-style:normal;text-shadow:none}
  .rs-route .rs-dot{opacity:.5}.rs-route .rs-dot.done{opacity:.85}
  .rs-route .rs-dot.on,.btn .rs-dot.on{opacity:1;box-shadow:0 0 0 3px color-mix(in srgb,var(--nc,var(--accent)) 40%,transparent);transform:scale(1.12)}
  .btn .rs-dot{width:24px;height:24px;font-size:.78rem;border-color:rgba(255,255,255,.6)}
  .rs-ln{position:relative;flex:0 1 22px;min-width:10px;height:3px;border-radius:2px;background:var(--border-strong);opacity:.7}
  .rs-ln::after{content:'';position:absolute;right:-1px;top:50%;transform:translateY(-50%);border-left:6px solid var(--border-strong);border-top:5px solid transparent;border-bottom:5px solid transparent}
  .rs-ln.done{background:var(--accent);opacity:1}.rs-ln.done::after{border-left-color:var(--accent)}
  .lnw-lot{border-left:4px solid #2f5bff}.lnw-lot details{margin-top:4px}.lnw-lot summary{cursor:pointer;font-size:.82rem;color:var(--accent);font-weight:600}
  .lnw-lotl{list-style:none;margin:6px 0 0;padding:0;max-height:260px;overflow:auto;font-size:.82rem}.lnw-lotl li{padding:3px 0;border-bottom:1px dashed var(--border)}
  .le-ro .rs-step,.le-ro .le-rm,.le-ro .le-addbar,.le-ro [data-le="save"]{display:none}
  .rs-resume{border:1.5px solid var(--accent);border-radius:14px;background:var(--accent-soft);padding:12px 14px;margin-bottom:14px}.rs-resume>b{display:block;margin-bottom:6px}.rs-resume-row{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:4px 0;font-size:.86rem}
  .pend-lot{display:inline-block;font-size:.66rem;font-weight:700;padding:1px 7px;border-radius:999px;background:#fff1cc;color:#8a5a00;border:1px solid #f0cf7a;vertical-align:middle;white-space:nowrap}
  .rs-part{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1.5px solid var(--border);border-radius:12px;background:var(--surface);cursor:pointer;margin-bottom:14px}.rs-part input{width:20px;height:20px;margin-top:2px;flex:none}.rs-part small{color:var(--muted)}
  .le-sec{font-weight:800;font-size:.86rem;margin:14px 0 6px}.le-int{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:12px;padding:8px 12px;background:var(--surface);margin-bottom:6px}.le-int>div{flex:1;min-width:0}.le-int span{display:block;font-size:.78rem;color:var(--muted)}.le-int input[type=checkbox]{width:20px;height:20px;flex:none}
  .le-decks{margin-top:6px;font-size:.78rem}.le-decks>b{display:block;color:var(--accent);margin-bottom:2px}.le-decks div{padding:2px 0;color:var(--muted)}.le-deckrow{display:flex;align-items:center;gap:8px;justify-content:space-between}
  .rh-row{border:1px solid var(--border);border-radius:12px;background:var(--surface);margin-bottom:6px;padding:8px 12px}.rh-row summary{cursor:pointer;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}.rh-row summary::-webkit-details-marker{display:none}
  .rh-t{font-size:.76rem;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border)}.rh-deck{background:#e8f0ff;border-color:#b9cdfa;color:#27479a}.rh-single{background:#e9f7ee;border-color:#b6dfc3;color:#1f6b3a}.rh-lotedit{background:#fff1cc;border-color:#f0cf7a;color:#8a5a00}
  .rh-m{flex-basis:100%;font-size:.76rem;color:var(--muted)}.rh-m code{font-size:.72rem}
  .rh-lines{margin-top:8px;max-height:280px;overflow:auto;font-size:.82rem}.rh-lines>div{display:flex;gap:10px;justify-content:space-between;padding:3px 0;border-bottom:1px dashed var(--border)}.rh-lines small{color:var(--muted)}
  .lot-bar{display:block;height:6px;border-radius:3px;margin:0 0 8px}
  .le-dot{display:inline-block;width:11px;height:11px;border-radius:50%;margin-left:4px;vertical-align:middle;border:1px solid rgba(0,0,0,.15)}
  .le-addbar{display:flex;align-items:center;gap:10px;justify-content:space-between;margin:8px 0;font-size:.84rem;color:var(--muted)}
  .le-addbox{border:1.5px solid var(--accent);border-radius:12px;background:var(--accent-soft);padding:10px;margin-bottom:10px}.le-addbox input{width:100%;margin-bottom:8px}
  .le-rm{width:30px;height:30px;border-radius:50%;border:1px solid var(--border);background:var(--surface-2);color:var(--danger);cursor:pointer;flex:none}
  .le-chg{border-color:var(--accent);background:var(--accent-soft)}
  .le-lots{display:flex;flex-direction:column;gap:8px}.le-lot{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:var(--surface)}.le-lot>div{flex:1;min-width:0}.le-lot b{display:block}.le-lot span{display:block;font-size:.78rem;color:var(--muted)}
  .le-list{margin-top:6px}
  .rs-gh{grid-column:1/-1;font-weight:800;font-size:.84rem;color:var(--tc,var(--muted));border-bottom:2px solid var(--tc,var(--border));padding:6px 2px 3px;margin-top:6px}
  .rs-vrow img.zoomable{cursor:zoom-in}
  .lightbox-frame{position:relative;display:inline-block;line-height:0}
  .lightbox-frame button{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.18);color:#fff;border:none;font-size:1.4rem;width:42px;height:42px;border-radius:50%;cursor:pointer}
  .rs-lotno{width:100%;margin-top:6px;font-weight:700;letter-spacing:.02em}
  #rsLotSel{width:100%}
  .rs-sum small{display:block;font-size:.72rem;color:var(--accent);font-weight:700}
  .rs-lines{display:flex;flex-direction:column;gap:6px}
  .rs-line{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:10px;padding:6px 8px;background:var(--surface)}
  .rs-line .vthumb{width:40px;height:40px;border-radius:6px;object-fit:cover;flex:none}
  .rs-line .m{flex:1;min-width:0}.rs-line .m b{display:block;font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rs-line .m span{display:block;font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rs-line .m .c{color:var(--ink)}
  .rs-line .q{text-align:right;flex:none}.rs-line .q b{display:block;font-size:1rem}.rs-line .q span{font-size:.72rem;color:var(--muted);white-space:nowrap}
  @media (max-width:640px){
    .rs-nats{grid-template-columns:repeat(2,1fr)}.rs-sum{grid-template-columns:repeat(2,1fr);gap:6px;margin-bottom:10px}.rs-sum div{padding:7px 9px}.rs-sum b{font-size:1rem}
    .rs-steps{flex-wrap:nowrap;overflow-x:auto;padding:0 12px 6px}.rs-steps span{white-space:nowrap;padding:4px 9px}
    .rs-route .rs-dot{width:24px;height:24px;font-size:.7rem;flex:none}.rs-ln{min-width:3px;flex-basis:9px}
    .rs-st:not(.on) small{display:none}.rs-st{padding:2px 7px;font-size:.7rem}.rs-bar{gap:6px;padding:8px 0}.rs-count{flex-basis:100%;margin-left:0;font-size:.82rem;white-space:normal}
    .rs-vrow{flex-wrap:wrap;row-gap:4px;align-items:center}.rs-vrow .vn{flex:1 1 0;min-width:0}.rs-vrow .rs-step{margin-left:0;flex:none;order:2}.rs-vrow .rs-step button{width:32px;height:32px}.rs-vrow .rs-step input{width:44px;height:32px}.rs-vrow .rs-cost{flex-direction:row;align-items:center;gap:6px;margin-left:50px;flex-basis:100%;order:3}
  }
  .sc-head{display:flex;gap:12px;align-items:center;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);margin-bottom:14px}
  .sc-head img,.sc-head .vthumb{width:56px;height:56px;border-radius:9px;object-fit:cover;flex:none}
  .sc-head .sc-name{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
  .sc-head .sc-name b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.95rem}
  .sc-head .sc-price{font-family:var(--f-display);font-weight:800;font-size:1.05rem;white-space:nowrap}
  .sc-tiles{margin-bottom:16px}
  .sc-tiles .stile{text-align:left;font:inherit;color:inherit}
  .sc-tiles button.stile:disabled{cursor:default;opacity:.6;transform:none;box-shadow:none}
  .sc-seg{display:flex;width:100%;margin-bottom:14px}
  .sc-seg button{flex:1;padding:9px 10px;font-size:.84rem}
  .sc-seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);box-shadow:var(--shadow)}
  .sc-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
  .sc-grid .full{grid-column:1/-1}
  .sc-grid .field label{display:flex;align-items:center;gap:4px}
  .sc-grid .field label .sc-now{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-weight:500;color:var(--ink);cursor:pointer}
  .sc-now input{width:16px;height:16px;accent-color:var(--accent);padding:0}
  .qty-ctl{display:flex;gap:6px}
  .qty-ctl .btn{width:44px;padding:0;justify-content:center;font-size:1.15rem;flex:none}
  .field .qty-ctl input{text-align:center;font-weight:700;font-size:1rem}
  .cost-row{display:flex;gap:8px;align-items:center}
  .field .cost-row select{width:120px;flex:none}
  .cost-row .unit{color:var(--muted);font-size:.86rem}
  .sc-result{display:flex;align-items:center;gap:10px;border-radius:12px;padding:12px 14px;font-weight:600;font-size:.9rem;border:1px solid var(--border);background:var(--surface-2);color:var(--muted)}
  .sc-result.ok{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 35%,transparent);color:var(--ink)}
  .sc-result.bad{background:var(--danger-soft);border-color:color-mix(in srgb,var(--danger) 35%,transparent);color:var(--danger)}
  .sc-result .arrow{font-family:var(--f-display);font-size:1.1rem}
  .sc-log{margin-top:14px}
  .sc-log .table-wrap{max-height:240px;overflow:auto}
  .sc-log table{min-width:0}
  .sc-note{font-size:.8rem;color:var(--faint);margin:10px 0 0}
  @media (max-width:560px){.sc-tiles.stock-tiles{grid-template-columns:repeat(3,1fr)}.sc-grid{grid-template-columns:1fr}.sc-seg{flex-wrap:wrap}}
  .vsub{font-weight:700;font-size:.92rem;margin-bottom:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .vsub .fh{font-weight:400}
  .vthumb{width:32px;height:32px;border-radius:6px;object-fit:cover;border:1px solid var(--border);vertical-align:middle}
  .vthumb.ph{display:inline-block;background:var(--surface-2)}
  .cat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);margin-bottom:14px;overflow:hidden}
  .ct-tree{border-top:1px solid var(--border);padding:6px 10px 10px}
  .ct-row{display:flex;align-items:center;gap:8px;min-height:46px;padding:4px 8px 4px calc(var(--ind,0px) + 8px);border-radius:10px;position:relative}
  .ct-row:hover{background:var(--surface-2)}
  .ct-row .ct-tog{width:26px;height:26px;flex:none;border:0;background:none;border-radius:7px;color:var(--muted);font-size:.8rem;cursor:pointer;display:grid;place-items:center;transition:transform .15s}
  .ct-row .ct-tog:hover{background:var(--border)}
  .ct-row .ct-tog.open{transform:rotate(90deg)}
  .ct-row .ct-tog:disabled{visibility:hidden}
  .ct-row .reorder button{height:17px;width:22px;font-size:.6rem}
  .ct-row .sub-img{width:34px;height:34px;border-radius:9px}
  .ct-dot{width:12px;height:12px;border-radius:50%;flex:none;background:var(--nc);box-shadow:0 0 0 3px color-mix(in srgb,var(--nc) 22%,transparent)}
  .ct-name{flex:1;min-width:120px;border:1px solid transparent;background:transparent;color:var(--ink);padding:7px 9px;border-radius:8px;font:inherit;font-weight:600;font-size:.9rem}
  .ct-name:hover{border-color:var(--border);background:var(--surface)}
  .ct-name:focus{border-color:var(--accent);background:var(--surface);outline:none}
  .ct-meta{display:flex;gap:6px;align-items:center;flex:none}
  .ct-meta .pill{font-size:.7rem}
  .ct-meta .fh{font-size:.74rem;white-space:nowrap}
  .ct-acts{display:flex;gap:6px;align-items:center;flex:none;opacity:.55;transition:opacity .12s}
  .ct-row:hover .ct-acts,.ct-row:focus-within .ct-acts{opacity:1}
  .ct-acts .del{flex:none;background:none;border:1px solid var(--border);color:var(--faint);width:30px;height:30px;border-radius:8px;display:grid;place-items:center;cursor:pointer}
  .ct-acts .del:hover{color:var(--danger);border-color:var(--danger)}
  .ct-acts .del svg{width:14px;height:14px}
  .ct-kids{position:relative}
  .ct-kids::before{content:"";position:absolute;left:calc(var(--ind,0px) + 20px);top:0;bottom:8px;border-left:1.5px dashed var(--border-strong);opacity:.6}
  .ct-kids[hidden]{display:none}
  @media (max-width:640px){.ct-meta .fh{display:none}.ct-row{flex-wrap:wrap}.ct-acts{opacity:1}}
  .cat-main{display:flex;align-items:center;gap:12px;padding:14px 16px}
  .reorder{display:flex;flex-direction:column;gap:2px;flex:none}
  .reorder button{width:26px;height:20px;border:1px solid var(--border);background:var(--surface-2);color:var(--muted);border-radius:6px;font-size:.7rem;line-height:1;padding:0}
  .reorder button:disabled{opacity:.35;cursor:default}
  .reorder button:not(:disabled):hover{color:var(--ink);border-color:var(--border-strong)}
  .cat-img,.sub-img{flex:none;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--surface-2);display:grid;place-items:center;padding:0;color:var(--faint)}
  .cat-img{width:52px;height:52px}
  .sub-img{width:36px;height:36px;font-size:1rem}
  .cat-img img,.sub-img img{width:100%;height:100%;object-fit:cover}
  .cat-letter{font-family:var(--f-display);font-weight:800;font-size:1.3rem;color:var(--accent)}
  .cat-fields{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
  .cat-meta{font-size:.74rem;color:var(--faint)}
  .cat-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;flex:none}
  .vis-toggle{border:1px solid var(--border);background:var(--surface-2);color:var(--muted);border-radius:999px;padding:5px 12px;font-size:.76rem;font-weight:600}
  .vis-toggle.on{background:var(--good-soft);color:var(--good);border-color:color-mix(in srgb,var(--good) 35%,transparent)}
  .vis-toggle.sm{padding:4px 9px;font-size:.72rem}
  .subs{border-top:1px solid var(--border);background:var(--surface-2);padding:10px 16px 12px}
  .depth-badge{font-family:var(--f-mono);font-size:.62rem;color:var(--faint);border:1px solid var(--border);border-radius:5px;padding:1px 5px;flex:none}
  .opt-panel{border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:14px;background:var(--bg)}
  .opt-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
  .opt-num{font-weight:700;font-size:.82rem;color:var(--muted)}
  .opt-head .opt-name{flex:1;min-width:140px;width:auto}
  .seg.xs{padding:2px;border-radius:9px}.seg.xs button{padding:5px 10px;font-size:.78rem;border-radius:7px}
  .seg.xs button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
  .card-auto{display:grid;grid-template-columns:150px 1fr;gap:8px;margin-bottom:8px}
  .card-auto label{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.72rem;font-weight:600;color:var(--muted);margin-bottom:4px}
  .card-auto input{font-family:var(--f-mono);text-transform:uppercase}
  .card-auto .box-in{border-color:var(--accent)}
  .card-auto.nf{grid-template-columns:130px 1fr 130px 1fr}
  .card-auto .mirror{background:var(--surface-2);color:var(--muted)}
  .nf-check{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;font-weight:600;margin-bottom:8px;cursor:pointer}
  .nf-check input{width:16px;height:16px;accent-color:var(--accent)}
  .opt-add input.preview{font-family:var(--f-mono);color:var(--accent);background:var(--surface-2)}
  @media (max-width:760px){.card-auto.nf{grid-template-columns:130px 1fr}}
  @media (max-width:520px){.card-auto,.card-auto.nf{grid-template-columns:1fr}}
  .opt-name{max-width:200px}
  .opt-add{display:flex;gap:8px;margin-bottom:11px}
  .chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
  .vchip{display:flex;align-items:center;gap:3px;background:var(--surface);border:1px solid var(--border-strong);border-radius:9px;padding:3px 4px 3px 6px;cursor:grab}
  .vchip.dragging{opacity:.45}
  .vchip .chip-img{width:60px;height:60px;border:1px solid var(--border);border-radius:6px;overflow:hidden;background:var(--surface-2);display:grid;place-items:center;padding:0;color:var(--faint)}
  .vchip .chip-img img{width:100%;height:100%;object-fit:cover}
  .vchip{max-width:100%}
  .vchip .chip-name{border:none;background:none;color:var(--ink);width:84px;min-width:60px;max-width:100%;font-size:.86rem;padding:2px}
  .vchip .chip-name:focus{outline:none}
  .vchip .chip-x{background:none;border:none;color:var(--faint);font-size:.78rem;padding:2px 4px}
  .vchip .chip-x:hover{color:var(--danger)}
  .vchip.invalid, .vchip.is-toolong{border:1.5px solid var(--danger)!important;background:color-mix(in srgb,var(--danger) 8%,var(--surface))!important;box-shadow:0 0 0 2px var(--danger-soft)!important}
  .vchip .chip-name.is-toolong, input.vkey-in.is-toolong{color:var(--danger)!important;font-weight:600}
  input.vkey-in.invalid, input.vkey-in.is-toolong{border:1.5px solid var(--danger)!important;background:color-mix(in srgb,var(--danger) 8%,var(--surface))!important;box-shadow:0 0 0 2px var(--danger-soft)!important}
  .df-acts{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
  .line-sep{height:1px;background:var(--border);margin:18px 0 16px}
  .vfilter{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:12px;font-size:.84rem}
  .vfilter a{padding:5px 11px;border-radius:999px;color:var(--muted);cursor:pointer;border:1px solid transparent}
  .vfilter a.active{background:var(--ink);color:var(--bg)}
  .vfilter a:hover:not(.active){background:var(--surface-2);color:var(--ink)}
  @media (max-width:640px){.cat-main{flex-wrap:wrap}.cat-actions{width:100%;justify-content:flex-start}}

  .set-card{border:1px solid var(--border);border-radius:11px;padding:13px;margin-bottom:12px;background:var(--bg)}
  .set-card .sc-head{display:flex;gap:9px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
  .comp-row{display:flex;gap:8px;align-items:center;margin-bottom:7px;flex-wrap:wrap}
  .comp-row .skuin{width:130px;flex:none}
  .comp-row .rname{flex:1;min-width:120px;font-size:.82rem;color:var(--muted)}
  .comp-row .qty{width:70px;flex:none}

  .banner{display:flex;gap:11px;background:var(--warn-soft);border:1px solid color-mix(in srgb,var(--warn) 35%,transparent);border-radius:12px;padding:12px 14px;font-size:.84rem;margin-bottom:20px;color:var(--ink)}
  .banner svg{width:18px;height:18px;flex:none;color:var(--warn);margin-top:1px}
  .banner b{font-weight:600}
  .banner .bn-text{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
  .banner .bn-actions{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
  .bn-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);background:var(--surface);color:var(--ink);padding:6px 12px;border-radius:999px;font-weight:600;font-size:.8rem;cursor:pointer;white-space:nowrap;transition:background .12s,border-color .12s,transform .06s}
  .bn-btn:hover{background:color-mix(in srgb,var(--warn) 14%,var(--surface));border-color:var(--warn)}
  .bn-btn:active{transform:translateY(1px)}
  .bn-btn.on{background:var(--warn);border-color:var(--warn);color:#fff}.bn-btn.on .n{background:rgba(255,255,255,.25)}.bn-btn.bn-clear{border-color:var(--border-strong)}
  .bn-btn .n{background:color-mix(in srgb,var(--warn) 22%,transparent);border-radius:999px;padding:1px 7px;font-size:.74rem}
  .banner.info{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
  .banner.info svg{color:var(--accent)}
  .empty-cell{text-align:center;color:var(--muted);padding:34px}

  .export-area{width:100%;min-height:150px;background:var(--bg);border:1px solid var(--border);color:var(--ink);border-radius:10px;padding:12px;font-family:var(--f-mono);font-size:.78rem;white-space:pre;overflow:auto}
  .settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;max-width:780px;align-items:end}
  .settings-grid .field{display:flex;flex-direction:column;justify-content:flex-end;min-width:0}
  .settings-grid .field>input,.settings-grid .field>select,.settings-grid .field>textarea{width:100%;min-width:0}
  .settings-grid .field label:has(input[type=checkbox]){display:flex;align-items:center;gap:8px;min-height:40px}
  .settings-grid .field.full{grid-column:1/-1}
  #ship-tiers{table-layout:fixed;max-width:520px}#ship-tiers td,#ship-tiers th{padding:6px 8px}#ship-tiers input{width:100%;min-width:0}
  @media (max-width:520px){.settings-grid{grid-template-columns:1fr}}

  .modal-wrap{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px;opacity:0;pointer-events:none;transition:opacity .18s ease}
  .modal-wrap.show{opacity:1;pointer-events:auto}
  .modal-wrap .backdrop{position:absolute;inset:0;background:rgba(8,10,14,.55)}
  .modal{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:18px;width:min(600px,100%);max-height:calc(100% - 20px);overflow-y:auto;box-shadow:var(--shadow-lift)}
  .modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 4px}
  .modal-head h2{font-size:1.2rem}
  .modal-body{padding:14px 20px 20px}
  .modal-foot{display:flex;gap:10px;justify-content:flex-end;padding:4px 20px 20px}

  .save-summary{font-size:.82rem;color:var(--muted);display:flex;flex-direction:column;gap:7px}
  .slip-amt{display:flex;align-items:center;gap:6px;font-size:.86rem;color:var(--muted);background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:8px 12px;margin-bottom:8px}
  .slip-amt b{font-size:1.05rem;color:var(--ink);font-family:var(--f-mono)}
  .save-summary .r{display:flex;justify-content:space-between;gap:12px}
  .save-summary .r b{color:var(--ink);font-weight:600;font-family:var(--f-mono)}
  .trk-edit{display:grid;gap:8px;margin:0 0 12px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2)}.trk-edit-h{font-weight:700;font-size:.85rem}.trk-edit-row{display:flex;gap:8px}.trk-edit-row input{flex:1;min-width:0}
  .save-summary .r>span:first-child{flex:none;white-space:nowrap}.save-summary .r>b{min-width:0;overflow-wrap:anywhere}   /* label never squeezed to one word per line (phones) */
  .sticky-save{position:sticky;top:var(--sticky-y,calc(env(safe-area-inset-top,0px) + 8px))}
  .toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:11px;font-size:.88rem;font-weight:500;box-shadow:var(--shadow-lift);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:100;max-width:calc(100% - 32px)}
  .toast.show{opacity:1;transform:translate(-50%,0)}
  .toast.ok{background:var(--good);color:#fff}
  .toast.err{background:var(--danger);color:#fff}

  /* ===== phones: fit the screen, never scroll sideways ===== */
  @media (max-width:760px){
    html,body{max-width:100vw;overflow-x:hidden}
    main{padding-left:10px!important;padding-right:10px!important}
    :where(div,section,form,label,p,span,h1,h2,h3,ul,ol,li,a,button,input,select,textarea,summary,details){min-width:0}
    img,video,canvas,svg{max-width:100%}
    input,select,textarea{max-width:100%}
    pre,code{white-space:pre-wrap;overflow-wrap:anywhere}
    .topbar-in{padding:8px 10px;gap:8px;flex-wrap:wrap}
    .brand .tag{display:none}
    .top-actions{gap:4px;flex-wrap:wrap;justify-content:flex-end}
    .tabs{flex-wrap:wrap;overflow:visible;padding:0 6px;gap:0}
    .tabs button{padding:9px 9px;font-size:.82rem;margin-bottom:0}
    .page-head{align-items:flex-start;gap:8px}
    .page-head h1{font-size:1.25rem}
    .panel-head{flex-wrap:wrap;padding:12px 12px}
    .panel-body{padding:12px}
    .kpis{grid-template-columns:1fr 1fr;gap:8px}
    .search,.rs-bar .search{min-width:0;flex:1 1 100%}
    .modal-wrap{padding:8px}
    .modal,.modal.sc-wide,.modal.vf-wide,.modal.rs-wide,.modal.st-wide{width:100%;max-width:100%;border-radius:14px}
    .modal-head,.modal-body,.modal-foot{padding-left:14px;padding-right:14px}
    .modal-foot{flex-wrap:wrap}
    .toast{max-width:calc(100vw - 24px)}
    .btn{white-space:normal}
    .disc-type,.disc-val,.comp-row .skuin,.field .cost-row select{width:auto;flex:1 1 90px}
    .photo,.photo-wrap{width:100%}
    .chat-wrap{height:auto;min-height:0}
    .chat-thread{height:70vh;min-height:420px}
    /* tables become stacked cards (labels are added by the script below) */
    table,table.ord-t,.vtable.vfixed{min-width:0!important;width:100%!important;table-layout:auto}
    table thead{display:none}
    table,tbody,tfoot,tr,td{display:block;width:100%!important;max-width:100%}
    tr{border:1px solid var(--border);border-radius:12px;margin:0 0 10px;padding:6px 10px;background:var(--surface)}
    td,th{border:0!important;padding:5px 0!important;display:flex;gap:10px;align-items:center;justify-content:space-between;text-align:right!important;overflow-wrap:anywhere;width:auto!important}
    td::before{content:attr(data-label);font-weight:600;color:var(--muted);font-size:.74rem;text-align:left;flex:none;max-width:42%}
    td:not([data-label])::before{display:none}
    td:not([data-label]){justify-content:flex-start;text-align:left!important}
    td>*{max-width:100%}
    /* order cards: several pills per cell (id + date, name + email + level, photos + names) wrap under each other instead of overlapping / running off the card */
    table.ord-t:not(.lo-t) td{flex-wrap:wrap;justify-content:flex-end;row-gap:4px}
    table.ord-t:not(.lo-t) td::before{margin-right:auto}
    table.ord-t:not(.lo-t) td .ord-items-t{max-width:100%}
  }
  @media (prefers-reduced-motion:reduce){*{transition:none!important}}

  /* compact lot list (phone first) */
  .le-sec{font-size:.8rem;font-weight:800;color:var(--muted);margin:12px 0 6px;letter-spacing:.02em}
  .le-int,.le-lot{display:grid;align-items:center;gap:4px 10px;border:1px solid var(--border);border-radius:12px;padding:8px 10px;background:var(--surface);margin-bottom:6px}
  .le-int{grid-template-columns:auto 1fr auto}
  .le-lot{grid-template-columns:1fr auto}.le-lot>.lot-bar{grid-column:1/-1;margin:0 0 2px;height:4px}.le-lot>.le-decks{grid-column:1/-1}
  .le-t{min-width:0}.le-t b{display:block;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.le-t span{display:block;font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .le-b{display:flex;gap:6px}.le-b .btn{padding:5px 10px;font-size:.78rem}
  .le-st{font-style:normal;font-weight:700}.le-st.done{color:#1f6b3a}.le-st.open{color:#8a5a00}
  .le-mk{display:flex;align-items:center;gap:10px;margin:2px 0 6px;flex-wrap:wrap}.le-mk small{color:var(--muted);font-size:.72rem}
  .le-deckrow{font-size:.76rem}.le-decks{margin-top:2px}.le-decks>b{font-size:.74rem;color:var(--muted)}
  @media (max-width:640px){.le-int{grid-template-columns:auto 1fr}.le-int .le-b{grid-column:1/-1;justify-content:flex-end}}

  /* sync process window + per-product history */
  .lp-wait{padding:26px 10px;text-align:center;color:var(--muted)}
  .lp-sum{font-weight:700;margin:0 0 10px}
  .lp-item{border:1px solid var(--border);border-radius:12px;background:var(--surface);margin-bottom:8px;padding:6px 10px}.lp-item.bad{border-color:var(--danger)}
  .lp-item>summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none}.lp-item>summary::-webkit-details-marker{display:none}
  .lp-nm{flex:1;min-width:0}.lp-nm b{display:block;font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lp-nm small{font-size:.72rem;color:var(--muted)}
  .lp-dots{display:flex;gap:3px;flex:none}.lp-dots i,.lp-steps li>i{font-style:normal;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;font-size:.72rem;font-weight:800;background:var(--surface-2);color:var(--faint);border:1px solid var(--border)}
  .s-ok>i,i.s-ok{background:#1f9d55;border-color:#1f9d55;color:#fff}.s-warn>i,i.s-warn{background:#e0a100;border-color:#e0a100;color:#fff}.s-fail>i,i.s-fail{background:var(--danger);border-color:var(--danger);color:#fff}.s-run>i,i.s-run{background:var(--accent);border-color:var(--accent);color:#fff;animation:lpspin 1s linear infinite}.s-skip>i,i.s-skip{opacity:.5}
  @keyframes lpspin{to{transform:rotate(360deg)}}
  .lp-steps{list-style:none;margin:8px 0 2px;padding:0;display:flex;flex-direction:column;gap:5px}
  .lp-steps li{display:flex;gap:8px;align-items:flex-start;font-size:.82rem}.lp-steps li span{flex:1;min-width:0}.lp-steps li small{display:block;font-size:.72rem;color:var(--muted)}
  .lp-steps li.s-wait,.lp-steps li.s-skip{opacity:.55}
  .sh-list{display:flex;flex-direction:column;gap:5px}.sh-row{display:flex;gap:8px;align-items:flex-start;font-size:.82rem;padding:5px 0;border-bottom:1px dashed var(--border)}.sh-row.bad .sh-m>small:last-child{color:var(--danger)}
  .sh-t{flex:none;width:96px;font-size:.72rem;color:var(--muted)}.sh-k{flex:none}.sh-m{flex:1;min-width:0}.sh-m small{display:block;font-size:.72rem;color:var(--muted)}

  /* sync button spins while a run is active; live block of the running SKUs */
  .lp-spin{display:inline-block;width:14px;height:14px;border:2px solid var(--accent);border-top-color:transparent;border-radius:50%;animation:lpspin .9s linear infinite;vertical-align:-2px;flex:none}
  .lnw-sync.spin svg{animation:lpspin 1s linear infinite;color:var(--accent)}.lnw-sync[disabled]{opacity:.75;cursor:default}
  .lp-live{border:1.5px solid var(--accent);border-radius:12px;background:var(--accent-soft);padding:8px 12px;margin:8px 0 10px;max-height:190px;overflow-y:auto;overscroll-behavior:contain}
  .lnw-card.lnw-done{opacity:.85;border-color:color-mix(in srgb,var(--good) 45%,var(--border));background:color-mix(in srgb,var(--good) 6%,var(--surface))}
  .lnw-sync.done{background:var(--good)!important;color:#fff!important;border-color:transparent!important;cursor:default!important}
  .lp-live-h{display:flex;align-items:center;gap:8px;font-weight:700;justify-content:space-between;margin-bottom:4px}
  .lp-live-row{display:flex;gap:8px;align-items:flex-start;padding:4px 0;font-size:.82rem;border-top:1px dashed var(--border)}
  .lp-live-row span{flex:1;min-width:0}.lp-live-row small{display:block;font-size:.72rem;color:var(--muted)}.lp-live-row.bad small{color:var(--danger)}
  .lp-ic{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;font-size:.66rem;color:#fff;flex:none}.lp-ic.ok{background:#1f9d55}.lp-ic.bad{background:var(--danger)}

  /* variant results: one compact card per variant on phones (thumb · name + code · stock · 📦 · 👁 on top, price + sale price side by side below) */
  @media (max-width:640px){
    .vtable.vfixed tr{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-areas:"img key key key key key" "img sku sku stock pkg eye" "price price price sale sale sale";gap:4px 8px;align-items:center;padding:8px 10px!important;margin:0 0 8px}
    .vtable.vfixed tr:not(:has(.v-img)){grid-template-areas:"key key key key key key" "sku sku sku stock pkg eye" "price price price sale sale sale"}
    .vtable.vfixed td{display:block!important;padding:0!important;width:auto!important;text-align:left!important;min-width:0}
    .vtable.vfixed td::before{display:none!important}
    .vtable.vfixed .v-img{grid-area:img}.vtable.vfixed .v-img:empty{display:none!important}.vtable.vfixed .v-img .vthumb{width:44px;height:44px}
    .vtable.vfixed .v-key{grid-area:key;font-weight:700;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .vtable.vfixed .v-sku{grid-area:sku;margin-top:-2px}.vtable.vfixed .v-sku .vsku-txt{font-size:.72rem}
    .vtable.vfixed .v-stock{grid-area:stock;text-align:center!important}.vtable.vfixed .v-stock .vstock{display:inline-block;min-width:30px;padding:3px 6px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);font-weight:800;font-size:.84rem}
    .vtable.vfixed .v-pkg{grid-area:pkg;text-align:center!important}.vtable.vfixed .v-eye{grid-area:eye;text-align:center!important}
    .vtable.vfixed .v-price{grid-area:price;margin-top:4px}.vtable.vfixed .v-sale{grid-area:sale;margin-top:4px}
    .vtable.vfixed .v-price input,.vtable.vfixed .v-sale input{height:36px;font-size:.9rem}
    .vtable.vfixed td.v-price::before,.vtable.vfixed td.v-sale::before{display:block!important;font-size:.66rem;font-weight:700;color:var(--muted);margin:0 0 1px 2px}
    .vtable.vfixed td.v-price::before{content:"ราคา"}.vtable.vfixed td.v-sale::before{content:"ลดเหลือ"}
    .vtable.vfixed .v-price,.vtable.vfixed .v-sale{margin-top:2px}
  }

  .lp-ic.wait{background:#e0a100;font-size:.62rem}

  /* 🔄 Sync tab */
  #view-sync{overflow-anchor:auto}
  #syncBody,#lnwDiff,#lnwIn,#syncStat,.ch-strip,.lnw-card,.sh-row{overflow-anchor:auto}
  .sync-tabs{display:flex;gap:8px;margin:0 0 12px;flex-wrap:wrap}.sync-tabs .gbtn{padding:7px 16px}
  .sy-day{font-size:.78rem;font-weight:800;color:var(--muted);margin:12px 0 4px}.sy-open{color:var(--ink);text-decoration:none;border-bottom:1px dotted var(--muted)}
  #view-sync .lnw-card{margin-bottom:8px}

/* stats modal — phone: orders / movements / channels as compact two-line cards */
.skr-sortm{display:none}
@media (max-width:760px){
  .skr-sortm{display:inline-block;padding:5px 10px;font-size:.76rem;margin-left:0}
  .skr .table-wrap{max-height:none!important;overflow:visible!important}
  .skr .table-wrap table{min-width:0!important}
  .skr tr.skr-or,.skr tr.skr-mv{display:grid;gap:2px 10px;padding:9px 12px;margin:0 0 8px}
  .skr tr.skr-or td,.skr tr.skr-mv td,.skr tr.skr-cr td{display:block;width:auto!important;padding:0!important;border:0!important;text-align:left!important}
  .skr tr.skr-or td::before,.skr tr.skr-mv td:not([data-label])::before{display:none}
  .skr tr.skr-or{grid-template-columns:1fr auto;grid-template-areas:"o s" "d d" "c q" "a a"}
  .skr tr.skr-or .o{grid-area:o;font-size:1rem}.skr tr.skr-or .s{grid-area:s;justify-self:end}
  .skr tr.skr-or .d{grid-area:d;color:var(--muted)}.skr tr.skr-or .c{grid-area:c;color:var(--muted);font-size:.82rem}
  .skr tr.skr-or .q{grid-area:q;justify-self:end;color:var(--muted);font-size:.82rem}
  .skr tr.skr-or .a{grid-area:a;justify-self:end;font-size:1.1rem}.skr tr.skr-or .a b::before{content:"฿"}
  .skr tr.skr-mv{grid-template-columns:1fr auto;grid-template-areas:"w x" "d x" "k m"}
  .skr tr.skr-mv .w{grid-area:w;font-weight:700}.skr tr.skr-mv .d{grid-area:d;color:var(--muted)}
  .skr tr.skr-mv .i,.skr tr.skr-mv .u{grid-area:x;align-self:center;font-size:1.25rem;font-weight:800}
  .skr tr.skr-mv .i:empty,.skr tr.skr-mv .u:empty{display:none}
  .skr tr.skr-mv .k,.skr tr.skr-mv .m{display:flex!important;gap:6px;font-size:.8rem;color:var(--muted)}
  .skr tr.skr-mv .k{grid-area:k}.skr tr.skr-mv .m{grid-area:m;justify-self:end}
  .skr tr.skr-cr{display:grid;grid-template-columns:1fr 1fr;gap:3px 12px;padding:9px 12px;margin:0 0 8px}
  .skr tr.skr-cr .n{grid-column:1/-1;font-weight:800}
  .skr tr.skr-cr td.num{display:flex!important;justify-content:space-between;font-size:.82rem}
}

.lnw-master{font-weight:700}.lnw-master input{accent-color:var(--good,#0f8a5f)}

/* resume box (restock wizard): one tidy row per saved work, big no-wrap buttons */
.rs-resume-row{display:flex!important;align-items:center;gap:8px;flex-wrap:nowrap;padding:8px 0;border-top:1px solid color-mix(in srgb,var(--accent) 20%,transparent)}
.rs-resume-row:first-of-type{border-top:0}
.rs-resume-row>span{flex:1 1 0;min-width:0;font-size:.88rem;line-height:1.35;overflow-wrap:anywhere}
.rs-resume-row .btn{flex:none;white-space:nowrap!important;min-height:40px;padding:0 16px;border-radius:12px;font-weight:700}
.rs-resume-row .btn.ghost{min-width:40px;padding:0 10px;background:var(--surface);border:1px solid var(--border)}
.rs-resume-row .btn.primary::before{content:"▶ ";font-size:.7em}

.rs-zero{color:var(--danger,#d92d20);font-weight:400}
.rs-pbtns{display:inline-flex;gap:6px;flex-wrap:wrap}.rs-pin{width:90px;padding:2px 6px}
.rs-dot:is([title^="Perfect"]){font-size:.62rem;letter-spacing:-.02em}

.rs-mv{display:inline-flex;flex-direction:column;gap:2px;margin-right:6px}.rs-mv button{border:1px solid var(--line,#d0d5dd);background:transparent;border-radius:4px;font-size:.62rem;line-height:1;padding:3px 6px;cursor:pointer}.rs-mv button:disabled{opacity:.3;cursor:default}

.rs-find{flex-basis:100%;display:flex;gap:8px;align-items:stretch}.rs-find .search{flex:1;min-width:0}.rs-find .search input{padding-right:38px}
.rs-set{flex:0 0 auto;max-width:42%;background:var(--surface);border:1px solid var(--border);color:var(--ink);border-radius:10px;padding:0 10px;font:inherit;font-weight:600;cursor:pointer}
.rs-qclear{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:26px;height:26px;border:0;border-radius:50%;background:var(--border);color:var(--muted);font-size:.8rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}.rs-qclear:hover{background:var(--faint);color:var(--ink)}.rs-qclear[hidden]{display:none}
.rs-find .search input{border:1.5px solid var(--border-strong);border-radius:12px;padding:11px 40px;font-size:.95rem}.rs-find .search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.rs-find .search svg{left:13px;width:18px;height:18px}.rs-set{border:1.5px solid var(--border-strong);border-radius:999px;padding:0 14px;font-size:.9rem}
.rs-qclear{right:8px;background:var(--surface-2);font-size:.72rem}.rs-qclear:hover{background:var(--border);color:var(--ink)}

.rs-sl{flex:1 1 220px;min-width:200px;display:flex;flex-direction:column;gap:2px}.rs-sl label,.rs-slr{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--muted)}.rs-sl label span,.rs-slr>span{flex:0 0 58px}.rs-sl label b,.rs-slr>b{flex:0 0 66px;text-align:right;color:var(--ink);font-size:.82rem}.rs-sl input[type=range]{flex:1;min-width:0;accent-color:var(--accent);height:22px}
.rs-spck{flex:0 0 auto;display:inline-flex;align-items:center;gap:3px;font-weight:700;color:var(--ink);cursor:pointer}.rs-sl label span{flex:0 0 auto!important;min-width:0}
.rs-recent{flex-basis:100%;display:flex;gap:8px}.rs-recent:empty{display:none}.rs-rc{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:8px;background:var(--surface-2);border-radius:10px;padding:5px 8px}.rs-rc img,.rs-rc .vthumb{width:34px;height:34px;border-radius:6px;object-fit:cover;flex:0 0 auto}.rs-rc .n{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}.rs-rc .n b{font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rs-rc .n small{font-size:.7rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rs-rc .q{font-weight:700;font-size:.9rem;color:var(--accent)}
.modal.rs-wide .modal-foot{flex-wrap:wrap}.rs-recent{order:99}.rs-sl label>span:first-child,.rs-slr>span{min-width:62px}
/* restock footer: ← back at the left edge, history in the middle, next → at the right edge */
.modal.rs-wide .modal-foot{justify-content:space-between;align-items:center}.modal.rs-wide .modal-foot>*{order:3}.modal.rs-wide .modal-foot>[data-rs="back"],.modal.rs-wide .modal-foot>[data-rs="gback"]{order:1}.modal.rs-wide .modal-foot>[data-rs="history"],.modal.rs-wide .modal-foot>[data-rs="discard"]{order:2;margin:0 auto!important}.modal.rs-wide .modal-foot>.rs-recent{order:99}
.rs-drag{flex:0 0 auto;width:26px;align-self:stretch;display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:1.3rem;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}.rs-drag:active{cursor:grabbing;color:var(--accent)}.rs-vrow.dragging{opacity:.85;box-shadow:var(--shadow-lift);position:relative;z-index:3}
.rh-lines>div{display:flex;align-items:center;gap:8px}.rh-im{width:34px;height:34px;border-radius:6px;object-fit:cover;flex:0 0 auto;background:var(--surface-2)}
.rs-item{background:linear-gradient(180deg,var(--surface),var(--surface-2))}
.rs-hist{flex-basis:100%;display:flex;gap:8px;order:100}.rs-hist:empty{display:none}.rs-hist .rs-rc{opacity:.85}.rs-hist .q{color:var(--muted)!important}
.rs-slw{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;padding-top:13px}.rs-slw input[type=range]{width:100%}.rs-ticks{position:absolute;left:0;right:0;top:0;height:13px;pointer-events:none}.rs-ticks>span{position:absolute;transform:translateX(-50%);font-size:.6rem;line-height:13px;color:var(--faint);opacity:.75;white-space:nowrap}
.rs-sl{flex-basis:100%!important;min-width:0!important}.rs-ticks>span[hidden]{display:none}
.rs-sl .rs-slw{flex:1 1 auto!important;min-width:0}

  /* Settings menu (settings.js setupSettingsTiles): tile per section, tap → that section only */
  .set-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin-bottom:20px}
  .set-tiles[hidden],.set-back[hidden]{display:none}
  .set-tile{display:flex;align-items:center;gap:13px;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);padding:16px;cursor:pointer;font:inherit;color:var(--ink);transition:border-color .12s,transform .12s}
  .set-tile:hover{border-color:var(--accent)}.set-tile:active{transform:translateY(1px)}
  .set-tile .st-ic{width:44px;height:44px;flex:none;border-radius:12px;background:var(--accent-soft);display:grid;place-items:center;font-size:1.35rem}
  .set-tile .st-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
  .set-tile .st-t b{font-size:.95rem}.set-tile .st-t small{color:var(--faint);font-size:.74rem}
  .set-tile .st-t em{font-style:normal;color:var(--muted);font-size:.8rem;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .set-tile>i{font-style:normal;color:var(--faint);font-size:1.4rem}
  .set-back{display:flex;align-items:center;gap:12px;margin:-6px 0 14px}.set-back b{font-size:1.02rem}

  /* Customers (settings.js drawCustomers) */
  .cu-kpis .k-val{font-size:1.55rem}.cu-kpis .cu-kv-s{font-size:1.05rem;line-height:1.3}
  .cu-legend{display:flex;gap:8px;align-items:center;font-size:.76rem;color:var(--muted);margin-left:auto;flex-wrap:wrap}
  .cu-table table{width:100%}.cu-table th{cursor:pointer;user-select:none;white-space:nowrap}.cu-table th.on{color:var(--accent)}
  .cu-table td{vertical-align:middle}.cu-table td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
  .cu-who{display:flex;align-items:center;gap:10px;min-width:220px}.cu-who>div{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
  .cu-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px var(--good-soft);flex:none}.cu-dot.off{background:var(--faint);box-shadow:0 0 0 3px var(--surface-2)}
  .cu-name{border:0;background:none;padding:0;font:inherit;font-weight:600;color:var(--ink);cursor:pointer;text-align:left}.cu-name:hover{color:var(--accent)}
  .cu-mail{display:inline-block;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:999px;padding:1px 9px;font-size:.74rem;font-weight:500;border:1px solid}
  .cu-mail.g{background:var(--good-soft);color:var(--good);border-color:color-mix(in srgb,var(--good) 35%,transparent)}
  .cu-mail.e{background:var(--accent-soft);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
  .cu-lvc{white-space:nowrap}.cu-lv{font-weight:600;font-size:.86rem}.cu-lv.lv-vip{color:#b8860b}.cu-lv.lv-plus{color:var(--accent)}
  .cu-pen{border:0;background:none;cursor:pointer;opacity:.45;font-size:.8rem;padding:2px 4px;margin-left:2px}.cu-pen:hover{opacity:1}
  .cu-lvsel{width:auto;padding:4px 8px}
  .cu-cx{color:var(--danger)}.cu-t{color:var(--muted);font-size:.83rem;white-space:nowrap}
  .cu-views{border:1px solid var(--border-strong);background:var(--surface);border-radius:999px;padding:2px 9px;font:inherit;font-size:.8rem;cursor:pointer}.cu-views:hover{border-color:var(--accent)}
  .cu-more{position:relative}.cu-more summary{list-style:none;cursor:pointer;padding:3px 9px;border-radius:8px;font-weight:700;color:var(--muted)}.cu-more summary::-webkit-details-marker{display:none}.cu-more summary:hover{background:var(--surface-2)}
  .cu-more>div{position:absolute;right:0;top:100%;z-index:20;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lift);padding:6px;display:flex;flex-direction:column;min-width:190px}
  .cu-more>div button{border:0;background:none;text-align:left;padding:8px 10px;border-radius:8px;font:inherit;font-size:.86rem;cursor:pointer;color:var(--ink)}.cu-more>div button:hover{background:var(--surface-2)}.cu-more>div button.danger{color:var(--danger)}
  .cu-vlist{display:flex;flex-direction:column;gap:6px}
  .cu-vrow{display:flex;align-items:center;gap:12px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--r-sm)}
  .cu-vrow .pt{width:40px;height:54px;flex:none;border-radius:6px;overflow:hidden;background:var(--surface-2)}.cu-vrow .pt img{width:100%;height:100%;object-fit:cover}
  .cu-vn{flex:1;min-width:0;display:flex;flex-direction:column}.cu-vn a{color:var(--ink);text-decoration:none}.cu-vn a:hover{color:var(--accent)}.cu-vn small{color:var(--muted);font-size:.76rem}
  .cu-vc{text-align:right;white-space:nowrap;font-size:.84rem}.cu-vc small{display:block;color:var(--faint);font-size:.72rem}
  @media(max-width:760px){.cu-legend{margin-left:0}.cu-mail{max-width:170px}}

  /* Sync tab → ประวัติ (lnwsync.js drawSyncHist) */
  .sy-sum{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}.sy-sum div{border:1px solid var(--border);border-radius:12px;padding:8px 14px;background:var(--surface-2);display:flex;flex-direction:column}.sy-sum span{font-size:.74rem;color:var(--muted)}
  .sy-table table{width:100%}.sy-table td{vertical-align:middle;font-size:.84rem}.sy-table td.num,.sy-table th.num{text-align:right;white-space:nowrap}
  .sy-dayr td{background:var(--surface-2);font-weight:700;font-size:.78rem;color:var(--muted);padding:6px 12px}
  .sy-tm{color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
  .sy-it{display:flex;align-items:center;gap:10px;min-width:220px}.sy-it small{display:block;color:var(--muted);font-size:.74rem}
  .sy-im{width:32px;height:44px;flex:none;border-radius:5px;overflow:hidden;background:var(--surface-2)}.sy-im img{width:100%;height:100%;object-fit:cover;display:block}
  .sy-q.up{color:var(--good)}.sy-q.down{color:var(--danger)}.sy-pr{white-space:normal}
  .sy-st small{display:block;color:var(--danger);font-size:.74rem;margin-top:3px}.sy-sh{white-space:nowrap;color:var(--muted)}
  .sy-table tr.bad td{background:color-mix(in srgb,var(--danger) 5%,transparent)}

  /* Products → KPI strip + ภาพรวม (overview.js) */
  .ov{margin-bottom:14px}
  .ov-top{display:flex;gap:12px;align-items:stretch}
  .ov-kpis{flex:1;margin:0;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
  .ov-k{position:relative;padding:12px 14px;gap:3px;overflow:hidden}.ov-k .k-val{font-size:1.35rem}.ov-k .k-sub{font-family:inherit}
  .ov-spark{position:absolute;right:10px;top:12px;width:72px;height:22px}.ov-spark polyline{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.8}
  .ov-tg{align-self:center;white-space:nowrap}
  .ov-body{margin-top:14px}
  .ov-per{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}.ov-per .fh{margin-left:6px}
  .ov-g2{display:grid;grid-template-columns:1.6fr 1fr;gap:16px}.ov-g2>.panel{min-width:0}
  .ov-tab{border:0;background:none;font:inherit;font-size:.95rem;font-weight:700;color:var(--faint);padding:2px 10px 2px 0;cursor:pointer}.ov-tab.on{color:var(--ink)}.ov-tab:hover{color:var(--accent)}
  .ov-seg{display:flex;gap:4px}.ov-seg .ov-tab{font-size:.86rem;padding:4px 12px;border-radius:999px;border:1.5px solid var(--border-strong);background:var(--surface)}.ov-seg .ov-tab.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
  .ov-chart{width:100%;height:200px;display:block;overflow:visible}
  .ov-chart line{stroke:var(--border-strong);stroke-width:1;vector-effect:non-scaling-stroke}
  .ov-chart text{fill:var(--faint);font-size:10px;text-anchor:middle}
  .ov-bar path{fill:var(--accent)}.ov-bar .hit{fill:transparent}.ov-bar:hover path{fill:color-mix(in srgb,var(--accent) 75%,var(--ink))}.ov-bar:hover .hit{fill:var(--surface-2)}
  .ov-tot{font-size:.8rem;color:var(--muted);margin-top:6px}
  .ov-hb{display:grid;grid-template-columns:minmax(90px,1.1fr) 1.4fr 44px 36px;gap:8px;align-items:center;font-size:.82rem;padding:4px 0}
  .ov-hb b{text-align:right;font-variant-numeric:tabular-nums}.ov-hb small{color:var(--faint);text-align:right}
  .ov-tr{height:8px;background:var(--surface-2);border-radius:999px;overflow:hidden}.ov-tr i{display:block;height:100%;background:var(--accent);border-radius:999px}
  .ov-h3{font-size:.84rem;margin:14px 0 4px;color:var(--muted)}
  .ov-map{display:grid;grid-template-columns:minmax(200px,320px) 1fr;gap:20px;align-items:start}
  .ov-svgw svg{width:100%;height:auto;max-height:480px;display:block}
  .ov-svgw path{fill:var(--surface-2);stroke:var(--surface);stroke-width:.6;transition:fill .12s}.ov-svgw path.hl,.ov-svgw path:hover{stroke:var(--ink);stroke-width:1.2}
  .ov-leg{display:flex;align-items:center;gap:6px;font-size:.72rem;color:var(--faint);margin-top:6px}.ov-leg i{flex:0 0 110px;height:8px;border-radius:999px;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 22%,var(--surface)),var(--accent))}
  .ov-attr{font-size:.66rem;color:var(--faint);margin-top:4px}
  .ov-plist{max-height:470px;overflow:auto;font-size:.84rem}
  .ov-ph,.ov-pr{display:grid;grid-template-columns:1fr 70px 90px;gap:8px;padding:6px 4px;position:relative}
  .ov-ph{font-size:.74rem;color:var(--faint);border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface)}
  .ov-ph span:not(:first-child),.ov-pr span:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}
  .ov-pr{border-bottom:1px dashed var(--border);cursor:default}.ov-pr i{position:absolute;left:0;bottom:-1px;height:2px;background:var(--accent);border-radius:2px}.ov-pr.hl{background:var(--accent-soft)}.ov-pr.ov-x{color:var(--muted)}
  .ov-top10{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 16px}
  .ov-ti{display:flex;align-items:center;gap:10px;border:0;background:none;font:inherit;text-align:left;padding:6px;border-radius:10px;cursor:pointer;color:var(--ink);min-width:0}.ov-ti:hover{background:var(--surface-2)}
  .ov-rk{width:20px;text-align:center;font-weight:800;color:var(--faint)}
  .ov-ti .pt{width:36px;height:48px;flex:none;border-radius:6px;overflow:hidden;background:var(--surface-2)}.ov-ti .pt img{width:100%;height:100%;object-fit:cover}
  .ov-tn{flex:1;min-width:0;font-size:.84rem;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.ov-tn small{display:block;color:var(--muted);font-size:.74rem}.ov-tn .out{color:var(--danger);font-weight:500}
  .ov-tv{text-align:right;white-space:nowrap;font-size:.82rem}.ov-tv small{display:block;color:var(--faint);font-size:.72rem}
  #ovStock .two-col{margin-top:0}
  @media(max-width:900px){.ov-g2,.ov-map{grid-template-columns:1fr}.ov-top{flex-direction:column}.ov-tg{align-self:flex-start}.ov-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.ov-top10{grid-template-columns:1fr}.ov-svgw{max-width:340px;margin:0 auto}}

  /* Products filter box = the storefront's (css/extras.css .fb-combo / base.css .searchbox …), scoped to #fbox / .sf-tb */
  #fbox{position:relative;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:8px 18px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:8px 12px;box-shadow:var(--shadow);margin:14px 0 12px}
  #fbox .fb-slip{position:absolute;top:0;right:16px;transform:translateY(-50%);background:var(--surface);border:1px solid var(--border);color:var(--muted);font-size:.72rem;font-weight:700;letter-spacing:.02em;padding:2px 10px 3px;border-radius:999px;line-height:1.25;box-shadow:0 1px 3px rgba(0,0,0,.06);z-index:2;pointer-events:none;white-space:nowrap}
  #fbox .fb-left{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none}
  #fbox .sf-nat{display:grid;grid-template-columns:repeat(3,32px);gap:8px;justify-content:center;align-items:center}
  #fbox .n-circle{width:32px;height:32px;border-radius:50%;padding:0;border:2px solid var(--surface);background:var(--nc);box-shadow:0 0 0 1.5px var(--border-strong),0 2px 4px rgba(0,0,0,.12);cursor:pointer;filter:saturate(1.18);transition:transform .15s cubic-bezier(.2,1.3,.4,1),box-shadow .15s,filter .15s,opacity .15s;position:relative}
  #fbox .n-circle:hover,#fbox .n-circle:focus-visible{transform:scale(1.14);filter:brightness(1.08) saturate(1.25);box-shadow:0 0 0 2.5px var(--nc),0 3px 8px rgba(0,0,0,.2);z-index:1}
  #fbox .n-circle.on{transform:scale(1.15);box-shadow:0 0 0 3.5px var(--nc),0 0 0 5.5px var(--surface),0 3px 10px rgba(0,0,0,.25);z-index:2}
  #fbox .sf-nat:has(.n-circle.on) .n-circle:not(.on):not(:hover){opacity:.85;transform:scale(.96)}
  #fbox .nr-wheel-lbl{font-weight:700;font-size:.76rem;letter-spacing:.02em;color:var(--muted);text-align:center;line-height:1;margin-top:2px}
  #fbox .sf-other{font:inherit;font-size:.72rem;padding:2px 6px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--muted);max-width:112px}
  #fbox .fb-right{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:10px;border-left:1px solid var(--border-strong);padding:0 76px 0 18px;align-self:stretch;justify-content:center}
  #fbox .sf-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
  #fbox .nr-l{flex:none;margin:0 2px 0 0;font-weight:700;font-size:.72rem;letter-spacing:.03em;color:var(--muted)}
  #fbox .fb-sub{font-size:.72rem;font-weight:700;color:var(--muted);white-space:nowrap}
  #fbox .fb-sep{width:1px;align-self:stretch;min-height:26px;background:var(--border-strong);margin:0 4px}
  #fbox .fb-inline{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
  #fbox .gbtn{padding:6px 12px;border-radius:999px;border:1.5px solid var(--border-strong);background:var(--surface);color:var(--ink);font:inherit;font-size:.84rem;cursor:pointer;box-shadow:none;text-shadow:none}
  #fbox .gbtn.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
  #fbox .gbtn[disabled]{opacity:.4;cursor:default}
  #fbox .gbtn.g-dot{width:32px;height:32px;padding:0;display:inline-grid;place-items:center;border-radius:50%;font-weight:700;font-size:.8rem;line-height:1}
  #fbox .gbtn.g-dot.on{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 40%,transparent)}
  #fbox .gbtn.g-dot.gx{color:var(--muted);font-size:.9rem}
  #fbox .gbtn.sf-trig,#fbox .gbtn.sf-order{width:auto;min-width:32px;padding:0 10px;border-radius:999px;font-size:.78rem;font-weight:700}
  #fbox .gbtn.sf-trig{background:color-mix(in srgb,#f2b705 18%,var(--surface));border:1.5px solid color-mix(in srgb,#f2b705 45%,var(--border));color:#8c6000}
  #fbox .gbtn.sf-order{background:color-mix(in srgb,#2f5bff 14%,var(--surface));border:1.5px solid color-mix(in srgb,#2f5bff 38%,var(--border));color:var(--accent)}
  #fbox .gbtn.sf-trig.on{background:#f2b705;border-color:#f2b705;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3);box-shadow:0 0 0 3px color-mix(in srgb,#f2b705 40%,transparent)}
  #fbox .gbtn.sf-order.on{background:#2f5bff;border-color:#2f5bff;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3);box-shadow:0 0 0 3px color-mix(in srgb,#2f5bff 40%,transparent)}
  #fbox select{font:inherit;padding:6px 10px;font-size:.84rem;border-radius:10px;border:1.5px solid var(--border-strong);background:var(--surface);color:var(--ink);max-width:220px;width:auto}
  #fbox .fb-reset{position:absolute;right:12px;bottom:8px;left:auto;margin:0;width:auto;height:auto;border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:999px;padding:3px 10px;font:inherit;font-size:.76rem;font-weight:600;cursor:pointer;z-index:2;box-shadow:var(--shadow);transition:all .15s}
  #fbox .fb-reset[hidden]{display:none}
  #fbox .fb-reset:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
  [data-theme="dark"] #fbox .gbtn.sf-trig{background:color-mix(in srgb,#f2b705 22%,var(--surface));border-color:color-mix(in srgb,#f2b705 50%,var(--border));color:#f6d155}
  [data-theme="dark"] #fbox .gbtn.sf-order{background:color-mix(in srgb,#2f5bff 20%,var(--surface));border-color:color-mix(in srgb,#2f5bff 45%,var(--border));color:#8da9ff}
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #fbox .gbtn.sf-trig{background:color-mix(in srgb,#f2b705 22%,var(--surface));border-color:color-mix(in srgb,#f2b705 50%,var(--border));color:#f6d155}:root:not([data-theme="light"]) #fbox .gbtn.sf-order{background:color-mix(in srgb,#2f5bff 20%,var(--surface));border-color:color-mix(in srgb,#2f5bff 45%,var(--border));color:#8da9ff}}
  @media (max-width:640px){
    #fbox{flex-wrap:wrap;gap:12px;row-gap:12px;padding:10px 10px 38px}
    #fbox .sf-nat{grid-template-columns:repeat(3,30px);gap:6px}#fbox .n-circle,#fbox .gbtn.g-dot{width:30px;height:30px}
    #fbox .fb-right{display:contents}
    #fbox #gradeRow{flex:1 1 0;min-width:0;align-self:center;border-left:1px solid var(--border-strong);padding-left:12px;gap:6px}
    #fbox #setBox{flex:1 1 100%;border-top:1px solid var(--border);padding-top:10px}
    #fbox .fb-sep{display:none}#fbox #setBox select{flex:1 1 0;min-width:0;max-width:none}#fbox #setBox .fb-inline{flex:1 1 100%}
  }
  .sf-tb{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
  .sf-tb .searchbox{position:relative;flex:1 1 260px;min-width:200px;max-width:520px}
  .sf-tb .searchbox svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--faint);pointer-events:none}
  .sf-tb .searchbox input{width:100%;background:var(--surface);border:1.5px solid var(--border-strong);color:var(--ink);padding:11px 40px;border-radius:12px;font:inherit;font-size:.95rem;-webkit-appearance:none;appearance:none}
  .sf-tb .searchbox input::-webkit-search-cancel-button,.sf-tb .searchbox input::-webkit-search-decoration{-webkit-appearance:none;display:none}
  .sf-tb .searchbox input::placeholder{color:var(--faint)}
  .sf-tb .searchbox input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
  .sf-tb .searchbox button{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;border:none;background:var(--surface-2);color:var(--muted);font-size:.72rem;line-height:1;display:grid;place-items:center;padding:0;cursor:pointer}
  .sf-tb .searchbox button[hidden]{display:none}.sf-tb .searchbox button:hover{background:var(--border);color:var(--ink)}
  .sf-tb .sort{margin-left:auto;display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.86rem}
  .sf-tb .sort select{background:var(--surface);border:1px solid var(--border);color:var(--ink);padding:8px 10px;border-radius:10px;font:inherit;font-size:.86rem;width:auto}
  .sf-tb .hide-owned-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;border:1.5px solid var(--border-strong);background:var(--surface);color:var(--ink);font:inherit;font-size:.84rem;cursor:pointer}
  .sf-tb .hide-owned-btn svg{width:17px;height:17px;flex:none}
  .sf-tb .hide-owned-btn[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
  @media (max-width:520px){.sf-tb .searchbox{flex:1 1 100%;max-width:none}.sf-tb .sort{margin-left:0}}

  /* variant photo replace button (📷 banner views) */
  .prow-v .pv-edit{position:relative;padding:0;cursor:pointer;font:inherit}
  .prow-v .pv-edit i{position:absolute;left:0;right:0;bottom:0;font-style:normal;font-size:.7rem;text-align:center;background:rgba(0,0,0,.55);color:#fff;padding:1px 0;opacity:.85}
  .prow-v .pv-edit:hover{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}.prow-v .pv-edit:hover i{opacity:1;background:var(--accent)}

  /* 🔥 ขายดีใกล้หมด tile + modal (overview.js openHotLow) */
  .ov-k.ov-click{cursor:pointer;transition:border-color .12s,transform .12s}.ov-k.ov-click:hover{border-color:var(--warn)}.ov-k.ov-click:active{transform:translateY(1px)}
  .hl-top{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:6px}
  .hl-h{font-size:1rem;margin:16px 0 6px}
  .hl-grp{border:1px solid var(--border);border-radius:var(--r-sm);margin-bottom:8px;overflow:hidden}
  .hl-gh{display:flex;align-items:center;gap:8px;padding:7px 12px;background:var(--surface-2);font-size:.86rem}
  .n-dot{width:12px;height:12px;border-radius:50%;background:var(--nc);flex:none}
  .hl-row{display:flex;align-items:center;gap:12px;padding:7px 12px;border-top:1px solid var(--border)}
  .hl-row .pt{width:36px;height:48px;flex:none;border-radius:6px;overflow:hidden;background:var(--surface-2)}.hl-row .pt img{width:100%;height:100%;object-fit:cover}
  .hl-n{flex:1;min-width:0;display:flex;flex-direction:column;font-size:.86rem}.hl-n small{color:var(--muted);font-size:.74rem}
  .hl-s{white-space:nowrap;font-size:.8rem;color:var(--muted)}.hl-s b{color:var(--ink)}
  @media(max-width:640px){.hl-row{flex-wrap:wrap}.hl-s{order:3}}

  /* variant rows: tap the picture = full size; "📷 เปลี่ยนรูป" beside it (📷 views) */
  .prow-v .pv-zoom{padding:0;cursor:zoom-in;font:inherit}.prow-v .pv-zoom:hover{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
  .prow-v .pv-chg{flex:none;white-space:nowrap}
  /* 📷 views: group heading sticks under the top bar while its rows scroll */
  .prod-list .grp-head{position:sticky;top:var(--topbar-h,100px);z-index:5;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);margin:0 -4px;padding:8px}
  /* floating side bar (copy of the shop's .nation-float), shown once #fbox has scrolled away */
  .pf-float{display:none}
  .pf-float.on{display:flex;flex-direction:column;align-items:center;gap:8px;position:fixed;z-index:30;left:max(8px,calc((100% - var(--maxw))/2 - 50px));top:calc(50% + 40px);transform:translateY(-50%);padding:8px;border-radius:999px;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:saturate(140%) blur(10px);border:1px solid var(--border);box-shadow:0 8px 22px -10px rgba(0,0,0,.4);animation:pfIn .2s ease-out}
  @keyframes pfIn{from{opacity:0;transform:translate(-8px,-50%)}to{opacity:1;transform:translateY(-50%)}}
  @media (max-width:640px){#view-products .prow-wrap{margin-left:16px}#view-products .prow{gap:8px}}   /* left gutter = room for the floating filter bar (same idea as the shop grid) */
  .pf-float .nf-btn{width:30px;height:30px;border-radius:50%;padding:0;cursor:pointer;background:var(--nc);border:2px solid var(--surface);box-shadow:0 0 0 1px var(--border-strong);transition:transform .12s,box-shadow .12s}
  .pf-float .nf-btn:hover{transform:scale(1.1)}.pf-float .nf-btn[aria-pressed="true"]{box-shadow:0 0 0 3px var(--nc);transform:scale(1.12)}
  .pf-float .nf-btn.nf-x{background:var(--surface);color:var(--muted);font-size:.8rem;font-weight:700;line-height:1}
  .pf-float .nf-div{width:22px;height:1px;background:var(--border-strong);margin:1px 0}
  .pf-float .nf-grade{width:30px;height:30px;border-radius:50%;padding:0;cursor:pointer;background:var(--nc,var(--surface));color:var(--ink);border:2px solid var(--surface);box-shadow:0 0 0 1px var(--border-strong);font:inherit;font-size:.7rem;font-weight:700;display:grid;place-items:center;line-height:1;transition:transform .12s,box-shadow .12s}
  .pf-float .nf-grade[style*="--nc"]{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35)}
  .pf-float .nf-grade:hover{transform:scale(1.1)}.pf-float .nf-grade[aria-pressed="true"]{box-shadow:0 0 0 3px var(--nc,var(--accent));transform:scale(1.12)}
  .pf-float .nf-grade[aria-pressed="true"]:not([style*="--nc"]){background:var(--accent);color:#fff}
  .pf-float .fb-tg{width:30px;height:30px;padding:0;justify-content:center;border-radius:50%;gap:0;display:inline-flex;align-items:center;border:1.5px solid var(--border-strong);background:var(--surface);color:var(--ink);font:inherit;font-weight:700;cursor:pointer}
  .pf-float .fb-tg svg{width:15px;height:15px}.pf-float .fb-tg[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
  @media (max-width:640px){.pf-float.on{left:4px;padding:4px;gap:6px}.pf-float .nf-btn,.pf-float .nf-grade,.pf-float .fb-tg{width:24px;height:24px;font-size:.6rem}.pf-float .fb-tg svg{width:13px;height:13px}.pf-float .nf-div{width:16px}}
  /* Products page on phones: tidy header buttons, sparkline under the numbers, one-line photo bar, chips that fit */
  .pf-acts{display:flex;gap:8px;flex-wrap:wrap}
  .ov-spark{position:static!important;display:block;width:100%!important;height:20px!important;margin-top:6px}
  .ov-k .k-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bn-one{display:flex;align-items:center;gap:10px;width:100%;margin:0 0 12px;padding:10px 14px;border-radius:var(--r);border:1px solid color-mix(in srgb,var(--warn) 40%,transparent);background:color-mix(in srgb,var(--warn) 9%,var(--surface));color:var(--ink);font:inherit;font-size:.92rem;text-align:left;cursor:pointer}
  .bn-one:hover{border-color:var(--warn)}.bn-one .bn-ic{font-size:1.1rem}.bn-one .bn-go{margin-left:auto;font-weight:700;color:var(--warn);white-space:nowrap}
  #fbox{padding-bottom:10px}#fbox:has(.fb-reset:not([hidden])){padding-bottom:36px}
  @media (min-width:641px){#fbox:has(.fb-reset:not([hidden])){padding-bottom:8px}}
  @media (max-width:640px){
    .page-head{gap:10px}.pf-acts{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:8px}.pf-acts .btn{justify-content:center;padding:9px 8px;font-size:.86rem}
    .ov-kpis{gap:8px}.ov-k{padding:10px 12px}.ov-k .k-val{font-size:1.2rem}.ov-k .k-label{font-size:.74rem}.ov-k .k-sub{font-size:.72rem}
    .ov-tg{width:100%;justify-content:center}
    #fbox .gbtn.g-dot.sf-trig,#fbox .gbtn.g-dot.sf-order{width:auto;min-width:30px;padding:0 9px;font-size:.74rem}
    #fbox #gradeRow{row-gap:8px}
    .bn-one{font-size:.86rem;padding:9px 12px}
  }
  /* KPI tile names */
  .ov-names{display:block;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
  /* 📉 หมด / ใกล้หมด modal */
  .hl-bar1{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}.hl-bar1 .btn{margin-left:auto}
  .hl-seg{display:flex;gap:6px;flex-wrap:wrap}.hl-seg small{opacity:.7;margin-left:2px}
  .hl-nats{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
  .hl-nc{width:28px;height:28px;border-radius:50%;padding:0;cursor:pointer;background:var(--nc);border:2px solid var(--surface);box-shadow:0 0 0 1.5px var(--border-strong);transition:transform .12s}
  .hl-nc:hover{transform:scale(1.1)}.hl-nc.on{box-shadow:0 0 0 3px var(--nc),0 0 0 5px var(--surface);transform:scale(1.12)}
  .hl-chart{border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 12px 4px;margin-bottom:10px}
  .hl-ch-h{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.84rem;margin-bottom:4px}
  .hl-dist{width:100%;height:auto;display:block}
  .hl-dist line{stroke:var(--border-strong);stroke-width:1}
  .hl-dist text{fill:var(--muted);font-size:11px;text-anchor:middle}.hl-dist text.v{fill:var(--ink);font-weight:700}.hl-dist text.ax{fill:var(--faint);font-size:10px;text-anchor:start}.hl-dist text.ax.r{text-anchor:end}
  .hl-bar{cursor:pointer}.hl-bar path{fill:var(--accent)}.hl-bar .hit{fill:transparent}.hl-bar:hover .hit{fill:var(--surface-2)}.hl-bar.dim path{fill:color-mix(in srgb,var(--accent) 30%,var(--surface))}.hl-bar.on path{fill:color-mix(in srgb,var(--accent) 80%,var(--ink))}
  .hl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
  .hl-tile{position:relative;padding:0;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--surface);cursor:pointer;display:flex;flex-direction:column;font:inherit;color:var(--ink);text-align:left}
  .hl-tile .pt{aspect-ratio:3/4;height:auto!important;background:var(--surface-2)}
  .hl-cap{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:14px 3px 3px;background:linear-gradient(transparent,rgba(0,0,0,.6));pointer-events:none}
  .hl-cap span{background:rgba(0,0,0,.55);color:#fff;font-size:.62rem;font-weight:600;line-height:1;padding:2px 5px;border-radius:999px;white-space:nowrap}
  .hl-cap .hl-took{background:var(--danger)}
  .hl-tile:hover{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
  .hl-tile .pt{display:block;width:100%;height:100%}.hl-tile .pt img{width:100%;height:100%;object-fit:cover;display:block}
  .hl-b{position:absolute;right:3px;bottom:3px;background:var(--danger);color:#fff;font-size:.68rem;line-height:1;padding:3px 6px;border-radius:999px;box-shadow:0 1px 3px rgba(0,0,0,.3)}.hl-b.low{background:var(--warn)}
  .hl-chart{padding:8px 10px 2px}.hl-dist{max-height:130px}.hl-nats{gap:6px;margin-bottom:8px}.hl-nc{width:24px;height:24px}
  .hl-list{border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden}
  .hl-list .hl-row:first-child{border-top:0}
  .hl-rk{width:34px;text-align:center;font-weight:800;color:var(--faint);font-size:.8rem;flex:none}
  .hl-tier{display:inline-block;border-radius:999px;padding:0 7px;font-size:.7rem;font-weight:700;margin-right:4px}
  .hl-tier.t1{background:var(--danger-soft);color:var(--danger)}.hl-tier.t2{background:var(--warn-soft);color:var(--warn)}.hl-tier.t3{background:var(--surface-2);color:var(--muted)}.hl-tier.t4{background:var(--surface-2);color:var(--faint)}
  .hl-li{font-size:.78rem;white-space:nowrap;text-align:right;min-width:92px}.hl-li small{display:block;color:var(--faint);font-size:.7rem}
  /* 👀 visitors modal */
  .vs-sum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:10px}.vs-sum div{border:1px solid var(--border);border-radius:12px;padding:8px 12px;background:var(--surface-2);display:flex;flex-direction:column}.vs-sum span{font-size:.74rem;color:var(--muted)}
  .vs-t{width:100%}.vs-t td{vertical-align:middle;font-size:.84rem}.vs-t td.num,.vs-t th.num{text-align:right}
  .vs-em{display:block;color:var(--faint);font-size:.72rem}.vs-g{color:var(--muted);font-style:italic}
  @media(max-width:640px){.vs-sum{grid-template-columns:repeat(2,minmax(0,1fr))}.hl-li{min-width:0}}
  /* 📦 orders quick view */
  .to-row{display:flex;align-items:center;gap:12px;width:100%;border:0;border-top:1px solid var(--border);background:var(--surface);padding:9px 12px;font:inherit;text-align:left;cursor:pointer;color:var(--ink)}
  .hl-grp .to-row:first-child{border-top:0}.to-row:hover{background:var(--surface-2)}
  .to-row .mono{font-size:.78rem;color:var(--muted);flex:none}.to-c{flex:1;min-width:0;display:flex;flex-direction:column;font-size:.86rem}.to-c small{color:var(--muted);font-size:.74rem}
  .to-t{white-space:nowrap}.to-row i{font-style:normal;color:var(--faint)}

  /* Sync → Shopee status tabs (lnwsync.js chStripHtml / drawChan), same tabs as LnwShop's Shopee channel list */
  .ch-strip{display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--border);padding:4px 0 6px;margin:0 0 12px;position:sticky;top:var(--topbar-h,100px);z-index:6;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px)}   /* 2026-10-28: stays in view while the lists below scroll */.ch-strip::-webkit-scrollbar{display:none}
  .ch-tab{flex:none;border:0;background:none;font:inherit;font-size:.88rem;color:var(--muted);padding:6px 12px;border-radius:8px;cursor:pointer;white-space:nowrap;transition:background-color .15s ease,color .15s ease}
  .ch-tab span{color:var(--faint);font-size:.8rem}.ch-tab .tab-badge,#syncWaitN{color:#fff!important;font-size:.68rem}.ch-tab:hover{color:var(--ink);background:var(--surface-2)}
  .ch-tab.on{color:var(--ink);background:var(--accent-soft);border:none;font-weight:700}
  .ch-tab.on span:not(.tab-badge){color:var(--muted)}
  .ch-tab.bad span:not(.tab-badge){color:var(--danger);font-weight:700}
  .ch-sync{font-size:.76rem;font-weight:600;white-space:nowrap}.ch-sync.on{color:var(--good)}.ch-sync.off{color:var(--faint)}
  .ch-prob{color:var(--danger)!important}.ch-diff{display:block;color:var(--warn);font-size:.72rem}
  .ch-pager{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:10px}
  .lnw-ver{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.84rem;padding:8px 12px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);margin:0 0 10px}
  .lnw-ver.old{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 8%,var(--surface))}.lnw-ver.off{border-color:var(--danger)}
  .lnw-new{color:var(--warn);font-weight:700}.lnw-ver .btn{margin-left:auto}

  /* Sync → ประวัติ: compact one-line rows (lnwsync.js drawSyncHist) + "what was synced" chips */
  .sh-tot{font-size:.82rem;color:var(--muted);margin:0 0 8px}.sh-tot b{color:var(--ink)}
  .sh-list{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface)}
  .sh-day{background:var(--surface-2);font-weight:700;font-size:.74rem;color:var(--muted);padding:4px 10px}
  .sh-row{display:grid;grid-template-columns:26px minmax(0,1fr) auto 52px 22px;align-items:center;gap:8px;padding:5px 10px;border-top:1px solid var(--border);font-size:.84rem}
  .sh-day+.sh-row{border-top:0}.sh-row .sy-im{width:26px;height:36px}
  .sh-row.bad{background:color-mix(in srgb,var(--danger) 6%,transparent)}
  .sh-main{min-width:0}.sh-main b,.sh-main small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sh-main b{font-weight:600}
  .sh-main small{color:var(--muted);font-size:.72rem}.sh-err{color:var(--danger)}
  .sh-what{white-space:nowrap;text-align:right;max-width:150px;overflow:hidden;text-overflow:ellipsis}.sh-sum{font-size:.74rem;color:var(--muted)}
  .sh-lnw{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
  .sh-res{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;font-size:.7rem;font-weight:800}
  .sh-res.ok{background:color-mix(in srgb,var(--good) 15%,transparent);color:var(--good)}.sh-res.bad{background:color-mix(in srgb,var(--danger) 15%,transparent);color:var(--danger)}
  .sh-res.pull{background:var(--surface-2);color:var(--muted)}
  @media (max-width:600px){.sh-row{gap:6px;padding:5px 8px}.sh-what{max-width:90px}}
  /* editor: pick the cover from a variant photo (editor.js openCoverPicker) */
  .cv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
  .cv-it{border:2px solid var(--border);border-radius:10px;padding:4px;background:var(--surface);cursor:pointer;font:inherit;text-align:center}
  .cv-it:hover{border-color:var(--accent)}.cv-it.on{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent)}
  .cv-it img{width:100%;aspect-ratio:5/7;object-fit:cover;border-radius:6px;display:block}.cv-it small{display:block;font-size:.72rem;color:var(--muted);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* Sync → Shopee status tabs: one compact row per PRODUCT; problem variants listed under it (lnwsync.js drawChan) */
  .ch-row{grid-template-columns:26px minmax(0,1fr) auto auto;align-items:start}.ch-row .sy-im{margin-top:2px}
  .ch-row>.pill,.ch-row>.btn{margin-top:4px}.ch-pill{font-size:.72rem;white-space:nowrap}
  .ch-pv{display:flex!important;align-items:center;gap:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted);font-size:.72rem;margin-top:1px}
  .ch-pv b{color:var(--ink);font-weight:600}.ch-dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--faint)}
  .ch-dot.danger{background:var(--danger)}.ch-dot.warn{background:var(--warn)}.ch-dot.good{background:var(--good)}
  @media (max-width:600px){.ch-row .btn.xs{padding:2px 6px;font-size:.7rem}}
  .ch-pvs{grid-column:2/-1;display:block;margin-top:-2px}.ch-pvs .ch-pv{white-space:normal;align-items:flex-start;line-height:1.35}.ch-pvs .ch-dot{margin-top:5px}
  .ch-pvs .ch-pv{display:block!important}.ch-pvs .ch-dot{display:inline-block;margin:0 5px 0 0;vertical-align:1px}
  .ch-row{grid-template-columns:40px minmax(0,1fr) auto auto}.ch-row .sy-im{width:40px;height:56px;margin-top:0}

  /* Sync → 📥 อัปเดตสินค้าจาก LnwShop (lnwsync.js lnwInDraw) */
  .lin{border:1px solid var(--border);border-radius:12px;background:var(--surface);margin:0 0 10px;overflow:hidden}
  .lin-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px;font-size:.86rem}.lin-h .fh{flex:1;min-width:180px;font-size:.78rem}
  .lin-s{border-top:1px solid var(--border)}.lin-t{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:space-between;padding:6px 12px;font-size:.8rem;font-weight:700;background:var(--surface-2)}
  .lin-t span{display:flex;gap:6px}
  .lin-r{display:grid;grid-template-columns:30px minmax(0,1fr);grid-auto-flow:column;grid-auto-columns:auto;gap:8px;align-items:center;padding:5px 12px;border-top:1px solid var(--border);font-size:.84rem}
  .lin-r .sy-im{width:30px;height:42px}
  /* 2026-10-15: photo fills its cell (whole row height) and opens full size; problem variants sit under the name */
  .ch-row{grid-template-columns:52px minmax(0,1fr) auto auto;align-items:stretch;padding:6px 10px}
  .ch-row .ch-im{width:52px;height:auto;min-height:72px;align-self:stretch;border-radius:6px;margin:0}
  .ch-row .ch-im img{width:100%;height:100%;object-fit:cover;cursor:zoom-in;display:block}
  .ch-row>.pill,.ch-row>.btn,.ch-row>span:last-child{align-self:start;margin-top:2px}
  .ch-row .sh-main .ch-pv{display:block!important;white-space:normal;line-height:1.35;margin-top:2px}
  .ch-row .sh-main .ch-dot{display:inline-block;margin:0 5px 0 0;vertical-align:1px}
  .ch-row .sh-main .ch-pv b{display:inline;overflow:visible;white-space:normal}

  /* Sync strip: รอ Sync / ประวัติ after หยุด Sync; history direction tag */
  .ch-sep{flex:none;width:1px;height:20px;background:var(--border);margin:0 4px}
  .sh-dir{display:inline-block;font-size:.66rem;font-weight:700;border-radius:999px;padding:1px 6px;margin-right:5px;vertical-align:1px}
  .sh-dir.out{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}.sh-dir.in{background:color-mix(in srgb,var(--good) 14%,transparent);color:var(--good)}
  #lpRoot:empty{display:none}#lpRoot{margin:0 0 10px}.lp-head{font-weight:700;font-size:.86rem;margin:0 0 4px}
  .sh-what{max-width:220px}@media (max-width:600px){.sh-what{max-width:130px}.sh-dir{padding:1px 4px}}
  /* order-issue boxes: value of the problem cards (chat.js issueVal) */
  .iv-v{flex:none;font-weight:700;font-size:.8rem;color:var(--ink);white-space:nowrap}.iv-u{color:var(--muted);font-size:.7rem;white-space:nowrap}
  .iv-tot{display:flex;align-items:center;justify-content:flex-end;gap:6px;font-size:.84rem;padding:4px 2px 0;color:var(--muted)}.iv-tot b{color:var(--danger,#ef4444);font-size:.92rem}.iv-tot small{font-size:.7rem}

  /* sync history 2026-10-16: full text (no cut), links to the shop + LnwShop */
  .sh-row{grid-template-columns:26px minmax(0,1fr) auto auto 52px 22px}
  .sh-row .sh-main small{white-space:normal;overflow:visible}.sh-full{color:var(--ink)!important;font-size:.76rem!important}
  .sh-links{display:flex;gap:4px}.sh-links .btn.xs{padding:2px 7px;font-size:.72rem;text-decoration:none}
  .sh-what{max-width:none;white-space:nowrap}.sh-what .sh-sum{display:none}
  @media (max-width:600px){.sh-row{grid-template-columns:26px minmax(0,1fr) auto 22px}.sh-row .sh-lnw,.sh-row .sh-links{grid-column:2;justify-self:start}}
  /* 2026-10-16: the detail (summary) sits next to its icon again, in full (wraps, never cut) */
  .sh-what{white-space:normal;max-width:340px;text-align:right}.sh-what .sh-sum{display:inline;font-size:.78rem;color:var(--ink)}
  @media (max-width:600px){.sh-what{max-width:none;text-align:left;grid-column:2}}

  /* editor: yes / no segmented switch (เป็นการ์ดออเดอร์ไหม) */
  .yn-seg{display:inline-flex;border:1px solid var(--border);border-radius:10px;overflow:hidden}
  .yn-seg button{border:0;background:var(--surface);font:inherit;font-size:.86rem;padding:6px 18px;cursor:pointer;color:var(--muted)}
  .yn-seg button+button{border-left:1px solid var(--border)}
  .yn-seg button.on{background:var(--accent);color:#fff;font-weight:700}

  /* editor 2026-10-16: order yes/no in a blue frame with two pills; type lock icon; name preview; nation-tinted category box; sync dot */
  .order-field{border:1.5px solid #3b82f6;border-radius:12px;padding:10px 12px;background:color-mix(in srgb,#3b82f6 7%,var(--surface))}
  .order-field .yn-seg{display:inline-flex;width:auto;border:0;gap:8px;overflow:visible}
  .order-field .yn-seg button{flex:none;width:auto;border:1.5px solid color-mix(in srgb,#3b82f6 45%,var(--border));border-radius:999px;padding:5px 20px;background:var(--surface);color:var(--ink)}
  .order-field .yn-seg button+button{border-left:1.5px solid color-mix(in srgb,#3b82f6 45%,var(--border))}
  .order-field .yn-seg button.on{background:#3b82f6;border-color:#3b82f6;color:#fff}
  .type-row{display:flex;align-items:center;gap:10px}.type-lock{font-size:1.05rem;cursor:help}
  .name-prev{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:6px;padding:7px 10px;border-radius:9px;background:var(--surface-2);font-size:.86rem}
  .name-prev .np-l{color:var(--muted);font-size:.76rem}.name-prev b{flex:1;min-width:0;overflow-wrap:anywhere}.name-prev .fh{margin-left:auto}
  .sticky-save>.sec.nat-tint{background:color-mix(in srgb,var(--nt) 9%,var(--surface));border-color:color-mix(in srgb,var(--nt) 35%,var(--border))}
  .sticky-save>.sec.nat-tint .sec-head{background:color-mix(in srgb,var(--nt) 14%,transparent)}
  .sync-dot{display:inline-flex;align-items:center;gap:5px;margin-left:10px;font-size:.76rem;font-weight:600;color:var(--muted);vertical-align:2px;cursor:help}
  .sync-dot i{width:10px;height:10px;border-radius:50%;display:inline-block}
  .sync-dot.g i{background:#10b981}.sync-dot.y i{background:#f59e0b}.sync-dot.r i{background:#ef4444}

  /* editor save buttons: grey and off while nothing changed (editor.js edDirtyCheck) */
  #edSave:disabled,#edSave2:disabled,#edSave3:disabled{background:var(--surface-2)!important;color:var(--faint)!important;border-color:var(--border)!important;box-shadow:none!important;cursor:not-allowed;opacity:1}
  /* 2026-10-16: order field in navy (not the blue nation colour); nation tint strength per nation (--ntp / --nth, stronger for grey) */
  .sticky-save>.sec.nat-tint{background:color-mix(in srgb,var(--nt) var(--ntp,9%),var(--surface))}.sticky-save>.sec.nat-tint .sec-head{background:color-mix(in srgb,var(--nt) var(--nth,14%),transparent)}
  .order-field{border-color:#1e3a8a;background:color-mix(in srgb,#1e3a8a 9%,var(--surface))}.order-field>label{color:#1e3a8a;font-weight:700}
  .order-field .yn-seg button,.order-field .yn-seg button+button{border-color:color-mix(in srgb,#1e3a8a 55%,var(--border))}
  .order-field .yn-seg button.on{background:#1e3a8a;border-color:#1e3a8a;color:#fff}
  [data-theme="dark"] .order-field>label{color:#93b4ff}

  /* editor save animation: spinner while saving, then a green "✓ บันทึกแล้ว" pop (editor.js edMarkClean / ED_SAVED) */
  #edSave.is-saving,#edSave2.is-saving{position:relative;padding-left:34px!important;background:var(--accent)!important;color:#fff!important;opacity:.9}
  #edSave.is-saving::before,#edSave2.is-saving::before{content:"";position:absolute;left:12px;top:50%;width:14px;height:14px;margin-top:-7px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:svSpin .7s linear infinite}
  @keyframes svSpin{to{transform:rotate(360deg)}}
  #edSave.saved-pop,#edSave2.saved-pop,#edSave3.saved-pop{background:#10b981!important;border-color:#10b981!important;color:#fff!important;animation:svPop .45s cubic-bezier(.2,1.6,.4,1),svGlow 1.2s ease-out .2s}
  .sv-check{display:inline-block;font-weight:800;animation:svTick .5s cubic-bezier(.2,1.8,.4,1) both}
  @keyframes svPop{0%{transform:scale(.92)}60%{transform:scale(1.06)}100%{transform:scale(1)}}
  @keyframes svGlow{0%{box-shadow:0 0 0 0 rgba(16,185,129,.55)}100%{box-shadow:0 0 0 12px rgba(16,185,129,0)}}
  @keyframes svTick{0%{transform:scale(0) rotate(-30deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
  @media (prefers-reduced-motion:reduce){#edSave.is-saving::before,#edSave2.is-saving::before{animation:none}#edSave.saved-pop,#edSave2.saved-pop,.sv-check{animation:none}}

  /* 💡 price advice under the product name (editor.js renderPriceAdvice) */
  .pa-box{margin-top:8px;border:1px solid var(--border);border-radius:10px;padding:8px 10px;background:var(--surface);font-size:.84rem}
  .pa-h{font-weight:700;margin-bottom:4px}.pa-h .fh{font-weight:400;margin-left:4px}
  .pa-r{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:2px 10px;padding:5px 0;border-top:1px dashed var(--border)}
  .pa-r .pa-n{font-weight:600;min-width:0;overflow-wrap:anywhere}.pa-r .pa-p{white-space:nowrap;font-variant-numeric:tabular-nums}
  .pa-r small{grid-column:1/3;color:var(--muted);font-size:.74rem}.pa-r .btn{grid-row:1/3;grid-column:3}
  .pa-r .up{color:#047857}.pa-r .down{color:#b45309}.pa-r.ch{background:color-mix(in srgb,#f59e0b 6%,transparent)}

  /* editor 2026-10-17: nation circles, grade 4-0 (+ Trigger?), bigger variant photos, save icon, product sync history rows */
  .pk-hidden{display:none!important}
  .nat-pick{display:flex;flex-wrap:wrap;gap:8px}
  .nat-dot{display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:none;padding:2px;cursor:pointer;font:inherit;font-size:.7rem;color:var(--muted);min-width:42px}
  .nat-dot i{width:30px;height:30px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 2px rgba(255,255,255,.6),0 1px 3px rgba(0,0,0,.18);transition:transform .15s}
  .nat-dot:hover i{transform:scale(1.08)}.nat-dot.on i{box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--c)}.nat-dot.on{color:var(--ink);font-weight:700}
  .pk-pill{border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:4px 12px;font:inherit;font-size:.78rem;cursor:pointer;color:var(--muted)}
  .pk-pill.on{background:var(--ink);color:var(--surface);border-color:var(--ink)}
  .gr-pick{display:flex;flex-direction:column;gap:8px}.gr-row{display:flex;flex-wrap:wrap;gap:6px}
  .gr-btn{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--border);background:var(--surface);font:inherit;font-weight:800;font-size:1rem;cursor:pointer;color:var(--ink)}
  .gr-btn.on{background:var(--ink);color:var(--surface);border-color:var(--ink)}
  .gr-trig{display:flex;align-items:center;gap:6px;font-size:.82rem}.gr-trig button{border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:3px 14px;font:inherit;font-size:.8rem;cursor:pointer}
  .gr-trig button.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
  .vtable .vthumb{width:46px!important;height:64px!important;object-fit:cover;border-radius:5px}.vtable td.v-img,.vtable th.c-img{width:58px}
  .ed-savebtn{display:inline-flex;align-items:center;justify-content:center;gap:6px}
  .ph-list{display:flex;flex-direction:column;gap:0;border:1px solid var(--border);border-radius:10px;overflow:hidden}
  .ph-row{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-top:1px solid var(--border);font-size:.82rem}.ph-row:first-child{border-top:0}
  .ph-row.bad{background:color-mix(in srgb,var(--danger) 6%,transparent)}
  .ph-k{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--surface-2)}
  .ph-m{flex:1;min-width:0}.ph-top{display:flex;align-items:center;gap:8px;justify-content:space-between}.ph-top b{font-weight:600;overflow-wrap:anywhere}
  .ph-m small{display:block;color:var(--muted);font-size:.72rem;margin-top:2px}
  .ph-dir{flex:none;font-size:.64rem;font-weight:700;border-radius:999px;padding:1px 6px}.ph-dir.out{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}.ph-dir.in{background:color-mix(in srgb,var(--good) 14%,transparent);color:var(--good)}

  /* 🔥 promo button before the price (editor.js openPromo) */
  .vp-wrap{display:flex;align-items:center;gap:6px}.vp-wrap input{flex:1;min-width:0}
  .promo-btn{flex:none;width:30px;height:30px;border-radius:8px;border:1px solid var(--border);background:var(--surface);cursor:pointer;font-size:.95rem;filter:grayscale(1);opacity:.55;transition:all .15s}
  .promo-btn:hover{filter:none;opacity:1}.promo-btn.on{filter:none;opacity:1;background:color-mix(in srgb,#ef4444 12%,var(--surface));border-color:#ef4444}
  .promo-note{display:block;color:#dc2626;font-size:.7rem;font-weight:600;margin-top:2px;white-space:nowrap}
  .pr-quick{display:flex;gap:6px;margin-top:6px}

  /* 2026-10-17 phone fixes: name preview stacks, price advice stacks, variant card = name + SKU on top, price (with 🔥) where SKU was */
  .name-prev{display:grid;grid-template-columns:1fr auto;gap:2px 8px}.name-prev .np-l{grid-column:1}.name-prev .fh{grid-column:2;grid-row:1}.name-prev b{grid-column:1/-1}
  @media (max-width:640px){
    .pa-r{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n n" "p b" "w w"}
    .pa-r .pa-n{grid-area:n}.pa-r .pa-p{grid-area:p}.pa-r small{grid-area:w;grid-column:auto}.pa-r .btn{grid-area:b;grid-row:auto;grid-column:auto}
    .vtable.vfixed tr{grid-template-areas:"img key key key sku sku" "img price price stock pkg eye"!important}
    .vtable.vfixed tr:not(:has(.v-img)){grid-template-areas:"key key key key sku sku" "price price price stock pkg eye"!important}
    .vtable.vfixed .v-sku{text-align:right!important;margin-top:0}
    .vtable.vfixed .v-price{margin-top:0}.vtable.vfixed td.v-price::before{display:none!important}
    .vtable.vfixed .v-price .vp-wrap{gap:4px}.vtable.vfixed .v-price input{height:34px;max-width:96px}
    .vtable.vfixed .v-price .promo-btn{width:30px;height:30px}
    .vtable.vfixed .v-img .vthumb{width:44px!important;height:60px!important}
  }
  @media (max-width:640px){
    .name-row{flex-direction:column;align-items:stretch}.name-row>.field{width:100%;flex:none}.name-row .sku-field{max-width:200px}
    .vtable.vfixed tr{grid-template-columns:48px repeat(6,minmax(0,1fr))!important;grid-template-areas:"img key key key key sku sku" "img price price price stock pkg eye"!important}
    .vtable.vfixed tr:not(:has(.v-img)){grid-template-columns:repeat(6,minmax(0,1fr))!important;grid-template-areas:"key key key key sku sku" "price price price stock pkg eye"!important}
    .vtable.vfixed .v-price input{max-width:none}
  }
  /* product type buttons: one shirt = single, stacked shirts = has variants */
  #typeSeg button{display:inline-flex;align-items:center;gap:7px}#typeSeg .ts-ico{width:18px;height:20px;flex:none}#typeSeg .ts-ico.many{width:26px}

  /* 2026-10-17: shirt icons (filled with the button colour so stacked tees overlap cleanly), box icon, grey ticket promo button, yellow Trigger box, wider desktop price */
  #typeSeg .ts-ico{width:20px;height:20px}#typeSeg .ts-ico.many{width:26px;height:24px}
  #typeSeg .ts-ico .tf{fill:var(--surface-2)}#typeSeg button[aria-pressed="true"] .ts-ico .tf{fill:var(--accent)}
  .pkg-btn .pkg-ico{width:18px;height:18px;color:var(--muted);display:block;margin:auto}
  .promo-btn{font-size:1rem;filter:grayscale(1);opacity:.7}.promo-btn.on{filter:none;opacity:1}
  .gr-trig{border:1.5px solid #ca8a04;border-radius:12px;padding:8px 12px;background:color-mix(in srgb,#eab308 10%,var(--surface));align-self:flex-start}
  .gr-trig>span{font-weight:700;color:#854d0e}
  .gr-trig button{border:1.5px solid color-mix(in srgb,#ca8a04 55%,var(--border));padding:4px 18px}
  .gr-trig button.on{background:#ca8a04;border-color:#ca8a04;color:#fff}
  @media (min-width:641px){.vtable.vfixed .c-num{width:170px}}

  /* 2026-10-17: pencil (special price) beside the stock box, SKU away from the photo, T circle, PG framed, no option-panel frame, variant table without side borders */
  .pkg-acts{display:inline-flex;gap:4px;align-items:center;justify-content:center}
  .promo-btn{filter:none;opacity:1;display:grid;place-items:center;color:var(--muted);width:30px;height:30px}.promo-btn .pen-ico{width:16px;height:16px}
  .promo-btn:hover{color:var(--ink)}.promo-btn.on{color:#dc2626;border-color:#dc2626;background:color-mix(in srgb,#dc2626 9%,var(--surface))}
  .vtable.vfixed .c-pkg{width:80px}
  @media (min-width:641px){.vtable.vfixed th.c-sku,.vtable.vfixed td.v-sku{padding-left:20px}}
  .gr-btn.gr-t{background:#facc15;border-color:#ca8a04;color:#713f12}.gr-btn.gr-t.on{background:#ca8a04;border-color:#ca8a04;color:#fff;box-shadow:0 0 0 3px var(--surface),0 0 0 5px #ca8a04}
  #ed-variants .opt-panel{border:0!important;background:none!important;padding:0!important;box-shadow:none!important}
  #ed-vtable .table-wrap{border-left:0;border-right:0;border-radius:0}

  /* unit = round choices (editor.js unitPicker) */
  .unit-pick{display:flex;gap:8px;flex-wrap:wrap}
  .unit-dot{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--border);background:var(--surface);font:inherit;font-weight:700;font-size:.86rem;cursor:pointer;color:var(--ink)}
  .unit-dot.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink,#fff);box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--accent)}

  /* 2026-10-17: smaller square unit choices; no number spinners in the variant table; blue stock numbers; editable variant name */
  .unit-pick{gap:6px}.unit-dot{width:auto;min-width:40px;height:32px;padding:0 10px;border-radius:7px;font-size:.8rem;font-weight:600}
  .unit-dot.on{box-shadow:none}
  .vtable input[type=number]{-moz-appearance:textfield;appearance:textfield}
  .vtable input[type=number]::-webkit-outer-spin-button,.vtable input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
  .vtable .v-stock .vstock{color:var(--accent);font-weight:800}
  .vtable .vkey-in{font-weight:600;width:100%;min-width:0}
  /* 2026-10-17 phone: box + pencil the same size, plain stock number, normal-weight variant name */
  .vtable .vkey-in{font-weight:400}
  @media (max-width:640px){
    .vtable.vfixed .pkg-btn,.vtable.vfixed .promo-btn{width:32px!important;height:32px!important;padding:0!important;border:1px solid var(--border)!important;border-radius:8px!important;display:grid!important;place-items:center;background:var(--surface)}
    .vtable.vfixed .pkg-btn .pkg-ico,.vtable.vfixed .promo-btn .pen-ico{width:16px;height:16px}
    .vtable.vfixed .v-stock .vstock{background:none!important;border:0!important;padding:0!important;min-width:0!important;border-radius:0!important}
    .vtable.vfixed .v-key{font-weight:400!important}
  }
  /* 2026-10-17 phone: the stock/pencil column fits both 32 px buttons (the box button was squeezed to 2 px) */
  @media (max-width:640px){
    .vtable.vfixed tr{grid-template-columns:46px minmax(0,1fr) 34px 72px 36px!important;grid-template-areas:"img key key sku sku" "img price stock pkg eye"!important}
    .vtable.vfixed tr:not(:has(.v-img)){grid-template-columns:minmax(0,1fr) 34px 72px 36px!important;grid-template-areas:"key key sku sku" "price stock pkg eye"!important}
    .vtable.vfixed .pkg-acts{gap:6px}.vtable.vfixed .pkg-btn,.vtable.vfixed .promo-btn{flex:none}
  }
  /* 2026-10-17 phone: 👁 sits in front of the price */
  @media (max-width:640px){
    .vtable.vfixed tr{grid-template-columns:46px 36px minmax(0,1fr) 34px 72px!important;grid-template-areas:"img key key sku sku" "img eye price stock pkg"!important}
    .vtable.vfixed tr:not(:has(.v-img)){grid-template-columns:36px minmax(0,1fr) 34px 72px!important;grid-template-areas:"key key sku sku" "eye price stock pkg"!important}
    .vtable.vfixed .v-eye{text-align:left!important}
  }
  @media (max-width:640px){
    .vtable.vfixed tr{grid-template-columns:46px 32px minmax(0,1fr) 26px 70px!important}
    .vtable.vfixed tr:not(:has(.v-img)){grid-template-columns:32px minmax(0,1fr) 26px 70px!important}
    .vtable.vfixed .v-eye .eye-btn{width:32px;height:32px}
  }
  .vtable .vthumb[data-vzoom]{cursor:zoom-in}

  /* 2026-10-17: shipping one-liner + pencil; phone: stock tiles 3 + 2, no "save and add", floating action bar */
  .ship-line{display:flex;align-items:center;gap:10px;font-size:.88rem;color:var(--ink)}.ship-line span{flex:1;min-width:0}.ship-line[hidden]{display:none}
  .ship-line .promo-btn{flex:none}
  @media (max-width:640px){
    #ed-stock .stock-tiles{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:8px}
    #ed-stock .stock-tiles>.stile{grid-column:span 2;min-width:0}
    #ed-stock .stock-tiles>.stile:nth-child(n+4){grid-column:span 3}
    #ed-stock .stile .st-sub{display:none}
    #edSaveMore{display:none!important}
    #view-editor .ed-actions{position:fixed!important;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));top:auto!important;margin:0!important;width:auto;max-width:none;z-index:60;justify-content:flex-end;
      background:color-mix(in srgb,var(--surface) 94%,transparent);border:1px solid var(--border);box-shadow:0 10px 28px -8px rgba(0,0,0,.35);padding:8px}
    #view-editor{padding-bottom:84px}
  }

  /* 2026-10-17: on computers the tab list is a left sidebar (phones / tablets keep the top row). The top bar's blur would trap a
     fixed child, so it is switched off here; the sidebar starts under the bar via padding. */
  @media (min-width:1000px){
    .topbar{backdrop-filter:none;background:var(--surface)}
    .tabs{position:fixed;left:0;top:0;bottom:0;width:196px;z-index:19;display:flex;flex-direction:column;gap:2px;margin:0;max-width:none;overflow-y:auto;
      padding:calc(var(--tbar-h,64px) + 14px) 10px 20px;background:var(--surface);border-right:1px solid var(--border)}
    .tabs button{text-align:left;border-bottom:0;margin:0;border-radius:9px;padding:10px 12px;display:flex;align-items:center;gap:8px;border-left:3px solid transparent}
    .tabs button:hover{background:var(--surface-2)}
    .tabs button[aria-current="true"]{border-left-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--ink)}
    .tabs .tab-badge{margin-left:auto}
    .topbar-in{max-width:none;padding-left:216px}
    main{margin:0 0 0 196px;max-width:none;padding:22px 28px 70px}
    main>div{max-width:var(--maxw);margin-left:auto;margin-right:auto}
  }
  /* 2026-10-17: Shopee-status rows keep their own 52 px photo column (a later .sh-row rule for the history list had shrunk it to 26 px → text over the photo) */
  .sh-row.ch-row{grid-template-columns:52px minmax(0,1fr) auto!important}
  @media (max-width:600px){.sh-row.ch-row{grid-template-columns:44px minmax(0,1fr) auto!important;gap:8px;padding:8px}.sh-row.ch-row .ch-im{width:44px}.ch-pill{font-size:.7rem;padding:2px 8px;white-space:nowrap}.ch-strip .ch-tab{padding:8px 9px;font-size:.82rem}}
  .sh-row.ch-row .ch-im{width:52px}

  /* ประวัติ — one day: date bar + search; rows without the shop / LnwShop buttons (2026-10-17) */
  .hd-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 10px}
  .hd-bar input[type=date]{height:34px;border:1px solid var(--border);border-radius:9px;padding:0 10px;font:inherit;background:var(--surface);color:var(--ink)}
  .hd-bar .hd-q{flex:1;min-width:200px;max-width:420px;margin-left:auto}
  /* 2026-10-18: day picker = date button + Thai month calendar (hdCal in lnwsync.js) */
  .hd-date{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--ink);font:inherit;font-weight:600;cursor:pointer}.hd-date svg{width:16px;height:16px;color:var(--accent)}.hd-date:hover{border-color:var(--accent)}
  .hd-cal{position:absolute;z-index:30;width:284px;max-width:calc(100vw - 32px);background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.16);padding:10px}
  .hd-cal-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.hd-cal-h b{font-size:.95rem}
  .hd-cal-h button,.hd-cal-f button{border:0;background:var(--surface-2);color:var(--ink);border-radius:8px;min-width:32px;height:32px;font:inherit;font-weight:700;cursor:pointer}.hd-cal-h button:disabled{opacity:.35;cursor:default}
  .hd-cal-w,.hd-cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}.hd-cal-w span{font-size:.72rem;color:var(--muted);padding:4px 0}
  .hd-cal-g button{aspect-ratio:1;border:0;border-radius:50%;background:none;color:var(--ink);font:inherit;font-size:.86rem;cursor:pointer}
  .hd-cal-g button:hover:not(:disabled){background:color-mix(in srgb,var(--accent) 12%,transparent)}
  .hd-cal-g button.today{box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent);font-weight:700}.hd-cal-g button.on{background:var(--accent);color:#fff;font-weight:700}
  .hd-cal-g button:disabled{color:var(--faint);opacity:.5;cursor:default}.hd-cal-f{margin-top:6px;text-align:right}.hd-cal-f button{padding:0 12px;color:var(--accent)}
  /* Shopee order no.: orange dot + ตรวจสอบ beside it; codes copy on tap (data-cp) */
  .lo-link{display:inline-flex;align-items:center;gap:4px;text-decoration:none;cursor:pointer}.lo-link span{font-size:.8em;opacity:.7}
  .lo-sn{display:inline-block;margin-top:5px;padding:2px 9px;border:1.5px solid #ee4d2d;border-radius:999px;color:#ee4d2d;background:color-mix(in srgb,#ee4d2d 8%,transparent);font-family:var(--f-mono);font-size:.74rem;font-weight:700;white-space:nowrap}
  .lo-t .ord-items-t{display:none}
  @media (max-width:760px){   /* Shopee orders on phones: one compact card per order */
    .lo-t tr{display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:8px 10px;padding:10px 12px!important}
    .lo-t td{display:block!important;padding:0!important;text-align:left!important}.lo-t td::before{display:none!important}
    .lo-t .lo-c1{grid-column:1}.lo-t .lo-c1 .ord-sub{margin-top:3px}.lo-t .lo-stc{grid-column:2;grid-row:1;text-align:right!important}
    .lo-t .lo-th,.lo-t .lo-items{grid-column:1/-1}.lo-t .lo-items{font-size:.82rem;line-height:1.45}
    .lo-t .ord-total{grid-column:1/-1;display:flex!important;justify-content:flex-end;align-items:baseline;gap:8px;border-top:1px dashed var(--border)!important;padding-top:7px!important}.lo-t .ord-total small{display:inline}
  }
  [data-cp],.vsku-txt:not(.pending){cursor:copy}[data-cp]:hover{text-decoration:underline dotted}.cp-done{color:var(--good)!important}
  /* 2026-10-18: row = big direction arrow (no circle) · changed qty (bigger) · photo · name · summary · LnwShop before→after */
  .sh-row.hd-row{grid-template-columns:20px 40px 26px minmax(0,1fr) auto 52px}
  .hd-arr{font-size:1.3rem;font-weight:800;line-height:1;text-align:center}.hd-arr.in{color:var(--good)}.hd-arr.out{color:var(--accent)}.hd-arr.bad{color:var(--danger)}
  .hd-q{text-align:right;font-size:1.1rem;font-weight:800;line-height:1;white-space:nowrap}
  @media (max-width:600px){.hd-bar .hd-q{margin-left:0;max-width:none;flex-basis:100%}.sh-row.hd-row{grid-template-columns:18px 34px 26px minmax(0,1fr) auto 44px}
    /* phones: SKU / order no. hidden; LnwShop before→after stays at the right end of the first line, a price etc. summary goes under the name */
    .hd-mh{display:none}.sh-row.hd-row .sh-lnw{grid-column:6;grid-row:1;justify-self:end}.sh-row.hd-row .sh-what{grid-column:4/6;grid-row:2;text-align:left}.sh-row.hd-row .sh-what:empty{display:none}}

  /* 2026-10-17: variant-table package / eye buttons 30×30; Shopee button; restock history boxes per ชุด */
  #ed-vtable .v-pkg .pkg-btn,#ed-vtable .v-eye .eye-btn{width:30px!important;height:30px!important;min-width:30px;padding:0!important;box-sizing:border-box}
  .ed-shopee{display:inline-flex;align-items:center;justify-content:center;text-align:center;gap:6px;text-decoration:none;color:#EE4D2D!important;border-color:#f6b4a6!important}.ed-shopee:hover{background:#fff1ee}.shp-logo{width:18px;height:18px;flex:none}
  .rh-grp{border:1px solid var(--border);border-radius:12px;background:var(--surface-2);margin-bottom:6px;padding:8px 12px}.rh-grp>summary{cursor:pointer;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;list-style:none}.rh-grp>summary::-webkit-details-marker{display:none}
  .rh-grp>summary::before{content:'▸';color:var(--muted);font-size:.8rem}.rh-grp[open]>summary::before{content:'▾'}.rh-gin{margin-top:8px}.rh-gin .rh-row{margin-bottom:6px}
  .cu-cart{color:var(--accent)}

  /* 2026-10-17: Orders → 🌐 เว็บ | 🛍 Shopee */
  .ord-src{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);margin:0 0 12px}
  .ord-src button{border:0;background:none;padding:7px 14px;border-radius:9px;font:inherit;font-weight:600;color:var(--muted);cursor:pointer}.ord-src button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
  .lo-items{font-size:.82rem;line-height:1.35;min-width:180px}.lo-items small{color:var(--muted)}
  .ord-t .lo-st{display:inline-block;padding:6px 13px;border-radius:999px;font-size:.8rem;font-weight:600;white-space:nowrap;   /* same size as the ทั้งหมด chip (2026-10-18) */color:var(--sc);background:color-mix(in srgb,var(--sc) 14%,transparent);border:1px solid color-mix(in srgb,var(--sc) 40%,transparent)}
  @media (max-width:640px){.ord-src{display:flex}.ord-src button{flex:1;padding:7px 6px;font-size:.8rem;line-height:1.3}}   /* phones: 3 labels fit without breaking a Thai word */

  /* 2026-10-18 owner: variant name input reaches the SKU (phone: SKU column = its own width); promo (pencil) button hovers like the box button */
  .vtable.vfixed td.v-key{padding-right:4px}
  @media (max-width:640px){
    .vtable.vfixed tr{grid-template-columns:44px minmax(0,1fr) auto auto auto auto!important;grid-template-areas:"img key key key key sku" "img price price stock pkg eye"!important}
    .vtable.vfixed tr:not(:has(.v-img)){grid-template-columns:minmax(0,1fr) auto auto auto auto!important;grid-template-areas:"key key key key sku" "price price stock pkg eye"!important}
  }
  .pkg-btn,.promo-btn{transition:border-color .15s ease,background-color .15s ease}
  .promo-btn:not(.on):hover{border-color:var(--accent)!important;background:var(--accent-soft)!important}
  /* 2026-10-18: Settings → 🧩 สินค้าที่ยังไม่สมบูรณ์ (incomplete.js) */
  .inc-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;padding:14px 16px 0}.inc-note,.inc-list{margin-left:16px;margin-right:16px}.inc-list{padding-bottom:12px}
  .inc-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--surface);color:var(--ink);border-radius:999px;padding:6px 12px;font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;transition:border-color .15s ease,background-color .15s ease}
  .inc-chip b{background:var(--surface-2);border-radius:999px;padding:0 7px;font-size:.74rem}.inc-chip:hover{border-color:var(--accent)}
  .inc-chip.on{border-color:var(--accent);background:var(--accent-soft)}.inc-chip.on b{background:var(--accent);color:#fff}
  .inc-note{font-size:.8rem;color:var(--muted);background:var(--surface-2);border-radius:10px;padding:8px 10px;margin:0 0 10px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
  .inc-list{display:flex;flex-direction:column}
  .inc-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 2px;border-top:1px solid var(--border)}
  .inc-im{width:40px;height:56px;border-radius:5px;overflow:hidden;background:var(--surface-2)}.inc-im img{width:100%;height:100%;object-fit:cover;display:block}
  .inc-main{min-width:0}.inc-main a{display:block;font-weight:600;color:var(--ink);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.inc-main small{display:block;color:var(--muted);font-size:.74rem}
  .inc-yn{display:flex;gap:6px}
  @media (max-width:600px){.inc-row{grid-template-columns:40px minmax(0,1fr)}.inc-row>.btn,.inc-yn{grid-column:2;justify-self:start}}
  /* 2026-10-18: Settings → 📦 รูปแบบการจัดส่ง · วันหยุด (shipset.js) — LnwShop-style method cards */
  .ss-sec{margin:0 0 22px}.ss-h{margin:0 0 10px}.ss-h b{display:block;font-size:1rem}.ss-h small{color:var(--muted);font-size:.8rem}
  .ss-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px 18px 10px;margin:0 0 12px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
  .ss-card.off{opacity:.6}
  .ss-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.ss-name{font-size:.98rem}.ss-desc{font-size:.84rem;color:var(--ink);margin-top:2px}
  .ss-crs{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.ss-crs img{height:18px;width:auto}
  .ss-crt{font-size:.7rem;font-weight:700;border:1px solid var(--border);border-radius:999px;padding:1px 8px;color:var(--muted)}
  .ss-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin:12px 0 10px}
  .ss-meta{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;margin:0;font-size:.84rem;align-content:start}.ss-meta dt{color:var(--muted)}.ss-meta dt::after{content:" :"}.ss-meta dd{margin:0}
  .ss-meta dd.yes{color:var(--good);font-weight:600}.ss-meta dd.no{color:var(--danger);font-weight:600}
  .ss-feebox{background:var(--surface-2);border-radius:10px;padding:10px 14px;font-size:.84rem;align-self:start}.ss-feebox>b,.ss-fh2{display:block;text-decoration:underline;text-underline-offset:3px;margin:0 0 6px}.ss-fh2{margin-top:8px}
  .ss-fr{display:flex;justify-content:space-between;gap:10px;padding:2px 0}.ss-fr b{font-family:var(--f-mono);white-space:nowrap}
  .ss-acts{display:flex;gap:6px;align-items:center;border-top:1px solid var(--border);padding-top:8px}
  .ss-add{border:1.5px solid var(--good)!important;color:var(--good)!important;background:var(--surface)!important}
  .ss-empty{border:1px dashed var(--border);border-radius:14px;padding:16px;text-align:center;color:var(--muted);font-size:.86rem;margin:0 0 12px}.ss-empty .btn{margin-top:10px}
  .ss-ho{display:flex;gap:18px;flex-wrap:wrap;margin:0 0 6px}.ss-ho label{display:flex;flex-direction:column;gap:4px;font-weight:600;font-size:.86rem}
  .ss-num{display:inline-flex;align-items:center;gap:6px;font-weight:400}.ss-num input{width:72px}
  .ss-hol{display:flex;flex-direction:column;gap:6px;margin:0 0 10px}.ss-hr{display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:6px 10px;font-size:.86rem}
  .ss-holadd{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.ss-holadd input{flex:1 1 180px;height:34px}
  .ss-form .field{margin:0 0 12px}.ss-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .ss-crpick{display:flex;gap:8px;flex-wrap:wrap}.ss-crb{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--surface);border-radius:10px;padding:6px 10px;font:inherit;font-size:.82rem;cursor:pointer;transition:border-color .15s ease,background-color .15s ease}
  .ss-crb img{height:16px;width:auto}.ss-crb.on{border-color:var(--accent);background:var(--accent-soft);font-weight:700}
  .ss-tr{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:4px 0}.ss-tr input{width:100px}
  @media (max-width:640px){.ss-body{grid-template-columns:1fr}.ss-2{grid-template-columns:1fr}.ss-top{flex-direction:column}.ss-crs{justify-content:flex-start}}
  .sh-row.hd-row.hd-same{border-top:0!important;padding-top:1px}   /* same Shopee order as the row above */
  /* 2026-10-18 v2 settings look (shipset.js + business panel): section cards with icon headers, switches, steppers, method cards, fee ladder, date tickets */
  .sx-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:18px 20px;margin:0 0 16px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 10px 28px -12px rgba(15,23,42,.10)}
  .sx-head{display:flex;gap:12px;align-items:flex-start;margin:0 0 14px}.sx-head h3{margin:0;font-size:1.02rem;letter-spacing:.01em}.sx-head p{margin:2px 0 0;color:var(--muted);font-size:.8rem;line-height:1.45}
  .sx-ic{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:1.15rem;background:linear-gradient(135deg,var(--accent-soft),color-mix(in srgb,var(--accent-soft) 40%,var(--surface)));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent)}
  .sx-note{border-radius:14px;padding:11px 14px;margin:0 0 16px;font-size:.84rem;background:color-mix(in srgb,#f59e0b 12%,var(--surface));border:1px solid color-mix(in srgb,#f59e0b 40%,transparent)}.sx-note.ok{background:var(--good-soft);border-color:color-mix(in srgb,var(--good) 35%,transparent)}
  .sx-sw{display:flex;align-items:center;gap:12px;cursor:pointer;padding:4px 0;position:relative}.sx-sw input{position:absolute;opacity:0;pointer-events:none}
  .sx-swt{flex:none;width:44px;height:26px;border-radius:999px;background:var(--surface-3);position:relative;transition:background-color .2s ease}.sx-swt::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s ease}
  .sx-sw input:checked+.sx-swt{background:var(--good)}.sx-sw input:checked+.sx-swt::after{transform:translateX(18px)}.sx-sw input:focus-visible+.sx-swt{outline:2px solid var(--accent);outline-offset:2px}
  .sx-swl b{display:block;font-size:.9rem}.sx-swl small{color:var(--muted);font-size:.76rem}.sx-sub{margin-top:10px}
  .sx-banks{display:flex;flex-direction:column;gap:10px}.sx-bank{display:grid;grid-template-columns:30px repeat(3,minmax(0,1fr));gap:10px;align-items:end;padding:10px 12px;border:1px solid var(--border);border-radius:14px;background:var(--surface-2)}
  .sx-bank .field{margin:0}.sx-bn{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.78rem;background:var(--surface);border:1px solid var(--border);margin-bottom:6px}
  .sx-savebar{position:sticky;bottom:10px;z-index:5;display:flex;justify-content:flex-end;align-items:center;gap:12px;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:16px;padding:10px 12px;box-shadow:0 10px 30px -10px rgba(15,23,42,.25)}
  .sx-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 16px}
  .sx-stat{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:14px 16px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center}
  .sx-stat i{grid-row:1/3;font-style:normal;font-size:1.4rem;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--surface-2)}.sx-stat b{font-size:1.15rem}.sx-stat span{color:var(--muted);font-size:.76rem}
  .sx-mcard{border:1px solid var(--border);border-radius:16px;margin:0 0 12px;overflow:hidden;background:var(--surface);transition:box-shadow .2s ease,border-color .2s ease}.sx-mcard:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--border));box-shadow:0 8px 24px -14px rgba(47,91,255,.45)}.sx-mcard.off{opacity:.65}
  .sx-mh{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;padding:14px 16px 10px}.sx-mt h3{margin:6px 0 0;font-size:1rem}.sx-mt p{margin:2px 0 0;font-size:.82rem;color:var(--muted)}
  .sx-area{display:inline-block;font-size:.7rem;font-weight:700;border-radius:999px;padding:2px 10px}.sx-area.a-all{background:var(--good-soft);color:var(--good)}.sx-area.a-bkk{background:var(--accent-soft);color:var(--accent)}.sx-area.a-oth{background:color-mix(in srgb,#8b5cf6 14%,var(--surface));color:#7c3aed}
  .sx-hidden{display:inline-block;margin-left:6px;font-size:.7rem;font-weight:700;border-radius:999px;padding:2px 10px;background:var(--surface-2);color:var(--muted)}
  .sx-crs{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.sx-cr{display:inline-flex;align-items:center;height:30px;padding:0 10px;border-radius:10px;background:#fff;border:1px solid var(--border)}.sx-cr img{height:16px;width:auto}
  .sx-mb{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:14px;padding:4px 16px 14px}
  .sx-facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}.sx-facts li{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:6px;font-size:.84rem}.sx-facts i{font-style:normal}.sx-facts span{color:var(--muted)}
  .sx-facts b.yes{color:var(--good)}.sx-facts b.no{color:var(--danger)}
  .sx-ladder{background:var(--surface-2);border-radius:12px;padding:10px 12px}.sx-lh{font-weight:700;font-size:.82rem;margin:0 0 6px}
  .sx-lr{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-top:1px dashed color-mix(in srgb,var(--border) 80%,transparent);font-size:.84rem}.sx-lh+.sx-lr{border-top:0}.sx-lr b{font-family:var(--f-mono);white-space:nowrap}
  .sx-free{font-style:normal;color:var(--good);background:var(--good-soft);border-radius:999px;padding:1px 8px;font-size:.76rem}.sx-rem span{color:#b45309}
  .sx-mf{display:flex;gap:6px;align-items:center;padding:10px 12px;border-top:1px solid var(--border);background:color-mix(in srgb,var(--surface-2) 45%,var(--surface))}.sx-sp{flex:1}
  .sx-act{border:1px solid var(--border);background:var(--surface);color:var(--ink);border-radius:10px;height:34px;min-width:34px;padding:0 12px;font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;transition:border-color .15s ease,background-color .15s ease,color .15s ease}
  .sx-act:hover:not(:disabled){border-color:var(--accent);background:var(--accent-soft)}.sx-act:disabled{opacity:.35;cursor:default}.sx-act.pri{background:var(--accent);border-color:var(--accent);color:#fff}.sx-act.pri:hover{background:color-mix(in srgb,var(--accent) 85%,#000)}
  .sx-act.del:hover:not(:disabled){border-color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,var(--surface));color:var(--danger)}
  .sx-addcard{width:100%;border:1.5px dashed color-mix(in srgb,var(--accent) 45%,var(--border));background:color-mix(in srgb,var(--accent-soft) 45%,var(--surface));color:var(--accent);border-radius:16px;padding:14px;font:inherit;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:background-color .15s ease}.sx-addcard:hover{background:var(--accent-soft)}.sx-addcard span{font-size:1.2rem}
  .sx-empty{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:22px;border-radius:16px;background:var(--surface-2);margin:0 0 12px}.sx-empty span{color:var(--muted);font-size:.84rem}.sx-empty .btn{margin-top:6px}
  .sx-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .sx-step{border:1px solid var(--border);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:10px}.sx-sl b{display:block;font-size:.9rem}.sx-sl small{color:var(--muted);font-size:.74rem}
  .sx-sc{display:flex;align-items:center;gap:6px}.sx-sc button{width:36px;height:36px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--ink);font-size:1.1rem;font-weight:700;cursor:pointer;transition:border-color .15s ease,background-color .15s ease}.sx-sc button:hover{border-color:var(--accent);background:var(--accent-soft)}
  .sx-sc input{width:64px;height:36px;text-align:center;font-weight:800;font-size:1rem;-moz-appearance:textfield;appearance:textfield}.sx-sc input::-webkit-inner-spin-button{-webkit-appearance:none}.sx-sc span{color:var(--muted);font-size:.8rem;margin-left:4px}
  .sx-hols{display:flex;flex-direction:column;gap:8px;margin:0 0 12px}
  .sx-hol{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;border:1px solid var(--border);border-radius:14px;padding:8px 10px;background:var(--surface)}.sx-hol.past{opacity:.55}
  .sx-hd{width:52px;height:52px;border-radius:12px;background:linear-gradient(160deg,#fb923c,#f43f5e);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05}.sx-hd b{font-size:1.25rem}.sx-hd small{font-size:.68rem;opacity:.9}
  .sx-hi b{display:block;font-size:.9rem}.sx-hi small{color:var(--muted);font-size:.76rem}.sx-none{color:var(--muted);font-size:.84rem;margin:0 0 12px}
  .sx-holadd{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;padding:12px;border-radius:14px;background:var(--surface-2)}.sx-hf{display:flex;flex-direction:column;gap:4px}.sx-hf label{font-size:.76rem;font-weight:700;color:var(--muted)}.sx-hf.grow{flex:1 1 180px}.sx-hf input{height:34px}
  @media (max-width:640px){.sx-stats{grid-template-columns:1fr}.sx-mb{grid-template-columns:1fr}.sx-mh{flex-direction:column}.sx-crs{justify-content:flex-start}.sx-steps{grid-template-columns:1fr}.sx-bank{grid-template-columns:26px 1fr}.sx-bank .field{grid-column:2}.sx-card{padding:14px}.sx-mf{flex-wrap:wrap}}
  .panel.sx-wrap{background:none!important;border:0!important;box-shadow:none!important;padding:0!important}.panel.sx-wrap>.panel-head{display:none}.panel.sx-wrap>.panel-body{padding:0!important}   /* v2 sections bring their own cards */
  .sx-card .settings-grid{align-items:end}   /* inputs line up when one label is shorter */
  .hd-why{display:block;font-size:.74rem;color:var(--ink);opacity:.85;margin-top:2px;line-height:1.4}   /* history: why this row synced (2026-10-18) */
  .sh-row.hd-same .hd-why{display:none}   /* same Shopee order: the first row already says why */
  /* 2026-10-18: Settings home quick section (shop status + announcements on the home, last backup chip) */
  .set-quick{margin:0 0 18px}.sq-chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
  .sq-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:6px 14px;font-size:.82rem;font-weight:600}
  .sq-chip.st-open{border-color:color-mix(in srgb,var(--good) 40%,var(--border));background:var(--good-soft)}.sq-chip.st-notice{border-color:#f59e0b;background:color-mix(in srgb,#f59e0b 12%,var(--surface))}.sq-chip.st-closed{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,var(--surface))}
  .sq-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:16px;align-items:start}.sq-grid .sx-card{margin:0}
  .sq-states{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 10px}.sq-st{border:1px solid var(--border);background:var(--surface);color:var(--ink);border-radius:12px;padding:8px 12px;font:inherit;font-size:.84rem;font-weight:600;cursor:pointer;transition:border-color .15s ease,background-color .15s ease}
  .sq-st:hover{border-color:var(--accent)}.sq-st.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
  .sq-log{border:1px solid var(--border);border-radius:12px;padding:8px 12px;margin:0 0 10px}.sq-log summary{cursor:pointer;font-weight:600;font-size:.86rem}.sq-log .field{margin-top:8px}.sq-log textarea{width:100%;min-height:120px}
  .sq-save{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:12px}
  @media (max-width:900px){.sq-grid{grid-template-columns:1fr}}
  /* every Settings panel gets the v2 card look (same as 🏪 / 🚚) */
  #view-settings>.panel:not(.sx-wrap){border-radius:18px;border:1px solid var(--border);box-shadow:0 1px 2px rgba(15,23,42,.04),0 10px 28px -12px rgba(15,23,42,.10);overflow:hidden}
  #view-settings>.panel:not(.sx-wrap)>.panel-head{background:none;border-bottom:1px solid var(--border);padding:16px 20px}
  #view-settings>.panel:not(.sx-wrap)>.panel-head h2{font-size:1.02rem}
  #view-settings>.panel:not(.sx-wrap)>.panel-body{padding:18px 20px}
  /* field rows line up even when one label wraps (all Settings grids) */
  #view-settings .settings-grid{align-items:end}
  #view-settings .settings-grid>.field{min-width:0}#view-settings .settings-grid>.field input,#view-settings .settings-grid>.field select{width:100%;box-sizing:border-box;max-width:100%}
  /* top-bar รับออเดอร์ = slide switch */
  #purchasingToggleBtn.pt-sw{background:var(--surface)!important;border:1px solid var(--border)!important;color:var(--ink)!important;gap:8px!important;padding-right:6px}
  #purchasingToggleBtn.pt-sw #purchasingToggleDot{display:none!important}
  .pt-track{position:relative;flex:none;width:40px;height:22px;border-radius:999px;background:var(--danger);transition:background-color .2s ease}.pt-track::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s ease}
  #purchasingToggleBtn.pt-sw.on .pt-track{background:var(--good)}#purchasingToggleBtn.pt-sw.on .pt-track::after{transform:translateX(18px)}
  /* shop bank accounts: the customer refund picker look */
  .bk-pick{position:relative}.bk-btn{width:100%;display:flex;align-items:center;gap:10px;min-height:40px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--ink);padding:6px 10px;font:inherit;font-size:.9rem;text-align:left;cursor:pointer}.bk-btn span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bk-btn i{font-style:normal;color:var(--muted)}
  .bk-logo{flex:none;width:26px;height:26px;border-radius:50%;object-fit:cover}
  .bk-list{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 4px);background:var(--surface);border:1px solid var(--border);border-radius:12px;max-height:260px;overflow:auto;padding:4px;box-shadow:0 12px 30px -10px rgba(15,23,42,.3)}
  .bk-list button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;color:var(--ink);padding:8px 10px;border-radius:9px;cursor:pointer;font:inherit;font-size:.9rem;text-align:left}.bk-list button:hover{background:var(--surface-2)}.bk-list .bk-clear{color:var(--danger);border-top:1px solid var(--border);border-radius:0 0 9px 9px}
  #view-settings .settings-grid>.field{margin:0!important}   /* a .field:last-child margin rule shifted the first field of each row (owner: rows not lined up) */
  .bk-btn{min-height:0;padding:10px 12px;line-height:24px;background:var(--bg)}.bk-btn .bk-logo{width:24px;height:24px}   /* same height as the inputs beside it */
  .inc-tt{gap:6px}.inc-tt .tt-box{width:34px;height:34px;font-size:.8rem}.inc-save{margin:0 16px 8px;font-size:.8rem;font-weight:600;color:var(--muted);min-height:1.2em}.inc-save.ok{color:var(--good)}.inc-save.err{color:var(--danger)}   /* 🧩 quick answers (2026-10-18) */
  .inc-tt .tt-box{opacity:1}.inc-tt .tt-box:hover{transform:scale(1.1)}
  /* 2026-10-18 owner: bigger photos in 🧩 so the card can be recognised (68×95 keeps tap-to-zoom, rule ≤ 96 px) */
  .inc-row{grid-template-columns:68px minmax(0,1fr) auto;gap:12px;padding:8px 2px}.inc-im{width:68px;height:95px;border-radius:7px;box-shadow:0 1px 4px rgba(0,0,0,.12)}
  @media (max-width:600px){.inc-row{grid-template-columns:60px minmax(0,1fr)}.inc-im{width:60px;height:84px;grid-row:span 2}.inc-yn{flex-wrap:wrap;max-width:100%}}
  @media (min-width:601px){.inc-row{grid-template-columns:150px minmax(0,1fr) auto;gap:16px;padding:10px 2px}.inc-im{width:150px;height:210px;border-radius:10px}.inc-main a{font-size:1rem;white-space:normal}}   /* 🧩 desktop only: big card photos (owner) */
  /* 🧩 quick answers v2 (Thai): grade line + trigger type pills (2026-10-18) */
  .inc-acts{display:flex;flex-direction:column;gap:8px;align-items:flex-end}.inc-line{display:flex;align-items:center;gap:5px;flex-wrap:wrap;justify-content:flex-end}
  .inc-lbl{font-size:.74rem;font-weight:700;color:var(--muted);margin-right:4px;min-width:42px;text-align:right}
  .inc-g{width:34px;height:34px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--ink);font:inherit;font-weight:800;cursor:pointer;transition:border-color .15s ease,background-color .15s ease}.inc-g:hover{border-color:var(--accent);background:var(--accent-soft)}.inc-g.on{background:var(--accent);border-color:var(--accent);color:#fff}
  .inc-ttp{--tc:#8a93a0;border:0;border-radius:999px;padding:7px 12px;font:inherit;font-size:.8rem;font-weight:700;color:#fff;background:var(--tc);cursor:pointer;transition:transform .15s ease,filter .15s ease}.inc-ttp:hover{transform:translateY(-1px);filter:brightness(1.08)}
  .inc-ttp[data-tt=critical]{--tc:#b8860b}.inc-ttp[data-tt=heal]{--tc:#0b6b3a}.inc-ttp[data-tt=front]{--tc:#800020}.inc-ttp[data-tt=draw]{--tc:#e02424}.inc-ttp[data-tt=over]{--tc:linear-gradient(135deg,#f59e0b,#ef4444,#8b5cf6,#3b82f6);background:linear-gradient(135deg,#f59e0b,#ef4444,#8b5cf6,#3b82f6)}
  @media (max-width:600px){.inc-acts{align-items:flex-start;grid-column:2}.inc-line{justify-content:flex-start}.inc-lbl{text-align:left;min-width:0}}
  /* 📤 ดึงข้อมูลสินค้าใหม่ (newitems.js, 2026-10-25) + name warning in the editor */
  .name-dup{color:var(--danger);font-size:.8rem;font-weight:600;margin-top:4px;overflow-wrap:anywhere}.name-dup:empty{display:none}
  .ni-toggle{display:flex;gap:6px;align-items:center;font-size:.85rem;margin:0 0 8px}
  .ni-list{border:1px solid var(--border);border-radius:12px;overflow:hidden;max-height:60vh;overflow-y:auto}
  .ni-row{display:grid;grid-template-columns:auto 44px minmax(0,1fr);gap:10px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--border);cursor:pointer}
  .ni-row:last-child{border-bottom:0}.ni-row.warn{background:color-mix(in srgb,var(--danger) 6%,transparent)}
  .ni-im{width:44px;height:44px;border-radius:8px;background:var(--surface-2);overflow:hidden;display:block}.ni-im img{width:100%;height:100%;object-fit:cover;display:block}
  .ni-main{min-width:0;display:grid;gap:1px}.ni-main b{font-weight:600;font-size:.9rem;overflow-wrap:anywhere}.ni-main small{font-size:.76rem;color:var(--muted);overflow-wrap:anywhere}.ni-main small.ni-warn{color:var(--danger);font-weight:600}
/* 2026-10-25 phones: order details / slip check window */
@media (max-width:560px){
  .modal-body .save-summary .r{flex-wrap:wrap;gap:2px 10px}.modal-body .save-summary .r b{text-align:left!important;word-break:break-word}
  .od-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}.od-acts .btn{justify-content:center;min-height:44px}.od-acts .btn.primary{grid-column:1/-1}
  .od-box{padding:10px}#slipBox img{max-height:60vh!important;width:auto;max-width:100%}
  .ord-tl{padding:10px}
}
/* 2026-10-25 ระบบเชื่อมต่อ (history): a clear solid line between different orders / events; rows cut by the same order = thin dashed line */
.sh-row.hd-row{border-top:1.5px solid color-mix(in srgb,var(--ink) 35%,var(--surface))!important}
.sh-day+.sh-row.hd-row{border-top:0!important}
.sh-row.hd-row.hd-same{border-top:1px dashed var(--border-strong,#cdd3dc)!important;padding-top:5px}

/* 2026-10-25 ตรวจความต่างทั้งร้าน (Sync tab) */
.dfr{grid-template-columns:22px minmax(0,1fr) minmax(0,1.1fr) minmax(0,1.1fr) auto!important}.dfr .dft,.df-field .dft{font-size:.8rem;overflow-wrap:anywhere}.dfr .dft small,.df-field .dft small{display:block;color:var(--muted);font-size:.68rem}.df-field .dft b{font-weight:600;color:var(--ink)}
.dfr .dfi,.df-field .dfi{position:relative;width:44px;display:inline-block}.dfr .dfi img,.df-field .dfi img{width:44px;height:60px;object-fit:cover;border-radius:6px;border:1px solid var(--border);display:block}.dfr .dfi .dfi-ph,.df-field .dfi .dfi-ph{width:44px;height:60px;border-radius:6px;border:1px dashed var(--border);background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-size:.62rem;color:var(--muted);text-align:center;box-sizing:border-box}.dfr .dfi b,.df-field .dfi b{position:absolute;left:2px;bottom:2px;background:rgba(0,0,0,.72);color:#fff;font-size:.6rem;padding:0 4px;border-radius:4px}
@media (max-width:600px){.dfr{grid-template-columns:22px minmax(0,1fr) auto!important}.dfr .dft,.dfr .dfi{grid-column:2}}

/* 2026-10-29 ตรวจความต่างทั้งร้าน v2: Product-Grouped + Full Tampermonkey Parity */
.df-bar{display:flex;flex-direction:column;gap:10px;padding:10px 12px;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--surface-2) 50%,var(--surface))}
.df-filters{display:flex;flex-wrap:wrap;gap:6px}
.df-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--surface);color:var(--ink);border-radius:999px;padding:5px 11px;font:inherit;font-size:.8rem;font-weight:600;cursor:pointer;transition:border-color .15s,background-color .15s}
.df-chip b{background:var(--surface-2);border-radius:999px;padding:0 7px;font-size:.72rem;color:var(--muted)}
.df-chip:hover{border-color:var(--accent)}
.df-chip.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.df-chip.on b{background:var(--accent);color:#fff}
.df-chip.on.only{border-color:var(--danger,#e11d48);background:color-mix(in srgb,var(--danger,#e11d48) 12%,var(--surface));color:var(--danger,#e11d48)}
.df-chip.on.only b{background:var(--danger,#e11d48);color:#fff}
.df-only-tag{font-size:.72rem;font-weight:700;margin-left:2px}
.df-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.df-search{flex:1 1 220px;min-width:180px;height:34px;border:1px solid var(--border);border-radius:9px;padding:0 11px;font:inherit;font-size:.84rem;background:var(--surface);color:var(--ink)}
.df-list{display:flex;flex-direction:column;gap:10px;padding:10px 12px}
.df-prod{border:1px solid var(--border);border-radius:14px;background:var(--surface);overflow:hidden;box-shadow:0 1px 3px rgba(15,23,42,.04)}
.df-prod-h{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--surface-2);border-bottom:1px solid var(--border);flex-wrap:wrap}
.df-pimg{width:38px;height:52px;border-radius:6px;object-fit:cover;background:var(--surface);border:1px solid var(--border);flex:none;display:grid;place-items:center;font-size:1.1rem}
.df-pmain{flex:1 1 200px;min-width:0}
.df-pname{font-weight:700;font-size:.9rem;line-height:1.3;overflow-wrap:anywhere}
.df-pmain small{display:block;color:var(--muted);font-size:.74rem;margin-top:2px}
.df-badges{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.df-badge{display:inline-flex;align-items:center;gap:3px;font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--surface);border:1px solid var(--border);color:var(--ink);white-space:nowrap}
.df-b-stock{border-color:color-mix(in srgb,#2563eb 40%,var(--border));background:color-mix(in srgb,#2563eb 10%,var(--surface));color:#1d4ed8}
.df-b-price{border-color:color-mix(in srgb,#d97706 40%,var(--border));background:color-mix(in srgb,#d97706 10%,var(--surface));color:#b45309}
.df-b-name{border-color:color-mix(in srgb,#7c3aed 40%,var(--border));background:color-mix(in srgb,#7c3aed 10%,var(--surface));color:#6d28d9}
.df-b-image,.df-b-pimg,.df-b-vimg{border-color:color-mix(in srgb,#059669 40%,var(--border));background:color-mix(in srgb,#059669 10%,var(--surface));color:#047857}
.df-b-var,.df-b-prod{border-color:color-mix(in srgb,#db2777 40%,var(--border));background:color-mix(in srgb,#db2777 10%,var(--surface));color:#be185d}
.df-b-clash{border-color:color-mix(in srgb,var(--danger) 40%,var(--border));background:color-mix(in srgb,var(--danger) 10%,var(--surface));color:var(--danger)}
[data-theme="dark"] .df-b-stock{color:#93c5fd}[data-theme="dark"] .df-b-price{color:#fcd34d}[data-theme="dark"] .df-b-name{color:#c4b5fd}[data-theme="dark"] .df-b-image,[data-theme="dark"] .df-b-pimg,[data-theme="dark"] .df-b-vimg{color:#6ee7b7}[data-theme="dark"] .df-b-var,[data-theme="dark"] .df-b-prod{color:#f9a8d4}
.df-pacts{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-left:auto}
.df-prod-b{display:flex;flex-direction:column;padding:6px 10px 10px;gap:6px}
.df-var{border:1px solid var(--border);border-radius:10px;padding:7px 10px;background:color-mix(in srgb,var(--surface-2) 35%,var(--surface))}
.df-var-h{display:flex;align-items:center;gap:8px;margin-bottom:5px;padding-bottom:5px;border-bottom:1px dashed var(--border)}
.df-vimg{width:28px;height:38px;border-radius:4px;object-fit:cover;border:1px solid var(--border);flex:none}
.df-vtitle{flex:1;min-width:0;line-height:1.25}
.df-vtitle b{font-size:.84rem;color:var(--ink);margin-right:6px}
.df-vtitle small{font-size:.73rem;color:var(--muted);font-family:var(--f-mono)}
.df-vstock{display:inline-flex;align-items:center;gap:3px;font-family:var(--font);background:var(--surface-2);padding:1px 6px;border-radius:6px;font-size:.73rem;color:var(--ink)}
.df-vstock b{font-size:.75rem;color:var(--accent);margin:0}
.df-vstock.out{color:var(--muted);background:color-mix(in srgb,var(--border) 40%,var(--surface))}
.df-vstock.out b{color:var(--danger,#ef4444)}
.df-vlnw{font-size:.72rem;color:var(--muted);text-decoration:none;padding:2px 6px;border-radius:6px;border:1px solid var(--border);background:var(--surface);flex:none}
.df-vlnw:hover{color:var(--accent);border-color:var(--accent)}
.df-var-b{display:flex;flex-direction:column;gap:4px}
.df-field{display:grid;grid-template-columns:22px minmax(120px,165px) minmax(0,1fr) minmax(0,1fr) auto;gap:8px 10px;align-items:center;padding:6px 8px;border-radius:8px;background:var(--surface);border:1px solid color-mix(in srgb,var(--border) 70%,transparent);font-size:.82rem}
.df-field.is-done{opacity:.72;background:color-mix(in srgb,#10b981 6%,var(--surface))}
.df-klbl{font-weight:700;font-size:.78rem;color:var(--ink);overflow-wrap:anywhere}
.df-acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.df-done{background:#10b981!important;border-color:#10b981!important;color:#fff!important;opacity:1!important}
.df-more{padding:4px 12px 14px;text-align:center}
@media (max-width:720px){
  .df-field{grid-template-columns:22px minmax(0,1fr) auto}
  .df-field .dft,.df-field .dfi{grid-column:2}
  .df-field .df-acts{grid-column:2/-1;justify-content:flex-start;margin-top:2px}
  .df-pacts{margin-left:0;width:100%;justify-content:flex-start}
}

/* 2026-10-25 progress of the LnwShop inventory copy */
.dfp{display:flex;flex-direction:column;gap:6px;margin:0 0 10px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface);font-size:.84rem}
.dfp-bar{height:10px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.dfp-bar i{display:block;height:100%;border-radius:999px;background:repeating-linear-gradient(135deg,var(--accent) 0 12px,color-mix(in srgb,var(--accent) 65%,#fff) 12px 24px);background-size:34px 34px;animation:dfpMove .8s linear infinite;transition:width .6s ease}
.dfp-bar.wait i{opacity:.45}.dfp.done .dfp-bar i{animation:none;background:var(--good)}
@keyframes dfpMove{to{background-position:34px 0}}
@media (prefers-reduced-motion:reduce){.dfp-bar i{animation:none}}

/* 2026-10-25 Products tab: variants renamed with -N because of duplicate names */
.dupbox{margin:0 0 12px;border:1px solid color-mix(in srgb,#f59e0b 45%,var(--border));background:color-mix(in srgb,#f59e0b 8%,var(--surface));border-radius:12px;padding:8px 12px}
.dupbox>summary{cursor:pointer;font-weight:600;font-size:.88rem}.dupbox>summary small{display:block;font-weight:400;color:var(--muted);font-size:.76rem;margin-top:2px}
.dupbox-b{display:flex;flex-direction:column;margin-top:8px}.dupbox-r{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 0;border-top:1px solid var(--border);font-size:.84rem}
@media (max-width:700px){.dupbox-r{grid-template-columns:1fr auto}.dupbox-r>span{grid-column:1}}

/* 2026-10-25 Products tab: matched variants shown under each product while the 🔤 filter is on */
.odd-note{display:flex;flex-wrap:wrap;gap:6px;margin:-4px 0 10px;padding:0 12px}.odd-v{font-size:.76rem;border:1px solid var(--border);border-radius:999px;padding:2px 9px;background:var(--surface-2);color:var(--ink)}
.lin-r .btn{white-space:nowrap}
.vsku-in{width:104px;font-family:var(--f-mono);font-size:.8rem;font-weight:600;color:var(--accent);background:transparent;border:0;border-bottom:1.5px dashed var(--accent);border-radius:0;padding:1px 0;outline:0}.vsku-in:focus{border-bottom-style:solid}
@media (max-width:640px){.vtable.vfixed .v-sku .vsku-in{font-size:.72rem}}
.ca-issue-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.ca-issue-head-left{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ca-issue-head-right{display:flex;align-items:center;gap:6px;flex-wrap:wrap}

/* 2026-11-02 Products tab: quick-edit subrow for odd variants (ได้ N ใบ & NF เดี่ยวๆ) */
.prow-quick {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: var(--surface-2);
  border-top: 1px dashed var(--border);
  font-size: .84rem;
  flex-wrap: wrap;
}
.prow-quick .pq-im {
  width: 32px;
  height: 44px;
  flex: none;
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
}
.prow-quick .pq-im img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prow-quick .pq-sku {
  font-size: .78rem;
  color: var(--muted);
  flex: none;
  min-width: 72px;
}
.prow-quick .pq-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.prow-quick .pq-field label {
  font-size: .7rem;
  color: var(--muted);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.prow-quick .pq-field label .pq-orig {
  font-weight: 400;
  color: var(--muted);
  opacity: .9;
}
.prow-quick .pq-field input {
  padding: 5px 8px;
  font-size: .84rem;
  height: 30px;
}
.prow-quick .pq-f-name { flex: 1; min-width: 150px; }
.prow-quick .pq-f-price { width: 115px; flex: none; }
.prow-quick .pq-f-stock { width: 140px; flex: none; }
.prow-quick .pq-f-ro { color: var(--muted); flex: 1; font-size: .82rem; display: flex; flex-direction: column; gap: 2px; }
.prow-quick .pq-stk-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.prow-quick .pq-stk-wrap input { width: 60px; text-align: center; }
.prow-quick .pq-delta {
  font-size: .75rem;
  font-weight: 700;
  font-family: var(--f-mono);
  color: var(--good, #10b981);
}
.prow-quick .pq-delta.neg { color: var(--danger, #ef4444); }
.prow-quick .pq-actions {
  display: flex;
  align-items: flex-end;
  margin-left: auto;
}
.prow-quick .pq-save-btn {
  height: 30px;
  padding: 0 12px;
  font-size: .8rem;
}
@media (max-width: 640px) {
  .prow-quick { gap: 8px; padding: 8px 10px; }
  .prow-quick .pq-f-name { width: 100%; flex: none; }
}