:root {
    --bg: #fff;
    --bg2: #f4f5f7;
    --text: #172b4d;
    --text2: #44546f;
    --muted: #8993a4;
    --blt: #ebecf0;
    --bd: #dfe1e6;
    --r: 8px;
    --f: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --m: 'SF Mono', SFMono-Regular, Consolas, monospace;
}
* { box-sizing: border-box; }
body { background: var(--bg); font-family: var(--f); color: var(--text); margin: 0; padding: 24px; font-size: 13px; }
h1 { font-size: 20px; margin: 0 0 4px; }
.sub { color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.scope { color: var(--text2); font-size: 12px; margin-bottom: 16px; }
.hidden { display: none; }
.icon-lg { font-size: 22px; }
.chart-container { height: 280px; }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 16px; }
.card { background: var(--bg2); border: 1px solid var(--blt); border-radius: var(--r); padding: 12px; }
.cl { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.cv { font-size: 24px; font-weight: 700; font-family: var(--m); }
.cs { font-size: 11px; color: var(--text2); margin-top: 2px; }
.flag { color: #de350b; }
.text-blue { color: #2E86AB; }
.text-muted-card { color: var(--muted); }

/* Sections */
.sec { margin-bottom: 20px; }
.st { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.cb { background: var(--bg2); border: 1px solid var(--blt); border-radius: var(--r); padding: 14px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.note { font-size: 11px; color: var(--muted); margin-top: 4px; }

/* Table */
table { width: 100%; border-collapse: collapse; font-size: 11px; }
th { text-align: left; color: var(--muted); font-weight: 500; padding: 6px; border-bottom: 1px solid var(--bd); font-size: 9px; text-transform: uppercase; cursor: pointer; }
td { padding: 5px 6px; border-bottom: 1px solid var(--blt); }
.mono { font-family: var(--m); font-size: 10px; white-space: nowrap; }
.seller-cell { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-bold { font-weight: 500; }
.pkg-header-cell { font-size: 9px; color: var(--muted); font-weight: 500; }
.pkg-header-first { padding-left: 28px; font-size: 9px; color: var(--muted); font-weight: 500; }
.pkg-indent { padding-left: 28px; }

/* Badges */
.badge { display: inline-block; padding: 1px 6px; border-radius: 100px; font-size: 10px; font-weight: 500; white-space: nowrap; }
.bg { background: #e3fcef; color: #006644; }
.bb { background: #deebff; color: #0747a6; }
.by { background: #fffae6; color: #974f0c; }
.br { background: #ffebe6; color: #bf2600; }
.bx { background: var(--bg2); color: var(--muted); border: 1px solid var(--blt); }

/* Dots */
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin: 0 1px; }
.dg { background: #36B37E; }
.dr { background: #FF5630; }
.dx { background: #DFE1E6; }
.dy { background: #FFAB00; }

/* Carryover */
.carry { display: inline-block; font-size: 9px; padding: 0 4px; border-radius: 3px; background: #edf2ff; color: #5243aa; margin-left: 4px; font-weight: 500; }

/* Expandable rows */
.order-row { cursor: pointer; }
.order-row td:first-child::before { content: '▶ '; font-size: 9px; color: var(--muted); }
.order-row.open td:first-child::before { content: '▼ '; }
.pkg-row { display: none; background: #fafbfc; }
.pkg-row.open { display: table-row; }
.pkg-row td { font-size: 10px; color: var(--text2); }
.pkg-header td { border-bottom: 1px solid var(--bd); background: #f0f1f3 !important; }

/* Scrollable wrappers */
.wrap { max-height: 550px; overflow-y: auto; border: 1px solid var(--blt); border-radius: var(--r); }
.search { padding: 7px 12px; border: 1px solid var(--bd); border-radius: var(--r); font-size: 12px; width: 340px; margin-bottom: 8px; }
.search:focus { outline: none; border-color: #2E86AB; box-shadow: 0 0 0 2px rgba(46,134,171,.15); }

/* Ghost alert */
.ghost-alert { background: #ffebe6; border: 1px solid #E63946; border-radius: var(--r); padding: 10px 14px; margin-bottom: 14px; font-size: 12px; }

/* SCC Upload */
.scc-zone { border: 2px dashed var(--bd); border-radius: var(--r); padding: 16px; text-align: center; margin-bottom: 14px; transition: all .2s; cursor: pointer; background: var(--bg2); }
.scc-zone:hover, .scc-zone.dragover { border-color: #2E86AB; background: #f0f7fb; }
.scc-zone .label { color: var(--text2); font-size: 11px; display: inline; margin-left: 6px; }
.scc-zone .label b { color: var(--text); }
.scc-zone input[type=file] { display: none; }
.scc-summary { background: #e3fcef; border: 1px solid #57D9A3; border-radius: var(--r); padding: 10px 14px; margin-bottom: 14px; font-size: 11px; }
.scc-summary.error { background: #ffebe6; border-color: #E63946; }
.stitle { font-weight: 600; margin-bottom: 4px; font-size: 12px; }
.sstats { display: flex; gap: 16px; flex-wrap: wrap; }
.sstat { display: flex; flex-direction: column; }
.ssv { font-size: 16px; font-weight: 700; font-family: var(--m); }
.ssl { color: var(--text2); font-size: 9px; text-transform: uppercase; }

/* Loading */
.loading { text-align: center; padding: 40px; color: var(--muted); font-size: 14px; }
.spinner { display: inline-block; width: 24px; height: 24px; border: 3px solid var(--blt); border-top-color: #2E86AB; border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Error */
.text-danger { color: #BF2600; }
.error-detail { margin-top: 8px; font-size: 11px; }