﻿:root {
  --app-red: #d91f27;
  --app-red-dark: #a70d16;
  --app-blue: #2563eb;
  --app-green: #149447;
  --app-bg: #f3f5f8;
  --app-surface: #ffffff;
  --app-surface-2: #f8fafc;
  --app-text: #172033;
  --app-muted: #687386;
  --app-line: #e3e8ef;
  --app-shadow: 0 10px 28px rgba(23, 32, 51, .08);
  --app-radius: 8px;
  --app-max: 430px;
  --app-pad: 5px;
  --app-tabbar: 68px;
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-safe-top: env(safe-area-inset-top, 0px);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto !important;
  background: #dfe5ec;
}

body {
  min-height: 100%;
  margin: 0;
  color: var(--app-text);
  background:
    linear-gradient(180deg, #e8edf3 0, #f6f8fb 260px, #e8edf3 100%);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", Arial, sans-serif;
  overflow-x: hidden;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  touch-action: manipulation;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, transparent calc(50% - 215px), rgba(255, 255, 255, .62) calc(50% - 215px), rgba(255, 255, 255, .62) calc(50% + 215px), transparent calc(50% + 215px));
  pointer-events: none;
}

.app,
.app-shell,
.auth-shell,
.workflow-app,
.site-app,
.theme-preview-app,
.structure-app {
  width: 100%;
  max-width: var(--app-max) !important;
  min-height: 100vh;
  margin: 0 auto !important;
  color: var(--app-text);
  background: var(--app-bg) !important;
  position: relative;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  box-shadow: 0 0 0 1px rgba(17, 24, 39, .04), 0 22px 60px rgba(15, 23, 42, .14);
}

.app,
.app-shell {
  padding-bottom: calc(var(--app-tabbar) + var(--app-safe-bottom));
}

