/* =============================================================================
   Amzed — dark Amazon-style design system (2026-10-09)
   1 Tokens · 2 Base · 3 Shell · 4 Components · 5 Screens · 6 Legacy compatibility · 7 Responsive
   Section 6 styles the class names existing screens already use, so their page scripts keep
   working unchanged. Do not rename those classes.
   ============================================================================= */

/* 1 · Tokens ---------------------------------------------------------------- */
:root {
    --bg: #0F1419;
    --header: #131921;
    --surface: #1B2430;
    --surface-2: #18202A;
    --border: #2A3441;
    --border-hi: #3A4553;
    --text: #F1F3F5;
    --muted: #8A96A3;
    --orange: #FF9900;
    --orange-2: #FFB84D;
    --orange-dim: #7A5212;
    --red: #F0606E;
    --amber: #FFB84D;
    --green: #3CCB8A;
    --blue: #5AA9FF;
    --red-bg: #3A1A20;
    --amber-bg: #3A2C12;
    --green-bg: #12301F;
    --blue-bg: #12263A;
    --ink: #0F1111;
    --radius: 8px;
    --radius-sm: 6px;
    --shadow: 0 10px 30px rgba(0, 0, 0, .45);
    --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --tabbar-h: 60px;
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238A96A3' stroke-width='1.5'/%3E%3C/svg%3E");
    color-scheme: dark;
}

/* 2 · Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 400 14px/1.45 var(--font);
    -webkit-font-smoothing: antialiased;
}
a { color: var(--orange-2); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 .5em; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
h1 { font-size: 22px; } h2 { font-size: 17px; } h3 { font-size: 15px; } h4 { font-size: 14px; }
p { margin: 0 0 1em; }
img { max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }
td, .num, .stat-value, .summary-value { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
::selection { background: var(--orange); color: var(--ink); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
[hidden] { display: none !important; }

/* 3 · Shell ----------------------------------------------------------------- */
.app-header {
    position: sticky; top: 0; z-index: 50;
    background: var(--header);
    border-bottom: 1px solid var(--border);
    padding-top: env(safe-area-inset-top, 0px);
}
.app-header-inner { display: flex; align-items: center; gap: 24px; height: 56px; max-width: 1440px; margin: 0 auto; padding: 0 20px; }
.brand { display: flex; align-items: center; flex: 0 0 auto; }
.brand img { height: 38px; display: block; margin-block: -4px; }
.app-nav { display: flex; align-items: stretch; gap: 2px; height: 100%; }
.app-nav > a, .app-nav > .menu > a {
    display: flex; align-items: center; gap: 6px; height: 100%; padding: 0 12px;
    color: var(--muted); font-weight: 500; border-bottom: 2px solid transparent; text-decoration: none;
}
.app-nav > a:hover, .app-nav > .menu > a:hover { color: var(--text); }
.app-nav a.is-active { color: var(--text); border-bottom-color: var(--orange); }
.app-header-end { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.menu { position: relative; }
.app-nav > .menu { display: flex; }
.menu-button {
    display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: var(--text); font: 600 13px var(--font); cursor: pointer; white-space: nowrap;
}
.menu-button:hover { border-color: var(--border-hi); }
.menu-button::after { content: ""; width: 10px; height: 6px; background: var(--chevron) no-repeat center; }
.menu-button.is-plain::after { display: none; }
.avatar {
    display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
    background: var(--orange); color: var(--ink); font-size: 10px; font-weight: 800;
}
.menu-panel {
    display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 220px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 6px;
}
.app-nav .menu-panel { left: 0; right: auto; top: 100%; }
.menu.is-open > .menu-panel { display: block; }
.menu-panel a, .menu-panel button {
    display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: var(--radius-sm);
    background: none; color: var(--text); font: 500 14px var(--font); text-align: left; text-decoration: none; cursor: pointer;
}
.menu-panel a:hover, .menu-panel button:hover { background: var(--surface-2); text-decoration: none; }
.menu-panel a.is-current { color: var(--orange-2); }
.menu-label { padding: 8px 12px 4px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.menu-panel hr { margin: 6px 0; }
.menu-panel i { width: 18px; margin-right: 6px; color: var(--muted); text-align: center; }
.menu-panel form { margin: 0; }
.store-name { display: inline-block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

.health-banner { display: flex; gap: 12px; align-items: flex-start; max-width: 1440px; margin: 12px auto 0; padding: 12px 16px; background: var(--red-bg); border: 1px solid #5A2630; border-radius: var(--radius); color: #FFC9CF; font-size: 13.5px; }
.health-banner > i { margin-top: 3px; color: var(--red); }
.health-banner strong { color: var(--text); }
@media (max-width: 1472px) { .health-banner { margin-inline: 16px; } }
.app-main { max-width: 1440px; margin: 0 auto; padding: 16px 20px 40px; }
#flash { max-width: 1440px; margin: 0 auto; padding: 0 20px; }
#flash:empty { display: none; }

.tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: none;
    background: var(--header); border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tabbar a, .tabbar button {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    height: var(--tabbar-h); border: 0; background: none; color: var(--muted);
    font: 600 11px var(--font); text-decoration: none; cursor: pointer;
}
.tabbar i { font-size: 18px; }
.tabbar .is-active { color: var(--orange); }

.sheet-backdrop { display: none; position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, .55); }
.sheet-backdrop.is-open { display: block; }
.sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 71; max-height: 85vh; overflow: auto;
    background: var(--surface); border-top: 1px solid var(--border); border-radius: 16px 16px 0 0;
    padding: 6px 10px calc(14px + env(safe-area-inset-bottom, 0px));
    transform: translateY(105%); transition: transform .2s ease; visibility: hidden;
}
.sheet.is-open { transform: none; visibility: visible; }
.sheet-handle { width: 38px; height: 4px; border-radius: 2px; background: var(--border-hi); margin: 6px auto 10px; }
.sheet a, .sheet button {
    display: flex; align-items: center; gap: 14px; width: 100%; min-height: 48px; padding: 0 12px;
    border: 0; border-radius: 10px; background: none; color: var(--text); font: 500 15px var(--font); text-decoration: none; cursor: pointer;
}
.sheet a:hover, .sheet button:hover { background: var(--surface-2); text-decoration: none; }
.sheet i { width: 20px; text-align: center; color: var(--muted); }
.sheet .menu-label { padding-left: 12px; }
.sheet hr { margin: 8px 12px; }
.sheet form { margin: 0; }

/* Breadcrumbs (pages still provide `nav.breadcrumbs > ol`; filters.js / buttons.js hook into it) */
nav.breadcrumbs { display: flex; align-items: center; gap: 8px; max-width: 1440px; margin: 0 auto; padding: 14px 20px 0; }
nav.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--muted); }
nav.breadcrumbs li + li::before { content: "›"; margin-right: 6px; color: var(--border-hi); }
nav.breadcrumbs a { color: var(--muted); }
nav.breadcrumbs .active { color: var(--text); }
.show-filters {
    display: none; margin-left: auto; align-items: center; justify-content: center; width: 40px; height: 36px;
    border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text);
}
.show-filters.buttons { display: none !important; } /* page buttons stay inline on phones */

