:root{
      --tcg-bg:#f4f6f8;
      --tcg-card:#ffffff;
      --tcg-border:rgba(15,23,42,.10);
      --tcg-text:#0f172a;
      --tcg-muted:#64748b;
      --tcg-primary:#1e3a8a;
      --tcg-primary-2:#3b82f6;
      --tcg-danger:#dc2626;
      --tcg-success:#16a34a;
      --tcg-radius:16px;
    }

    html,body{ height:100%; }
    body{
      background: var(--tcg-bg);
      color: var(--tcg-text);
      
      font-size: 13px;
      line-height: 1.45;
      min-width: 1200px;
    }

    .app-wrap{
      display:flex;
      min-height:100vh;
    }

    /* Sidebar */
    .side{
      width: 260px;
      position: sticky;
      top: 0;
      height: 100vh;
      padding: 18px 14px;
      background: rgba(255,255,255,.88);
      backdrop-filter: blur(10px);
      border-right: 1px solid var(--tcg-border);
    }

    .brand{
      display:flex;
      align-items:center;
      gap: 10px;
      padding: 10px 10px 14px;
      border-radius: 14px;
    }
    .brand img{
      width: 44px;
      height: 44px;
      object-fit: contain;
      border-radius: 12px;
      background:#fff;
      border: 1px solid var(--tcg-border);
      padding: 6px;
    }
    .brand .name{
      font-weight: 800;
      letter-spacing: .2px;
      line-height: 1.1;
      font-size: 14px;
    }
    .brand .sub{
      color: var(--tcg-muted);
      font-size: 11px;
      margin-top: 2px;
    }

    .side-divider{
      height:1px;
      background: var(--tcg-border);
      margin: 12px 10px;
    }

    .navgrp{ display:flex; flex-direction:column; gap:8px; padding: 0 6px; }
    .navbtn{
      width: 100%;
      text-align:left;
      border-radius: 14px;
      border: 1px solid transparent;
      padding: 10px 12px;
      background: transparent;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      color: var(--tcg-text);
      transition: background .12s ease, transform .06s ease, border-color .12s ease, box-shadow .12s ease;
      font-size: 13px;
      font-weight: 650;
    }
    .navbtn .hint{ color: var(--tcg-muted); font-weight: 600; font-size: 11px; }
    .navbtn:hover{
      background: rgba(59,130,246,.08);
      border-color: rgba(59,130,246,.18);
      transform: translateY(-1px);
      box-shadow: 0 10px 22px rgba(15,23,42,.06);
    }
    .navbtn.active{
      background: rgba(30,58,138,.10);
      border-color: rgba(30,58,138,.25);
      box-shadow: 0 10px 22px rgba(15,23,42,.08);
    }
    .navbtn.active::before{
      content:"";
      width: 4px;
      height: 18px;
      border-radius: 999px;
      background: linear-gradient(180deg, var(--tcg-primary), var(--tcg-primary-2));
      margin-right: 10px;
    }
    .navbtn.active{
      padding-left: 10px;
    }

    .side-foot{
      position:absolute;
      left: 14px;
      right: 14px;
      bottom: 14px;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid var(--tcg-border);
      background: rgba(255,255,255,.72);
      color: var(--tcg-muted);
      font-size: 11px;
      line-height: 1.35;
    }

    /* Main */
    .main{
      flex: 1 1 auto;
      padding: 18px 22px 28px;
      width: 100%;
      max-width: 1700px;
      margin: 0 auto;
    }

    .topbar{
      background: var(--tcg-card);
      border: 1px solid var(--tcg-border);
      border-radius: var(--tcg-radius);
      box-shadow: 0 10px 26px rgba(15,23,42,.06);
      overflow: visible; /* allow suggest dropdown */
      margin-bottom: 14px;
    }
    .topbar-accent{
      height: 3px;
      background: linear-gradient(90deg, var(--tcg-primary), var(--tcg-primary-2));
    }
    .topbar-inner{
      padding: 14px 16px 12px;
      overflow: visible;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap: 14px;
    }
    .page-title{
      margin:0;
      font-size: 18px;
      font-weight: 850;
      letter-spacing: .2px;
    }
    .page-meta{
      color: var(--tcg-muted);
      font-size: 12px;
      margin-top: 4px;
    }

    .toolbar{
      display:flex;
      align-items:center;
      gap: 10px;
      flex-wrap:wrap;
      justify-content:flex-end;
      margin-top: 2px;
    }
    #kw{
      width: 520px;
      max-width: 56vw;
      border-radius: 14px;
      border: 1px solid var(--tcg-border);
      padding: 9px 12px;
      font-size: 13px;
      box-shadow:none;
    }

    .btn-pill{ border-radius: 999px !important; }
    .btn-soft{
      border-radius: 999px;
      border: 1px solid var(--tcg-border);
      background: #fff;
      color: var(--tcg-text);
      font-weight: 650;
      font-size: 12px;
      padding: .45rem .75rem;
      box-shadow: 0 8px 18px rgba(15,23,42,.05);
    }
    .btn-soft:hover{ transform: translateY(-1px); }

    .btn-primary-strong{
      border-radius: 999px;
      background: linear-gradient(90deg, var(--tcg-primary), var(--tcg-primary-2));
      border: 0;
      color: #fff;
      font-weight: 800;
      padding: .5rem .9rem;
      box-shadow: 0 12px 26px rgba(59,130,246,.25);
    }
    .btn-primary-strong:hover{ transform: translateY(-1px); }

    .btn-danger-strong{
      border-radius: 999px;
      background: linear-gradient(90deg, #b91c1c, var(--tcg-danger));
      border: 0;
      color: #fff;
      font-weight: 800;
      padding: .5rem .9rem;
      box-shadow: 0 12px 26px rgba(220,38,38,.22);
    }
    .btn-danger-strong:hover{ transform: translateY(-1px); }

    .stats{
      display:flex;
      gap: 10px;
      flex-wrap:wrap;
      padding: 0 16px 14px;
    }
    .stat{
      background: rgba(255,255,255,.72);
      border: 1px solid var(--tcg-border);
      border-radius: 14px;
      padding: 10px 12px;
      min-width: 120px;
    }
    .stat .k{ color: var(--tcg-muted); font-size: 11px; }
    .stat .v{ font-size: 16px; font-weight: 850; margin-top: 2px; }

    /* Pack bar */
    .packbar{
      background: var(--tcg-card);
      border: 1px solid var(--tcg-border);
      border-radius: var(--tcg-radius);
      box-shadow: 0 10px 24px rgba(15,23,42,.05);
      padding: 12px 14px;
      margin-bottom: 14px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      flex-wrap:wrap;
    }
    .packbar .left{
      display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    }
    .packbar label{
      font-size: 12px;
      color: var(--tcg-muted);
      font-weight: 700;
    }
    #packFilter{
      width: 240px;
      border-radius: 14px;
      border: 1px solid var(--tcg-border);
      font-size: 12px;
      padding: .45rem .6rem;
    }
    #packSelect{
      width: 360px;
      max-width: 52vw;
      border-radius: 14px;
      border: 1px solid var(--tcg-border);
      font-size: 12px;
      padding: .45rem .6rem;
    }

    /* Content table */
    .table-wrap{
      background: var(--tcg-card);
      border-radius: var(--tcg-radius);
      border: 1px solid var(--tcg-border);
      overflow:auto;
      box-shadow: 0 10px 24px rgba(15,23,42,.05);
    }
    .stock-table{ margin:0; width:100%; font-size:12px; }
    .stock-table thead th{
      position: sticky; top: 0; z-index: 2;
      background: #f8fafc;
      border-bottom: 1px solid rgba(0,0,0,.08);
      white-space: nowrap;
      text-align: center;
      font-weight: 800;
      letter-spacing: .2px;
      font-size: 12px;
      color: #0f172a;
    }
    .stock-table td{
      vertical-align: middle;
      text-align: center;
      padding-top: 9px;
      padding-bottom: 9px;
      border-color: rgba(0,0,0,.06);
    }
    .stock-table tbody tr:hover{ background: rgba(59,130,246,.05); }

    .thumb{
      width:40px; height:56px;
      object-fit:cover;
      border-radius:10px;
      background:#eee;
      display:block;
      margin: 0 auto;
      border: 1px solid rgba(15,23,42,.08);
    }
    .ellipsis{
      max-width: none;
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
      text-align: left;
      padding-left: 12px;
    }
    .in-ctl{
      width: 96px;
      margin: 0 auto;
      font-size: 12px;
      border-radius: 12px;
      text-align: right;
      font-variant-numeric: tabular-nums;
    }

    .meta{ font-size:12px; color: var(--tcg-muted); }
    pre.err-pre{ white-space: pre-wrap; word-break: break-word; margin:0; font-size: 12px; }

    /* keep your grid tiles mostly same */
    .card-img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:14px;background:#eee;border:1px solid rgba(15,23,42,.08);}
    .tile{height:100%;}
    .tile-check{
      position:absolute; top:10px; left:10px;
      width:20px;height:20px;border-radius:8px;
      background: rgba(255,255,255,.92);
      box-shadow: 0 6px 18px rgba(15,23,42,.14);
      display:flex; align-items:center; justify-content:center; padding:2px;
      border: 1px solid rgba(15,23,42,.10);
    }

    
    /* ===== Unified + Cleanup (v2) ===== */
    body{
      font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
      font-size: 13px;
      line-height: 1.45;
    }
    .title{ font-size: 30px; letter-spacing: .2px; }
    .topbar-inner{ gap: 14px; }
    .right-tools{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
    #packSearchTop{
      height: 34px;
      padding: 0 14px;
      font-size: 12.5px;
      border-radius: 999px !important;
    }

    /* Panels */
    .panel.cardlike{
      background: var(--tcg-card);
      border: 1px solid var(--tcg-border);
      border-radius: var(--tcg-radius);
      box-shadow: 0 10px 24px rgba(15,23,42,.05);
      overflow: hidden;
    }
    .panel-head{
      padding: 14px 16px 10px;
      border-bottom: 1px solid rgba(15,23,42,.08);
      background: linear-gradient(180deg, rgba(248,250,252,.95), rgba(248,250,252,.75));
    }
    .panel-title{ font-weight: 900; }
    .panel-sub{ color: var(--tcg-muted); margin-top: 2px; }

    /* Table layout */
    .table-wrap{ overflow:auto; }
    .stock-table{ table-layout: fixed; width:100%; }
    .stock-table thead th{
      padding: 10px 10px;
      font-size: 12px;
    }
    .stock-table td{
      padding: 10px 10px;
    }
    .stock-table tbody tr:nth-child(even){ background: rgba(15,23,42,.015); }
    .pack-cell{ text-align:left !important; }
    .pack-row-title{ font-weight: 800; font-size: 13px; line-height: 1.25; }
    .thumb{ width: 34px; height: 48px; border-radius: 10px; }

    /* Inputs / selects inside table */
    .tcg-input, .tcg-select{
      height: 32px;
      border-radius: 10px !important;
      border-color: rgba(15,23,42,.14) !important;
      font-size: 12px !important;
    }
    .tcg-select{ padding-right: 28px; }
    .w-qty, .w-outqty{ width: 92px !important; }
    .w-cost, .w-outprice{ width: 118px !important; }

    /* Action buttons in rows */
    .tcg-btn-action{
      height: 32px;
      padding: 0 12px;
      border-radius: 999px;
      font-weight: 800;
      white-space: nowrap;
    }

    /* Make the "采购清单" pill match buttons */
    .pill-count{
      height: 32px;
      padding: 0 12px;
      display:flex; align-items:center; gap:8px;
      border-radius: 999px;
      border: 1px solid rgba(15,23,42,.14);
      background: rgba(59,130,246,.06);
      cursor: pointer;
      user-select:none;
      font-size: 12.5px;
    }
    .pill-count .n{
      min-width: 22px;
      height: 22px;
      border-radius: 999px;
      display:flex; align-items:center; justify-content:center;
      background: rgba(59,130,246,.14);
      border: 1px solid rgba(59,130,246,.22);
      font-weight: 900;
      font-variant-numeric: tabular-nums;
    }

    /* Tighten misc text helpers */
    .tiny{ font-size: 11px !important; }
    .muted, .muted2, .text-muted{ color: var(--tcg-muted) !important; }


    /* Desktop focus */
    @media (max-width: 768px){
      body{ min-width: 0 !important; }
      .side{ position: static; width:100%; height:auto; }
      .side-foot{ position: static; }
      .app-wrap{ display:block; }
      #kw{ width: 100%; max-width:100%; }
      #packSelect{ width: 100%; max-width:100%; }
      .main{ padding: 12px; }
      .stock-table{ min-width: 980px; }
    }

  
    /* Pack menu (accordion) */

    .pm-acc .accordion-button{ display:flex; align-items:center; gap:8px; }
    .pm-acc .series-label{ flex: 1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .pm-acc .pack-sub{ flex:0 0 auto; font-size:10px; color: var(--tcg-muted); font-weight:700; }

    .packbar{ display:block; }
    .packbar-top{
      display:flex; align-items:center; justify-content:space-between;
      padding: 0 18px 10px;
      gap: 10px;
    }
    .packbar-left{ display:flex; align-items:center; gap:10px; flex: 1 1 auto; min-width:0; }
    .packbar-left .lbl{ font-size:12px; font-weight:700; color: var(--tcg-muted); white-space:nowrap; }
    #packFilter{ width: 340px; border-radius: 999px; }
    .packmenu-wrap{
      padding: 0 18px 14px;
    }
    #packMenu{
      background: var(--tcg-card);
      border: 1px solid var(--tcg-border);
      border-radius: 16px;
      overflow: auto;
      max-height: none;
      height: calc(100vh - 190px);
      box-shadow: 0 10px 24px rgba(2,6,23,.05);
      padding: 10px;
    }
    .pm-acc .accordion-item{
      border: 1px solid rgba(15,23,42,.08);
      border-radius: 14px;
      overflow:hidden;
      margin-bottom: 8px;
      background:#fff;
    }
    .pm-acc .accordion-button{
      padding: 10px 12px;
      font-weight: 800;
      font-size: 12px;
      background:#fff;
      box-shadow:none;
    }
    .pm-acc .accordion-button:not(.collapsed){ background: rgba(30,58,138,.06); }
    .pm-acc .accordion-body{ padding: 10px 10px 12px; }
    .pm-packlist{ display:grid; gap:8px; }
    .pm-packbtn{
      width:100%;
      text-align:left;
      border-radius: 14px;
      border: 1px solid rgba(15,23,42,.10);
      background:#fff;
      padding: 10px 12px;
      font-size: 12px;
      display:flex; align-items:center; justify-content:space-between;
      transition: transform .06s ease, box-shadow .12s ease, border-color .12s ease;
    }
    .pm-packbtn:hover{
      transform: translateY(-1px);
      box-shadow: 0 10px 18px rgba(2,6,23,.08);
      border-color: rgba(59,130,246,.45);
    }
    .pm-packbtn.active{
      background: rgba(59,130,246,.12);
      border-color: rgba(59,130,246,.55);
      color: #1e3a8a;
      font-weight: 800;
    }
    .pm-packbtn .name{
      flex:1 1 auto; min-width:0;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    .pm-packbtn .code{
      flex:0 0 auto;
      font-size: 11px;
      color: var(--tcg-muted);
      margin-left: 10px;
      white-space:nowrap;
    }

    /* Pack bar compact + drawer */
    .packbar-compact{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      padding: 0 18px 14px;
    }
    .packbar-compact .lbl{
      font-size:12px;
      font-weight:700;
      color: var(--tcg-muted);
      white-space:nowrap;
      margin-right: 10px;
    }
    #packCurrentLabel{
      font-size:12px;
      font-weight:700;
      color: var(--tcg-text);
      background: rgba(2,6,23,.04);
      border: 1px solid var(--tcg-border);
      border-radius: 999px;
      padding: 7px 12px;
      min-width: 260px;
      max-width: 520px;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    #packDrawer{
      width: 380px;
      border-right: 1px solid var(--tcg-border);
      background: rgba(255,255,255,.96);
      backdrop-filter: blur(10px);
    }
    #packDrawer .offcanvas-header{
      border-bottom: 1px solid var(--tcg-border);
    }

  
    /* kw suggest (pack autocomplete) */
    .kw-wrap{ position: relative; width: 100%; max-width: 640px; }
    #kw{ width: 100%; }
    .kw-suggest{
      position:absolute;
      top: calc(100% + 6px);
      left: 0;
      right: 0;
      z-index: 1055;
      background: #fff;
      border: 1px solid rgba(15,23,42,.10);
      border-radius: 14px;
      box-shadow: 0 18px 42px rgba(15,23,42,.14);
      overflow: hidden;
      max-height: 340px;
      overflow-y: auto;
    }
    .kw-suggest .item{
      padding: 10px 12px;
      display:flex;
      gap:10px;
      align-items:flex-start;
      cursor: pointer;
    }
    .kw-suggest .item:hover,
    .kw-suggest .item.active{ background: rgba(59,130,246,.08); }
    .kw-suggest .code{ font-weight: 800; font-size: 13px; line-height: 1.1; }
    .kw-suggest .name{ font-size: 12px; color: #475569; line-height: 1.2; margin-top: 2px; }
    .kw-suggest .meta{ margin-left:auto; font-size: 11px; color:#94a3b8; white-space: nowrap; }



  .btn-pill{border-radius:999px!important;}
  .mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;}
  .thumb-icon{width:44px;height:44px;border-radius:10px;border:1px solid var(--tcg-border);background:#fff;object-fit:contain;padding:4px;}
  .tiny{font-size:12px;}
  .right-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end;}
  .pill-count{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(30,58,138,.10);border:1px solid rgba(30,58,138,.25);font-weight:900;cursor:pointer;user-select:none;}
  .pill-count .n{min-width:24px;height:24px;border-radius:999px;background: var(--tcg-primary-2);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;}
  .table td{vertical-align:middle;}
  .w-qty{max-width:110px;}
  .w-cost{max-width:150px;}
  .pack-row-title{font-weight:800;}
  .muted2{color: rgba(15,23,42,.55);}
  .kpi{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
  .kpi .pill-count{cursor:default;}
  
/* Stock: 默认只读隐藏调整列（勾选/数量/操作） */
.stock-table:not(.adjust-on) .col-adjust { display: none !important; }


/* Cards/Sealed switch */
.seg-switch{
  margin: 10px 14px 6px;
  background: #eef2ff;
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 14px;
  padding: 4px;
  display: flex;
  gap: 4px;
}
.seg-switch .seg-item{
  flex: 1;
  text-align: center;
  font-weight: 700;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 12px;
  color: #64748b;
  text-decoration: none;
  user-select: none;
}
.seg-switch .seg-item.active{
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 6px 20px rgba(15,23,42,.08);
  border: 1px solid rgba(15,23,42,.08);
}


/* Stock batch bar */
.stock-batch{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  padding:10px 12px;
  border:1px solid rgba(17,24,39,.08);
  background:#f8fafc;
  border-radius:14px;
  margin-bottom:10px;
}
.stock-batch .left{margin-right:auto; display:flex; align-items:center; gap:8px;}
.pill-mini{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:28px;
  height:22px;
  padding:0 8px;
  border-radius:999px;
  background:#e5e7eb;
  font-weight:800;
  font-size:12px;
  color:#0f172a;
}


    /* Summary cards (Stock) */
    .summary-grid{
      display:grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 18px;
      margin-bottom: 18px;
    }
    .summary-card{
      background: var(--tcg-card);
      border: 1px solid var(--tcg-border);
      border-radius: 22px;
      padding: 18px 20px;
      box-shadow: 0 6px 18px rgba(15,23,42,.04);
      min-height: 92px;
      display:flex;
      flex-direction:column;
      justify-content:center;
    }
    .summary-card .label{
      color: var(--tcg-muted);
      font-weight: 600;
      font-size: 12px;
      margin-bottom: 8px;
    }
    .summary-card .value{
      font-weight: 900;
      font-size: 32px;
      letter-spacing: .2px;
      line-height: 1;
    }
    .summary-card .value.small{
      font-size: 28px;
    }
    @media (max-width: 1400px){
      .summary-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }


    /* Logs modal accordion */
    #logsAcc .accordion-item{ border: 1px solid rgba(15,23,42,.08); border-radius: 16px; overflow:hidden; margin-bottom:10px; background:#fff; }
    #logsAcc .accordion-button{ font-weight: 850; font-size: 13px; background:#fff; }
    #logsAcc .accordion-button:not(.collapsed){ background: rgba(59,130,246,.08); }
    #logsAcc .badge-soft{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; border:1px solid rgba(15,23,42,.10); background: rgba(2,6,23,.03); font-size:11px; font-weight:900; color:#0f172a; }
    #logsAcc .badge-soft.in{ background: rgba(22,163,74,.10); border-color: rgba(22,163,74,.22); }
    #logsAcc .badge-soft.out{ background: rgba(220,38,38,.10); border-color: rgba(220,38,38,.22); }
    #logsAcc .badge-soft.adjust{ background: rgba(59,130,246,.10); border-color: rgba(59,130,246,.22); }
    #logsAcc .badge-soft.correct{ background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.28); }