/* ==========================================================================
   二奢定价 — Design System
   --------------------------------------------------------------------------
   1. Tokens        颜色 / 字体 / 间距 / 圆角 / 阴影 / 动效
   2. Reset         基础重置
   3. Typography    标题 / 正文 / 辅助 的层级
   4. Layout        topbar / wrap / grid / page-head
   5. Components    card / button / badge / form / table / alert / drawer ...
   6. Utilities     原子类
   7. Responsive
   8. Print
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
    /* --- Neutrals (Morandi warm greige — soft, matte, "luxury") --- */
    --c-bg:            #f1efea;
    --c-surface:       #fbfaf7;
    --c-surface-2:     #f5f3ee;
    --c-surface-3:     #ebe8e1;
    --c-border:        #ddd9cf;
    --c-border-2:      #c9c4b8;
    /* --- Currency tinting (Morandi mist): CNY cells a pale clay-pink,
       USD cells a pale mist-blue — desaturated so the table reads calm. --- */
    --cny-bg:          #f2e9e6;
    --usd-bg:          #e6ecef;

    /* --- Text --- */
    --c-text:          #3b3833;
    --c-text-2:        #6e6a61;
    --c-text-3:        #a09a8e;
    --c-text-inv:      #fdfcfa;

    /* --- Primary (sage green — the brand anchor) --- */
    --c-primary:       #5f7265;
    --c-primary-hover: #506357;
    --c-primary-press: #425349;
    --c-primary-soft:  #e7ece7;
    --c-primary-ring:  rgba(95, 114, 101, .22);

    /* --- Accent (used sparingly: active nav, links, focus) --- */
    --c-accent:        #5f7265;
    --c-accent-soft:   #e7ece7;

    /* --- Semantic status -------------------------------------------------
       Every colour below has one job. Never mix them decoratively.
       ok     = hit target margin        (sage green)
       warn   = thin margin, watch it     (oat ochre)
       danger = below floor / needs action (clay red)
       info   = neutral explanation       (mist blue-grey)
       ------------------------------------------------------------------- */
    --c-ok:            #6d8470;
    --c-ok-soft:       #e8eee7;
    --c-ok-border:     #c4d2c2;

    --c-warn:          #997b4f;
    --c-warn-soft:     #f1eae0;
    --c-warn-border:   #decfaf;

    --c-danger:        #a5655e;
    --c-danger-soft:   #f4e8e5;
    --c-danger-border: #e0c4bd;
    --c-danger-hover:  #8f534d;

    --c-info:          #71838f;
    --c-info-soft:     #e9edef;
    --c-info-border:   #c8d2d6;

    /* --- Status buckets (item lifecycle) --- */
    --c-listed:        var(--c-ok);
    --c-listed-soft:   var(--c-ok-soft);
    --c-returned:      var(--c-danger);
    --c-returned-soft: var(--c-danger-soft);
    --c-sold:          var(--c-warn);
    --c-sold-soft:     var(--c-warn-soft);
    --c-others:        #8b867b;
    --c-others-soft:   #ecebe7;

    /* --- Typography --- */
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    --font-num: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        "Liberation Mono", monospace;

    --fs-2xs: 11px;
    --fs-xs:  12px;
    --fs-sm:  13px;
    --fs-md:  14px;
    --fs-lg:  16px;
    --fs-xl:  20px;
    --fs-2xl: 25px;
    --fs-3xl: 32px;

    --fw-regular: 400;
    --fw-medium:  500;
    --fw-semi:    600;
    --fw-bold:    700;

    --lh-tight: 1.25;
    --lh-snug:  1.4;
    --lh-base:  1.6;

    /* --- Spacing (4px base) --- */
    --s-1:  4px;
    --s-2:  8px;
    --s-3:  12px;
    --s-4:  16px;
    --s-5:  20px;
    --s-6:  24px;
    --s-8:  32px;
    --s-10: 40px;
    --s-12: 48px;

    /* --- Radius --- */
    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-xl: 16px;

    /* --- Elevation --- */
    --sh-1: 0 1px 2px rgba(28, 25, 20, .05);
    --sh-2: 0 2px 8px rgba(28, 25, 20, .07);
    --sh-3: 0 8px 28px rgba(28, 25, 20, .13);
    --sh-inset: inset 0 1px 0 rgba(255, 255, 255, .6);

    /* --- Motion --- */
    --ease: cubic-bezier(.4, 0, .2, 1);
    --dur-fast: 110ms;
    --dur:      170ms;
    --dur-slow: 260ms;

    --topbar-h: 54px;
    --wrap-max: 1400px;

    /* Backwards-compat aliases for older template class names */
    --bg: var(--c-bg);
    --surface: var(--c-surface);
    --surface-alt: var(--c-surface-2);
    --border: var(--c-border);
    --border-strong: var(--c-border-2);
    --text: var(--c-text);
    --text-2: var(--c-text-2);
    --text-3: var(--c-text-3);
    --accent: var(--c-accent);
    --accent-soft: var(--c-accent-soft);
    --radius: var(--r-lg);
    --radius-sm: var(--r-sm);
    --shadow: var(--sh-1);
    --green: var(--c-ok);
    --green-bg: var(--c-ok-soft);
    --amber: var(--c-warn);
    --amber-bg: var(--c-warn-soft);
    --red: var(--c-danger);
    --red-bg: var(--c-danger-soft);
    --red-strong: var(--c-danger-hover);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--font);
    font-size: var(--fs-md);
    line-height: var(--lh-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--c-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Native controls (checkboxes, radios, range) follow the brand colour */
:root { accent-color: var(--c-primary); }

:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}

/* Numbers must line up in columns */
.num, .money, input[inputmode="decimal"] { font-variant-numeric: tabular-nums; }

::selection { background: var(--c-primary-soft); color: var(--c-primary-press); }

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
    margin: 0;
    font-weight: var(--fw-semi);
    line-height: var(--lh-tight);
    letter-spacing: -.01em;
    color: var(--c-text);
}

h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); }
h4 { font-size: var(--fs-sm); }

.small { font-size: var(--fs-xs); }
.tiny  { font-size: var(--fs-2xs); }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

/* --- Topbar --- */
.topbar {
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    position: sticky;
    top: 0;
    z-index: 20;
    box-shadow: var(--sh-1);
}

.topbar-inner {
    max-width: var(--wrap-max);
    margin: 0 auto;
    padding: 0 var(--s-5);
    display: flex;
    align-items: center;
    gap: var(--s-5);
    min-height: var(--topbar-h);
    flex-wrap: wrap;
}

.brand {
    font-weight: var(--fw-semi);
    font-size: var(--fs-lg);
    letter-spacing: .01em;
    white-space: nowrap;
    color: var(--c-text);
}
.brand span {
    color: var(--c-text-3);
    font-weight: var(--fw-regular);
    font-size: var(--fs-2xs);
    margin-left: var(--s-2);
    letter-spacing: .04em;
}

.nav { display: flex; gap: var(--s-1); flex: 1; flex-wrap: wrap; }
.nav a {
    padding: 6px var(--s-3);
    border-radius: var(--r-sm);
    color: var(--c-text-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    transition: background var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease);
}
.nav a:hover {
    background: var(--c-surface-3);
    color: var(--c-text);
    text-decoration: none;
}
.nav a.active {
    background: var(--c-primary-soft);
    color: var(--c-primary);
    font-weight: var(--fw-semi);
}

.whoami {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    font-size: var(--fs-xs);
    color: var(--c-text-2);
}
.whoami strong { color: var(--c-text); font-weight: var(--fw-medium); }
.whoami .badge {
    font-size: var(--fs-2xs);
    padding: 2px var(--s-2);
    background: var(--c-surface-3);
    color: var(--c-text-2);
    border: 1px solid var(--c-border);
    border-radius: 999px;
}

