/* =====================================================================
   WIN ALL INTERNATIONAL — interface
   Same shape as Silk Pedidos: split-screen login with an aurora brand
   panel, and a side rail for the app. Written by hand rather than with
   Tailwind, and using fonts already on the machine, because
   cdn.tailwindcss.com and fonts.googleapis.com are both unreachable from
   inside China — which is the whole point of this build.
   ===================================================================== */

:root {
  --red: #BE2131;
  --red-deep: #8E1524;
  --gold: #D9A05B;

  --ink: #17191E;
  --muted: #6B7280;
  --faint: #9AA3AE;
  --line: #E4E7EB;
  --bg: #F6F4F2;
  --panel: #FFFFFF;

  --ok: #14664A;
  --warn: #8A5200;
  --warn-bg: #FFF6E5;
  --err: #A8262B;
  --err-bg: #FDECEC;

  --r: 12px;
  --rail: 236px;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  --serif: Georgia, "Times New Roman", "Songti SC", SimSun, serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #E9EAEE; --muted: #9AA3AE; --faint: #79818C; --line: #2B3038;
    --bg: #131519; --panel: #1B1E24;
    --red: #E2606C; --red-deep: #BE2131;
    --ok: #4CC08A; --warn: #E0A64A; --warn-bg: #2A2417;
    --err: #F0868A; --err-bg: #2C1A1B;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.55 var(--sans);
  -webkit-text-size-adjust: 100%;
}

/* Red is for action — a button, the active page, one number that matters.
   Text and links carry the ink colour and earn emphasis from weight and size,
   not from shouting. */
a { color: inherit; text-decoration: none; }
a:hover { color: var(--red); }
a.accent, .link { color: var(--red); }
h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.2; }
h2 { font-size: 1.62rem; font-family: var(--serif); font-weight: 500;
     letter-spacing: -.015em; }
h3 { font-size: .78rem; margin-top: 2.2em; margin-bottom: .9em;
     text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
     font-weight: 700; }
h4 { font-size: .95rem; }
p { margin: 0 0 .6em; }

.muted { color: var(--muted); }
.small { font-size: .86em; }
.hidden { display: none; }
.grow { flex: 1; min-width: 0; }

/* =============================================== login: split screen */

.split { display: grid; grid-template-columns: 54% 1fr; min-height: 100dvh; }

.brandside {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  justify-content: space-between; padding: 54px 56px; color: #fff;
  background: linear-gradient(150deg, #43101A 0%, #2E0A10 55%, #190409 100%);
}
.aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.aurora span { position: absolute; border-radius: 50%; filter: blur(90px); }
.aurora .o1 { width: 46vw; height: 46vw; top: -16%; left: -12%;
  background: radial-gradient(circle, rgba(190,33,49,.55), transparent 70%);
  animation: drift1 26s ease-in-out infinite; }
.aurora .o2 { width: 40vw; height: 40vw; bottom: -18%; right: -10%;
  background: radial-gradient(circle, rgba(217,160,91,.26), transparent 70%);
  animation: drift2 32s ease-in-out infinite; }
.aurora .o3 { width: 28vw; height: 28vw; top: 42%; left: 48%;
  background: radial-gradient(circle, rgba(242,179,61,.14), transparent 70%);
  animation: drift3 23s ease-in-out infinite; }
@keyframes drift1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(4vw,3vw) scale(1.12)} }
@keyframes drift2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-3vw,-2vw) scale(1.08)} }
@keyframes drift3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-3vw,3vw) scale(1.15)} }

.brandside > * { position: relative; z-index: 1; }
.brandside .mark { height: 58px; width: auto; }
.bs-mid h1 { font-family: var(--serif); font-size: clamp(2.3rem, 4vw, 3.7rem);
             font-weight: 500; line-height: 1.05; margin-bottom: .25em; }
.bs-mid .shimmer {
  background: linear-gradient(100deg, #E8B98A 28%, #FFF1DC 48%, #D9A05B 58%, #E8B98A 72%);
  background-size: 220% auto; -webkit-background-clip: text; background-clip: text;
  color: transparent; font-style: italic; font-weight: 400;
  animation: shimmer 6s linear infinite;
}
@keyframes shimmer { to { background-position: -220% center; } }
.bs-mid p { color: rgba(255,255,255,.6); font-size: 1.05rem; max-width: 36ch; }
.eyebrow { font-size: .7rem; text-transform: uppercase; letter-spacing: .3em;
           font-weight: 700; color: var(--gold); margin-bottom: 1em; }
.bs-foot { display: flex; justify-content: space-between; align-items: center;
           font-size: .78rem; color: rgba(255,255,255,.4); }
.dot { display: inline-flex; align-items: center; gap: 7px; }
.dot i { width: 7px; height: 7px; border-radius: 50%; background: #4ADE80;
         box-shadow: 0 0 0 0 rgba(74,222,128,.7); animation: pulse 2.4s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 7px rgba(74,222,128,0); }
                   100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } }

