/* Private ERP foundations: DESIGN.md. Disable with APP_UI_BENTO_DESIGN_ENABLED=false. */
body.design-bento {
    --ds-color-bg: #f5f6f8;
    --ds-color-surface: #fff;
    --ds-color-surface-muted: #f8f9fb;
    --ds-color-sidebar: #eef0f3;
    --ds-color-sidebar-active: #e0e8f3;
    --ds-color-primary: #345f96;
    --ds-color-primary-strong: #294e7f;
    --ds-color-primary-soft: #edf2f9;
    --ds-color-selection: #e8eff8;
    --ds-color-selection-text: #244b7b;
    --ds-color-selection-border: #b5c7df;
    --ds-color-border: #e1e5eb;
    --ds-color-border-strong: #8290a2;
    --ds-color-text: #202b3b;
    --ds-color-text-secondary: #455468;
    --ds-color-text-muted: #59677a;
    --ds-color-text-inverse: #fff;
    --ds-color-success: #24704b;
    --ds-color-success-soft: #edf6f0;
    --ds-color-warning: #875b12;
    --ds-color-warning-soft: #fff7e5;
    --ds-color-danger: #b93832;
    --ds-color-danger-soft: #fff1ef;
    --ds-color-focus: var(--ds-color-primary);
    --ds-color-table-heading: #f1f4f8;
    --ds-color-row-hover: #f0f4f9;
    --ds-color-table-grid: #e3e8ef;
    --ds-color-group-divider: #cad3e0;
    --ds-color-summary: #233d60;
    --ds-color-summary-icon: #d7e6fa;
    --ds-color-summary-icon-bg: #365275;
    --ds-shadow-card: none;
    --ds-shadow-raised: 0 12px 32px rgb(25 40 60 / 12%);
    --ds-radius-card: 14px;
    --ds-radius-control: 8px;
    --ds-text-meta: .75rem;
    --ds-text-caption: .8125rem;
    --ds-text-body: .875rem;
    --ds-text-input: 1rem;
    --ds-text-section: 1.125rem;
    --ds-text-page: clamp(1.5rem, 1.8vw, 1.75rem);
    --ds-leading-body: 1.5;
    --ds-leading-copy: 1.65;
    --ds-gap-inline: 8px;
    --ds-gap-related: 12px;
    --ds-gap-section: 24px;
    --ds-inset-card: 24px;
    --ds-control-height: 40px;
    --ds-control-height-compact: 34px;
    --ds-touch-target: 44px;
    --ds-motion-feedback: 120ms;
    --ds-motion-disclosure: 180ms;
    --ds-ease-out: cubic-bezier(.2, .8, .2, 1);
    --bs-body-color: var(--ds-color-text);
    --bs-body-bg: var(--ds-color-bg);
    --bs-secondary-color: var(--ds-color-text-muted);
    --bs-border-color: var(--ds-color-border);
    --bs-primary-rgb: 52, 95, 150;
    --bs-success-rgb: 36, 112, 75;
    --bs-warning-rgb: 135, 91, 18;
    --bs-danger-rgb: 185, 56, 50;
    --bs-link-color: var(--ds-color-primary-strong);
    --bs-link-hover-color: var(--ds-color-primary);
    --shell-bg: var(--ds-color-bg);
    --shell-surface: var(--ds-color-surface);
    --shell-surface-strong: var(--ds-color-surface);
    --shell-surface-muted: var(--ds-color-surface-muted);
    --shell-border: var(--ds-color-border);
    --shell-border-strong: var(--ds-color-border-strong);
    --shell-shadow: var(--ds-shadow-card);
    --shell-shadow-soft: var(--ds-shadow-card);
    --text-strong: var(--ds-color-text);
    --text-default: var(--ds-color-text-secondary);
    --text-muted: var(--ds-color-text-muted);
    --brand-main: var(--ds-color-primary);
    --brand-main-strong: var(--ds-color-primary-strong);
    --brand-soft: var(--ds-color-primary-soft);
    --radius-xl: var(--ds-radius-card);
    --radius-lg: var(--ds-radius-card);
    --radius-md: var(--ds-radius-control);
    background: var(--ds-color-bg);
    color: var(--ds-color-text);
    font-size: var(--ds-text-body);
    line-height: var(--ds-leading-body);
}