/* --- FX indicator --- */
.fx-rate { display: inline-flex; align-items: center; gap: var(--s-1); }
.fx-arrow { font-size: 10px; font-weight: var(--fw-bold); }
.fx-up   { color: var(--c-danger); }  /* USD up = we earn less CNY */
.fx-down { color: var(--c-ok); }      /* USD down = we earn more */

/* --- Page shell --- */
.wrap {
    max-width: var(--wrap-max);
    margin: 0 auto;
    padding: var(--s-6) var(--s-5) var(--s-12);
}

.page-head {
    display: flex;
    align-items: baseline;
    gap: var(--s-3);
    margin-bottom: var(--s-5);
    flex-wrap: wrap;
}
.page-head h1 { margin-right: var(--s-1); }
.page-head .sub {
    color: var(--c-text-3);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
}
.page-head .actions {
    margin-left: auto;
    display: flex;
    gap: var(--s-2);
    flex-wrap: wrap;
    align-items: center;
}

/* --- Grids --- */
.grid   { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, 1fr); }
.grid-2 { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, 1fr); }
.grid-3 { display: grid; gap: var(--s-4); grid-template-columns: repeat(3, 1fr); }
.grid-4 { display: grid; gap: var(--s-4); grid-template-columns: repeat(4, 1fr); }

/* --------------------------------------------------------------------------
   5. Components
   -------------------------------------------------------------------------- */

/* --- Card --- */
.card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
    margin-bottom: var(--s-4);
    overflow: hidden;
}
.card > h2 {
    padding: var(--s-4) var(--s-5);
    border-bottom: 1px solid var(--c-border);
    font-size: var(--fs-md);
    display: flex;
    align-items: center;
    gap: var(--s-2);
    background: var(--c-surface-2);
}
.card > h2 .hint,
.card > h2 .sub {
    margin-left: auto;                 /* keeps trailing meta right-aligned */
    font-weight: var(--fw-regular);
    color: var(--c-text-3);
    font-size: var(--fs-xs);
}
.card-body { padding: var(--s-5); }
.card-body.tight { padding: var(--s-3) var(--s-4); }

/* --- Button ------------------------------------------------------------
   Four variants × five states. Hierarchy is deliberate:
   primary = the one action you want; secondary = other actions;
   ghost   = low-emphasis toolbar; danger = destructive only.
   --------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 var(--s-4);
    height: 34px;
    border: 1px solid var(--c-border-2);
    border-radius: var(--r-sm);
    background: var(--c-surface);
    color: var(--c-text);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease);
}
.btn:hover {
    background: var(--c-surface-3);
    border-color: var(--c-text-3);
    text-decoration: none;
    color: var(--c-text);
}
.btn:active { transform: translateY(1px); }

.btn-primary {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: var(--c-text-inv);
}
.btn-primary:hover {
    background: var(--c-primary-hover);
    border-color: var(--c-primary-hover);
    color: var(--c-text-inv);
}
.btn-primary:active { background: var(--c-primary-press); }

.btn-danger {
    background: var(--c-danger);
    border-color: var(--c-danger);
    color: var(--c-text-inv);
}
.btn-danger:hover {
    background: var(--c-danger-hover);
    border-color: var(--c-danger-hover);
    color: var(--c-text-inv);
}

.btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--c-text-2);
}
.btn-ghost:hover {
    background: var(--c-surface-3);
    border-color: transparent;
    color: var(--c-text);
}

.btn-sm { height: 28px; padding: 0 var(--s-3); font-size: var(--fs-xs); }
.btn-lg { height: 40px; padding: 0 var(--s-5); font-size: var(--fs-md); }

.btn:disabled,
.btn[disabled],
.btn.is-disabled {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}

/* Loading: spinner replaces the label, width stays put so nothing jumps */
.btn.is-loading { pointer-events: none; position: relative; color: transparent !important; }
.btn.is-loading::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 14px; height: 14px;
    margin: -7px 0 0 -7px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    color: var(--c-text-2);
    animation: spin .55s linear infinite;
}
.btn-primary.is-loading::after,
.btn-danger.is-loading::after { color: var(--c-text-inv); }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Badge --- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px var(--s-2);
    border-radius: var(--r-xs);
    background: var(--c-surface-3);
    color: var(--c-text-2);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-medium);
    line-height: 1.5;
    white-space: nowrap;
    border: 1px solid transparent;
    font-variant-numeric: tabular-nums;
}
.badge-special { background: var(--c-danger-soft); color: var(--c-danger); border-color: var(--c-danger-border); }
.badge-src-manual { background: var(--c-primary-soft); color: var(--c-primary); }
.badge-src-actual { background: var(--c-ok-soft); color: var(--c-ok); }
.badge-src-default { background: var(--c-surface-3); color: var(--c-text-3); }

/* Margin bands */
.band-healthy { background: var(--c-ok-soft);     color: var(--c-ok);     border-color: var(--c-ok-border); }
.band-high    { background: var(--c-ok-soft);     color: var(--c-ok);     border-color: var(--c-ok-border); }
.band-warn    { background: var(--c-warn-soft);   color: var(--c-warn);   border-color: var(--c-warn-border); }
.band-special { background: var(--c-danger-soft); color: var(--c-danger); border-color: var(--c-danger-border); }

/* --- Chips (filter tabs) --- */
.chip-list { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px var(--s-3);
    border: 1px solid var(--c-border-2);
    border-radius: 999px;
    background: var(--c-surface);
    color: var(--c-text-2);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--dur-fast) var(--ease);
}
.chip:hover { background: var(--c-surface-3); color: var(--c-text); text-decoration: none; }
.chip.on {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: var(--c-text-inv);
}

/* --- Form & filters --- */
.filters {
    display: flex;
    gap: var(--s-3);
    flex-wrap: wrap;
    align-items: flex-end;
}
.search-bar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-4);
    max-width: 560px;
}
.search-bar .field {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}
.search-bar .btn { flex: 0 0 auto; }
.search-bar input[type="search"] {
    width: 100%;
    min-width: 0;
}
.field { display: flex; flex-direction: column; gap: 5px; min-width: 150px; }
.field label {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-medium);
    color: var(--c-text-2);
    text-transform: uppercase;
    letter-spacing: .04em;
    display: flex;
    align-items: center;
    gap: 5px;
}
.field .unit {
    text-transform: none;
    letter-spacing: 0;
    color: var(--c-text-3);
    font-weight: var(--fw-regular);
}

input[type="text"], input[type="number"], input[type="date"],
input[type="password"], input[type="search"], select, textarea {
    padding: 0 var(--s-3);
    height: 34px;
    border: 1px solid var(--c-border-2);
    border-radius: var(--r-sm);
    background: var(--c-surface);
    color: var(--c-text);
    font-family: inherit;
    font-size: var(--fs-sm);
    transition: border-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
    width: 100%;
}
textarea { height: auto; padding: var(--s-2) var(--s-3); line-height: var(--lh-snug); }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px var(--c-primary-ring);
}
input:disabled, select:disabled {
    background: var(--c-surface-3);
    color: var(--c-text-3);
    cursor: not-allowed;
}
input[readonly] { background: var(--c-surface-2); color: var(--c-text-2); }

/* --- Switch row (checkbox lists in settings) --- */
.switch-row {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: 5px 0;
    font-size: var(--fs-sm);
}
.switch-row input { width: auto; height: auto; }