.formside { display: grid; place-items: center; padding: 32px 24px;
            background: var(--panel); }
.loginbox { width: 100%; max-width: 372px; }
.loginbox .mark-sm { height: 48px; margin: 0 auto 28px; display: none; }
.loginbox h2 { font-size: 2.2rem; margin-bottom: .15em; }
.loginbox .sub { color: var(--muted); margin-bottom: 2.2em; }

.field { position: relative; margin-bottom: 16px; }
.field .ico { position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
              width: 17px; height: 17px; color: var(--faint); pointer-events: none; }
.field input { padding-left: 40px; }
.field .peek { position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
               border: 0; background: none; color: var(--faint); cursor: pointer;
               padding: 6px; line-height: 0; }
.field .peek:hover { color: var(--red); }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .brandside { display: none; }
  .loginbox .mark-sm { display: block; }
}

/* =============================================== app shell: side rail */

.shell { display: grid; grid-template-columns: var(--rail) 1fr; min-height: 100dvh; }

.side {
  position: sticky; top: 0; align-self: start; height: 100dvh;
  display: flex; flex-direction: column; padding: 20px 14px;
  background: linear-gradient(175deg, #241A1D 0%, #191315 55%, #120E10 100%);
}
.side .brand { display: block; margin: 6px 8px 30px; }
.side .brand img { height: 38px; width: auto; }
.side nav { display: flex; flex-direction: column; gap: 2px; }
.side nav a {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px;
  border-radius: 8px; color: rgba(255,255,255,.66); font-size: .92rem;
  transition: background .16s, color .16s;
}
.side nav a:hover { background: rgba(255,255,255,.09); color: #fff; text-decoration: none; }
.side nav a.on { background: var(--red); color: #fff; font-weight: 600; }
.side nav a svg { width: 18px; height: 18px; flex: 0 0 18px; }
.side .foot { margin-top: auto; border-top: 1px solid rgba(255,255,255,.12);
              padding-top: 14px; }
.side .who { display: flex; align-items: center; gap: 10px; padding: 4px 8px 10px; }
.side .ava { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 30px;
             display: grid; place-items: center; background: var(--red);
             color: #fff; font-size: .78rem; font-weight: 700; }
.side .who span { font-size: .88rem; color: rgba(255,255,255,.9);
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side .foot form { margin: 0; }
.side .foot button { width: 100%; text-align: left; padding: 9px 12px; border: 0;
                     background: none; border-radius: 9px; color: rgba(255,255,255,.6);
                     font-size: .88rem; cursor: pointer; }
.side .foot button:hover { background: rgba(255,255,255,.09); color: #fff; }

.topbar { display: none; }
.scrim { display: none; }

@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: fixed; inset: 0 auto 0 0; width: 250px; z-index: 40;
          transform: translateX(-100%); transition: transform .22s ease; }
  .side.open { transform: none; }
  .topbar { display: flex; align-items: center; gap: 12px; padding: 10px 14px;
            background: var(--panel); border-bottom: 1px solid var(--line);
            position: sticky; top: 0; z-index: 20; }
  .topbar img { height: 34px; }
  .burger { border: 0; background: none; padding: 6px; cursor: pointer;
            color: var(--ink); line-height: 0; }
  .scrim.on { display: block; position: fixed; inset: 0;
              background: rgba(0,0,0,.42); z-index: 30; }
}

/* =============================================== content */

.wrap { max-width: 1060px; margin: 0 auto; padding: 34px 34px 96px; width: 100%; }
.center { min-height: 100dvh; display: grid; place-items: center; padding: 20px; }
.head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
        margin: .3em 0 1.6em; }
.head > :first-child { flex: 1; min-width: 0; }
.head h2 { margin: 0; }

.card { background: var(--panel); border: 1px solid var(--line);
        border-radius: var(--r); padding: 20px 22px; margin: 0 0 18px; }
.narrow { width: 100%; max-width: 380px; }
summary { cursor: pointer; font-weight: 600; }
details[open] > summary { margin-bottom: .9em; }

label { display: block; font-size: .82em; color: var(--muted); margin: .8em 0 .3em;
        font-weight: 500; }
input, select, textarea, button { font: inherit; font-size: 16px; }
input[type=text], input[type=email], input[type=password], input:not([type]), input[type=date],
select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--panel); color: var(--ink);
  transition: border-color .18s, box-shadow .18s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--red);
  box-shadow: 0 0 0 3.5px rgba(190,33,49,.13);
}
textarea { resize: vertical; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--red); outline-offset: 2px;
}
.grid2 { display: grid; grid-template-columns: 148px 1fr; gap: 8px 14px;
         align-items: center; }