.app {
  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.has-store-calculator {
  padding-bottom: calc(150px + var(--app-safe-bottom)) !important;
}

.app-shell,
.auth-shell,
.workflow-app,
.site-app,
.theme-preview-app,
.structure-app {
  height: auto !important;
  max-height: none !important;
}

.hero,
.top-header,
.auth-header,
.site-app-header,
.workflow-header,
.structure-header {
  width: 100%;
  max-width: var(--app-max) !important;
  min-height: 64px;
  margin: 0 auto !important;
  padding: calc(10px + var(--app-safe-top)) 14px 12px !important;
  border-radius: 0 !important;
  border: 0 !important;
  color: #fff !important;
  background:
    linear-gradient(135deg, #121827 0%, #2b1020 50%, var(--app-red) 100%) !important;
  box-shadow: none !important;
}

.hero {
  position: sticky !important;
  top: 0 !important;
  left: auto !important;
  right: auto !important;
}

.hero::before,
.hero::after,
.top-header::before,
.top-header::after,
.shop-card::before,
.shop-card::after {
  display: none !important;
}

.hero-content,
.store-wrap,
.auth-brand,
.site-app-brand,
.workflow-brand {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero-back {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(255, 255, 255, .14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}

.hero-back svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-text {
  min-width: 0;
}

.hero-title,
.store-info h1,
.auth-title,
.site-app-title,
.workflow-title {
  margin: 0 !important;
  color: #fff !important;
  font-size: 19px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.hero-subtitle,
.store-sub,
.auth-subtitle,
.site-app-subtitle,
.workflow-subtitle {
  margin-top: 4px !important;
  color: rgba(255, 255, 255, .74) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

.content,
.page,
.auth-main,
.site-app-main,
.workflow-main,
.structure-main {
  width: 100%;
  max-width: var(--app-max);
  margin: 0 auto;
  padding: 5px var(--app-pad) calc(var(--app-tabbar) + var(--app-safe-bottom) + 18px) !important;
  background: var(--app-bg) !important;
  overflow-y: visible !important;
}

.page {
  min-height: auto !important;
  padding-top: 5px !important;
  overflow: visible !important;
}

.content > .card {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.content > .card:first-child {
  margin-top: 0 !important;
}

.page > .content {
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.page > .hero,
.screen > .hero,
.screen > .compact-hero {
  width: calc(100% + (var(--app-pad) * 2)) !important;
  margin-top: -5px !important;
  margin-left: calc(-1 * var(--app-pad)) !important;
  margin-right: calc(-1 * var(--app-pad)) !important;
  border-radius: 0 !important;
}

.page > .hero + .content {
  margin-top: 10px !important;
  padding-top: 0 !important;
}

.app > .top-header + .page,
.app > .top-header + main,
.app > .top-header + .shop-card {
  margin-top: 10px !important;
}

.screen {
  padding: 0 var(--app-pad) 20px !important;
  background: var(--app-bg) !important;
  overflow: visible !important;
}

.screen > .hero:first-child,
.screen > .compact-hero:first-child {
  margin-top: 0 !important;
}

.app .page {
  padding-bottom: 18px !important;
}

.card,
.section-card,
.shop-card,
.summary-card,
.quick-panel,
.flow-row,
.sweep-match,
.empty-panel,
.manager-banner,
.workflow-card,
.site-card,
.auth-card,
.ops-card,
.mine-card,
.action-card,
.audit-row,
.theme-card {
  border-radius: var(--app-radius) !important;
  border: 1px solid var(--app-line) !important;
  background: var(--app-surface) !important;
  color: var(--app-text) !important;
  box-shadow: var(--app-shadow) !important;
}

.card,
.section-card,
.shop-card,
.summary-card,
.quick-panel,
.empty-panel,
.manager-banner,
.workflow-card,
.site-card,
.auth-card,
.ops-card,
.mine-card,
.theme-card {
  margin: 0 0 12px !important;
  padding: 14px !important;
}

#siteCreate .site-create-form-card {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.shop-card {
  margin: 5px var(--app-pad) 0 !important;
}

.section-title,
.summary-title,
.flow-head h2,
.section-title h2,
.manager-banner h2,
.empty-panel h2,
.workflow-card h2,
.site-card h2,
.auth-card h1 {
  color: var(--app-text) !important;
  font-size: 16px !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.section-title p,
.flow-head p,
.empty-panel p,
.manager-banner p,
.workflow-card p,
.site-card p,
.shop-meta,
.task-meta,
.quick-entry small {
  color: var(--app-muted) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

.action-btn,
.filled-btn,
.outline-btn,
.link-btn,
.btn,
.sheet-btn,
.auth-button,
.owner-edit,
.notice-btn,
.quick-item,
.icon-tool,
.lottery-back,
.open-link {
  min-height: 42px;
  border-radius: var(--app-radius) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.action-btn,
.filled-btn,
.btn.primary,
.sheet-btn.primary,
.auth-button,
.notice-btn {
  border: 0 !important;
  color: #fff !important;
  background: linear-gradient(180deg, #ee3b43, var(--app-red)) !important;
  box-shadow: 0 8px 18px rgba(217, 31, 39, .22) !important;
}

.outline-btn,
.btn.secondary,
.sheet-btn.secondary {
  color: var(--app-text) !important;
  background: var(--app-surface-2) !important;
  border: 1px solid var(--app-line) !important;
  box-shadow: none !important;
}

input,
select,
textarea,
.input {
  min-height: 42px;
  border-radius: var(--app-radius) !important;
  border: 1px solid var(--app-line) !important;
  background: #fff !important;
  color: var(--app-text) !important;
  font-size: 14px !important;
  box-shadow: none !important;
  font-weight: 400 !important;
}

input::placeholder,
textarea::placeholder {
  color: #9aa5b1 !important;
  font-weight: 400 !important;
}

/* Keep form pages readable: labels guide the eye, inputs should not compete with titles. */
form label,
.profile-field,
.account-field,
.address-field,
.announcement-form label,
.site-form-grid label,
.site-region-grid label,
.store-image-name-field,
.avatar-controls label,
.store-image-crop-controls label,
.permission-grid label {
  font-weight: 500 !important;
}

form label > span,
.profile-field span,
.account-field span,
.address-field span,
.announcement-form label > span,
.site-form-grid label > span,
.site-region-grid label > span,
.store-image-name-field > span,
.avatar-controls label > span,
.store-image-crop-controls label > span {
  color: #475569 !important;
  font-weight: 500 !important;
}

form small,
.site-form-intro,
.profile-modal-head span,
.avatar-modal-head span,
.announcement-modal-head span,
.account-modal-head span,
.store-image-modal-head span,
.announcement-template-head span,
.announcement-template-item span {
  font-weight: 400 !important;
}

.profile-modal-head strong,
.avatar-modal-head strong,
.announcement-modal-head strong,
.account-modal-head strong,
.store-image-modal-head strong,
.announcement-template-head strong,
.announcement-form-title {
  font-weight: 700 !important;
}

.announcement-form label b {
  font-weight: 500 !important;
}

.primary-btn,
.secondary-btn,
.filled-btn,
.outline-btn,
.announcement-create-btn,
.store-image-upload-btn,
.profile-edit-btn,
.logout {
  font-weight: 700 !important;
}

.tabbar,
.bottom-nav {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  transform: none !important;
  width: 100% !important;
  max-width: var(--app-max) !important;
  margin: 0 auto !important;
  height: calc(64px + var(--app-safe-bottom)) !important;
  padding: 6px 6px calc(6px + var(--app-safe-bottom)) !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(48px, 1fr)) !important;
  align-items: center !important;
  justify-items: stretch !important;
  gap: 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--app-line) !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 -10px 26px rgba(23, 32, 51, .08) !important;
  backdrop-filter: blur(14px);
  z-index: 80 !important;
}

.tabbar {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.tab,
.nav-item {
  width: 100% !important;
  min-width: 0 !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 5px 0 4px !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  color: #7a8493 !important;
  background: transparent !important;
  border: 0 !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  text-align: center !important;
  text-decoration: none !important;
  position: relative !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.tab svg,
.nav-item svg {
  flex: 0 0 21px !important;
  width: 21px !important;
  height: 21px !important;
  color: currentColor !important;
  margin: 0 !important;
}

.tab span,
.nav-item span {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.tab.active,
.nav-item.active {
  color: var(--app-red) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.tab.active::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  width: 28px !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: var(--app-red) !important;
  transform: translateX(-50%) !important;
}

.nav-item.active::after {
  display: none !important;
}

.tab svg path,
.tab svg rect,
.tab svg circle,
.nav-item svg .stroke {
  stroke: currentColor !important;
}

.tab svg path,
.tab svg rect,
.tab svg circle {
  fill: none;
}

.nav-item svg .fill {
  fill: currentColor !important;
}

.quick-grid,
.summary-metrics,
.calc-grid,
.lottery-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

.quick-item,
.action-card,
.audit-row {
  width: 100% !important;
  min-height: 58px !important;
  padding: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  text-align: left !important;
}

.flow-list,
.sweep-list,
.post-list {
  display: grid !important;
  gap: 10px !important;
}

.task-flow {
  padding: 0 !important;
  overflow: hidden !important;
  border-color: rgba(217, 31, 39, .16) !important;
  background: var(--app-surface) !important;
}

.task-flow .flow-head {
  padding: 16px 14px 13px !important;
  border-bottom: 1px solid var(--app-line) !important;
  background: linear-gradient(180deg, #fff7f8 0%, #fff 100%);
}

.task-flow .flow-count {
  min-width: 46px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--app-red);
  background: #fff1f2;
  border: 1px solid #fecdd3;
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.task-flow .flow-list {
  gap: 0 !important;
  padding: 0 14px 4px !important;
}

.task-flow .flow-row {
  margin: 0 !important;
  padding: 13px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--app-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.task-flow .flow-row:last-child {
  border-bottom: 0 !important;
}

.task-flow .flow-row.active {
  padding: 13px 0 !important;
  background: transparent !important;
}

.task-flow .flow-step {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  color: var(--app-muted) !important;
  background: #f1f5f9 !important;
  border: 1px solid #dbe3ee;
  font-size: 13px !important;
  font-weight: 900 !important;
}

.task-flow .flow-row.done .flow-step {
  color: #0f766e !important;
  background: #ccfbf1 !important;
  border-color: #99f6e4;
}

.task-flow .flow-row.active .flow-step {
  color: #fff !important;
  background: var(--app-red) !important;
  border-color: var(--app-red);
}

.task-flow .flow-main strong {
  color: var(--app-text);
  font-size: 15px;
  line-height: 1.25;
  font-weight: 900;
}

.task-flow .flow-main > span {
  margin-top: 4px;
  color: var(--app-muted);
  white-space: normal;
}

.task-flow .task-meta {
  gap: 5px;
  margin-top: 8px;
}

.task-flow .task-meta em {
  min-height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  color: #64748b;
  background: #f8fafc;
  border: 1px solid #edf2f7;
  font-size: 11px;
  line-height: 1;
  font-style: normal;
  font-weight: 750;
}

.task-flow .action-btn {
  width: 72px !important;
  min-width: 72px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  box-shadow: 0 7px 14px rgba(217, 31, 39, .16) !important;
}

.acquisition-funnel {
  display: grid;
  gap: 10px;
}

.funnel-head {
  display: grid;
  gap: 4px;
}

.funnel-head strong {
  color: var(--app-text);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 850;
}

.funnel-head span {
  color: var(--app-muted);
  font-size: 12px;
  line-height: 1.45;
}

.funnel-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.funnel-steps span {
  min-height: 42px;
  padding: 7px 5px;
  border-radius: var(--app-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--app-red);
  background: #fff1f2;
  border: 1px solid #fecdd3;
  text-align: center;
  font-size: 11px;
  line-height: 1.25;
  font-weight: 750;
}

.conversion-note {
  margin-bottom: 10px;
  padding: 11px;
  border-radius: var(--app-radius);
  background: #fff1f2;
  border: 1px solid #fecdd3;
}

.conversion-note strong,
.conversion-note span {
  display: block;
}

.conversion-note strong {
  color: var(--app-red);
  font-size: 14px;
  line-height: 1.35;
  font-weight: 850;
}

.conversion-note span {
  margin-top: 4px;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 1.45;
}

.acquisition-dashboard,
.operation-summary {
  display: grid;
  gap: 12px;
}

.store-brand-card {
  margin-bottom: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.home-hero-dashboard {
  position: relative;
  overflow: hidden;
  border-color: rgba(217, 31, 39, .18) !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(217, 31, 39, .12), transparent 38%),
    linear-gradient(180deg, #ffffff 0%, #fff8f9 100%) !important;
}

.home-hero-dashboard::before {
  display: none;
}

.dashboard-brand {
  position: relative;
  margin: 0 0 2px;
  padding: 12px 12px 12px 14px;
  border-radius: var(--app-radius);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 86% 12%, rgba(255, 255, 255, .18), transparent 34%),
    linear-gradient(135deg, #0f766e 0%, #155e75 54%, #0f172a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 8px 18px rgba(15, 23, 42, .12);
}

.store-brand-card .dashboard-brand {
  margin: 0;
}

.store-brand-card .dashboard-brand::before {
  display: none;
}

.dashboard-brand::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fde047, #22c55e);
}

.dashboard-brand strong,
.dashboard-brand span,
.dashboard-brand em {
  display: block;
}

.dashboard-brand strong {
  color: #fff;
  font-size: 17px;
  line-height: 1.2;
  font-weight: 900;
}

.dashboard-brand span {
  margin-top: 3px;
  color: rgba(255, 255, 255, .72);
  font-size: 12px;
  line-height: 1.35;
}

.dashboard-brand em {
  min-width: 76px;
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .18);
  font-size: 11px;
  line-height: 1;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

.dashboard-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.dashboard-head h2 {
  margin: 0;
  color: var(--app-text);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 850;
}

.title-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.title-svg {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  padding: 3px;
  border-radius: 7px;
  color: var(--app-red);
  background: #fff1f2;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dashboard-head p {
  margin: 4px 0 0;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 1.45;
}

.dashboard-head > span {
  min-width: 42px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--app-red);
  background: #fff1f2;
  border: 1px solid #fecdd3;
  font-size: 12px;
  font-weight: 800;
}

.lead-number {
  padding: 14px;
  border-radius: var(--app-radius);
  color: #fff;
  background: linear-gradient(135deg, #111827 0%, #4c0f25 56%, var(--app-red) 100%);
}

.lead-number-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.lead-number .lead-number-head > span {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
}

.lead-number span,
.lead-number em {
  display: block;
  color: rgba(255, 255, 255, .76);
  font-size: 12px;
  line-height: 1.35;
  font-style: normal;
}

.lead-number .lead-action-link {
  min-height: 26px;
  margin-top: 0;
  padding: 0 10px;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
  font-size: 12px;
  font-weight: 800;
}

.lead-number strong {
  display: block;
  margin: 4px 0;
  color: #fff;
  font-size: 38px;
  line-height: 1;
  font-weight: 900;
}

.consult-progress-number {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 4px 0;
}

.consult-progress-number strong {
  margin: 0;
}

.consult-progress-number strong:first-child {
  color: #fff;
}

.consult-progress-number strong:last-child {
  color: rgba(255, 255, 255, .72);
  font-size: 30px;
}

.consult-progress-number i {
  color: rgba(255, 255, 255, .48);
  font-size: 24px;
  line-height: 1;
  font-style: normal;
  font-weight: 800;
}

.home-trend {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 10px;
  line-height: 18px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.home-trend[hidden] {
  display: none !important;
}

.home-trend.up {
  background: #fee2e2;
  color: #b91c1c;
}

.home-trend.down {
  background: #dcfce7;
  color: #15803d;
}

.home-trend.flat {
  background: rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .86);
}

.marketing-metrics .home-trend.flat {
  background: #f1f5f9;
  color: #64748b;
}

.effect-value .home-trend,
.consult-progress-number .home-trend {
  min-height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-size: 12px;
  line-height: 1;
}

.effect-value .home-trend.up,
.consult-progress-number .home-trend.up {
  background: transparent;
  color: #b91c1c;
}

.effect-value .home-trend.down,
.consult-progress-number .home-trend.down {
  background: transparent;
  color: #15803d;
}

.marketing-metrics,
.operation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.marketing-metrics div,
.operation-grid div {
  min-width: 0;
  padding: 4px 0;
  border-radius: 0;
  background: transparent;
  border: 0;
}

.marketing-metrics span,
.operation-grid span,
.marketing-metrics em,
.operation-grid em {
  display: block;
  color: var(--app-muted);
  font-size: 11px;
  line-height: 1.35;
  font-style: normal;
}

.marketing-metrics strong,
.operation-grid strong {
  display: block;
  margin: 4px 0;
  color: var(--app-text);
  font-size: 24px;
  line-height: 1;
  font-weight: 900;
}

.home-hero-dashboard .marketing-metrics {
  gap: 8px;
  margin-top: 8px;
}

.home-hero-dashboard .marketing-metrics div {
  padding: 2px 0 0;
}

.home-hero-dashboard .marketing-metrics span,
.home-hero-dashboard .marketing-metrics em {
  font-size: 10px;
  line-height: 1.2;
}

.home-hero-dashboard .effect-value {
  gap: 4px;
  margin: 2px 0;
}

.home-hero-dashboard .marketing-metrics strong {
  margin: 0;
  font-size: 20px;
  line-height: .95;
}

.home-hero-dashboard .effect-value .home-trend {
  font-size: 10px;
}

.conversion-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.conversion-strip span {
  color: var(--app-muted);
  font-size: 12px;
  font-weight: 750;
}

.conversion-strip strong {
  color: var(--app-red);
  font-size: 17px;
  line-height: 1;
  font-weight: 900;
}

.conversion-strip i {
  grid-column: 1 / -1;
  height: 7px;
  border-radius: 999px;
  overflow: hidden;
  background: #fee2e2;
}

.conversion-strip b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--app-red), #fb7185);
}

.marketing-detail-hero {
  display: grid;
  gap: 12px;
  overflow: hidden;
  border-color: rgba(15, 118, 110, .22) !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(20, 184, 166, .16), transparent 38%),
    linear-gradient(180deg, #ffffff 0%, #f0fdfa 100%) !important;
}

.marketing-detail-head {
  padding: 14px;
  border-radius: var(--app-radius);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  color: #fff;
  background: linear-gradient(135deg, #0f766e 0%, #155e75 54%, #0f172a 100%);
  box-shadow: 0 10px 22px rgba(15, 23, 42, .13);
}

.marketing-detail-head span,
.marketing-detail-head p,
.marketing-detail-head em {
  display: block;
  color: rgba(255, 255, 255, .76);
  font-size: 12px;
  line-height: 1.4;
  font-style: normal;
}

.marketing-detail-head h2 {
  margin: 5px 0 4px;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  font-weight: 950;
}

.marketing-detail-head em {
  min-width: 76px;
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .18);
  font-weight: 850;
  white-space: nowrap;
}

.marketing-funnel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.marketing-funnel div {
  min-width: 0;
  padding: 4px 0;
  border-radius: 0;
  background: transparent;
  border: 0;
}

.marketing-funnel span,
.marketing-funnel em {
  display: block;
  color: var(--app-muted);
  font-size: 11px;
  line-height: 1.35;
  font-style: normal;
}

.marketing-funnel strong {
  display: block;
  margin: 5px 0;
  color: var(--app-text);
  font-size: 25px;
  line-height: 1;
  font-weight: 950;
}

.marketing-rate-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.marketing-rate-strip span {
  color: var(--app-muted);
  font-size: 12px;
  font-weight: 800;
}

.marketing-rate-strip strong {
  color: #0f766e;
  font-size: 17px;
  line-height: 1;
  font-weight: 950;
}

.marketing-rate-strip i,
.source-row i {
  grid-column: 1 / -1;
  height: 7px;
  border-radius: 999px;
  overflow: hidden;
  background: #ccfbf1;
}

.marketing-rate-strip b,
.source-row b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0f766e, #22c55e);
}

.source-card,
.lead-card,
.advice-card {
  display: grid;
  gap: 12px;
}

.source-list,
.lead-list,
.advice-list {
  display: grid;
  gap: 8px;
}

.source-row {
  padding: 11px;
  border-radius: var(--app-radius);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px 10px;
  background: var(--app-surface-2);
  border: 1px solid var(--app-line);
}

.source-row strong,
.lead-row strong,
.advice-list strong {
  display: block;
  color: var(--app-text);
  font-size: 14px;
  line-height: 1.25;
  font-weight: 900;
}

.ops-strong-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ops-strong-metrics .primary {
  min-width: 0;
  padding: 12px;
  border-radius: var(--app-radius);
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .05);
}

.ops-strong-metrics span,
.ops-support-metric span,
.ops-strong-metrics em,
.ops-support-metric em {
  display: block;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 1.35;
  font-style: normal;
}

.ops-strong-metrics .effect-value {
  margin: 5px 0;
}

.ops-strong-metrics strong {
  color: var(--app-text);
  font-size: 34px;
  line-height: 1;
  font-weight: 950;
}

.ops-support-metric {
  min-height: 44px;
  padding: 9px 11px;
  border-radius: var(--app-radius);
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(15, 23, 42, .06);
}

.ops-support-metric span {
  grid-column: 1;
}

.ops-support-metric strong {
  color: var(--app-text);
  font-size: 20px;
  line-height: 1;
  font-weight: 950;
}

.ops-support-metric em {
  grid-column: 1 / -1;
  margin-top: -2px;
  font-size: 11px;
}

.ops-single-advice div {
  border-color: rgba(225, 29, 72, .16);
  background: #fff7f8;
}

.source-row span,
.lead-row span,
.advice-list span {
  display: block;
  margin-top: 4px;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 1.4;
}

.source-row em {
  color: #0f766e;
  font-size: 14px;
  line-height: 1;
  font-style: normal;
  font-weight: 950;
}

.lead-row {
  min-width: 0;
  padding: 11px;
  border-radius: var(--app-radius);
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--app-line);
}

.lead-row.hot {
  border-color: rgba(217, 31, 39, .22);
  background: linear-gradient(180deg, #fff7f8, #fff);
}

.lead-mark {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--app-red);
  font-size: 13px;
  font-weight: 900;
}

.lead-row button {
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: var(--app-red);
  box-shadow: 0 8px 16px rgba(217, 31, 39, .18);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.advice-list div {
  padding: 12px;
  border-radius: var(--app-radius);
  background: #f8fafc;
  border: 1px solid var(--app-line);
}

.account-admin-card,
.subaccount-list-card,
.permission-card {
  display: grid;
  gap: 12px;
}

.account-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.account-stat-grid div {
  padding: 12px;
  border-radius: var(--app-radius);
  background: var(--app-surface-2);
  border: 1px solid var(--app-line);
}

.account-stat-grid span,
.account-stat-grid em {
  display: block;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 1.4;
  font-style: normal;
}

.account-stat-grid strong {
  display: block;
  margin: 4px 0;
  color: var(--app-text);
  font-size: 28px;
  line-height: 1;
  font-weight: 950;
}

.account-create-btn {
  width: 100%;
}

.subaccount-list {
  display: grid;
  gap: 8px;
}

.subaccount-row {
  min-width: 0;
  padding: 11px;
  border-radius: var(--app-radius);
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--app-line);
}

.subaccount-row.disabled {
  opacity: .72;
  background: #f8fafc;
}

.subaccount-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, #0f766e, #0f172a);
  font-size: 13px;
  font-weight: 900;
}

.subaccount-row strong,
.permission-grid span {
  display: block;
  color: var(--app-text);
  font-size: 14px;
  line-height: 1.25;
  font-weight: 900;
}

.subaccount-row span,
.subaccount-row em {
  display: block;
  margin-top: 4px;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 1.35;
  font-style: normal;
}

.subaccount-row button {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid #fecdd3;
  color: var(--app-red);
  background: #fff1f2;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.permission-grid {
  display: grid;
  gap: 8px;
}

.permission-grid label {
  min-height: 42px;
  padding: 0 11px;
  border-radius: var(--app-radius);
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--app-surface-2);
  border: 1px solid var(--app-line);
}

.permission-grid input {
  width: 16px;
  height: 16px;
  accent-color: var(--app-red);
}

.flow-row {
  padding: 12px !important;
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
}

.flow-step {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  background: var(--app-red) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.sweep-match {
  padding: 0 !important;
}

.sweep-teams {
  gap: 8px !important;
}

.sweep-team b {
  color: var(--app-text) !important;
}

.sweep-meta,
.sweep-tags,
.date-bar,
.list-filter-bar {
  color: var(--app-muted) !important;
}

.loading,
.toast {
  border-radius: var(--app-radius) !important;
  background: rgba(23, 32, 51, .88) !important;
  color: #fff !important;
}

.action-sheet,
.sheet-mask {
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  max-width: none !important;
  transform: none !important;
}

.sheet-panel {
  width: min(var(--app-max), 100vw) !important;
  max-width: var(--app-max) !important;
  border-radius: 12px 12px 0 0 !important;
  background: #fff !important;
  color: var(--app-text) !important;
}

.sheet-x {
  background: #f1f5f9 !important;
  border-color: var(--app-line) !important;
  color: #64748b !important;
  box-shadow: none !important;
}

@media (min-width: 431px) {
  body {
    padding: 0;
  }
}

@media (max-width: 380px) {
  :root {
    --app-pad: 5px;
  }

  .hero-title,
  .store-info h1,
  .auth-title,
  .site-app-title,
  .workflow-title {
    font-size: 18px !important;
  }

  .flow-row {
    grid-template-columns: 28px minmax(0, 1fr) !important;
  }

  .flow-row .action-btn {
    grid-column: 2;
    width: 100%;
  }
}

/* App theme lock: keep all non-admin WebStore pages in one mobile product system. */
html[data-store-theme] body {
  background:
    linear-gradient(180deg, #e8edf3 0, #f6f8fb 260px, #e8edf3 100%) !important;
}

html[data-store-theme] .app {
  background: var(--app-bg) !important;
}

html[data-store-theme] .top-header,
.auth-hero,
.register-hero,
#siteCreate .micro-premium-card {
  color: #fff !important;
  background:
    linear-gradient(135deg, #121827 0%, #2b1020 50%, var(--app-red) 100%) !important;
  border: 0 !important;
  box-shadow: none !important;
}

html[data-store-theme] .top-header {
  margin: 0 !important;
  border-radius: 0 !important;
}

html[data-store-theme] .store-info h1,
html[data-store-theme] .store-name,
html[data-store-theme] .store-sub,
html[data-store-theme] .notice-btn,
html[data-store-theme] .verified-badge {
  color: #fff !important;
}

html[data-store-theme] .top-header h1,
html[data-store-theme] .top-header h2,
html[data-store-theme] .top-header h3,
html[data-store-theme] .top-header p,
html[data-store-theme] .top-header span,
html[data-store-theme] .top-header strong,
html[data-store-theme] .top-header .section-title,
html[data-store-theme] .top-header .section-title h2,
html[data-store-theme] .top-header .section-title p {
  color: #fff !important;
}

html[data-store-theme] .verified-badge {
  height: 22px;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  background: rgba(255, 255, 255, .13) !important;
  box-shadow: none !important;
}

html[data-store-theme] .notice-btn {
  border: 1px solid rgba(255, 255, 255, .18) !important;
  background: rgba(255, 255, 255, .12) !important;
  box-shadow: none !important;
}

html[data-store-theme] .crest {
  width: 38px !important;
  height: 38px !important;
  filter: none !important;
}

html[data-store-theme] .page {
  padding-left: 5px !important;
  padding-right: 5px !important;
}

html[data-store-theme] .sweep-list,
html[data-store-theme] .basketball-list {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html[data-store-theme] .sweep-header {
  padding: 8px 8px 5px !important;
  gap: 6px !important;
}

html[data-store-theme] .sweep-teams {
  padding: 0 8px 8px !important;
  gap: 6px !important;
}

html[data-store-theme] .recommend {
  margin: 0 8px 8px !important;
  padding: 8px !important;
  gap: 8px !important;
}

html[data-store-theme] .sweep-meta,
html[data-store-theme] .sweep-tags {
  gap: 5px !important;
}

html[data-store-theme] .section-card,
html[data-store-theme] .empty-panel,
html[data-store-theme] .manager-wrap,
html[data-store-theme] .store-photo-page {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.screen > .analysis-tabs,
.screen > .tab-panel > .module {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html[data-store-theme] .shop-card,
html[data-store-theme] .section-card,
html[data-store-theme] .empty-panel,
html[data-store-theme] .manager-wrap,
html[data-store-theme] .manager-banner,
html[data-store-theme] .sweep-match,
html[data-store-theme] .basketball-match,
html[data-store-theme] .result-box,
html[data-store-theme] .odds-board,
html[data-store-theme] .post-card {
  background: var(--app-surface) !important;
  border-color: var(--app-line) !important;
  box-shadow: var(--app-shadow) !important;
}

html[data-store-theme] .lottery-row {
  background: transparent !important;
  border-color: var(--app-line) !important;
  box-shadow: none !important;
}

html[data-store-theme] .basketball-odds.empty {
  min-height: 44px !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  color: #64748b !important;
  background: #f8fafc !important;
  border: 1px dashed #cbd5e1 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

html[data-store-theme] .basketball-odds.empty svg {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
}

html[data-store-theme] .basketball-odds.empty svg path {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html[data-store-theme] .date-bar,
html[data-store-theme] .bottom-nav,
html[data-store-theme] .confidence-row,
html[data-store-theme] .recommend,
html[data-store-theme] .basketball-toolbar,
html[data-store-theme] .calc-grid .form-item,
html[data-store-theme] .input,
html[data-store-theme] .action-btn.secondary,
html[data-store-theme] .result-box {
  background: var(--app-surface) !important;
  border-color: var(--app-line) !important;
}

html[data-store-theme] .icon-tool,
html[data-store-theme] .lottery-action-btn,
html[data-store-theme] .sheet-btn.secondary,
html[data-store-theme] .lottery-back,
html[data-store-theme] .confidence-btn,
html[data-store-theme] .seg {
  color: var(--app-red) !important;
  border-color: #fecdd3 !important;
  background: #fff1f2 !important;
  box-shadow: none !important;
}

html[data-store-theme] .nav-item.active,
html[data-store-theme] .bottom-nav .nav-item.active {
  color: var(--app-red) !important;
  background: #fff1f2 !important;
}

html[data-store-theme] .top-header {
  min-height: 124px !important;
  padding: 13px 14px 14px !important;
  align-items: stretch !important;
  flex-direction: column !important;
  background: linear-gradient(135deg, #0f766e 0%, #155e75 52%, #172033 100%) !important;
}

html[data-store-theme] .store-wrap {
  align-items: flex-start !important;
  gap: 11px !important;
}

html[data-store-theme] .crest {
  width: 48px !important;
  height: 48px !important;
  padding: 5px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .13) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

html[data-store-theme] .store-info {
  padding-top: 1px !important;
}

html[data-store-theme] .store-info h1 {
  gap: 8px !important;
  font-size: 23px !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
}

html[data-store-theme] .store-name {
  max-width: 210px !important;
}

html[data-store-theme] .verified-badge {
  height: 24px !important;
  padding: 0 9px 0 5px !important;
  font-size: 12px !important;
  background: rgba(255, 255, 255, .16) !important;
  border-color: rgba(255, 255, 255, .24) !important;
  gap: 5px !important;
}

html[data-store-theme] .verified-badge svg {
  width: 16px !important;
  height: 16px !important;
  flex-basis: 16px !important;
  color: #7c2d12 !important;
}

html[data-store-theme] .store-sub {
  margin-top: 8px !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  color: rgba(255, 255, 255, .9) !important;
  white-space: normal !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

html[data-store-theme] .notice-btn {
  height: 42px !important;
  min-width: 64px !important;
  margin-top: 1px !important;
  border-radius: 13px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #fff !important;
  background: rgba(255, 255, 255, .15) !important;
  border-color: rgba(255, 255, 255, .22) !important;
}

html[data-store-theme] .shop-card {
  margin-top: 5px !important;
  padding: 13px 14px 15px !important;
  border-radius: 12px !important;
  background: #fff !important;
}

html[data-store-theme] .store-tool-panel {
  margin: 4px var(--app-pad) 8px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 5px !important;
}

html[data-store-theme] .tool-panel-title {
  grid-column: 1 / -1 !important;
  color: #64748b !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 750 !important;
  padding: 2px 2px 1px !important;
}

html[data-store-theme] .store-tool-link {
  min-height: 54px !important;
  padding: 7px 4px 6px !important;
  border-radius: 4px !important;
  color: #14532d !important;
  background: #ecfdf5 !important;
  border: 1px solid rgba(20, 83, 45, .08) !important;
  box-shadow: none !important;
}

html[data-store-theme] .store-tool-link:nth-of-type(2) {
  color: #991b1b !important;
  background: #fff1f2 !important;
}

html[data-store-theme] .store-tool-link:nth-of-type(3) {
  color: #1d4ed8 !important;
  background: #eff6ff !important;
}

html[data-store-theme] .store-tool-link:nth-of-type(4) {
  color: #6d28d9 !important;
  background: #f5f3ff !important;
}

html[data-store-theme] .store-tool-link svg {
  width: 20px !important;
  height: 20px !important;
  stroke: currentColor !important;
}

html[data-store-theme] .store-tool-link span {
  color: currentColor !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

html[data-store-theme] .conversion-note {
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html[data-store-theme] .conversion-note strong {
  display: block !important;
  color: #0f172a !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
}

html[data-store-theme] .conversion-note span {
  display: block !important;
  margin-top: 5px !important;
  color: #64748b !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

html[data-store-theme] .shop-tools {
  gap: 8px !important;
}

html[data-store-theme] .header-tools {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(42px, 1fr)) !important;
  gap: 8px !important;
}

html[data-store-theme] .header-tools .icon-tool {
  min-height: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  color: #fff !important;
  background: rgba(255, 255, 255, .14) !important;
  border-color: rgba(255, 255, 255, .22) !important;
  box-shadow: none !important;
}

html[data-store-theme] .header-tools .icon-tool svg {
  width: 20px !important;
  height: 20px !important;
}

html[data-store-theme] .header-tools .icon-tool span {
  display: none !important;
}

html[data-store-theme] .icon-tool {
  min-height: 58px !important;
  gap: 4px !important;
  border-radius: 12px !important;
  color: #e11d2e !important;
  background: linear-gradient(180deg, #fff 0%, #fff7f8 100%) !important;
  border-color: #fecdd3 !important;
}

html[data-store-theme] .icon-tool svg {
  width: 22px !important;
  height: 22px !important;
}

html[data-store-theme] .icon-tool span {
  display: block !important;
  color: #e11d2e !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
}

html[data-store-theme] .shop-meta {
  margin-top: 11px !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  background: transparent !important;
}

html[data-store-theme] .shop-meta span {
  min-height: 30px !important;
  padding: 7px 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 999px !important;
  color: #475569 !important;
  background: #f1f5f9 !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

html[data-store-theme] .store-service-card {
  position: relative !important;
  z-index: 1 !important;
  margin: 0 !important;
  padding: 9px 10px !important;
  border-radius: 8px !important;
  background: #fff7d6 !important;
  border: 1px solid rgba(234, 179, 8, .28) !important;
  box-shadow: none !important;
  color: #b91c1c !important;
}

html[data-store-theme] .service-copy strong {
  display: block !important;
  color: #b91c1c !important;
  font-size: 13px !important;
  line-height: 1.28 !important;
  font-weight: 850 !important;
}

html[data-store-theme] .service-copy span {
  display: block !important;
  margin-top: 3px !important;
  color: #991b1b !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

html[data-store-theme] .contact-header-tools {
  gap: 7px !important;
}

html[data-store-theme] .contact-header-tools .icon-tool {
  min-height: 46px !important;
  height: auto !important;
  border-radius: 8px !important;
  color: #fff !important;
  background: rgba(255, 255, 255, .13) !important;
  border-color: rgba(255, 255, 255, .2) !important;
  box-shadow: none !important;
  gap: 3px !important;
}

html[data-store-theme] .contact-header-tools .icon-tool svg {
  width: 19px !important;
  height: 19px !important;
}

html[data-store-theme] .contact-header-tools .icon-tool span {
  display: block !important;
  color: rgba(255, 255, 255, .94) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
}

html[data-store-theme] .store-section-head {
  margin: 6px 0 7px !important;
  padding: 0 3px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

html[data-store-theme] .store-section-head h2 {
  margin: 0 !important;
  color: #0f172a !important;
  font-size: 18px !important;
  line-height: 1.1 !important;
  font-weight: 850 !important;
}

html[data-store-theme] .store-section-head p {
  margin: 0 !important;
  max-width: 250px !important;
  color: #64748b !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  text-align: right !important;
}

.auth-hero::before,
.auth-hero::after,
.register-hero::before,
.register-hero::after,
#siteCreate .micro-premium-card::before,
#siteCreate .micro-premium-card::after {
  display: none !important;
}

.auth-shell {
  padding: 0 0 calc(18px + var(--app-safe-bottom)) !important;
  gap: 5px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
}

.auth-hero {
  width: 100% !important;
  min-height: 180px !important;
  padding: 18px !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

.auth-card {
  margin: 0 var(--app-pad) 5px !important;
}

.eyebrow {
  display: none !important;
}

.hero-copy {
  margin-top: 18px !important;
}

.hero-copy h1 {
  font-size: 24px !important;
  line-height: 1.18 !important;
}

.hero-metrics div {
  min-height: 54px !important;
  border-color: rgba(255, 255, 255, .18) !important;
  background: rgba(255, 255, 255, .08) !important;
}

#siteCreate .micro-premium-card {
  padding: 18px !important;
  display: block !important;
}

#siteCreate .micro-premium-copy h2,
#siteCreate .micro-premium-copy p,
#siteCreate .micro-premium-copy .site-state-badge {
  color: #fff !important;
}

#siteCreate .micro-premium-copy .site-state-badge {
  border-color: rgba(255, 255, 255, .18) !important;
  background: rgba(255, 255, 255, .12) !important;
}

#siteCreate .micro-credential {
  margin-top: 14px !important;
  border-radius: var(--app-radius) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  background: rgba(255, 255, 255, .10) !important;
  box-shadow: none !important;
}

#siteCreate .micro-credential strong,
#siteCreate .micro-credential span {
  color: #fff !important;
}

.premium-tier {
  border-top-color: var(--app-line) !important;
}

.premium-tier .feature-tier-head strong,
.site-feature-grid label.premium-option,
.site-feature-grid label.premium-option.checked {
  color: var(--app-text) !important;
  border-color: var(--app-line) !important;
  background: var(--app-surface-2) !important;
  box-shadow: none !important;
}

.site-feature-grid label.premium-option::after {
  content: "高级";
  color: var(--app-red);
  background: #fff1f2;
  border: 1px solid #fecdd3;
}