/* --- Table --- */
.table-scroll {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    max-height: calc(100vh - 190px);
}
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
#items-table { table-layout: fixed; font-size: var(--fs-xs); }
/* 列宽预算：19 列在 1440px 容器（~1358px）内必须与名称列共存。
   其余列合计 ~1210px，名称列保底 140px，总数刚好贴住容器，
   溢出时 table-scroll 兜底横向滚动。 */
#items-table [data-col="photo"]    { width: 52px; }
#items-table [data-col="sku"]      { width: 84px; }
#items-table [data-col="name"]     { width: 100px; }
#items-table [data-col="grade"]    { width: 48px; }
#items-table [data-col="sourcing"] { width: 70px; }
#items-table [data-col="status"]   { width: 102px; }
#items-table [data-col="delivery"] { width: 74px; }
#items-table [data-col^="cost_"]   { width: 68px; }
#items-table [data-col^="price_"] { width: 72px; }
#items-table [data-col^="margin_"] { width: 74px; }
thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--c-surface-2);
    text-align: left;
    font-weight: var(--fw-medium);
    font-size: var(--fs-2xs);
    letter-spacing: .03em;
    color: var(--c-text-2);
    padding: var(--s-3) var(--s-3);
    border-bottom: 1px solid var(--c-border);
    white-space: nowrap;
}
tbody td {
    padding: var(--s-3);
    border-bottom: 1px solid var(--c-surface-3);
    vertical-align: middle;
}
tbody tr:hover td { background: var(--c-surface-2); }
tbody tr:last-child td { border-bottom: none; }

th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody td.nowrap, thead th.nowrap { white-space: nowrap; }

/* Column-group separator: a heavier left edge marks where a new group of
   related columns starts (识别 | 成本 | 售价 | 毛利 | 交付). */
.col-grp { border-left: 2px solid var(--c-border); }
thead th.col-grp:first-child, td.col-grp:first-child { border-left: none; }

/* Import preview: a row the validator rejected */
tr.row-error > td { background: var(--c-danger-soft); }
tr.row-error:hover > td { background: var(--c-danger-soft); filter: brightness(.97); }

/* --- Alert --- */
.alert {
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-sm);
    border: 1px solid;
    font-size: var(--fs-sm);
    margin-bottom: var(--s-3);
    line-height: var(--lh-snug);
}
.alert:last-child { margin-bottom: 0; }
.alert-info  { background: var(--c-info-soft);  border-color: var(--c-info-border);  color: var(--c-info); }
.alert-warn  { background: var(--c-warn-soft);  border-color: var(--c-warn-border);  color: var(--c-warn); }
.alert-error { background: var(--c-danger-soft);border-color: var(--c-danger-border);color: var(--c-danger); }
.alert-ok    { background: var(--c-ok-soft);    border-color: var(--c-ok-border);    color: var(--c-ok); }

.empty {
    padding: var(--s-10) var(--s-5);
    text-align: center;
    color: var(--c-text-3);
    font-size: var(--fs-sm);
}

/* --- Timeline (audit / revision history) --- */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--c-surface-3);
    font-size: var(--fs-sm);
}
.timeline li:last-child { border-bottom: none; }
.t-meta { font-size: var(--fs-2xs); color: var(--c-text-3); margin-top: 2px; }

/* --- Thumbnail --- */
.thumb {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: var(--r-sm);
    border: 1px solid var(--c-border);
    background: var(--c-surface-3);
    display: block;
}

.name-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: help;
}

/* --- Hover preview (photo / brand-model) --- */
.preview-tip {
    position: fixed;
    z-index: 100;
    pointer-events: none;
    padding: var(--s-1);
    background: var(--c-surface);
    border: 1px solid var(--c-border-2);
    border-radius: var(--r-md);
    box-shadow: var(--sh-2);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease);
}
.preview-tip.visible {
    opacity: 1;
    transform: translateY(0);
}
.preview-tip.hidden { display: none; }
.preview-tip-img {
    width: 176px;
    height: 176px;
    object-fit: cover;
    border-radius: var(--r-sm);
    display: block;
}
.preview-tip-text {
    max-width: 260px;
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
    color: var(--c-text);
    white-space: normal;
    word-break: break-word;
}

/* --- Inline edit (double-click a number) ---
   Hover hint uses the primary (sage) family: green = "actionable". */
td.editable {
    cursor: text;
    position: relative;
    transition: background var(--dur-fast) var(--ease);
}
td.editable:hover {
    background: var(--c-primary-soft);
    box-shadow: inset 0 0 0 1px var(--c-primary-ring);
}
td.editable::after {
    content: "双击编辑";
    position: absolute;
    top: 2px; right: var(--s-1);
    font-size: 9px;
    color: var(--c-primary);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease);
}
td.editable:hover::after { opacity: 1; }
.inline-edit-input {
    width: 100%;
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--c-primary) !important;
    background: var(--c-surface) !important;
    padding: 2px var(--s-2);
    height: 28px;
}
td.saving {
    opacity: .65;
    cursor: wait;
    color: var(--c-text-2);
}

/* 品牌 / 型号一格两字段的页内编辑器。窄列里塞两个输入框，所以比单元格略宽，
   用 position 让它浮出来，不把整行撑高。 */
.name-edit {
    position: absolute;
    z-index: 20;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    padding: var(--s-2);
    background: var(--c-surface);
    border: 1px solid var(--c-primary);
    border-radius: var(--radius-sm);
    box-shadow: var(--sh-3);
}
.name-edit input {
    width: 100%;
    height: 28px;
    padding: 2px var(--s-2);
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-text);
}
.name-edit input:focus { border-color: var(--c-primary); outline: none; }
.name-edit .ne-actions {
    display: flex;
    gap: var(--s-1);
    justify-content: flex-end;
    margin-top: 2px;
}
/* 定位基准：单元格得是 relative，浮层才不会跑到表格左上角 */
td.name-cell { position: relative; }

/* --- Status group headers (items list) --- */
tr.status-group > td {
    background: var(--c-surface-3);
    padding: var(--s-2) var(--s-3);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    letter-spacing: .06em;
    color: var(--c-text-2);
    border-top: 1px solid var(--c-border-2);
    border-bottom: 1px solid var(--c-border);
}
.status-group-dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    margin-right: var(--s-2);
    background: var(--c-text-3);
}
.status-group-LISTED   .status-group-dot { background: var(--c-listed); }
.status-group-SOLD     .status-group-dot { background: var(--c-sold); }
.status-group-RETURNED .status-group-dot { background: var(--c-returned); }
.status-group-OTHERS   .status-group-dot { background: var(--c-others); }

/* --- Status dropdown --- */
.status-select {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    padding: 2px var(--s-2);
    height: 26px;
    width: auto;
    min-width: 84px;
    border-radius: var(--r-xs);
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-text);
    cursor: pointer;
}
.status-select:disabled { opacity: .65; cursor: not-allowed; }
.status-LISTED   { background: var(--c-listed-soft);   color: var(--c-listed);   border-color: var(--c-ok-border); }
.status-SOLD     { background: var(--c-sold-soft);     color: var(--c-sold);     border-color: var(--c-warn-border); }
.status-RETURNED { background: var(--c-returned-soft); color: var(--c-returned); border-color: var(--c-danger-border); }
.status-OTHERS   { background: var(--c-others-soft);   color: var(--c-others);   border-color: var(--c-border-2); }

/* --- Condition grade dropdown --- */
.grade-select {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    padding: 2px var(--s-1);
    height: 26px;
    width: auto;
    min-width: 44px;
    border-radius: var(--r-xs);
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-text);
    cursor: pointer;
}
.grade-select:disabled { opacity: .65; cursor: not-allowed; }

/* Saving flash on either dropdown */
.status-saving { outline: 2px solid var(--c-primary-ring); }