.grid2 label { margin: 0; }

button, .btn { padding: 10px 16px; border-radius: 9px; border: 1px solid var(--line);
               background: var(--panel); color: var(--ink); cursor: pointer;
               transition: border-color .16s, background .16s; }
button:hover, .btn:hover { border-color: var(--muted); text-decoration: none; }
.primary { background: var(--red); border-color: var(--red); color: #fff;
           font-weight: 600; position: relative; overflow: hidden; }
.primary:hover { background: var(--red-deep); border-color: var(--red-deep); }
.primary::after { content: ''; position: absolute; top: 0; left: -160%;
  width: 55%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg); transition: left .7s ease; }
.primary:hover::after { left: 170%; }
.wide { width: 100%; margin-top: 1.4em; }
.link { border: 0; background: none; color: var(--red); padding: 0; cursor: pointer; }
button[disabled] { opacity: .45; cursor: default; }

.error { background: var(--err-bg); color: var(--err); padding: 10px 13px;
         border-radius: 9px; margin-bottom: 1em; }
.ok { border-color: var(--ok); }
.warn { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.warn li { margin-left: 1.1em; }
.note { white-space: pre-wrap; }
.working { color: var(--muted); }
.temp { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        background: var(--bg); padding: 3px 7px; border-radius: 6px; user-select: all; }

.rows { list-style: none; margin: 0 0 18px; padding: 0; border: 1px solid var(--line);
        border-radius: var(--r); overflow: hidden; background: var(--panel); }
.row { display: flex; align-items: center; gap: 14px; padding: 15px 18px;
       border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.row:hover { background: rgba(0,0,0,.018); }
.row a { color: var(--ink); display: flex; gap: 10px; align-items: baseline;
         flex-wrap: wrap; }
.row a:hover { text-decoration: none; }

.pill { font-size: .74em; padding: 3px 10px; border-radius: 99px; background: var(--bg);
        color: var(--muted); border: 1px solid var(--line); white-space: nowrap; }
.pill-ready, .pill-approved { color: var(--ok); border-color: currentColor;
                              background: transparent; }
.pill-reading, .pill-uploaded { color: var(--red); border-color: currentColor;
                                background: transparent; }
.pill-failed { color: var(--err); border-color: currentColor; background: transparent; }
.pill-repeat { color: var(--warn); border-color: currentColor; background: transparent; }

.drop { display: grid; place-items: center; gap: 7px; text-align: center;
        padding: 40px 18px; margin-top: 1.2em; border: 2px dashed var(--line);
        border-radius: var(--r); cursor: pointer; color: var(--muted);
        transition: border-color .18s, color .18s, background .18s; }
.drop:hover, .drop.over { border-color: var(--red); color: var(--red);
                          background: rgba(190,33,49,.03); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
progress { width: 100%; margin-top: 14px; height: 6px; }

.product { display: flex; gap: 18px; background: var(--panel);
           border: 1px solid var(--line); border-radius: var(--r);
           padding: 16px; margin-bottom: 14px; }
.product.needs-check { border-left: 3px solid var(--warn); }
.shots { display: flex; gap: 7px; flex: 0 0 auto; flex-wrap: wrap; width: 160px; }
.shots img { width: 75px; height: 100px; object-fit: cover; border-radius: 8px;
             border: 1px solid var(--line); background: var(--bg); }
.shots img.hero { outline: 2px solid var(--red); outline-offset: -2px; }
.fields { flex: 1; min-width: 0; }
.rowline { display: flex; align-items: center; gap: 9px; margin-bottom: .5em;
           flex-wrap: wrap; }
.cardno { font-family: var(--serif); font-size: 1.15rem; font-weight: 700;
          color: var(--red); }
.top2 { display: grid; grid-template-columns: 1fr 210px; gap: 14px; }
.top2 label { margin-top: .2em; }
.money { display: flex; gap: 7px; }
.money input { flex: 1; min-width: 0; }
.cur { width: 82px; flex: 0 0 82px; }
.cur.unset { border-color: var(--warn); color: var(--warn); }

.grp { border: 1px solid var(--line); border-radius: 10px; margin: 1em 0 0;
       padding: 6px 14px 14px; display: grid; gap: 10px;
       grid-template-columns: repeat(4, 1fr); }
.grp legend { font-size: .7rem; color: var(--muted); padding: 0 7px;
              text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
.grp label { margin: 0; }

.flags { margin-top: 1em; background: var(--warn-bg); border-radius: 10px;
         padding: 10px 14px; }
.flags summary { color: var(--warn); font-size: .9em; }
.flags ul { margin: .6em 0 0 1.1em; padding: 0; font-size: .88em; color: var(--warn); }
.flags li { margin-bottom: .4em; }
.actions { display: flex; align-items: center; gap: 14px; margin-top: 1.2em;
           flex-wrap: wrap; }
.saved { color: var(--ok); font-size: .86em; min-width: 3em; }
.approve { border-color: var(--ok); color: var(--ok); }
.pick { margin: 0; display: flex; align-items: center; gap: 7px; color: var(--ink);
        font-size: .9rem; }
.pick input, .tilepick input, #all { width: auto; }
.dirty { border-color: var(--warn) !important; }

.tiles { display: grid; gap: 14px;
         grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); }
.tile { position: relative; background: var(--panel); border: 1px solid var(--line);
        border-radius: var(--r); padding: 11px;
        transition: box-shadow .2s, transform .2s; }
.tile:hover { box-shadow: 0 8px 26px -14px rgba(0,0,0,.28); transform: translateY(-2px); }
.tile img, .noimg { width: 100%; aspect-ratio: 1; object-fit: cover;
                    border-radius: 9px; background: var(--bg); display: block; }
.noimg { border: 1px dashed var(--line); }
.small-note { width: 75px; height: 100px; display: grid; place-items: center;
              font-size: .74em; color: var(--faint); border-radius: 8px;
              border: 1px dashed var(--line); }
.tile h4 { margin: .6em 0 .2em; word-break: break-word; }
.price { font-weight: 650; margin: .35em 0; font-size: 1.04em; }
.tilepick { position: absolute; top: 9px; left: 9px; margin: 0; background: var(--panel);
            border-radius: 6px; padding: 3px 6px; box-shadow: 0 1px 4px rgba(0,0,0,.14); }
.filters { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 1.2em; }
.filters input, .filters select { width: auto; flex: 1 1 150px; }
.selbar { display: flex; align-items: center; gap: 15px; margin: 0 0 1.2em; }
.selbar label { margin: 0; display: flex; align-items: center; gap: 7px;
                color: var(--ink); font-size: .94em; }

@media (max-width: 620px) {
  .wrap { padding: 20px 16px 80px; }
  .product { flex-direction: column; }
  .shots { width: auto; }
  .top2, .grid2 { grid-template-columns: 1fr; }
  .grp { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.center .mark-sm { display: block; height: 42px; width: auto; margin: 0 auto 18px; }
.center .card { padding: 30px 26px; }
.center h2 { text-align: center; font-size: 1.6rem; }
.center .card > .muted { text-align: center; }

.grp-1 { grid-template-columns: 1fr; }
.cn { font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; }
.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: .6em 0; }
.cmp > div { background: var(--bg); border-radius: 9px; padding: 10px 12px; }
.cmp-h { display: block; font-size: .7rem; text-transform: uppercase;
         letter-spacing: .1em; color: var(--muted); font-weight: 700;
         margin-bottom: .4em; }
.cmp p { margin: 0 0 .25em; font-size: .9rem; }
.rival { background: var(--warn-bg); color: var(--warn); border-radius: 8px;
         padding: 7px 11px; }
.match-high { border-left: 3px solid var(--ok); }
.match-medium { border-left: 3px solid var(--warn); }
.match-low { border-left: 3px solid var(--err); }
.pill-high { color: var(--ok); border-color: currentColor; background: transparent; }
.pill-medium { color: var(--warn); border-color: currentColor; background: transparent; }
.pill-low { color: var(--err); border-color: currentColor; background: transparent; }
@media (max-width: 620px) { .cmp { grid-template-columns: 1fr; } }
.headbtns { display: flex; gap: 9px; flex-wrap: wrap; }

/* ---------- upload, built for standing at a booth ---------- */
.drop.filled { border-style: solid; border-color: var(--ok); color: var(--ok); }
.drop svg { opacity: .7; }
.hint { background: var(--bg); border-radius: 9px; padding: 10px 13px;
        font-size: .88rem; color: var(--muted); margin: 1em 0 0; }
.hint strong { color: var(--ink); }
.pickone { margin-top: 1.2em; }
.inline-new { display: flex; gap: 8px; }
.inline-new select { flex: 1; min-width: 0; }
.inline-new select:disabled { opacity: .45; }
.ghost { flex: 0 0 auto; border-style: dashed; color: var(--muted); }
.newbox { display: grid; gap: 8px; margin-top: 10px; }
.scan { display: flex; align-items: center; justify-content: center; gap: 9px;
        margin: 4px 0 0; padding: 13px; border: 1px dashed var(--line);
        border-radius: 9px; cursor: pointer; color: var(--red);
        font-size: .92rem; font-weight: 600; }
.scan:hover { background: rgba(190,33,49,.04); border-color: var(--red); }
.scan input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.big { padding: 15px 18px; font-size: 1.02rem; }

/* ---------- product detail ---------- */
.crumb { font-size: .86rem; color: var(--muted); margin: .4em 0 0; }
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--red); }

.tile-open { display: block; color: inherit; }
.tile-open:hover { text-decoration: none; }
.tile-open h4 { color: var(--red); }

.detail { display: grid; grid-template-columns: 340px 1fr; gap: 22px;
          align-items: start; }
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.gallery .shot { position: relative; display: block; }
.gallery img { width: 100%; aspect-ratio: 3/4; object-fit: cover;
               border-radius: 9px; border: 1px solid var(--line);
               background: var(--bg); display: block; }
.gallery .is-hero img { outline: 2px solid var(--red); outline-offset: -2px; }
.shot-tag { position: absolute; left: 6px; bottom: 6px; font-size: .66rem;
            background: rgba(0,0,0,.66); color: #fff; padding: 2px 7px;
            border-radius: 99px; }

.specs { background: var(--panel); border: 1px solid var(--line);
         border-radius: var(--r); padding: 18px 20px; }
dl.spec { display: grid; grid-template-columns: 132px 1fr; gap: 10px 16px;
          margin: 0; align-items: start; }
dl.spec dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em;
             color: var(--muted); font-weight: 700; padding-top: 3px; }
dl.spec dd { margin: 0; }
dl.spec dd p { margin: 0; }
.pre { white-space: pre-wrap; }
.big-fig { font-size: 1.3rem; font-weight: 650; }
.cur-tag { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
           color: var(--muted); font-weight: 700; margin-left: 3px; }
.cur-tag.unknown { color: var(--warn); }

@media (max-width: 800px) {
  .detail { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(3, 1fr); }
  dl.spec { grid-template-columns: 1fr; gap: 3px 0; }
  dl.spec dt { margin-top: .8em; }
}

.askwho { border-left: 3px solid var(--warn); }
.askwho .inline-new { margin-top: .8em; }
.askwho input[name=new_supplier] { flex: 1; min-width: 0; }
.supgroup { margin: 1.8em 0 .7em; padding-bottom: .4em;
            border-bottom: 2px solid var(--line); font-family: var(--serif);
            font-size: 1.15rem; }
.supgroup:first-of-type { margin-top: .6em; }

/* ---------- dashboard ---------- */
.kpis { display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr);
        margin-bottom: 1.6em; }
