:root{
  --bg-page:#F5F5F7;
  --bg-card:#FFFFFF;
  --bg-soft:#FBFBFD;
  --text-primary:#1D1D1F;
  --text-secondary:#6E6E73;
  --text-tertiary:#86868B;
  --border-soft:#E5E5EA;
  --blue:#007AFF;
  --green:#34C759;
  --orange:#FF9500;
  --red:#FF3B30;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:22px;
  --shadow-card:0 8px 30px rgba(0,0,0,0.04);
  --shadow-card-hover:0 14px 40px rgba(0,0,0,0.07);
  --page-padding:32px;
  --section-gap:24px;
  --card-padding:20px;
  --card-gap:16px;
  --table-row-height:52px;
}

*{box-sizing:border-box}
html{background:var(--bg-page);scroll-behavior:smooth}
body{
  background:var(--bg-page);
  color:var(--text-primary);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;
  letter-spacing:0;
  line-break:strict;
  overflow-wrap:break-word;
  font-synthesis:none;
}
h1,h2,h3,.page-title{text-wrap:balance}
p,.page-subtitle,.cell-sub{text-wrap:pretty}

.page-shell,
main{
  background:
    radial-gradient(circle at 20% -10%,rgba(0,122,255,.08),transparent 24rem),
    var(--bg-page);
}