/* --- Drawer (right-hand panel) --- */
.drawer { position: fixed; inset: 0; z-index: 60; display: none; }
.drawer.open { display: block; }
.drawer-backdrop {
    position: absolute; inset: 0;
    background: rgba(28, 25, 20, .34);
    animation: fade-in var(--dur) var(--ease);
}
.drawer-panel {
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: min(440px, 94vw);
    background: var(--c-surface);
    box-shadow: var(--sh-3);
    display: flex;
    flex-direction: column;
    animation: slide-in-right var(--dur-slow) var(--ease);
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-in-right { from { transform: translateX(100%); } to { transform: translateX(0); } }

.drawer-head {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    padding: var(--s-4) var(--s-5) var(--s-3);
    border-bottom: 1px solid var(--c-border);
}
.drawer-title { font-size: var(--fs-md); font-weight: var(--fw-semi); }
.drawer-sub { font-size: var(--fs-2xs); margin-top: 2px; }
.drawer-close {
    margin-left: auto;
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    width: 28px; height: 28px;
    line-height: 1;
    font-size: 17px;
    border-radius: var(--r-sm);
    cursor: pointer;
    color: var(--c-text-2);
    flex-shrink: 0;
    transition: all var(--dur-fast) var(--ease);
}
.drawer-close:hover { background: var(--c-surface-3); color: var(--c-text); }
.drawer-body { padding: var(--s-4) var(--s-5) var(--s-8); overflow-y: auto; flex: 1; }

.drawer-section { padding-bottom: var(--s-5); margin-bottom: var(--s-5); border-bottom: 1px solid var(--c-border); }
.drawer-section:last-child { border-bottom: none; margin-bottom: 0; }
.drawer-section-title {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--c-text-2);
    margin-bottom: var(--s-2);
    display: flex;
    align-items: center;
    gap: var(--s-2);
}
.drawer-total {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-semi);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    line-height: 1.1;
    margin-bottom: var(--s-1);
}
.drawer-table { width: 100%; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.drawer-table td { padding: var(--s-1) var(--s-2); border-bottom: 1px solid var(--c-surface-3); }
.drawer-table tr.sett-rate td { color: var(--c-text-2); }
.drawer-table tr.sett-sum td {
    background: var(--c-surface-2);
    padding-top: var(--s-2);
    font-size: var(--fs-sm);
    border-bottom: none;
}
.sett-lock { color: var(--c-text-3); font-size: 10px; cursor: help; }

.drawer-photo { display: flex; gap: var(--s-3); align-items: flex-start; margin-bottom: var(--s-3); }
.drawer-photo img {
    width: 92px; height: 92px;
    object-fit: cover;
    border-radius: var(--r-sm);
    border: 1px solid var(--c-border);
}
.drawer-photo-empty {
    width: 92px; height: 92px;
    display: flex; align-items: center; justify-content: center;
    background: var(--c-surface-3);
    border: 1px dashed var(--c-border-2);
    color: var(--c-text-3);
    font-size: var(--fs-2xs);
    border-radius: var(--r-sm);
    flex-shrink: 0;
}
.drawer-photo-actions { display: flex; flex-direction: column; gap: var(--s-2); }

.drawer-comp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); margin: var(--s-3) 0; }
.drawer-comp-grid input { font-size: var(--fs-xs); height: 30px; }

/* --- Price cards (detail page) --- */
.price-cards { display: grid; gap: var(--s-4); grid-template-columns: repeat(3, 1fr); }
.price-card {
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--s-4);
    background: var(--c-surface-2);
}
.pc-cols { display: flex; gap: var(--s-4); align-items: flex-start; }
.pc-left { flex: 1 1 48%; min-width: 0; }
.pc-right { flex: 1 1 52%; min-width: 0; border-left: 1px solid var(--c-border); padding-left: var(--s-4); }
.pc-name { font-size: var(--fs-sm); font-weight: var(--fw-semi); margin-bottom: var(--s-1); }
.pc-price {
    font-size: var(--fs-xl);
    font-weight: var(--fw-semi);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}
.pc-price small { font-size: var(--fs-2xs); color: var(--c-text-3); font-weight: var(--fw-regular); }
.pc-cny { font-size: var(--fs-2xs); color: var(--c-text-3); margin-bottom: var(--s-2); }
.pc-row { display: flex; justify-content: space-between; font-size: var(--fs-xs); padding: 1px 0; }
.pc-gm {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semi);
    font-variant-numeric: tabular-nums;
    margin: var(--s-1) 0;
}
.pc-settlement { margin-top: var(--s-2); border-top: 1px solid var(--c-border); padding-top: var(--s-2); }
.pc-st-table { width: 100%; font-size: var(--fs-2xs); font-variant-numeric: tabular-nums; }
.pc-st-table td { padding: 1px var(--s-1); }
.pc-st-total { font-size: var(--fs-lg); font-weight: var(--fw-semi); }

/* --- Photo block (detail page) --- */
.photo-card { min-height: 168px; }
.photo-main {
    width: 100%; max-width: 220px; max-height: 220px;
    object-fit: contain;
    border-radius: var(--r-md);
    background: var(--c-surface-3);
    border: 1px solid var(--c-border);
    display: block;
    margin: var(--s-2) 0;
}
.photo-empty {
    width: 100%; max-width: 220px; height: 140px;
    display: flex; align-items: center; justify-content: center;
    background: var(--c-surface-3);
    border: 1px dashed var(--c-border-2);
    color: var(--c-text-3);
    font-size: var(--fs-xs);
    border-radius: var(--r-md);
    margin: var(--s-2) 0;
}
.photo-form input[type="file"] { font-size: var(--fs-xs); padding: var(--s-1) var(--s-2); max-width: 100%; height: auto; }
.photo-actions { display: flex; gap: var(--s-2); margin-top: var(--s-2); flex-wrap: wrap; }

/* --- Delivery-cost cell in the items list --- */
.sett-cell { cursor: pointer; user-select: none; white-space: nowrap; }
.sett-cell:hover { background: var(--c-surface-3); box-shadow: inset 0 0 0 1px var(--c-border-2); }
.sett-chev { color: var(--c-text-3); margin-left: var(--s-1); }

/* --------------------------------------------------------------------------
   6. Utilities
   -------------------------------------------------------------------------- */

.muted { color: var(--c-text-2); }
.muted-2 { color: var(--c-text-3); }
.strong { font-weight: var(--fw-semi); }
.nowrap { white-space: nowrap; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.mono { font-family: var(--font-num); }
.tabular { font-variant-numeric: tabular-nums; }
.block { display: block; }
.hidden { display: none !important; }
.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.stack    { display: flex; flex-direction: column; gap: var(--s-2); }
.row      { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.row-tight{ display: flex; align-items: center; gap: var(--s-1); flex-wrap: wrap; }
.spacer   { flex: 1; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: var(--s-1); }
.mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); } .mt-6 { margin-top: var(--s-6); }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: var(--s-2); }
.mb-3 { margin-bottom: var(--s-3); } .mb-4 { margin-bottom: var(--s-4); }

/* --- KPI / stat block --- */
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat-label {
    font-size: var(--fs-2xs);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--c-text-3);
    font-weight: var(--fw-medium);
}
.stat-value {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-semi);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    line-height: 1.15;
}
.stat-value.sm { font-size: var(--fs-xl); }
.stat-note { font-size: var(--fs-2xs); color: var(--c-text-3); }

/* --- Section divider with a title --- */
.section-title {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--c-text-3);
    margin: var(--s-6) 0 var(--s-3);
}