/* Guest pages (login, password reset) */
.guest-main { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 24px 16px; }
.guest-brand img { height: 34px; display: block; }
.guest-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 24px; }
.guest-card h1 { font-size: 19px; margin-bottom: 16px; }
.button-block { display: flex; width: 100%; justify-content: center; margin-top: 6px; }
.guest-links { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; font-size: 13px; }

/* 4 · Components ------------------------------------------------------------ */
.page-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 4px 0 16px; }
.page-head h1 { margin: 0; font-size: 20px; }
.page-head-actions { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.segmented { display: inline-flex; max-width: 100%; overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.segmented button {
    flex: 0 0 auto; min-height: 36px; padding: 0 12px; border: 0; background: none;
    color: var(--muted); font: 600 12px var(--font); cursor: pointer; white-space: nowrap;
}
.segmented button:hover { color: var(--text); }
.segmented button.is-on { background: var(--orange); color: var(--ink); }
.segmented.is-small button { min-height: 30px; padding: 0 10px; font-size: 11px; }
.presets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.custom-range { display: flex; align-items: center; gap: 6px; }
.custom-range input { width: auto; }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.stats.stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat { display: block; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); text-decoration: none; }
a.stat:hover { border-color: var(--border-hi); text-decoration: none; }
.stat-label { color: var(--muted); font-size: 12px; font-weight: 500; }
.stat-value { margin: 4px 0 2px; font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.stat-sub { min-height: 1.3em; color: var(--muted); font-size: 12px; }
.stat-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.stat-compare { flex: 0 0 auto; padding: 1px 7px; background: var(--surface-2); border-radius: 999px; color: var(--muted); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; cursor: help; }
.stat-compare.is-up { background: var(--green-bg); color: var(--green); }
.stat-compare.is-down { background: var(--red-bg); color: var(--red); }
.dash-title { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.needs-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; background: var(--amber-bg); border-radius: 999px; color: var(--amber); font-size: 12px; font-weight: 700; }
.needs-chip:hover { color: var(--orange-2); text-decoration: none; }
.stat.is-alert { border-color: #5A3B12; background: linear-gradient(180deg, #2A2112, var(--surface)); }
.stat.is-alert .stat-value { color: var(--orange-2); }

.card { margin-bottom: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.card-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px 16px 0; }
.card-title { margin: 0; font-size: 14px; font-weight: 700; }
.card-meta { color: var(--muted); font-size: 12px; }
.card-actions { margin-left: auto; }
.card-pad { padding: 12px 16px 16px; }
.chart-box { position: relative; height: 280px; }

.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.badge-reorder { background: var(--red-bg); color: var(--red); }
.badge-send { background: var(--blue-bg); color: var(--blue); }
.badge-ok { background: var(--green-bg); color: var(--green); }
.badge-watch { background: var(--amber-bg); color: var(--amber); }
.badge-neutral { background: var(--surface-2); color: var(--muted); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
    display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px;
    border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 12.5px; font-weight: 600; text-decoration: none;
}
.chip:hover { color: var(--text); text-decoration: none; }
.chip.is-on { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.chip-count { opacity: .75; }
.empty { padding: 22px 12px; color: var(--muted); text-align: center; }

.thumb { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 6px; background: #fff; object-fit: contain; padding: 2px; }
.thumb-empty { display: inline-block; background: var(--surface-2); }
.is-low { color: var(--red); }
.o-market-inline { display: none; }
.c-label { display: none; }
@media (max-width: 640px) { .c-label { display: inline; } }
@media (max-width: 640px) { .o-market-inline { display: inline; } }
.is-watch { color: var(--amber); }
.sub-line { display: block; color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.is-low .sub-line, .sub-line.is-low { color: var(--red); }

/* 5 · Screens --------------------------------------------------------------- */
/* Dashboard */
.panel-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; }
.action-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); color: var(--text); text-decoration: none; }
.action-item:first-child { border-top: 0; padding-top: 2px; }
.action-item:hover { text-decoration: none; }
.action-item:hover .action-item-name { color: var(--orange-2); }
.action-item-body { flex: 1; min-width: 0; }
.action-item-name { display: block; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.action-item-meta { display: block; color: var(--muted); font-size: 12px; }
.link-more { display: inline-block; margin-top: 10px; font-weight: 600; }
.chart-legend { display: flex; gap: 14px; margin-top: 8px; color: var(--muted); font-size: 11.5px; }
.chart-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }

.calendar { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.calendar-event { display: grid; gap: 4px; padding: 12px; background: var(--surface-2); border-radius: var(--radius-sm); font-size: 13px; }
.calendar-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; font-size: 14px; }
.calendar-note { color: var(--muted); font-size: 12px; }
.calendar-risk { margin-top: 4px; color: var(--amber); }

/* Detail pages (product, order, customer) */
.detail-hero { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; margin-bottom: 12px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.detail-hero-image img, .detail-hero-image .thumb-empty { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; padding: 8px; background: #fff; border-radius: 8px; }
.detail-hero-body { min-width: 0; }
.detail-hero-image { grid-row: span 2; }
.detail-hero-foot { grid-column: 2; min-width: 0; }
.detail-hero h1 { margin: 0 0 4px; font-size: 22px; line-height: 1.25; }
.detail-subtitle { display: -webkit-box; margin: 0; overflow: hidden; color: var(--muted); font-size: 13px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 8px; font-size: 13px; }
.detail-price { font-size: 16px; font-weight: 700; }
.detail-badges, .detail-codes, .detail-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.detail-actions .button i { margin-right: 4px; }
.code-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 3px 9px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font: 500 12px ui-monospace, Menlo, monospace; cursor: pointer; }
.code-chip span { color: var(--muted); font: 600 10px var(--font); letter-spacing: .05em; }
.code-chip i { color: var(--muted); }
.code-chip.is-copied { border-color: var(--green); }
.code-chip.is-copied i { color: var(--green); }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.detail-grid > .card { margin: 0; min-width: 0; }
.detail-wide { grid-column: 1 / -1; }
.kv { display: grid; margin: 0; }
.kv > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border); }
.kv > div:first-child { border-top: 0; padding-top: 2px; }
.kv dt { color: var(--muted); font-size: 13px; }
.kv dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.kv-sub { display: block; color: var(--muted); font-size: 12px; font-weight: 500; }
.kv-sub.is-low { color: var(--red); }
.kv > .is-off { opacity: .55; }
.kv-note { margin: 10px 0 0; font-size: 12px; }
.chart-box-small { height: 170px; margin-top: 12px; }
.list-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border); color: var(--text); font-size: 13.5px; }
.list-line:first-child { border-top: 0; padding-top: 2px; }
a.list-line:hover { text-decoration: none; }
a.list-line:hover .list-line-title { color: var(--orange-2); }
.list-line > span { display: flex; flex-direction: column; min-width: 0; }
.list-line > span.text-right { align-items: flex-end; flex: 0 0 auto; }
.list-line-title { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.list-line .muted { font-size: 12px; }
.listing-title { margin: 0; font-weight: 600; }
.listing-bullets { display: grid; gap: 6px; margin: 10px 0 0; padding-left: 18px; color: var(--muted); font-size: 13px; }
.listing-issues { margin-top: 10px; }
.listing-issues p { margin: 6px 0 0; font-size: 13px; }
.listing-more { margin-top: 12px; font-size: 13px; }
.listing-more summary { color: var(--orange-2); cursor: pointer; }
.listing-more p { margin: 6px 0 0; color: var(--muted); }
.detail-form { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.detail-form .form-item { margin: 0; }

.order-hero { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 20px; margin-bottom: 12px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.order-hero-main { min-width: 0; }
.order-hero-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; }
.order-hero h1 { margin: 8px 0 2px; font-size: 26px; font-variant-numeric: tabular-nums; }
.order-hero-nav { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.order-pager { display: flex; gap: 6px; }
.button.is-disabled { pointer-events: none; opacity: .35; }
.tag { padding: 1px 7px; border: 1px solid var(--border); border-radius: 4px; color: var(--muted); font-size: 11px; font-weight: 600; }
.order-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); }
.order-item:first-child { border-top: 0; padding-top: 2px; }
.order-item .thumb { width: 48px; height: 48px; }
.order-item-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.order-item-body a, .order-item-body > span:first-child { overflow: hidden; color: var(--text); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.order-item-body .muted { font-size: 12px; }
.order-item-price { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.order-totals { margin-top: 8px; padding-top: 4px; border-top: 1px solid var(--border); }
.order-total dt, .order-total dd { color: var(--text); font-size: 15px; font-weight: 700; }
.detail-stack { display: grid; gap: 12px; align-content: start; min-width: 0; }
.detail-stack > .card { margin: 0; }
.customer-mini { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.customer-mini > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.timeline { margin: 0; padding: 0; list-style: none; }
.timeline li { position: relative; display: flex; flex-direction: column; padding: 0 0 14px 22px; font-size: 13.5px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: 0; top: 4px; width: 10px; height: 10px; border: 2px solid var(--border-hi); border-radius: 50%; background: var(--surface); }
.timeline li::after { content: ""; position: absolute; left: 6px; top: 18px; bottom: 0; width: 2px; background: var(--border); }
.timeline li:last-child::after { display: none; }
.timeline li.is-done::before { border-color: var(--green); background: var(--green); }
.timeline li.is-bad::before { border-color: var(--red); background: var(--red); }
.timeline .muted { font-size: 12px; }

.list-line-with-thumb { display: flex !important; flex-direction: row !important; align-items: center; gap: 10px; }
.order-line { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); color: var(--text); }
.order-line:first-child { border-top: 0; padding-top: 2px; }
.order-line:hover { text-decoration: none; }
.order-line:hover .list-line-title { color: var(--orange-2); }
.order-line-thumbs { display: flex; flex: 0 0 auto; gap: 2px; }
.order-line-thumbs .thumb { width: 36px; height: 36px; }
.order-line-body { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: 13.5px; }
.order-line-body .muted { font-size: 12px; }
.order-line-end { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-variant-numeric: tabular-nums; }

.ptr {
    position: fixed; top: calc(env(safe-area-inset-top, 0px) + 8px); left: 50%; z-index: 95;
    display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-left: -19px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 50%; box-shadow: var(--shadow);
    color: var(--muted); opacity: 0; transform: translateY(-50px); pointer-events: none;
}
.ptr.is-ready { color: var(--orange); }
.ptr.is-settling { transition: transform .2s ease, opacity .2s ease; }
.ptr.is-loading i { animation: ptr-spin .8s linear infinite; }
.ptr.is-loading i::before { content: "\f2f1"; } /* Font Awesome sync icon */
@keyframes ptr-spin { to { transform: rotate(360deg); } }

/* Stock list */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.toolbar .search { margin-left: auto; width: 260px; }
.summary-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.summary { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.summary-value { font-size: 22px; font-weight: 700; }
.summary-text { color: var(--muted); font-size: 12px; }
.product-cell { display: flex; align-items: center; gap: 10px; min-width: 220px; }
.product-cell a { color: var(--text); font-weight: 600; }
.product-cell a:hover { color: var(--orange-2); }
.cover { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.cover-bar { flex: 0 0 auto; width: 64px; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.cover-bar i { display: block; height: 100%; border-radius: 3px; }
.wh-edit { padding: 0; border: 0; border-bottom: 1px dashed var(--muted); background: none; color: var(--text); font: inherit; cursor: pointer; }
.wh-edit:hover { color: var(--orange-2); border-bottom-color: var(--orange-2); }
.wh-form { display: inline-flex; align-items: center; gap: 4px; }
.wh-form input { width: 86px; min-height: 32px; padding: 4px 8px; }
.stock-table th, .stock-table td { white-space: nowrap; }
.stock-table .group-start { border-left: 1px solid var(--border); }
.stock-table thead tr:first-child th { border-bottom: 0; padding-bottom: 2px; }
.stock-fig { font-variant-numeric: tabular-nums; }
.days-fig { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.days-fig .muted { font-weight: 500; }
.stock-cards { display: none; }
.stock-card { margin-bottom: 8px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.stock-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.stock-card-top a { flex: 1; min-width: 0; overflow: hidden; color: var(--text); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.stock-card-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.stock-card-figures > div { padding: 7px 4px; background: var(--surface-2); border-radius: 6px; text-align: center; }
.stock-card-figures .k { color: var(--muted); font-size: 10.5px; }
.stock-card-figures .v { font-size: 15px; font-weight: 700; }
.stock-card-figures .v .muted { margin: 0 2px; font-weight: 400; }
.stock-card-figures .d { font-size: 13px; font-weight: 700; }
.stock-card-figures .is-off { opacity: .55; }
.stars { color: var(--orange-2); font-weight: 600; }
.rank-up { margin-left: 4px; color: var(--green); font-size: 12px; font-weight: 700; }
.rank-down { margin-left: 4px; color: var(--red); font-size: 12px; font-weight: 700; }
.rank-add { display: flex; gap: 8px; margin-top: 12px; }
.rank-add input { flex: 1; }
.stock-card-sold { margin-top: 8px; font-size: 12.5px; }

table.table td > img, table.table td > a > img { width: 48px; height: 48px; object-fit: contain; padding: 2px; background: #fff; border-radius: 6px; }

/* 6 · Legacy compatibility --------------------------------------------------- */
/* Grid (formerly Kube). --g is the gap; col-N widths account for it so mixed rows still sum to 100%. */
.row { --g: 0px; display: flex; flex-wrap: wrap; gap: var(--g); }
.row.gutters, .row.gutters2 { --g: 16px; }
.row.between { justify-content: space-between; }
.row.end { justify-content: flex-end; }
.row.items-center, .row.align-center { align-items: center; }
.col { flex: 1 1 0; min-width: 0; }
.col-1 { --n: 1; } .col-2 { --n: 2; } .col-3 { --n: 3; } .col-4 { --n: 4; } .col-5 { --n: 5; } .col-6 { --n: 6; }
.col-7 { --n: 7; } .col-8 { --n: 8; } .col-9 { --n: 9; } .col-10 { --n: 10; } .col-11 { --n: 11; } .col-12 { --n: 12; }
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    flex: 0 0 calc(var(--n) / 12 * 100% - (1 - var(--n) / 12) * var(--g));
    max-width: calc(var(--n) / 12 * 100% - (1 - var(--n) / 12) * var(--g));
}

.page-header { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 4px 0 16px; }
.page-header h1 { margin: 0; font-size: 20px; }
.page-header .buttons { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.card-body { padding: 16px; }
.table-card { overflow: hidden; }
.table-card-body { overflow-x: auto; }
.filters, .filters-card { margin-bottom: 16px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.filters label, .filters-card label { margin-bottom: 4px; }

label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 12px; font-weight: 600; }
.form-item { margin-bottom: 14px; }
input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea, .form-control {
    width: 100%; min-height: 38px; padding: 8px 10px;
    background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm);
    font: 400 14px var(--font);
}
textarea { min-height: 90px; }
input[type=checkbox], input[type=radio] { width: 16px; height: 16px; margin: 0; accent-color: var(--orange); }
input:focus, select:focus, textarea:focus, .form-control:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255, 153, 0, .2); }
input[type=date]::-webkit-calendar-picker-indicator { filter: invert(.75); cursor: pointer; }
select { appearance: none; -webkit-appearance: none; padding-right: 30px; background-image: var(--chevron); background-repeat: no-repeat; background-position: right 10px center; }
.form-control-plaintext, input.form-control-plaintext { background: transparent !important; border-color: transparent !important; padding-left: 0; }
.is-invalid { border-color: var(--red) !important; }
.invalid-feedback { margin-top: 4px; color: var(--red); font-size: 12px; }
.form-check { display: flex; align-items: center; gap: 8px; margin: 6px 0; cursor: pointer; }
.form-check-label { margin: 0; color: var(--text); font-size: 14px; font-weight: 500; }
.form-section { margin: 8px 0 16px; padding: 16px 0 0; border: 0; border-top: 1px solid var(--border); }
.form-section-title { margin: 0 0 12px; padding: 0; color: var(--text); font-size: 13px; font-weight: 700; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 4px 16px; }
.form-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.helper small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; cursor: help; }
.text-right { text-align: right; }
.nowrap { white-space: nowrap; }
.w100 { width: 100%; }

.button, .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 16px;
    border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text);
    font: 600 13px var(--font); text-decoration: none; white-space: nowrap; cursor: pointer;
}
.button:hover, .btn:hover { border-color: var(--border-hi); text-decoration: none; }
.button-primary, .btn-primary { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.button-primary:hover, .btn-primary:hover { background: #FFAD33; border-color: #FFAD33; }
.button-outline-dark { background: transparent; }
.button-small, .button-sm { min-height: 32px; padding: 0 12px; font-size: 12px; }
.button.danger, .button-danger { background: var(--red-bg); border-color: #5A2630; color: var(--red); }
.button.disabled, .button[disabled] { opacity: .5; pointer-events: none; }

table { width: 100%; border-collapse: collapse; }
th { padding: 10px 12px; background: var(--surface-2); border-bottom: 1px solid var(--border); color: var(--muted); font-size: 12px; font-weight: 600; text-align: left; white-space: nowrap; }
td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: rgba(255, 255, 255, .02); }
.table-striped tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .015); }
th.r, td.r { text-align: right; }
th[data-sortable] { cursor: pointer; user-select: none; }
th.sorting.asc::after { content: " ▲"; color: var(--orange); font-size: 9px; }
th.sorting.desc::after { content: " ▼"; color: var(--orange); font-size: 9px; }

.actions { position: relative; display: inline-block; }
.actions .drop, .drop {
    display: none; position: absolute; right: 0; top: 100%; z-index: 40; min-width: 200px; margin: 4px 0 0; padding: 6px;
    list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.actions:hover > .drop, .actions:focus-within > .drop { display: block; }
.drop li { list-style: none; }
.drop li a, .dropdown-item { display: block; padding: 8px 12px; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; white-space: nowrap; }
.drop li a:hover, .dropdown-item:hover { background: var(--surface-2); text-decoration: none; }
.dropdown-divider { height: 1px; margin: 6px 0; background: var(--border); }

.dropdown-list { position: relative; }
.dropdown-list > span {
    display: flex; align-items: center; min-height: 38px; padding: 8px 30px 8px 10px; overflow: hidden;
    background: var(--bg) var(--chevron) no-repeat right 10px center; border: 1px solid var(--border); border-radius: var(--radius-sm);
    text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
}
.dropdown-list > ul {
    display: none; position: absolute; left: 0; top: calc(100% + 4px); z-index: 45; min-width: 100%; max-height: 320px;
    margin: 0; padding: 6px; overflow: auto; list-style: none;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.dropdown-list.active > ul { display: block; }
.dropdown-list li { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: var(--radius-sm); white-space: nowrap; cursor: pointer; }
.dropdown-list li:hover { background: var(--surface-2); }

.modal-box { display: none; position: fixed; inset: 0; z-index: 80; padding: 20px; overflow: auto; background: rgba(0, 0, 0, .6); }
.modal-box > .modal { position: relative; max-width: 520px; margin: 10vh auto 0; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); }
.modal-header { padding: 18px 48px 0 20px; font-size: 16px; font-weight: 700; }
.modal-body { padding: 16px 20px; }
.modal-footer { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; padding: 0 20px 20px; }
.modal span.close { position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; cursor: pointer; text-align: center; }
.modal span.close::before { content: "×"; color: var(--muted); font-size: 24px; line-height: 32px; }
.modal-footer .error { flex-basis: 100%; color: var(--red); }
.modal-footer .success { flex-basis: 100%; color: var(--green); }

.alert { margin: 12px 0; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.alert-success { background: var(--green-bg); border-color: #1F5A3B; color: #BFF3D7; }
.alert-error, .alert-danger { background: var(--red-bg); border-color: #5A2630; color: #FFC9CF; }
.alert-warning { background: var(--amber-bg); border-color: #5A4512; color: #FFE2B0; }
.alert-info { background: var(--blue-bg); border-color: #1D3E5E; color: #CDE4FF; }

.list-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 16px; border-top: 1px solid var(--border); }
.list-footer .showing { color: var(--muted); font-size: 13px; }
.list-footer .showing:empty { display: none; }
.list-footer > .pagination:only-child, .list-footer > nav:only-child { margin-left: auto; }
.list-footer .pagination > nav > .pagination { justify-content: flex-end; }
.pagination { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; margin: 0; padding: 0; list-style: none; }
.page-link {
    display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 10px;
    border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); text-decoration: none;
}
.page-link:hover { border-color: var(--border-hi); text-decoration: none; }
.page-item.active .page-link { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.page-item.disabled .page-link { opacity: .4; }

.loading > *, .graph-container.loading > * { opacity: .35; transition: opacity .15s; }
#tooltip { position: absolute; z-index: 90; max-width: 280px; padding: 6px 10px; background: var(--header); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); color: var(--text); font-size: 12px; }

.dropOverlay { display: none; position: fixed; inset: 0; z-index: 69; background: rgba(0, 0, 0, .55); }
.bodyOverlay .dropOverlay { display: block; }
#filterSheet, #buttonSheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 71; max-height: 85vh; margin: 0; overflow: auto;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); list-style: none;
    background: var(--surface); border-top: 1px solid var(--border); border-radius: 16px 16px 0 0; box-shadow: var(--shadow);
}
#filterSheet > li { margin-bottom: 12px; }
#filterSheet > li > label { color: var(--text); font-size: 14px; }

.show-sm { display: none !important; }

/* 7 · Responsive ------------------------------------------------------------ */
@media (max-width: 1100px) {
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .panel-grid { grid-template-columns: minmax(0, 1fr); }
    .detail-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 899px) {
    .app-nav, .app-header .user-menu { display: none; }
    .app-header-inner { height: 52px; gap: 12px; padding: 0 14px; }
    .brand img { height: 32px; margin-block: -2px; }
    .tabbar { display: flex; }
    body.has-tabbar { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }
    .app-main { padding: 12px 14px 28px; }
    #flash, nav.breadcrumbs { padding-left: 14px; padding-right: 14px; }
}

@media (max-width: 768px) {
    .row:not(.noresponsive) > .col,
    .row:not(.noresponsive) > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
    .hide-sm { display: none !important; }
    .show-sm { display: inline-block !important; }
    .filters-card { display: none; }
    .show-filters { display: inline-flex; }
    .summary-strip { gap: 8px; }
    .summary { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px; }
    .summary-value { font-size: 18px; }
    .summary-text { display: none; }
    .summary .badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; padding: 3px 7px; font-size: 10.5px; }
    .toolbar .search { width: 100%; margin-left: 0; }
    .actions:hover > .drop { display: none; }
    .actions.active > .drop {
        display: block; position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 71; margin: 0;
        border-radius: 16px 16px 0 0; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }
    .actions.active > .drop li a { min-height: 46px; display: flex; align-items: center; }
}

@media (max-width: 640px) {
    .stats { gap: 8px; }
    .stat { padding: 12px; }
    .stat-value { font-size: 21px; }
    .page-head h1, .page-header h1 { font-size: 18px; }
    .chart-box { height: 220px; }
    /* Dashboard: header, presets and the three tiles fit above the chart */
    .dash-head { gap: 8px; margin-bottom: 10px; }
    .dash-head h1 { font-size: 18px; }
    .dash-head .page-head-actions { width: 100%; margin-left: 0; }
    .dash-head .presets, .dash-head .segmented { width: 100%; }
    .dash-head .segmented button { flex: 1 1 0; padding: 0 4px; }
    .stats.dash-stats { gap: 6px; grid-template-columns: minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 1.4fr); }
    .dash-stats .stat { padding: 9px 10px; }
    .dash-stats .stat-label { font-size: 11px; }
    .dash-stats .stat-compare { padding: 0 5px; font-size: 10px; }
    .dash-stats .stat-value { margin: 3px 0 0; font-size: clamp(14px, 4.6vw, 18px); white-space: nowrap; }
    .dash-stats .stat-sub { overflow: hidden; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
    .detail-hero { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding: 12px; }
    .detail-hero h1 { font-size: 18px; }
    .detail-hero-image { grid-row: auto; }
    .detail-hero-foot { grid-column: 1 / -1; }
    .detail-hero-foot .detail-codes { margin-top: 0; }
    .detail-form { grid-template-columns: minmax(0, 1fr); }
    .order-hero { padding: 12px; }
    .order-hero h1 { font-size: 22px; }
    .order-hero-nav { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; }

    table.table:not(.noresponsive) thead { display: none; }
    table.table:not(.noresponsive) tr { display: block; margin: 0 0 8px; padding: 6px 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
    table.table:not(.noresponsive) td { display: flex; justify-content: space-between; gap: 12px; padding: 6px 12px; border: 0; text-align: right; background: none !important; }
    table.table:not(.noresponsive) td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: 12px; font-weight: 600; text-align: left; }
    .table-card { background: none; border: 0; }
    .table-card-body { overflow: visible; }
    .list-footer { justify-content: center; text-align: center; }
    .list-footer .pagination { justify-content: center; }

    .stock-table { display: none; }

    /* Orders: compact two-line rows instead of stacked cards */
    .table-card:has(.orders-table) { background: var(--surface); border: 1px solid var(--border); overflow: hidden; }
    .orders-table thead { display: none; }
    .orders-table tbody tr {
        display: grid; grid-template-columns: 40px minmax(0, 1fr) auto;
        grid-template-areas: "img cust total" "img status date";
        column-gap: 10px; row-gap: 2px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--border);
    }
    .orders-table tbody td { padding: 0; border: 0; background: none !important; }
    .orders-table .o-img { grid-area: img; display: flex; flex-wrap: wrap; gap: 2px; }
    .orders-table .o-img img { width: 40px; height: 40px; }
    .orders-table .o-img img + img { width: 19px; height: 19px; padding: 1px; }
    .orders-table .o-cust { grid-area: cust; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
    .orders-table .o-total { grid-area: total; text-align: right; font-weight: 700; }
    .orders-table .o-status { grid-area: status; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; }
    .orders-table .o-date { grid-area: date; text-align: right; color: var(--muted); font-size: 12px; white-space: nowrap; }
    .orders-table .o-items, .orders-table .o-market, .orders-table .o-actions { display: none; }

    /* Rankings: compact rows — term and position, then product and last week */
    .table-card-body:has(.rankings-table) { overflow: visible; }
    .rankings-table thead { display: none; }
    .rankings-table tbody tr {
        display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "term position remove" "product week remove";
        column-gap: 10px; row-gap: 2px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border);
    }
    .rankings-table tbody td { padding: 0; border: 0; text-align: left; background: none !important; }
    .rankings-table .r-term { grid-area: term; min-width: 0; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
    .rankings-table .r-position { grid-area: position; text-align: right; }
    .rankings-table .r-product { grid-area: product; min-width: 0; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
    .rankings-table .r-week { grid-area: week; text-align: right; font-size: 12px; white-space: nowrap; }
    .rankings-table .r-also { display: none; }
    .rankings-table .r-remove { grid-area: remove; }
    .rankings-table .r-remove .button { min-height: 32px; padding: 0 10px; }

    /* Dashboard top products: one compact row each */
    .top-table thead { display: none; }
    .top-table tbody tr {
        display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "product sold" "product meta";
        column-gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border);
    }
    .top-table tbody td { padding: 0; border: 0; text-align: left; background: none !important; }
    .top-table .t-product { grid-area: product; min-width: 0; }
    .top-table .t-product .product-cell { min-width: 0; }
    .top-table .t-product a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .top-table .t-sold { grid-area: sold; text-align: right; font-weight: 700; }
    .top-table .t-available { display: none; }
    .top-table .t-cover { grid-area: meta; text-align: right; color: var(--muted); font-size: 12px; }

    /* Customers: compact two-line rows */
    .table-card:has(.customers-table) { background: var(--surface); border: 1px solid var(--border); overflow: hidden; }
    .customers-table thead { display: none; }
    .customers-table tbody tr {
        display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "name name sales" "orders units .";
        column-gap: 10px; row-gap: 2px; padding: 8px 12px; border-bottom: 1px solid var(--border);
    }
    .customers-table tbody td { padding: 0; border: 0; text-align: left; background: none !important; }
    .customers-table .c-name { grid-area: name; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
    .customers-table .c-sales { grid-area: sales; text-align: right; font-weight: 700; }
    .customers-table .c-orders { grid-area: orders; color: var(--muted); font-size: 12px; }
    .customers-table .c-units { grid-area: units; color: var(--muted); font-size: 12px; }
    .stock-cards { display: block; }
}