/* QC 外贸小工具 · 共享设计系统(精装船运单据风)。portal 与各工具页共用。 */
  @font-face{font-family:'Fraunces';src:url('/fonts/fraunces-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
  @font-face{font-family:'Fraunces';src:url('/fonts/fraunces-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
  @font-face{font-family:'Fraunces';src:url('/fonts/fraunces-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
  @font-face{font-family:'Plex Mono';src:url('/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
  @font-face{font-family:'Plex Mono';src:url('/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}

  :root{
    --paper:#f1ecdf; --side:#e9e2d1; --surface:#fdfbf4; --surface2:#f6f1e6;
    --ink:#211d15; --ink2:#5b5443; --mute:#968d78;
    --line:#e0d8c4; --line2:#c9bea4;
    --stamp:#bd3a1c; --stamp-d:#9c2f15; --stamp-tint:rgba(189,58,28,.08);
    --ok:#3a7a52;
    --serif:'Fraunces','Songti SC','STSong','PingFang SC',Georgia,serif;
    --mono:'Plex Mono','SF Mono',Menlo,Consolas,monospace;
    --sans:'PingFang SC','Microsoft YaHei',-apple-system,system-ui,sans-serif;
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  body{
    background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:15px; line-height:1.6;
    background-image:radial-gradient(var(--line) .8px, transparent .8px);
    background-size:22px 22px; background-position:-1px -1px;
  }
  ::selection{background:var(--stamp-tint)}
  .app{display:flex; min-height:100vh}

  /* ---------- sidebar ---------- */
  .sidebar{
    width:262px; flex-shrink:0; background:var(--side); border-right:1px solid var(--line2);
    padding:26px 18px; position:sticky; top:0; height:100vh; overflow:auto;
  }
  .brand{ animation:rise .6s both }
  .brand .logo{ font-family:var(--serif); font-weight:700; font-size:23px; letter-spacing:-.01em; line-height:1.15; color:var(--ink) }
  .brand .co{ font-family:var(--mono); font-size:10.5px; letter-spacing:.22em; color:var(--mute); margin-top:7px; text-transform:uppercase }
  .badge{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10.5px; color:var(--ink2);
          background:var(--surface); border:1px solid var(--line2); padding:3px 9px; border-radius:6px; margin:16px 0 22px; animation:rise .6s .05s both }
  .badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--ok) }
  .navsec{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute);
           margin:18px 8px 8px; animation:rise .6s both }
  .nav-item{ position:relative; display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:9px;
             cursor:pointer; color:var(--ink2); font-weight:500; font-size:14.5px; user-select:none; transition:.15s; animation:rise .5s both }
  .nav-item .ic{ font-size:15px; width:18px; text-align:center; filter:grayscale(.2) }
  .nav-item:hover{ background:var(--surface); color:var(--ink) }
  .nav-item.on{ background:var(--surface); color:var(--ink); font-weight:600; box-shadow:0 1px 2px rgba(33,29,21,.04) }
  .nav-item.on::before{ content:""; position:absolute; left:-18px; top:8px; bottom:8px; width:3px; background:var(--stamp); border-radius:0 3px 3px 0 }
  .nav-sub{ display:flex; align-items:center; gap:8px; padding:7px 12px 7px 40px; border-radius:9px; cursor:pointer;
            color:var(--mute); font-size:13px; user-select:none; transition:.15s; position:relative; animation:rise .5s both }
  .nav-sub::before{ content:""; position:absolute; left:24px; top:0; bottom:50%; width:9px; border-left:1px solid var(--line2); border-bottom:1px solid var(--line2); border-radius:0 0 0 4px }
  .nav-sub:hover{ background:var(--surface); color:var(--ink) }
  .nav-sub.on{ color:var(--stamp); font-weight:600 }
  .soon{ font-family:var(--mono); font-size:9px; letter-spacing:.08em; color:var(--mute); border:1px solid var(--line2);
         padding:1px 5px; border-radius:5px; margin-left:auto }

  /* ---------- content ---------- */
  .content{ flex:1; padding:40px 46px 100px; max-width:1040px }
  .content.bleed{ padding:0; max-width:none }
  .navtoggle{ position:fixed; left:12px; top:12px; z-index:60; display:none; align-items:center; gap:6px;
    font-family:var(--mono); font-size:12px; padding:7px 12px; border-radius:9px; cursor:pointer;
    background:var(--surface); border:1px solid var(--line2); color:var(--ink2); box-shadow:0 2px 10px rgba(33,29,21,.16) }
  .navtoggle:hover{ border-color:var(--stamp); color:var(--stamp) }
  .app.nav-collapsed .sidebar{ display:none }
  .app.nav-collapsed .navtoggle{ display:inline-flex }
  .navcollapse{ font-family:var(--mono); font-size:11px; color:var(--mute); cursor:pointer; margin-bottom:12px; display:inline-block }
  .navcollapse:hover{ color:var(--stamp) }
  .view{ display:none } .view.on{ display:block }
  .vhead{ margin-bottom:24px; animation:rise .55s both }
  .vhead .step{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--stamp); text-transform:uppercase }
  .view h2{ font-family:var(--serif); font-weight:600; font-size:30px; letter-spacing:-.015em; margin:6px 0 0; color:var(--ink) }
  .view h2 .tag{ font-family:var(--mono); font-weight:400; font-size:12px; letter-spacing:.04em; color:var(--mute); vertical-align:middle; margin-left:10px }
  .lead{ color:var(--ink2); font-size:14px; max-width:640px; margin-top:10px }
  .rule{ height:1px; background:var(--line2); margin:20px 0 22px; position:relative }
  .rule::after{ content:""; position:absolute; left:0; top:-1px; width:46px; height:3px; background:var(--stamp) }

  /* ---------- panels / forms ---------- */
  .card{ position:relative; background:var(--surface); border:1px solid var(--line2); border-radius:13px;
         padding:22px; margin-bottom:18px; box-shadow:0 1px 0 var(--line), 0 14px 30px -22px rgba(33,29,21,.25); animation:rise .55s .06s both }
  .card.mark::before,.card.mark::after{ content:""; position:absolute; width:9px; height:9px; opacity:.5 }
  .card.mark::before{ top:9px; left:9px; border-top:1.5px solid var(--ink2); border-left:1.5px solid var(--ink2) }
  .card.mark::after{ bottom:9px; right:9px; border-bottom:1.5px solid var(--ink2); border-right:1.5px solid var(--ink2) }
  label{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--mute); margin:0 0 6px; text-transform:uppercase }
  label .raw{ text-transform:none; letter-spacing:0; font-family:var(--sans) }
  .row{ display:flex; gap:14px; flex-wrap:wrap } .row>div{ flex:1; min-width:130px }
  input[type=text],select,.drop{ width:100%; background:var(--surface2); border:1px solid var(--line2);
        color:var(--ink); border-radius:8px; padding:11px 12px; font-size:14px; font-family:var(--sans); transition:.15s }
  input[type=text]:focus,select:focus{ outline:none; border-color:var(--stamp); box-shadow:0 0 0 3px var(--stamp-tint) }
  input::placeholder{ color:#b3ab97 }
  .drop{ border-style:dashed; border-color:var(--line2); text-align:center; cursor:pointer; color:var(--mute); padding:30px 12px; font-family:var(--mono); font-size:13px }
  .drop:hover{ border-color:var(--stamp); color:var(--ink2) }
  .drop.has{ color:var(--ink); border-color:var(--stamp); border-style:solid; background:var(--stamp-tint) }
  button{ font-family:var(--sans); background:var(--stamp); color:#fdf6ee; border:0; border-radius:8px; padding:12px 22px;
          font-weight:600; font-size:14.5px; cursor:pointer; transition:.15s; box-shadow:0 1px 0 var(--stamp-d) }
  button:hover{ background:var(--stamp-d) } button:active{ transform:translateY(1px); box-shadow:none }
  button.ghost{ background:transparent; color:var(--stamp); border:1px dashed var(--stamp); box-shadow:none }
  button.ghost:hover{ background:var(--stamp-tint) }
  button:disabled{ opacity:.45; cursor:default }
  .hint{ font-size:12px; color:var(--mute); margin-top:7px }
  .link{ color:var(--stamp); cursor:pointer; border-bottom:1px solid var(--stamp-tint); font-weight:500 }
  .mt{ margin-top:14px }

  /* ---------- results ---------- */
  table{ width:100%; border-collapse:collapse; font-size:13.5px }
  td{ padding:9px 4px; border-bottom:1px solid var(--line) }
  td.k{ color:var(--mute); width:48%; font-family:var(--mono); font-size:12px }
  td.v{ font-weight:500; font-family:var(--mono); color:var(--ink) }
  .flag{ color:var(--stamp); font-size:12px; font-family:var(--mono) }
  .preview img{ width:100%; border:1px solid var(--line2); border-radius:10px; background:#fff }
  .dl{ display:inline-block; margin:12px 8px 0 0; background:var(--ink); color:#fdf6ee; text-decoration:none;
       padding:11px 18px; border-radius:8px; font-weight:600; font-size:13.5px; transition:.15s }
  .dl:hover{ background:#332e22 }
  .dl.alt{ background:transparent; color:var(--ink); border:1px solid var(--line2) } .dl.alt:hover{ background:var(--surface2) }
  .err{ color:var(--stamp-d); background:var(--stamp-tint); border:1px solid var(--stamp); padding:13px; border-radius:10px }
  .spin{ display:inline-block; width:14px; height:14px; border:2px solid #fdf6ee66; border-top-color:#fdf6ee;
         border-radius:50%; animation:s .7s linear infinite; vertical-align:-2px; margin-right:8px }
  .prod{ border:1px solid var(--line2); border-radius:11px; padding:16px; margin-bottom:12px; position:relative; background:var(--surface) }
  .prod .rm{ position:absolute; top:12px; right:14px; color:var(--stamp); cursor:pointer; font-size:12px; font-family:var(--mono) }

  /* ---------- price (preview) ---------- */
  .soonbox{ text-align:center; padding:30px 20px }
  .soonbox .big{ font-family:var(--serif); font-size:21px; color:var(--ink); margin-bottom:6px }
  .ptable{ width:100%; font-family:var(--mono); font-size:13px }
  .ptable td{ padding:9px 12px; border-bottom:1px solid var(--line) } .ptable .up{ color:var(--stamp) } .ptable .dn{ color:var(--ok) }
  .pill{ font-family:var(--mono); font-size:10px; border:1px solid var(--line2); border-radius:6px; padding:2px 7px; color:var(--mute) }
  .chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px }
  .chip{ font-family:var(--mono); font-size:12px; color:var(--ink2); background:var(--surface2); border:1px solid var(--line2); border-radius:7px; padding:5px 10px }
  .chip b{ color:var(--ink); font-weight:600 }
  .mon-head{ display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:8px; margin-bottom:14px }
  .mon-name{ font-family:var(--serif); font-size:18px; color:var(--ink); font-weight:600 }
  .mon-en{ font-family:var(--mono); font-size:12px; color:var(--mute); margin-left:4px }
  /* 选品数据库 */
  .stats-strip{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px }
  .stat{ font-family:var(--mono); font-size:12px; background:var(--surface); border:1px solid var(--line2); border-radius:8px; padding:7px 12px; color:var(--ink2) }
  .stat b{ color:var(--ink); font-size:15px; font-weight:600 }
  .dbctl{ display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin:14px 0 12px }
  .dbctl input{ width:230px } .dbctl select{ width:auto }
  .chip-btn{ font-family:var(--mono); font-size:12px; padding:6px 13px; border:1px solid var(--line2); border-radius:20px; cursor:pointer; color:var(--ink2); background:var(--surface); user-select:none; transition:.12s }
  .chip-btn:hover{ border-color:var(--stamp) } .chip-btn.on{ background:var(--stamp); color:#fdf6ee; border-color:var(--stamp) }
  .tbl-wrap{ overflow-x:auto; border:1px solid var(--line2); border-radius:12px; background:var(--surface); box-shadow:0 14px 30px -22px rgba(33,29,21,.25) }
  table.db{ width:100%; border-collapse:collapse; font-family:var(--mono); font-size:12.5px; white-space:nowrap }
  table.db th{ position:sticky; top:0; background:var(--surface2); text-align:right; padding:11px 13px; color:var(--mute); font-weight:500; border-bottom:1px solid var(--line2); cursor:pointer; font-size:11px; user-select:none }
  table.db th.l, table.db td.l{ text-align:left }
  table.db th:hover{ color:var(--ink) } table.db th.sorted{ color:var(--stamp) }
  table.db td{ padding:9px 13px; text-align:right; border-bottom:1px solid var(--line) }
  table.db tbody tr{ cursor:pointer } table.db tbody tr:hover td{ background:var(--surface2) }
  .niche-name{ font-family:var(--sans); color:var(--ink); font-weight:600 }
  .pos{ color:var(--ok) } .neg{ color:var(--stamp) }
  table.db td{ line-height:1.4 }
  .tagcell{ font-family:var(--sans); font-size:11.5px; color:var(--ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px; text-align:left }
  .drill{ background:var(--surface); border:1px solid var(--line2); border-radius:11px; padding:16px 18px; margin:14px 0 4px }
  .note-fold{ font-family:var(--mono); font-size:12px; color:var(--mute); cursor:pointer; margin-bottom:14px }
  .note-fold:hover{ color:var(--ink2) }
  /* 选品周报 商品卡 */
  .rgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(184px,1fr)); gap:14px; margin:12px 0 6px }
  .rcard{ background:var(--surface); border:1px solid var(--line2); border-radius:12px; overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column; transition:.15s }
  .rcard:hover{ box-shadow:0 16px 32px -20px rgba(33,29,21,.35); transform:translateY(-2px); border-color:var(--line2) }
  .rthumb{ aspect-ratio:1/1; background:#fff; display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--line); padding:8px }
  .rthumb img{ max-width:100%; max-height:100%; object-fit:contain }
  .rthumb .noimg{ color:var(--mute); font-family:var(--mono); font-size:12px }
  .rbody{ padding:11px 12px; display:flex; flex-direction:column; gap:7px; flex:1 }
  .rname{ font-size:13px; line-height:1.45; color:var(--ink); font-weight:500; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
  .rmeta{ font-family:var(--mono); font-size:10.5px; color:var(--mute); display:flex; flex-wrap:wrap; gap:5px; align-items:center }
  .rsrc{ font-size:10px; font-family:var(--mono); padding:1px 6px; border-radius:4px; background:var(--stamp-tint); color:var(--stamp-d) }
  .rsrc.promo{ background:#f3ead4; color:#8a6d1e }
  .rprice{ font-family:var(--mono); font-weight:600; font-size:16px; color:var(--ink); margin-top:auto }
  .rbadges{ display:flex; flex-wrap:wrap; gap:4px }
  .rbadge{ font-size:10px; font-family:var(--mono); padding:2px 6px; border-radius:5px; background:var(--surface2); border:1px solid var(--line2); color:var(--ink2) }
  .rbadge.rise{ color:var(--stamp); border-color:var(--stamp) }
  .icard{ background:var(--surface); border:1px solid var(--line2); border-radius:12px; padding:16px 18px; margin-bottom:14px; display:flex; gap:16px }
  .ithumb{ width:90px; height:90px; flex-shrink:0; background:#fff; border:1px solid var(--line); border-radius:8px; display:flex; align-items:center; justify-content:center; padding:6px }
  .ithumb img{ max-width:100%; max-height:100% }
  .ibox h4{ margin:0 0 4px; font-size:11.5px; font-family:var(--mono); color:var(--mute) }
  .ibox ul{ margin:0; padding-left:16px; font-size:12.5px; color:var(--ink2); line-height:1.55 }
  .icols{ display:flex; gap:26px; flex-wrap:wrap; margin:8px 0 10px }
  /* 样品表 · 照片核对 */
  .drop.over{ border-color:var(--stamp); background:var(--stamp-tint) }
  .dimgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:10px; margin-top:6px }
  .dimrow{ display:flex; align-items:center; gap:9px; background:var(--surface); border:1px solid var(--line2); border-radius:9px; padding:7px 10px }
  .dimlab{ font-family:var(--mono); font-size:11px; color:var(--mute); white-space:nowrap; width:40px }
  .dimrow input{ flex:1; min-width:0 }
  /* source photo the operator reads the number off: big, WHOLE photo (contain), full-quality, click = original */
  .vthumb{ width:104px; height:104px; object-fit:contain; border-radius:6px; border:1px solid var(--line2); background:#fff; cursor:zoom-in; flex-shrink:0 }
  .pstrip{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px }
  .pchip{ width:184px; border:2px solid transparent; border-radius:8px; overflow:hidden; background:var(--surface) }
  .pchip a{ display:block }
  .pchip img{ width:100%; height:150px; object-fit:contain; display:block; background:#fff; cursor:zoom-in }
  .pchip.cover{ border-color:var(--stamp) }
  .pchip select{ width:100%; font-size:10px; font-family:var(--mono); border:0; border-top:1px solid var(--line); background:var(--surface2); color:var(--ink2); padding:3px 2px; cursor:pointer }
  .pchip select.ptype{ color:var(--ink); background:#fff } .pchip.cover select.ptype{ color:var(--stamp); font-weight:600 }
  .dimin.ai{ background:#fdf6e9; border-color:#e0c089 }
  .stype{ width:100%; padding:8px 10px; border:1px solid var(--line2); border-radius:8px; background:var(--surface); font-family:inherit; font-size:13px; color:var(--ink); cursor:pointer }

  @keyframes s{ to{ transform:rotate(360deg) } }
  @keyframes rise{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
  @media (max-width:780px){
    .app{ flex-direction:column } .sidebar{ width:auto; height:auto; position:static }
    .nav-item.on::before{ display:none } .content{ padding:24px 18px 80px }
  }