/* --- Collapsible (details-based, no JS) --- */
details.panel {
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background: var(--c-surface);
    margin-bottom: var(--s-4);
}
details.panel > summary {
    cursor: pointer;
    list-style: none;
    padding: var(--s-3) var(--s-4);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    display: flex;
    align-items: center;
    gap: var(--s-2);
    user-select: none;
}
details.panel > summary::-webkit-details-marker { display: none; }
details.panel > summary::before {
    content: "▸";
    color: var(--c-text-3);
    transition: transform var(--dur-fast) var(--ease);
    font-size: 10px;
}
details.panel[open] > summary::before { transform: rotate(90deg); }
details.panel > .panel-body { padding: 0 var(--s-4) var(--s-4); }

/* --------------------------------------------------------------------------
   7. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .price-cards { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .price-cards { grid-template-columns: 1fr; }
    .topbar-inner { padding: 0 var(--s-3); gap: var(--s-3); min-height: 48px; }
    /* flex-basis 100% (not width) — .nav 的 flex:1 basis:0 会覆盖 width，
       导致导航被挤成竖排窄条 */
    .nav { order: 3; flex: 0 0 100%; width: 100%; overflow-x: auto;
           flex-wrap: nowrap; padding-bottom: var(--s-1); }
    .nav a { white-space: nowrap; }
    .whoami { margin-left: auto; font-size: var(--fs-2xs); }
    .page-head h1 { font-size: var(--fs-xl); }
    .actions { margin-left: 0; width: 100%; }
    .wrap { padding: var(--s-4) var(--s-3) var(--s-12); }
    thead th, tbody td { padding: var(--s-2); }
    .card-body { padding: var(--s-4); }
    .pc-cols { flex-direction: column; }
    .pc-right { border-left: none; padding-left: 0; border-top: 1px solid var(--c-border); padding-top: var(--s-3); }
    /* 表格随页面自然滚动，避免"页面滚 + 表格内滚"嵌套 */
    .table-scroll { max-height: none; }
    /* 横向滚动提示：右缘渐隐暗示还有更多列 */
    #items-scroll {
        -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 20px), transparent);
        mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 20px), transparent);
    }
}

@media (max-width: 640px) {
    .filters .field { min-width: 100%; }
    .btn { height: 36px; }
    /* 顶栏身份区收纳：只留名字 + 退出，汇率/徽章收起 */
    .whoami .fx-rate, .whoami .badge { display: none; }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
   8. Print (report print view)
   -------------------------------------------------------------------------- */

@media print {
    .topbar, .nav, .actions, .no-print, .drawer { display: none !important; }
    body { background: #fff; }
    .wrap { max-width: none; padding: 0; }
    .card { border: none; box-shadow: none; margin: 0; }
    table { font-size: 11px; }
    thead th { position: static; }
}

/* --- Currency tinting ---------------------------------------------------
   Applied to <td> in tables and to <span> in the drawer's JS-built rows.
   On row hover the tint yields to the single row-hover layer (no stacking). */
.cny { background: var(--cny-bg); border-radius: 4px; }
.usd { background: var(--usd-bg); border-radius: 4px; }
tbody tr:hover td.cny,
tbody tr:hover td.usd { background: var(--c-surface-2); }

/* Margin cell: two stacked lines — expected gross profit (CNY) on top,
   margin rate below, one step smaller than ordinary cell numbers. */
.mcell {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    font-size: var(--fs-2xs);
    line-height: 1.35;
    background: var(--cny-bg);
    border-radius: 4px;
    padding: 2px 6px;
    white-space: nowrap;
}
.mcell-amt { font-variant-numeric: tabular-nums; color: var(--c-text); }
.mcell-rate { font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; }
.mcell-rate.band-special { background: none; color: var(--c-danger); }
.mcell-rate.band-warn    { background: none; color: var(--c-warn); }
.mcell-rate.band-healthy,
.mcell-rate.band-high    { background: none; color: var(--c-ok); }

/* Margin cell with no data: same footprint as .mcell so rows that mix
   both keep a consistent vertical rhythm. */
.mcell-empty {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 31px;
    color: var(--c-text-3);
    font-variant-numeric: tabular-nums;
}

/* 算不出毛利时点明原因，而不是给一个普通的「—」。
   最常见的是拿货成本没录入：此时鉴定费/运费等默认值会把成本总额垫到零以上，
   算式照样能出结果（毛利率虚高到 80%+），但那个数是假的，必须拦下来。 */
.mcell-err {
    color: var(--c-danger);
    font-size: var(--fs-xs);
    white-space: nowrap;
    border-bottom: 1px dotted currentColor;
    cursor: help;
}

/* --- Large-table resize performance ---------------------------------
   Row height is pinned so every row lays out identically and the window
   can resize without re-measuring each cell's content. The sticky header
   gets its own compositor layer so it is not repainted with the body.
   While the window is being dragged the horizontal scrollbar is hidden,
   so its appearing/disappearing cannot thrash layout on every frame. */
#items-table tbody td {
    height: 56px;
    padding: 6px var(--s-2);
    overflow: hidden;
}
#items-table tbody td[data-col="sku"] {
    white-space: nowrap;
}
#items-table tbody td[data-col="name"] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#items-table thead th {
    height: 40px;
    will-change: transform;
}
body.resizing .table-scroll { overflow-x: hidden; }

/* --- Virtual scrolling ------------------------------------------------
   The items table is windowed: only the visible rows live in the DOM.
   Rows keep a fixed height so the window offset can be computed arithmetically;
   group headers get a fixed height too; spacer rows fill the hidden space. */
#items-table tr.status-group td {
    height: 40px;
    padding: 0 var(--s-3);
    line-height: 40px;
}
#items-table tr.vh-spacer td {
    padding: 0;
    border: none;
}
#items-table tr.vh-spacer:hover td { background: transparent; }

/* --- 用户管理：角色下拉 / 权限勾选 --------------------------------------
   权限面板用 <details> 折叠，不引 JS。窄表里展开的面板要能盖住下方内容，
   所以给了绝对定位的浮层；勾选框旁的小标记说明该项是「额外授予」还是
   「已收回」，否则用户分不清自己勾的哪些本来就有。 */
.role-select {
    height: 28px;
    padding: 0 var(--s-2);
    border: 1px solid var(--c-border-2);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    color: var(--c-text);
    font-size: var(--fs-xs);
    cursor: pointer;
}
.role-select:focus { border-color: var(--c-primary); outline: none; }

/* 权限面板用原生 <dialog>：账号表嵌在 .table-scroll（overflow: auto）和
   .card（overflow: hidden）里，绝对定位的浮层会被这两层裁掉 —— 账号表只有
   几行、容器高度比面板还矮，一点开就只剩半截。
   <dialog> 渲染在 top layer，不受任何祖先 overflow 影响，顺带白拿 Esc 关闭、
   焦点管理和背景遮罩。 */
.perm-dialog {
    padding: 0;
    border: 1px solid var(--c-border-2);
    border-radius: var(--radius);
    background: var(--c-surface);
    color: var(--c-text);
    box-shadow: var(--sh-3);
    max-width: min(520px, 92vw);
}
.perm-dialog::backdrop { background: rgba(0, 0, 0, 0.38); }