.content{
  padding:var(--page-padding);
  display:flex;
  flex-direction:column;
  gap:var(--section-gap);
  animation:pageFadeUp 180ms ease-out both;
}
.content>*{
  animation:cardAppear 180ms ease-out both;
}
.content>*:nth-child(2){animation-delay:35ms}
.content>*:nth-child(3){animation-delay:70ms}
.content>*:nth-child(4){animation-delay:105ms}
@keyframes cardAppear{
  from{opacity:0;transform:translateY(7px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes pageFadeUp{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

.sidebar{
  background:linear-gradient(180deg,#151A24 0%,#111827 100%);
  border-right:1px solid rgba(255,255,255,.06);
}
.brand{gap:12px}
.brand-mark{
  border-radius:var(--radius-md);
  background:linear-gradient(135deg,var(--blue),#5AC8FA);
  box-shadow:0 10px 30px rgba(0,122,255,.25);
}
.sidebar nav a{
  border-radius:var(--radius-md);
  transition:background 160ms ease,color 160ms ease,transform 160ms ease;
}
.sidebar nav a:hover{background:rgba(255,255,255,.08);transform:translateX(2px)}
.sidebar nav a.active{
  background:var(--blue);
  color:#fff;
  box-shadow:0 12px 30px rgba(0,122,255,.22);
}
.user-card{
  border-top:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  border-radius:var(--radius-lg);
  padding:14px;
}

.global-sync-button{
  border:1px solid rgba(0,122,255,.18);
  background:rgba(0,122,255,.08);
  color:#005FCC;
  border-radius:999px;
  min-height:40px;
  padding:0 16px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:background 160ms ease,border-color 160ms ease,transform 160ms ease,box-shadow 160ms ease;
}
.global-sync-button:hover{
  background:rgba(0,122,255,.12);
  border-color:rgba(0,122,255,.30);
  box-shadow:0 8px 24px rgba(0,122,255,.10);
}
.global-sync-button:disabled{
  cursor:progress;
  opacity:.78;
}

.topbar,
.page-header{
  min-height:96px;
  padding:24px var(--page-padding);
  background:rgba(245,245,247,.84);
  backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid rgba(229,229,234,.86);
}
.topbar h1,
.page-title{
  font-size:28px;
  line-height:1.2;
  font-weight:700;
  color:var(--text-primary);
}
.topbar p,
.page-subtitle{
  margin-top:6px;
  font-size:14px;
  line-height:1.55;
  font-weight:400;
  color:var(--text-secondary);
}
.topbar-actions,.page-actions{gap:12px}

.owner-switch select,
.filters select,
.filters input,
.search,
.form-input,
.form-select,
input[type="text"],
input[type="number"],
input[type="date"],
select{
  min-height:40px;
  border:1px solid var(--border-soft);
  border-radius:var(--radius-md);
  background:var(--bg-card);
  color:var(--text-primary);
  font-size:13px;
  font-weight:600;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
  transition:border-color 140ms ease,box-shadow 140ms ease,background 140ms ease;
}
.owner-switch select:focus,
.filters select:focus,
.filters input:focus,
.search:focus,
.form-input:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus{
  outline:0;
  border-color:rgba(0,122,255,.52);
  box-shadow:0 0 0 4px rgba(0,122,255,.12);
}

.panel,
.section-card,
.form-card,
.table-panel,
.toolbar-panel,
.family-card,
.inbound-family-card,
.inbound-shipment-card,
.metric,
.metric-card{
  background:var(--bg-card);
  border:1px solid rgba(229,229,234,.86);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  transition:border-color 160ms ease,box-shadow 160ms ease,transform 160ms ease;
}
.panel,
.section-card,
.form-card,
.table-panel,
.toolbar-panel{padding:var(--card-padding)}
.panel:hover,
.section-card:hover,
.family-card:hover,
.inbound-family-card:hover,
.inbound-shipment-card:hover,
.metric:hover,
.metric-card:hover{
  border-color:rgba(0,122,255,.18);
  box-shadow:var(--shadow-card-hover);
}
.metric-grid{gap:var(--card-gap)}
.metric,
.metric-card{
  min-height:128px;
  padding:20px;
  text-align:left;
}
.metric span,
.metric-label{
  font-size:13px;
  line-height:1.4;
  font-weight:600;
  color:var(--text-secondary);
}
.metric b,
.metric-value{
  margin-top:8px;
  display:block;
  font-size:30px;
  line-height:1.1;
  font-weight:700;
  color:var(--text-primary);
}
.metric small,
.metric-help{
  margin-top:8px;
  display:block;
  font-size:12px;
  line-height:1.45;
  color:var(--text-tertiary);
}
.metric.active{
  border-color:rgba(0,122,255,.42);
  box-shadow:0 0 0 3px rgba(0,122,255,.12),var(--shadow-card);
}

.btn,
.apple-button{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid var(--border-soft);
  border-radius:var(--radius-md);
  background:var(--bg-card);
  color:var(--text-primary);
  padding:0 16px;
  font-size:13px;
  font-weight:700;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
  transition:background 140ms ease,border-color 140ms ease,box-shadow 140ms ease,transform 120ms ease,color 140ms ease;
}
.btn:hover,
.apple-button:hover{
  border-color:rgba(0,122,255,.28);
  box-shadow:0 8px 20px rgba(0,0,0,.06);
  transform:translateY(-1px);
}
.btn:active,
.btn.is-pressed,
.apple-button:active,
.apple-button.is-pressed{
  transform:translateY(0) scale(.99);
  box-shadow:none;
}
.btn.primary,
.apple-button-primary{
  background:var(--blue);
  border-color:var(--blue);
  color:#fff;
  box-shadow:0 10px 22px rgba(0,122,255,.22);
}
.btn.primary:hover,
.apple-button-primary:hover{
  background:#006EE6;
  border-color:#006EE6;
}
.apple-button-secondary{background:var(--bg-soft)}
.apple-button-ghost{background:transparent;border-color:transparent;box-shadow:none}
.apple-button-danger,
.btn.danger{
  color:var(--red);
  border-color:rgba(255,59,48,.22);
  background:rgba(255,59,48,.06);
}
button[disabled],
.btn[disabled]{
  opacity:.58;
  cursor:not-allowed;
  transform:none!important;
  box-shadow:none!important;
}

.badge,
.status-badge{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 9px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  border:1px solid transparent;
  background:var(--bg-soft);
  color:var(--text-secondary);
}
.badge.success,.status-success{background:rgba(52,199,89,.10);border-color:rgba(52,199,89,.20);color:#148A36}
.badge.warning,.status-warning{background:rgba(255,149,0,.12);border-color:rgba(255,149,0,.22);color:#A35C00}
.badge.danger,.status-danger{background:rgba(255,59,48,.10);border-color:rgba(255,59,48,.20);color:#B42318}
.badge.info,.status-muted{background:rgba(0,122,255,.10);border-color:rgba(0,122,255,.18);color:#0057B8}

.table-wrap,
.data-table-wrap,
.inventory-table-wrap{
  border:1px solid var(--border-soft);
  border-radius:var(--radius-lg);
  background:var(--bg-card);
  overflow:auto;
}
table,
.data-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:13px;
}
thead th,
.data-table th{
  height:44px;
  background:var(--bg-soft);
  color:var(--text-secondary);
  font-size:12px;
  font-weight:700;
  text-align:left;
  border-bottom:1px solid var(--border-soft);
}
tbody td,
.data-table td{
  min-height:var(--table-row-height);
  padding-top:12px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(229,229,234,.72);
  color:var(--text-primary);
  vertical-align:middle;
}
tbody tr{transition:background 120ms ease}
tbody tr:hover{background:rgba(0,122,255,.035)}
.number-cell{text-align:right;font-variant-numeric:tabular-nums}
.money-cell{font-variant-numeric:tabular-nums;font-weight:700}

.toolbar,
.filter-row,
.toolbar-panel{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.filters,
.actions{gap:10px}
.section-header,
.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.section-title,
.panel-head h2{
  font-size:18px;
  line-height:1.3;
  font-weight:700;
  color:var(--text-primary);
}
.panel-head span,
.cell-sub,
.muted,
.form-help{
  color:var(--text-secondary);
  font-size:12px;
  line-height:1.45;
}

details>summary{cursor:pointer;list-style:none}
details>summary::-webkit-details-marker{display:none}
.family-card summary,
.inbound-shipment-head{
  border-radius:var(--radius-md);
}
.family-sticky-context{
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(14px);
  border:1px solid rgba(229,229,234,.86);
  border-radius:var(--radius-md);
}

.toast{
  border:1px solid rgba(229,229,234,.9);
  background:rgba(29,29,31,.92);
  color:#fff;
  border-radius:999px;
  box-shadow:0 18px 44px rgba(0,0,0,.18);
}

.empty,
.empty-state{
  color:var(--text-tertiary);
  background:var(--bg-soft);
  border:1px dashed var(--border-soft);
  border-radius:var(--radius-lg);
  padding:24px;
  text-align:center;
}
.failure-panel{
  border-radius:var(--radius-lg);
  border:1px solid rgba(255,149,0,.24);
  background:rgba(255,149,0,.08);
  color:#7A4100;
}
.operational-alert-bar{
  margin:16px var(--page-padding) 0;
  border-radius:var(--radius-lg);
  border:1px solid rgba(255,149,0,.24);
  background:rgba(255,149,0,.08);
}
.first-visit-banner{
  margin:16px var(--page-padding) 0;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border:1px solid rgba(0,122,255,.18);
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg,#fff,#f5f9ff);
  box-shadow:var(--shadow-card);
}
.first-visit-banner[hidden]{display:none}
.first-visit-banner strong,
.first-visit-banner span{display:block}
.first-visit-banner span{
  margin-top:4px;
  color:var(--text-secondary);
  font-size:13px;
  line-height:1.55;
}
.chart-board{overflow:hidden}
.chart-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  padding:18px;
}
.chart-card{
  min-width:0;
  border:1px solid var(--border-soft);
  border-radius:var(--radius-lg);
  background:var(--bg-soft);
  overflow:hidden;
}
.chart-head{
  min-height:58px;
  padding:14px 16px 8px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.chart-head b{font-size:14px}
.chart-head span{
  color:var(--text-secondary);
  font-size:12px;
  line-height:1.45;
  text-align:right;
}
.echart-box{
  min-height:320px;
  padding:6px 10px 12px;
}
.echart-box.ranking-chart{
  padding-left:4px;
  padding-right:8px;
}
.echart-box .skeleton{
  width:100%;
  height:278px;
  border-radius:var(--radius-md);
}
.chart-empty{
  min-height:276px;
  display:grid;
  place-content:center;
  gap:10px;
}
.chart-source-note{
  margin:0;
  padding:0 20px 18px;
  color:var(--text-secondary);
  font-size:12px;
  line-height:1.55;
}
details[open]>*:not(summary){
  animation:panelReveal 180ms ease-out both;
}
@keyframes panelReveal{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:translateY(0)}
}

dialog.modal,
dialog.panel{
  border:1px solid var(--border-soft);
  border-radius:var(--radius-xl);
  box-shadow:0 24px 80px rgba(0,0,0,.18);
}
dialog::backdrop{background:rgba(0,0,0,.22);backdrop-filter:blur(4px)}

.skeleton{
  background:linear-gradient(90deg,#f1f1f4,#fafafa,#f1f1f4);
  background-size:200% 100%;
  animation:skeleton 1.1s ease-in-out infinite;
}
@keyframes skeleton{to{background-position:-200% 0}}

.monthly-family-panel{scroll-margin-top:110px}
.month-switch .btn{min-height:34px;padding:0 13px}
.monthly-family-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:14px;
}
.monthly-family-row{
  border:1px solid var(--border-soft);
  border-radius:var(--radius-md);
  background:var(--bg-soft);
  overflow:hidden;
}
.monthly-family-row summary{
  display:grid;
  grid-template-columns:54px minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  padding:14px 16px;
}
.monthly-family-row summary:hover{background:rgba(0,122,255,.04)}
.monthly-family-row .rank{
  width:36px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#fff;
  color:var(--text-secondary);
  font-size:12px;
  font-weight:800;
}
.monthly-family-row summary b{
  display:block;
  color:var(--text-primary);
  font-size:14px;
}
.monthly-family-row summary small{
  display:block;
  margin-top:4px;
  color:var(--text-secondary);
  font-size:12px;
}
.monthly-family-row summary strong{
  color:var(--text-primary);
  font-size:17px;
  font-variant-numeric:tabular-nums;
}
.monthly-sku-table{
  border-top:1px solid var(--border-soft);
  background:#fff;
}
.monthly-sku-table th:first-child,
.monthly-sku-table td:first-child{padding-left:18px}
.monthly-sku-table th:last-child,
.monthly-sku-table td:last-child{padding-right:18px}

.demand-panel .family-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:14px;
}
.demand-family-card{
  overflow:hidden;
}
.demand-family-card summary{
  display:grid;
  grid-template-columns:minmax(260px,1.2fr) minmax(420px,1fr) auto;
  align-items:center;
  gap:18px;
  padding:18px 20px;
}
.demand-title{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:5px;
}
.demand-title strong{
  color:var(--text-primary);
  font-size:15px;
  line-height:1.35;
}
.demand-title span,
.demand-title em{
  color:var(--text-secondary);
  font-size:12px;
  line-height:1.45;
}
.demand-title em{
  font-style:normal;
  color:var(--text-tertiary);
}
.demand-numbers{
  display:grid;
  grid-template-columns:repeat(4,minmax(88px,1fr));
  gap:10px;
}
.demand-numbers span{
  min-height:58px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  padding:10px 12px;
  border:1px solid var(--border-soft);
  border-radius:var(--radius-md);
  background:var(--bg-soft);
  color:var(--text-secondary);
  font-size:12px;
}
.demand-numbers b{
  color:var(--text-primary);
  font-size:17px;
  font-variant-numeric:tabular-nums;
}
.demand-detail{
  border-top:1px solid var(--border-soft);
  background:#fff;
}
.demand-insight-strip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 18px;
  background:linear-gradient(180deg,#fff,#f8fbff);
  color:var(--text-secondary);
  font-size:12px;
  line-height:1.5;
  border-bottom:1px solid var(--border-soft);
}
.demand-detail table th:first-child,
.demand-detail table td:first-child{padding-left:18px}
.demand-detail table th:last-child,
.demand-detail table td:last-child{padding-right:18px}
.trend-pill{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 9px;
  border-radius:999px;
  background:var(--bg-soft);
  color:var(--text-secondary);
  font-size:12px;
  font-weight:700;
}
.trend-pill.success{background:rgba(52,199,89,.10);color:#148A36}
.trend-pill.warning{background:rgba(255,149,0,.12);color:#A35C00}

.sales-performance-hero{
  scroll-margin-top:110px;
}
.performance-summary{
  margin-top:18px;
}
.performance-panel .panel-head{
  padding-bottom:14px;
  border-bottom:1px solid var(--border-soft);
}
.performance-family-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:14px;
}
.performance-family-card{
  overflow:hidden;
}
.performance-family-card summary{
  display:grid;
  grid-template-columns:54px minmax(0,1fr) minmax(160px,auto);
  align-items:center;
  gap:16px;
  padding:16px 18px;
}
.performance-family-card summary:hover{
  background:rgba(0,122,255,.035);
}
.performance-family-card .rank{
  width:38px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:var(--bg-soft);
  color:var(--text-secondary);
  font-size:12px;
  font-weight:800;
}
.performance-family-title{
  min-width:0;
}
.performance-family-title strong{
  display:block;
  color:var(--text-primary);
  font-size:15px;
  line-height:1.35;
}
.performance-family-title span,
.performance-family-title em{
  display:block;
  margin-top:4px;
  color:var(--text-secondary);
  font-size:12px;
  line-height:1.45;
}
.performance-family-title em{
  color:var(--text-tertiary);
  font-style:normal;
}
.performance-family-money{
  text-align:right;
}
.performance-family-money b{
  display:block;
  color:var(--text-primary);
  font-size:19px;
  font-variant-numeric:tabular-nums;
}
.performance-family-money small{
  display:block;
  margin-top:4px;
  color:var(--text-tertiary);
  font-size:12px;
}
.performance-detail{
  border-top:1px solid var(--border-soft);
  background:#fff;
}
.performance-sku-table td:nth-child(2),
.performance-sku-table td:nth-child(3),
.performance-sku-table td:nth-child(4){
  font-variant-numeric:tabular-nums;
}
.performance-sku-table tr.zero-sales-sku{
  background:rgba(142,142,147,.055);
}
.performance-sku-table tr.zero-sales-sku td{
  color:var(--text-secondary);
}
.performance-sku-table tr.zero-sales-sku td:first-child b{
  color:var(--text-primary);
}
.share-cell{
  width:118px;
  height:7px;
  overflow:hidden;
  border-radius:999px;
  background:var(--bg-soft);
  border:1px solid rgba(229,229,234,.72);
}
.share-cell span{
  display:block;
  height:100%;
  border-radius:999px;
  background:var(--blue);
  min-width:2px;
}
.zero-sales-sku .share-cell span{
  background:transparent;
  min-width:0;
}

.shared-family-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}
.shared-family-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:10px;
  max-height:360px;
  overflow:auto;
  margin-bottom:16px;
  padding-right:4px;
}
.shared-family-option{
  min-height:58px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--border-soft);
  border-radius:var(--radius-md);
  background:var(--bg-soft);
  padding:10px 12px;
  cursor:pointer;
  transition:border-color 150ms ease,background 150ms ease,box-shadow 150ms ease;
}
.shared-family-option:hover{
  border-color:rgba(0,122,255,.28);
  background:#fff;
  box-shadow:var(--shadow-card);
}
.shared-family-option input{
  width:16px;
  height:16px;
  flex:0 0 auto;
}
.shared-family-option span{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.shared-family-option b{
  font-size:13px;
  color:var(--text-primary);
}
.shared-family-option small{
  font-size:12px;
  color:var(--text-tertiary);
}
.shared-family-option.already-imported{
  background:#fff;
  border-style:dashed;
}
.sku-already-current,
.current-family-member{
  border-color:rgba(0,122,255,.34)!important;
  background:linear-gradient(180deg,rgba(0,122,255,.075),rgba(0,122,255,.035))!important;
  box-shadow:inset 3px 0 0 var(--blue);
}
.sku-already-current{
  cursor:default;
}
.sku-already-current input{
  opacity:.55;
  cursor:not-allowed;
}
.sku-state-chip{
  display:inline-flex;
  align-items:center;
  min-height:20px;
  margin-left:6px;
  padding:0 7px;
  border-radius:999px;
  background:rgba(0,122,255,.12);
  color:#0057B8;
  font-size:11px;
  font-style:normal;
  font-weight:800;
  vertical-align:middle;
}
.sku-already-current small{
  color:#315D8F;
}
.family-summary-actions{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
  color:var(--text-secondary);
}
.family-summary-actions em{
  font-style:normal;
  color:var(--text-secondary);
}
.family-summary-actions .family-remove-btn{
  opacity:.72;
}
.family-summary-actions .family-remove-btn:hover{
  opacity:1;
}

@media (max-width:900px){
  :root{--page-padding:18px}
  .topbar,.page-header{min-height:auto;align-items:flex-start;gap:14px}
  .topbar-actions{width:100%;justify-content:space-between}
  .content{gap:18px}
  .metric,.metric-card{min-height:108px}
  .monthly-family-row summary{grid-template-columns:42px minmax(0,1fr);align-items:start}
  .monthly-family-row summary strong{grid-column:2}
}

.customer-guide{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);
  gap:16px;
  align-items:stretch;
}
.guide-card{
  padding:18px 20px;
  border:1px solid rgba(0,122,255,.14);
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg,#fff,#f8fbff);
  box-shadow:var(--shadow-card);
}
.guide-card h2{
  margin:0 0 8px;
  font-size:18px;
  line-height:1.3;
  font-weight:750;
}
.guide-card p{
  margin:0;
  color:var(--text-secondary);
  font-size:13px;
  line-height:1.65;
}
.guide-steps{
  display:grid;
  gap:8px;
  margin-top:14px;
}
.guide-steps span{
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--text-primary);
  font-size:13px;
  font-weight:650;
}
.guide-steps i{
  width:22px;
  height:22px;
  display:inline-grid;
  place-items:center;
  border-radius:999px;
  background:rgba(0,122,255,.1);
  color:var(--blue);
  font-style:normal;
  font-size:12px;
  font-weight:800;
}
.source-card{
  padding:18px 20px;
  border:1px solid var(--border-soft);
  border-radius:var(--radius-lg);
  background:var(--bg-card);
  box-shadow:var(--shadow-card);
}
.source-card b{
  display:block;
  margin-bottom:8px;
  font-size:13px;
}
.source-card span{
  display:block;
  color:var(--text-secondary);
  font-size:12px;
  line-height:1.6;
}
.source-card a{color:var(--blue);font-weight:700;text-decoration:none}
.audit-points{
  display:grid;
  gap:8px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--border-soft);
}
.audit-points em{
  position:relative;
  display:block;
  padding-left:18px;
  color:var(--text-primary);
  font-size:12px;
  font-style:normal;
  line-height:1.55;
}
.audit-points em::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:7px;
  height:7px;
  border-radius:999px;
  background:var(--green);
  box-shadow:0 0 0 3px rgba(52,199,89,.13);
}
.primary-action-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.primary-action-row strong{font-size:15px}
.primary-action-row span{
  display:block;
  margin-top:4px;
  color:var(--text-secondary);
  font-size:12px;
}
.empty-state .btn,
.empty .btn{margin-top:12px}
.empty-state strong,
.empty strong{
  display:block;
  margin-bottom:6px;
  color:var(--text-primary);
}
.page-help-dialog{width:min(620px,calc(100% - 32px));padding:0}
.page-help-body{padding:18px 22px 22px}
.page-help-body ol{margin:0;padding-left:20px;color:var(--text-secondary);line-height:1.8}
.page-help-body li+li{margin-top:4px}
.toast[data-type="success"]{background:rgba(20,128,61,.95)}
.toast[data-type="warning"]{background:rgba(154,91,0,.95)}
.toast[data-type="danger"]{background:rgba(185,28,28,.95)}
.is-loading{position:relative}
.is-loading::after{
  content:"";
  width:12px;
  height:12px;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  animation:buttonSpin .7s linear infinite;
}
@keyframes buttonSpin{to{transform:rotate(360deg)}}
.data-tip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  margin-left:6px;
  border-radius:999px;
  background:rgba(0,122,255,.1);
  color:var(--blue);
  font-size:12px;
  font-weight:800;
  cursor:help;
}
.data-tip[data-tip]{position:relative}
.data-tip[data-tip]:hover::after{
  content:attr(data-tip);
  position:absolute;
  z-index:20;
  left:50%;
  bottom:calc(100% + 8px);
  transform:translateX(-50%);
  width:max-content;
  max-width:260px;
  padding:9px 11px;
  border-radius:10px;
  background:rgba(29,29,31,.95);
  color:#fff;
  font-size:12px;
  line-height:1.45;
  box-shadow:0 14px 34px rgba(0,0,0,.18);
}
@media (max-width:900px){
  .customer-guide{grid-template-columns:1fr}
  .first-visit-banner{align-items:flex-start;flex-direction:column}
  .chart-grid{grid-template-columns:1fr;padding:14px}
  .echart-box{min-height:240px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}