.design-bento .sidebar {
    top: 16px;
    left: 16px;
    width: 244px;
    height: calc(100dvh - 32px);
    border: 1px solid var(--ds-color-border);
    border-radius: 16px;
    box-shadow: none;
}
.design-bento .sidebar.collapsed { width: 76px; }
.design-bento .sidebar-header { display: grid !important; grid-template-columns: minmax(0, 1fr) 36px; align-items: center !important; padding: 20px 14px 12px; background: transparent; }
.design-bento .sidebar-header > div { display: contents; }
.design-bento .sidebar-brand-title { grid-column: 1; grid-row: 1; }
.design-bento .sidebar-header .brand-chip { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
.design-bento .sidebar-header .toggle-btn { grid-column: 2; grid-row: 1; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.design-bento .sidebar.collapsed .sidebar-header { grid-template-columns: 1fr; }
.design-bento .sidebar.collapsed .sidebar-header > div { display: none; }
.design-bento .sidebar.collapsed .sidebar-header .toggle-btn { grid-column: 1; justify-self: center; }
.design-bento .sidebar-brand-title { color: var(--ds-color-text) !important; letter-spacing: -.04em; }
.design-bento .brand-chip { color: var(--ds-color-text-muted); border: 0; background: transparent; padding-left: 0; }
.design-bento .sidebar-account { grid-column: 1 / -1; grid-row: 3; min-width: 0; padding: 12px; gap: 10px; background: var(--ds-color-surface); border-color: var(--ds-color-border); }
.design-bento .sidebar-account-main > div { min-width: 0; width: 100%; }
.design-bento .sidebar .user-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.design-bento .sidebar .user-login { margin-top: 4px; font-size: .78rem; }
.design-bento .sidebar-account-actions { position: static; justify-content: flex-end; gap: 6px; border-top: 1px solid var(--ds-color-border); padding-top: 8px; }
.design-bento .sidebar-account-actions .sidebar-icon-action { flex: 0 0 36px; width: 36px; height: 36px; border: 1px solid var(--ds-color-border); border-radius: 8px; background: var(--ds-color-surface-muted); }
.design-bento .sidebar .user-name { color: var(--ds-color-text); }
.design-bento .sidebar .user-login { color: var(--ds-color-text-muted); }
.design-bento .sidebar-icon-action,
.design-bento .toggle-btn { color: var(--ds-color-text-muted); }
.design-bento .sidebar-icon-action:hover { color: var(--ds-color-primary-strong); background: var(--ds-color-primary-soft); }
.design-bento .sidebar-section { padding: 10px 16px 6px; font-size: .73rem; font-weight: 600; color: var(--ds-color-text-muted); }
.design-bento .sidebar .nav-item.mt-3 { margin-top: 8px !important; }
.design-bento .sidebar .nav-link { margin: 2px 10px; padding: 10px 12px; border-radius: var(--ds-radius-control); color: var(--ds-color-text-secondary); font-size: var(--ds-text-body); }
.design-bento .sidebar .nav-link:hover { background: var(--ds-color-border); color: var(--ds-color-text); }
.design-bento .sidebar .nav-link.active { background: var(--ds-color-sidebar-active); color: var(--ds-color-primary-strong); font-weight: 700; }
.design-bento .main-content { margin-left: 276px; padding: 28px 28px 40px; transition: none; }
.design-bento.sidebar-collapsed .main-content { margin-left: 108px; }
.design-bento .page-container { width: min(100%, 1680px); }
.design-bento .page-shell { gap: var(--ds-gap-section); }
.design-bento .page-hero-body { padding: 0; gap: 20px; }
.design-bento .tool-page .page-hero-body { grid-template-columns: minmax(0, 1fr); }
.design-bento .page-hero-body > div { min-width: 0; }
.design-bento .page-title { font-size: var(--ds-text-page); line-height: 1.3; font-weight: 700; letter-spacing: -.025em; word-break: keep-all; overflow-wrap: anywhere; }
.design-bento .page-subtitle,
.design-bento .page-description,
.design-bento .section-copy { max-width: 70ch; color: var(--ds-color-text-muted); line-height: var(--ds-leading-copy); word-break: keep-all; overflow-wrap: anywhere; }
.design-bento .section-header { min-height: 0; flex-wrap: wrap; gap: var(--ds-gap-related); border-bottom: 0; padding-bottom: 0; margin-bottom: var(--ds-space-2); }
.design-bento .section-title { font-size: var(--ds-text-section); line-height: 1.4; font-weight: 700; letter-spacing: -.015em; }
.design-bento .shell-card,
.design-bento .metric-card,
.design-bento .data-kpi { box-shadow: none; border-color: var(--ds-color-border); }
.design-bento .card-body { padding: var(--ds-inset-card); }
.design-bento .main-content .card-body.p-4 { padding: var(--ds-inset-card) !important; }
.design-bento .metric-card { padding: 20px; min-height: 128px; }
.design-bento .metric-icon { width: 32px; height: 32px; border-radius: 9px; font-size: 1rem; }
.design-bento .metric-label { color: var(--ds-color-text-muted); font-weight: 500; }
.design-bento .metric-value { letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.design-bento .btn { min-height: var(--ds-control-height); border-radius: var(--ds-radius-control); font-size: var(--ds-text-body); font-weight: 600; box-shadow: none; transition: color var(--ds-motion-feedback) linear, background-color var(--ds-motion-feedback) linear, border-color var(--ds-motion-feedback) linear; }
.design-bento .btn-sm { min-height: var(--ds-control-height-compact); font-size: var(--ds-text-caption); }
.design-bento .btn:focus-visible { transition: none; }
.design-bento .btn-primary {
    --bs-btn-color: var(--ds-color-text-inverse);
    --bs-btn-bg: var(--ds-color-primary);
    --bs-btn-border-color: var(--ds-color-primary);
    --bs-btn-hover-color: var(--ds-color-text-inverse);
    --bs-btn-hover-bg: var(--ds-color-primary-strong);
    --bs-btn-hover-border-color: var(--ds-color-primary-strong);
    --bs-btn-active-color: var(--ds-color-text-inverse);
    --bs-btn-active-bg: var(--ds-color-primary-strong);
    --bs-btn-active-border-color: var(--ds-color-primary-strong);
    --bs-btn-disabled-bg: var(--ds-color-primary);
    --bs-btn-disabled-border-color: var(--ds-color-primary);
    background: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
}
/* Explicit states also override the older app-shell background declarations. */
.design-bento .btn-primary:is(:hover, :focus, :focus-visible, :active, .active) { background: var(--ds-color-primary-strong); border-color: var(--ds-color-primary-strong); }
.design-bento .btn-outline-secondary {
    --bs-btn-color: var(--ds-color-text-secondary);
    --bs-btn-border-color: var(--ds-color-border-strong);
    --bs-btn-hover-color: var(--ds-color-text);
    --bs-btn-hover-bg: var(--ds-color-surface-muted);
    --bs-btn-hover-border-color: var(--ds-color-text-muted);
    --bs-btn-active-color: var(--ds-color-primary-strong);
    --bs-btn-active-bg: var(--ds-color-primary-soft);
    --bs-btn-active-border-color: var(--ds-color-primary);
    color: var(--bs-btn-color);
}
.design-bento .btn-outline-secondary:hover { color: var(--bs-btn-hover-color); }
.design-bento .btn-outline-secondary:is(:active, .active) { color: var(--bs-btn-active-color); }
/* A composed field has one continuous boundary, including its icon or unit. */
body.design-bento .input-group {
    --ds-field-height: var(--ds-control-height);
    flex-wrap: nowrap;
    border: 1px solid var(--ds-color-border-strong);
    border-radius: var(--ds-radius-control);
    background: var(--ds-color-surface);
}
body.design-bento .input-group > :is(.form-control, .form-select, .input-group-text) {
    min-width: 0;
    min-height: calc(var(--ds-field-height) - 2px);
    height: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
}
body.design-bento .input-group > .input-group-text { color: var(--ds-color-text-muted); }
body.design-bento .input-group > :first-child { border-start-start-radius: calc(var(--ds-radius-control) - 1px); border-end-start-radius: calc(var(--ds-radius-control) - 1px); }
body.design-bento .input-group > :last-child { border-start-end-radius: calc(var(--ds-radius-control) - 1px); border-end-end-radius: calc(var(--ds-radius-control) - 1px); }
body.design-bento .input-group:has(.is-invalid) { border-color: var(--ds-color-danger); }
body.design-bento .input-group > :is(.form-control, .form-select) + .input-group-text { border-inline-start: 1px solid var(--ds-color-border); }
body.design-bento .ad-record-fields .input-group { --ds-field-height: var(--ds-control-height-compact); }
.design-bento .form-control,
.design-bento .form-select { min-height: var(--ds-control-height); border-radius: var(--ds-radius-control); border-color: var(--ds-color-border-strong); }
.design-bento :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--ds-color-focus); outline-offset: 3px; }
/* Pointer feedback uses the existing fill; only keyboard navigation adds a ring. */
body.design-bento :is(button, a, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) { outline: none; box-shadow: none; }
html[data-focus-input="pointer"] body.design-bento :is(button, a, input, select, textarea, summary, [tabindex]):focus { outline: none; box-shadow: none; }
body.design-bento :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="button"], [type="submit"], [type="reset"]), textarea):focus { outline: none; box-shadow: none; }
body.design-bento :is(.form-control, .auth-input):focus:not(.is-invalid) { border-color: var(--ds-color-border-strong); }
body.design-bento select:focus { box-shadow: none; }
body.design-bento .form-select:focus:not(.is-invalid) { border-color: var(--ds-color-border-strong); }
.design-bento .table { font-variant-numeric: tabular-nums; }
.design-bento .table thead th { background: var(--ds-color-table-heading); color: var(--ds-color-text-secondary); font-weight: 600; }
.design-bento .table tbody td { border-color: var(--ds-color-border); }
.design-bento .table tbody tr:hover { --bs-table-hover-bg: var(--ds-color-row-hover); }
.design-bento .table-shell { border-radius: 10px; }
.design-bento .product-list-table-shell { border: 0; border-radius: 0; }
.design-bento .product-summary-label { font-size: var(--ds-text-meta); font-weight: 500; line-height: 1.35; }
.design-bento .product-summary-value { font-weight: 600; }
.design-bento .product-total-stock .product-summary-value { color: var(--ds-color-text); font-weight: 600; }
/* Product rows contain information blocks, rather than one value per table cell. */
.design-bento .product-summary-layout > :is(.product-total-stock, .product-storage-fee, .product-period-metrics) { position: relative; }
.design-bento .product-summary-layout > :is(.product-total-stock, .product-storage-fee, .product-period-metrics)::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    height: 64px;
    transform: translateY(-50%);
    border-inline-start: 1px solid var(--ds-color-group-divider);
    pointer-events: none;
}
.design-bento .data-kpi-grid { gap: 16px; }
.design-bento .dashboard-content-grid {
    grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr);
    grid-template-areas: "realtime realtime" "calendar top-products";
    gap: 20px;
}
.design-bento .dashboard-overview-grid { gap: 20px; }
.design-bento .dashboard-revenue-grid { grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 12px; }
.design-bento .dashboard-revenue-grid .metric-card { padding: 16px; background: var(--ds-color-surface-muted); border-color: transparent; }
.design-bento .dashboard-revenue-grid .metric-card:first-child { background: var(--ds-color-summary); color: var(--ds-color-text-inverse); }
.design-bento .dashboard-revenue-grid .metric-card:first-child :is(.metric-label, .metric-value, .metric-meta) { color: var(--ds-color-text-inverse); }
.design-bento .dashboard-revenue-grid .metric-card:first-child .metric-icon { color: var(--ds-color-summary-icon); background: var(--ds-color-summary-icon-bg); }
.design-bento .dashboard-trend-panel { background: #fff; border: 0; border-top: 1px solid var(--ds-color-border); border-radius: 0; padding: 20px 0 0; }
.design-bento .dashboard-trend-title { font-weight: 600; }
.design-bento .dashboard-chart-filter { border: 0; border-radius: 8px; background: #f0f3f7; }
.design-bento .dashboard-chart-filter-button { font-weight: 600; }
.design-bento .file-picker-shell { border-radius: 12px; background: var(--ds-color-surface-muted); }
.design-bento .file-picker-shell.is-file-dragging { background: var(--ds-color-primary-soft); border-color: var(--ds-color-primary); }
.design-bento .bento-mobile-menu { display: none; }

/* Standalone login keeps the same tokens without pulling in the app shell. */
.design-bento.auth-page {
    min-height: 100vh;
    background: var(--ds-color-bg);
}
.design-bento.auth-page .auth-shell {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 32px 24px;
}
.design-bento.auth-page .auth-card {
    width: min(1060px, 100%);
    overflow: hidden;
    border: 1px solid var(--ds-color-border);
    border-radius: 16px;
    box-shadow: var(--ds-shadow-raised);
}
.design-bento.auth-page .auth-card-minimal { width: min(560px, 100%); border-radius: var(--ds-radius-card); }
.design-bento.auth-page .auth-card-minimal .auth-panel { min-height: auto; padding: clamp(24px, 5vw, 40px); }
.design-bento.auth-page .auth-aside {
    min-height: 570px;
    padding: 40px;
    background: #233d60;
}
.design-bento.auth-page .auth-panel {
    min-height: 570px;
    padding: 40px;
    background: var(--ds-color-surface);
}
.design-bento.auth-page .auth-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 8px;
    background: rgb(255 255 255 / 10%);
}
.design-bento.auth-page .auth-aside h1 { font-size: clamp(2rem, 3vw, 2.5rem); letter-spacing: -.045em; white-space: nowrap; }
.design-bento.auth-page .auth-feature-list { gap: 10px; }
.design-bento.auth-page .auth-feature-card {
    padding: 14px;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 10px;
    background: rgb(255 255 255 / 8%);
}
.design-bento.auth-page .auth-icon-mark {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}
.design-bento.auth-page .auth-form-card {
    padding: 24px;
    border: 1px solid var(--ds-color-border);
    border-radius: 12px;
    background: var(--ds-color-surface-muted);
}
.design-bento.auth-page .auth-input { min-height: 46px; }
.design-bento.auth-page .auth-input-group { --ds-field-height: 46px; }
.design-bento.auth-page .auth-input-group > :is(.input-group-text, .auth-input) { min-height: calc(var(--ds-field-height) - 2px); }
.design-bento.auth-page .auth-input-group .input-group-text { color: var(--ds-color-text-muted); border-color: var(--ds-color-border-strong); background: #fff !important; }
.design-bento.auth-page .auth-input { border-color: var(--ds-color-border-strong); }
.design-bento.auth-page .auth-button { min-height: 46px; }
.design-bento.auth-page .auth-button-outline { min-height: var(--ds-touch-target); }
.design-bento.auth-page .auth-footer { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--ds-color-border); }
@media (max-width: 575.98px) {
    .design-bento.auth-page .auth-aside h1 { white-space: normal; }
}

@media (max-width: 1399.98px) {
    .design-bento .dashboard-revenue-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .design-bento .dashboard-revenue-grid .metric-card { grid-column: span 2; }
    .design-bento .dashboard-revenue-grid .metric-card:nth-child(-n+2) { grid-column: span 3; }
}
@media (max-width: 1199.98px) {
    .design-bento .dashboard-content-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "realtime" "calendar" "top-products"; }
    .design-bento .main-content { padding: 24px 20px 32px; }
}
@media (max-width: 991.98px) {
    .design-bento .page-hero-body { grid-template-columns: minmax(0, 1fr); }
    .design-bento .sidebar { top: 0; left: 0; height: 100dvh; border-radius: 0 16px 16px 0; }
    .design-bento .sidebar.mobile-open { width: 244px; box-shadow: var(--ds-shadow-raised); }
    .design-bento .main-content,
    .design-bento.sidebar-collapsed .main-content { margin-left: 0; padding: 16px 20px 32px; }
    .design-bento .bento-mobile-menu { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-bottom: 20px; padding: 8px 14px; background: #fff; color: var(--ds-color-text); border: 1px solid var(--ds-color-border); border-radius: 8px; }
    .design-bento .data-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .design-bento .dashboard-calendar { overflow-x: auto; }
    .design-bento .dashboard-calendar-head,
    .design-bento .dashboard-calendar-grid { min-width: 700px; }
    .design-bento .dashboard-line-chart { overflow-x: auto; }
    .design-bento .dashboard-line-chart svg { min-width: 520px; }
    .design-bento .main-content { padding-inline: 12px; }
    .design-bento .main-content .card-body.p-4 { padding: 16px !important; }
    .design-bento .dashboard-revenue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .design-bento .dashboard-revenue-grid .metric-card,
    .design-bento .dashboard-revenue-grid .metric-card:nth-child(-n+2) { grid-column: auto; }
    .design-bento .dashboard-revenue-grid .metric-card:first-child { grid-column: 1 / -1; }
    .design-bento .data-kpi-grid { grid-template-columns: 1fr; }
}

/* Mobile workflows keep the same data, controls and SSR markup. */
@media (max-width: 991.98px) {
    .design-bento .sidebar .nav-link { min-height: 44px; }
    .design-bento .sidebar [data-shell-toggle],
    .design-bento .sidebar [data-shell-logout] { min-width: 44px; min-height: 44px; }
    .design-bento .sidebar .sidebar-scroll { overscroll-behavior: contain; }
}
@media (max-width: 767.98px) {
    body.design-bento { --ds-inset-card: 16px; }
    .design-bento .page-shell { gap: 16px; }
    .design-bento .bento-mobile-menu { margin-bottom: 16px; }
    .design-bento .main-content .btn,
    .design-bento .main-content .form-control,
    .design-bento .main-content .form-select { min-height: var(--ds-touch-target); }
    body.design-bento .input-group,
    body.design-bento .ad-record-fields .input-group { --ds-field-height: var(--ds-touch-target); }
    body.design-bento .input-group > :is(.form-control, .form-select, .input-group-text) { min-height: calc(var(--ds-field-height) - 2px); }
    body.design-bento :is(.segmented-option, .product-sort-button) { min-height: var(--ds-touch-target); }
    .design-bento .main-content :is(input, select, textarea) { font-size: var(--ds-text-input); }
    .design-bento .main-content .btn-close { min-width: 44px; min-height: 44px; padding: 0; }
    .design-bento .data-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .design-bento .data-kpi { min-width: 0; padding: 14px; min-height: 92px; }
    .design-bento .data-kpi-value { font-size: clamp(1.05rem, 4.5vw, 1.4rem); overflow-wrap: anywhere; }
    .design-bento .data-kpi-label { font-size: .75rem; }
    .design-bento .product-table-header { gap: 12px; margin-bottom: 16px; }
    .design-bento .mobile-workflow-actions { width: 100%; border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-control); }
    .design-bento .mobile-workflow-actions > summary { display: list-item; padding: 12px 14px; min-height: 44px; font-size: .85rem; font-weight: 600; cursor: pointer; }
    .design-bento .mobile-workflow-actions .product-table-actions { padding: 0 12px 12px; gap: 8px; }
    .design-bento .mobile-workflow-actions .product-action-button { width: 100%; min-width: 0; }
    .design-bento .product-table-filterbar { overflow: visible; flex-direction: column; align-items: stretch; gap: 12px; }
    .design-bento .product-table-filterbar .toolbar-cluster { min-width: 0; width: 100%; flex-direction: column; align-items: stretch; gap: 12px; }
    .design-bento .product-table-filterbar .product-table-search { width: 100%; max-width: none; min-width: 0; flex: 0 0 auto; }
    .design-bento .product-table-search input { min-width: 0; }
    .design-bento .product-sort-control { width: 100%; }
    .design-bento .product-sort-button { flex: 1; min-width: 0; min-height: 44px; justify-content: center; padding-inline: 4px; }
    .design-bento .order-quantity-toolbar { flex-wrap: wrap; }
    .design-bento .mobile-table-hint { display: block; margin: 0 0 12px; color: var(--ds-color-text-muted); font-size: .75rem; }
    .design-bento .product-option-toggle { width: 44px; height: 44px; }
    .design-bento .product-summary-layout { grid-template-columns: 44px 72px 240px 224px 112px 112px repeat(3, 176px) 128px minmax(288px, 1fr); padding-inline: 8px; }
    .design-bento .product-summary-layout > * { grid-row: 1; }
    .design-bento .dashboard-calendar { overflow: hidden; margin-inline: -4px; }
    .design-bento .dashboard-calendar-head,
    .design-bento .dashboard-calendar-grid { min-width: 0; }
    .design-bento .dashboard-calendar-cell { min-height: 68px; padding: 8px 2px; grid-template-rows: auto; }
    .design-bento .dashboard-calendar-day-head { flex-direction: column; justify-content: flex-start; gap: 5px; }
    .design-bento .dashboard-calendar-day { text-align: center; }
    .design-bento .dashboard-calendar-metrics { display: none; }
    .design-bento .dashboard-calendar-upload-missing,
    .design-bento .dashboard-calendar-upload-complete { font-size: 0; padding: 2px 4px; }
    .design-bento .dashboard-calendar-upload-missing::after { content: '필요'; font-size: 10px; }
    .design-bento .dashboard-calendar-upload-complete::after { content: '완료'; font-size: 10px; }
    .design-bento .dashboard-mobile-metrics { display: block; margin-top: 12px; }
    .design-bento .dashboard-mobile-metrics summary { min-height: 44px; padding-block: 12px; font-size: .85rem; font-weight: 600; cursor: pointer; }
    .design-bento .dashboard-mobile-metrics table { font-size: .75rem; white-space: nowrap; }
    .design-bento .dashboard-mobile-metrics td { text-align: right; }
    .design-bento .dashboard-chart-filter-button { min-height: 44px; }
    .design-bento .product-editor-image-matrix { min-width: 0; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-control); overflow: hidden; }
    .design-bento .product-editor-matrix-header:not(.product-editor-gallery-select-all) { display: none; }
    .design-bento .product-editor-matrix-header,
    .design-bento .product-editor-matrix-option,
    .design-bento .product-editor-matrix-cell { border-right: 0; }
    .design-bento .product-editor-matrix-option { background: var(--ds-color-surface-muted); }
    .design-bento .product-editor-matrix-option strong { white-space: normal; overflow-wrap: anywhere; }
    .design-bento .product-editor-option-selection,
    .design-bento .product-editor-gallery-select-all label { min-height: 44px; }
    .design-bento .product-editor-matrix-cell { flex-wrap: wrap; gap: 12px; justify-content: flex-start; align-items: flex-start; padding: 12px; overflow: visible; }
    .design-bento .product-editor-matrix-representative::before,
    .design-bento .product-editor-matrix-additional::before { width: 100%; color: var(--ds-color-text-muted); font-size: .8rem; font-weight: 600; }
    .design-bento .product-editor-matrix-representative::before { content: '대표 이미지'; }
    .design-bento .product-editor-matrix-additional::before { content: '추가 이미지'; }
    .design-bento .product-editor-matrix-image { width: 104px; flex-basis: 104px; }
    .design-bento .product-editor-matrix-thumb { width: 104px; height: 104px; margin-bottom: 50px; }
    .design-bento .product-editor-matrix-overlay { inset: auto 0 -48px; height: 44px; opacity: 1; background: transparent; gap: 8px; }
    .design-bento .product-editor-matrix-overlay button,
    .design-bento .product-editor-image-move-actions button { width: 44px; height: 44px; padding: 0; border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-control); background: var(--ds-color-surface); color: var(--ds-color-text); font-size: 1rem; }
    .design-bento .product-editor-image-move-actions { display: flex; justify-content: center; gap: 8px; }
    .design-bento .product-editor-image-move-actions button:disabled { opacity: .35; }
    .design-bento .product-editor-matrix-add-button { width: 104px; height: 104px; flex-basis: 104px; font-size: .8rem; }
    .design-bento .product-editor-gallery-actions { width: 100%; }
    .design-bento .product-editor-gallery-actions .btn { width: 100%; white-space: normal; }
    .design-bento .product-editor-detail-workspace { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .design-bento .product-editor-detail-drop-rail { display: none; }
    .design-bento #contentEditorDetailModal .modal-dialog { margin: 0; width: 100%; max-width: none; height: 100dvh; }
    .design-bento #contentEditorDetailModal .modal-content { height: 100%; max-height: 100%; border: 0; border-radius: 0; }
    .design-bento #contentEditorDetailModal .modal-body { padding: 12px; }
    .design-bento #contentEditorDetailModal .modal-footer { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
    .design-bento #contentEditorDetailModal .modal-footer > div { width: 100%; }
    .design-bento #contentEditorDetailModal .modal-footer .btn { flex: 1; padding-inline: 8px; }
    .design-bento .product-editor-detail-layer-toolbar { flex-wrap: wrap; gap: 8px; }
    .design-bento .product-editor-detail-layer-toolbar > div { flex-wrap: wrap; }
    .design-bento .product-editor-detail-layer-toolbar [data-move-content] { min-width: 44px; }
    .design-bento .product-editor-submit-card { position: static; }
    .design-bento .product-editor-submit-card .btn { width: 100%; }

    /* Mobile products use a compact list and the same product's management panels. */
    .design-bento .product-list-overview { border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-card); background: var(--ds-color-surface); }
    .design-bento .product-list-overview > summary { display: list-item; min-height: 44px; padding: 12px 14px; font-size: .85rem; font-weight: 600; cursor: pointer; }
    .design-bento .product-list-overview > .data-kpi-grid { padding: 0 12px 12px; }
    .design-bento .product-list-table-shell,
    .design-bento .product-list-table-card .mobile-table-hint { display: none; }
    .design-bento .mobile-product-list { display: grid; gap: 0; margin-inline: 16px; }
    .design-bento .mobile-product-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--ds-color-border); color: var(--ds-color-text); }
    .design-bento .mobile-product-row:last-child { border-bottom: 0; }
    .design-bento .mobile-product-row .image-preview-trigger img,
    .design-bento .mobile-product-thumbnail-empty,
    .design-bento .mobile-product-heading .image-preview-trigger img { display: block; width: 64px; height: 64px; max-width: 64px; object-fit: contain; border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-control); background: var(--ds-color-surface-muted); }
    .design-bento .mobile-product-thumbnail-empty { display: grid; place-items: center; color: var(--ds-color-text-muted); }
    .design-bento .mobile-product-link { display: grid; grid-template-columns: minmax(0, 1fr) 16px; align-items: center; gap: 12px; min-width: 0; min-height: 64px; color: inherit; text-decoration: none; }
    .design-bento .mobile-product-link > strong { min-width: 0; font-size: .9rem; line-height: 1.5; overflow-wrap: anywhere; }
    .design-bento .mobile-product-link > i { color: var(--ds-color-text-muted); }
    .design-bento .mobile-product-link:focus-visible { outline: 2px solid var(--ds-color-primary); outline-offset: 2px; border-radius: var(--ds-radius-control); }
    .design-bento .mobile-product-detail-open > .product-list-page-shell { display: none; }
    .design-bento .mobile-product-detail:not([hidden]) { display: block; min-width: 0; }
    .design-bento .mobile-product-heading { display: flex; align-items: center; gap: 12px; margin-block: 16px; }
    .design-bento .mobile-product-heading > .image-preview-trigger { flex: 0 0 64px; }
    .design-bento .mobile-product-heading h1 { min-width: 0; margin: 0; font-size: 1.15rem; line-height: 1.5; overflow-wrap: anywhere; }
    .design-bento .mobile-product-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; margin-bottom: 16px; border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-control); background: var(--ds-color-surface-muted); }
    .design-bento .mobile-product-tabs button,
    .design-bento .mobile-product-period button { display: inline-flex; align-items: center; justify-content: center; min-width: 0; min-height: 44px; padding: 8px 4px; border: 1px solid transparent; border-radius: var(--ds-radius-control); color: var(--ds-color-text-muted); background: transparent; font-size: .85rem; font-weight: 600; white-space: nowrap; }
    .design-bento .mobile-product-tabs [aria-selected="true"] { color: var(--ds-color-primary-strong); background: var(--ds-color-surface); border-color: var(--ds-color-border); }
    .design-bento .mobile-product-section { min-width: 0; padding: 16px; border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-card); background: var(--ds-color-surface); }
    .design-bento .mobile-product-section h2 { font-size: 1rem; margin: 0 0 12px; }
    .design-bento .mobile-product-loading { display: flex; align-items: center; gap: 12px; min-height: 120px; font-size: .85rem; }
    .design-bento .mobile-product-period { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-bottom: 16px; }
    .design-bento .mobile-product-period [aria-pressed="true"] { color: var(--ds-color-primary-strong); background: var(--ds-color-primary-soft); border-color: var(--ds-color-border); }
    .design-bento .mobile-product-option-filter { display: grid; gap: 8px; margin-bottom: 12px; font-size: .8rem; }
    .design-bento .mobile-product-date-range { font-size: .75rem; color: var(--ds-color-text-muted); }
    .design-bento .mobile-product-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-block: 12px; }
    .design-bento .mobile-product-metrics > div { display: grid; align-content: start; gap: 6px; min-width: 0; }
    .design-bento .mobile-product-metrics > div > span:first-child { font-size: .7rem; color: var(--ds-color-text-muted); }
    .design-bento .mobile-product-metrics strong { font-size: .95rem; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
    .design-bento .mobile-product-chart { display: block; width: 100%; height: auto; min-width: 0; }
    .design-bento .mobile-product-chart text { font-size: 11px; fill: var(--ds-color-text-muted); }
    .design-bento .mobile-product-chart polyline { fill: none; stroke: var(--ds-color-primary); stroke-width: 2; }
    .design-bento .mobile-product-chart-guide { stroke: var(--ds-color-border); }
    .design-bento .mobile-product-daily { margin-top: 12px; border-top: 1px solid var(--ds-color-border); }
    .design-bento .mobile-product-daily > summary { min-height: 44px; padding-block: 12px; font-size: .85rem; cursor: pointer; }
    .design-bento .mobile-product-daily table { width: 100%; font-size: .75rem; white-space: nowrap; }
    .design-bento .mobile-product-daily td { text-align: right; }
    .design-bento .mobile-product-daily-sales-table { table-layout: fixed; }
    .design-bento .mobile-product-daily-sales-table :is(th, td) { text-align: center; vertical-align: middle; font-variant-numeric: tabular-nums; }
    .design-bento .mobile-product-option { margin-top: 12px; border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-control); }
    .design-bento .mobile-product-option > summary { min-height: 44px; padding: 12px; cursor: pointer; overflow-wrap: anywhere; }
    .design-bento .mobile-product-option > summary > strong { font-size: .85rem; }
    .design-bento .mobile-product-option > summary > span { display: block; margin-top: 4px; color: var(--ds-color-text-muted); font-size: .75rem; }
    .design-bento .mobile-product-option-body { min-width: 0; padding: 0 12px 12px; }
    .design-bento .mobile-product-management-field { margin-top: 16px; }
    .design-bento .mobile-product-management-field h3 { font-size: .8rem; margin-bottom: 8px; }
    .design-bento .mobile-product-management-field .inbound-plan-editor { min-width: 0; }
    .design-bento .mobile-product-management-field .inbound-plan-form { grid-template-columns: minmax(0, 1fr) 44px; width: 100%; }
    .design-bento .mobile-product-management-field input,
    .design-bento .mobile-product-management-field button { min-height: 44px; }
    .design-bento .mobile-product-management-field .inbound-plan-icon-button,
    .design-bento .mobile-product-management-field .inbound-plan-save-button { width: 44px; height: 44px; }
    .design-bento .mobile-product-management-field .inbound-plan-existing { grid-template-columns: auto auto 44px; }
    .design-bento .mobile-product-tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 20px; }
    .design-bento .mobile-product-tool-grid > :is(a, button) { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 64px; padding: 12px; border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-control); color: var(--ds-color-text); background: var(--ds-color-surface-muted); text-decoration: none; font-size: .8rem; text-align: left; }
    .design-bento .mobile-product-tool-grid span { overflow-wrap: anywhere; }
    .design-bento .mobile-product-info { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 12px; margin-bottom: 16px; font-size: .8rem; }
    .design-bento .mobile-product-info dt { color: var(--ds-color-text-muted); font-weight: 500; }
    .design-bento .mobile-product-info dd { margin: 0; overflow-wrap: anywhere; }
}