.item-job-tray {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 95;
  display: grid;
  gap: 8px;
  width: min(340px, calc(100vw - 32px));
  pointer-events: none;
}
.item-job-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid var(--c-info-border);
  border-radius: 12px;
  background: var(--c-info-soft);
  color: var(--c-info);
  box-shadow: var(--sh-2);
  pointer-events: auto;
}
.item-job-card.is-ok { border-color: var(--c-ok-border); background: var(--c-ok-soft); color: var(--c-ok); }
.item-job-card.is-error { border-color: var(--c-danger-border); background: var(--c-danger-soft); color: var(--c-danger); }
.item-job-link { color: inherit; font-weight: 700; white-space: nowrap; }
.perm-head {
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--c-border);
    background: var(--c-surface-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* 内边距给内容区，不给 form 本身：.perm-head 是标题栏，要顶到 dialog 两边才
   像一条栏；给 form 加内边距它就缩成一块四周留白的浮块，下边框也断在半路。 */
.perm-form {
    padding: 0;
    text-align: left;
    /* 保险：原生 dialog 是居中定位的，内容高过视口时超出部分滚不到也点不到
       （页面本身不会滚）。11 项权限正常只有 250px 左右高，这里防的是矮窗口。 */
    max-height: 86vh;
    overflow: auto;
}
.perm-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-2) var(--s-4);
    padding: var(--s-4) var(--s-4) 0;
}
.perm-row {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--fs-xs);
    color: var(--c-text);
    cursor: pointer;
}
.perm-row input { flex: 0 0 auto; accent-color: var(--c-primary); cursor: pointer; }
.perm-actions {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-top: var(--s-4);
    padding: var(--s-3) var(--s-4);
    border-top: 1px solid var(--c-border);
}
.tag {
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: var(--fw-medium);
    white-space: nowrap;
    cursor: help;
}
.tag-add { background: var(--c-primary-soft); color: var(--c-primary); }
.tag-del { background: var(--c-danger-soft); color: var(--c-danger); }

/* Display-only TikTok label includes cents and needs room for large prices. */
#items-table [data-col="price_TK_LIST"] { width: 92px; }
/* ==========================================================================
   NewLux visual refinement. Screen-only rules preserve report printing and
   the item window's 56px rows / 40px group headers.
   ========================================================================== */
