:root {
  --ink: #172033;
  --muted: #778399;
  --line: #e7ebf1;
  --canvas: #f5f7fa;
  --surface: #fff;
  --primary: #316ff6;
  --primary-soft: #edf3ff;
  --green: #18a779;
  --orange: #e58a2b;
  --red: #df5147;
  --sidebar: #101827;
  --radius: 14px;
  --shadow: 0 10px 32px rgba(34, 50, 76, .07);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { min-width: 760px; color: var(--ink); background: var(--canvas); font-family: Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

/* 登录 */
.login-wrap { position: fixed; inset: 0; display: grid; grid-template-columns: minmax(420px, 1.1fr) minmax(380px, .9fr); background: #fff; }
.login-visual {
  position: relative;
  overflow: hidden;
  padding: 12vh 8vw;
  color: #fff;
  background: radial-gradient(circle at 75% 20%, #347cf1 0, transparent 31%), linear-gradient(145deg,#0d1830,#14294b 60%,#0b5e67);
}
.visual-kicker { color: #75dce2; font-size: 12px; font-weight: 750; letter-spacing: 3px; }
.login-visual h1 { position: relative; z-index: 2; margin-top: 30px; font-size: clamp(38px,4vw,64px); line-height: 1.22; letter-spacing: -2px; }
.login-visual p { position: relative; z-index: 2; margin-top: 25px; color: rgba(255,255,255,.62); font-size: 16px; }
.visual-orbit { position: absolute; border: 1px solid rgba(110,225,226,.2); border-radius: 50%; }
.orbit-one { right: -120px; bottom: -220px; width: 620px; height: 620px; }
.orbit-two { right: 30px; bottom: -70px; width: 310px; height: 310px; box-shadow: 0 0 90px rgba(48,151,220,.18) inset; }
.login-box { width: 390px; margin: auto; padding: 42px; text-align: left; }
.login-mark { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: var(--primary); box-shadow: 0 10px 25px rgba(49,111,246,.25); font-size: 14px; font-weight: 800; }
.login-logo { margin-top: 30px; color: var(--ink); font-size: 30px; font-weight: 760; letter-spacing: -.5px; }
.login-sub { margin: 8px 0 30px; color: var(--muted); font-size: 14px; }
.login-label { display: block; margin: 15px 0 7px; color: #525e70; font-size: 12px; font-weight: 650; }
.login-input { width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; outline: 0; color: var(--ink); background: #fbfcfe; transition: .2s; }
.login-input:focus { border-color: var(--primary); background: #fff; box-shadow: 0 0 0 4px rgba(49,111,246,.09); }
.login-remember { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; color: #344054; cursor: pointer; }
.login-remember input { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--primary); flex: 0 0 auto; }
.login-remember span { display: grid; gap: 2px; }
.login-remember strong { font-size: 13px; font-weight: 650; }
.login-remember small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.login-btn { width: 100%; height: 50px; margin-top: 24px; display: flex; align-items: center; justify-content: center; gap: 12px; border: 0; border-radius: 11px; color: #fff; background: var(--primary); font-size: 15px; font-weight: 700; box-shadow: 0 12px 28px rgba(49,111,246,.22); }
.login-btn:hover { background: #225fe1; transform: translateY(-1px); }
.login-err { min-height: 20px; margin-top: 13px; color: var(--red); text-align: center; font-size: 13px; }

/* 框架 */
.admin { height: 100vh; display: flex; }
.sidebar { width: 224px; flex: 0 0 224px; display: flex; flex-direction: column; color: #fff; background: var(--sidebar); }
.side-logo { height: 78px; padding: 0 22px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.07); }
.side-logo .brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(135deg,#316ff6,#35c1c8); font-size: 11px; font-weight: 850; }
.side-logo b { display: block; font-size: 16px; letter-spacing: .5px; }
.side-logo small { display: block; margin-top: 2px; color: rgba(255,255,255,.4); font-size: 8px; letter-spacing: 1.7px; }
.sidebar nav { flex: 1; padding: 18px 12px; overflow-y: auto; }
.nav-group { margin-bottom: 14px; }
.nav-group-title { padding: 0 13px 7px; color: rgba(255,255,255,.29); font-size: 9px; font-weight: 760; letter-spacing: 1.6px; }
.nav-item { min-height: 38px; margin-bottom: 3px; padding: 8px 13px; display: flex; align-items: center; gap: 11px; border-radius: 9px; color: rgba(255,255,255,.61); cursor: pointer; font-size: 12px; transition: .18s; }
.nav-dot { width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: rgba(255,255,255,.28); }
.nav-icon { width: 20px; color: rgba(255,255,255,.45); text-align: center; font-size: 16px; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav-item.active { color: #fff; background: linear-gradient(90deg,rgba(49,111,246,.95),rgba(49,111,246,.68)); box-shadow: 0 8px 20px rgba(15,49,116,.32); }
.nav-item.active .nav-dot { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.13); }
.nav-item.active .nav-icon { color: #fff; }
.side-foot { height: 58px; margin: 0 14px; display: flex; align-items: center; gap: 8px; border-top: 1px solid rgba(255,255,255,.07); color: rgba(255,255,255,.42); font-size: 11px; }
.online-dot { width: 7px; height: 7px; border-radius: 50%; background: #37d39c; box-shadow: 0 0 0 4px rgba(55,211,156,.1); }
.main { min-width: 0; flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.topbar { height: 78px; flex: 0 0 78px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); backdrop-filter: blur(12px); }
.top-kicker { color: #9aa4b4; font-size: 9px; font-weight: 750; letter-spacing: 2px; }
.crumb { margin-top: 2px; font-size: 18px; font-weight: 740; }
.top-right { display: flex; align-items: center; gap: 11px; }
.env-chip { margin-right: 9px; padding: 7px 10px; display: flex; align-items: center; gap: 7px; border: 1px solid #d9eee7; border-radius: 999px; color: #277c61; background: #f2fbf7; font-size: 11px; }
.env-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.avatar-mini { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: linear-gradient(135deg,#244d8f,#2d9aaa); font-size: 12px; font-weight: 750; }
.who { color: #526074; font-size: 12px; }
.logout-btn { padding: 7px 11px; border: 1px solid var(--line); border-radius: 8px; color: #6e798a; background: #fff; font-size: 11px; }
.content { flex: 1; padding: 26px 28px 50px; overflow: auto; }
.planned-page { max-width: 760px; padding: 50px; border: 1px solid #dfe7f4; border-radius: 20px; background: linear-gradient(135deg,#fff,#f4f8ff); box-shadow: var(--shadow); }
.planned-kicker { color: var(--primary); font-size: 10px; font-weight: 800; letter-spacing: 2px; }
.planned-page h2 { margin-top: 12px; font-size: 28px; }
.planned-page p { max-width: 620px; margin-top: 15px; color: var(--muted); font-size: 14px; line-height: 1.8; }
.planned-status { margin-top: 24px; color: #4d607d; font-size: 12px; }
.planned-status span { width: 8px; height: 8px; margin-right: 8px; display: inline-block; border-radius: 50%; background: var(--orange); }
.check-item { display: flex; align-items: center; gap: 7px; color: #536074; font-size: 12px; }
.check-item input { width: auto; }
.selection-card-grid { min-width: 0; display: grid; gap: 9px; }
.selection-card {
  min-width: 0;
  min-height: 42px;
  padding: 9px 11px;
  display: grid;
  grid-template-columns: 18px minmax(0,1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid #e1e7f0;
  border-radius: 9px;
  background: #fff;
  color: #39475c;
  cursor: pointer;
}
.selection-card:has(input:checked) { border-color: #8fb0f8; background: #f3f7ff; }
.selection-card input { width: 16px; height: 16px; margin: 0; }
.selection-card span { min-width: 0; overflow-wrap: anywhere; font-size: 13px; line-height: 1.4; }
.weekday-selection-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.modal-box.role-modal { width: min(780px,92vw); }
.role-permission-toolbar { display: flex; align-items: center; gap: 12px; margin: 8px 0 12px; }
.role-select-all { display: inline-flex; align-items: center; gap: 7px; font-weight: 650; cursor: pointer; }
.role-permission-section .role-select-all input[type="checkbox"] { width: 16px; height: 16px; min-width: 16px; margin: 0; padding: 0; }
#role_selection_count { margin-left: auto; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.role-permission-toolbar .btn { padding: 5px 10px; font-size: 12px; }
.role-permission-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.role-permission-grid .selection-card { min-width: 0; padding: 11px 12px; display: grid; grid-template-columns: 18px minmax(0,1fr); align-items: center; gap: 2px 8px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfe; font-size: 13px; line-height: 1.35; }
.role-permission-grid .selection-card input { grid-row: 1 / 3; align-self: center; }
.role-permission-grid .selection-card span { min-width: 0; font-weight: 680; overflow-wrap: anywhere; }
.role-permission-grid .selection-card small { min-width: 0; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.muted { color: var(--muted); }

/* 数据组件 */
.card { margin-bottom: 20px; padding: 21px; border: 1px solid #edf0f4; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.card-title { margin-bottom: 18px; display: flex; align-items: center; justify-content: space-between; color: #273246; font-size: 14px; font-weight: 720; }
.toolbar { margin-bottom: 16px; padding: 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.toolbar input, .toolbar select { height: 36px; min-width: 170px; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px; outline: 0; color: var(--ink); background: #fafbfd; font-size: 12px; }
.toolbar input:focus, .toolbar select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(49,111,246,.08); }
.toolbar-note { margin-right: auto; color: var(--muted); font-size: 12px; }
.table-input { min-width: 90px; height: 34px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: #fff; }
.nav-icon-input { width: 70px; min-width: 70px; }
.danger { color: var(--red) !important; }
.layout-editor-heading { margin-bottom: 18px; }
.editor-dirty { padding: 6px 10px; border-radius: 999px; color: #647084; background: #f1f4f8; font-size: 10px; font-weight: 700; }
.editor-dirty.is-dirty { color: #9b5d11; background: #fff1dc; }
.layout-editor-shell { display: grid; grid-template-columns: minmax(520px,1fr) minmax(330px,420px); align-items: start; gap: 20px; }
.layout-editor-panel, .layout-preview-panel { border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow); }
.layout-editor-summary, .layout-preview-toolbar { padding: 17px 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); }
.layout-editor-summary strong, .layout-editor-summary small, .layout-preview-toolbar strong, .layout-preview-toolbar small { display: block; }
.layout-editor-summary small, .layout-preview-toolbar small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.layout-editor-summary > span { padding: 5px 9px; border-radius: 999px; color: var(--primary); background: var(--primary-soft); font-size: 10px; font-weight: 700; }
.layout-list { padding: 8px 14px 14px; }
.layout-row { min-height: 78px; padding: 10px 4px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); transition: opacity .15s, background .15s; }
.layout-row:last-child { border-bottom: 0; }
.layout-row.is-disabled { opacity: .58; }
.layout-row.is-dragging { opacity: .35; background: var(--primary-soft); }
.layout-handle { width: 28px; height: 34px; padding: 0; border: 0; color: #a7b1c0; background: transparent; cursor: grab; font-size: 17px; }
.layout-handle:active { cursor: grabbing; }
.layout-index { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; color: var(--primary); background: var(--primary-soft); font-size: 11px; font-weight: 750; }
.layout-copy { min-width: 0; flex: 1; }
.layout-copy strong, .layout-copy small { display: block; }
.layout-copy strong { font-size: 13px; }
.layout-copy small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.layout-title { width: 100%; max-width: 240px; height: 34px; padding: 0 9px; border: 1px solid transparent; border-radius: 7px; color: var(--ink); background: transparent; font-size: 13px; font-weight: 700; }
.layout-title:hover { border-color: var(--line); background: #fafbfd; }
.layout-title:focus { border-color: var(--primary); outline: 0; background: #fff; box-shadow: 0 0 0 3px rgba(49,111,246,.08); }
.switch-control { display: flex; align-items: center; gap: 7px; color: #59667a; cursor: pointer; font-size: 11px; }
.switch-control input { position: absolute; opacity: 0; pointer-events: none; }
.switch-control span { width: 34px; height: 19px; position: relative; border-radius: 999px; background: #c8ced8; transition: .18s; }
.switch-control span::after { content: ""; width: 15px; height: 15px; position: absolute; top: 2px; left: 2px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.22); transition: .18s; }
.switch-control input:checked + span { background: var(--primary); }
.switch-control input:checked + span::after { transform: translateX(15px); }
.switch-control input:focus-visible + span { outline: 3px solid rgba(49,111,246,.18); }
.layout-row-actions { display: flex; gap: 4px; }
.layout-row-actions button { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 7px; color: #617087; background: #fff; cursor: pointer; }
.layout-row-actions button:hover:not(:disabled) { border-color: #b9d0ff; color: var(--primary); }
.layout-row-actions button:disabled { opacity: .35; cursor: not-allowed; }
.layout-preview-panel { position: sticky; top: 18px; overflow: hidden; }
.preview-segments { padding: 3px; display: flex; gap: 2px; border-radius: 8px; background: #f1f4f8; }
.preview-segments button { padding: 5px 9px; border: 0; border-radius: 6px; color: #697588; background: transparent; cursor: pointer; font-size: 10px; }
.preview-segments button.active { color: var(--primary); background: #fff; box-shadow: 0 2px 7px rgba(20,36,64,.1); }
#layoutPreviewMount { min-height: 620px; padding: 24px; display: grid; place-items: start center; background: #f2f5f9; }
.phone-preview { width: 310px; min-height: 570px; overflow: hidden; border: 8px solid #1d2532; border-radius: 34px; background: #f7f8fa; box-shadow: 0 22px 45px rgba(19,32,53,.2); transition: width .2s; }
.phone-preview.is-compact { width: 250px; }
.phone-preview-top { height: 46px; padding: 0 17px; display: flex; align-items: center; justify-content: space-between; color: #1f2a3b; background: #fff; font-size: 9px; }
.phone-preview-top b { font-size: 12px; }
.phone-preview-top i { width: 34px; height: 9px; border-radius: 999px; background: #1f2733; }
.phone-preview-body { padding: 10px; display: grid; gap: 8px; }
.preview-module { min-height: 58px; padding: 10px; display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 9px; border: 1px solid #e7ebf0; border-radius: 11px; background: #fff; box-shadow: 0 3px 10px rgba(30,48,76,.04); }
.preview-module > i { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: var(--primary); background: var(--primary-soft); }
.preview-module strong, .preview-module small { display: block; }
.preview-module strong { overflow: hidden; max-width: 135px; color: #253044; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.preview-module small, .preview-module > span { color: #929cad; font-size: 8px; }
.preview-banner { min-height: 112px; color: #fff; background: linear-gradient(135deg,#316ff6,#68a2ff); }
.preview-banner > i { color: #fff; background: rgba(255,255,255,.2); }
.preview-banner strong, .preview-banner small, .preview-banner > span { color: #fff; }
.preview-empty { min-height: 420px; display: grid; place-items: center; align-content: center; gap: 8px; color: var(--muted); text-align: center; }
.preview-empty i { font-size: 30px; }
.preview-empty strong, .preview-empty small { display: block; }
.phone-preview-home { width: 90px; height: 4px; margin: 10px auto 7px; border-radius: 999px; background: #1d2532; }
.material-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(210px,1fr)); gap: 14px; }
.material-card { position: relative; padding: 12px; display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 12px; background: #fff; content-visibility: auto; contain-intrinsic-size: 118px; }
.material-card-thumb { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 9px; overflow: hidden; color: #9ba7b8; background: #f2f5f9; }
.material-card-thumb img, .material-card-thumb i { grid-area: 1 / 1; }
.material-card-thumb img { width: 72px; height: 72px; object-fit: cover; }
.material-card-thumb i { display: none; font-size: 23px; }
.material-card-thumb.is-broken i { display: block; }
.material-card strong, .material-card small { display: block; }
.material-card strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.material-card small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.material-card .btn { justify-self: start; }
.material-check { position: absolute; top: 7px; left: 7px; z-index: 1; padding: 3px; border-radius: 4px; background: rgba(255,255,255,.9); }
.material-copy { min-width: 0; }
.material-actions { grid-column: 1 / -1; display: flex; gap: 6px; }
.material-batchbar { display: flex; align-items: center; gap: 8px; margin: 10px 0; }
.material-groups { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 12px; }
.material-group-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 11px; }
.material-group-chip button { padding: 0 2px; border: 0; color: var(--muted); background: transparent; cursor: pointer; }
.usage-badge { margin-top: 6px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: #f7f9fc; font-size: 9px; cursor: pointer; }
.usage-badge.active { border-color: #b9d0ff; color: var(--primary); background: #edf4ff; }
.material-edit-preview img { display: block; width: 140px; height: 140px; margin: 0 auto 18px; border-radius: 10px; object-fit: contain; background: #f2f5f9; }
.reference-list { display: grid; gap: 8px; }
.reference-list > div { display: grid; grid-template-columns: 100px 1fr auto; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; }
.reference-list span, .reference-list small { color: var(--muted); }
.material-picker-layer { position: fixed; inset: 0; z-index: 180; display: flex; align-items: center; justify-content: center; }
.material-picker-mask { position: absolute; inset: 0; background: rgba(12,22,39,.58); }
.material-picker-panel { position: relative; width: min(980px,92vw); max-height: 82vh; overflow-x: hidden; overflow-y: auto; border-radius: 14px; background: #fff; box-shadow: 0 25px 80px rgba(0,0,0,.24); }
.material-picker-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid var(--line); background: #fff; }
.material-picker-head-actions, .material-picker-tools, .material-picker-pagination { display: flex; align-items: center; gap: 8px; }
.material-picker-tools { position: sticky; top: 61px; z-index: 2; padding: 10px 16px; border-bottom: 1px solid var(--line); background: #fff; }
.material-picker-tools input { min-width: 240px; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; }
.material-picker-tools span { margin-left: auto; color: var(--muted); font-size: 11px; }
.material-picker-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(130px,1fr)); gap: 10px; padding: 16px; }
.material-picker-item { min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 9px; text-align: left; background: #fff; cursor: pointer; }
.material-picker-item:hover { border-color: var(--primary); box-shadow: 0 4px 15px rgba(49,111,246,.12); }
.material-picker-thumb { width: 100%; height: 100px; display: grid; overflow: hidden; place-items: center; border-radius: 6px; color: #a5afbe; background: #f2f5f9; }
.material-picker-thumb img, .material-picker-thumb i { grid-area: 1 / 1; }
.material-picker-thumb img { width: 100%; height: 100%; display: block; object-fit: contain; }
.material-picker-thumb i { display: none; font-size: 24px; }
.material-picker-thumb.is-broken i { display: block; }
.material-picker-item > .material-picker-name, .material-picker-item > small { display: block; overflow: hidden; margin-top: 5px; text-overflow: ellipsis; white-space: nowrap; }
.material-picker-item small { color: var(--muted); }
.material-picker-pagination { position: sticky; bottom: 0; justify-content: center; padding: 12px 16px; border-top: 1px solid var(--line); background: #fff; }
.material-picker-pagination span { color: var(--muted); font-size: 11px; }
.label-chip { padding: 4px 8px; border: 1px solid color-mix(in srgb,var(--label-color),white 55%); border-radius: 999px; color: var(--label-color); background: color-mix(in srgb,var(--label-color),white 91%); font-size: 11px; }
.settings-section { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.app-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(230px,1fr)); gap: 16px; }
.app-card { padding: 22px; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: var(--shadow); }
.app-card h3 { margin-top: 14px; font-size: 17px; }
.app-card p { min-height: 48px; margin: 9px 0 18px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.app-status { width: max-content; padding: 4px 8px; border-radius: 999px; font-size: 9px; }
.app-status.available { color: #177b5d; background: #e9f8f2; }
.app-status.placeholder { color: #8a6634; background: #fff5e5; }
.integration-security-note { margin-bottom: 22px; padding: 16px 18px; display: flex; align-items: flex-start; gap: 12px; border: 1px solid #c9dcff; border-radius: 13px; color: #2f5a9c; background: #f3f7ff; }
.integration-security-note > i { margin-top: 2px; font-size: 20px; }
.integration-security-note > div { flex: 1; min-width: 0; }
.integration-security-note > button { flex: 0 0 auto; }
.integration-security-note strong, .integration-security-note span { display: block; }
.integration-security-note span { margin-top: 4px; color: #61789e; font-size: 11px; line-height: 1.6; }
.integration-group { margin-bottom: 28px; }
.integration-list { display: grid; grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); gap: 13px; }
.integration-card { padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 5px 18px rgba(31,48,74,.04); }
.integration-card.is-prepared { border-color: #b9e3d5; }
.integration-head { display: flex; align-items: center; justify-content: space-between; }
.integration-head strong, .integration-head small { display: block; }
.integration-head strong { font-size: 15px; }
.integration-head small { margin-top: 4px; color: var(--muted); font-size: 10px; font-weight: 500; }
.integration-head span { padding: 4px 8px; border-radius: 999px; color: #8a6634; background: #fff5e5; font-size: 10px; }
.integration-card.is-prepared .integration-head span { color: #177b5d; background: #e9f8f2; }
.integration-row { margin-top: 13px; display: grid; grid-template-columns: 74px 1fr; gap: 12px; font-size: 12px; }
.integration-row b { color: #556174; }
.integration-row p { color: var(--muted); }
.integration-meta { margin-top: 15px; padding-top: 12px; display: flex; flex-wrap: wrap; gap: 8px 14px; border-top: 1px solid var(--line); color: #7a8595; font-size: 9px; }
.integration-meta span { display: inline-flex; align-items: center; gap: 5px; }
.integration-configure { width: 100%; margin-top: 15px; justify-content: center; }
.integration-modal-note { margin-bottom: 17px; padding: 11px 13px; display: flex; gap: 9px; border: 1px solid #f1d4a9; border-radius: 10px; color: #855a20; background: #fff8ed; font-size: 11px; line-height: 1.55; }
.card:has(table) { overflow-x: auto; }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; }
th, td { padding: 13px 11px; border-bottom: 1px solid #edf0f4; text-align: left; white-space: nowrap; }
th { position: sticky; top: -22px; z-index: 2; color: #7e899a; background: #f8fafc; font-size: 10px; font-weight: 720; letter-spacing: .3px; text-transform: uppercase; }
th:first-child { border-radius: 8px 0 0 8px; }
th:last-child { border-radius: 0 8px 8px 0; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #f8fbff; }
.status-dot { width: 7px; height: 7px; margin-right: 7px; display: inline-block; border-radius: 50%; vertical-align: middle; }
.st-on { background: var(--green); box-shadow: 0 0 0 3px rgba(24,167,121,.1); }
.st-off { background: #abb3c0; }
.st-wait { background: var(--orange); box-shadow: 0 0 0 3px rgba(229,138,43,.1); }
.st-reject { background: var(--red); }
.btn { padding: 8px 15px; border: 0; border-radius: 8px; font-size: 12px; font-weight: 620; transition: .15s; }
.btn:hover { transform: translateY(-1px); }
.btn.primary { color: #fff; background: var(--primary); box-shadow: 0 7px 17px rgba(49,111,246,.17); }
.btn.ghost { border: 1px solid var(--line); color: #59667a; background: #fff; }
.btn.small { padding: 8px 13px; border: 0; border-radius: 8px; color: #fff; background: var(--primary); font-size: 11px; }
.btn.danger { border: 1px solid #f3cecb; color: var(--red); background: #fff8f7; }
.btn.ok { border: 1px solid #c7e9de; color: var(--green); background: #f5fcf9; }
.link { margin-right: 11px; color: var(--primary); cursor: pointer; font-weight: 620; }
.stat-grid { display: grid; grid-template-columns: repeat(4,minmax(160px,1fr)); gap: 16px; }
.stat { min-height: 128px; padding: 22px; position: relative; overflow: hidden; border: 1px solid #edf0f4; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.stat::after { content: ""; position: absolute; right: -28px; top: -32px; width: 100px; height: 100px; border-radius: 50%; background: var(--primary-soft); }
.stat:nth-child(2)::after { background: #eaf9f4; }
.stat:nth-child(3)::after { background: #fff3e5; }
.stat:nth-child(4)::after { background: #f1ebff; }
.stat .num { position: relative; z-index: 1; color: #1d2c45; font-size: 30px; font-weight: 770; letter-spacing: -1px; }
.stat .lab { margin-top: 10px; color: var(--muted); font-size: 11px; }
.sub-grid { margin-top: 17px; display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }

/* 表单与弹层 */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; }
.modal-mask { position: absolute; inset: 0; background: rgba(12,22,39,.52); backdrop-filter: blur(3px); }
.modal-box { width: 540px; max-width: 92%; max-height: 88vh; position: relative; overflow: auto; border: 1px solid rgba(255,255,255,.7); border-radius: 18px; background: #fff; box-shadow: 0 30px 90px rgba(10,23,46,.24); }
.modal-title { padding: 21px 24px; border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 740; }
.modal-body { padding: 22px 24px; }
.modal-foot { position: sticky; bottom: 0; padding: 15px 24px; display: flex; justify-content: flex-end; gap: 10px; border-top: 1px solid var(--line); background: rgba(255,255,255,.96); }
.form-row { margin-bottom: 18px; }
.form-row > label { margin-bottom: 7px; display: block; color: #526074; font-size: 11px; font-weight: 680; }
.form-row input, .form-row textarea, .form-row select { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; outline: 0; color: var(--ink); background: #fbfcfe; font-size: 13px; }
.form-row input:focus, .form-row textarea:focus, .form-row select:focus { border-color: var(--primary); background: #fff; box-shadow: 0 0 0 3px rgba(49,111,246,.08); }
.form-row textarea { min-height: 86px; resize: vertical; line-height: 1.6; }
.inline-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.shipping-rule-row {
  margin-bottom: 10px;
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(105px, 1fr) minmax(120px, 1fr) minmax(95px, .85fr) 68px;
  align-items: end;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f9fbfe;
}
.shipping-rule-field { min-width: 0; display: block; }
.shipping-rule-field > span {
  margin-bottom: 6px;
  display: block;
  color: #526074;
  font-size: 11px;
  font-weight: 680;
  white-space: nowrap;
}
.shipping-rule-row .shipping-rule-delete { min-height: 38px; }
@media (max-width: 560px) {
  .shipping-rule-row { grid-template-columns: 1fr 1fr; }
  .shipping-rule-row .shipping-rule-delete { grid-column: 1 / -1; }
}

.aftersale-list { display: grid; gap: 14px; }
.aftersale-card { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.aftersale-card > header { min-height: 54px; padding: 11px 16px; display: grid; grid-template-columns: auto minmax(260px,1fr) auto auto; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); background: #f8faff; }
.aftersale-card > header > div strong, .aftersale-card > header > div span { display: block; }
.aftersale-card > header > div strong { font-size: 13px; }
.aftersale-card > header > div span { margin-top: 3px; color: var(--muted); font-size: 11px; }
.aftersale-card > header > div .aftersale-recovery-notice { color: #9a5b13; font-weight: 600; }
.aftersale-type, .aftersale-status { padding: 5px 9px; border-radius: 999px; font-size: 11px; white-space: nowrap; }
.aftersale-type { color: #5b4a90; background: #f1edff; }
.aftersale-status { color: #276d58; background: #eaf8f3; }
.aftersale-summary { min-height: 128px; padding: 16px; display: grid; grid-template-columns: minmax(250px,1.5fr) minmax(155px,.8fr) minmax(200px,1fr) minmax(130px,.65fr) minmax(130px,.7fr); align-items: center; gap: 16px; }
.aftersale-products { min-width: 0; display: grid; gap: 8px; }
.aftersale-product { min-width: 0; display: grid; grid-template-columns: 54px minmax(0,1fr); align-items: center; gap: 10px; }
.aftersale-product img { width: 54px; height: 54px; border: 1px solid var(--line); border-radius: 8px; object-fit: contain; background: #f5f7fa; }
.aftersale-product b, .aftersale-product small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aftersale-product b { font-size: 12px; }
.aftersale-product small, .aftersale-owner span, .aftersale-owner small, .aftersale-recipient span, .aftersale-recipient small, .aftersale-money small, .aftersale-money span { margin-top: 4px; display: block; color: var(--muted); font-size: 11px; line-height: 1.5; }
.aftersale-owner b, .aftersale-recipient b { display: block; font-size: 12px; }
.aftersale-recipient small { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.aftersale-money strong { display: block; color: var(--red); font-size: 19px; }
.aftersale-money span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aftersale-actions { display: flex; flex-direction: column; align-items: stretch; gap: 7px; }
.empty.compact { padding: 16px; }
@media (max-width: 1200px) {
  .aftersale-summary { grid-template-columns: minmax(250px,1.5fr) minmax(170px,1fr) minmax(140px,.8fr); }
  .aftersale-recipient, .aftersale-actions { grid-column: auto; }
  .role-permission-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
.spec-edit-group, .sku-edit-row { margin-bottom: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #f9fbfe; }
.spec-edit-values { margin: 10px 0; display: grid; gap: 8px; }
.spec-edit-value { display: grid; grid-template-columns: 40px 48px minmax(90px,1fr) minmax(90px,1fr) 72px minmax(150px,2fr) auto auto; gap: 8px; align-items: center; }
.spec-sort-handle { width: 40px; height: 48px; display: grid; place-items: center; cursor: grab; border: 1px solid #cbdcf8; border-radius: 8px; color: #2466d8; background: #edf4ff; font-size: 22px; }
.spec-sort-handle:active { cursor: grabbing; }
.spec-sort-handle:focus-visible { outline: 2px solid #2466d8; outline-offset: 2px; }
.spec-sort-target { outline: 2px dashed #2466d8; outline-offset: 2px; }
.spec-sort-dragging { opacity: .5; }
.spec-edit-value img, .sku-image-row img { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; background: #edf1f6; }
.image-preview-trigger { width: 48px; height: 48px; padding: 0; display: block; overflow: hidden; border: 0; border-radius: 8px; background: #edf1f6; cursor: zoom-in; }
.image-preview-trigger:hover { box-shadow: 0 0 0 3px rgba(31,111,235,.16); transform: translateY(-1px); }
.image-preview-trigger:focus-visible { outline: 3px solid rgba(31,111,235,.36); outline-offset: 2px; }
.image-preview-modal { width: min(960px, 94vw); }
.admin-image-preview { margin: 0; display: grid; justify-items: center; gap: 12px; }
.admin-image-preview img { max-width: 100%; max-height: 70vh; display: block; object-fit: contain; border-radius: 12px; background: #edf1f6; box-shadow: 0 12px 36px rgba(15,23,42,.14); }
.admin-image-preview figcaption { color: var(--muted); font-size: 12px; text-align: center; }
.spec-image-empty { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 8px; background: #edf1f6; color: #8a96a8; font-size: 10px; }
.sku-edit-fields { display: grid; grid-template-columns: repeat(3,minmax(160px,1fr)); gap: 12px; align-items: start; }
.sku-edit-fields label { display: grid; gap: 6px; min-width: 0; color: #526680; font-size: 12px; font-weight: 500; }
.sku-edit-fields input, .sku-edit-fields select { width: 100%; min-width: 0; box-sizing: border-box; height: 40px; }
.sku-edit-fields input[readonly] { color: #667085; background: #edf1f6; cursor: default; }
.sku-attribute-row { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.sku-attribute-row label { min-width: 150px; color: #667085; font-size: 11px; }
.sku-attribute-row select { margin-top: 4px; }
.sku-image-row { margin-top: 8px; display: grid; grid-template-columns: 48px 1fr auto auto; gap: 8px; align-items: center; }
@media (max-width: 900px) {
  .spec-edit-value { grid-template-columns: 48px 1fr 1fr; }
  .sku-edit-fields { grid-template-columns: repeat(2,minmax(120px,1fr)); }
}
.badge { display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: 10px; }
.status-on,
.status-off { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 600; }
.status-on { color: #177b5d; background: #e9f8f2; }
.status-off { color: #b54708; background: #fff2e5; }
.payment-readiness { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; }
.payment-readiness span { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 8px; font-size: 11px; }
.payment-readiness .ready { color: #177b5d; background: #e9f8f2; }
.payment-readiness .missing { color: #b42318; background: #fff0ee; }
.integration-security-note.danger { border-color: #f4b7b1; background: #fff7f6; color: #8f2119; }
#f_desc { min-height: 150px; font-family: Consolas, Menlo, monospace; font-size: 12px; }
.uploader { padding: 15px; border: 1px dashed #cfd6e1; border-radius: 11px; background: #fafbfd; }
.upload-preview { width: 96px; height: 96px; margin-bottom: 11px; display: block; object-fit: cover; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.upload-preview.banner-preview { width: 170px; height: 68px; }
.upload-actions, .desc-tools { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.url-input { min-width: 210px; height: 36px; flex: 1; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; }
.hint { margin-top: 8px; display: block; color: #909aab; font-size: 10px; line-height: 1.55; }
.desc-tools { margin-bottom: 8px; }
.material-batch-uploader { width: 100%; }
.material-upload-status { max-height: 280px; margin-top: 12px; display: grid; gap: 6px; overflow-y: auto; }
.material-upload-item { min-width: 0; padding: 8px 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; border: 1px solid #e1e7f0; border-radius: 8px; background: #fff; }
.material-upload-item span { overflow: hidden; color: #36445a; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.material-upload-item small { color: #7f8a9b; font-size: 11px; }
.material-upload-item.uploading { border-color: #a9c5fa; background: #f5f9ff; }
.material-upload-item.success small { color: #177b5d; }
.material-upload-item.error { border-color: #f3c0bb; background: #fff8f7; }
.material-upload-item.error small { color: #b42318; }

/* 店铺模板选择 */
.theme-picker { display: grid; gap: 10px; }
.theme-option { width: 100%; padding: 11px; display: grid; grid-template-columns: 84px 1fr 24px; align-items: center; gap: 13px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: #fff; text-align: left; transition: .18s; }
.theme-option:hover { border-color: #b9c9eb; background: #fbfdff; }
.theme-option.selected { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 3px rgba(49,111,246,.07); }
.theme-preview { height: 48px; padding: 7px; display: grid; grid-template-columns: 19px 1fr; grid-template-rows: 12px 1fr; gap: 4px; border-radius: 8px; overflow: hidden; }
.theme-preview i { grid-row: 1/3; border-radius: 3px; background: rgba(10,20,30,.22); }
.theme-preview b { border-radius: 3px; background: rgba(255,255,255,.86); }
.theme-preview em { border-radius: 3px; background: rgba(255,255,255,.66); }
.theme-preview.aurora { background: linear-gradient(135deg,#1765dc,#4ec9d4); }
.theme-preview.harvest { background: linear-gradient(135deg,#cf4824,#f0a559); }
.theme-preview.jade { background: linear-gradient(135deg,#163f35,#2a7b62); }
.theme-copy strong, .theme-copy small { display: block; }
.theme-copy strong { font-size: 12px; }
.theme-copy small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.theme-check { color: transparent; font-size: 16px; }
.theme-option.selected .theme-check { color: var(--primary); }

.toast { position: fixed; z-index: 200; top: 28px; left: 50%; padding: 11px 20px; transform: translateX(-50%); border: 1px solid rgba(255,255,255,.15); border-radius: 10px; color: #fff; background: rgba(20,30,46,.92); box-shadow: 0 12px 34px rgba(12,25,48,.22); font-size: 12px; }
.empty { padding: 45px 0; color: #9da6b4; text-align: center; }
.async-state { min-height: 360px; padding: 72px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border: 1px solid var(--line); background: #fff; text-align: center; }
.async-state i { color: var(--primary); font-size: 32px; }
.async-state h2 { color: var(--ink); font-size: 18px; }
.async-state p { max-width: 520px; color: var(--muted); line-height: 1.7; }
.error-state i { color: #d92d20; }
.loading-spinner { width: 28px; height: 28px; border: 3px solid #dbe7ff; border-top-color: var(--primary); border-radius: 50%; animation: admin-spin .8s linear infinite; }
@keyframes admin-spin { to { transform: rotate(360deg); } }

.editor-page { min-height: calc(100vh - 92px); padding-bottom: 72px; }
.editor-page-head { margin-bottom: 16px; padding: 16px 18px; position: sticky; top: 0; z-index: 12; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid var(--line); background: rgba(255,255,255,.96); backdrop-filter: blur(8px); }
.editor-title-row, .editor-head-actions { display: flex; align-items: center; gap: 14px; }
.editor-title-row h1 { margin: 0; color: var(--ink); font-size: 20px; }
.editor-title-row p { margin-top: 4px; color: var(--muted); font-size: 11px; }
.editor-save-state { color: #667085; font-size: 11px; }
.editor-layout { display: grid; grid-template-columns: 160px minmax(560px,1fr) 190px; gap: 14px; align-items: start; }
.editor-section-nav, .editor-summary { padding: 12px; position: sticky; top: 88px; border: 1px solid var(--line); background: #fff; }
.editor-section-nav { display: grid; gap: 3px; }
.editor-section-nav button { padding: 9px 10px; border: 0; color: #5f6b7d; background: transparent; text-align: left; font-size: 11px; cursor: pointer; }
.editor-section-nav button:hover, .editor-section-nav button:focus-visible { color: var(--primary); background: var(--primary-soft); outline: none; }
.editor-form { padding: 20px; border: 1px solid var(--line); background: #fff; }
.editor-summary strong { display: block; color: var(--ink); font-size: 12px; }
.editor-summary p { margin-top: 10px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.editor-completeness { margin-top: 10px; color: var(--primary); font-size: 24px; font-weight: 760; }
.editor-anchor { scroll-margin-top: 100px; }
.param-edit-list { display: grid; gap: 8px; margin-bottom: 10px; }
.param-edit-row { display: grid; grid-template-columns: minmax(140px,.7fr) minmax(220px,1.5fr) auto; gap: 8px; align-items: center; }
.gallery-edit-list { margin: 12px 0; display: grid; grid-template-columns: repeat(auto-fill,minmax(128px,1fr)); gap: 10px; }
.gallery-edit-item { padding: 8px; border: 1px solid var(--line); background: #fbfcfe; }
.gallery-edit-item img { width: 100%; aspect-ratio: 1; display: block; object-fit: cover; background: #edf1f6; }
.gallery-edit-item > .gallery-image-preview { width: 100%; height: auto; border-radius: 0; }
.gallery-edit-item > span { margin: 7px 0; display: block; color: #667085; font-size: 10px; }
.gallery-edit-item > div { display: flex; gap: 4px; }
.compatibility-editor { display: grid; gap: 10px; }
.compatibility-editor .gallery-edit-list { width: 100%; }
.compatibility-editor .upload-actions { align-items: flex-start; }
.detail-block-list { display: grid; gap: 12px; margin-top: 12px; }
.detail-block-editor { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfe; }
.detail-block-editor.image-block { grid-template-columns: 180px minmax(0,1fr) auto; }
.detail-block-editor > .detail-image-preview { width: 180px; height: auto; max-height: 240px; border: 1px solid var(--line); border-radius: 0; object-fit: contain; background: #fff; }
.detail-block-editor textarea { min-height: 110px; resize: vertical; background: #fff; }
.detail-block-meta { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.detail-block-meta strong { color: var(--ink); font-size: 13px; }
.detail-block-meta span { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.detail-block-actions { display: flex; gap: 5px; align-items: flex-start; }
.advanced-field { margin-top: 10px; border: 1px dashed var(--line); }
.advanced-field summary { padding: 9px 11px; color: #7c8798; cursor: pointer; font-size: 10px; }
.advanced-field textarea { margin: 0 10px 10px; width: calc(100% - 20px); }
.editor-sticky-actions { padding: 12px 22px; position: fixed; right: 0; bottom: 0; left: 254px; z-index: 20; display: flex; justify-content: flex-end; gap: 10px; border-top: 1px solid var(--line); background: rgba(255,255,255,.97); box-shadow: 0 -8px 24px rgba(26,42,67,.06); }
.subnav-collapsed .editor-sticky-actions { left: 64px; }
@media (max-width: 1280px) {
  .editor-layout { grid-template-columns: 140px minmax(520px,1fr); }
  .editor-summary { position: static; grid-column: 2; grid-row: 2; }
}

@media (max-width: 980px) {
  .sidebar { width: 78px; flex-basis: 78px; }
  .side-logo { padding: 0; justify-content: center; }
  .side-logo > span:last-child, .nav-item > span:last-child, .nav-group-title, .side-foot { display: none; }
  .nav-item { justify-content: center; padding: 0; }
  .nav-icon { width: auto; }
  .stat-grid { grid-template-columns: repeat(2,1fr); }
  .sub-grid { grid-template-columns: 1fr; }
}

/* Product fitment data workbench */
.fitment-workbench { display: grid; gap: 16px; }
.fitment-hero { margin: 0; padding: 22px 24px; border: 1px solid #dce7f7; border-radius: 16px; background: linear-gradient(135deg,#f6f9ff 0%,#fff 55%,#eef6ff 100%); }
.fitment-panel-kicker { display: block; margin-bottom: 5px; color: #2d6cdf; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.fitment-metrics { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; }
.fitment-metrics article { display: flex; align-items: center; gap: 12px; min-height: 82px; padding: 15px 16px; border: 1px solid #e2e9f3; border-radius: 13px; background: #fff; box-shadow: 0 4px 14px rgba(35,62,100,.04); }
.fitment-metrics article > i { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; color: #2f70e8; background: #edf4ff; font-size: 17px; }
.fitment-metrics article.warning > i { color: #b26a00; background: #fff4db; }
.fitment-metrics strong,.fitment-metrics span { display: block; }
.fitment-metrics strong { color: #18263d; font-size: 22px; line-height: 1; }
.fitment-metrics span { margin-top: 5px; color: #748198; font-size: 12px; }
.fitment-tabs-v3 { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; padding: 7px; margin: 0; border: 1px solid #e1e8f2; border-radius: 14px; background: #f5f8fc; }
.fitment-tabs-v3 button { display: flex; align-items: center; gap: 11px; min-height: 64px; padding: 10px 14px; border: 0; border-radius: 10px; color: #617087; background: transparent; text-align: left; }
.fitment-tabs-v3 button > i { font-size: 19px; }
.fitment-tabs-v3 button span,.fitment-tabs-v3 button small { display: block; }
.fitment-tabs-v3 button span { font-weight: 700; }
.fitment-tabs-v3 button small { margin-top: 3px; color: #8b97a9; font-size: 11px; font-weight: 500; }
.fitment-tabs-v3 button.active { color: #215fcf; background: #fff; box-shadow: 0 4px 14px rgba(38,91,174,.11); }
.fitment-tabs-v3 button.active small { color: #6b84ad; }
.fitment-library-grid-v2 { align-items: start; grid-template-columns: minmax(330px,.75fr) minmax(680px,1.7fr); }
.fitment-data-card { border-radius: 14px; box-shadow: 0 4px 18px rgba(32,56,91,.045); }
.fitment-panel-head { padding: 4px 2px 0; }
.fitment-panel-head h3 { color: #1b2940; font-size: 18px; }
.fitment-filter-bar { display: grid; grid-template-columns: minmax(210px,1.5fr) repeat(5,minmax(118px,.7fr)) auto auto; gap: 8px; align-items: center; padding: 12px; margin: 0 0 12px; border: 1px solid #e3eaf4; border-radius: 11px; background: #f8fafe; }
.fitment-filter-bar.compact { grid-template-columns: minmax(160px,1.2fr) repeat(3,minmax(112px,.8fr)) auto auto; }
.fitment-filter-bar.relation { grid-template-columns: minmax(260px,1.7fr) repeat(5,minmax(120px,.75fr)) auto auto; }
.fitment-filter-bar input,.fitment-filter-bar select { width: 100%; min-width: 0; height: 38px; }
.fitment-list.polished { max-height: none; }
.fitment-list.polished article { display: grid; grid-template-columns: minmax(0,1fr) auto auto; min-height: 64px; background: #fff; }
.fitment-list-main { min-width: 0; }
.fitment-list-main strong { color: #23334c; font-size: 14px; }
.fitment-list-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-actions { display: flex; align-items: center; gap: 3px; }
.status-pill { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px; font-size: 11px; white-space: nowrap; }
.status-pill.success { color: #087c55; background: #e7f8f0; }
.status-pill.muted { color: #6e7889; background: #eef1f5; }
.fitment-brand-badge { display: inline-flex; padding: 4px 8px; border-radius: 7px; color: #315f9f; background: #edf4ff; white-space: nowrap; }
.fitment-warning { display: inline-flex; margin-left: 7px; padding: 2px 6px; border-radius: 6px; color: #a35f00; background: #fff3d6; font-size: 11px; }
.fitment-note-cell small,.fitment-table-card td small { display: block; margin-top: 4px; color: #8994a5; }
.fitment-model-text { display: block; max-width: 320px; margin-top: 6px; white-space: normal; }
.fitment-section-heading { padding: 18px 20px; margin: 0; border: 1px solid #e2e9f3; border-radius: 14px 14px 0 0; background: #fff; }
.fitment-table-card { overflow: auto; border-radius: 0 0 14px 14px; }
.fitment-table-card table { min-width: 1260px; }
.fitment-import-dialog { display: grid; gap: 12px; }
.fitment-import-scope { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 11px; background: #f2f7ff; }
.fitment-import-scope > i { color: #2b6ee5; font-size: 24px; }
.fitment-import-scope p { margin: 4px 0 0; color: #748198; }
.fitment-import-mode { display: flex; align-items: flex-start; gap: 10px; padding: 13px 14px; border: 1px solid #dfe7f2; border-radius: 10px; cursor: pointer; }
.fitment-import-mode input { margin-top: 3px; }
.fitment-import-mode span,.fitment-import-mode strong,.fitment-import-mode small { display: block; }
.fitment-import-mode small { margin-top: 4px; color: #77849a; }
.fitment-import-mode.danger { border-color: #f0d8d8; background: #fffafa; }

@media (max-width: 1280px) {
  .fitment-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .fitment-library-grid-v2 { grid-template-columns: 1fr; }
  .fitment-filter-bar,.fitment-filter-bar.relation { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .fitment-filter-bar input { grid-column: span 2; }
}
@media (max-width: 820px) {
  .fitment-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .fitment-tabs-v3 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .fitment-filter-bar,.fitment-filter-bar.compact,.fitment-filter-bar.relation { grid-template-columns: 1fr; }
  .fitment-filter-bar input { grid-column: auto; }
}

/* 2026-08 unified workspace, ontology hub and accessibility pass */
body { font-size: 14px; }
.module-rail { width: 98px; flex-basis: 98px; }
.module-item { width: 98px; min-height: 78px; height: auto; padding: 10px 8px; gap: 7px; font-size: 13px; line-height: 1.35; }
.module-item i { font-size: 21px; }
.module-item span { max-width: 82px; white-space: normal; text-align: center; }
.sidebar { width: 244px; flex-basis: 244px; }
.module-title { padding: 22px 20px 12px; font-size: 17px; }
.sidebar nav { padding: 10px 12px 22px; }
.nav-group + .nav-group { margin-top: 15px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.08); }
.nav-section-label { padding: 0 13px 8px; color: rgba(255,255,255,.42); font-size: 12px; font-weight: 750; letter-spacing: .4px; }
.nav-item { min-height: 43px; padding: 10px 13px; font-size: 14px; }
.side-logo small, .side-foot { font-size: 11px; }
.topbar { min-height: 64px; height: 64px; flex-basis: 64px; }
.platform-chip, .who, .logout-btn { font-size: 13px; }
.content { padding: 30px 34px 58px; }
.btn, .btn.small { min-height: 36px; font-size: 13px; }
table { font-size: 13px; }
th { font-size: 12px; }
td { line-height: 1.55; }
.toolbar input, .toolbar select, .form-row input, .form-row textarea, .form-row select { font-size: 14px; }
.form-row > label, .toolbar-note, .hint, small { font-size: 12px; }
.modal-title { font-size: 18px; }

.ontology-page-head { margin-bottom: 24px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.ontology-kicker { color: var(--primary); font-size: 11px; font-weight: 850; letter-spacing: 1.8px; }
.ontology-page-head h1 { margin: 7px 0 5px; color: #15233b; font-size: 28px; letter-spacing: -.5px; }
.ontology-page-head p { max-width: 840px; margin: 0; color: #66758c; font-size: 14px; line-height: 1.7; }
.ontology-stat-grid { margin-bottom: 20px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 15px; }
.ontology-stat-grid article { position: relative; overflow: hidden; padding: 22px; border: 1px solid #e3e9f2; border-radius: 15px; background: #fff; box-shadow: 0 8px 26px rgba(31,55,91,.05); }
.ontology-stat-grid article::after { content: ''; position: absolute; right: -24px; top: -28px; width: 90px; height: 90px; border-radius: 50%; background: #edf4ff; }
.ontology-stat-grid span, .ontology-stat-grid small { display: block; color: #78859a; }
.ontology-stat-grid strong { display: block; margin: 9px 0 5px; color: #17263e; font-size: 31px; }
.ontology-panel { padding: 22px; }
.panel-title { margin-bottom: 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.panel-title h2 { margin: 0 0 5px; font-size: 18px; }
.panel-title p { margin: 0; color: #748198; }
.ontology-type-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.ontology-type-grid button { padding: 15px; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 11px; border: 1px solid #e4eaf3; border-radius: 12px; background: #fbfdff; text-align: left; cursor: pointer; }
.ontology-type-grid button:hover { border-color: #7ea6f9; background: #f4f8ff; }
.ontology-type-grid i { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: var(--primary); background: #eaf2ff; font-size: 18px; }
.ontology-type-grid strong, .ontology-type-grid small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ontology-type-grid small { margin-top: 3px; color: #8994a6; }
.ontology-type-grid b { color: #334968; font-size: 17px; }
.ontology-two-column { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ontology-source-list { display: grid; gap: 8px; }
.ontology-source-list > div { padding: 12px; display: grid; grid-template-columns: 10px minmax(0,1fr) auto; align-items: center; gap: 10px; border: 1px solid #e8edf4; border-radius: 10px; }
.ontology-source-list small { grid-column: 2; color: #8390a3; }
.ontology-source-list time { grid-row: 1/3; grid-column: 3; color: #758299; }
.status-dot { width: 9px; height: 9px; display: inline-block; border-radius: 50%; background: #9aa6b6; }
.status-dot.active { background: #20b77a; box-shadow: 0 0 0 4px #e5f8f1; }
.ontology-action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ontology-action-grid button { padding: 14px; display: flex; align-items: center; gap: 12px; border: 1px solid #e5eaf2; border-radius: 11px; background: #fff; text-align: left; cursor: pointer; }
.ontology-action-grid i { color: var(--primary); font-size: 20px; }
.ontology-action-grid span, .ontology-action-grid small { display: block; }
.ontology-action-grid small { margin-top: 3px; color: #8490a2; }
.ontology-explorer-shell { padding: 0; overflow: hidden; }
.ontology-toolbar { padding: 16px 18px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #e5eaf2; background: #fbfcfe; }
.ontology-toolbar input { min-width: 300px; flex: 1; }
.ontology-toolbar input, .ontology-toolbar select { height: 40px; padding: 0 12px; border: 1px solid #dfe5ee; border-radius: 9px; font-size: 14px; }
.ontology-toolbar > span { margin-left: auto; color: #7c899c; }
.ontology-entity-grid { padding: 18px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.ontology-entity-card { min-height: 148px; padding: 15px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid #e1e7f0; border-radius: 12px; background: #fff; text-align: left; cursor: pointer; }
.ontology-entity-card:hover { border-color: #79a2f6; box-shadow: 0 8px 24px rgba(49,111,246,.09); transform: translateY(-1px); }
.ontology-entity-card > div { display: flex; align-items: center; gap: 10px; }
.ontology-entity-card i { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: #316ff6; background: #edf3ff; font-size: 18px; }
.ontology-entity-card strong, .ontology-entity-card small { display: block; }
.ontology-entity-card small, .ontology-entity-card p, .ontology-entity-card footer { color: #7b879a; }
.ontology-entity-card p { margin: 12px 0; line-height: 1.55; }
.ontology-entity-card footer { display: flex; justify-content: space-between; gap: 10px; }
.modal-box.ontology-editor-modal {
  width: min(1120px, calc(100vw - 48px));
  max-width: none;
  overflow-x: hidden;
}
.ontology-editor-modal .modal-body { overflow-x: hidden; }
.ontology-editor { min-width: 0; display: grid; grid-template-columns: 250px minmax(0,1fr); gap: 24px; }
.ontology-editor-summary { padding: 20px; border-radius: 13px; background: #f4f7fb; }
.ontology-editor-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: linear-gradient(135deg,#316ff6,#6c55dc); font-size: 23px; }
.ontology-editor-summary code { display: block; overflow-wrap: anywhere; }
.ontology-editor-summary dl div { margin-top: 14px; }
.ontology-editor-summary dt { color: #7a879a; font-size: 12px; }
.ontology-editor-summary dd { margin: 4px 0 0; font-weight: 700; }
.ontology-editor-summary p { margin-top: 20px; color: #718097; line-height: 1.65; }
.ontology-editor-main { min-width: 0; display: grid; gap: 18px; }
.ontology-editor-main section { padding: 18px; border: 1px solid #e2e8f0; border-radius: 13px; }
.ontology-editor-main label { margin-top: 13px; display: block; }
.ontology-editor-main label span { display: block; margin-bottom: 7px; font-weight: 700; }
.ontology-editor-main input, .ontology-editor-main textarea { width: 100%; padding: 11px 12px; border: 1px solid #dbe2ec; border-radius: 9px; font-size: 14px; }
.ontology-source-grid,
.ontology-relation-list,
.ontology-attribute-row { min-width: 0; }
.ontology-source-grid > *,
.ontology-relation-list > *,
.ontology-attribute-row > * { min-width: 0; }
.section-title-row { display: flex; align-items: center; justify-content: space-between; }
.section-title-row h3, .section-title-row p { margin: 0; }
.section-title-row p { margin-top: 4px; color: #7b8798; }
.ontology-attribute-row { margin-top: 9px; display: grid; grid-template-columns: minmax(140px,.65fr) minmax(200px,1.35fr) 36px; gap: 8px; }
.ontology-relation-list { display: grid; gap: 7px; }
.ontology-relation-list > div { padding: 10px 12px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; border-radius: 9px; background: #f7f9fc; }
.ontology-relation-list span { color: #627eb0; }
.modal-box.ontology-type-modal {
  width: min(720px, calc(100vw - 48px));
  max-width: none;
  overflow-x: hidden;
}
.ontology-type-modal .modal-body { padding: 24px 28px 26px; overflow-x: hidden; }
.ontology-type-form { min-width: 0; display: grid; gap: 20px; }
.ontology-type-form-intro {
  padding: 16px 18px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  border: 1px solid #dfe7f2;
  border-radius: 12px;
  background: #f7faff;
}
.ontology-type-form-intro > i {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #316ff6;
  background: #e8f0ff;
  font-size: 20px;
}
.ontology-type-form-intro strong { display: block; color: #263a59; font-size: 14px; }
.ontology-type-form-intro p { margin-top: 5px; color: #718096; font-size: 13px; line-height: 1.6; }
.ontology-form-field { min-width: 0; display: grid; gap: 8px; }
.ontology-form-field > label { color: #33445e; font-size: 13px; font-weight: 720; }
.ontology-form-field > input,
.ontology-form-field > select,
.ontology-form-field > textarea {
  width: 100%;
  min-width: 0;
  padding: 11px 13px;
  border: 1px solid #dce4ef;
  border-radius: 9px;
  outline: 0;
  color: #1f2d43;
  background: #fbfcfe;
  font-size: 14px;
}
.ontology-form-field > select { height: 42px; }
.ontology-form-field > textarea { min-height: 148px; resize: vertical; line-height: 1.65; }
.ontology-form-field > input:focus,
.ontology-form-field > select:focus,
.ontology-form-field > textarea:focus {
  border-color: #7fa5f5;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(49,111,246,.08);
}
.ontology-form-field > small { color: #8490a3; font-size: 12px; line-height: 1.55; }

@media (max-width: 900px) {
  .modal-box.ontology-editor-modal { width: calc(100vw - 24px); }
  .ontology-editor { grid-template-columns: 1fr; gap: 16px; }
  .ontology-editor-summary { display: grid; grid-template-columns: auto minmax(0,1fr); align-content: start; gap: 0 16px; }
  .ontology-editor-summary .ontology-editor-icon { grid-row: 1 / 4; }
  .ontology-editor-summary h3,
  .ontology-editor-summary code { grid-column: 2; }
  .ontology-editor-summary dl,
  .ontology-editor-summary p,
  .ontology-editor-summary .btn { grid-column: 1 / -1; }
  .modal-box.ontology-type-modal { width: calc(100vw - 24px); }
  .ontology-type-modal .modal-body { padding: 20px; }
}
.ontology-schema-grid, .ontology-source-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; }
.ontology-schema-grid article, .ontology-source-cards article { padding: 19px; }
.ontology-schema-grid header, .ontology-source-cards header { display: flex; align-items: center; gap: 11px; }
.ontology-schema-grid header > span, .ontology-source-cards header > b { margin-left: auto; color: #5e7292; }
.ontology-schema-grid p { min-height: 42px; color: #748197; }
.ontology-schema-grid dl div, .ontology-source-cards dl div { display: flex; justify-content: space-between; gap: 14px; }
.ontology-master-note { display: flex; align-items: flex-start; gap: 18px; }
.ontology-master-note i { color: #2ca67d; font-size: 32px; }
.ontology-catalog-panel { margin-top: 18px; padding: 0; overflow: hidden; }
.ontology-catalog-panel > header { padding: 17px 20px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid #e4eaf2; background: #fbfcfe; }
.ontology-catalog-panel > header h2, .ontology-catalog-panel > header p { margin: 0; }
.ontology-catalog-panel > header p { margin-top: 4px; color: #75839a; }
.ontology-catalog-grid { padding: 16px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.ontology-catalog-grid article { padding: 12px; display: grid; grid-template-columns: 58px minmax(0,1fr) auto; align-items: center; gap: 12px; border: 1px solid #e3e9f2; border-radius: 12px; background: #fff; }
.ontology-catalog-image { width: 58px; height: 58px; display: grid; place-items: center; overflow: hidden; border-radius: 10px; color: #8290a4; background: #f2f5f9; }
.ontology-catalog-image img { width: 100%; height: 100%; object-fit: cover; }
.ontology-catalog-grid strong, .ontology-catalog-grid small { display: block; }
.ontology-catalog-grid small { margin-top: 4px; color: #7b889b; }
.ontology-catalog-grid p { margin: 6px 0 0; overflow: hidden; color: #7b889b; text-overflow: ellipsis; white-space: nowrap; }
.ontology-graph-board { padding: 18px; display: grid; grid-template-columns: .85fr 1.15fr; gap: 18px; }
.ontology-node-cloud { align-content: start; display: flex; flex-wrap: wrap; gap: 8px; }
.ontology-node { padding: 8px 11px; border: 1px solid #dce5f2; border-radius: 999px; color: #35547e; background: #f5f8fd; }
.ontology-edge-list { display: grid; align-content: start; gap: 7px; }
.ontology-edge-list > div { padding: 10px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; border-radius: 9px; background: #f7f9fc; }
.ontology-edge-list span { color: #4976c9; text-align: center; }
.quality-list { display: grid; gap: 9px; }
.quality-list article { padding: 13px; display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; border: 1px solid #e5eaf2; border-radius: 10px; }
.quality-list article > span { font-weight: 800; text-transform: uppercase; }
.quality-list .severity-error > span { color: #d33e49; }
.quality-list .severity-warning > span { color: #ba7512; }
.empty-block { padding: 40px; color: #8490a3; text-align: center; }
@media(max-width:1200px){.ontology-stat-grid,.ontology-type-grid{grid-template-columns:repeat(2,1fr)}.ontology-entity-grid,.ontology-schema-grid,.ontology-source-cards{grid-template-columns:repeat(2,1fr)}}

/* Reusable enterprise data hub */
.hub-stat-grid { margin-bottom: 18px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.hub-stat-grid article { padding: 20px; border: 1px solid #e1e8f2; border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(34,63,104,.05); }
.hub-stat-grid span,.hub-stat-grid small { display: block; color: #77859a; }
.hub-stat-grid strong { display: block; margin: 8px 0 4px; color: #172943; font-size: 29px; }
.hub-inbox-layout { padding: 0; display: grid; grid-template-columns: minmax(0,1fr) 330px; overflow: hidden; }
.hub-inbox-form { padding: 24px; }
.hub-ingestion-mode { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:16px 0; }
.hub-ingestion-mode button { display:flex; align-items:center; gap:12px; min-height:68px; padding:12px 16px; border:1px solid #dce5f2; border-radius:12px; background:#fff; color:#30415d; text-align:left; cursor:pointer; }
.hub-ingestion-mode button i { display:grid; place-items:center; width:38px; height:38px; border-radius:10px; background:#f0f5ff; color:#3478f6; font-size:19px; }
.hub-ingestion-mode button span { display:flex; flex-direction:column; gap:3px; font-weight:700; }
.hub-ingestion-mode button small { color:#8a97aa; font-size:12px; font-weight:400; }
.hub-ingestion-mode button.active { border-color:#3478f6; box-shadow:0 0 0 3px rgba(52,120,246,.1); }
.hub-file-drop { position:relative; display:flex; min-height:210px; padding:28px; border:1px dashed #aebed3; border-radius:14px; background:#f8fbff; align-items:center; justify-content:center; flex-direction:column; gap:9px; cursor:pointer; text-align:center; }
.hub-file-drop:hover { border-color:#3478f6; background:#f3f7ff; }
.hub-file-drop > i { font-size:38px; color:#3478f6; }
.hub-file-drop > span { max-width:520px; color:#7b8799; line-height:1.6; }
.hub-file-drop input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.hub-file-summary { display:flex; gap:12px; align-items:center; margin-top:12px; padding:12px 14px; border-radius:10px; background:#edf7f1; color:#246642; }
.hub-file-summary i { font-size:22px; }
.hub-file-summary div { display:flex; flex-direction:column; gap:2px; }
.hub-file-summary span { color:#6d8175; font-size:12px; }
.hub-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hub-form-grid label,.hub-form-field { display: grid; gap: 7px; color: #31445f; font-weight: 700; }
.hub-form-field { margin-top: 16px; }
.hub-form-grid input,.hub-form-grid select,.hub-form-field input,.hub-form-field textarea { width: 100%; min-width: 0; padding: 11px 12px; border: 1px solid #dbe3ed; border-radius: 9px; color: #253953; background: #fff; font: inherit; font-weight: 400; }
.hub-form-field textarea { min-height: 220px; resize: vertical; line-height: 1.7; }
.hub-risk-note { margin-top: 16px; padding: 13px 15px; display: flex; gap: 12px; border: 1px solid #cfe4dc; border-radius: 11px; color: #315d50; background: #f4fbf8; }
.hub-risk-note i { font-size: 22px; }
.hub-risk-note p { margin: 4px 0 0; color: #668178; line-height: 1.55; }
.hub-form-actions { margin-top: 18px; display: flex; gap: 10px; }
.hub-process-rail { padding: 24px; border-left: 1px solid #e3e9f1; background: #f7f9fc; }
.hub-process-rail h3 { margin: 0 0 18px; color: #243954; }
.hub-process-rail > div { position: relative; padding: 0 0 20px; display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 11px; }
.hub-process-rail > div:not(:last-child)::after { content: ''; position: absolute; left: 15px; top: 34px; bottom: 3px; width: 2px; background: #dce5f1; }
.hub-process-rail b { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: #316ff6; }
.hub-process-rail strong,.hub-process-rail small { display: block; }
.hub-process-rail small { margin-top: 4px; color: #7a879a; line-height: 1.5; }
.hub-list-card { padding: 0; overflow: hidden; }
.hub-list-head { padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e5ebf3; background: #fbfcfe; color: #718097; }
.hub-job-list { display: grid; }
.hub-job-list > article { padding: 17px 19px; display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; gap: 14px; border-bottom: 1px solid #edf0f5; }
.hub-job-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: #316ff6; background: #edf3ff; font-size: 20px; }
.hub-job-list header { display: flex; align-items: center; gap: 10px; }
.hub-job-list p,.hub-job-list small { margin: 5px 0 0; color: #77859a; }
.hub-job-actions { display: flex; gap: 8px; }
.hub-status,.hub-risk { padding: 4px 8px; border-radius: 999px; color: #5d6e85; background: #eef1f5; font-size: 12px; font-weight: 700; }
.status-committed,.status-validated,.risk-low { color: #147457; background: #e9f8f2; }
.status-review_pending,.status-candidate_ready,.risk-medium { color: #8a5a00; background: #fff5df; }
.status-validation_failed,.status-review_rejected,.risk-high { color: #b33a32; background: #fff0ee; }
.hub-review-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.hub-review-grid article { padding: 19px; }
.hub-review-grid article > header { display: flex; justify-content: space-between; align-items: center; }
.hub-review-grid h2 { margin: 14px 0 5px; font-size: 18px; }
.hub-review-grid article > p { color: #7d899b; }
.hub-review-grid dl { margin: 15px 0; max-height: 230px; overflow: auto; }
.hub-review-grid dl div,.hub-candidate-list dl div { padding: 8px 0; display: grid; grid-template-columns: minmax(90px,.45fr) minmax(0,1fr); gap: 12px; border-bottom: 1px solid #edf0f4; }
.hub-review-grid dt,.hub-candidate-list dt { color: #77859a; }
.hub-review-grid dd,.hub-candidate-list dd { margin: 0; overflow-wrap: anywhere; }
.hub-review-grid footer { display: flex; justify-content: flex-end; gap: 8px; }
.hub-two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hub-list-card .panel-title { padding: 18px; border-bottom: 1px solid #e6ebf2; }
.hub-simple-list > div { padding: 13px 17px; display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 11px; border-bottom: 1px solid #edf0f5; }
.hub-simple-list i { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: #316ff6; background: #edf3ff; }
.hub-simple-list strong,.hub-simple-list small { display: block; }
.hub-simple-list small { margin-top: 3px; color: #7e8b9e; }
.modal-box.hub-candidate-modal { width: min(900px,calc(100vw - 40px)); }
.hub-candidate-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.hub-candidate-list article { padding: 16px; border: 1px solid #e1e7ef; border-radius: 12px; }
.hub-candidate-list header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hub-candidate-list p,.hub-candidate-list footer { color: #7a879a; }
.hub-step-list { display: grid; gap: 10px; }
.hub-step-list article { display: grid; grid-template-columns: 76px minmax(0,1fr); align-items: start; gap: 14px; padding: 14px; border: 1px solid #e4e9f1; border-radius: 12px; background: #fff; }
.hub-step-list article > div { display: grid; gap: 5px; min-width: 0; }
.hub-step-list small { color: #7a879a; }
.hub-step-list .inline-error { margin: 4px 0 0; overflow-wrap: anywhere; }
.hub-step-modal .modal-card { width: min(680px, calc(100vw - 32px)); }
@media(max-width:1200px){.hub-stat-grid{grid-template-columns:repeat(2,1fr)}.hub-inbox-layout{grid-template-columns:1fr}.hub-process-rail{border-left:0;border-top:1px solid #e3e9f1}.hub-review-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.hub-stat-grid,.hub-form-grid,.hub-review-grid,.hub-two-column,.hub-candidate-list,.hub-entity-form-grid,.hub-processing-summary,.hub-capability-grid{grid-template-columns:1fr}.hub-job-list>article{grid-template-columns:44px minmax(0,1fr)}.hub-job-actions{grid-column:1/-1}.hub-inbox-form,.hub-process-rail{padding:18px}.hub-entity-lineage article{grid-template-columns:28px minmax(0,1fr)}.hub-entity-lineage article time{grid-column:2}}

@media (max-width: 820px) {
  .login-wrap { grid-template-columns: 1fr; }
  .login-visual { display: none; }
  .content { padding: 20px; }
  .env-chip, .who { display: none; }
}

/* 2026 后台重构：原版效率型双层导航 */
:root {
  --ink: #253047;
  --muted: #8a94a8;
  --line: #e8ebf0;
  --canvas: #f4f6f9;
  --surface: #fff;
  --primary: #3478f6;
  --primary-soft: #edf4ff;
  --sidebar: #fff;
  --rail: #152846;
  --radius: 4px;
  --shadow: none;
}
body { min-width: 960px; font-size: 13px; background: var(--canvas); }
.admin { background: var(--canvas); }
.module-rail { width: 64px; flex: 0 0 64px; display: flex; flex-direction: column; color: #fff; background: var(--rail); }
.rail-logo { height: 58px; display: grid; place-items: center; border-bottom: 1px solid rgba(255,255,255,.1); }
.rail-logo span { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.45); border-radius: 8px; color: #fff; background: #3478f6; font-size: 15px; font-weight: 800; box-shadow: 0 0 0 3px rgba(255,255,255,.08); }
.module-rail nav { flex: 1; padding: 8px 0; overflow-y: auto; }
.module-item { width: 64px; height: 57px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 0; color: rgba(255,255,255,.62); background: transparent; font-size: 11px; transition: .15s; }
.module-item i { font-size: 18px; }
.module-item:hover { color: #fff; background: rgba(255,255,255,.06); }
.module-item.active { color: #fff; background: var(--primary); }
.rail-collapse { width: 64px; height: 48px; flex: 0 0 48px; border: 0; border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.6); background: transparent; font-size: 17px; }
.sidebar { width: 190px; flex: 0 0 190px; color: var(--ink); background: #fff; border-right: 1px solid var(--line); transition: width .18s, flex-basis .18s; }
.side-logo { height: 58px; padding: 0 16px; justify-content: space-between; border-bottom: 1px solid var(--line); }
.side-logo b { color: #23304a; font-size: 15px; }
.side-logo small { margin-top: 1px; color: #a0a8b7; font-size: 9px; letter-spacing: .4px; }
.side-toggle { width: 28px; height: 28px; border: 0; color: #8490a4; background: transparent; font-size: 18px; }
.module-title { padding: 22px 20px 10px; color: #26334b; font-size: 15px; font-weight: 700; }
.sidebar nav { padding: 3px 12px 16px; }
.nav-group { margin: 0; }
.nav-item { min-height: 38px; margin: 2px 0; padding: 0 10px; justify-content: space-between; border-radius: 3px; color: #68758a; font-size: 12px; }
.nav-item i { color: transparent; font-size: 10px; }
.nav-item:hover { color: var(--primary); background: #f5f8fd; }
.nav-item.active { color: var(--primary); background: var(--primary-soft); box-shadow: inset 3px 0 0 var(--primary); font-weight: 650; }
.nav-item.active i { color: var(--primary); }
.side-foot { height: 50px; margin: 0 16px; color: #8792a4; }
.subnav-collapsed .sidebar { width: 0; flex-basis: 0; overflow: hidden; border: 0; }
.main { background: var(--canvas); }
.topbar { height: 58px; flex: 0 0 58px; padding: 0 22px; background: #fff; border-bottom: 1px solid var(--line); backdrop-filter: none; }
.top-context, .top-right { display: flex; align-items: center; }
.top-context { gap: 14px; }
.platform-chip { color: #5e6b80; font-size: 12px; }
.platform-chip i { margin-right: 5px; color: #65758d; }
.top-divider { width: 1px; height: 18px; background: var(--line); }
.crumb { margin: 0; color: #2d3950; font-size: 13px; font-weight: 600; }
.top-icon-btn, .account-toggle { width: 32px; height: 32px; position: relative; border: 0; color: #667389; background: transparent; }
.top-icon-btn:hover, .account-toggle:hover { color: var(--primary); background: #f4f7fb; }
.notice-dot { width: 6px; height: 6px; position: absolute; top: 5px; right: 5px; border: 1px solid #fff; border-radius: 50%; background: var(--red); }
.avatar-mini { width: 30px; height: 30px; border-radius: 50%; background: #3478f6; box-shadow: none; }
.logout-btn { border: 0; color: #778398; }
.content { padding: 18px 20px 40px; }
.page-heading { min-height: 50px; margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.page-heading h1 { color: #253047; font-size: 18px; font-weight: 700; }
.page-heading p { margin-top: 5px; color: #929cad; font-size: 11px; }
.page-heading-actions { display: flex; align-items: center; gap: 8px; }
.update-time { margin-right: 5px; color: #929cad; font-size: 11px; }
.btn { min-height: 32px; padding: 7px 13px; border-radius: 3px; font-size: 12px; font-weight: 500; }
.btn:hover { transform: none; }
.btn.primary { box-shadow: none; }
.btn.text { color: #758198; background: transparent; }
.page-tabs { min-height: 46px; padding: 0 16px; display: flex; align-items: flex-end; gap: 25px; border: 1px solid var(--line); border-bottom: 0; background: #fff; }
.page-tabs button { height: 45px; position: relative; border: 0; color: #667389; background: transparent; font-size: 12px; }
.page-tabs button span { margin-left: 4px; color: #9aa4b4; }
.page-tabs button.active { color: var(--primary); font-weight: 650; }
.page-tabs button.active::after { content: ""; height: 2px; position: absolute; right: 0; bottom: 0; left: 0; background: var(--primary); }
.toolbar { min-height: 54px; margin: 0; padding: 10px 14px; border-radius: 0; border-color: var(--line); background: #fff; }
.toolbar input, .toolbar select { height: 32px; min-width: 150px; border-radius: 3px; background: #fff; }
.toolbar input:focus, .toolbar select:focus { box-shadow: 0 0 0 2px rgba(52,120,246,.08); }
.aftersale-toolbar { justify-content: flex-start; }
.aftersale-toolbar input { flex: 0 1 340px; width: 340px; min-width: 240px; }
.table-card { overflow-x: auto; border: 1px solid var(--line); border-top: 0; background: #fff; }
.table-utilities { min-height: 46px; padding: 0 14px; display: flex; align-items: center; gap: 18px; border-bottom: 1px solid var(--line); color: #7d889b; font-size: 11px; }
.table-utilities .btn { margin-left: auto; }
table { font-size: 12px; }
th, td { height: 50px; padding: 10px 13px; }
th { position: static; color: #7d889b; background: #f8f9fb; font-size: 11px; font-weight: 550; letter-spacing: 0; text-transform: none; }
th:first-child, th:last-child { border-radius: 0; }
.goods-cell { min-width: 250px; display: grid; grid-template-columns: 16px 44px 1fr; align-items: center; gap: 10px; }
.goods-cell img { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 3px; object-fit: cover; background: #f5f6f8; }
.goods-cell b, .goods-cell small { display: block; }
.goods-cell b { max-width: 240px; overflow: hidden; color: #364157; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
.goods-cell small { margin-top: 4px; color: #9aa4b4; font-size: 10px; }
.icon-action { width: 28px; height: 28px; margin-right: 5px; border: 1px solid #dce6f8; border-radius: 50%; color: var(--primary); background: #f7faff; }
.icon-action.danger { border-color: #f0dbda; color: var(--red) !important; background: #fff9f8; }
.pagination { min-height: 52px; padding: 10px 14px; display: flex; align-items: center; justify-content: flex-end; gap: 6px; border-top: 1px solid var(--line); background: #fff; }
.pagination button { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 3px; color: #708097; background: #fff; }
.pagination button.active { color: #fff; border-color: var(--primary); background: var(--primary); }
.pagination button:disabled { color: #c7cdd6; background: #fafbfc; }

/* 仪表盘 */
.overview-panel, .workbench-panel, .chart-panel, .ranking-panel, .quick-panel, .notice-panel, .health-panel { border: 1px solid var(--line); background: #fff; }
.overview-panel { margin-bottom: 14px; }
.section-heading { min-height: 46px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.section-heading strong, .section-heading span { display: block; }
.section-heading strong { color: #2c3850; font-size: 13px; }
.section-heading div > span { margin-top: 2px; color: #9aa4b4; font-size: 9px; }
.text-btn { border: 0; color: var(--primary); background: transparent; font-size: 11px; }
.metric-grid { display: grid; grid-template-columns: repeat(5, 1fr); }
.metric { min-height: 110px; padding: 22px 20px; border-right: 1px solid var(--line); }
.metric:last-child { border-right: 0; }
.metric > span, .metric small { display: block; color: #8994a7; font-size: 10px; }
.metric strong { margin: 12px 0 9px; display: block; color: #202c43; font-size: 25px; font-weight: 500; }
.metric small { color: #a1a9b7; }
.warn-text { color: #e58a2b !important; }
.dashboard-grid { display: grid; grid-template-columns: minmax(650px, 1fr) 330px; gap: 14px; align-items: start; }
.dashboard-main, .dashboard-aside { display: grid; gap: 14px; }
.todo-grid { padding: 15px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.todo-grid button { min-height: 64px; padding: 10px; display: flex; align-items: center; gap: 10px; border: 1px solid #edf0f4; border-radius: 3px; color: #667389; background: #fbfcfe; text-align: left; }
.todo-grid button:hover { border-color: #cdddf9; background: #f5f9ff; }
.todo-grid i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 4px; color: var(--primary); background: var(--primary-soft); font-size: 15px; }
.todo-grid b, .todo-grid small { display: block; }
.todo-grid b { color: #253047; font-size: 17px; }
.todo-grid small { margin-top: 2px; font-size: 10px; }
.segment-tabs { display: flex; }
.segment-tabs button { height: 26px; padding: 0 10px; border: 1px solid var(--line); border-right: 0; color: #7b879a; background: #fff; font-size: 10px; }
.segment-tabs button:last-child { border-right: 1px solid var(--line); }
.segment-tabs button.active { color: var(--primary); border-color: #a9c4f7; background: #f2f7ff; }
.chart-summary { padding: 14px 18px 0; display: flex; gap: 28px; color: #8a95a8; font-size: 10px; }
.chart-summary b { margin-left: 5px; color: #2d3950; font-size: 15px; }
.sales-chart { height: 190px; padding: 18px 25px 15px; display: flex; align-items: stretch; justify-content: space-around; gap: 15px; }
.chart-column { min-width: 34px; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; color: #929cad; font-size: 9px; }
.chart-bar-wrap { width: 100%; flex: 1; display: flex; align-items: flex-end; border-bottom: 1px solid #e7ebf1; background: repeating-linear-gradient(to top, transparent 0, transparent 32px, #f0f2f5 33px); }
.chart-bar { width: 18px; min-height: 8px; margin: 0 auto; border-radius: 2px 2px 0 0; background: var(--primary); opacity: .86; }
.chart-empty { margin: auto; color: #a0a8b6; }
.rank-num { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: #7d889a; background: #f1f3f6; font-size: 10px; }
.rank-num.top { color: #fff; background: var(--primary); }
.welcome-panel { min-height: 142px; padding: 25px 20px; display: flex; align-items: center; justify-content: space-between; color: #fff; background: #3478f6 url("/admin/welcome-operator.webp") center/cover no-repeat; overflow: hidden; }
.welcome-copy { position: relative; z-index: 1; }
.welcome-copy span, .welcome-copy strong, .welcome-copy small { display: block; }
.welcome-copy span { color: rgba(255,255,255,.82); font-size: 12px; }
.welcome-copy strong { margin-top: 8px; font-size: 17px; }
.welcome-copy small { margin-top: 15px; color: rgba(255,255,255,.7); font-size: 10px; }
.welcome-mark { display: none; }
.quick-grid { padding: 17px 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 8px; }
.quick-grid button { display: flex; flex-direction: column; align-items: center; gap: 7px; border: 0; color: #68758a; background: transparent; font-size: 10px; }
.quick-grid i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 5px; color: var(--primary); background: var(--primary-soft); font-size: 16px; }
.quick-grid button:hover { color: var(--primary); }
.notice-count { width: 19px; height: 19px; display: grid !important; place-items: center; border-radius: 50%; color: #fff; background: #f25f5c; font-size: 9px; }
.notice-list { padding: 10px 16px 14px; list-style: none; }
.notice-list li { min-height: 34px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; border-bottom: 1px dashed #eef0f3; color: #606d82; font-size: 10px; }
.notice-list time { color: #a0a8b5; }
.health-panel { padding: 14px 16px; }
.health-panel span, .health-panel small { display: block; }
.health-panel span { color: #456053; font-size: 11px; }
.health-panel i { width: 7px; height: 7px; margin-right: 6px; display: inline-block; border-radius: 50%; background: var(--green); }
.health-panel small { margin-top: 7px; color: #9aa4b4; font-size: 9px; }

/* 订单 */
.order-list { display: grid; gap: 10px; }
.order-card { border: 1px solid var(--line); background: #fff; }
.order-card > header { min-height: 48px; padding: 5px 14px; display: flex; align-items: center; gap: 12px; color: #8a95a7; background: #f8f9fb; font-size: 10px; }
.order-card > header strong { color: #4d5a70; font-size: 11px; }
.order-user { margin-left: auto; }
.order-brand { padding: 3px 8px; border-radius: 3px; color: #215fbf; background: #edf4ff; font-weight: 650; white-space: nowrap; }
.order-brand.is-missing { color: #8a6d1d; background: #fff7db; }
.order-account-owner { width: 230px; min-width: 230px; margin-left: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; color: #536075; line-height: 1.25; }
.order-account-owner b { max-width: 100%; overflow: hidden; color: #344054; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.order-account-owner small { color: #7b8798; font-size: 9px; user-select: text; }
.order-status { min-width: 62px; color: #e1852d; text-align: right; }
.order-body { min-height: 110px; display: grid; grid-template-columns: minmax(340px, 1.8fr) minmax(170px, .8fr) 130px 120px; }
.order-body > div { padding: 13px; border-right: 1px solid var(--line); }
.order-body > div:last-child { border-right: 0; }
.order-products { display: grid; gap: 9px; }
.order-product { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 10px; }
.order-product img { width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 3px; object-fit: cover; }
.order-product b, .order-product small { display: block; }
.order-product b { color: #344056; font-size: 11px; font-weight: 550; }
.order-product small { margin-top: 4px; color: #9aa4b5; font-size: 9px; }
.order-product > span { color: #68758a; font-size: 10px; }
.order-recipient, .order-amount, .order-actions { display: flex; flex-direction: column; justify-content: center; gap: 5px; }
.order-recipient b { font-size: 11px; }
.order-recipient span, .order-recipient small, .order-amount small, .order-amount span { color: #929cad; font-size: 9px; line-height: 1.5; }
.order-recipient .order-delivery-sf { color: var(--red); font-weight: 700; }
.order-amount { text-align: center; }
.order-amount strong { color: #e2584d; font-size: 16px; }
.order-actions .btn { width: 90px; align-self: center; }
.order-actions small { color: #8a95a8; text-align: center; font-size: 9px; }
.order-more { width: 100%; padding: 7px 9px; border: 1px solid #e4e9f1; border-radius: 6px; color: #3569b8; background: #f8fafc; font-size: 10px; cursor: pointer; }
.order-more:hover { border-color: #bfd2ee; background: #f1f6fd; }
.order-detail-products { display: grid; gap: 8px; }
.order-detail-product { display: grid; grid-template-columns: minmax(160px,1fr) minmax(120px,.8fr) auto; gap: 12px; align-items: center; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: #fafcff; }
.order-detail-product span { color: #667085; }
@media (max-width: 620px) {
  .order-detail-product { grid-template-columns: 1fr; gap: 4px; }
}
.order-notes { padding: 8px 14px; display: flex; flex-wrap: wrap; gap: 18px; border-top: 1px solid var(--line); color: #667085; background: #fffcf4; font-size: 10px; }
.order-notes span { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.danger-text { color: #b42318 !important; }
.technical-history { margin: 12px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #f8faff; color: var(--muted); }
.technical-history summary { cursor: pointer; color: var(--text); font-weight: 600; }
.technical-history > div { margin-top: 8px; line-height: 1.6; overflow-wrap: anywhere; }
.health-panel.is-degraded { border-color: #f1c2bd; background: #fff7f6; }
.health-panel.is-degraded span { color: #b42318; }

/* 设置 */
.settings-shell { min-height: 680px; display: grid; grid-template-columns: 230px minmax(620px, 980px); align-items: start; gap: 16px; }
.settings-nav { padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.settings-nav-group + .settings-nav-group { margin-top: 18px; padding-top: 14px; border-top: 1px solid #eef1f5; }
.settings-nav-group > span { padding: 0 10px 7px; display: block; color: #9aa4b4; font-size: 10px; font-weight: 650; letter-spacing: .06em; }
.settings-nav-group button { width: 100%; min-height: 54px; margin: 2px 0; padding: 8px 9px; display: grid; grid-template-columns: 30px 1fr 14px; align-items: center; gap: 8px; border: 0; border-radius: 5px; color: #6a768a; background: transparent; text-align: left; }
.settings-nav-group button:hover { color: #2e5fa9; background: #f6f9fe; }
.settings-nav-group button.active { color: #2365cc; background: #edf4ff; box-shadow: inset 3px 0 #3478f6; }
.settings-nav-group button > i:first-child { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 5px; color: #738096; background: #f2f4f7; font-size: 14px; }
.settings-nav-group button.active > i:first-child { color: #2165cf; background: #dfeaff; }
.settings-nav-group button > i:last-child { color: #b0b8c5; font-size: 10px; }
.settings-nav-group button span, .settings-nav-group button strong, .settings-nav-group button small { min-width: 0; display: block; }
.settings-nav-group button strong { color: #3d495d; font-size: 12px; }
.settings-nav-group button.active strong { color: #205fbe; }
.settings-nav-group button small { margin-top: 3px; overflow: hidden; color: #9aa4b4; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.settings-workspace { overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: #fff; box-shadow: 0 4px 14px rgba(41,55,78,.04); }
.settings-workspace-head { min-height: 82px; padding: 16px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg,#fff,#fbfcfe); }
.settings-workspace-head > div > span { color: #8f99aa; font-size: 9px; font-weight: 600; }
.settings-workspace-head h2 { margin-top: 4px; color: #263349; font-size: 17px; }
.settings-workspace-head p { margin-top: 4px; color: #929cad; font-size: 10px; }
.settings-version { padding: 5px 9px; border-radius: 12px; color: #66758d; background: #f1f4f8; font-size: 9px; white-space: nowrap; }
.settings-card { min-height: 480px; padding: 0 24px 30px; background: #fff; }
.settings-group-title { margin: 0 -24px 22px; padding: 21px 24px 13px; border-bottom: 1px solid var(--line); }
.settings-group-title strong, .settings-group-title span { display: block; }
.settings-group-title strong { color: #2d3950; font-size: 14px; }
.settings-group-title span { margin-top: 5px; color: #8995a8; font-size: 10px; }
.settings-card > .form-row { max-width: 720px; display: grid; grid-template-columns: 160px minmax(260px,1fr); align-items: start; gap: 18px; }
.settings-card > .form-row > label { padding-top: 9px; color: #4f5d72; text-align: right; font-weight: 550; }
.settings-card .theme-picker { grid-column: 2; }
.settings-card .settings-section { max-width: none; margin-top: 28px; }
.conditional-fields.is-hidden { display: none; }
.settings-tertiary { margin: 0 -24px; padding: 14px 24px; display: flex; align-items: center; gap: 18px; border-bottom: 1px solid var(--line); background: #fafbfc; }
.settings-tertiary > span { color: #788499; font-size: 10px; font-weight: 650; white-space: nowrap; }
.settings-tertiary-tabs { display: flex; flex-wrap: wrap; gap: 7px; }
.settings-tertiary-tabs button { min-height: 30px; padding: 6px 12px; border: 1px solid #dfe5ee; border-radius: 4px; color: #667389; background: #fff; font-size: 10px; }
.settings-tertiary-tabs button:hover { color: #2867c6; border-color: #bbcff0; }
.settings-tertiary-tabs button.active { color: #fff; border-color: #3478f6; background: #3478f6; }
.settings-savebar { min-height: 62px; position: sticky; bottom: 0; z-index: 3; padding: 11px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); background: rgba(250,251,252,.96); backdrop-filter: blur(8px); }
.settings-savebar .btn { min-width: 124px; }
.settings-savebar .btn:disabled { cursor: wait; opacity: .72; }
.settings-save-state { display: flex; align-items: center; gap: 7px; color: #7d899b; font-size: 10px; }
.settings-save-state[data-kind="dirty"] { color: #9b6a16; }
.settings-save-state[data-kind="saving"] { color: #2969c8; }
.settings-save-state[data-kind="saved"] { color: #24855a; }
.settings-save-state[data-kind="error"] { color: #b42318; }

@media (max-width: 1280px) {
  .dashboard-grid { grid-template-columns: 1fr 290px; }
  .todo-grid { grid-template-columns: repeat(3, 1fr); }
  .metric { padding-right: 12px; padding-left: 12px; }
  .order-body { grid-template-columns: minmax(300px, 1.7fr) minmax(150px, .8fr) 120px 110px; }
  .layout-editor-shell { grid-template-columns: minmax(470px,1fr) 340px; }
  #layoutPreviewMount { padding: 18px 10px; }
  .settings-shell { grid-template-columns: 210px minmax(560px,1fr); }
}

@media (max-width: 980px) {
  .layout-editor-shell { grid-template-columns: 1fr; }
  .layout-preview-panel { position: static; }
  .layout-preview-panel { order: -1; }
  #layoutPreviewMount { min-height: 500px; }
  .integration-list { grid-template-columns: 1fr; }
  .settings-shell { grid-template-columns: 1fr; }
  .settings-nav { overflow-x: auto; display: flex; gap: 10px; }
  .settings-nav-group { min-width: max-content; display: flex; align-items: center; gap: 4px; }
  .settings-nav-group + .settings-nav-group { margin: 0; padding: 0 0 0 10px; border-top: 0; border-left: 1px solid #eef1f5; }
  .settings-nav-group > span { display: none; }
  .settings-nav-group button { width: auto; min-width: 120px; grid-template-columns: 25px 1fr; }
  .settings-nav-group button > i:last-child, .settings-nav-group button small { display: none; }
}

@media (max-width: 680px) {
  .layout-row { flex-wrap: wrap; }
  .layout-copy { min-width: 180px; }
  .switch-control { margin-left: 64px; }
  .layout-row-actions { margin-left: auto; }
  .phone-preview { width: min(310px,82vw); }
}
.access-gate-card {
  margin-bottom: 18px;
  padding: 18px 20px;
  border: 1px solid #dfe5ee;
  border-radius: 12px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.access-gate-card.is-open {
  border-color: #c9ddff;
  background: #f5f9ff;
}
.access-gate-card.is-closed {
  border-color: #e3e6eb;
  background: #fafbfc;
}
.access-gate-copy {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}
.access-gate-copy strong {
  display: block;
  margin-bottom: 5px;
  color: #1f2d3d;
  font-size: 16px;
}
.access-gate-copy p {
  margin: 0;
  color: #667085;
  line-height: 1.6;
}
.access-gate-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: #e9f2ff;
  color: #3478dc;
  font-size: 20px;
}
.access-gate-card.is-closed .access-gate-icon {
  background: #eef0f3;
  color: #7a8494;
}
@media (max-width: 760px) {
  .access-gate-card {
    align-items: stretch;
    flex-direction: column;
  }
}
.nav-image-editor { min-width: 210px; display: flex; align-items: center; gap: 7px; }
.nav-image-preview {
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  overflow: hidden;
  background: #f4f7fb;
  color: var(--muted);
}
.nav-image-preview img { width: 100%; height: 100%; object-fit: cover; }

/* 2026-07 typography accessibility pass.
 * Compact phone preview canvases intentionally keep their own scaled type.
 */
body { font-size: 14px; }
.module-item,
.nav-item,
.platform-chip,
.crumb,
.who { font-size: 13px; }
.page-heading h1 { font-size: 22px; }
.page-heading p,
.update-time,
.toolbar-note,
.table-utilities { font-size: 12px; }
.page-tabs button { font-size: 13px; }
.toolbar input,
.toolbar select,
.btn,
table { font-size: 14px; }
th { font-size: 13px; }
.btn.small,
.text-btn { font-size: 13px; }
.form-row > label { font-size: 13px; }
.form-row input,
.form-row textarea,
.form-row select { font-size: 14px; }
.hint,
.goods-cell small,
.badge,
.status-off,
.payment-readiness span { font-size: 12px; }

.order-card > header {
  min-height: 54px;
  padding: 7px 14px;
  font-size: 12px;
}
.order-card > header strong { font-size: 14px; }
.order-brand { font-size: 12px; }
.order-account-owner b {
  font-size: 14px;
  line-height: 1.4;
}
.order-account-owner small {
  font-size: 12px;
  line-height: 1.4;
}
.order-status { font-size: 13px; }
.order-body { min-height: 126px; }
.order-body > div { padding: 16px 14px; }
.order-product b,
.order-recipient b { font-size: 14px; }
.order-product small,
.order-product > span,
.order-recipient span,
.order-recipient small,
.order-amount small,
.order-amount span {
  font-size: 12px;
  line-height: 1.55;
}
.order-amount strong { font-size: 19px; }
.sales-permission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.sales-permission-card {
  min-height: 250px;
  max-height: 310px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e3eaf4;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(31, 67, 120, .06);
}

.sales-permission-card.is-disabled {
  opacity: .68;
}

.sales-permission-card header,
.sales-permission-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sales-permission-card header strong,
.sales-permission-card header small {
  display: block;
}

.sales-permission-card header strong {
  font-size: 17px;
}

.sales-permission-card header small {
  margin-top: 3px;
  color: #8290a5;
}

.sales-permission-card > p {
  min-height: 42px;
  margin: 0;
  color: #64748b;
}

.sales-permission-scopes {
  flex: 1;
  min-height: 82px;
  overflow: hidden;
  display: flex;
  align-content: flex-start;
  flex-wrap: wrap;
  gap: 7px;
}

.sales-permission-scopes span,
.sales-permission-scopes b {
  max-width: 100%;
  padding: 5px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #315f9f;
  background: #edf5ff;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
}

.sales-permission-editor-modal {
  width: 720px;
  overflow: visible;
}

.sales-permission-editor-modal .modal-body {
  max-height: calc(88vh - 144px);
  overflow-y: auto;
}

.sales-scope-field .field-help {
  margin: -2px 0 9px;
  color: #8491a4;
  font-size: 12px;
  line-height: 1.5;
}

.scope-multiselect {
  position: relative;
}

.scope-multiselect-trigger {
  width: 100%;
  min-height: 54px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #dce5f1;
  border-radius: 10px;
  color: #34445c;
  background: #fbfcfe;
  cursor: pointer;
  text-align: left;
}

.scope-multiselect-trigger:hover,
.scope-multiselect.is-open .scope-multiselect-trigger {
  border-color: #7da8fb;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(49, 111, 246, .08);
}

.scope-multiselect-trigger > span,
.scope-multiselect-trigger b,
.scope-multiselect-trigger small {
  display: block;
}

.scope-multiselect-trigger b {
  font-size: 14px;
}

.scope-multiselect-trigger small {
  margin-top: 2px;
  color: #8a96a8;
  font-size: 11px;
  font-weight: 500;
}

.scope-multiselect-trigger > i {
  color: #7d8ba0;
  transition: transform .18s ease;
}

.scope-multiselect.is-open .scope-multiselect-trigger > i {
  transform: rotate(180deg);
}

.scope-selected-chips {
  min-height: 34px;
  padding-top: 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.scope-selected-chips button,
.scope-selected-chips > span:not(.scope-selection-empty) {
  max-width: 180px;
  padding: 4px 7px;
  overflow: hidden;
  border: 0;
  border-radius: 6px;
  color: #2b64b6;
  background: #edf5ff;
  font-size: 11px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scope-selected-chips button {
  cursor: pointer;
}

.scope-selected-chips button i {
  margin-left: 4px;
}

.scope-selection-empty {
  color: #9aa5b4;
  font-size: 12px;
}

.scope-multiselect-panel {
  margin-top: 7px;
  border: 1px solid #dce5f1;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 14px 38px rgba(31, 67, 120, .12);
}

.scope-picker-toolbar,
.scope-picker-actions {
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid #edf1f6;
}

.scope-search {
  min-width: 0;
  flex: 1;
  position: relative;
}

.form-row .scope-search input {
  padding-left: 35px;
  background: #f7f9fc;
}

.scope-search > i {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 12px;
  color: #8a97aa;
  transform: translateY(-50%);
}

.scope-picker-actions {
  padding-block: 7px;
  color: #7b8798;
  background: #fafbfd;
  font-size: 11px;
}

.scope-picker-actions > div {
  display: flex;
  align-items: center;
}

.scope-selected-only.is-active {
  color: var(--primary);
  border-color: #9cbcf8;
  background: #edf5ff;
}

.scope-option-list {
  max-height: 238px;
  padding: 7px;
  overflow-y: auto;
}

.scope-option {
  min-height: 46px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border-radius: 8px;
  cursor: pointer;
}

.scope-option:hover {
  background: #f3f7fd;
}

.scope-option:has(input:checked) {
  background: #edf5ff;
}

.scope-option input {
  width: 16px;
  height: 16px;
}

.scope-option span,
.scope-option b,
.scope-option small {
  min-width: 0;
  display: block;
}

.scope-option b {
  overflow: hidden;
  color: #35445a;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scope-option small {
  margin-top: 2px;
  overflow: hidden;
  color: #8995a7;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scope-option[hidden] {
  display: none;
}

.scope-empty {
  padding: 30px 12px;
}

@media (max-width: 720px) {
  .sales-permission-editor-modal {
    width: 94%;
  }
  .scope-picker-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .scope-selected-only {
    width: 100%;
  }
}

.province-shipping-rule {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr)) auto;
  gap: 12px;
  padding: 14px;
  margin-bottom: 12px;
  border: 1px solid #dce6f3;
  border-radius: 10px;
}

.shipping-province-picker {
  grid-column: 1 / -1;
}

.shipping-province-picker .shipping-province-grid {
  max-height: 150px;
  margin-top: 8px;
  overflow: auto;
}

.shipping-rule-summary {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 7px;
}

.shipping-rule-summary span {
  color: #64748b;
}

.permission-state {
  display: block;
  margin-top: 4px;
  color: #3b82f6;
}

.permission-state.is-warning,
.approval-warning {
  color: #b45309;
}

.approval-warning {
  padding: 12px;
  margin-bottom: 14px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
}

.approval-confirm {
  padding: 12px;
  margin-top: 12px;
  background: #f4f8ff;
  border-radius: 8px;
}

.modal-box.commerce-permission-modal {
  width: min(620px, calc(100vw - 32px));
  max-width: none;
  overflow-x: hidden;
}
.commerce-permission-modal .modal-body { padding: 22px 26px 8px; }
.commerce-permission-form { display: grid; gap: 17px; }
.commerce-permission-form .form-row { min-width: 0; margin: 0; }
.permission-choice { min-width: 0; padding: 0; border: 0; }
.permission-choice legend,
.commerce-permission-form .form-row > label {
  margin-bottom: 8px;
  color: #3d4b61;
  font-size: 13px;
  font-weight: 700;
}
.permission-choice-list {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
}
.permission-option {
  min-width: 0;
  padding: 13px 14px;
  display: grid;
  grid-template-columns: 18px minmax(0,1fr);
  align-items: start;
  gap: 9px;
  border: 1px solid #dce4ef;
  border-radius: 11px;
  background: #fbfcfe;
  cursor: pointer;
}
.permission-option:has(input:checked) {
  border-color: #7da5f8;
  background: #f2f6ff;
  box-shadow: 0 0 0 3px rgba(49,111,246,.08);
}
.permission-option input { width: 16px; height: 16px; margin-top: 2px; }
.permission-option span { min-width: 0; }
.permission-option strong,.permission-option small { display: block; }
.permission-option strong { color: #25334a; font-size: 13px; line-height: 1.4; }
.permission-option small {
  margin-top: 4px;
  color: #7b8799;
  font-size: 11px;
  line-height: 1.5;
}
.commerce-permission-grid {
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 9px;
}
.commerce-permission-grid .selection-card {
  min-width: 0;
  min-height: 42px;
  padding: 9px 11px;
  display: grid;
  grid-template-columns: 18px minmax(0,1fr);
  gap: 8px;
  border: 1px solid #e1e7f0;
  border-radius: 9px;
  background: #fff;
}
.commerce-permission-grid .selection-card input { width: 16px; height: 16px; }
.commerce-permission-grid .selection-card span {
  min-width: 0;
  overflow: hidden;
  color: #39475c;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.permission-tag-section { transition: opacity .16s ease; }
.permission-tag-section.is-disabled { opacity: .48; }
.approval-confirm {
  min-height: 46px;
  margin-top: 0;
  display: grid;
  grid-template-columns: 18px minmax(0,1fr);
  align-items: center;
  gap: 9px;
  color: #3e4d64;
  font-size: 13px;
  line-height: 1.5;
}
.approval-confirm input { width: 16px; height: 16px; }
@media (max-width: 620px) {
  .commerce-permission-modal .modal-body { padding: 18px 16px 6px; }
  .permission-choice-list,.commerce-permission-grid { grid-template-columns: 1fr; }
  .weekday-selection-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* Distribution workbench: keep read-only summaries compact and reserve height
   only for real content instead of inheriting the settings page minimum. */
.distribution-copy-panel {
  min-height: 0;
  margin: 14px 0;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #e1e7f0;
  border-radius: 10px;
  background: #fff;
}
.distribution-copy-panel.is-empty { background: #fbfcfe; }
.distribution-copy-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #3478f6;
  background: #edf4ff;
  font-size: 15px;
}
.distribution-copy-content { min-width: 0; flex: 1; }
.distribution-copy-content strong,
.distribution-copy-content p { display: block; }
.distribution-copy-content strong { color: #2d3950; font-size: 13px; }
.distribution-copy-content p {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
  color: #778398;
  font-size: 12px;
  line-height: 1.55;
}
.distribution-copy-panel > .btn { flex: 0 0 auto; }
.distribution-member-toolbar { margin-top: 0; }

.modal-box.distribution-downlines-modal {
  width: min(930px, calc(100vw - 32px));
  max-width: none;
  max-height: min(88vh, 860px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.distribution-downlines-modal .modal-title,
.distribution-downlines-modal .modal-foot { flex: 0 0 auto; }
.distribution-downlines-modal .modal-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 18px 24px 12px;
  overflow: hidden;
}
.distribution-downlines-modal .hint { flex: 0 0 auto; }
.distribution-downlines-scroll {
  min-height: 0;
  max-height: calc(min(88vh, 860px) - 180px);
  overflow: auto;
  scrollbar-gutter: stable;
  scrollbar-color: #aab9d0 #f1f4f8;
}
.distribution-downlines-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.distribution-downlines-scroll::-webkit-scrollbar-track { background: #f1f4f8; }
.distribution-downlines-scroll::-webkit-scrollbar-thumb { border: 2px solid #f1f4f8; border-radius: 8px; background: #aab9d0; }
.distribution-downlines-scroll table { min-width: 1080px; }
.distribution-downlines-scroll td small { display: block; }
.distribution-downlines-slider {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 0 2px;
  color: #65758d;
  font-size: 12px;
  white-space: nowrap;
}
.distribution-downlines-range {
  flex: 1 1 auto;
  min-width: 0;
  height: 22px;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: ew-resize;
}
.distribution-downlines-range::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: #dbe5f3; }
.distribution-downlines-range::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  margin-top: -6px;
  appearance: none;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #2671d9;
  box-shadow: 0 1px 5px rgba(26, 70, 128, .25);
}
.distribution-downlines-range::-moz-range-track { height: 6px; border-radius: 6px; background: #dbe5f3; }
.distribution-downlines-range::-moz-range-thumb { width: 13px; height: 13px; border: 3px solid #fff; border-radius: 50%; background: #2671d9; }
.distribution-downlines-range:focus-visible { outline: 2px solid #2671d9; outline-offset: 3px; }
.distribution-downlines-range:disabled { opacity: .45; cursor: default; }

.modal-box.distribution-user-modal {
  width: min(700px, calc(100vw - 32px));
  max-width: none;
  max-height: min(88vh, 760px);
  overflow: hidden;
}
.distribution-user-modal .modal-body {
  max-height: calc(min(88vh, 760px) - 132px);
  padding: 20px 24px;
  overflow: auto;
}
.distribution-user-layout { display: grid; gap: 16px; }
.distribution-user-summary {
  padding: 18px;
  border: 1px solid #dfe6f0;
  border-radius: 12px;
  background: linear-gradient(180deg, #fff, #fbfcff);
}
.distribution-user-summary-head {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e8edf4;
}
.distribution-user-avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #3478f6;
  background: #edf4ff;
  font-size: 17px;
}
.distribution-user-summary-head span,
.distribution-user-summary-head strong { display: block; }
.distribution-user-summary-head > div:nth-child(2) > span {
  margin-bottom: 3px;
  color: #8490a3;
  font-size: 11px;
}
.distribution-user-summary-head > div:nth-child(2) > strong {
  overflow-wrap: anywhere;
  color: #243149;
  font-size: 14px;
}
.distribution-user-facts {
  padding-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;
}
.distribution-user-facts > div { min-width: 0; }
.distribution-user-facts span,
.distribution-user-facts strong,
.distribution-user-facts small,
.distribution-user-facts code { display: block; }
.distribution-user-facts span {
  margin-bottom: 5px;
  color: #8490a3;
  font-size: 11px;
}
.distribution-user-facts strong,
.distribution-user-facts code {
  overflow-wrap: anywhere;
  color: #2d3950;
  font-size: 13px;
}
.distribution-user-facts small { margin-top: 3px; color: #8b96a8; }
.distribution-user-facts code {
  width: fit-content;
  max-width: 100%;
  padding: 3px 7px;
  border-radius: 6px;
  background: #f0f4fa;
}
.distribution-rebind-panel {
  padding: 18px;
  border: 1px solid #dfe6f0;
  border-radius: 12px;
  background: #fff;
}
.distribution-rebind-head {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.distribution-rebind-head strong,
.distribution-rebind-head p { display: block; }
.distribution-rebind-head strong { color: #29364c; font-size: 14px; }
.distribution-rebind-head p { margin: 4px 0 0; color: #8490a3; font-size: 11px; }
.distribution-rebind-head > i { color: #3478f6; font-size: 20px; }
.distribution-rebind-fields { display: grid; gap: 14px; }
.distribution-rebind-fields .form-row { margin: 0; }
.distribution-rebind-fields textarea { min-height: 76px; }
.distribution-risk-note {
  margin-top: 14px;
  padding: 10px 12px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border-radius: 8px;
  color: #64748b;
  background: #f5f8fc;
  font-size: 12px;
  line-height: 1.55;
}
.distribution-risk-note i { margin-top: 2px; color: #3478f6; }

@media (max-width: 620px) {
  .distribution-copy-panel { align-items: flex-start; flex-wrap: wrap; }
  .distribution-copy-panel > .btn { margin-left: 46px; }
  .distribution-user-modal .modal-body { padding: 16px; }
  .distribution-user-summary,
  .distribution-rebind-panel { padding: 15px; }
  .distribution-user-facts { grid-template-columns: 1fr; gap: 12px; }
}

.refund-breakdown {
  display: flex;
  justify-content: space-between;
  padding: 12px;
  margin-bottom: 12px;
  background: #f4f8ff;
  border-radius: 8px;
}

.proxy-aftersale-items {
  display: grid;
  gap: 10px;
  width: 100%;
}

.proxy-aftersale-item-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 84px;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e5eaf2;
  border-radius: 10px;
  background: #f8fafc;
}

.proxy-aftersale-item-row span {
  min-width: 0;
}

.proxy-aftersale-item-row b,
.proxy-aftersale-item-row small {
  display: block;
}

.proxy-aftersale-item-row small {
  margin-top: 4px;
  color: #78859a;
}

@media (max-width: 1100px) {
  .province-shipping-rule {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
  }
}
.shipping-template-modal { width: min(920px,94vw); }
.shipping-template-modal .modal-body { padding: 20px 26px; }
.shipping-template-modal .province-shipping-rule { display: block; padding: 18px; border-color: #d9e3f0; border-radius: 14px; background: #fbfdff; }
.shipping-rule-head,.param-template-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.shipping-rule-head { margin-bottom: 14px; }
.shipping-rule-head > div { min-width: 0; }
.shipping-rule-head strong,.shipping-rule-head span { display: block; }
.shipping-rule-head strong { color: #243249; font-size: 14px; }
.shipping-rule-selection { margin-top: 4px; overflow: hidden; color: #64748b; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.shipping-province-picker { margin-bottom: 16px; border: 1px solid #dce5f1; border-radius: 10px; background: #fff; }
.shipping-province-picker summary { padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; color: #344258; font-weight: 680; }
.shipping-province-picker summary small { color: #8290a3; font-size: 11px; font-weight: 500; }
.shipping-province-picker .shipping-province-grid { max-height: none; margin: 0; padding: 8px 14px 14px; grid-template-columns: repeat(6,minmax(0,1fr)); }
.shipping-province-picker .selection-card { min-height: 36px; padding: 7px 8px; gap: 6px; border-radius: 7px; font-size: 12px; }
.shipping-province-picker .selection-card input:disabled + span { color: #aeb7c4; }
.shipping-province-tools { padding: 10px 14px 4px; display: flex; gap: 14px; border-top: 1px solid #eef2f7; }
.shipping-charge-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.shipping-rule-field input { width: 100%; }
.shipping-rule-field small { min-height: 32px; margin-top: 6px; display: block; color: #8290a3; font-size: 10px; line-height: 1.45; }
.param-template-modal { width: min(900px,94vw); }
.param-template-head { margin-bottom: 10px; color: #64748b; font-size: 12px; }
.structured-editor-modal { width: min(920px,94vw); }
.structured-editor-modal .modal-body { padding: 22px 26px 8px; }
.structured-editor-head { margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.structured-editor-head > div { min-width: 0; display: grid; gap: 4px; }
.structured-editor-head label { color: #17243a; font-size: 14px; font-weight: 760; }
.structured-editor-head span { color: #718096; font-size: 12px; line-height: 1.55; }
.structured-editor-list { display: grid; gap: 12px; }
.structure-card { overflow: hidden; border: 1px solid #dce6f3; border-radius: 14px; background: linear-gradient(180deg,#fff 0%,#fbfdff 100%); box-shadow: 0 4px 14px rgba(33,67,113,.045); }
.structure-card-head { min-height: 48px; padding: 9px 12px 9px 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid #e7edf5; background: #f7faff; }
.structure-card-head > div:first-child { min-width: 0; display: flex; align-items: center; gap: 10px; }
.structure-card-head strong { overflow: hidden; color: #1b2d49; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.structure-index { flex: none; padding: 4px 8px; border-radius: 999px; color: #1f67d5; background: #eaf3ff; font-size: 11px; font-weight: 760; }
.structure-actions { flex: none; display: flex; gap: 4px; }
.structure-grid { padding: 16px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.structure-grid label,.structure-label { min-width: 0; display: grid; gap: 7px; color: #53647a; font-size: 12px; font-weight: 680; }
.structure-grid label > span,.structure-label > span { color: #53647a; font-size: 12px; font-weight: 680; }
.structure-grid input,.structure-grid select,.structure-label input { width: 100%; }
.structure-switch { align-content: end; grid-template-columns: auto 1fr !important; grid-template-rows: auto auto; column-gap: 8px !important; }
.structure-switch > span { grid-column: 1 / -1; }
.structure-switch input { width: 16px; height: 16px; align-self: center; }
.structure-switch b { color: #40546f; font-size: 13px; font-weight: 580; }
.order-field-options { grid-column: 1 / -1; }
.is-hidden { display: none !important; }
.structure-empty { min-height: 116px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px; border: 1px dashed #cfdbea; border-radius: 14px; color: #8290a4; background: #fbfdff; text-align: center; }
.structure-empty i { color: #8badde; font-size: 26px; }
.structure-empty strong { color: #53647a; font-size: 14px; }
.structure-empty span { font-size: 12px; }
.structure-label { padding: 16px 16px 4px; }
.structure-value-head { padding: 12px 16px 9px; display: flex; align-items: center; justify-content: space-between; color: #53647a; font-size: 12px; font-weight: 680; }
.structure-value-list { padding: 0 16px 16px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.structure-value-row { min-width: 0; padding: 4px 5px 4px 9px; display: grid; grid-template-columns: 18px minmax(0,1fr) 32px; align-items: center; gap: 6px; border: 1px solid #dfe7f1; border-radius: 10px; background: #fff; }
.structure-value-row > i { color: #9aa8ba; }
.structure-value-row input { min-width: 0; height: 34px; padding: 6px 3px; border: 0; box-shadow: none; }
.structure-value-row input:focus { box-shadow: none; }
.import-file-picker { padding: 14px; display: grid; grid-template-columns: minmax(220px,.7fr) minmax(280px,1.3fr); align-items: center; gap: 16px; border: 1px solid #dce6f3; border-radius: 12px; background: #f8fbff; }
.import-file-picker > div { display: grid; gap: 4px; }
.import-file-picker strong { color: #233957; font-size: 13px; }
.import-file-picker span { color: #74849a; font-size: 12px; line-height: 1.5; }
.import-preview { overflow: hidden; border: 1px solid #dce6f3; border-radius: 12px; background: #fff; }
.import-preview .structure-empty { min-height: 180px; border: 0; border-radius: 0; }
.import-preview-meta { padding: 11px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #e5ecf5; background: #f7faff; }
.import-preview-meta span { color: #257044; font-size: 12px; font-weight: 720; }
.import-preview-meta span i { margin-right: 6px; }
.import-preview-meta small { color: #7c899b; font-size: 11px; }
.import-preview .table-scroll { max-height: 310px; overflow: auto; }
.import-preview table { min-width: 720px; table-layout: fixed; }
.import-preview th:first-child,.import-preview td:first-child { width: 50px; color: #718096; text-align: center; }
.import-preview td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.param-template-row { margin-bottom: 10px; padding: 12px; display: grid; grid-template-columns: 22px minmax(150px,.9fr) minmax(220px,1.5fr) minmax(100px,.55fr) auto; align-items: end; gap: 10px; border: 1px solid #dce5f1; border-radius: 10px; background: #fbfdff; }
.param-template-row label > span { margin-bottom: 6px; display: block; color: #526074; font-size: 11px; font-weight: 680; }
.param-template-handle { align-self: center; color: #a0aabd; font-size: 18px; }
.param-template-actions { display: flex; gap: 4px; }
.param-template-actions .icon-btn { width: 34px; height: 38px; border: 1px solid #dbe4ef; border-radius: 8px; color: #607087; background: #fff; }
.param-template-actions .icon-btn.danger { color: #d9485f; }
@media (max-width:820px) {
  .shipping-province-picker .shipping-province-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .shipping-charge-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .param-template-row { grid-template-columns: 18px 1fr 1fr; }
  .param-template-row label:nth-of-type(2),.param-template-actions { grid-column: 2 / -1; }
  .structured-editor-modal .modal-body { padding: 18px 16px 6px; }
  .structured-editor-head,.import-preview-meta { align-items: flex-start; flex-direction: column; }
  .structure-grid,.structure-value-list,.import-file-picker { grid-template-columns: 1fr; }
  .structure-card-head { padding-left: 12px; }
}

.fitment-tabs {
  margin-bottom: 16px;
}

.fitment-summary-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: -4px 0 12px;
}

.fitment-summary-bar span {
  padding: 7px 11px;
  color: #667389;
  border: 1px solid #dce5f2;
  border-radius: 8px;
  background: #f8fbff;
  font-size: 12px;
}

.fitment-summary-bar b {
  color: #276ce8;
  font-size: 14px;
}

.fitment-search-grid,
.fitment-pager-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.fitment-search-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  background: #fff;
}

.fitment-search-grid label {
  display: grid;
  gap: 6px;
  color: #536178;
  font-size: 12px;
}

.fitment-search-grid input {
  width: 100%;
  min-width: 0;
}

.fitment-pager-grid {
  margin-top: 16px;
}

.fitment-pager-grid > div {
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  background: #fff;
  overflow: hidden;
}

.fitment-pager-grid > div > b {
  display: block;
  padding: 10px 14px 0;
  color: #536178;
  font-size: 12px;
}

.fitment-pager-grid .wide {
  grid-column: 1 / -1;
}

#fitment_relation_model,
#goods_fitment_model {
  min-height: 220px;
  margin-top: 8px;
}

.fitment-relation-modal { width: min(760px,94vw); }
.fitment-relation-modal .modal-body { padding: 20px 26px 8px; }
.fitment-smart-selector { display: grid; gap: 8px; }
.fitment-smart-search-row { position: relative; display: flex; align-items: center; }
.fitment-smart-search-row > i { position: absolute; left: 13px; color: #7d899b; pointer-events: none; }
.fitment-smart-search-row input { width: 100%; padding-left: 38px; padding-right: 42px; }
.fitment-smart-clear { position: absolute; right: 7px; display: grid; width: 30px; height: 30px; place-items: center; border: 0; border-radius: 8px; color: #7d899b; background: transparent; cursor: pointer; }
.fitment-smart-clear:hover { color: #245fc8; background: #edf4ff; }
.fitment-smart-selected { min-height: 62px; }
.fitment-smart-placeholder,.fitment-smart-selected-card { display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 10px 12px; border: 1px dashed #d6dfec; border-radius: 11px; background: #f9fbfe; }
.fitment-smart-placeholder { color: #7c899c; }
.fitment-smart-placeholder i { color: #3975df; font-size: 20px; }
.fitment-smart-selected-card { border-style: solid; border-color: #cfe0fb; background: #f4f8ff; }
.fitment-smart-selected-card.warning { border-color: #ecd39e; background: #fff9eb; }
.fitment-smart-selected-card > div:nth-child(2) { min-width: 0; flex: 1; }
.fitment-smart-selected-card small,.fitment-smart-selected-card strong,.fitment-smart-selected-card span { display: block; }
.fitment-smart-selected-card small { color: #6680a8; font-size: 11px; }
.fitment-smart-selected-card strong { margin: 3px 0; overflow: hidden; color: #20324f; text-overflow: ellipsis; white-space: nowrap; }
.fitment-smart-selected-card span { color: #748198; font-size: 11px; }
.fitment-smart-thumb { display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; overflow: hidden; border-radius: 9px; color: #316dd7; background: #e7f0ff; }
.fitment-smart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fitment-smart-status { min-height: 18px; color: #758298; font-size: 11px; }
.fitment-smart-status .link { padding: 0 3px; border: 0; background: transparent; }
.fitment-smart-results { display: grid; max-height: 280px; overflow: auto; border: 1px solid #e0e7f1; border-radius: 11px; background: #fff; }
.fitment-smart-results:empty { display: none; }
.fitment-smart-option { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 66px; padding: 10px 12px; border: 0; border-bottom: 1px solid #edf1f6; color: inherit; background: #fff; text-align: left; cursor: pointer; }
.fitment-smart-option:last-child { border-bottom: 0; }
.fitment-smart-option:hover,.fitment-smart-option.active { background: #f0f6ff; box-shadow: inset 3px 0 #3476e5; }
.fitment-smart-option-main { min-width: 0; flex: 1; }
.fitment-smart-option-main strong,.fitment-smart-option-main small,.fitment-smart-option-main em { display: block; }
.fitment-smart-option-main strong { overflow: hidden; color: #22334e; font-style: normal; text-overflow: ellipsis; white-space: pre-line; }
.fitment-smart-option-main small { margin-top: 3px; color: #66758c; }
.fitment-smart-option-main em { margin-top: 3px; color: #8a96a7; font-size: 11px; font-style: normal; }
.fitment-smart-option mark { padding: 0 1px; color: #174fae; background: #dceaff; }
.fitment-smart-badge { flex: 0 0 auto; padding: 4px 7px; border-radius: 7px; color: #68768b; background: #edf0f4; font-size: 10px; }
.fitment-smart-badge.status-active { color: #167044; background: #e5f7ed; }
.fitment-smart-badge.status-draft { color: #8a6300; background: #fff1cc; }
.fitment-smart-badge.status-disabled { color: #a14c2b; background: #ffe9df; }
.fitment-smart-more { justify-self: center; }
.fitment-smart-more[hidden] { display: none; }
.fitment-smart-selector.loading .fitment-smart-search-row { opacity: .72; }

@media (max-width: 640px) {
  .fitment-relation-modal .modal-body { padding: 18px 15px 6px; }
  .fitment-smart-results { max-height: 240px; }
  .fitment-smart-option { align-items: flex-start; }
}

.fitment-library-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.fitment-panel.wide {
  grid-column: 1 / -1;
}

.fitment-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.fitment-panel-head h3,
.fitment-panel-head p {
  margin: 0;
}

.fitment-panel-head h3 small {
  margin-left: 6px;
  color: #7d899c;
  font-size: 12px;
  font-weight: 500;
}

.fitment-panel-pagination {
  margin: 0 -16px 12px;
  border-top: 1px solid #edf1f6;
  border-bottom: 1px solid #edf1f6;
}

.fitment-panel-pagination .pagination {
  min-height: 46px;
  padding: 7px 14px;
  border-top: 0;
  justify-content: flex-start;
}

.fitment-pagination-bar {
  min-height: 48px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: #fff;
}
.fitment-pagination-bar .pagination {
  min-width: 0;
  flex: 1 1 auto;
  padding-right: 0;
  padding-left: 0;
}
.fitment-page-size {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #738097;
  font-size: 12px;
  white-space: nowrap;
}
.fitment-page-size select {
  width: 92px;
  min-width: 92px;
  height: 34px;
  min-height: 34px;
  padding: 0 28px 0 10px;
  border-radius: 8px;
  font-size: 12px;
}

.fitment-panel-head p {
  margin-top: 5px;
  color: #778399;
  font-size: 12px;
}

.fitment-list {
  display: grid;
  gap: 8px;
  max-height: 420px;
  overflow: auto;
}

.fitment-list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid #e4eaf2;
  border-radius: 9px;
  background: #fbfdff;
}

.fitment-list article strong,
.fitment-list article small {
  display: block;
}

.fitment-list article small {
  margin-top: 3px;
  color: #7d899c;
}

.fitment-table-wrap {
  max-height: 560px;
  overflow: auto;
}

.fitment-note-cell {
  max-width: 280px;
  white-space: normal;
}

.common-fitment-brand-list {
  display: grid;
  gap: 10px;
}

.common-fitment-brand-list article {
  display: grid;
  grid-template-columns: 42px minmax(220px, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid #e4eaf2;
  border-radius: 10px;
  background: #fbfdff;
}

.common-fitment-brand-rank {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #eaf2ff;
  color: #2868df;
  font-weight: 700;
  line-height: 34px;
  text-align: center;
}

.common-fitment-brand-list strong,
.common-fitment-brand-list small { display: block; }
.common-fitment-brand-list small { margin-top: 4px; color: #7b8799; }
.common-fitment-brand-actions { display: flex; align-items: center; gap: 4px; }

.common-fitment-recommendation { margin-top: 14px; }
.common-fitment-recommendation p { margin: 6px 0 14px; color: #778399; }
.common-fitment-recommendation > div { display: flex; flex-wrap: wrap; gap: 8px; }
.common-fitment-recommendation span {
  padding: 7px 10px;
  border-radius: 999px;
  background: #f0f5fc;
  color: #40506a;
}
.common-fitment-recommendation small { color: #2868df; }

.common-fitment-brand-options {
  max-height: 460px;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  overflow: auto;
  border: 1px solid #e1e7f0;
  border-radius: 10px;
  background: #f8fafc;
}
.common-fitment-brand-options label {
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #e4eaf2;
  border-radius: 8px;
  background: #fff;
}
.common-fitment-brand-options input { flex: 0 0 auto; }
.common-fitment-brand-options span,
.common-fitment-brand-options strong,
.common-fitment-brand-options small { display: block; }
.common-fitment-brand-options span { min-width: 0; }
.common-fitment-brand-options strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.common-fitment-brand-options small { margin-top: 3px; color: #7b8799; }

.goods-fitment-list {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.goods-fitment-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.4fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fbfdff;
}

.goods-fitment-row strong,
.goods-fitment-row small,
.goods-fitment-row span {
  display: block;
}

.goods-fitment-row small {
  margin-top: 4px;
  color: #7b8799;
}

@media (max-width: 980px) {
  .common-fitment-brand-list article { grid-template-columns: 42px 1fr; }
  .common-fitment-brand-actions { grid-column: 2; }
  .common-fitment-brand-options { grid-template-columns: 1fr; }
  .goods-fitment-row {
    grid-template-columns: 1fr;
  }
}

.import-error-list {
  max-height: 420px;
  overflow: auto;
}

.import-error-list p {
  padding: 8px 10px;
  margin: 0 0 6px;
  color: #b42318;
  border-radius: 7px;
  background: #fff1f0;
}

@media (max-width: 980px) {
  .fitment-search-grid,
  .fitment-pager-grid {
    grid-template-columns: 1fr;
  }

  .fitment-pager-grid .wide {
    grid-column: auto;
  }

  .fitment-library-grid {
    grid-template-columns: 1fr;
  }

  .fitment-panel.wide {
    grid-column: auto;
  }
}

/* Final accessibility floor: keep operational text readable after legacy theme rules. */
.fitment-workbench,
.fitment-workbench > *,
.fitment-data-card,
.fitment-library-single { min-width: 0; max-width: 100%; }
.fitment-hero { align-items: center; gap: 18px; }
.fitment-hero .page-heading-actions { flex-wrap: wrap; justify-content: flex-end; }
.fitment-library-switcher {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
  padding: 8px;
  border: 1px solid #dfe7f2;
  border-radius: 13px;
  background: #f5f8fc;
}
.fitment-library-switcher button {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 10px 15px;
  color: #617087;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  text-align: left;
}
.fitment-library-switcher button > i { font-size: 20px; }
.fitment-library-switcher button span,
.fitment-library-switcher button b,
.fitment-library-switcher button small { display: block; }
.fitment-library-switcher button small { margin-top: 3px; color: #8793a6; font-size: 12px; }
.fitment-library-switcher button.active {
  color: #2063d6;
  border-color: #d7e4fa;
  background: #fff;
  box-shadow: 0 4px 14px rgba(38,91,174,.09);
}
.fitment-library-single > .fitment-panel { width: 100%; }
.fitment-filter-bar,
.fitment-filter-bar.relation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.fitment-filter-bar.compact { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fitment-filter-bar input {
  flex: 1 1 320px;
  width: min(100%,420px);
  max-width: 420px;
}
.fitment-filter-bar select {
  flex: 0 1 190px;
  width: 190px;
  max-width: 220px;
}
.fitment-filter-bar select:last-of-type {
  flex-basis: 128px;
  width: 128px;
  max-width: 140px;
}
.fitment-filter-actions {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 8px;
  width: auto;
  min-width: 0;
}
.fitment-filter-actions .btn {
  width: auto;
  min-width: 72px;
  min-height: 38px;
  padding-right: 16px;
  padding-left: 16px;
  justify-content: center;
}
.fitment-filter-actions .btn.text { min-width: 56px; }
.fitment-data-card { overflow: hidden; }
.fitment-table-wrap,
.fitment-table-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  max-height: none;
  overflow-x: auto;
  overflow-y: visible;
}
.fitment-table-wrap table { min-width: 880px; table-layout: fixed; }
.fitment-table-card table { min-width: 1040px; table-layout: fixed; }
.fitment-import-table table { min-width: 900px; }
.fitment-table-wrap th,
.fitment-table-wrap td,
.fitment-table-card th,
.fitment-table-card td {
  padding-top: 11px;
  padding-bottom: 11px;
  overflow-wrap: anywhere;
  white-space: normal;
}
.fitment-panel-pagination { margin-right: 0; margin-left: 0; }
.fitment-panel-pagination .pagination { flex-wrap: wrap; }
.fitment-list.polished { overflow: visible; }
.fitment-list.polished article { min-height: 58px; }
.fitment-section-heading { border-radius: 14px 14px 0 0; }
#fitment-common-panel .page-heading,
#fitment-import-panel,
#fitment-relation-panel { min-width: 0; max-width: 100%; }
@media (max-width:1180px) {
  .fitment-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width:720px) {
  .fitment-pagination-bar { align-items: flex-start; flex-direction: column; padding: 8px 10px; }
  .fitment-page-size { align-self: flex-end; }
}
@media (max-width:820px) {
  .fitment-hero { align-items: flex-start; }
  .fitment-hero .page-heading-actions { justify-content: flex-start; }
  .fitment-library-switcher,
  .fitment-tabs-v3 { grid-template-columns: 1fr; }
  .fitment-filter-bar input,
  .fitment-filter-bar select,
  .fitment-filter-bar select:last-of-type {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
  }
  .fitment-filter-actions { justify-self: start; }
}
.module-item { width: 96px; min-height: 68px; padding: 7px 5px; font-size: 13px; line-height: 1.25; }
.side-logo small, .nav-group-title, .nav-section-label, .side-foot { font-size: 12px; }
.nav-item { min-height: 42px; padding: 8px 12px; font-size: 14px; }
.top-kicker, .settings-workspace-head > div > span, .section-heading div > span { font-size: 12px; }
.page-heading p, .settings-workspace-head p, .update-time, .toolbar-note, .hint { font-size: 13px; }
.platform-chip, .who, .logout-btn, .btn, .btn.small, .page-tabs button,
.settings-nav-group > span, .settings-nav-group button, .segment-tabs button { font-size: 13px; }
.toolbar input, .toolbar select, .form-row input, .form-row select,
.form-row textarea, .form-row > label { font-size: 14px; }
table, th, td, .table-utilities { font-size: 13px; }
.goods-cell small, .order-card > header, .order-card > header strong,
.order-account-owner b, .order-account-owner small, .order-product b,
.order-product small, .order-product > span, .order-recipient b,
.order-recipient span, .order-recipient small, .order-amount small,
.order-amount span, .order-actions small, .order-notes { font-size: 12px; }
.metric > span, .metric small, .todo-grid small, .chart-summary,
.chart-column, .welcome-copy small, .quick-grid button, .notice-list li,
.health-panel small { font-size: 12px; }
.settings-workspace-head { min-height: 96px; }
.settings-workspace-head h2 { font-size: 20px; }
.settings-nav-group button { min-height: 42px; line-height: 1.35; }
.modal-box input, .modal-box select, .modal-box textarea,
.modal-box label, .modal-box p, .modal-box small { font-size: 14px; }
.modal-box textarea { line-height: 1.65; }
@media(max-width:1100px){.ontology-catalog-grid{grid-template-columns:1fr}.module-item{width:86px}}

/* Goods editor workbench: modular editing, bounded density and stable wide-screen layout. */
.editor-page {
  width: min(100%, 1540px);
  margin: 0 auto;
  padding-bottom: 82px;
}
.editor-page-head {
  min-height: 76px;
  padding: 14px 18px;
  top: -30px;
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(30, 52, 82, .05);
}
.editor-title-row { min-width: 0; }
.editor-title-row > div { min-width: 0; }
.editor-title-row h1 { font-size: 21px; letter-spacing: -.2px; }
.editor-title-row p { max-width: 720px; overflow: hidden; color: #7b8799; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.editor-head-actions { flex: 0 0 auto; }
.editor-save-state { padding: 6px 10px; border-radius: 999px; background: #f1f4f8; font-size: 12px; }
.editor-layout {
  grid-template-columns: 224px minmax(0, 1fr) 210px;
  gap: 16px;
}
.editor-section-nav,
.editor-summary,
.editor-form {
  border: 1px solid #e2e8f1;
  border-radius: 14px;
  box-shadow: 0 5px 20px rgba(31, 53, 84, .045);
}
.editor-section-nav {
  top: 64px;
  gap: 4px;
  padding: 10px;
  overflow: hidden;
}
.editor-nav-heading { padding: 10px 11px 12px; border-bottom: 1px solid #edf0f5; }
.editor-nav-heading span,
.editor-nav-heading small { display: block; }
.editor-nav-heading span { color: #26364f; font-size: 14px; font-weight: 760; }
.editor-nav-heading small { margin-top: 4px; color: #8b96a7; font-size: 11px; line-height: 1.45; }
.editor-section-nav button {
  min-width: 0;
  min-height: 54px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 8px;
  border-radius: 9px;
}
.editor-section-nav button > i:first-child {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #71809a;
  background: #f1f4f8;
  font-size: 14px;
}
.editor-section-nav button > i:last-child { color: #b1bac8; font-size: 10px; }
.editor-section-nav button span,
.editor-section-nav button b,
.editor-section-nav button small { min-width: 0; display: block; }
.editor-section-nav button b { color: inherit; font-size: 13px; line-height: 1.35; }
.editor-section-nav button small { margin-top: 2px; overflow: hidden; color: #97a1b0; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.editor-section-nav button.active {
  color: #2464d4;
  background: #edf4ff;
  box-shadow: inset 3px 0 0 #3478f6;
}
.editor-section-nav button.active > i:first-child { color: #fff; background: #3478f6; }
.editor-section-nav button.active > i:last-child { color: #3478f6; }
.editor-section-nav button.active small { color: #6f87ac; }
.editor-form {
  min-width: 0;
  min-height: 650px;
  padding: 0;
  overflow: hidden;
  scroll-margin-top: 86px;
  background: transparent;
}
.goods-editor-section { display: none; min-width: 0; background: #fff; }
.goods-editor-section.active { display: block; animation: goods-editor-enter .16s ease-out; }
@keyframes goods-editor-enter { from { opacity: .5; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.goods-editor-section-head {
  min-height: 82px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 13px;
  border-bottom: 1px solid #e8edf4;
  background: linear-gradient(135deg, #fbfdff, #f4f8ff);
}
.goods-editor-section-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #2d6fde;
  background: #e8f1ff;
  font-size: 18px;
}
.goods-editor-section-head h2 { margin: 0; color: #1d2b41; font-size: 18px; }
.goods-editor-section-head p { margin-top: 4px; color: #7c889b; font-size: 12px; }
.goods-editor-section-body { padding: 22px; }
.goods-editor-section-body > .form-row {
  margin: 0;
  padding: 17px 0;
  border-bottom: 1px solid #edf0f4;
}
.goods-editor-section-body > .form-row:first-child { padding-top: 0; }
.goods-editor-section-body > .form-row:last-child { padding-bottom: 0; border-bottom: 0; }
.goods-editor-section-body > .form-row > label { margin-bottom: 9px; color: #35445b; font-size: 13px; }
.goods-editor-section-body .inline-fields { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.goods-editor-section-body input,
.goods-editor-section-body select { min-height: 40px; }
.goods-editor-section-body textarea { max-width: 100%; }
.editor-summary {
  top: 64px;
  padding: 17px;
  overflow: hidden;
  background: #fff;
}
.editor-summary-kicker { color: #8290a4; font-size: 10px; font-weight: 760; letter-spacing: .8px; }
.editor-summary strong { margin-top: 5px; font-size: 14px; }
.editor-completeness { margin-top: 12px; font-size: 30px; }
.editor-progress { height: 6px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: #edf1f6; }
.editor-progress span { width: 0; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #3478f6, #36b5d8); transition: width .2s; }
.editor-current-section { margin-top: 18px; padding: 11px 12px; border-radius: 10px; background: #f6f8fb; }
.editor-current-section small,
.editor-current-section b { display: block; }
.editor-current-section small { color: #8995a6; font-size: 10px; }
.editor-current-section b { margin-top: 4px; color: #2c3d57; font-size: 13px; }
.editor-summary p { padding-top: 14px; border-top: 1px solid #edf0f4; font-size: 11px; }
.goods-choice-grid,
.goods-price-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 9px; }
.goods-choice-card {
  min-width: 0;
  min-height: 62px;
  padding: 11px 12px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 9px;
  border: 1px solid #e2e8f1;
  border-radius: 10px;
  background: #fbfcfe;
  cursor: pointer;
}
.goods-choice-card:hover { border-color: #a9c4f5; background: #f7faff; }
.goods-choice-card input { width: 16px; min-height: 16px; }
.goods-choice-card span,
.goods-choice-card b,
.goods-choice-card small { min-width: 0; display: block; }
.goods-choice-card b { overflow: hidden; color: #34445d; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.goods-choice-card small { margin-top: 3px; color: #929dac; font-size: 10px; }
.goods-choice-card > i { color: transparent; }
.goods-choice-card:has(input:checked) { border-color: #8db1f5; background: #edf4ff; box-shadow: 0 0 0 2px rgba(52, 120, 246, .07); }
.goods-choice-card:has(input:checked) > i { color: #3478f6; }
.goods-price-item { padding: 11px 12px; border: 1px solid #e2e8f1; border-radius: 10px; background: #fbfcfe; }
.goods-price-item > span { margin-bottom: 7px; display: block; color: #56647a; font-size: 12px; font-weight: 680; }
.goods-price-item > div { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; overflow: hidden; border: 1px solid #dfe5ee; border-radius: 8px; background: #fff; }
.goods-price-item i { color: #8a95a5; text-align: center; font-style: normal; }
.goods-price-item input { min-width: 0; border: 0; border-left: 1px solid #edf0f4; border-radius: 0; background: #fff; box-shadow: none; }
.goods-price-item input:focus { box-shadow: none; }
.goods-editor-section .uploader { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: start; gap: 16px; }
.goods-editor-section .upload-preview { width: 112px; height: 112px; margin: 0; grid-row: 1 / 3; }
.goods-editor-section .uploader > .hint { grid-column: 2; }
.goods-editor-section .gallery-edit-list { grid-template-columns: repeat(auto-fill, minmax(138px, 168px)); }
.goods-editor-section .spec-edit-value,
.goods-editor-section .sku-edit-fields,
.goods-editor-section .sku-image-row { min-width: 0; }
.editor-sticky-actions { left: calc(var(--rail-width) + var(--subnav-width)); padding-right: max(26px, calc((100vw - var(--rail-width) - var(--subnav-width) - 1540px) / 2 + 18px)); }
.subnav-collapsed .editor-sticky-actions { left: var(--rail-width); }

@media (max-width: 1480px) {
  .editor-layout { grid-template-columns: 210px minmax(0, 1fr); }
  .editor-summary { position: static; grid-column: 2; grid-row: 2; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 20px; }
  .editor-summary .editor-completeness { grid-column: 2; grid-row: 1 / 3; margin: 0; }
  .editor-summary .editor-progress { grid-column: 1 / -1; }
  .editor-current-section { margin-top: 10px; }
  .editor-summary p { grid-column: 1 / -1; }
}
@media (max-width: 1120px) {
  .editor-page-head { position: static; align-items: flex-start; }
  .editor-layout { grid-template-columns: 1fr; }
  .editor-section-nav { position: static; display: flex; overflow-x: auto; border-radius: 12px; }
  .editor-nav-heading { min-width: 150px; border: 0; border-right: 1px solid #edf0f5; }
  .editor-section-nav button { min-width: 172px; }
  .editor-summary { grid-column: 1; grid-row: auto; }
}
@media (max-width: 760px) {
  .editor-page-head { flex-direction: column; }
  .editor-head-actions { width: 100%; justify-content: space-between; }
  .goods-editor-section-body { padding: 16px; }
  .goods-choice-grid,
  .goods-price-grid { grid-template-columns: 1fr; }
  .goods-editor-section .uploader { grid-template-columns: 1fr; }
  .goods-editor-section .upload-preview { grid-row: auto; }
  .goods-editor-section .uploader > .hint { grid-column: 1; }
  .detail-block-editor,
  .detail-block-editor.image-block { grid-template-columns: 1fr; }
}

/* 2026-08 admin shell v2: responsive workspace navigation and balanced content */
:root {
  --rail-width: 72px;
  --subnav-width: 236px;
  --topbar-height: 64px;
}

html, body { width: 100%; min-width: 0; overflow: hidden; }
.admin { width: 100%; min-width: 0; background: #f3f6fa; }
.module-rail {
  width: var(--rail-width);
  min-width: var(--rail-width);
  flex-basis: var(--rail-width);
  position: relative;
  z-index: 32;
  overflow: hidden;
  background: linear-gradient(180deg,#142746 0%,#10213d 100%);
}
.rail-logo, .rail-collapse { width: 100%; }
.module-rail nav { width: 100%; padding: 8px 6px; overflow-x: hidden; }
.module-item {
  width: 100%;
  min-width: 0;
  min-height: 58px;
  height: auto;
  margin: 2px 0;
  padding: 7px 3px;
  border-radius: 9px;
  font-size: 11px;
  line-height: 1.25;
}
.module-item i { font-size: 18px; }
.module-item.active { background: linear-gradient(135deg,#3c82ff,#2866e2); box-shadow: 0 8px 22px rgba(24,83,187,.34); }

.sidebar {
  width: var(--subnav-width);
  min-width: var(--subnav-width);
  flex-basis: var(--subnav-width);
  position: relative;
  z-index: 31;
  box-shadow: 8px 0 28px rgba(27,45,76,.035);
}
.side-logo { height: var(--topbar-height); padding: 0 18px; }
.side-logo b { font-size: 16px; }
.module-title { padding: 16px 18px 10px; font-size: 15px; }
.sidebar nav { padding: 0 10px 16px; scrollbar-width: thin; scrollbar-color: #d8dee8 transparent; }
.sidebar nav .nav-group { margin: 0 0 3px; padding-top: 0; border: 1px solid transparent; border-radius: 8px; }
.sidebar nav .nav-group + .nav-group { margin-top: 3px; padding-top: 0; border-top: 1px solid transparent; }
.nav-section-toggle {
  width: 100%;
  min-height: 38px;
  padding: 7px 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 0;
  border-radius: 7px;
  color: #53627a;
  background: transparent;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
}
.nav-section-toggle:hover { color: #2467d7; background: #f3f7fd; }
.nav-section-toggle i { color: #9aa7ba; font-size: 11px; transition: transform .18s ease; }
.nav-group.is-open { padding-bottom: 4px; border-color: #e3eaf5; background: #f8fafd; box-shadow: 0 3px 10px rgba(32,61,105,.035); }
.nav-group.is-open .nav-section-toggle { color: #235fae; background: #f3f7fd; }
.nav-group.is-open .nav-section-toggle i { transform: rotate(180deg); }
.nav-section-items { display: none; padding: 2px 4px 1px; }
.nav-group.is-open .nav-section-items { display: block; }
.nav-item { min-height: 36px; margin: 1px 0; padding: 7px 9px; border-radius: 6px; font-size: 13px; }
.nav-item.active { box-shadow: inset 3px 0 0 #3478f6; }
.side-foot { min-height: 52px; height: auto; margin: 0 16px; padding: 12px 0; font-size: 12px; }

.main { width: 0; min-width: 0; }
.topbar { min-height: var(--topbar-height); height: var(--topbar-height); flex-basis: var(--topbar-height); padding: 0 clamp(18px,2vw,32px); }
.top-context { min-width: 0; }
.crumb { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.content { min-width: 0; padding: 24px clamp(18px,2.4vw,36px) 48px; }
.page-heading { min-height: 58px; margin-bottom: 16px; }
.page-heading h1 { font-size: 22px; letter-spacing: -.3px; }
.page-heading p { margin-top: 6px; color: #7d899c; line-height: 1.5; }
.mobile-nav-toggle {
  width: 36px;
  height: 36px;
  display: none;
  place-items: center;
  border: 1px solid #e1e7f0;
  border-radius: 9px;
  color: #53627a;
  background: #fff;
  font-size: 20px;
}
.nav-drawer-mask { display: none; }

.overview-panel, .workbench-panel, .chart-panel, .ranking-panel,
.quick-panel, .notice-panel, .health-panel, .welcome-panel {
  border-color: #e2e8f1;
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(33,54,87,.045);
  overflow: hidden;
}
.section-heading { min-height: 54px; padding: 11px 18px; }
.section-heading strong { font-size: 14px; }
.metric-grid { padding: 14px; grid-template-columns: repeat(5,minmax(135px,1fr)); gap: 10px; }
.metric {
  min-width: 0;
  min-height: 118px;
  padding: 17px;
  border: 1px solid #e8edf5;
  border-radius: 10px;
  background: linear-gradient(180deg,#fff,#fbfcfe);
}
.metric:last-child { border-right: 1px solid #e8edf5; }
.metric strong { margin: 10px 0 7px; font-size: 27px; font-weight: 650; }
.dashboard-grid { grid-template-columns: minmax(0,1fr) minmax(280px,320px); gap: 16px; }
.dashboard-main, .dashboard-aside { min-width: 0; gap: 16px; }
.todo-grid { padding: 14px; grid-template-columns: repeat(5,minmax(116px,1fr)); gap: 10px; }
.todo-grid button { min-width: 0; min-height: 72px; border-radius: 9px; }
.chart-panel .toolbar { display: flex; flex-wrap: wrap; gap: 9px; }
.sales-chart { min-width: 0; }
.quick-grid button { font-size: 13px; }
.notice-list li { font-size: 13px; line-height: 1.45; }
.health-panel small { line-height: 1.55; }

.subnav-collapsed .sidebar { min-width: 0; }

@media (max-width: 1500px) {
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-aside { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .health-panel { align-self: stretch; }
  .metric-grid { grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); }
  .todo-grid { grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); }
}

@media (max-width: 1120px) {
  :root { --rail-width: 66px; --subnav-width: 216px; }
  .module-item { min-height: 56px; font-size: 10px; }
  .content { padding: 20px 20px 42px; }
  .top-right .who, .top-right .logout-btn { display: none; }
  .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 900px) {
  :root { --rail-width: 68px; --subnav-width: min(300px,calc(100vw - 84px)); }
  .sidebar {
    width: var(--subnav-width);
    min-width: var(--subnav-width);
    position: fixed;
    top: 0;
    bottom: 0;
    left: var(--rail-width);
    z-index: 60;
    transform: translateX(calc(-100% - 12px));
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .admin.nav-drawer-open .sidebar { transform: translateX(0); box-shadow: 20px 0 55px rgba(18,37,68,.22); }
  .subnav-collapsed .sidebar { width: var(--subnav-width); min-width: var(--subnav-width); flex-basis: var(--subnav-width); border-right: 1px solid var(--line); }
  .nav-drawer-mask {
    position: fixed;
    inset: 0 0 0 var(--rail-width);
    z-index: 55;
    border: 0;
    background: rgba(20,35,58,.28);
    backdrop-filter: blur(2px);
  }
  .admin.nav-drawer-open .nav-drawer-mask { display: block; }
  .mobile-nav-toggle { display: grid; }
  .platform-chip, .top-divider { display: none; }
  .topbar { padding: 0 16px; }
  .top-context { gap: 10px; }
  .content { padding: 18px 16px 38px; }
  .page-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
  .page-heading-actions { width: 100%; flex-wrap: wrap; }
  .dashboard-aside { grid-template-columns: 1fr; }
  .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .todo-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .section-heading { align-items: flex-start; flex-wrap: wrap; gap: 8px; }
  .segment-tabs { max-width: 100%; overflow-x: auto; }
}

@media (max-width: 560px) {
  :root { --rail-width: 58px; }
  .rail-logo span { width: 28px; height: 28px; }
  .module-rail nav { padding: 7px 4px; }
  .module-item { min-height: 56px; padding: 6px 2px; border-radius: 8px; font-size: 10px; }
  .module-item i { font-size: 17px; }
  .rail-collapse { height: 44px; }
  .top-right .top-icon-btn, .account-toggle { display: none; }
  .content { padding: 14px 12px 32px; }
  .page-heading h1 { font-size: 20px; }
  .metric-grid, .todo-grid { grid-template-columns: 1fr; }
  .metric { min-height: 104px; }
  .toolbar input, .toolbar select { width: 100%; min-width: 0; }
  .chart-summary { flex-direction: column; gap: 7px; }
  .sales-chart { padding-right: 12px; padding-left: 12px; gap: 7px; }
}

/* Message center: keep summary, tabs and actions on the shared admin control system. */
.message-overview {
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: repeat(4,minmax(180px,1fr));
  gap: 12px;
}
.message-overview-card {
  min-width: 0;
  min-height: 104px;
  padding: 18px;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr);
  align-items: center;
  gap: 13px;
  border: 1px solid #e3e9f2;
  border-radius: 11px;
  background: linear-gradient(180deg,#fff,#fbfcff);
  box-shadow: 0 4px 16px rgba(31,52,84,.035);
}
.message-overview-card > i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #3478f6;
  background: #edf4ff;
  font-size: 18px;
}
.message-overview-card span,
.message-overview-card b,
.message-overview-card small { display: block; }
.message-overview-card span { color: #718096; font-size: 12px; }
.message-overview-card b { margin: 5px 0 3px; color: #23314a; font-size: 24px; line-height: 1; }
.message-overview-card small { overflow: hidden; color: #98a2b3; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.message-overview-card.is-muted > i { color: #7d899b; background: #f1f3f6; }
.message-overview-card.is-muted b { color: #697588; font-size: 17px; }
.message-tabs { margin-bottom: 0; align-items: stretch; }
.message-tabs button { min-width: 72px; padding: 0 8px; }
.message-tabs + .toolbar { border-top: 0; }
.message-table { border-top: 0; }
.message-table td:first-child { min-width: 300px; }
.message-table td:first-child b { color: #26354d; font-size: 13px; }
.message-table td:first-child .hint { margin-top: 5px; display: block; line-height: 1.55; }
.message-table td:nth-child(4) { max-width: 260px; overflow-wrap: anywhere; }

/* Legacy dashboards still emit stat-card; keep them on the same visual contract. */
.stat-card {
  min-width: 0;
  min-height: 104px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid #e3e9f2;
  border-radius: 11px;
  background: linear-gradient(180deg,#fff,#fbfcff);
  box-shadow: 0 4px 16px rgba(31,52,84,.035);
}
.stat-card span,
.stat-card b,
.stat-card small { display: block; }
.stat-card span { color: #718096; font-size: 12px; }
.stat-card b { margin: 8px 0 5px; color: #23314a; font-size: 25px; line-height: 1; }
.stat-card small { overflow: hidden; color: #98a2b3; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1280px) {
  .message-overview { grid-template-columns: repeat(2,minmax(180px,1fr)); }
}

@media (max-width: 680px) {
  .message-overview { grid-template-columns: 1fr; }
  .message-tabs { overflow-x: auto; align-items: flex-end; }
  .message-tabs button { flex: 0 0 auto; }
}

/* Settings center: consistent information hierarchy, spacing and readable controls. */
.settings-shell {
  width: min(100%, 1440px);
  min-height: 720px;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 20px;
}
.settings-nav {
  padding: 14px;
  border-color: #e2e8f1;
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(33, 54, 87, .04);
}
.settings-nav-group + .settings-nav-group { margin-top: 16px; padding-top: 16px; }
.settings-nav-group > span {
  padding: 0 10px 8px;
  color: #7f8ba0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}
.settings-nav-group button {
  min-height: 56px;
  margin: 3px 0;
  padding: 9px 10px;
  grid-template-columns: 34px minmax(0, 1fr) 16px;
  gap: 10px;
  border-radius: 8px;
}
.settings-nav-group button > i:first-child {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  font-size: 16px;
}
.settings-nav-group button > i:last-child { font-size: 12px; }
.settings-nav-group button strong { font-size: 14px; font-weight: 650; line-height: 1.35; }
.settings-nav-group button small { margin-top: 3px; font-size: 12px; line-height: 1.35; }
.settings-workspace {
  min-width: 0;
  border-color: #e2e8f1;
  border-radius: 12px;
  box-shadow: 0 6px 22px rgba(33, 54, 87, .05);
}
.settings-workspace-head { min-height: 104px; padding: 22px 28px; gap: 24px; }
.settings-workspace-head > div > span { color: #748197; font-size: 12px; font-weight: 700; }
.settings-workspace-head h2 { margin-top: 5px; font-size: 22px; line-height: 1.3; }
.settings-workspace-head p { margin-top: 5px; font-size: 13px; line-height: 1.55; }
.settings-version { padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.settings-card { min-height: 520px; padding: 0 28px 36px; }
.settings-group-title { margin: 0 -28px 24px; padding: 24px 28px 16px; }
.settings-group-title strong { font-size: 16px; font-weight: 700; line-height: 1.4; }
.settings-group-title span { max-width: 900px; margin-top: 6px; font-size: 13px; line-height: 1.6; }
.settings-card .form-row,
.settings-card .conditional-fields > .form-row {
  max-width: 860px;
  margin-bottom: 18px;
  display: grid;
  grid-template-columns: 180px minmax(280px, 1fr);
  align-items: start;
  gap: 20px;
}
.settings-card .form-row > label {
  margin: 0;
  padding-top: 11px;
  color: #3f4d63;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.45;
  text-align: right;
}
.settings-card .form-row input,
.settings-card .form-row select { min-height: 44px; }
.settings-card .form-row textarea { min-height: 108px; }
.settings-card .form-row input,
.settings-card .form-row select,
.settings-card .form-row textarea { border-radius: 9px; font-size: 14px; line-height: 1.55; }
.settings-card .form-row > .hint,
.settings-card .form-row > .form-hint,
.settings-card .form-row > small {
  grid-column: 2;
  margin-top: -10px;
  color: #7f8b9e;
  font-size: 12px;
  line-height: 1.6;
}
.settings-card .theme-picker { grid-column: 2; }
.settings-card .check-item { font-size: 13px; }
.settings-card .settings-section { margin-top: 32px; }
.settings-card .integration-card.settings-section { max-width: none; padding: 22px 24px; border-radius: 12px; }
.settings-card .integration-head { gap: 18px; }
.settings-card .integration-head strong { font-size: 16px; line-height: 1.4; }
.settings-card .integration-head span { padding: 5px 9px; font-size: 12px; line-height: 1.4; }
.settings-card .integration-row {
  margin-top: 16px;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 16px;
  font-size: 13px;
  line-height: 1.7;
}
.settings-card .integration-row b { font-size: 13px; }
.settings-card .integration-row p { color: #667389; }
.settings-card .page-heading-actions { margin-top: 18px; flex-wrap: wrap; gap: 10px; }
.settings-card .page-heading-actions .btn { min-height: 38px; }
.settings-tertiary { margin: 0 -28px; padding: 16px 28px; gap: 20px; }
.settings-tertiary > span { font-size: 13px; font-weight: 700; }
.settings-tertiary-tabs { gap: 8px; }
.settings-tertiary-tabs button {
  min-height: 36px;
  padding: 8px 14px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
}
.settings-savebar { min-height: 72px; padding: 14px 28px; gap: 20px; }
.settings-savebar .btn { min-width: 144px; min-height: 40px; }
.settings-save-state { font-size: 13px; line-height: 1.5; }
.settings-card .theme-option { min-height: 72px; padding: 12px 14px; }
.settings-card .theme-copy strong { font-size: 14px; }
.settings-card .theme-copy small { font-size: 12px; }

@media (max-width: 1280px) {
  .settings-shell { grid-template-columns: 230px minmax(0, 1fr); }
  .settings-card .form-row,
  .settings-card .conditional-fields > .form-row { grid-template-columns: 150px minmax(260px, 1fr); }
}

@media (max-width: 980px) {
  .settings-shell { grid-template-columns: 1fr; }
  .settings-nav { padding: 10px; }
  .settings-nav-group button { min-width: 150px; }
  .settings-workspace-head { padding: 20px 22px; }
  .settings-card { padding-right: 22px; padding-left: 22px; }
  .settings-group-title { margin-right: -22px; margin-left: -22px; padding-right: 22px; padding-left: 22px; }
  .settings-tertiary { margin-right: -22px; margin-left: -22px; padding-right: 22px; padding-left: 22px; }
  .settings-savebar { padding-right: 22px; padding-left: 22px; }
}

@media (max-width: 680px) {
  .settings-workspace-head { align-items: flex-start; flex-direction: column; }
  .settings-card .form-row,
  .settings-card .conditional-fields > .form-row { grid-template-columns: 1fr; gap: 8px; }
  .settings-card .form-row > label { padding-top: 0; text-align: left; }
  .settings-card .form-row > .hint,
  .settings-card .form-row > .form-hint,
  .settings-card .form-row > small,
  .settings-card .theme-picker { grid-column: 1; }
  .settings-tertiary { align-items: flex-start; flex-direction: column; gap: 10px; }
  .settings-savebar { align-items: stretch; flex-direction: column; }
  .settings-savebar .btn { width: 100%; }
}

/* Reusable enterprise data hub: visual catalog and schema editors */
.hub-catalog-summary { display: flex; align-items: stretch; gap: 14px; margin-bottom: 18px; }
.hub-catalog-summary article { min-width: 180px; padding: 16px 18px; border: 1px solid #e5eaf2; border-radius: 12px; background: #fff; display: flex; align-items: center; gap: 12px; }
.hub-catalog-summary article > i { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: #eef5ff; color: #2563eb; font-size: 18px; }
.hub-catalog-summary article div { display: flex; flex-direction: column; }
.hub-catalog-summary article strong { font-size: 22px; color: #16233a; }
.hub-catalog-summary article span { color: #76849a; font-size: 13px; }
.hub-catalog-summary > button { margin-left: auto; align-self: center; }
.hub-type-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 16px; margin-bottom: 18px; }
.hub-type-card { padding: 18px; min-width: 0; }
.hub-type-card > header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.hub-type-card > header span { color: #2563eb; font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.hub-type-card h2 { margin: 4px 0 0; font-size: 18px; }
.hub-type-card > p { min-height: 38px; margin: 12px 0; color: #65738a; line-height: 1.6; }
.hub-field-chip-list { display: flex; flex-wrap: wrap; gap: 6px; min-height: 58px; align-content: flex-start; }
.hub-field-chip-list > span { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 5px 8px; border-radius: 7px; background: #f3f6fb; color: #334155; }
.hub-field-chip-list small { color: #8a96a9; }
.hub-type-card dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.hub-type-card dl div { min-width: 0; padding: 8px; border-radius: 8px; background: #fafbfc; }
.hub-type-card dt { color: #8a96a9; font-size: 11px; }
.hub-type-card dd { margin: 3px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-type-card footer { display: flex; justify-content: flex-end; }
.hub-relation-catalog { padding: 18px; }
.hub-relation-list { display: grid; gap: 8px; }
.hub-relation-list article { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(110px, .8fr) minmax(220px, 1.6fr) 100px auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid #e8edf4; border-radius: 9px; }
.hub-relation-list code { color: #5b6b82; }
.hub-relation-list span { color: #334155; }
.hub-relation-list small { color: #7b8798; }
.modal-box.hub-schema-modal { width: min(980px, calc(100vw - 40px)); }
.hub-schema-modal .modal-body { max-height: min(76vh, 820px); overflow: auto; }
.hub-schema-editor { display: grid; gap: 18px; }
.hub-schema-fields-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 4px; }
.hub-schema-fields-head h3 { margin: 0 0 3px; }
.hub-schema-fields-head p { margin: 0; color: #7b8798; }
.hub-schema-fields { display: grid; gap: 8px; }
.hub-schema-field-row { display: grid; grid-template-columns: 1.1fr 1.3fr 120px 110px 82px 34px; gap: 8px; align-items: center; padding: 9px; border: 1px solid #e4e9f1; border-radius: 10px; background: #fafbfd; }
.hub-schema-field-row input, .hub-schema-field-row select { width: 100%; min-width: 0; }
.modal-box.hub-entity-modal { width: min(1040px, calc(100vw - 40px)); }
.hub-entity-modal .modal-body { max-height: min(76vh, 840px); overflow: auto; }
.hub-entity-editor { display: grid; gap: 18px; }
.hub-entity-editor-intro { display: flex; gap: 14px; align-items: center; padding: 15px 17px; border: 1px solid #dce7fb; border-radius: 12px; background: #f5f8ff; }
.hub-entity-editor-intro > i { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; background: #3778f5; color: #fff; font-size: 20px; }
.hub-entity-editor-intro p { margin: 4px 0 0; color: #6e7b8f; line-height: 1.55; }
.hub-entity-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px 16px; }
.hub-entity-form-grid label { display: grid; gap: 7px; min-width: 0; }
.hub-entity-form-grid label.wide { grid-column: 1/-1; }
.hub-entity-form-grid label > span { font-weight: 700; color: #31415a; }
.hub-entity-form-grid label > small { color: #7b8798; line-height: 1.45; }
.hub-entity-form-grid input,.hub-entity-form-grid select,.hub-entity-form-grid textarea { width: 100%; min-width: 0; }
.required-mark { color: #e65054; }
.hub-entity-properties,.hub-entity-lineage { padding: 17px; border: 1px solid #e3e9f2; border-radius: 13px; background: #fff; }
.hub-entity-lineage { display: grid; gap: 9px; }
.hub-entity-lineage article { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid #edf0f5; border-radius: 10px; background: #fafbfd; }
.hub-entity-lineage article > i { color: #3778f5; }
.hub-entity-lineage article strong,.hub-entity-lineage article small { display: block; }
.hub-entity-lineage article small,.hub-entity-lineage article time { color: #7d899a; }
.hub-processing-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; margin-bottom: 15px; }
.hub-processing-summary article { display: grid; gap: 5px; padding: 17px 19px; border: 1px solid #e1e8f2; border-radius: 13px; background: #fff; }
.hub-processing-summary span,.hub-processing-summary small { color: #758197; }
.hub-processing-summary strong { font-size: 19px; color: #1e2f4a; }
.hub-capability-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.hub-capability-grid > article { padding: 18px; }
.hub-capability-grid header { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; gap: 11px; align-items: start; margin-bottom: 13px; }
.hub-capability-grid header > i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: #3778f5; background: #eef4ff; }
.hub-capability-grid h2,.hub-capability-grid p { margin: 0; }
.hub-capability-grid p { margin-top: 3px; color: #7a8799; }
.hub-capability-grid header b { min-width: 28px; padding: 4px 8px; border-radius: 999px; text-align: center; color: #2867df; background: #edf4ff; }
.hub-capability-grid article > div { display: grid; gap: 7px; }
.hub-capability-grid article > div > span { display: grid; grid-template-columns: minmax(130px,.45fr) minmax(0,1fr); gap: 12px; padding: 9px 11px; border: 1px solid #edf0f5; border-radius: 9px; background: #fafbfd; }
.hub-capability-grid article > div small { color: #7c8899; overflow-wrap: anywhere; }
.hub-processing-policy { display: flex; gap: 14px; align-items: flex-start; margin-top: 15px; padding: 19px; }
.hub-processing-policy > i { color: #20a370; font-size: 24px; }
.hub-processing-policy h2,.hub-processing-policy p { margin: 0; }
.hub-processing-policy p { margin-top: 5px; color: #6e7c90; line-height: 1.65; }
.ontology-source-cards article footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; padding-top:12px; border-top:1px solid #edf1f6; color:#7b8798; font-size:12px; }
.hub-source-editor { display:grid; gap:16px; }
.hub-source-editor-intro { display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border:1px solid #dce8fa; border-radius:12px; background:#f5f9ff; }
.hub-source-editor-intro > i { display:grid; place-items:center; width:38px; height:38px; flex:0 0 auto; border-radius:10px; color:#2563eb; background:#e4efff; font-size:18px; }
.hub-source-editor-intro strong,.hub-source-editor-intro p { margin:0; }
.hub-source-editor-intro p { margin-top:4px; color:#66758a; line-height:1.55; }
.modal-box.hub-source-modal { width:min(760px,calc(100vw - 32px)); }
.modal-box.hub-publication-modal { width:min(820px,calc(100vw - 32px)); }
.hub-publication-editor { display:grid; gap:18px; }
.hub-publication-picker-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:4px; }
.hub-publication-picker-head > div { display:grid; gap:4px; }
.hub-publication-picker-head strong { font-size:15px; color:#17223b; }
.hub-publication-picker-head small { font-size:12px; color:#7b879c; }
.hub-publication-picker-head > b { flex:none; padding:7px 11px; border-radius:999px; background:#edf4ff; color:#286cf4; font-size:12px; }
.hub-publication-search { display:grid; grid-template-columns:minmax(240px,1fr) auto auto; gap:10px; align-items:center; }
.hub-publication-search input { min-width:0; }
.hub-publication-entities { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; max-height:360px; overflow:auto; padding:2px; }
.hub-publication-entity { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; padding:12px; border:1px solid #e2e8f2; border-radius:10px; background:#fff; cursor:pointer; }
.hub-publication-entity:hover { border-color:#9fbcf8; background:#f8fbff; }
.hub-publication-entity span { display:grid; gap:3px; min-width:0; }
.hub-publication-entity strong,.hub-publication-entity small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hub-publication-entity strong { font-size:13px; color:#17223b; }
.hub-publication-entity small { font-size:11px; color:#8290a6; }
.hub-publication-entity > b { font-size:11px; color:#5d6a80; }
.hub-required-check { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.hub-required-check input { width: auto; }
.modal-box.hub-relation-modal { width: min(760px, calc(100vw - 40px)); }
.hub-form-grid .span-2 { grid-column: 1 / -1; }

@media (max-width: 900px) {
  .hub-catalog-summary { flex-wrap: wrap; }
  .hub-catalog-summary > button { margin-left: 0; }
  .hub-relation-list article { grid-template-columns: 1fr; }
  .hub-schema-field-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .hub-publication-search,.hub-publication-entities { grid-template-columns:1fr; }
  .hub-publication-search .btn { width:100%; }
}

.hub-document-toolbar {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 180px auto auto;
  gap: 12px;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid #e8edf5;
}
.hub-document-toolbar input,
.hub-document-toolbar select { min-height: 40px; }
.hub-document-list { padding: 4px 18px 18px; }
.hub-document-list article {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #e8edf5;
}
.hub-document-list article:last-child { border-bottom: 0; }
.hub-document-list header { display: flex; align-items: center; gap: 10px; }
.hub-document-list p { margin: 6px 0; color: #667085; line-height: 1.6; }
.hub-document-list small { color: #98a2b3; }
.hub-document-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #2563eb;
  background: #eef5ff;
  font-size: 20px;
}
.modal-box.hub-document-modal { width: min(820px, calc(100vw - 40px)); }
.hub-document-editor { display: grid; gap: 18px; }
.hub-document-editor textarea { width: 100%; resize: vertical; line-height: 1.65; }
@media (max-width: 840px) {
  .hub-document-toolbar { grid-template-columns: 1fr 1fr; }
  .hub-document-list article { grid-template-columns: 44px minmax(0, 1fr); }
  .hub-document-list article > button { grid-column: 2; justify-self: start; }
}
.section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px; }
.section-head h3 { margin:0; color:#1e2a40; font-size:17px; }
.section-head p { margin:5px 0 0; }
.success-banner { margin:12px 14px 16px; padding:13px 15px; color:#087a48; background:#ecfbf3; border:1px solid #bdebd2; border-radius:10px; }
.quality-issue { margin:10px 14px; border:1px solid #e3e9f2; border-radius:10px; overflow:hidden; }
.quality-issue summary { padding:12px 14px; display:flex; justify-content:space-between; cursor:pointer; color:#27344b; font-weight:600; background:#f8fafd; }
.quality-issue summary span { min-width:28px; padding:1px 8px; text-align:center; color:#e54d42; background:#fff0ee; border-radius:999px; }
.quality-issue pre { margin:0; padding:14px; max-height:320px; overflow:auto; color:#526077; background:#fff; font:12px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace; white-space:pre-wrap; word-break:break-all; }

/* Shipping note format: keep every control next to its field. */
.modal-box.print-template-modal { width:min(880px,calc(100vw - 32px)); max-width:880px; }
.print-template-fields { border:0; margin:0; padding:0; min-width:0; }
.print-template-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.print-template-field { display:flex; flex-direction:column; gap:6px; margin:8px 0; min-width:0; }
.print-template-field>span { color:#526074; font-weight:600; }
.print-template-field input,.print-template-field select,.print-template-field textarea { width:100%; min-width:0; padding:10px 12px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:#fbfcfe; }
.print-template-field input:focus,.print-template-field select:focus,.print-template-field textarea:focus { outline:2px solid var(--primary); outline-offset:1px; background:#fff; }
.print-template-field textarea { resize:vertical; }
.print-template-fields h3 { margin:20px 0 8px; font-size:16px; }
.print-template-fields:disabled { opacity:.75; }
.print-column-row { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; padding:9px 12px; border-bottom:1px solid #e3e9f2; }
.print-column-row label,.print-template-sections label { display:flex; align-items:center; gap:8px; }
.print-column-row input,.print-template-sections input { width:auto; }
.print-column-row>div { display:flex; gap:6px; }
.print-column-row .btn.small.ghost { color:#526074; background:#fff; border:1px solid var(--line); }
.print-template-columns { border:1px solid #dce4ef; border-radius:8px; overflow:hidden; }
.print-template-sections { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:14px 0; }
.print-template-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
@media(max-width:600px) { .print-template-grid,.print-template-sections { grid-template-columns:1fr; } }

/* Keep invitation evidence readable without compressing the review actions. */
.user-table-scroll { width:100%; overflow-x:auto; }
.users-table { min-width:1320px; }
.user-invitation { min-width:175px; max-width:240px; white-space:normal; overflow-wrap:anywhere; line-height:1.5; }
.user-invitation strong,.user-invitation small { display:block; }
.user-invitation small { margin-top:3px; color:#66758e; }
.user-invitation .is-warning { color:#9b6500; }
.approval-applicant { padding:12px 14px; margin:12px 0; background:#f5f8ff; border-radius:8px; }
.approval-applicant p { margin:8px 0 4px; }
.approval-applicant .user-invitation { max-width:none; }
.spec-commerce-scroll { max-width: 100%; overflow-x: auto; margin: 12px 0; padding-bottom: 8px; }
.spec-commerce-table { min-width: max-content; }
.spec-commerce-head, .spec-edit-value.spec-commerce-row { display: grid; grid-template-columns: var(--spec-commerce-grid); gap: 8px; align-items: center; }
.spec-commerce-head { padding: 10px 0; font-size: 12px; color: #526680; font-weight: 600; border-bottom: 1px solid #e5ebf3; }
.spec-commerce-row input[type="hidden"] { display: none !important; }
.spec-commerce-cell { min-width: 0; display: grid; gap: 6px; }
.spec-commerce-cell label { display: grid; gap: 3px; min-width: 0; }
.spec-commerce-cell small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #6a7a90; }
.spec-commerce-cell input { width: 100%; min-width: 0; box-sizing: border-box; }
.goods-order-list { max-height: 560px; overflow: auto; border-top: 1px solid var(--border-color, #e8edf3); }
.goods-order-row { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--border-color, #e8edf3); }
.goods-order-rank { width: 34px; flex: none; color: #436888; font-weight: 700; text-align: center; }
.goods-order-name { min-width: 120px; flex: 1; display: flex; flex-direction: column; }
.goods-order-name small { margin-top: 3px; color: #7b8797; }
.goods-order-position { width: 68px; flex: none; }