.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;
    }

.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;
    }

.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;
    }

.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;
    }

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);
    }

/* 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; }
    }

.packbar{ display:block; }

.packbar-left .lbl{ font-size:12px; font-weight:700; color: var(--tcg-muted); white-space:nowrap; }

.pm-packlist{ display:grid; gap:8px; }

.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;
    }

#packDrawer .offcanvas-header{
      border-bottom: 1px solid var(--tcg-border);
    }

/* kw suggest (pack autocomplete) */
    .kw-wrap{ position: relative; width: 100%; max-width: 640px; }

.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; }

#logsAcc .accordion-button:not(.collapsed){ background: rgba(59,130,246,.08); }