@media screen {
    :root {
        --c-bg: #f4f5f1;
        --c-surface: #ffffff;
        --c-surface-2: #f7f8f4;
        --c-surface-3: #eaf0e8;
        --c-border: #e1e6dd;
        --c-border-2: #cbd3c5;
        --c-text: #243128;
        --c-text-2: #566052;
        --c-text-3: #687363;
        --c-primary: #345440;
        --c-primary-hover: #294734;
        --c-primary-press: #203b2b;
        --c-primary-soft: #eaf1e7;
        --c-primary-ring: rgba(52, 84, 64, .18);
        --c-accent: #345440;
        --c-accent-soft: #eaf1e7;
        --c-ok: #3e684b;
        --c-warn: #87602d;
        --c-danger: #a3433a;
        --c-info: #466472;
        --cny-bg: #faf7f2;
        --usd-bg: #f1f6f9;
        --font: "Segoe UI Variable Text", "Segoe UI", "PingFang SC",
            "Microsoft YaHei UI", "Microsoft YaHei", -apple-system,
            BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
        --fs-xs: 13px;
        --fs-sm: 14px;
        --fs-md: 15px;
        --fs-2xl: 28px;
        --r-lg: 14px;
        --sh-1: 0 2px 5px rgba(29, 49, 33, .025);
        --sh-2: 0 4px 16px rgba(29, 49, 33, .06);
        --sh-3: 0 20px 64px rgba(29, 49, 33, .18);
        --topbar-h: 76px;
        --wrap-max: 1760px;
    }

    body { line-height: 1.65; }
    h1, h2, h3 { letter-spacing: -.025em; }
    h1 { font-weight: 650; }
    .small, .tiny { line-height: 1.6; }
    a { text-underline-offset: 4px; }
    .skip-link {
        position: fixed; top: -80px; left: 20px; z-index: 100;
        padding: 10px 16px; background: var(--c-primary); color: #fff;
        border-radius: 8px;
    }
    .skip-link:focus { top: 12px; }
    #main-content:focus { outline: none; }
    :focus-visible { outline-width: 3px; outline-offset: 3px; }

    .topbar { background: rgba(255, 255, 255, .98); }
    .topbar-inner { padding: 10px 28px; gap: 28px; }
    .brand { font-size: 19px; line-height: 1.25; }
    .brand span { display: block; margin: 5px 0 0; font-size: 10px; letter-spacing: .07em; }
    .topbar .nav { gap: 4px; }
    .nav a { padding: 9px 13px; border-radius: 9px; }
    .topbar .nav a.active { background: var(--c-primary); color: #fff; }
    .whoami { gap: 12px; font-size: 12px; }
    .whoami > a { padding: 5px 0; }
    .fx-rate { padding-left: 14px; border-left: 1px solid var(--c-border); }
    .wrap { padding: 32px 28px 64px; }
    .page-head { align-items: center; gap: 16px; margin-bottom: 24px; }
    .page-head .sub { font-size: 13px; }
    .page-head .actions { gap: 10px; }
    .page-head .btn-sm { height: 38px; font-size: 13px; padding: 0 16px; }
    .grid, .grid-2, .grid-3, .grid-4 { gap: 20px; }
    .grid > *, .grid-2 > *, .grid-3 > *, .grid-4 > * { min-width: 0; }

    .card { margin-bottom: 20px; }
    .card > h2 {
        padding: 19px 24px; font-size: 15px; background: var(--c-surface);
        flex-wrap: wrap; row-gap: 8px; line-height: 1.4;
    }
    .card > h2 .hint, .card > h2 .sub { font-size: 12px; letter-spacing: 0; }
    .card-body { padding: 24px; }
    .card-body.tight { padding: 18px 22px; }
    .btn { height: 40px; border-radius: 8px; font-weight: 550; }
    .btn-primary { box-shadow: 0 2px 3px rgba(40, 71, 49, .12); }
    .btn:hover { box-shadow: var(--sh-1); }
    .btn-sm { height: 32px; font-size: 12px; }
    .btn-lg { height: 46px; }
    .btn-ghost { box-shadow: none; }
    .badge { font-size: 11px; border-radius: 6px; padding: 3px 8px; }
    .chip { border-radius: 8px; padding: 7px 12px; }
    .chip.on { box-shadow: inset 0 0 0 1px var(--c-primary-ring); }
    .section-title { font-size: 12px; color: var(--c-text-2); letter-spacing: .01em; }
    details.panel { border-radius: 12px; }
    details.panel > summary { padding: 15px 20px; font-size: 13px; }
    details.panel > summary:hover { background: var(--c-surface-2); border-radius: 12px; }
    details.panel > .panel-body { padding: 4px 20px 20px; }
    .filters { gap: 14px; }
    .field { gap: 7px; min-width: 0; }
    .filters .field { min-width: 170px; }
    .field label { font-size: 12px; text-transform: none; letter-spacing: 0; }
    input:not([type]), input[type="text"], input[type="number"], input[type="date"],
    input[type="password"], input[type="search"], select, textarea {
        min-width: 0; border: 1px solid var(--c-border-2); border-radius: 8px;
        background: var(--c-surface); color: var(--c-text); font: inherit;
        width: 100%; padding: 0 12px; height: 40px;
    }
    textarea { height: auto; min-height: 94px; padding: 10px 12px; }
    input::placeholder, textarea::placeholder { color: var(--c-text-3); }
    input:hover, select:hover, textarea:hover { border-color: #9ba995; }
    input:focus, select:focus, textarea:focus { border-color: var(--c-primary); }
    input[readonly] { background: var(--c-surface-2); color: var(--c-text-2); }
    input:disabled, select:disabled { background: var(--c-surface-3); color: var(--c-text-3); }
    input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; }
    input[type="file"] { max-width: 100%; font-size: 13px; }
    input[type="file"]::file-selector-button {
        padding: 8px 12px; margin-right: 10px; color: var(--c-text);
        background: var(--c-surface-2); border: 1px solid var(--c-border-2);
        border-radius: 7px; font: inherit; cursor: pointer;
    }

    table { font-size: 13px; }
    thead th { padding: 13px 16px; font-size: 12px; letter-spacing: 0; font-weight: 600; }
    tbody td { padding: 14px 16px; }
    .table-scroll { scrollbar-width: thin; scrollbar-color: #b5c1ae transparent; }
    tbody tr:hover td { background: #f1f5ee; }
    .col-grp { border-left-width: 1px; }
    .cny, .usd { border-radius: 0; }
    .mcell { background: none; padding: 3px 4px; font-size: 12px; }
    .mcell-amt { font-weight: 600; }
    .mcell-rate { font-size: 11px; }
    #items-table { font-size: 13px; }
    #items-table [data-col="photo"] { width: 56px; }
    #items-table [data-col="sku"] { width: 104px; }
    #items-table [data-col="name"] { width: 124px; }
    #items-table [data-col="status"] { width: 130px; }
    #items-table [data-col="cost_purchase"] { width: 86px; }
    #items-table [data-col^="price_"] { width: 96px; }
    #items-table [data-col="price_EBAY"] { width: 104px; }
    #items-table [data-col="price_PRIVATE"] { width: 108px; }
    #items-table [data-col^="margin_"] { width: 92px; }
    #items-table [data-col="delivery"] { width: 90px; }
    #items-table [data-col^="cost_"]:not([data-col="cost_purchase"]) { width: 66px; }
    #items-table [data-col="price_TIKTOK"] { font-weight: 650; color: var(--c-primary-press); }
    #items-table [data-col="price_TK_LIST"] { color: var(--c-text-2); font-size: 12px; }
    #items-table [data-col^="cost_"]:not([data-col="cost_purchase"]) { color: var(--c-text-2); font-size: 12px; }
    #items-table .status-select { height: 29px; padding: 0 8px; font-size: 12px; border-radius: 7px; }
    #items-table .grade-select { height: 29px; }
    #items-table .inline-edit-input { height: 30px; padding: 2px 7px; font-size: 13px; }
    #items-table td.editable:hover { background: var(--c-primary-soft); }
    #items-table tr.status-group td { background: #edf2e9; color: var(--c-primary-press); font-size: 12px; }
    .thumb { background: #fff; border-color: var(--c-border); border-radius: 8px; }
    .stat-label { font-size: 12px; letter-spacing: 0; text-transform: none; }
    .stat-value { font-size: 30px; color: var(--c-primary-press); letter-spacing: -.04em; }
    .stat-note { font-size: 12px; }
    .dashboard-kpis { margin-bottom: 24px; }
    .dashboard-kpis .card-body { padding: 24px; }
    .kpi-number { font-size: 34px !important; line-height: 1.3; margin-top: 12px; letter-spacing: -.04em; }
    .kpi-card:first-child { background: var(--c-primary); border-color: var(--c-primary); }
    .kpi-card:first-child .small, .kpi-card:first-child .kpi-number { color: #fff; }
    .alert { padding: 14px 18px; font-size: 13px; border-radius: 10px; }
    .alert-info { color: #466472; }
    .empty { padding: 44px 24px; color: var(--c-text-2); }
    .settings-nav {
        flex: none; gap: 6px; margin-bottom: 24px; padding: 7px;
        border: 1px solid var(--c-border); border-radius: 12px;
        background: var(--c-surface); overflow-x: auto;
    }
    .settings-nav a.active { background: var(--c-primary-soft); color: var(--c-primary-press); }
    .perm-dialog { width: min(520px, calc(100vw - 32px)); max-width: none; border-radius: 16px; }
    .perm-dialog::backdrop { background: rgba(25, 42, 29, .42); backdrop-filter: blur(3px); }
    .perm-head { padding: 21px 24px; background: var(--c-surface); gap: 6px; font-weight: 600; font-size: 17px; }
    .perm-head .small { font-weight: 400; }
    .perm-actions { padding: 16px 24px; background: var(--c-surface-2); }
    .perm-grid { padding: 20px 24px 0; gap: 16px; }
    .perm-row { font-size: 13px; }
    .drawer-panel { width: min(480px, 100vw); box-shadow: var(--sh-3); }
    .drawer-head { padding: 22px 24px; }
    .drawer-title { font-size: 18px; }
    .drawer-body { padding: 20px 24px 36px; }
    .drawer-total { letter-spacing: -.035em; }
    .drawer-table td { padding: 7px 6px; }
    .price-card { padding: 20px; border-radius: 12px; }
    .pc-price { letter-spacing: -.035em; }
    .photo-main { border-radius: 12px; }
    .login-page { min-height: 100vh; }
    .login-page > .wrap { min-height: 100vh; display: grid; place-items: center; }
    .login-shell { width: min(440px, 100%); padding: 24px 0; }
    .login-brand { text-align: center; font-size: 32px; font-weight: 650; letter-spacing: -.04em; margin-bottom: 28px; color: var(--c-primary); }
    .login-brand span { display: block; font-size: 13px; font-weight: 400; letter-spacing: .04em; margin-top: 8px; color: var(--c-text-2); }
    .login-shell .card { box-shadow: var(--sh-2); }
    .login-shell .card > h2 { flex-direction: column; align-items: flex-start; border-bottom: none; padding-bottom: 0; font-size: 21px; }
    .login-shell .card > h2 .hint { margin-left: 0; }
    .login-fields { display: flex; flex-direction: column; gap: 20px; }
    .login-fields input { height: 46px; }
    .login-fields .btn { height: 46px; margin-top: 4px; }
}

@media screen and (max-width: 1180px) {
    .topbar-inner { gap: 12px; padding: 12px 20px 8px; }
    .topbar .nav { order: 3; flex: 0 0 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 5px; }
    .topbar .nav a { white-space: nowrap; }
    .whoami { margin-left: auto; }
    .brand { font-size: 18px; }
    .wrap { padding: 24px 20px 48px; }
    .page-head { gap: 10px; }
}
@media screen and (max-width: 760px) {
    .topbar-inner { padding: 12px 16px 8px; }
    .topbar .nav { gap: 3px; }
    .nav a { font-size: 13px; padding: 9px 12px; }
    .brand span { font-size: 9px; }
    .whoami { gap: 12px; font-size: 12px; }
    .whoami .fx-rate, .whoami .badge { display: none; }
    .wrap { padding: 22px 16px 48px; }
    h1, .page-head h1 { font-size: 24px; }
    .page-head .actions { margin-left: 0; width: 100%; gap: 8px; }
    .page-head .actions .btn { padding: 0 12px; }
    .grid, .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .dashboard-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .dashboard-kpis .card-body { padding: 18px 16px; }
    .kpi-number { font-size: 28px !important; }
    .card > h2 { padding: 17px 18px; }
    .card > h2 .hint, .card > h2 .sub { margin-left: 0; flex-basis: 100%; }
    .card-body, .card-body.tight { padding: 18px; }
    .filters .field { min-width: 0; width: 100%; }
    .filters { gap: 12px; }
    .field label { font-size: 13px; }
    input:not([type]), input[type="text"], input[type="number"], input[type="date"],
    input[type="password"], input[type="search"], select, textarea { font-size: 16px; min-width: 0; }
    .table-scroll { max-height: none; }
    .page-audit .table-scroll table, .page-activity .table-scroll table,
    .page-settings .table-scroll table, .page-orders .table-scroll table { min-width: 720px; }
    .card[data-performance] .table-scroll table { min-width: 840px; }
    #items-scroll { mask-image: none; -webkit-mask-image: none; }
    .settings-nav { flex-wrap: nowrap; }
    .settings-nav a { white-space: nowrap; }
    .perm-grid { grid-template-columns: 1fr; }
    .perm-head { padding: 20px; }
    .perm-form { max-height: min(86vh, calc(100dvh - 48px)); }
    .drawer-panel { width: 100%; }
    .drawer-head, .drawer-body { padding-left: 20px; padding-right: 20px; }
    .price-cards { grid-template-columns: 1fr; }
    .login-shell { padding: 16px 0; }
    .login-brand { font-size: 28px; }
}
@media screen and (prefers-reduced-motion: no-preference) {
    .perm-dialog[open] { animation: dialog-enter 160ms ease-out; }
    @keyframes dialog-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
}
@media print { .skip-link { display: none; } }


/* Whole-row warning takes precedence over currency tints and edit hover. */
@media screen {
    #items-table tr.low-margin-warning > td { background: #fce4e1; }
    #items-table tr.low-margin-warning:hover > td,
    #items-table tr.low-margin-warning > td.editable:hover { background: #f9d7d2; }
    #items-table tr.low-margin-warning .status-select { background: #fff0ed; border-color: #d79790; }
    #items-table tr.unpriced-item > td { background: #eef0f2; }
    #items-table tr.unpriced-item:hover > td,
    #items-table tr.unpriced-item > td.editable:hover { background: #e3e6e9; }
    #items-table tr.unpriced-item .status-select { background: #f6f7f8; border-color: #c9ced3; }
    .unpriced-label { display: block; margin-top: 4px; font-size: 12px; color: #626b73; }
    .unpriced-label[hidden] { display: none; }
    .unpriced-choice { display: flex; align-items: center; gap: 8px; }
    .unpriced-choice input[type="checkbox"] { width: auto; }
}

/* Inventory workbench and side-by-side performance overview. */
.workbench-head p { margin: 8px 0 0; font-size: 14px; }
.workbench-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.metric-tile { display: flex; flex-direction: column; gap: 15px; padding: 22px; border: 1px solid var(--c-border); border-radius: 14px; background: var(--c-surface); color: var(--c-text); text-decoration: none; }
.metric-tile:hover { text-decoration: none; border-color: var(--c-primary); }
.metric-tile > span:first-child { font-size: 14px; font-weight: 600; }
.metric-tile > strong { font-size: 36px; line-height: 1.2; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.metric-tile small { font-size: 13px; margin-left: 8px; font-weight: 400; letter-spacing: 0; }
.metric-foot { font-size: 12px; color: var(--c-text-2); }
.metric-primary, .metric-primary:hover { background: var(--c-primary); color: #fff; }
.metric-primary .metric-foot { color: #e6eee8; }
.metric-danger { background: #fff1ee; border-color: #e8b7af; color: #8b342d; }
.metric-danger .metric-foot { color: #8b342d; }
.workbench-note { margin: 14px 0 24px; font-size: 13px; line-height: 1.8; color: var(--c-text-2); }
.card > h2 .section-link { margin-left: auto; font-size: 13px; font-weight: 500; }
.cell-secondary { display: block; margin-top: 5px; font-size: 12px; font-weight: 400; line-height: 1.5; color: var(--c-text-2); }
.section-note { margin: 0; padding: 16px 22px; font-size: 13px; line-height: 1.7; color: var(--c-text-2); }
.risk-table td, .alert-review-table td { padding-top: 14px; padding-bottom: 14px; }
.risk-table .risk-urgent > td { background: #fff0ed; }
.risk-table .risk-urgent:hover > td { background: #fce4e1; }
.badge-danger { color: #8b342d; background: #f8d9d3; border-color: #e8b7af; }
.period-summaries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 20px 0 24px; }
.period-summary { padding: 24px; border: 1px solid var(--c-border); border-top: 3px solid var(--c-primary); border-radius: 14px; background: var(--c-surface); }
.period-heading { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.period-heading h2 { margin: 0; font-size: 16px; }
.period-heading > span { color: var(--c-text-2); font-size: 12px; }
.period-revenue { display: flex; flex-direction: column; gap: 6px; margin: 24px 0 20px; }
.period-revenue > span { font-size: 13px; color: var(--c-text-2); }
.period-revenue > strong { font-size: 36px; line-height: 1.2; color: var(--c-primary-press); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.period-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; border-top: 1px solid var(--c-border); padding-top: 18px; }
.period-stats > div > span { display: block; font-size: 12px; color: var(--c-text-2); margin-bottom: 6px; }
.period-stats strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.period-stats small { font-size: 12px; font-weight: 400; }
.period-download { display: inline-block; margin-top: 18px; font-size: 13px; }
.report-empty-note { padding: 13px 18px; border-radius: 9px; background: var(--c-primary-soft); color: var(--c-primary-press); font-size: 13px; }
.performance-table .period-group { text-align: center; border-left: 1px solid var(--c-border); font-size: 13px; color: var(--c-primary-press); background: var(--c-primary-soft); }
.performance-table tbody th { font-size: 14px; text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--c-border); }
.performance-table tbody td { padding-top: 15px; padding-bottom: 15px; }
.performance-table tbody td:nth-child(5) { border-left: 1px solid var(--c-border); }
.performance-table, .risk-table { min-width: 860px; }
.alert-review-table { min-width: 700px; }
.custom-performance { min-width: 600px; }
.custom-performance tbody th { text-align: left; padding: 14px 18px; }
.report-scope summary, #report-detail summary { display: flex; flex-wrap: wrap; gap: 12px; }
.filter-draft { flex-basis: 100%; margin: 0; color: #8b5624; }
.filter-draft[hidden] { display: none; }
.applied-scope { margin: 20px 0; line-height: 1.8; font-size: 14px; }
.report-exports { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.export-option { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; border: 1px solid var(--c-border); border-radius: 10px; }
.export-option > div:last-child { white-space: nowrap; }
.table-scroll:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
@media screen and (max-width: 1000px) {
  .workbench-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .period-heading { flex-direction: column; }
}
@media screen and (max-width: 760px) {
  .workbench-metrics { gap: 10px; }
  .metric-tile { padding: 17px 14px; gap: 12px; }
  .metric-tile > span:first-child { font-size: 12px; }
  .metric-tile > strong { font-size: 30px; }
  .metric-foot { font-size: 11px; line-height: 1.6; }
  .period-summaries, .report-exports { grid-template-columns: minmax(0, 1fr); }
  .period-summary { padding: 20px; }
  .period-revenue > strong { font-size: 32px; }
  .card > h2 .section-link { margin-left: 0; }
  .performance-table tbody th { position: sticky; left: 0; background: var(--c-surface); z-index: 1; min-width: 95px; box-shadow: 1px 0 var(--c-border); }
  .section-note { padding: 14px 18px; }
  .export-option { flex-wrap: wrap; }
}

/* File selection and clipboard screenshots share one preview and submit path. */
.photo-picker { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; width: 100%; }
.photo-picker input[type="file"] { max-width: 100%; }
.photo-paste { width: 100%; min-height: 52px; padding: 12px; border: 1px dashed var(--c-primary); border-radius: 9px; background: var(--c-primary-soft); color: var(--c-primary-press); text-align: center; cursor: pointer; }
.photo-paste:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 3px; }
.photo-picked-preview { max-width: 100%; width: auto; height: 110px; object-fit: contain; border-radius: 7px; }
.photo-picker [hidden] { display: none !important; }
.photo-picker p { margin: 0; overflow-wrap: anywhere; }
.photo-picker .photo-error { color: var(--c-danger); }
.drawer-photo-actions { flex-wrap: wrap; }