:root {
  --ink: #172333;
  --ink-muted: #6c7886;
  --ink-faint: #9aa5b0;
  --blue: #3979d9;
  --blue-soft: #edf4ff;
  --blue-wash: #f6f9ff;
  --green: #2c9a72;
  --green-soft: #e9f8f1;
  --orange: #e66b43;
  --orange-soft: #fff0eb;
  --yellow: #e8a52f;
  --yellow-soft: #fff7e5;
  --purple: #7c68c5;
  --purple-soft: #f1efff;
  --canvas: #f3f5f8;
  --surface: rgba(255,255,255,.83);
  --surface-solid: #fff;
  --stroke: rgba(23,35,51,.11);
  --stroke-strong: rgba(23,35,51,.18);
  --shadow: 0 16px 50px rgba(23,35,51,.08);
  --shadow-float: 0 22px 70px rgba(23,35,51,.17);
  --radius: 14px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--canvas); scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--canvas); font: 500 14px/1.48 var(--sans); letter-spacing: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:active { transform: scale(.97); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(57,121,217,.25); outline-offset: 3px; }
[hidden] { display: none !important; }
.material { background: var(--surface); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%); }
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(360px,1.05fr) minmax(420px,.95fr); background: #fff; }
.auth-brand { min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; padding: 48px 54px; color: #fff; background: #20252b; }
.auth-brand-lockup { display: flex; align-items: center; gap: 13px; }.auth-brand-lockup strong { font-size: 15px; letter-spacing: .14em; }.auth-brand-copy { max-width: 480px; }.auth-brand-copy .overline { color: #9fa8b1; letter-spacing: 0; }.auth-brand-copy h1 { margin: 12px 0 0; font-size: 48px; line-height: 1.08; letter-spacing: 0; }.auth-brand-copy p { margin: 16px 0 0; color: #c5ccd2; font-size: 15px; }.auth-environment { display: inline-flex; align-items: center; gap: 8px; width: max-content; color: #b8c1c8; font-size: 11px; }.auth-environment svg { width: 16px; color: #78c7a7; }
.auth-panel { min-height: 100vh; display: grid; place-items: center; padding: 42px; }.auth-form-wrap { width: min(360px,100%); }.auth-heading .overline { color: var(--orange); letter-spacing: 0; }.auth-heading h2 { margin: 10px 0 0; font-size: 30px; line-height: 1.15; letter-spacing: 0; }.auth-heading p { margin: 10px 0 0; color: var(--ink-muted); font-size: 13px; }.auth-form { display: grid; gap: 17px; margin-top: 34px; }.auth-field { display: grid; gap: 8px; color: var(--ink-muted); font-size: 11px; font-weight: 750; }.auth-field > div { height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 13px; border: 1px solid var(--stroke-strong); border-radius: 8px; background: #fff; transition: border-color .18s ease, box-shadow .18s ease; }.auth-field > div:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(57,121,217,.1); }.auth-field svg { width: 17px; flex: none; color: var(--ink-faint); }.auth-field input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 14px; }.auth-error { margin: -3px 0 0; padding: 10px 11px; border-radius: 8px; color: #a94f3e; background: var(--orange-soft); font-size: 11px; }.auth-submit { height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border: 0; border-radius: 8px; color: #fff; background: var(--blue); font-size: 13px; font-weight: 800; box-shadow: 0 8px 20px rgba(57,121,217,.22); transition: background .18s ease, transform .16s ease; }.auth-submit:hover { background: #2d69c5; }.auth-submit:disabled { cursor: wait; opacity: .65; }.auth-submit svg { width: 17px; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 232px minmax(700px, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 28px 16px 18px; border-right: 1px solid rgba(23,35,51,.08); display: flex; flex-direction: column; background: rgba(249,250,252,.76); }
.brand-lockup { display: flex; align-items: center; gap: 10px; padding: 0 11px; }.brand-lockup strong { display: block; font-size: 15px; letter-spacing: .14em; line-height: 1; }.brand-lockup small { display: block; color: var(--ink-muted); margin-top: 5px; font-size: 11px; }.brand-symbol { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 9px; background: linear-gradient(145deg,#ea7754,#bd492e); box-shadow: 0 7px 16px rgba(230,107,67,.22); transform: rotate(45deg); }.brand-symbol span { width: 9px; height: 9px; background: #fff7f0; border-radius: 3px; }
.workspace-switcher { margin: 34px 4px 22px; padding: 13px 12px; border: 1px solid var(--stroke); border-radius: 12px; background: rgba(255,255,255,.62); }.overline { display: block; color: var(--ink-faint); font: 700 10px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; }.compact-select { margin-top: 8px; }.select-field { position: relative; display: block; }.select-field:after { content: ""; position: absolute; right: 7px; top: 50%; width: 6px; height: 6px; border-right: 1.5px solid var(--ink-muted); border-bottom: 1.5px solid var(--ink-muted); transform: translateY(-65%) rotate(45deg); pointer-events: none; }.select-field select { appearance: none; width: 100%; border: 0; background: transparent; padding: 0 22px 0 0; font-size: 12px; font-weight: 750; }
.primary-nav { display: grid; gap: 4px; }.nav-item { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; min-height: 42px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-muted); padding: 0 12px; text-align: left; font-size: 13px; font-weight: 700; transition: background .25s ease, color .25s ease, transform .16s ease; }.nav-item svg { width: 17px; height: 17px; stroke-width: 1.9; }.nav-item b { margin-left: auto; color: var(--ink-faint); font: 600 11px var(--mono); }.nav-item:hover { color: var(--ink); background: rgba(255,255,255,.75); }.nav-item.is-active { color: var(--blue); background: var(--blue-soft); box-shadow: inset 3px 0 0 var(--blue); }.nav-item.is-active b { color: var(--blue); }.sidebar-bottom { margin-top: auto; display: grid; gap: 9px; }.sync-card { display: flex; gap: 10px; align-items: center; padding: 12px; border-radius: 12px; background: var(--green-soft); color: #227b5b; }.sync-card strong { display: block; margin-top: 4px; font-size: 11px; }.sync-card small { display: block; margin-top: 2px; color: #58947c; font-size: 10px; }.sync-card .overline { color: #58947c; }.sync-ring { width: 25px; height: 25px; border: 1.5px solid #5ab18e; display: grid; place-items: center; border-radius: 50%; }.sync-ring span { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }.nav-item.subtle { min-height: 38px; font-size: 12px; }.profile-chip { display: flex; align-items: center; gap: 9px; background: transparent; border: 0; border-top: 1px solid var(--stroke); padding: 15px 7px 0; text-align: left; }.profile-chip .avatar { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; font-size: 11px; }.profile-chip strong { display: block; font-size: 11px; }.profile-chip small { display: block; color: var(--ink-muted); font-size: 10px; margin-top: 1px; }.profile-chip svg { margin-left: auto; width: 14px; color: var(--ink-faint); }
.main-content { min-width: 0; padding: 26px clamp(22px,4vw,58px) 58px; }.topbar { height: 42px; display: flex; align-items: center; justify-content: space-between; }.breadcrumb { display: flex; align-items: center; gap: 7px; color: var(--ink-faint); font-size: 12px; }.breadcrumb svg { width: 14px; }.breadcrumb strong { color: var(--ink); font-weight: 800; }.topbar-actions { display: flex; align-items: center; gap: 9px; }.permission-pill { display: inline-flex; gap: 7px; align-items: center; border: 1px solid var(--stroke); border-radius: 99px; padding: 6px 10px; color: var(--ink-muted); background: rgba(255,255,255,.68); font-size: 11px; }.permission-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 3px rgba(232,165,47,.13); }.round-button { position: relative; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--stroke); border-radius: 50%; background: rgba(255,255,255,.75); transition: background .2s ease, transform .16s ease; }.round-button:hover { background: #fff; border-color: var(--stroke-strong); }.round-button svg { width: 16px; height: 16px; }.notification-dot { position: absolute; right: 3px; top: 2px; width: 6px; height: 6px; background: var(--orange); border-radius: 50%; border: 1px solid #fff; }
.sync-card.is-loading { color: #315f85; background: var(--blue-soft); }.sync-card.is-loading .sync-ring { border-color: var(--blue); }.sync-card.is-loading .sync-ring span { background: var(--blue); animation: sync-pulse 1.3s ease-in-out infinite; }.sync-card.is-error { color: #a94f3e; background: var(--orange-soft); }.sync-card.is-error .sync-ring { border-color: var(--orange); }.sync-card.is-error .sync-ring span { background: var(--orange); }.sync-card.is-loading small, .sync-card.is-loading .overline { color: #6388a8; }.sync-card.is-error small, .sync-card.is-error .overline { color: #b06f62; }
.integration-strip { margin: -19px 0 19px; min-height: 54px; display: flex; align-items: center; gap: 13px; padding: 11px 14px; border: 1px solid rgba(42,125,235,.13); border-radius: 10px; background: rgba(236,244,255,.72); color: #315f85; }.integration-strip .integration-icon { width: 30px; height: 30px; display: grid; place-items: center; flex: none; border-radius: 50%; background: #fff; color: var(--blue); box-shadow: 0 3px 10px rgba(42,125,235,.1); }.integration-strip svg { width: 15px; }.integration-strip strong { display: block; font-size: 11px; }.integration-strip small { display: block; margin-top: 3px; color: #6488a6; font-size: 10px; }.integration-strip .integration-meta { margin-left: auto; text-align: right; font: 10px var(--mono); color: #6488a6; }.integration-strip.is-error { border-color: rgba(220,91,61,.15); background: var(--orange-soft); color: #a94f3e; }.integration-strip.is-error .integration-icon { color: var(--orange); }.integration-strip.is-error small { color: #b06f62; }
.algo-toggle { display: flex; align-items: center; gap: 8px; color: var(--ink-muted); font-size: 11px; font-weight: 800; }.rule-control { width: 100%; min-height: 36px; padding: 7px 9px; border: 1px solid var(--stroke-strong); border-radius: 8px; background: #fff; color: var(--ink); font-size: 12px; font-weight: 750; outline: none; }.rule-control:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(42,125,235,.1); }.scope-editor { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 11px; }.scope-editor label { display: grid; gap: 6px; color: var(--ink-muted); font-size: 10px; font-weight: 800; }.save-state { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-size: 10px; }.save-state svg { width: 13px; }
@keyframes sync-pulse { 50% { transform: scale(.55); opacity: .45; } }
.scope-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-bottom: 18px; }.scope-metric-text { font-size: 23px !important; line-height: 1.15; letter-spacing: 0 !important; }.product-scope-layout { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(320px,.7fr); gap: 12px; align-items: start; }.product-rule-panel, .product-scope-side { padding: 22px; }.scope-section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 20px; }.scope-section-head h2 { margin: 7px 0 5px; font-size: 20px; }.scope-section-head p { margin: 0; color: var(--ink-muted); font-size: 11px; }.scope-section-head.compact { margin-bottom: 13px; }.scope-section-head.compact h2 { font-size: 16px; }.scope-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }.scope-form-grid + .scope-form-grid { margin-top: 16px; }.scope-form-grid .scope-wide { grid-column: 1/-1; }.scope-binary-list { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 16px 0; }.scope-binary-list > label { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; min-height: 78px; padding: 12px; border: 1px solid var(--stroke); border-radius: 9px; background: #f9fafc; }.scope-binary-list strong { display: block; font-size: 11px; }.scope-binary-list small { display: block; max-width: 155px; margin-top: 5px; color: var(--ink-muted); font-size: 9px; line-height: 1.5; }.priority-flow { display: grid; gap: 8px; }.priority-flow > div { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: 8px; background: #f7f8fa; }.priority-flow b { width: 25px; height: 25px; display: grid; place-items: center; flex: none; border-radius: 50%; background: var(--blue-soft); color: var(--blue); font: 700 9px var(--mono); }.priority-flow strong, .priority-flow small { display: block; }.priority-flow strong { font-size: 11px; }.priority-flow small { margin-top: 3px; color: var(--ink-muted); font-size: 9px; line-height: 1.4; }.scope-divider { height: 1px; margin: 20px 0; background: var(--stroke); }.algorithm-scope-list { display: grid; gap: 8px; }.algorithm-scope-list label { display: grid; gap: 7px; padding: 10px; border: 1px solid var(--stroke); border-radius: 8px; }.algorithm-scope-list strong, .algorithm-scope-list small { display: block; }.algorithm-scope-list strong { font-size: 10px; }.algorithm-scope-list small { margin-top: 2px; color: var(--ink-muted); font-size: 9px; }.algorithm-scope-list .rule-control { min-height: 32px; font-size: 10px; }.scope-note { display: flex; gap: 7px; align-items: flex-start; margin-top: 13px; padding: 10px; border-radius: 8px; color: #315f85; background: var(--blue-soft); font-size: 9px; line-height: 1.55; }.scope-note svg { width: 13px; flex: none; }
.page-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin: 37px 0 25px; }.page-hero h1 { margin: 7px 0 0; font-size: clamp(28px,3.6vw,46px); line-height: 1.07; letter-spacing: -.045em; font-weight: 760; }.page-hero p { max-width: 510px; margin: 12px 0 0; color: var(--ink-muted); font-size: 13px; }.hero-actions { display: flex; gap: 8px; padding-bottom: 3px; }.button { min-height: 38px; border-radius: 10px; border: 1px solid var(--stroke-strong); padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 12px; font-weight: 800; transition: transform .16s ease, background .2s ease, box-shadow .2s ease; }.button svg { width: 15px; height: 15px; }.button.primary { color: #fff; border-color: var(--blue); background: var(--blue); box-shadow: 0 7px 18px rgba(57,121,217,.22); }.button.primary:hover { background: #2d69c5; box-shadow: 0 9px 22px rgba(57,121,217,.3); }.button.secondary { background: rgba(255,255,255,.75); }.button.secondary:hover { background: #fff; }.button.ghost { border-color: transparent; background: transparent; color: var(--blue); box-shadow: none; }.button:disabled { cursor: not-allowed; color: var(--ink-faint); background: #e6eaf0; border-color: #e6eaf0; box-shadow: none; }
.metric-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 11px; margin-bottom: 20px; }.metric-card { min-height: 124px; padding: 17px 18px; border: 1px solid var(--stroke); border-radius: var(--radius); background: rgba(255,255,255,.76); box-shadow: 0 4px 15px rgba(23,35,51,.03); }.metric-card .metric-label { color: var(--ink-muted); font-size: 11px; font-weight: 750; }.metric-card strong { display: block; margin-top: 14px; font: 500 30px/1 var(--mono); letter-spacing: -.06em; }.metric-card small { display: block; margin-top: 9px; color: var(--ink-muted); font-size: 10px; }.metric-card.accent-blue { border-top: 3px solid var(--blue); }.metric-card.accent-orange { border-top: 3px solid var(--orange); }.metric-card.accent-purple { border-top: 3px solid var(--purple); }.metric-card.accent-green { border-top: 3px solid var(--green); }
.surface { border: 1px solid var(--stroke); border-radius: var(--radius); background: rgba(255,255,255,.79); box-shadow: var(--shadow); overflow: hidden; }.surface-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 21px 23px 18px; }.section-title { display: flex; align-items: center; gap: 9px; color: var(--blue); font: 700 10px var(--mono); letter-spacing: .03em; text-transform: uppercase; }.section-title .tiny-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }.surface h2 { margin: 7px 0 3px; font-size: 19px; letter-spacing: -.025em; }.surface-subtitle { margin: 0; color: var(--ink-muted); font-size: 12px; }.header-actions { display: flex; gap: 8px; align-items: center; }.status-chip { border-radius: 99px; padding: 5px 8px; background: var(--green-soft); color: var(--green); font-size: 10px; font-weight: 800; }.toolbar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 12px 23px; border-top: 1px solid var(--stroke); border-bottom: 1px solid var(--stroke); background: rgba(247,249,252,.72); }.search-field { min-width: 210px; height: 33px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--stroke-strong); border-radius: 9px; background: #fff; }.search-field svg { width: 15px; color: var(--ink-faint); }.search-field input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 11px; }.segmented { display: inline-flex; padding: 3px; border-radius: 9px; background: #e9edf2; }.segment { border: 0; border-radius: 7px; padding: 6px 10px; color: var(--ink-muted); background: transparent; font-size: 11px; font-weight: 750; }.segment.is-active { color: var(--ink); background: #fff; box-shadow: 0 2px 5px rgba(23,35,51,.08); }.toolbar-spacer { margin-left: auto; }.field-select { height: 33px; border: 1px solid var(--stroke); border-radius: 9px; background: #fff; padding: 0 10px; font-size: 11px; }
.table-scroll { overflow-x: auto; }.data-table { width: 100%; min-width: 1000px; border-collapse: collapse; }.data-table th { padding: 12px 10px; color: var(--ink-faint); text-align: left; white-space: nowrap; border-bottom: 1px solid var(--stroke); font: 700 10px var(--mono); }.data-table td { padding: 12px 10px; border-bottom: 1px solid rgba(23,35,51,.065); vertical-align: middle; font-size: 11px; }.data-table th:first-child, .data-table td:first-child { padding-left: 23px; }.data-table th:last-child, .data-table td:last-child { padding-right: 23px; }.data-table tbody tr { transition: background .2s ease; }.data-table tbody tr:hover { background: var(--blue-wash); }.check-input { width: 14px; height: 14px; accent-color: var(--blue); }.product-cell { display: flex; gap: 9px; align-items: center; min-width: 190px; }.product-thumb { width: 33px; height: 33px; flex: none; display: grid; place-items: center; border-radius: 10px; color: #fff; font: 600 10px var(--mono); background: linear-gradient(145deg,#3b4d66,#1d2a3b); }.product-cell strong { display: block; font-size: 11px; }.product-cell small { display: block; color: var(--ink-muted); margin-top: 2px; font: 10px var(--mono); }.route-cell { min-width: 150px; }.route-cell strong, .route-cell span { display: block; }.route-cell span { color: var(--ink-muted); margin-top: 3px; }.route-arrow { color: var(--blue); margin: 0 3px; }.number { font: 500 12px var(--mono); }.number.warn { color: var(--orange); }.number.good { color: var(--green); }.number.muted { color: var(--ink-muted); }.metric-pair { display: flex; gap: 12px; }.metric-pair span { display: block; color: var(--ink-muted); font-size: 10px; }.metric-pair b { display: block; margin-top: 2px; font: 500 12px var(--mono); }.qty-editor { height: 29px; display: inline-flex; align-items: center; border: 1px solid var(--stroke-strong); border-radius: 8px; background: #fff; }.qty-editor button { width: 25px; height: 27px; border: 0; background: transparent; color: var(--blue); }.qty-editor input { width: 34px; height: 27px; border: 0; border-left: 1px solid var(--stroke); border-right: 1px solid var(--stroke); text-align: center; outline: 0; font: 500 11px var(--mono); }.tag { display: inline-flex; padding: 4px 7px; border-radius: 99px; white-space: nowrap; font-size: 10px; font-weight: 750; }.tag.orange { color: var(--orange); background: var(--orange-soft); }.tag.blue { color: var(--blue); background: var(--blue-soft); }.tag.green { color: var(--green); background: var(--green-soft); }.tag.purple { color: var(--purple); background: var(--purple-soft); }.tag.gray { color: var(--ink-muted); background: #edf0f3; }.row-action { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 50%; color: var(--ink-muted); background: transparent; }.row-action:hover { color: var(--blue); background: var(--blue-soft); }.table-footer { display: flex; justify-content: space-between; align-items: center; min-height: 47px; padding: 0 23px; color: var(--ink-muted); font-size: 10px; }.table-footer strong { color: var(--ink); font: 600 11px var(--mono); }
.data-table tbody .recommendation-status-row:hover { background: transparent; }.data-table tbody .recommendation-status-row td { height: 150px; padding: 26px; }.recommendation-status { display: grid; justify-items: center; gap: 6px; color: var(--ink-muted); text-align: center; }.recommendation-status-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--blue-soft); color: var(--blue); }.recommendation-status-icon svg { width: 17px; height: 17px; }.recommendation-status-icon .lucide-loader-circle { animation: recommendation-spin .9s linear infinite; }.recommendation-status strong { color: var(--ink); font-size: 13px; }.recommendation-status small { max-width: 430px; font-size: 11px; line-height: 1.55; }@keyframes recommendation-spin { to { transform: rotate(360deg); } }
.detail-drawer { position: fixed; z-index: 15; top: 0; right: 0; width: min(430px, 100vw); height: 100vh; padding: 25px; border-left: 1px solid var(--stroke); background: rgba(250,252,255,.91); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: var(--shadow-float); transform: translateX(100%); transition: transform .34s cubic-bezier(.2,.8,.2,1); overflow-y: auto; }.detail-drawer.is-open { transform: translateX(0); }.drawer-header { display: flex; justify-content: space-between; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--stroke); }.drawer-header h2 { margin: 7px 0 0; font-size: 21px; letter-spacing: -.03em; }.detail-main { padding-top: 20px; }.detail-identity { display: flex; gap: 12px; align-items: flex-start; }.detail-thumb { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: linear-gradient(145deg,#3b4d66,#1d2a3b); font: 600 13px var(--mono); }.detail-identity h3 { margin: 0; font-size: 16px; }.detail-identity p { margin: 4px 0 7px; color: var(--ink-muted); font: 10px var(--mono); }.detail-block { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--stroke); }.detail-label { color: var(--ink-faint); font: 700 10px var(--mono); text-transform: uppercase; }.detail-route { display: flex; align-items: center; gap: 8px; margin-top: 10px; }.route-box { flex: 1; padding: 10px; border: 1px solid var(--stroke); border-radius: 10px; background: #fff; }.route-box small { display: block; color: var(--ink-muted); font-size: 9px; }.route-box strong { display: block; margin-top: 3px; font-size: 11px; }.detail-route > svg { width: 15px; color: var(--blue); }.evidence-grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 10px; border-top: 1px solid var(--stroke); border-left: 1px solid var(--stroke); }.evidence-item { padding: 10px; border-right: 1px solid var(--stroke); border-bottom: 1px solid var(--stroke); background: rgba(255,255,255,.75); }.evidence-item span { display: block; color: var(--ink-muted); font-size: 10px; }.evidence-item strong { display: block; margin-top: 4px; font: 500 14px var(--mono); }.evidence-item strong.warn { color: var(--orange); }.evidence-item strong.good { color: var(--green); }.reason-note { padding: 11px 12px; border-radius: 10px; color: #236a53; background: var(--green-soft); font-size: 11px; }.reason-note strong { display: block; margin-bottom: 3px; }.detail-qty { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }.detail-qty .qty-editor { height: 35px; }.detail-qty .qty-editor button, .detail-qty .qty-editor input { height: 33px; }.detail-qty .qty-editor input { width: 46px; }.detail-actions { display: grid; gap: 8px; margin-top: 22px; }.info-note { display: flex; gap: 7px; padding: 10px 11px; border-radius: 10px; color: #8a6320; background: var(--yellow-soft); font-size: 10px; }.info-note svg { width: 14px; flex: none; }
.algorithm-view .page-hero { margin-bottom: 19px; }.algorithm-layout { display: grid; grid-template-columns: 250px minmax(0,1fr); gap: 13px; }.algorithm-list { padding: 10px; }.algo-filter { display: flex; justify-content: space-between; align-items: center; padding: 7px 9px 13px; color: var(--ink-muted); font-size: 11px; }.algo-item { width: 100%; padding: 12px 11px; border: 0; border-radius: 11px; background: transparent; text-align: left; }.algo-item:hover { background: var(--blue-wash); }.algo-item.is-active { background: var(--blue-soft); }.algo-item strong { display: block; font-size: 12px; }.algo-item small { display: block; color: var(--ink-muted); margin-top: 4px; font-size: 10px; }.algo-item .algo-meta { display: flex; align-items: center; gap: 6px; margin-top: 8px; }.algo-editor { padding: 23px; }.algo-editor-head { display: flex; justify-content: space-between; gap: 15px; align-items: flex-start; }.algo-editor h2 { margin-top: 6px; }.algo-editor-head p { margin: 4px 0 0; color: var(--ink-muted); font-size: 11px; }.algo-actions { display: flex; gap: 7px; }.algo-section { margin-top: 23px; padding-top: 18px; border-top: 1px solid var(--stroke); }.algo-section h3 { margin: 0 0 11px; font-size: 13px; }.rule-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }.rule-summary-item { padding: 11px; border-radius: 10px; background: var(--blue-wash); }.rule-summary-item span { display: block; color: var(--ink-muted); font-size: 10px; }.rule-summary-item strong { display: block; margin-top: 5px; font-size: 12px; }.condition-list { display: grid; gap: 7px; }.condition-row { display: grid; grid-template-columns: 82px 1fr auto; gap: 9px; align-items: center; padding: 10px 11px; border: 1px solid var(--stroke); border-radius: 10px; background: #fff; }.condition-row .logic { color: var(--purple); font: 700 10px var(--mono); }.condition-row strong { font-size: 11px; }.condition-row span { color: var(--ink-muted); font-size: 10px; }.rule-preview { padding: 13px; border-radius: 10px; background: var(--ink); color: #fff; }.rule-preview .overline { color: #aeb8c4; }.rule-preview strong { display: block; margin-top: 6px; font-size: 13px; }.rule-preview p { margin: 5px 0 0; color: #b9c4d2; font-size: 10px; }
.field-view .page-hero { margin-bottom: 19px; }.field-view-grid { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 13px; }.field-groups { padding: 10px; }.field-group-button { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 11px; border: 0; border-radius: 10px; background: transparent; text-align: left; font-size: 11px; font-weight: 750; }.field-group-button.is-active { background: var(--blue-soft); color: var(--blue); }.field-group-button span { color: var(--ink-faint); font: 500 10px var(--mono); }.field-table { padding: 22px; }.field-table-header { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; margin-bottom: 16px; }.field-table-header h2 { margin-top: 5px; }.field-table-header p { margin: 0; color: var(--ink-muted); font-size: 11px; }.field-row { display: grid; grid-template-columns: 1.2fr 1fr 110px 100px; gap: 13px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--stroke); }.field-row.head { padding-top: 0; color: var(--ink-faint); font: 700 10px var(--mono); }.field-row strong { font-size: 11px; }.field-row span { color: var(--ink-muted); font-size: 10px; }.field-row code { color: var(--blue); font: 10px var(--mono); }.field-definition { color: var(--ink-muted); font-size: 10px; }
.records-view .page-hero { margin-bottom: 19px; }.record-list { display: grid; gap: 9px; }.record-item { display: grid; grid-template-columns: 1.4fr 1fr .8fr .8fr 24px; gap: 13px; align-items: center; padding: 15px 18px; border: 1px solid var(--stroke); border-radius: 12px; background: rgba(255,255,255,.8); }.record-item strong { display: block; font-size: 12px; }.record-item small { display: block; color: var(--ink-muted); margin-top: 3px; font-size: 10px; }.record-route { font-size: 11px; }.record-route span { display: block; color: var(--ink-muted); margin-top: 3px; }.record-qty { font: 500 13px var(--mono); }.record-arrow { color: var(--ink-faint); }.empty-state { min-height: 150px; display: grid; place-content: center; gap: 7px; padding: 26px; border: 1px dashed var(--stroke-strong); border-radius: 12px; background: rgba(255,255,255,.7); text-align: center; color: var(--ink-muted); }.empty-state strong { color: var(--ink); font-size: 13px; }.empty-state span { font-size: 11px; }.empty-state.is-error strong { color: var(--orange); }
.modal-scrim { position: fixed; z-index: 30; inset: 0; background: rgba(23,35,51,.28); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }.settings-sheet { position: absolute; top: 0; right: 0; width: min(590px, 100vw); height: 100%; display: flex; flex-direction: column; background: rgba(250,252,255,.92); box-shadow: var(--shadow-float); }.manual-sheet { position: absolute; left: 50%; top: 50%; width: min(520px, calc(100vw - 30px)); transform: translate(-50%,-50%); background: rgba(255,255,255,.96); border-radius: 18px; box-shadow: var(--shadow-float); overflow: hidden; }.sheet-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; padding: 24px; border-bottom: 1px solid var(--stroke); }.sheet-header h2 { margin: 7px 0 0; font-size: 22px; letter-spacing: -.03em; }.sheet-tabs { display: flex; gap: 19px; padding: 0 24px; border-bottom: 1px solid var(--stroke); }.sheet-tab { padding: 14px 0 12px; border: 0; border-bottom: 2px solid transparent; color: var(--ink-muted); background: transparent; font-size: 12px; font-weight: 800; }.sheet-tab.is-active { color: var(--blue); border-color: var(--blue); }.sheet-body { flex: 1; overflow-y: auto; padding: 21px 24px; }.sheet-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 24px; border-top: 1px solid var(--stroke); color: var(--ink-muted); font-size: 10px; }.warehouse-list { display: grid; gap: 9px; }.warehouse-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 13px; border: 1px solid var(--stroke); border-radius: 12px; background: #fff; }.warehouse-row.is-disabled { opacity: .55; background: #f5f6f8; }.warehouse-row strong { display: block; font-size: 12px; }.warehouse-row small { display: block; margin-top: 3px; color: var(--ink-muted); font: 10px var(--mono); }.warehouse-meta { display: flex; gap: 6px; margin-top: 8px; }.mini-tag { display: inline-flex; padding: 3px 6px; border-radius: 99px; color: var(--blue); background: var(--blue-soft); font-size: 9px; }.mini-tag.disabled { color: var(--ink-muted); background: #edf0f3; }.warehouse-extra { grid-column: 1/-1; display: flex; align-items: center; gap: 9px; padding-top: 10px; border-top: 1px solid var(--stroke); color: var(--ink-muted); font-size: 10px; }.warehouse-extra input { width: 59px; padding: 6px; border: 1px solid var(--stroke-strong); border-radius: 7px; text-align: center; font: 500 11px var(--mono); }.toggle { position: relative; width: 39px; height: 23px; }.toggle input { opacity: 0; width: 0; height: 0; }.toggle-track { position: absolute; inset: 0; border-radius: 99px; background: #c9d0d9; transition: background .25s ease; }.toggle-track:before { content: ""; position: absolute; left: 3px; top: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(23,35,51,.22); transition: transform .25s cubic-bezier(.2,.8,.2,1); }.toggle input:checked + .toggle-track { background: var(--green); }.toggle input:checked + .toggle-track:before { transform: translateX(16px); }.setting-note { display: flex; gap: 8px; padding: 11px 12px; border-radius: 10px; color: #315f85; background: var(--blue-soft); font-size: 10px; }.schedule-form { display: grid; gap: 17px; }.form-label { display: grid; gap: 7px; color: var(--ink-muted); font-size: 11px; font-weight: 800; }.form-label input, .form-label select, .form-label textarea { width: 100%; padding: 10px 11px; border: 1px solid var(--stroke-strong); border-radius: 9px; outline: 0; background: #fff; font-size: 12px; }.form-label textarea { resize: vertical; }.form-two { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }.schedule-options { display: flex; gap: 7px; flex-wrap: wrap; }.schedule-option { padding: 8px 11px; border: 1px solid var(--stroke-strong); border-radius: 9px; color: var(--ink-muted); background: #fff; font-size: 11px; font-weight: 750; }.schedule-option.is-active { color: var(--blue); border-color: var(--blue); background: var(--blue-soft); }.next-run { padding: 13px; border-radius: 11px; background: var(--ink); color: #fff; }.next-run strong { display: block; margin-top: 5px; font-size: 13px; }.next-run small { display: block; color: #b5c2d0; margin-top: 4px; font-size: 10px; }.manual-form { padding: 22px 24px 25px; display: grid; gap: 14px; }.inline-note { display: flex; gap: 8px; align-items: flex-start; padding: 11px; border-radius: 10px; color: #8a6320; background: var(--yellow-soft); font-size: 10px; }.inline-note svg { width: 14px; flex: none; }.sheet-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; }.toast { position: fixed; z-index: 50; left: 50%; bottom: 22px; padding: 11px 15px; border-radius: 99px; color: #fff; background: var(--ink); box-shadow: var(--shadow-float); font-size: 12px; transform: translate(-50%,20px); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; }.toast.is-visible { opacity: 1; transform: translate(-50%,0); }
@media (max-width: 1180px) { .app-shell { grid-template-columns: 210px minmax(0,1fr); }.sidebar { padding-left: 12px; padding-right: 12px; }.main-content { padding-left: 26px; padding-right: 26px; }.metric-grid { grid-template-columns: repeat(2,1fr); }.detail-drawer { width: min(430px, 93vw); } }
@media (max-width: 760px) { .app-shell { display: block; }.sidebar { position: sticky; z-index: 10; top: 0; height: 62px; padding: 0 15px; display: flex; flex-direction: row; align-items: center; background: rgba(249,250,252,.88); }.brand-lockup { padding: 0; }.brand-lockup small, .workspace-switcher, .sidebar-bottom { display: none; }.primary-nav { display: flex; margin-left: auto; gap: 3px; }.nav-item { width: 38px; min-height: 38px; justify-content: center; padding: 0; }.nav-item span, .nav-item b { display: none; }.nav-item.is-active { box-shadow: inset 0 -3px 0 var(--blue); }.main-content { padding: 18px 15px 44px; }.topbar { height: 35px; }.breadcrumb span, .breadcrumb svg { display: none; }.permission-pill { display: none; }.page-hero { display: block; margin: 27px 0 21px; }.page-hero h1 { font-size: 31px; }.hero-actions { margin-top: 15px; }.hero-actions .button { flex: 1; }.metric-grid { gap: 8px; }.metric-card { min-height: 105px; padding: 13px; }.metric-card strong { font-size: 25px; margin-top: 10px; }.surface-header { padding: 18px 15px 15px; display: block; }.header-actions { margin-top: 13px; }.toolbar { padding: 10px 15px; }.search-field { width: 100%; }.toolbar-spacer { display: none; }.data-table { min-width: 1020px; }.table-footer { padding: 0 15px; }.algorithm-layout, .field-view-grid { grid-template-columns: 1fr; }.algorithm-list, .field-groups { display: flex; gap: 6px; overflow-x: auto; padding: 9px; }.algo-filter { display: none; }.algo-item, .field-group-button { min-width: 150px; }.algo-editor, .field-table { padding: 17px 15px; }.algo-editor-head, .field-table-header { display: block; }.algo-actions { margin-top: 13px; }.rule-summary { grid-template-columns: 1fr; }.field-row { grid-template-columns: 1fr 1fr; gap: 8px; }.field-row.head { display: none; }.record-item { grid-template-columns: 1fr auto; gap: 8px; padding: 13px; }.record-route, .record-qty { display: none; }.settings-sheet { width: 100%; }.detail-drawer { width: 100%; }.form-two { grid-template-columns: 1fr; }.sheet-footer { align-items: flex-start; flex-direction: column; }.sheet-footer .button { width: 100%; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }
@media (prefers-reduced-transparency: reduce) { .material, .detail-drawer, .modal-scrim { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; } }
@media (max-width: 1180px) { .product-scope-layout { grid-template-columns: 1fr; }.scope-binary-list { grid-template-columns: 1fr 1fr; }.product-scope-side { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }.product-scope-side .scope-divider { display: none; }.product-scope-side .scope-note { grid-column: 1/-1; } }
@media (max-width: 760px) { .scope-metrics { grid-template-columns: 1fr 1fr; gap: 8px; }.scope-metric-text { font-size: 18px !important; }.product-rule-panel, .product-scope-side { padding: 16px 14px; }.scope-section-head, .scope-form-grid, .scope-binary-list, .product-scope-side { display: grid; grid-template-columns: 1fr; }.scope-section-head .status-chip { justify-self: start; }.product-scope-side .scope-note, .scope-form-grid .scope-wide { grid-column: auto; }.scope-binary-list > label { min-height: 66px; }.product-view .hero-actions { display: grid; grid-template-columns: 1fr; } }
.product-thumb img, .detail-thumb img, .catalog-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }.product-thumb, .detail-thumb, .catalog-thumb { overflow: hidden; }.product-scope-layout > .scope-metrics, .product-scope-layout > .catalog-preview { grid-column: 1/-1; width: 100%; }.product-scope-layout > .scope-metrics { margin-bottom: 1px; }.catalog-preview { padding: 20px 22px; }.catalog-sku-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }.catalog-sku-item { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px; border: 1px solid var(--stroke); border-radius: 8px; background: #fafbfd; }.catalog-thumb { width: 45px; height: 45px; display: grid; place-items: center; flex: none; border-radius: 8px; color: #fff; background: linear-gradient(145deg,#3b4d66,#1d2a3b); font: 600 9px var(--mono); }.catalog-sku-item div { min-width: 0; }.catalog-sku-item strong, .catalog-sku-item small, .catalog-sku-item span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.catalog-sku-item strong { font-size: 10px; }.catalog-sku-item small { margin-top: 3px; color: var(--ink-muted); font: 9px var(--mono); }.catalog-sku-item span { margin-top: 4px; color: var(--ink-faint); font-size: 8px; }.catalog-empty { grid-column: 1/-1; padding: 24px; border: 1px dashed var(--stroke-strong); border-radius: 8px; color: var(--ink-muted); text-align: center; font-size: 10px; }.layout-sheet { position: absolute; top: 0; right: 0; width: min(470px,100vw); height: 100%; display: flex; flex-direction: column; background: rgba(250,252,255,.95); box-shadow: var(--shadow-float); }.layout-account { display: flex; align-items: center; gap: 10px; padding: 14px 24px; border-bottom: 1px solid var(--stroke); background: var(--blue-wash); }.layout-account .avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--ink); font-size: 10px; }.layout-account strong, .layout-account small { display: block; }.layout-account strong { font-size: 11px; }.layout-account small { margin-top: 2px; color: var(--ink-muted); font-size: 9px; }.layout-field-list { display: grid; gap: 8px; margin-top: 14px; }.layout-field-row { display: grid; grid-template-columns: 24px 1fr auto auto; gap: 9px; align-items: center; padding: 10px; border: 1px solid var(--stroke); border-radius: 9px; background: #fff; }.layout-grip { color: var(--ink-faint); }.layout-grip svg { width: 15px; }.layout-field-row strong, .layout-field-row small { display: block; }.layout-field-row strong { font-size: 11px; }.layout-field-row small { margin-top: 2px; color: var(--ink-muted); font: 9px var(--mono); }.layout-order { display: flex; gap: 3px; }.layout-order button { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid var(--stroke); border-radius: 7px; color: var(--ink-muted); background: #f8f9fb; }.layout-order button:disabled { opacity: .3; }.layout-order svg { width: 13px; }.record-arrow { justify-self: end; }
@media (max-width: 1180px) { .catalog-sku-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .product-scope-layout > .scope-metrics { grid-template-columns: 1fr 1fr; }.catalog-preview { padding: 16px 14px; }.layout-sheet { width: 100%; }.layout-field-row { grid-template-columns: 20px 1fr auto auto; } }
@media (max-width: 760px) { .auth-shell { grid-template-columns: 1fr; }.auth-brand { min-height: 190px; padding: 26px 24px; }.auth-brand-copy h1 { margin-top: 7px; font-size: 36px; }.auth-brand-copy p { margin-top: 7px; font-size: 12px; }.auth-environment { display: none; }.auth-panel { min-height: calc(100vh - 190px); padding: 34px 24px 46px; place-items: start center; }.auth-heading h2 { font-size: 26px; }.auth-form { margin-top: 27px; } }

.account-view.page-hero { margin-bottom: 16px; }
.account-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; margin-bottom: 12px; }
.account-metrics > div { min-height: 82px; padding: 15px 17px; border: 1px solid var(--stroke); border-radius: 8px; background: rgba(255,255,255,.78); }
.account-metrics span { display: block; color: var(--ink-muted); font-size: 10px; font-weight: 750; }
.account-metrics strong { display: block; margin-top: 9px; font: 500 23px var(--mono); }
.account-surface { overflow: hidden; }
.account-list-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 20px 22px 15px; border-bottom: 1px solid var(--stroke); }
.account-list-head h2 { margin-top: 5px; }
.account-list { display: grid; }
.account-row { display: grid; grid-template-columns: 38px minmax(180px,1fr) auto 76px 32px; gap: 12px; align-items: center; min-height: 70px; padding: 11px 17px; border-bottom: 1px solid var(--stroke); }
.account-row:last-child { border-bottom: 0; }
.account-row.is-disabled { background: #f5f6f8; color: var(--ink-muted); }
.account-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--ink); font-size: 11px; font-weight: 800; }
.account-identity { min-width: 0; }
.account-identity > div { display: flex; align-items: center; gap: 7px; }
.account-identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.account-identity small { display: block; overflow: hidden; margin-top: 4px; color: var(--ink-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.account-status { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-muted); font-size: 10px; }
.account-status i { width: 7px; height: 7px; border-radius: 50%; background: #aeb6c1; }
.account-status.is-enabled { color: #267458; }
.account-status.is-enabled i { background: var(--green); }
.role-list { display: grid; }
.role-row { padding: 16px 20px; border-bottom: 1px solid var(--stroke); }
.role-row:last-child { border-bottom: 0; }
.role-heading { display: flex; align-items: center; gap: 10px; min-width: 0; }
.role-heading > strong { min-width: 0; font-size: 12px; }
.role-heading > small { margin-left: auto; color: var(--ink-muted); font-size: 10px; white-space: nowrap; }
.role-actions { display: flex; gap: 4px; }
.role-actions .row-action { flex: none; }
.role-actions .row-action.danger { color: var(--orange); }
.role-actions .row-action:disabled { opacity: .35; cursor: not-allowed; }
.role-permission-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 11px 0 0 47px; }
.role-permission-tags span { padding: 4px 7px; border-radius: 5px; color: #566575; background: #f1f4f7; font-size: 9px; }
.role-permission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.role-permission-option { display: flex; align-items: flex-start; gap: 8px; min-width: 0; padding: 9px; border: 1px solid var(--stroke); border-radius: 7px; background: #fff; font-size: 10px; }
.role-permission-option input { margin: 2px 0 0; accent-color: var(--blue); }
.account-sheet { width: min(620px,calc(100vw - 30px)); max-height: calc(100vh - 24px); display: flex; flex-direction: column; }
.account-sheet .sheet-header { flex: none; }
.account-form { display: grid; gap: 15px; min-height: 0; padding: 20px 24px 24px; overflow-y: auto; }
.account-store-fieldset { min-width: 0; margin: 0; padding: 13px; border: 1px solid var(--stroke); border-radius: 8px; }
.account-store-fieldset legend { padding: 0 6px; color: var(--ink); font-size: 11px; font-weight: 800; }
.account-store-fieldset > p { margin: 0 0 10px; color: var(--ink-muted); font-size: 10px; }
.account-store-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.account-store-option { display: flex; align-items: flex-start; gap: 8px; min-width: 0; padding: 9px; border: 1px solid var(--stroke); border-radius: 7px; background: #fff; }
.account-store-option.is-disabled { background: #f5f6f8; }
.account-store-option input { margin-top: 2px; accent-color: var(--blue); }
.account-store-option span { min-width: 0; }
.account-store-option strong, .account-store-option small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-store-option strong { font-size: 10px; }
.account-store-option small { margin-top: 3px; color: var(--ink-muted); font: 9px var(--mono); }
.account-store-option:has(input:disabled) { opacity: .48; }
.account-store-empty { grid-column: 1/-1; padding: 15px; color: var(--ink-muted); text-align: center; font-size: 10px; }
.account-enabled-row { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 11px 12px; border: 1px solid var(--stroke); border-radius: 8px; background: #fafbfd; }
.account-enabled-row strong, .account-enabled-row small { display: block; }
.account-enabled-row strong { font-size: 11px; }
.account-enabled-row small { margin-top: 3px; color: var(--ink-muted); font-size: 9px; }
@media (max-width: 760px) { .account-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }.account-metrics > div { min-height: 72px; padding: 12px 10px; }.account-metrics strong { font-size: 20px; }.account-list-head { padding: 16px 14px 12px; }.account-row { grid-template-columns: 34px minmax(0,1fr) 30px; gap: 9px; padding: 11px 13px; }.account-row > .tag, .account-status { display: none; }.account-store-grid, .account-form .form-two, .role-permission-grid { grid-template-columns: 1fr; }.account-form { padding: 18px 16px 20px; }.account-sheet { width: calc(100vw - 18px); max-height: calc(100vh - 12px); }.role-row { padding: 14px; }.role-heading { flex-wrap: wrap; gap: 7px; }.role-heading > small { margin-left: 0; }.role-actions { margin-left: auto; }.role-permission-tags { margin-left: 0; } }

/* Product images stay visually stable while the authenticated proxy loads. */
.product-thumb,
.detail-thumb,
.catalog-thumb {
  position: relative;
  overflow: hidden;
  color: var(--ink-faint);
  background: #f1f3f6;
  border: 1px solid rgba(23,35,51,.08);
  font: 700 8px var(--mono);
}
.product-thumb, .catalog-thumb { width: 56px; height: 56px; border-radius: 10px; }
.detail-thumb { width: 64px; height: 64px; flex: none; border-radius: 12px; font-size: 9px; }
[data-product-preview]:has(img.is-loaded) { cursor: zoom-in; }
[data-product-preview]:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.product-image-preview {
  position: fixed;
  z-index: 60;
  padding: 8px;
  border: 1px solid var(--stroke);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 36px rgba(23,35,51,.18);
  pointer-events: none;
}
.product-image-preview img { display: block; width: 100%; height: 100%; object-fit: contain; }
.thumbnail-fallback {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-thumb img,
.detail-thumb img,
.catalog-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #fff;
  opacity: 0;
  transition: opacity .16s ease;
}
.product-thumb img.is-loaded,
.detail-thumb img.is-loaded,
.catalog-thumb img.is-loaded { opacity: 1; }

.inventory-view .page-hero { margin-bottom: 18px; }
.inventory-metrics { margin-bottom: 14px; }
.inventory-surface { overflow: hidden; }
.inventory-toolbar { align-items: end; }
.inventory-select-label { width: min(320px, 100%); margin: 0; }
.inventory-search { flex: 1; min-width: 220px; }
.inventory-access-note { display: flex; align-items: flex-start; gap: 8px; margin: 0 22px 14px; padding: 11px 12px; border-radius: 9px; color: #315f85; background: var(--blue-soft); font-size: 10px; }
.inventory-access-note svg { width: 14px; flex: none; }
.inventory-table { min-width: 1040px; }
.inventory-table th { white-space: nowrap; }
.inventory-table td { vertical-align: middle; }
.inventory-product-thumb { width: 44px; height: 44px; border-radius: 8px; }
.inventory-pagination { display: flex; align-items: center; gap: 10px; }
.inventory-pagination .button { padding: 6px 10px; }
.inventory-warehouse strong, .inventory-warehouse small { display: block; }
.inventory-warehouse strong { font-size: 11px; }
.inventory-warehouse small { margin-top: 3px; color: var(--ink-muted); font: 9px var(--mono); }
.inventory-modified { color: var(--ink-muted); font: 9px var(--mono); white-space: nowrap; }
.inventory-status { min-height: 155px; display: grid; place-content: center; justify-items: center; gap: 7px; color: var(--ink-muted); }
.inventory-status svg { width: 22px; color: var(--blue); }
.inventory-status strong { color: var(--ink); font-size: 13px; }
.inventory-status small { font-size: 10px; }
.inventory-status.is-error svg, .inventory-status.is-error strong { color: var(--orange); }
.inventory-coverage { color: var(--ink-faint); font-size: 10px; }
@media (max-width: 760px) { .inventory-toolbar { display: grid; gap: 10px; }.inventory-select-label, .inventory-search { width: 100%; min-width: 0; }.inventory-access-note { margin-left: 14px; margin-right: 14px; }.inventory-metrics { grid-template-columns: 1fr 1fr; } }

.algorithm-tabs { display: inline-flex; gap: 3px; margin-top: 16px; padding: 3px; border: 1px solid var(--stroke); border-radius: 8px; background: rgba(255,255,255,.74); }
.algorithm-tabs .segment { min-height: 31px; padding: 6px 12px; }
.algorithm-list { max-height: calc(100vh - 225px); overflow-y: auto; }
.algo-editor { min-width: 0; }
.algo-editor-head .template-identity { display: grid; width: min(520px,100%); gap: 9px; }
.algo-editor-head .template-identity .section-title { margin-bottom: 2px; }
.algo-editor-head .template-identity .form-label { gap: 5px; }
.algo-editor-head .template-identity .rule-control { font-weight: 600; }
.algo-actions { flex: none; align-items: center; }
.algo-actions .button.danger { color: var(--orange); border-color: rgba(222, 118, 75, .35); background: #fff8f4; }
.rule-summary { grid-template-columns: repeat(auto-fit,minmax(145px,1fr)); }
.rule-summary-item { min-width: 0; }
.rule-summary-item input, .rule-summary-item select { margin-top: 6px; }
.rule-summary-item strong { line-height: 1.4; }
.condition-row { grid-template-columns: 82px minmax(0,1fr) 30px; }
.condition-row .rule-control { min-width: 0; }
.condition-controls { display: grid; grid-template-columns: minmax(150px,1.1fr) minmax(90px,.55fr) minmax(120px,1fr); gap: 8px; min-width: 0; }
.condition-help { grid-column: 1/-1; color: var(--ink-muted); font-size: 11px; line-height: 1.6; }
.scope-form-grid { align-items: start; }
.scope-form-grid .form-label { min-width: 0; }
.scope-help { align-self: center; margin: 0; padding: 10px 12px; border-radius: 8px; color: var(--ink-muted); background: var(--blue-wash); font-size: 11px; line-height: 1.55; }
.template-source { display: grid; align-content: center; gap: 4px; min-height: 64px; padding: 10px 12px; border-radius: 8px; background: var(--blue-wash); }
.template-source .overline { color: var(--ink-faint); }
.template-source strong { font-size: 12px; }
.template-source small { color: var(--ink-muted); font-size: 10px; }
@media (max-width: 760px) {
  .primary-nav { min-width: 0; max-width: calc(100vw - 120px); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .primary-nav::-webkit-scrollbar { display: none; }
  .algorithm-tabs { display: flex; width: 100%; }
  .algorithm-tabs .segment { flex: 1; }
  .algorithm-list { max-height: none; }
  .algo-editor-head .template-identity { width: 100%; }
  .algo-actions { justify-content: space-between; }
  .condition-row { grid-template-columns: 1fr 30px; }
  .condition-row .logic { grid-column: 1/-1; }
  .condition-controls { grid-template-columns: minmax(0,1fr) 82px; grid-column: 1; }
  .condition-controls input { grid-column: 1/-1; }
  .condition-row .row-action { grid-column: 2; grid-row: 2; }
}

.rule-combination-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.rule-combination-head h3 { margin:0; }
.assignment-rule-list { display:flex; flex-wrap:wrap; gap:8px; }
.assignment-rule { display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 9px; min-width:150px; max-width:100%; padding:12px; border:1px solid var(--stroke); border-radius:10px; background:white; color:var(--ink); text-align:left; }
.assignment-rule > span { grid-row:span 2; color:var(--ink-muted); font:600 11px var(--mono); }
.assignment-rule strong { font-size:12px; overflow-wrap:anywhere; }
.assignment-rule small { color:var(--ink-muted); font-size:10px; }
.assignment-rule.is-active { border-color:var(--blue); background:var(--blue-wash); }
.source-warehouse-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:8px; }
.source-warehouse-list label { display:flex; align-items:center; gap:8px; min-height:40px; padding:10px; border:1px solid var(--stroke); border-radius:8px; font-size:12px; }
.global-preview { margin-top:18px; }
.global-preview .data-table { min-width:700px; }
.global-preview td:last-child { max-width:360px; white-space:normal; line-height:1.6; }
.global-plan-results { display:flex; flex-wrap:wrap; gap:8px; padding:0 22px 18px; font-size:11px; color:var(--ink-muted); }
.global-plan-results span { padding:8px 10px; background:var(--blue-wash); border-radius:8px; }
.recommendation-warning { color:var(--orange); font-size:12px; margin:8px 0 0; line-height:1.6; }
@media (max-width:760px) { .assignment-rule-list { display:grid; grid-template-columns:1fr; }.rule-combination-head { align-items:flex-start; flex-wrap:wrap; }.rule-combination-head .algo-actions { margin-top:0; }.source-warehouse-list { grid-template-columns:1fr; } }

.rule-decisions { margin-top: 20px; padding: 22px; }
.rule-decisions summary { cursor: pointer; font-weight: 700; color: var(--ink); }
.rule-decisions small { display: block; color: var(--ink-muted); margin-top: 5px; }
.decision-reason { min-width: 270px; max-width: 560px; white-space: normal; line-height: 1.7; }
.policy-overrides { min-width: 950px; }
.policy-overrides td:first-child { min-width: 170px; }
.policy-overrides td:nth-child(2) { min-width: 140px; }
.policy-overrides input[type=number] { min-width: 78px; }
@media(max-width: 700px) { .rule-decisions { padding: 14px; } .hero-actions { flex-wrap: wrap; } }

.records-surface { overflow: hidden; }
.records-surface .toolbar { flex-wrap: wrap; gap: 10px; }
.records-surface .form-label { min-width: 130px; }
.records-surface .record-list { padding: 0 18px 18px; }
.transfer-sync-note, .transfer-write-note { margin: 14px 18px; color: var(--ink-muted); font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.transfer-sync-note.is-error { color: var(--orange); }
.transfer-detail-items { display: grid; gap: 12px; margin-top: 20px; }
.transfer-detail-items > div { padding: 12px; border: 1px solid var(--stroke); border-radius: 10px; }
.transfer-detail-items small { display: block; margin: 5px 0; color: var(--ink-muted); }
@media (max-width: 760px) { .records-surface .record-list { padding: 0 10px 10px; } .records-surface .table-footer { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 10px; gap: 8px; } .record-item > div:first-child { min-width: 0; overflow-wrap: anywhere; } .record-item .record-arrow { grid-column: 2; grid-row: 1; } .record-item .tag { justify-self: start; } }
#draftScrim { display:flex; align-items:center; justify-content:center; padding:12px; }
#permissionPill.is-enabled .permission-dot { background:var(--green); box-shadow:0 0 0 3px var(--green-soft); }
.draft-sheet { width:min(820px,calc(100vw - 24px)); max-height:90vh; overflow:auto; padding:24px; border-radius:20px; background:rgba(255,255,255,.98); box-shadow:var(--shadow-float); }
.draft-sheet .sheet-header { padding:0 0 18px; margin-bottom:16px; }
.draft-card { margin-top:16px; padding:18px; border:1px solid var(--line,#e2e5ea); border-radius:14px; }
.draft-card-head,.draft-items > div,.draft-card-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.draft-card-head small,.draft-items small,.draft-preview small { display:block; margin-top:5px; color:var(--ink-muted); overflow-wrap:anywhere; }
.draft-card-head > div,.draft-items span { min-width:0; overflow-wrap:anywhere; }
.draft-items { margin:16px 0; }
.draft-items > div { padding:10px 0; border-bottom:1px solid var(--line,#e2e5ea); }
.draft-items b { white-space:nowrap; }
.draft-result { padding:12px; border-radius:10px; background:var(--canvas,#f3f6fa); font-size:12px; line-height:1.7; overflow-wrap:anywhere; }
.draft-preview { padding:16px; margin:14px 0; border:1px solid #9ec1f9; background:#eff5ff; border-radius:12px; }
.draft-preview h3 { margin:0 0 8px; font-size:16px; }
.draft-preview p { color:var(--ink-muted); font-size:12px; line-height:1.7; }
.draft-preview > div { margin:12px 0; }
.draft-error { color:#a73528; background:#fff2ee; padding:12px; border-radius:10px; line-height:1.7; }
.draft-card-actions { justify-content:flex-end; }
@media(max-width:600px) { .draft-sheet { padding:16px; } .draft-card { padding:12px; } .draft-card-head { align-items:flex-start; } .draft-preview .button { width:100%; } }