/* Product advertising performance: period trends followed by complete daily metrics. */
body.design-bento .ad-management-page .ad-overview-controls .ad-toolbar-actions { grid-template-columns: minmax(0, 1fr); }
body.design-bento .ad-period-filter { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 16px 0; padding: 16px; border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-card, 14px); background: var(--ds-color-surface); }
body.design-bento .ad-period-inputs { display: flex; align-items: end; gap: 8px; min-width: 0; }
body.design-bento .ad-period-inputs label { display: grid; gap: 4px; color: var(--ds-color-text-muted); font-size: 12px; }
body.design-bento .ad-period-inputs .form-control { width: 148px; min-height: 40px; }
body.design-bento .ad-period-inputs > span { align-self: center; }
body.design-bento .ad-performance-chart { border-top: 1px solid var(--ds-color-border); padding: 16px 0; }
body.design-bento .ad-chart-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
body.design-bento .ad-chart-tabs button { white-space: nowrap; }
body.design-bento .ad-chart-legend { display: flex; flex-wrap: wrap; gap: 16px; margin: 12px 0 4px; font-size: 12px; }
body.design-bento .ad-chart-legend-item { display: inline-flex; align-items: center; gap: 6px; }
body.design-bento .ad-chart-legend-item i { width: 16px; height: 3px; background: var(--chart-primary); }
body.design-bento .ad-chart-legend-item.ad-chart-series-1 i { background: var(--chart-accent); }
body.design-bento .ad-chart-series { color: var(--chart-primary); }
body.design-bento .ad-chart-series-1 { color: var(--chart-accent); }
body.design-bento .ad-chart-series path { stroke: currentColor; stroke-width: 2.5; }
body.design-bento .ad-chart-series circle { fill: currentColor; stroke: var(--ds-color-surface); stroke-width: 1.5; }
body.design-bento .ad-chart-series circle:focus { outline: none; stroke: var(--ds-color-text); stroke-width: 3; }
body.design-bento .ad-performance-chart .ad-roas-chart { min-width: 0; }
body.design-bento .ad-performance-chart svg { display: block; width: 100%; min-width: 520px; }
body.design-bento .ad-performance-data { min-width: 0; }
body.design-bento .ad-detail-heading { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: 12px 0; }
body.design-bento .ad-detail-heading h4 { font-size: 14px; margin: 0; font-weight: 700; }
body.design-bento .ad-detail-heading > span, body.design-bento .ad-metric-note { font-size: 12px; color: var(--ds-color-text-muted); }
body.design-bento .ad-metric-note { margin: 10px 0 0; line-height: 1.6; }
body.design-bento .ad-period-table.table { --ad-metric-width: 112px; --ad-day-min-width: 128px; width: 100%; min-width: calc(var(--ad-metric-width) + var(--ad-day-count, 7) * var(--ad-day-min-width)); table-layout: fixed; border-collapse: separate; border-spacing: 0; margin: 0; font-variant-numeric: tabular-nums; }
body.design-bento .ad-period-metric-column { width: var(--ad-metric-width); }
body.design-bento .ad-period-table.table th, body.design-bento .ad-period-table.table td { min-width: 0; text-align: right; white-space: nowrap; padding: 10px 12px; }
body.design-bento .ad-period-table.table td { white-space: normal; overflow-wrap: anywhere; }
body.design-bento .ad-period-table.table thead th { position: sticky; top: 0; z-index: 2; background: var(--ds-color-surface-muted); font-weight:400; text-align:center; }
body.design-bento .ad-period-table.table td, body.design-bento .ad-period-table.table th:not(:first-child) { border-right:1px solid var(--ds-color-border); }
body.design-bento .ad-period-table.table th:first-child { position: sticky; left: 0; z-index: 1; padding-left: 8px; padding-right: 8px; white-space: normal; word-break: keep-all; text-align: center; background: var(--ds-color-surface); border-right: 1px solid var(--ds-color-border); }
body.design-bento .ad-period-table.table thead th:first-child { top: 0; z-index: 3; background: var(--ds-color-surface-muted); }
body.design-bento .ad-period-table.table .ad-total-row > * { font-size: 14px; font-weight: 400; border-top: 1px solid var(--ds-color-border); }
body.design-bento .ad-period-table.table .ad-total-row.is-emphasized > * { font-weight:700; }
body.design-bento .ad-period-table.table .ad-placement-row > * { font-size: 12px; font-weight: 400; color: var(--ds-color-text-muted); padding-top: 7px; padding-bottom: 7px; }
body.design-bento .ad-period-table.table .ad-placement-row th { padding-left: 28px; }
body.design-bento .ad-period-table [data-placement-group][hidden] { display:none; }
body.design-bento .ad-placement-toggle { display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:28px; padding:0; border:0; background:transparent; color:inherit; font:inherit; white-space:nowrap; text-align:center; }
body.design-bento .ad-placement-toggle span { min-width: 0; white-space: normal; word-break: keep-all; line-height: 1.4; }
body.design-bento .ad-placement-toggle:hover { color:var(--ds-color-primary); }
body.design-bento .ad-placement-toggle:focus-visible { outline:2px solid var(--ds-color-primary); outline-offset:3px; border-radius:var(--ds-radius-control); }
body.design-bento .ad-placement-toggle svg { flex:0 0 12px; width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.5; transition:transform var(--ds-motion-disclosure) var(--ds-ease-out); }
body.design-bento .ad-placement-toggle[aria-expanded=true] svg { transform:rotate(90deg); }
body.design-bento .ad-period-table.table tbody tr:hover > * { background: var(--ds-color-surface-muted); }
body.design-bento .ad-product-list[aria-busy="true"] { opacity: .65; pointer-events: none; }
@media (max-width: 650px) {
    body.design-bento .ad-period-filter { padding: 12px; }
    body.design-bento .ad-period-inputs { width: 100%; flex-wrap: wrap; }
    body.design-bento .ad-period-inputs label { flex: 1; min-width: 0; }
    body.design-bento .ad-period-inputs .form-control { width: 100%; min-width: 0; min-height: 44px; padding: 6px; }
    body.design-bento .ad-period-inputs .btn { min-height: 44px; }
    body.design-bento .ad-period-table.table { --ad-metric-width: 104px; }
    body.design-bento .ad-period-table.table .ad-placement-row th { padding-left: 20px; }
    body.design-bento .ad-placement-toggle { min-height:44px; }
}
/* Remove decorative motion; keep essential loading indicators running at a slower pace. */
@media (prefers-reduced-motion: reduce) {
    body.design-bento,
    body.design-bento *:not(.ds-spinner):not(.spinner-border):not(.image-upload-spinner):not(.daily-upload-status-light),
    body.design-bento *::before,
    body.design-bento *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}