.kpi { background: var(--panel); border: 1px solid var(--line);
       border-radius: var(--r); padding: 20px 22px; display: block;
       color: inherit; transition: border-color .16s, transform .16s; }
.kpi:hover { border-color: var(--muted); transform: translateY(-2px); }
.kpi-n { display: block; font-family: var(--serif); font-size: 2.3rem;
         font-weight: 500; line-height: 1; color: var(--ink); }
.kpi:first-child .kpi-n { color: var(--red); }
.kpi-l { display: block; margin-top: .4em; font-size: .82rem; color: var(--muted); }

.attn { align-items: flex-start; }
.attn .grow { display: flex; flex-direction: column; gap: 2px; }
.attn-ready { border-left: 3px solid var(--ok); }
.attn-warn { border-left: 3px solid var(--warn); }
.attn-reading { border-left: 3px solid var(--red); }
.attn-info { border-left: 3px solid var(--line); }

.twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
          align-items: start; }
.twocol h3 { margin-top: 1.6em; }

/* ---------- supplier directory ---------- */
.tablewrap { overflow-x: auto; border: 1px solid var(--line);
             border-radius: var(--r); background: var(--panel); }
table.dir { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.dir th { text-align: left; font-size: .7rem; text-transform: uppercase;
               letter-spacing: .09em; color: var(--muted); font-weight: 700;
               padding: 11px 14px; border-bottom: 1px solid var(--line);
               background: var(--bg); white-space: nowrap; }
table.dir td { padding: 12px 14px; border-bottom: 1px solid var(--line);
               vertical-align: top; }
table.dir tr:last-child td { border-bottom: 0; }
table.dir tbody tr:hover { background: rgba(0,0,0,.018); }
table.dir .num { text-align: right; white-space: nowrap; }
.block { display: block; }

@media (max-width: 860px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .twocol { grid-template-columns: 1fr; }
}

/* ---------- refinements ---------- */

/* A supplier's name is the thing you read, not the thing you click on for
   colour. Weight carries it; red is saved for what you can do. */
table.dir td strong, .row strong { font-weight: 600; color: var(--ink); }
table.dir a:hover strong { color: var(--red); }
table.dir td { line-height: 1.45; }
table.dir th { font-size: .68rem; padding: 13px 16px; }
table.dir td { padding: 15px 16px; }
table.dir td:first-child { max-width: 22ch; }

/* Below the table's comfortable width, each row becomes a small card rather
   than something you scroll sideways to read. */
@media (max-width: 760px) {
  .tablewrap { border: 0; background: none; overflow: visible; }
  table.dir, table.dir tbody, table.dir tr, table.dir td { display: block; width: auto; }
  table.dir thead { display: none; }
  table.dir tr { background: var(--panel); border: 1px solid var(--line);
                 border-radius: var(--r); padding: 14px 16px; margin-bottom: 10px; }
  table.dir td { border: 0; padding: 2px 0; max-width: none; }
  table.dir td:first-child { font-size: 1.02rem; margin-bottom: .4em; }
  table.dir td.num { text-align: left; }
  table.dir td:empty { display: none; }
  table.dir td[data-l]::before { content: attr(data-l) " "; color: var(--faint);
                                 font-size: .78rem; }
  /* a row with nothing in it says nothing at all */
  table.dir td[data-l="Contact"]:not(:has(*)):not(:has(:not(:empty))) { display: none; }
}

/* The sign-out row should not look like a navigation choice. */
.side .foot button { font-size: .85rem; color: rgba(255,255,255,.45); }

/* Pills sit quietly unless they mean something is wrong. */
.pill { font-weight: 500; }

/* A little more air between a page title and what follows it. */
.head + h3 { margin-top: 1.4em; }
.head p.muted { margin-top: .35em; }

/* Buttons: calmer secondary, so the primary one is the only loud thing. */
button, .btn { font-size: .93rem; }
.btn:not(.primary), button:not(.primary):not(.link) { color: var(--muted); }
.btn:not(.primary):hover, button:not(.primary):not(.link):hover {
  color: var(--ink); border-color: var(--muted); }
.btn.primary, .btn.primary:hover { color: #fff; }

/* ---------- language ---------- */
.langpick { display: flex; align-items: center; gap: 7px; padding: 0 12px 12px;
            margin: 0 0 10px; border-bottom: 1px solid rgba(255,255,255,.1); }
.langpick button { width: auto; padding: 3px 7px; border: 0; background: none;
                   color: rgba(255,255,255,.4); font-size: .84rem; cursor: pointer;
                   border-radius: 6px; }
.langpick button:hover { color: #fff; background: rgba(255,255,255,.08); }
.langpick button.on { color: #fff; font-weight: 600; }
.langpick span { color: rgba(255,255,255,.2); font-size: .8rem; }
:lang(zh) body, html[lang="zh"] body {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
               "Noto Sans SC", var(--sans);
}
html[lang="zh"] h2, html[lang="zh"] .kpi-n, html[lang="zh"] .cardno,
html[lang="zh"] .supgroup {
  font-family: "PingFang SC", "Songti SC", "Microsoft YaHei", var(--serif);
}
html[lang="zh"] h3 { letter-spacing: .04em; }

/* ---------- login fields: room for the icons ----------
   The generic input rule further up sets `padding` as a shorthand, which wipes
   out any padding-left declared earlier at the same specificity — so the icon
   ended up sitting on top of the text. These selectors are specific enough to
   win, and they reserve room on both sides: the icon on the left, and the
   show-password button on the right. */
.field input[type="email"],
.field input[type="password"],
.field input[type="text"] {
  padding-left: 42px;
}
.field input[type="password"] { padding-right: 44px; }
.field .ico { left: 14px; width: 18px; height: 18px; }
.field .peek { right: 6px; }

/* ---------- the mark in the rail ----------
   Bigger, and centred over the navigation rather than tucked into the corner:
   at the top of a narrow rail it reads as the header of the whole column. */
.side .brand { display: flex; justify-content: center; align-items: center;
               margin: 14px 0 34px; padding: 0; }
.side .brand img { height: 58px; width: auto; }

@media (max-width: 860px) {
  .side .brand { margin: 6px 0 26px; }
  .side .brand img { height: 50px; }
}

.keepme { display: flex; align-items: flex-start; gap: 10px; margin: 1.3em 0 0;
          color: var(--ink); font-size: .92rem; cursor: pointer; }
.keepme input { width: auto; margin-top: 2px; flex: 0 0 auto; }
.keepme .block { margin-top: 1px; }
.grp-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 620px) { .grp-2 { grid-template-columns: 1fr; } }

/* ---------- compare ---------- */
.arrow { align-self: center; color: var(--muted); }
.cmp-t .thumbs { width: 106px; white-space: nowrap; }
.cmp-t .thumbs img { width: 46px; height: 46px; object-fit: cover; border-radius: 6px;
                     border: 1px solid var(--line); margin-right: 4px; }
.up { color: var(--err); font-weight: 650; }
.down { color: var(--ok); font-weight: 650; }
.moved { display: block; margin-top: .3em; font-size: .78rem; color: var(--warn); }
.nudge { margin: -.6em 0 1.2em; }
@media (max-width: 760px) { .cmp-t .thumbs { width: auto; } }

/* ---------- deleting ---------- */
.danger-btn { border-color: var(--err); color: var(--err); }
.danger-btn:hover { background: var(--err-bg); border-color: var(--err); color: var(--err); }
.card.danger summary { color: var(--err); }
.binthumb { width: 38px; height: 38px; object-fit: cover; border-radius: 6px;
            border: 1px solid var(--line); flex: 0 0 38px; }
.card.danger .inline-new input { flex: 0 0 140px; }

/* product page: the photo column can grow (add / borrow), the specs stay put */
.side-col { display: grid; gap: 10px; align-content: start; }
.gallery figure { margin: 0; }
.gallery .shot a { position: relative; display: block; }
.shot-acts { display: flex; gap: 6px; margin-top: 5px; align-items: center; }
.shot-acts .use-hero { flex: 1; font-size: 12px; padding: 5px 8px; }
.shot-acts .detach { font-size: 15px; line-height: 1; padding: 4px 9px; }
.addphoto { display: grid; gap: 8px; }
.filepick { cursor: pointer; display: inline-block; text-align: center; }
.borrow summary { cursor: pointer; }
.borrow-grid { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.borrow-one { position: relative; padding: 0; border: 1px solid var(--line);
  border-radius: 8px; overflow: hidden; background: none; cursor: pointer; }
.borrow-one img { display: block; width: 90px; height: 120px; object-fit: cover; }
.borrow-one:hover, .borrow-one:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }

/* ---- help: the manual, readable on a phone and printable as a PDF ---- */
.help { max-width: 760px; line-height: 1.55; }
.help .lead { font-size: 16px; margin: 0 0 18px; }
.help h3 { margin: 26px 0 10px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.help h4 { margin: 18px 0 6px; font-size: 15px; }
.help ol, .help ul { padding-left: 22px; margin: 6px 0 12px; }
.help li { margin: 5px 0; }
.help li ul { margin: 4px 0 2px; }
.help code { background: var(--paper2, #f3f0ee); padding: 1px 5px; border-radius: 4px; font-size: 13px; }
.help .faq dt { font-weight: 600; margin-top: 12px; }
.help .faq dd { margin: 3px 0 0; }
.strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 16px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.strip .chip { padding: 6px 9px; border-radius: 8px; border: 1px solid var(--line);
  font-size: 12px; text-align: center; line-height: 1.2; }
.strip .chip small { font-weight: 400; opacity: .7; }
.strip .chip.card { border-color: var(--red); color: var(--red); font-weight: 700; }
.strip .chip.biz { background: var(--ink, #1a1315); color: #fff; border-color: transparent; }
.strip .arrow { opacity: .5; }

@media print {
  .side, .topbar, .scrim, .noprint, .foot { display: none !important; }
  .shell { display: block; }
  .wrap, body { background: #fff; color: #000; }
  .wrap { padding: 0; max-width: none; }
  .help { max-width: none; }
  .help h3 { page-break-after: avoid; }
  .strip .chip.card { color: #000; }
  a { color: inherit; text-decoration: none; }
  @page { margin: 16mm 14mm; }
}

/* fairs: one row per fair, the edit form folded under it */
.fairform h3 { margin: 0 0 10px; }
.fairgrid { display: grid; grid-template-columns: 2fr 1.2fr 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.fairgrid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.fairrow { flex-wrap: wrap; }
.fairedit { flex-basis: 100%; }
.fairedit summary { list-style: none; display: inline-block; cursor: pointer; }
.fairedit summary::-webkit-details-marker { display: none; }
.fairedit[open] summary { margin-bottom: 10px; }
.fairedit form + p, .fairedit form + form { margin-top: 8px; }
@media (max-width: 700px) { .fairgrid { grid-template-columns: 1fr 1fr; } }

.hint.warn { color: #7a3f00; background: #fff4e3; border: 1px solid #f0c48c; }

.shots a.extra img { opacity: .9; }
.shots { width: 240px; }

.card.discard { display: flex; align-items: center; gap: 14px; justify-content: space-between; flex-wrap: wrap; }

.card.merge summary { cursor: pointer; font-weight: 600; }
.card.merge .warnline { color: #7a3f00; margin: 8px 0 4px; }

.rows.team .row.off { opacity: .55; }
.rows.team .row form.inline { margin: 0; }
.small-btn { padding: 4px 10px; font-size: .82em; }
.card-title { margin: 0 0 12px; font-size: 1em; }

.price-pick { display: inline-flex; gap: 4px; margin-left: 6px; }
.price-pick .chip { padding: 2px 8px; font-size: .8em; border-radius: 99px; border: 1px solid var(--warn); color: var(--warn); background: var(--warn-bg); cursor: pointer; }

.field-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 5px; padding: 5px 8px; border-radius: 8px; background: var(--warn-bg); color: var(--warn); font-size: .78em; font-weight: 400; }
.field-hint .chip { padding: 1px 9px; border-radius: 99px; border: 1px solid var(--warn); background: #fff; color: var(--warn); cursor: pointer; font-weight: 600; }
.field-hint .why { flex-basis: 100%; opacity: .85; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.grp .f-moq { grid-column: span 2; }
.f-moq .cur { width: 72px; flex: 0 0 72px; }
.grp > .field-hint.wide { grid-column: 1 / -1; margin-top: 0; }
.field-hint { font-size: .82em; }

.head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stats { display: flex; gap: 12px; flex-wrap: wrap; margin: 12px 0 18px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; min-width: 150px; display: flex; flex-direction: column; }
.stat b { font-size: 1.6em; }
.stat span { color: var(--muted); font-size: .82em; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.bars { list-style: none; margin: 0; padding: 0; }
.bars li { display: grid; grid-template-columns: minmax(110px, 160px) 1fr auto auto; align-items: center; gap: 8px; margin: 5px 0; font-size: .88em; }
.bars .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bars .bar { height: 8px; border-radius: 99px; background: var(--red); width: var(--w); opacity: .75; }
.table-wrap { overflow-x: auto; }
table.corr { width: 100%; border-collapse: collapse; font-size: .88em; }
table.corr th, table.corr td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.corr td.ai { color: var(--err); text-decoration: line-through; max-width: 220px; }
table.corr td.fix { color: var(--ok); max-width: 220px; }
table.corr img.corr-thumb { width: 54px; height: 54px; object-fit: cover; border-radius: 6px; display: block; }
table.corr td.ai img { opacity: .55; outline: 2px solid var(--err); }
table.corr td.fix img { outline: 2px solid var(--ok); }
/* a wide table scrolls inside its box instead of widening the page on a phone */
.shell > .wrap { min-width: 0; }