:root {
  --ink: #17253d;
  --muted: #718099;
  --subtle: #9aa6b8;
  --line: #e8edf3;
  --surface: #ffffff;
  --page: #f5f7fa;
  --blue: #2f7fe6;
  --blue-strong: #1f64c2;
  --blue-soft: #eaf3ff;
  --teal: #18a89a;
  --teal-soft: #e8f8f5;
  --orange: #ed943b;
  --orange-soft: #fff3e6;
  --purple: #8470df;
  --purple-soft: #f1efff;
  --green: #2da66d;
  --red: #dd5d69;
  --shadow: 0 10px 30px rgba(30, 49, 79, .055);
  font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--page);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 1120px; background: var(--page); color: var(--ink); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; display: flex; }

.sidebar { width: 252px; min-height: 100vh; background: #fff; border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 28px 16px 18px; position: fixed; inset: 0 auto 0 0; z-index: 5; }
.brand-lockup { display: flex; align-items: center; gap: 11px; padding: 0 12px 30px; }
.brand-mark { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--ink); font-weight: 800; font-size: 18px; box-shadow: 0 5px 14px rgba(23, 37, 61, .17); }
.brand-lockup strong { display: block; font-size: 15px; letter-spacing: .2px; }
.brand-lockup span { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; }
.workspace-switcher { padding: 0 8px 24px; }
.eyebrow, .nav-label, .section-kicker { display: block; color: var(--subtle); text-transform: uppercase; letter-spacing: .12em; font-size: 10px; font-weight: 700; }
.workspace-button { border: 1px solid var(--line); background: #fbfcfe; width: 100%; border-radius: 9px; padding: 9px 10px; display: flex; align-items: center; gap: 8px; color: var(--ink); text-align: left; margin-top: 8px; font-size: 12px; }
.workspace-avatar, .profile-avatar { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; color: #fff; background: var(--blue); font-size: 11px; font-weight: 700; }
.workspace-button .chevron, .user-menu .chevron { margin-left: auto; color: var(--subtle); font-size: 15px; }
.nav-group { padding: 0 4px 22px; }
.nav-label { padding: 0 12px 9px; }
.nav-item { display: flex; align-items: center; gap: 11px; width: 100%; border: 0; background: transparent; color: #67768e; border-radius: 8px; padding: 11px 12px; margin: 2px 0; font-size: 13px; text-align: left; transition: .18s ease; }
.nav-item, .button { text-decoration: none; }
.nav-item:hover { background: #f4f7fb; color: var(--ink); }
.nav-item.active { color: var(--blue-strong); background: var(--blue-soft); font-weight: 700; }
.live-module-entry { color: var(--blue-strong); background: #f5f9ff; }
.live-module-entry:hover { background: var(--blue-soft); }
.nav-icon { font-size: 17px; line-height: 1; width: 18px; text-align: center; }
.nav-count { margin-left: auto; font-style: normal; background: #ffe5d4; color: #c66b25; padding: 2px 6px; border-radius: 10px; font-size: 10px; }
.sidebar-footer { margin-top: auto; padding: 0 4px; }
.help-box { background: #f5f8fc; border: 1px solid #edf1f6; border-radius: 9px; padding: 12px 10px; display: flex; gap: 9px; align-items: flex-start; margin-bottom: 13px; }
.help-icon { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: #dfeafa; color: var(--blue); font-weight: 800; font-size: 12px; }
.help-box strong, .help-box span { display: block; font-size: 11px; }
.help-box strong { color: #42536d; margin-bottom: 4px; }
.help-box span { color: var(--muted); }
.user-menu { width: 100%; border: 0; background: transparent; display: flex; align-items: center; gap: 9px; padding: 7px 8px; text-align: left; }
.user-menu .profile-avatar { background: #edb075; border-radius: 50%; }
.user-copy strong, .user-copy small { display: block; }
.user-copy strong { font-size: 12px; }
.user-copy small { color: var(--muted); font-size: 10px; margin-top: 3px; }

.main-content { width: calc(100% - 252px); margin-left: 252px; min-height: 100vh; }
.topbar { height: 76px; background: rgba(255,255,255,.92); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 42px; position: sticky; top: 0; z-index: 4; backdrop-filter: blur(8px); }
.crumbs { display: flex; align-items: center; gap: 9px; color: var(--subtle); font-size: 12px; }
.crumbs b { color: #d7dde6; font-weight: 400; }
.crumbs strong { color: var(--ink); font-weight: 700; }
.topbar-actions { display: flex; align-items: center; gap: 14px; }
.global-search { height: 34px; width: 270px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: #fbfcfe; border-radius: 7px; padding: 0 9px; color: var(--subtle); }
.global-search input, .filter-search input { border: 0; outline: 0; background: transparent; width: 100%; min-width: 0; color: var(--ink); font-size: 12px; }
.global-search kbd { border: 1px solid #dce3ed; background: #fff; color: var(--subtle); border-radius: 4px; padding: 2px 4px; font-size: 10px; white-space: nowrap; }
.icon-button { border: 0; background: transparent; color: #65748a; width: 30px; height: 30px; position: relative; font-size: 18px; }
.icon-button i { width: 5px; height: 5px; background: var(--red); border-radius: 50%; position: absolute; right: 4px; top: 5px; border: 2px solid #fff; box-sizing: content-box; }
.top-avatar { width: 31px; height: 31px; border: 0; background: #edb075; color: #fff; border-radius: 50%; font-weight: 700; font-size: 12px; }
.page-wrap { padding: 36px 42px 60px; max-width: 1600px; margin: 0 auto; }
.view { display: none; animation: viewIn .22s ease; }
.view.active { display: block; }
@keyframes viewIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.page-heading { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 28px; gap: 25px; }
.hero-heading { margin-bottom: 30px; }
.section-kicker { color: var(--blue); margin-bottom: 8px; letter-spacing: .08em; }
h1, h2, p { margin: 0; }
h1 { font-size: 28px; letter-spacing: -.02em; line-height: 1.2; }
.page-heading p { color: var(--muted); font-size: 13px; margin-top: 8px; }
.heading-actions { display: flex; gap: 9px; align-items: center; }
.button { border: 1px solid transparent; border-radius: 7px; padding: 10px 15px; font-size: 12px; display: inline-flex; gap: 6px; align-items: center; justify-content: center; transition: .18s ease; white-space: nowrap; }
.button.primary { color: #fff; background: var(--blue); box-shadow: 0 5px 14px rgba(47, 127, 230, .2); }
.button.primary:hover { background: var(--blue-strong); transform: translateY(-1px); }
.button.secondary { color: #50617a; background: #fff; border-color: #dfe6ee; }
.button.secondary:hover { border-color: #c3cfde; background: #fbfcfe; }
.button.dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.button.dark:hover { background: #243858; }
.text-button, .more-button { border: 0; background: transparent; color: var(--blue); font-size: 11px; padding: 4px; white-space: nowrap; }
.text-button span { font-size: 14px; margin-left: 4px; }
.more-button { color: var(--subtle); font-weight: 700; letter-spacing: 2px; }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 17px; }
.stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.stat-card::after { content: ""; position: absolute; width: 80px; height: 80px; border-radius: 50%; right: -23px; top: -25px; opacity: .4; }
.accent-blue::after { background: var(--blue-soft); }.accent-orange::after { background: var(--orange-soft); }.accent-teal::after { background: var(--teal-soft); }.accent-purple::after { background: var(--purple-soft); }
.stat-top, .stat-foot { display: flex; align-items: center; justify-content: space-between; }
.stat-top { color: var(--muted); font-size: 12px; position: relative; z-index: 1; }
.stat-icon { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; font-size: 15px; }
.accent-blue .stat-icon { color: var(--blue); background: var(--blue-soft); }.accent-orange .stat-icon { color: var(--orange); background: var(--orange-soft); }.accent-teal .stat-icon { color: var(--teal); background: var(--teal-soft); }.accent-purple .stat-icon { color: var(--purple); background: var(--purple-soft); }
.stat-card > strong { display: block; font-size: 26px; margin: 16px 0 13px; position: relative; z-index: 1; letter-spacing: -.03em; }.stat-card > strong small { color: var(--subtle); font-size: 13px; font-weight: 600; }
.stat-foot { font-size: 10px; color: var(--subtle); }.positive { color: var(--green) !important; }.warning-text { color: var(--orange) !important; }
.overview-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(340px, .9fr); gap: 17px; margin-bottom: 17px; }.lower-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(340px, .9fr); gap: 17px; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); overflow: hidden; }.panel-heading { padding: 20px 22px 16px; display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }.panel-heading h2 { font-size: 15px; letter-spacing: -.01em; }.panel-heading p { color: var(--muted); font-size: 11px; margin-top: 5px; }.panel-note { border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; padding: 13px 22px; }.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 6px; }.dot.green { background: var(--green); }.note-divider { display: inline-block; height: 10px; width: 1px; background: var(--line); margin: 0 10px; vertical-align: middle; }.live-dot { color: var(--green); font-size: 10px; background: var(--teal-soft); padding: 4px 7px; border-radius: 4px; }
.bar-chart { padding: 2px 22px 17px; }.chart-row { display: grid; grid-template-columns: 150px minmax(80px, 1fr) 50px; gap: 13px; align-items: center; margin: 16px 0; }.chart-label { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: #66768c; }.chart-label strong { color: var(--ink); font-size: 11px; }.bar-track { height: 7px; background: #eef2f7; border-radius: 4px; overflow: hidden; }.bar-track i { height: 100%; display: block; border-radius: 4px; background: linear-gradient(90deg, #51a2ee, #2f7fe6); }.chart-percent { color: var(--subtle); text-align: right; font-size: 10px; }
.focus-list { padding: 0 18px 13px; }.focus-item { display: flex; width: 100%; border: 0; border-bottom: 1px solid #f0f3f7; background: transparent; padding: 14px 4px; align-items: center; gap: 10px; text-align: left; }.focus-item:last-child { border-bottom: 0; }.focus-item:hover strong { color: var(--blue); }.focus-item > span:nth-child(2) { flex: 1; }.focus-item strong, .focus-item small { display: block; }.focus-item strong { font-size: 12px; }.focus-item small { font-size: 10px; color: var(--muted); margin-top: 4px; }.focus-item b { font-size: 12px; color: var(--ink); }.focus-symbol { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; font-size: 17px; }.focus-symbol.orange { color: var(--orange); background: var(--orange-soft); }.focus-symbol.blue { color: var(--blue); background: var(--blue-soft); }.focus-symbol.purple { color: var(--purple); background: var(--purple-soft); }.outline-full-button { margin: 2px 18px 18px; width: calc(100% - 36px); border: 1px solid #dce5ef; background: #fff; color: var(--blue); border-radius: 7px; padding: 9px; font-size: 11px; }.outline-full-button:hover { background: #f7faff; border-color: #bad2f5; }.outline-full-button span { font-size: 14px; margin-left: 5px; }
.table-wrap { overflow-x: auto; }.data-table { width: 100%; border-collapse: collapse; font-size: 11px; white-space: nowrap; }.data-table th { color: var(--subtle); text-align: left; font-weight: 600; font-size: 10px; background: #fbfcfe; padding: 11px 18px; border-top: 1px solid #f0f3f7; border-bottom: 1px solid var(--line); }.data-table td { padding: 13px 18px; border-bottom: 1px solid #f0f3f7; color: #576780; }.data-table tr:last-child td { border-bottom: 0; }.data-table tbody tr:hover { background: #fbfdff; }.compact-table td, .compact-table th { padding-left: 22px; padding-right: 22px; }.customer-cell { display: flex; align-items: center; gap: 9px; }.customer-avatar { width: 28px; height: 28px; border-radius: 8px; color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; flex: 0 0 auto; }.customer-avatar.coral { background: #e8947c; }.customer-avatar.blue { background: #6d9fe4; }.customer-avatar.green { background: #58b59a; }.customer-avatar.purple { background: #9b8bdd; }.customer-cell strong, .customer-cell small { display: block; }.customer-cell strong { color: var(--ink); font-size: 11px; }.customer-cell small { color: var(--subtle); font-size: 9px; margin-top: 3px; }.table-status { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; }.table-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }.table-status.protected::before { background: var(--orange); }.table-status.public::before { background: var(--purple); }.table-action { color: var(--blue); border: 0; background: transparent; font-size: 10px; padding: 4px; }.table-action + .table-action { color: var(--muted); margin-left: 4px; }.rule-panel { min-height: 256px; }.health-score { display: flex; align-items: center; gap: 16px; padding: 0 22px 19px; }.score-ring { width: 76px; height: 76px; border-radius: 50%; background: conic-gradient(var(--teal) 0 96%, #e7f3f1 96% 100%); display: grid; place-content: center; text-align: center; position: relative; flex: 0 0 auto; }.score-ring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #fff; }.score-ring strong, .score-ring span { position: relative; z-index: 1; }.score-ring strong { font-size: 20px; }.score-ring span { font-size: 9px; color: var(--muted); }.health-score > div:last-child strong { display: block; font-size: 12px; }.health-score p { color: var(--muted); font-size: 10px; margin: 5px 0; }.health-score .positive { font-size: 10px; }.rule-list { border-top: 1px solid var(--line); padding: 6px 22px 11px; }.rule-list div { display: flex; justify-content: space-between; padding: 7px 0; font-size: 10px; color: var(--muted); }.rule-list strong { color: var(--ink); }
.level-chip { display: inline-flex; padding: 4px 7px; border-radius: 4px; color: var(--muted); background: #f1f4f7; font-size: 9px; }.level-chip.vip { color: #a77424; background: #fff6df; }

.filter-bar { display: flex; gap: 9px; align-items: center; margin-bottom: 14px; }.filter-search { height: 36px; width: 280px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: #fff; border-radius: 7px; padding: 0 11px; color: var(--subtle); }.filter-bar select, .merge-owner select { height: 36px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: #62728a; padding: 0 27px 0 11px; outline: none; font-size: 11px; }.filter-button { height: 36px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: #62728a; padding: 0 12px; font-size: 11px; margin-left: auto; }.filter-button span { color: var(--blue); font-size: 15px; margin-left: 6px; }.table-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }.toolbar-summary { color: var(--muted); font-size: 11px; }.toolbar-summary strong { color: var(--ink); margin-left: 3px; }.toolbar-actions { display: flex; gap: 2px; }.view-toggle { width: 27px; height: 27px; border: 1px solid transparent; color: var(--subtle); background: transparent; border-radius: 5px; }.view-toggle.active { background: #fff; border-color: var(--line); color: var(--blue); }.table-panel { overflow: hidden; }.check { appearance: none; width: 14px; height: 14px; border: 1px solid #ccd6e3; border-radius: 3px; background: #fff; vertical-align: middle; }.check:checked { background: var(--blue); border-color: var(--blue); box-shadow: inset 0 0 0 3px #fff; }.table-pagination { padding: 13px 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; color: var(--subtle); font-size: 10px; }.table-pagination > div { display: flex; align-items: center; gap: 4px; }.page-button { border: 0; background: transparent; color: var(--muted); width: 24px; height: 24px; border-radius: 5px; font-size: 10px; }.page-button.active { background: var(--blue-soft); color: var(--blue); font-weight: 700; }

.duplicate-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 19px; }.duplicate-summary > div { background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 16px 18px; display: grid; grid-template-columns: 1fr auto; column-gap: 8px; align-items: center; }.summary-label { color: var(--muted); font-size: 11px; grid-column: 1/-1; }.duplicate-summary strong { font-size: 24px; margin-top: 5px; }.duplicate-summary small { color: var(--subtle); font-size: 10px; align-self: end; margin-bottom: 3px; }.orange-number { color: var(--orange); }.green-number { color: var(--green); }.blue-number { color: var(--blue); }.duplicate-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(320px, .75fr); gap: 17px; }.duplicate-list { padding: 0 20px 8px; }.duplicate-item { border-top: 1px solid #eef2f6; padding: 17px 2px; display: flex; align-items: center; gap: 14px; }.duplicate-item:first-child { border-top: 0; }.duplicate-item:hover { background: #fcfdff; }.duplicate-item .match-summary { flex: 1; min-width: 0; }.match-summary strong, .match-summary small { display: block; }.match-summary strong { font-size: 12px; }.match-summary small { color: var(--muted); font-size: 10px; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; }.match-score { text-align: right; width: 72px; }.match-score strong { display: block; font-size: 14px; }.match-score small { display: block; color: var(--subtle); font-size: 9px; margin-top: 3px; }.risk-badge { border-radius: 4px; padding: 4px 6px; font-size: 9px; white-space: nowrap; }.risk-badge.high { color: #c96828; background: var(--orange-soft); }.risk-badge.medium { color: #98721d; background: #fff8dd; }.duplicate-item .table-action { white-space: nowrap; }.methodology-panel { min-height: 400px; }.strategy-score { margin: 0 22px 18px; background: #f7fafc; border: 1px solid #edf1f5; padding: 13px; border-radius: 8px; }.strategy-score span { color: var(--muted); font-size: 10px; }.strategy-score strong { float: right; font-size: 16px; color: var(--teal); }.progress { height: 5px; background: #e3f0ee; border-radius: 3px; overflow: hidden; margin-top: 10px; }.progress i { display: block; height: 100%; background: var(--teal); border-radius: 3px; }.method-item { display: flex; gap: 10px; padding: 12px 22px; border-top: 1px solid #f0f3f7; }.method-icon { width: 23px; height: 23px; flex: 0 0 auto; border-radius: 7px; display: grid; place-items: center; font-size: 11px; font-weight: 700; }.method-icon.hard { color: var(--orange); background: var(--orange-soft); }.method-icon.fuzzy { color: var(--blue); background: var(--blue-soft); }.method-icon.human { color: var(--purple); background: var(--purple-soft); }.method-item strong { font-size: 11px; }.method-item p { color: var(--muted); font-size: 10px; line-height: 1.65; margin-top: 3px; }.methodology-panel .outline-full-button { margin-top: 7px; }

.store-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 19px; }.mini-kpi { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; display: flex; gap: 11px; align-items: center; }.mini-icon { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; font-size: 16px; }.mini-icon.teal { color: var(--teal); background: var(--teal-soft); }.mini-icon.green { color: var(--green); background: #ebf8f0; }.mini-icon.orange { color: var(--orange); background: var(--orange-soft); }.mini-icon.blue { color: var(--blue); background: var(--blue-soft); }.mini-kpi strong, .mini-kpi small { display: block; }.mini-kpi strong { font-size: 19px; }.mini-kpi small { color: var(--muted); font-size: 10px; margin-top: 3px; }.store-name { display: flex; align-items: center; gap: 8px; }.store-name > span { width: 28px; height: 28px; border-radius: 7px; color: #fff; display: grid; place-items: center; font-size: 10px; font-weight: 700; }.store-name > span.coral { background: #e8947c; }.store-name > span.blue { background: #6d9fe4; }.store-name > span.green { background: #58b59a; }.store-name > span.purple { background: #9b8bdd; }.store-name strong, .store-name small { display: block; }.store-name strong { color: var(--ink); font-size: 11px; }.store-name small { color: var(--subtle); font-size: 9px; margin-top: 3px; }.status-chip { display: inline-flex; padding: 4px 6px; border-radius: 4px; font-size: 9px; }.status-chip.ok { background: var(--teal-soft); color: var(--teal); }.status-chip.pending { background: var(--orange-soft); color: #c87828; }

.public-pool-banner { background: #18304e; border-radius: 10px; padding: 21px 24px; color: #fff; display: flex; align-items: center; gap: 15px; margin-bottom: 18px; box-shadow: 0 10px 25px rgba(24,48,78,.14); }.pool-illustration { width: 46px; height: 46px; border-radius: 12px; background: rgba(255,255,255,.13); display: grid; place-items: center; font-size: 27px; color: #9ed2ff; }.public-pool-banner > div:nth-child(2) { flex: 1; }.public-pool-banner strong { font-size: 14px; }.public-pool-banner p { color: #b5c5d9; font-size: 11px; margin-top: 6px; }.public-pool-banner .button { margin-left: auto; }.pool-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(320px, .7fr); gap: 17px; }.pool-customer-list { padding: 0 22px 14px; }.pool-customer { display: flex; align-items: center; gap: 10px; border-top: 1px solid #f0f3f7; padding: 14px 0; }.pool-customer:first-child { border-top: 0; }.pool-customer > div { flex: 1; }.pool-customer strong, .pool-customer small { display: block; }.pool-customer strong { font-size: 11px; }.pool-customer small { color: var(--muted); font-size: 10px; margin-top: 4px; }.intent { font-size: 9px; padding: 4px 6px; border-radius: 4px; }.intent.high { color: #d46d46; background: #fff0ea; }.intent.medium { color: #947327; background: #fff8df; }.intent.low { color: var(--muted); background: #f1f4f7; }.tiny-action { border: 1px solid #dce5ef; color: var(--blue); background: #fff; font-size: 10px; border-radius: 5px; padding: 5px 9px; }.pool-rule-panel { padding-bottom: 12px; }.pool-rule { margin: 0 22px; padding: 13px 0; border-top: 1px solid #f0f3f7; display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; }.pool-rule strong { color: var(--ink); font-size: 11px; }

.report-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(320px, .75fr); gap: 17px; margin-bottom: 17px; }.line-chart { display: flex; height: 265px; padding: 0 22px 22px; }.y-axis { width: 37px; display: flex; flex-direction: column; justify-content: space-between; color: var(--subtle); font-size: 9px; padding: 7px 0 24px; }.chart-area { position: relative; flex: 1; }.grid-line { position: absolute; left: 0; right: 0; height: 1px; background: #edf1f5; }.grid-line.l1 { top: 7px; }.grid-line.l2 { top: 25%; }.grid-line.l3 { top: 50%; }.grid-line.l4 { top: 75%; }.chart-area svg { width: 100%; height: calc(100% - 25px); position: absolute; top: 0; left: 0; overflow: visible; }.x-axis { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; color: var(--subtle); font-size: 9px; }.report-total { color: var(--blue); font-size: 17px; font-weight: 700; }.report-total small { color: var(--muted); font-size: 10px; font-weight: 400; }.funnel { padding: 5px 22px 17px; }.funnel div { height: 35px; background: #e8f3ff; margin: 8px auto; border-radius: 4px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; color: var(--blue-strong); font-size: 10px; }.funnel div:nth-child(2) { background: #edf8f7; color: var(--teal); }.funnel div:nth-child(3) { background: #fff5e9; color: #c67a2b; }.funnel div:nth-child(4) { background: #f2efff; color: var(--purple); }.funnel strong { font-size: 11px; }.funnel-rate { margin: 0 22px; padding: 12px 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; }.funnel-rate strong { color: var(--green); font-size: 16px; }.report-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }.quality-list { padding: 0 22px 17px; }.quality-list > div { display: grid; grid-template-columns: 30px 60px 1fr 37px; gap: 9px; align-items: center; padding: 10px 0; border-top: 1px solid #f0f3f7; font-size: 10px; }.quality-rank { color: var(--subtle); }.quality-bar { height: 6px; border-radius: 3px; background: #edf1f5; overflow: hidden; }.quality-bar i { height: 100%; display: block; border-radius: 3px; background: var(--teal); }.quality-list b { color: var(--teal); text-align: right; }.attention-list { padding: 0 22px 17px; }.attention-list > div { display: flex; align-items: center; gap: 10px; padding: 13px 0; border-top: 1px solid #f0f3f7; }.attention-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }.attention-dot.red { background: var(--red); }.attention-dot.orange { background: var(--orange); }.attention-list > div > div { flex: 1; }.attention-list strong, .attention-list small { display: block; }.attention-list strong { font-size: 11px; }.attention-list small { color: var(--muted); font-size: 10px; margin-top: 4px; }

.modal-backdrop { display: none; position: fixed; inset: 0; z-index: 20; background: rgba(18, 32, 53, .43); align-items: center; justify-content: center; padding: 24px; }.modal-backdrop.open { display: flex; animation: fadeIn .16s ease; }.modal { width: min(580px, 100%); background: #fff; border-radius: 12px; box-shadow: 0 25px 70px rgba(12, 29, 51, .2); overflow: hidden; animation: modalIn .18s ease; }.wide-modal { width: min(840px, 100%); }.modal-header { padding: 23px 25px 18px; display: flex; align-items: flex-start; justify-content: space-between; }.modal-header h2 { font-size: 19px; }.close-button { border: 0; background: transparent; color: var(--subtle); font-size: 25px; line-height: 1; padding: 0 3px; }.form-notice { margin: 0 25px 18px; padding: 11px 12px; display: flex; gap: 9px; background: var(--blue-soft); border: 1px solid #d8e9ff; border-radius: 7px; color: var(--blue); }.form-notice span { font-size: 15px; }.form-notice p { color: #55729b; font-size: 10px; line-height: 1.6; }.form-grid { padding: 0 25px 5px; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }.form-grid label { display: flex; flex-direction: column; gap: 7px; color: #60718a; font-size: 11px; }.form-grid label.full { grid-column: 1/-1; }.form-grid input, .form-grid select, .form-grid textarea { outline: 0; border: 1px solid #dde5ef; border-radius: 6px; padding: 10px; color: var(--ink); background: #fff; font-size: 12px; resize: vertical; }.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus, .merge-owner select:focus { border-color: #8bb9f2; box-shadow: 0 0 0 3px #edf5ff; }.modal-footer { border-top: 1px solid var(--line); padding: 15px 25px; display: flex; justify-content: flex-end; gap: 8px; }.merge-alert { margin: 0 25px 14px; border: 1px solid #ffe0bf; background: #fff8ef; border-radius: 8px; padding: 13px; display: flex; gap: 10px; }.alert-mark { width: 22px; height: 22px; border-radius: 6px; background: var(--orange); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 12px; }.merge-alert strong { font-size: 12px; }.merge-alert p { color: #927658; font-size: 10px; margin-top: 5px; }.match-meta { display: flex; align-items: center; gap: 15px; padding: 0 25px 14px; color: var(--muted); font-size: 10px; }.match-meta strong { color: var(--ink); }.compare-grid { margin: 0 25px; display: grid; grid-template-columns: 1fr 40px 1fr; gap: 10px; align-items: center; }.record-card { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }.record-head { display: flex; align-items: center; gap: 8px; padding: 13px; background: #fbfcfe; border-bottom: 1px solid var(--line); }.record-head > div { flex: 1; }.record-head strong, .record-head small { display: block; }.record-head strong { font-size: 12px; }.record-head small { font-size: 9px; color: var(--subtle); margin-top: 3px; }.record-store { color: var(--blue); background: var(--blue-soft); border-radius: 4px; padding: 4px 5px; font-size: 9px; }.record-fields { padding: 7px 13px; }.record-fields > div { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f0f3f7; }.record-fields > div:last-child { border-bottom: 0; }.record-fields span { color: var(--muted); font-size: 10px; }.record-fields strong { color: var(--ink); font-size: 10px; text-align: right; }.match { color: var(--orange); background: var(--orange-soft); padding: 2px 4px; border-radius: 3px; font-size: 8px; font-style: normal; margin-left: 3px; }.master-choice { display: block; margin: 0 13px 13px; border: 1px solid #dce5ef; color: var(--muted); border-radius: 5px; padding: 8px; font-size: 10px; }.master-choice.selected { border-color: #a8cbf7; background: var(--blue-soft); color: var(--blue-strong); }.master-choice input { accent-color: var(--blue); margin-right: 5px; }.compare-divider { text-align: center; color: var(--subtle); font-size: 10px; }.compare-divider span { display: inline-block; width: 27px; height: 27px; border-radius: 50%; background: #f0f3f7; line-height: 27px; }.compare-divider i { display: none; }.merge-settings { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 17px 25px 3px; }.check-label, .merge-owner { font-size: 10px; color: var(--muted); }.check-label input { accent-color: var(--blue); margin-right: 5px; }.merge-owner { margin-left: auto; display: flex; align-items: center; gap: 8px; }.merge-owner select { height: 30px; font-size: 10px; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); background: var(--ink); color: #fff; border-radius: 7px; padding: 11px 15px; font-size: 11px; display: flex; gap: 8px; align-items: center; opacity: 0; pointer-events: none; z-index: 50; box-shadow: 0 10px 30px rgba(23,37,61,.2); transition: .22s ease; }.toast.show { opacity: 1; transform: translate(-50%, 0); }.toast-icon { width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; background: var(--green); font-size: 10px; }.toast.warning .toast-icon { background: var(--orange); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes modalIn { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 1220px) { .page-wrap { padding-left: 28px; padding-right: 28px; }.topbar { padding-left: 28px; padding-right: 28px; }.global-search { width: 230px; } }
@media (max-width: 900px) { body { min-width: 0; }.sidebar { width: 72px; padding: 22px 9px 14px; }.brand-lockup { padding: 0 8px 28px; }.brand-lockup > div:last-child, .workspace-switcher, .nav-label, .nav-count, .help-box, .user-copy, .user-menu .chevron { display: none; }.brand-lockup { justify-content: center; }.nav-item { justify-content: center; padding: 11px 8px; font-size: 0; }.nav-icon { font-size: 18px; }.user-menu { justify-content: center; padding: 7px 0; }.main-content { width: calc(100% - 72px); margin-left: 72px; }.topbar { padding: 0 18px; }.global-search { width: min(40vw, 220px); }.page-wrap { padding: 26px 18px 45px; }.stat-grid, .duplicate-summary, .store-kpi-row { grid-template-columns: repeat(2, 1fr); }.overview-grid, .lower-grid, .duplicate-layout, .pool-grid, .report-grid, .report-bottom { grid-template-columns: 1fr; }.filter-bar { flex-wrap: wrap; }.filter-search { flex: 1 1 220px; }.filter-button { margin-left: 0; }.page-heading { align-items: flex-start; flex-direction: column; }.heading-actions { width: 100%; }.heading-actions .button { flex: 1; }.compare-grid { grid-template-columns: 1fr; }.compare-divider { padding: 4px 0; }.compare-divider i { display: block; }.merge-owner { margin-left: 0; }.public-pool-banner { flex-wrap: wrap; }.public-pool-banner .button { margin-left: 61px; }.customer-table { min-width: 920px; } }
/* Store workflow surfaces */
.store-context-line { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 11px; margin: -8px 0 17px; }
.store-context-line .text-button { margin-left: auto; }
.store-dashboard-grid, .mobile-flow-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 17px; margin-bottom: 17px; }
.lower-store-grid { grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr); }
.store-daily-kpis { margin-bottom: 18px; }
.quick-action-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 22px 22px; }
.quick-action { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 13px 12px; text-align: left; display: grid; grid-template-columns: 33px 1fr; column-gap: 9px; align-items: center; }
.quick-action:hover { border-color: #bdd6f6; background: #fbfdff; }
.quick-action-icon { width: 33px; height: 33px; border-radius: 9px; display: grid; place-items: center; grid-row: span 2; font-size: 17px; }
.quick-action-icon.blue { color: var(--blue); background: var(--blue-soft); }.quick-action-icon.teal { color: var(--teal); background: var(--teal-soft); }.quick-action-icon.purple { color: var(--purple); background: var(--purple-soft); }.quick-action-icon.orange { color: var(--orange); background: var(--orange-soft); }
.quick-action strong, .quick-action small { display: block; }.quick-action strong { font-size: 11px; }.quick-action small { color: var(--muted); font-size: 9px; margin-top: 3px; }
.mobile-list { padding: 0 22px 14px; }.mobile-list-item { display: flex; align-items: center; gap: 10px; padding: 13px 0; border-top: 1px solid #eef2f6; min-width: 0; }.mobile-list-item:first-child { border-top: 0; }.mobile-list-item > div { flex: 1; min-width: 0; }.mobile-list-item strong, .mobile-list-item small { display: block; }.mobile-list-item strong { color: var(--ink); font-size: 11px; }.mobile-list-item small { color: var(--muted); font-size: 10px; line-height: 1.5; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.time-pill { flex: 0 0 auto; color: var(--blue); background: var(--blue-soft); border-radius: 5px; padding: 5px 6px; font-size: 10px; font-weight: 700; }.mobile-list-item .status-chip { flex: 0 0 auto; }.mobile-list-item .tiny-action { flex: 0 0 auto; }
.followup-list, .plan-mini-list { padding: 0 22px 14px; }.followup-row, .plan-mini-row { display: flex; align-items: center; gap: 9px; border-top: 1px solid #eef2f6; padding: 12px 0; min-width: 0; }.followup-row:first-child, .plan-mini-row:first-child { border-top: 0; }.followup-row > div, .plan-mini-row > div { flex: 1; min-width: 0; }.followup-row strong, .followup-row small, .plan-mini-row strong, .plan-mini-row small { display: block; }.followup-row strong, .plan-mini-row strong { font-size: 11px; }.followup-row small, .plan-mini-row small { color: var(--muted); font-size: 9px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.followup-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }.followup-dot.orange { background: var(--orange); }.followup-dot.purple { background: var(--purple); }.plan-mini-row b { color: var(--teal); font-size: 13px; }.plan-mini-row b.warning-number { color: var(--orange); }
.flow-step, .count-chip { display: inline-flex; align-items: center; padding: 4px 7px; border-radius: 4px; color: var(--blue); background: var(--blue-soft); font-size: 9px; white-space: nowrap; }.mobile-flow-layout { align-items: start; }.mobile-form { overflow: hidden; }.mobile-form-body { padding: 0 22px 22px; }.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.field-label { display: flex; flex-direction: column; gap: 7px; color: #60718a; font-size: 11px; margin-bottom: 13px; }.field-label input, .field-label select, .field-label textarea { width: 100%; min-height: 40px; outline: 0; border: 1px solid #dce5ef; border-radius: 7px; padding: 10px; color: var(--ink); background: #fff; font: inherit; font-size: 12px; resize: vertical; }.field-label textarea { min-height: 74px; }.field-label input:focus, .field-label select:focus, .field-label textarea:focus { border-color: #8bb9f2; box-shadow: 0 0 0 3px #edf5ff; }.check-field { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; margin: 2px 0 15px; }.check-field input { accent-color: var(--blue); width: 15px; height: 15px; }.button-full { width: 100%; min-height: 44px; justify-content: center; }.customer-service-summary { min-height: 50px; display: flex; align-items: center; gap: 9px; padding: 9px 10px; background: #f8fafc; border: 1px solid #edf1f5; border-radius: 7px; margin: -2px 0 14px; }.customer-service-summary > div { flex: 1; min-width: 0; }.customer-service-summary strong, .customer-service-summary small { display: block; }.customer-service-summary strong { font-size: 11px; }.customer-service-summary small { color: var(--muted); font-size: 9px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.summary-placeholder { color: var(--subtle); font-size: 10px; }.service-balance-panel { overflow: hidden; }.service-balance-card { padding: 0 22px 17px; }.balance-top { display: flex; justify-content: space-between; align-items: start; gap: 10px; }.balance-top span:first-child, .balance-top strong { display: block; }.balance-top span:first-child { color: var(--muted); font-size: 10px; }.balance-top strong { font-size: 27px; margin-top: 5px; }.balance-top strong small { color: var(--muted); font-size: 11px; font-weight: 400; }.balance-progress { height: 6px; border-radius: 4px; overflow: hidden; background: #eaf0f5; margin-top: 13px; }.balance-progress i { display: block; height: 100%; border-radius: inherit; background: var(--teal); }.balance-foot { display: flex; justify-content: space-between; gap: 8px; align-items: center; color: var(--muted); font-size: 10px; margin-top: 10px; }.balance-foot .text-button { padding: 0; }.balance-empty { padding: 19px 0; text-align: center; color: var(--subtle); font-size: 11px; line-height: 1.8; }.balance-empty small { font-size: 10px; }.service-history-panel, .payment-history-panel { overflow: hidden; }.service-row .service-icon, .payment-icon, .inquiry-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; flex: 0 0 auto; }.service-icon { color: var(--teal); background: var(--teal-soft); }.payment-icon { color: var(--orange); background: var(--orange-soft); font-weight: 700; }.service-row-meta { flex: 0 0 auto; text-align: right; }.service-row-meta b, .service-row-meta small { display: block; }.service-row-meta b { color: var(--teal); font-size: 11px; }.service-row-meta small { color: var(--subtle); font-size: 9px; margin-top: 3px; }.timeline-list { padding: 0 22px 15px; }.timeline-item { display: flex; align-items: center; gap: 11px; border-top: 1px solid #eef2f6; padding: 13px 0; min-width: 0; }.timeline-item:first-child { border-top: 0; }.timeline-time { color: var(--blue); font-size: 10px; width: 63px; flex: 0 0 auto; }.timeline-content { flex: 1; min-width: 0; }.timeline-content > div { display: flex; align-items: center; gap: 7px; }.timeline-content strong { font-size: 11px; }.timeline-content small { display: block; color: var(--muted); font-size: 9px; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.inquiry-row { align-items: flex-start; }.inquiry-icon.green { color: var(--green); background: #ebf8f0; }.inquiry-icon.orange { color: var(--orange); background: var(--orange-soft); }.inquiry-row > div { flex: 1; }.inquiry-row strong { display: flex; align-items: center; gap: 6px; }.inquiry-row em { display: block; color: var(--subtle); font-size: 9px; font-style: normal; margin-top: 5px; }.payment-row > b { color: var(--orange); font-size: 12px; white-space: nowrap; }.empty-state { color: var(--subtle); font-size: 11px; padding: 20px 0; text-align: center; }.payment-summary-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 17px; }.payment-summary-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; }.payment-summary-card span, .payment-summary-card small { color: var(--muted); font-size: 10px; display: block; }.payment-summary-card strong { display: block; font-size: 20px; margin: 8px 0 4px; }.payment-summary-card small { color: var(--green); }.payments-layout { margin-bottom: 17px; }.plan-card-list { padding: 0 22px 14px; }.plan-card { border-top: 1px solid #eef2f6; padding: 14px 0; }.plan-card:first-child { border-top: 0; }.plan-card-head, .plan-card-foot { display: flex; justify-content: space-between; gap: 10px; align-items: center; }.plan-card-head strong, .plan-card-head small { display: block; }.plan-card-head strong { font-size: 11px; }.plan-card-head small { color: var(--muted); font-size: 9px; margin-top: 4px; }.plan-card-balance { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; }.plan-card-balance strong { font-size: 22px; }.plan-card-balance strong small { color: var(--muted); font-size: 10px; font-weight: 400; }.plan-card-balance span { color: var(--muted); font-size: 10px; }.plan-card .balance-progress { margin-top: 8px; }.plan-card-foot { color: var(--muted); font-size: 10px; margin-top: 9px; }.plan-card-foot .tiny-action { margin-left: auto; }
.more-button, .text-button, .tiny-action, .button, .nav-item, .quick-action, .close-button { touch-action: manipulation; }
.mobile-home-nav { display: none; }

@media (max-width: 700px) {
  .real-mobile-entry, .real-console-entry { display: none; }
  body { min-width: 0; padding-bottom: 70px; }
  .sidebar { position: fixed; top: auto; bottom: 0; left: 0; width: 100%; height: 66px; min-height: 0; padding: 0 4px; display: flex; flex-direction: row; align-items: stretch; overflow-x: auto; overflow-y: hidden; z-index: 25; box-shadow: 0 -8px 24px rgba(17, 38, 65, .08); }
  .brand-lockup, .workspace-switcher, .sidebar-footer { display: none; }
  .sidebar .nav-group { display: flex; flex: 0 0 auto; gap: 0; margin: 0; padding: 0 4px; border-right: 1px solid rgba(220, 229, 239, .85); }
  .sidebar .nav-group:last-of-type { border-right: 0; }
  .sidebar .nav-label, .sidebar .nav-count { display: none; }
  .nav-item { width: 68px; min-width: 68px; height: 66px; padding: 7px 3px; gap: 3px; flex-direction: column; justify-content: center; font-size: 9px; line-height: 1.2; white-space: nowrap; }.mobile-home-nav { display: flex; }
  .nav-icon { font-size: 17px; line-height: 1; }
  .main-content { width: 100%; margin-left: 0; }
  .topbar { height: 58px; padding: 0 13px; }
  .crumbs span, .crumbs b { display: none; }.crumbs strong { font-size: 12px; }.topbar-actions { gap: 7px; }.global-search { width: min(54vw, 210px); height: 34px; }.global-search kbd { display: none; }.icon-button { width: 34px; }.top-avatar { width: 30px; height: 30px; }
  .page-wrap { padding: 18px 12px 26px; }.page-heading { gap: 14px; margin-bottom: 18px; }.page-heading h1 { font-size: 24px; }.page-heading p { font-size: 11px; line-height: 1.6; margin-top: 6px; }.heading-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }.heading-actions .button { width: 100%; min-height: 44px; padding: 0 8px; justify-content: center; font-size: 11px; }.button { min-height: 42px; }
  .store-context-line { flex-wrap: wrap; gap: 8px 12px; margin: -3px 0 15px; font-size: 10px; }.store-context-line .text-button { margin-left: 0; width: 100%; text-align: left; }.store-dashboard-grid, .mobile-flow-layout, .lower-store-grid { grid-template-columns: 1fr; gap: 12px; margin-bottom: 12px; }.store-kpi-row { gap: 8px; margin-bottom: 12px; }.store-daily-kpis .mini-kpi { padding: 11px 10px; gap: 8px; }.store-daily-kpis .mini-icon { width: 29px; height: 29px; font-size: 14px; }.store-daily-kpis .mini-kpi strong { font-size: 17px; }.store-daily-kpis .mini-kpi small { font-size: 9px; }.panel-heading { padding: 16px 15px 13px; }.panel-heading h2 { font-size: 14px; }.panel-heading p { font-size: 10px; margin-top: 4px; }.quick-action-grid { padding: 0 15px 15px; gap: 8px; }.quick-action { min-height: 66px; padding: 10px 9px; }.quick-action strong { font-size: 10px; }.quick-action small { font-size: 8px; }.mobile-list, .followup-list, .plan-mini-list, .timeline-list, .plan-card-list, .service-balance-card { padding-left: 15px; padding-right: 15px; }.mobile-form-body { padding: 0 15px 15px; }.field-grid { grid-template-columns: 1fr; gap: 0; }.mobile-list-item, .timeline-item { gap: 8px; }.mobile-list-item .status-chip { font-size: 8px; padding: 4px 5px; }.mobile-list-item .tiny-action, .timeline-item .tiny-action { padding: 7px 8px; font-size: 9px; }.time-pill { font-size: 9px; }.timeline-time { width: 58px; font-size: 9px; }.timeline-content strong { font-size: 10px; }.payment-summary-row { grid-template-columns: repeat(3, 1fr); gap: 7px; }.payment-summary-card { padding: 11px 9px; }.payment-summary-card strong { font-size: 16px; margin: 6px 0 3px; }.payment-summary-card span, .payment-summary-card small { font-size: 8px; }.payment-summary-card small { line-height: 1.3; }.filter-bar { gap: 7px; }.filter-search { width: 100%; flex-basis: 100%; }.filter-bar select { flex: 1; min-width: 0; }.filter-button { width: 100%; }.table-toolbar { margin-bottom: 8px; }.store-heading .heading-actions { grid-template-columns: 1fr 1fr; }
  .modal-backdrop { padding: 0; align-items: flex-end; }.modal, .wide-modal { width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0; overflow: auto; }.modal-header { padding: 19px 16px 14px; }.modal-header h2 { font-size: 17px; }.form-notice, .merge-alert { margin-left: 16px; margin-right: 16px; }.form-grid { grid-template-columns: 1fr; padding-left: 16px; padding-right: 16px; gap: 12px; }.form-grid label.full { grid-column: auto; }.modal-footer { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); flex-wrap: wrap; }.modal-footer .button { flex: 1; min-width: 120px; }.merge-modal-footer .button:first-child { flex-basis: 100%; }.compare-grid { margin: 0 16px; }.match-meta { padding-left: 16px; padding-right: 16px; flex-wrap: wrap; gap: 7px 12px; }.merge-settings { padding-left: 16px; padding-right: 16px; gap: 11px; }.merge-owner { width: 100%; margin-left: 0; justify-content: space-between; }.merge-owner select { flex: 1; }
}

@media (max-width: 390px) {
  .global-search { width: 47vw; }.page-heading h1 { font-size: 22px; }.payment-summary-card strong { font-size: 14px; }.payment-summary-card { padding-left: 7px; padding-right: 7px; }.nav-item { width: 64px; min-width: 64px; }
}

.service-row { position: relative; }
.modal-backdrop { z-index: 40; }
.service-row-reversed { opacity: .7; }
.service-row .tiny-action { flex: 0 0 auto; padding: 6px 8px; color: var(--orange); border-color: #f1d9c9; }
.mobile-customer-actions { display: none; }
.form-readonly { display: block; min-height: 40px; padding: 10px; border: 1px solid #edf1f5; border-radius: 7px; color: var(--ink); background: #f8fafc; font-size: 12px; }
.customer-detail-body { padding: 0 25px 8px; max-height: min(68vh, 680px); overflow: auto; }
.customer-detail-hero { display: flex; align-items: center; gap: 12px; padding: 0 0 17px; border-bottom: 1px solid var(--line); }
.customer-detail-hero > div { flex: 1; min-width: 0; }
.customer-detail-hero strong, .customer-detail-hero p, .customer-detail-hero small { display: block; }
.customer-detail-hero strong { font-size: 16px; }
.customer-detail-hero p { color: var(--ink); font-size: 11px; margin-top: 5px; }
.customer-detail-hero small { color: var(--muted); font-size: 10px; margin-top: 5px; }
.detail-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 15px 0; }
.detail-stat-grid > div { padding: 11px 12px; border: 1px solid var(--line); border-radius: 7px; background: #fbfcfe; }
.detail-stat-grid span, .detail-stat-grid strong { display: block; }
.detail-stat-grid span { color: var(--muted); font-size: 9px; }
.detail-stat-grid strong { color: var(--ink); font-size: 16px; margin-top: 6px; }
.detail-section { padding: 14px 0; border-top: 1px solid #eef2f6; }
.detail-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.detail-section-head strong { font-size: 12px; }
.detail-section-head span { color: var(--muted); font-size: 10px; }
.detail-section > p { color: var(--muted); font-size: 10px; line-height: 1.65; margin-top: 8px; }
.detail-list-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 10px 0 0; }
.detail-list-row > span { color: var(--muted); font-size: 9px; }
.detail-list-row > div { min-width: 0; }
.detail-list-row strong, .detail-list-row small { display: block; }
.detail-list-row strong { color: var(--ink); font-size: 10px; }
.detail-list-row small { color: var(--muted); font-size: 9px; line-height: 1.5; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-empty { color: var(--subtle); font-size: 10px; margin-top: 9px; }
.custom-field-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.custom-field-list span { display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border-radius: 5px; background: var(--blue-soft); color: var(--blue-strong); font-size: 9px; }
.custom-field-list b { font-weight: 700; }

.field-help { color: var(--subtle); font-size: 9px; line-height: 1.5; margin-top: -2px; }
.payment-quick-actions { display: flex; flex-wrap: wrap; gap: 7px; margin: -3px 0 12px; }
.payment-quick-actions .tiny-action { color: var(--orange); border-color: #f1d9c9; background: #fffaf5; }
.payment-entitlement-preview { display: grid; gap: 4px; padding: 11px 12px; margin: 0 0 13px; border: 1px solid #f2dfcb; border-radius: 7px; background: #fffaf5; }
.payment-entitlement-preview strong { color: #9a5e22; font-size: 12px; }
.payment-entitlement-preview span { color: #8b755f; font-size: 10px; line-height: 1.55; }
.rules-modal-body { padding: 0 25px 7px; max-height: min(68vh, 680px); overflow: auto; }
.rules-section { padding: 0 0 18px; margin-bottom: 17px; border-bottom: 1px solid var(--line); }
.rules-section:last-child { margin-bottom: 0; border-bottom: 0; }
.rules-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.rules-section-head > div { min-width: 0; }
.rules-section-head strong, .rules-section-head small { display: block; }
.rules-section-head strong { font-size: 13px; }
.rules-section-head small { color: var(--muted); font-size: 10px; margin-top: 3px; }
.rules-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; font-size: 14px; font-weight: 700; }
.rules-icon.orange { color: var(--orange); background: var(--orange-soft); }
.rules-icon.teal { color: var(--teal); background: var(--teal-soft); }
.rules-icon.blue { color: var(--blue); background: var(--blue-soft); }
.rules-icon.purple { color: #7659c7; background: #f0ecff; }
.rules-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.rules-grid > div { padding: 11px 10px; border: 1px solid var(--line); border-radius: 7px; background: #fbfcfe; }
.rules-grid span, .rules-grid strong, .rules-grid small { display: block; }
.rules-grid span { color: var(--muted); font-size: 9px; }
.rules-grid strong { color: var(--ink); font-size: 15px; margin: 5px 0 3px; }
.rules-grid small { color: var(--subtle); font-size: 9px; line-height: 1.45; }
.rules-note { color: var(--muted); font-size: 10px; line-height: 1.65; margin-top: 11px; }
.rules-list { display: grid; gap: 0; }
.rules-list > div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 9px; padding: 10px 0; border-top: 1px solid #eef2f6; }
.rules-list > div:first-child { border-top: 0; }
.rules-list span { color: var(--muted); font-size: 10px; }
.rules-list strong { color: var(--ink); font-size: 11px; }
.rules-list small { display: block; color: var(--subtle); font-size: 9px; line-height: 1.55; margin-top: 3px; }
.rules-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.rules-tags span { padding: 6px 8px; border-radius: 5px; color: var(--blue-strong); background: var(--blue-soft); font-size: 9px; }
.rules-toggle-list { display: grid; gap: 9px; }
.rules-toggle { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: center; padding: 11px 12px; border: 1px solid var(--line); border-radius: 7px; background: #fbfcfe; cursor: pointer; }
.rules-toggle input { position: absolute; left: 12px; top: 50%; width: 34px; height: 20px; margin: 0; opacity: 0; transform: translateY(-50%); cursor: pointer; z-index: 2; }
.rules-toggle > span:last-child { min-width: 0; }
.rules-toggle strong, .rules-toggle small { display: block; }
.rules-toggle strong { color: var(--ink); font-size: 11px; }
.rules-toggle small { color: var(--subtle); font-size: 9px; line-height: 1.5; margin-top: 3px; }
.toggle-track { position: relative; width: 34px; height: 20px; border-radius: 12px; background: #cbd5e1; transition: background .16s ease; }
.toggle-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(18, 32, 53, .2); transition: transform .16s ease; }
.rules-toggle input:checked + .toggle-track { background: var(--teal); }
.rules-toggle input:checked + .toggle-track::after { transform: translateX(14px); }

@media (max-width: 700px) {
  .mobile-customer-actions { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; }
  .mobile-customer-actions .table-action { padding: 6px 5px; font-size: 9px; }
  .customer-cell { min-width: 285px; }
  .customer-detail-body { padding-left: 16px; padding-right: 16px; max-height: 66vh; }
  .customer-detail-hero strong { font-size: 15px; }
  .detail-stat-grid { gap: 7px; }
  .detail-stat-grid > div { padding: 10px 8px; }
  .detail-stat-grid strong { font-size: 14px; }
  .detail-list-row { grid-template-columns: 76px minmax(0, 1fr); gap: 7px; }
  .modal-footer .button { min-height: 42px; }
  .rules-modal-body { padding-left: 16px; padding-right: 16px; max-height: 66vh; }
  .rules-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rules-grid strong { font-size: 14px; }
  .rules-list > div { grid-template-columns: 76px minmax(0, 1fr); gap: 7px; }
}