:root {
  --bg: #f3f2f7;
  --panel: #ffffff;
  --line: #e7e8ee;
  --muted: #7a8294;
  --text: #1e2533;
  --blue: #1f8fff;
  --violet: #6c54ff;
  --green: #40c986;
  --danger: #e84b40;
  --shadow: 0 24px 60px rgba(33, 38, 52, 0.14);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 1440px;
  height: 100vh;
  overflow: hidden;
  background: radial-gradient(circle at 22% 10%, rgba(108, 84, 255, 0.12), transparent 28%), linear-gradient(135deg, #f7f7fb 0%, #eceaf4 100%);
  color: var(--text);
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}

.admin-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); height: 100vh; overflow: hidden; }
.admin-sidebar { overflow-y: auto; background: #111827; color: #dce3ef; }
.admin-brand { display: flex; align-items: center; gap: 12px; padding: 22px 18px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.admin-brand h1 { margin: 0; color: #fff; font-size: 19px; }
.admin-brand p { margin: 5px 0 0; color: #9aa7ba; font-size: 12px; }
.admin-nav { display: grid; gap: 6px; padding: 14px; }
.admin-nav-item { height: 42px; border: 0; border-radius: 8px; background: transparent; color: #c8d2e1; text-align: left; padding: 0 14px; }
.admin-nav-item:hover { background: rgba(255,255,255,0.08); color: #fff; }
.admin-nav-item.active { background: #1f8fff; color: #fff; font-weight: 700; }
.admin-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: #f3f2f7; }
.admin-topbar { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 16px; min-height: 68px; padding: 0 24px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,0.8); }
.admin-topbar strong { display: block; font-size: 22px; }
.admin-topbar span { display: block; margin-top: 5px; color: var(--muted); font-size: 13px; }
.admin-security-actions { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.admin-view { flex: 1; min-height: 0; overflow: auto; padding: 22px; }
.admin-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.admin-card { min-height: 132px; border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 18px; box-shadow: 0 12px 32px rgba(33,38,52,0.08); }
.admin-card strong { display: block; color: var(--text); font-size: 18px; }
.admin-card span { display: block; margin-top: 10px; color: var(--muted); line-height: 1.6; }
.admin-section-card { margin-top: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 20px; }
.admin-section-card h2 { margin: 0 0 14px; font-size: 20px; }
.admin-link-button { height: 38px; border: 1px solid var(--line); border-radius: 8px; background: #f7fafc; color: #3c4558; padding: 0 14px; }
.admin-toast { position: fixed; right: 28px; top: 86px; z-index: 60; transform: translateY(-12px); opacity: 0; pointer-events: none; border-radius: 10px; padding: 13px 18px; background: rgba(17,24,39,0.92); color: #fff; box-shadow: 0 18px 46px rgba(0,0,0,0.18); transition: all 0.18s ease; }
.admin-toast.show { transform: translateY(0); opacity: 1; }
.monitor-console, .trade-console, .message-console { display: grid; grid-template-columns: 1fr; gap: 18px; }
.monitor-tabs { display: flex; flex-direction: row; gap: 10px; margin-bottom: 16px; padding: 8px; border-radius: 14px; background: #ffffff; box-shadow: 0 12px 28px rgba(33,38,52,0.06); }
.monitor-tabs button { min-width: 132px; height: 42px; border: 0; border-radius: 10px; background: transparent; color: #4a5568; font-size: 15px; font-weight: 700; }
.monitor-tabs button.active { background: #111827; color: #ffffff; }
.monitor-hero { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 24px; border-radius: 18px; padding: 24px 28px; background: linear-gradient(135deg, #111827, #255179); color: #fff; box-shadow: 0 18px 42px rgba(31,78,121,0.16); }
.monitor-hero h2 { margin: 0; font-size: 28px; }
.monitor-hero p { max-width: 860px; margin: 10px 0 0; color: rgba(255,255,255,0.78); line-height: 1.7; }
.monitor-hero .admin-link-button { border-color: rgba(255,255,255,0.38); background: rgba(255,255,255,0.12); color: #fff; }
.monitor-toolbar { display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 18px; }
.monitor-toolbar input, .monitor-toolbar select { width: 220px; height: 42px; }
.monitor-table { width: 100%; margin: 0; }
.admin-devops-dialog { width: min(1180px, calc(100vw - 80px)); }
.devops-shell { display: grid; grid-template-columns: 1fr; gap: 16px; }
.devops-hero { display: flex; justify-content: space-between; align-items: center; gap: 18px; border-radius: 16px; padding: 18px 20px; background: linear-gradient(135deg, #0f172a, #1d4ed8); color: #fff; }
.devops-hero.warning { background: linear-gradient(135deg, #7c2d12, #ea580c); }
.devops-hero strong { display: block; font-size: 18px; }
.devops-hero span { display: block; margin-top: 7px; color: rgba(255,255,255,0.78); line-height: 1.6; }
.devops-card { border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; overflow: hidden; }
.devops-card-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 68px; padding: 14px 18px; background: #f8fafc; border-bottom: 1px solid #eef2f7; }
.devops-card-head strong { color: #0f172a; font-size: 17px; }
.devops-card-head span { display: block; margin-top: 4px; color: #64748b; font-size: 13px; }
.devops-table { margin: 0; }
.devops-table span { color: #64748b; font-size: 12px; }
.devops-badge { display: inline-flex; align-items: center; min-height: 24px; border-radius: 999px; padding: 0 10px; background: #dcfce7; color: #166534; font-weight: 800; }
.devops-badge.warning { background: #ffedd5; color: #9a3412; }
.devops-badge.danger { background: #fee2e2; color: #991b1b; }
.devops-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 104px; gap: 8px; color: #64748b; }
.devops-empty strong { color: #0f172a; font-size: 16px; }
.devops-restore-grid { display: grid; grid-template-columns: 220px minmax(260px, 1fr) 120px 120px; gap: 12px; align-items: end; padding: 16px 18px; }
.devops-restore-grid label { display: grid; gap: 7px; color: #334155; font-weight: 800; }
.devops-restore-grid input, .devops-restore-grid select { height: 42px; border: 1px solid #dbe3ef; border-radius: 8px; padding: 0 10px; }
.devops-result { min-height: 56px; margin: 0 18px 18px; border: 1px dashed #cbd5e1; border-radius: 12px; padding: 12px; background: #f8fafc; color: #334155; white-space: pre-wrap; }
.content-status.warning { background: #ff8617; }
.message-compose { display: grid; grid-template-columns: repeat(2, minmax(260px, 1fr)); gap: 16px 20px; padding: 24px 30px 8px; }
.message-compose label { display: grid; grid-template-columns: 90px minmax(0, 1fr); align-items: center; gap: 12px; color: #354052; }
.message-compose input, .message-compose select { height: 42px; }
.message-compose .message-textarea { grid-column: 1 / -1; align-items: start; }
.message-compose textarea { min-height: 130px; }
.message-compose button { width: 120px; }

.overview-hero {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 24px;
  overflow: hidden;
  border-radius: 20px;
  padding: 26px 30px;
  background: linear-gradient(135deg, #182033 0%, #1f4e79 54%, #35a37a 100%);
  color: #fff;
  box-shadow: 0 22px 46px rgba(30, 58, 95, 0.18);
}
.overview-hero-copy { max-width: 720px; }
.overview-eyebrow { display: inline-block; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,0.16); color: #dcefff; font-size: 13px; }
.overview-hero h2 { margin: 18px 0 10px; font-size: 34px; letter-spacing: 1px; }
.overview-hero p { margin: 0; color: rgba(255,255,255,0.82); line-height: 1.8; }
.overview-hero-side { display: flex; flex-direction: column; justify-content: center; min-width: 210px; border-radius: 18px; padding: 20px; background: rgba(255,255,255,0.14); backdrop-filter: blur(12px); }
.overview-hero-side span { color: rgba(255,255,255,0.72); }
.overview-hero-side strong { margin-top: 8px; font-size: 24px; }
.overview-hero-side em { margin-top: 12px; color: #ffe48f; font-style: normal; font-weight: 700; }
.overview-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.overview-metric { position: relative; overflow: hidden; min-height: 150px; border-radius: 18px; padding: 20px; background: #fff; box-shadow: 0 12px 32px rgba(33,38,52,0.08); }
.overview-metric::after { content: ''; position: absolute; right: -30px; top: -30px; width: 112px; height: 112px; border-radius: 50%; background: rgba(31,143,255,0.12); }
.overview-metric.green::after { background: rgba(64,201,134,0.16); }
.overview-metric.orange::after { background: rgba(255,127,56,0.16); }
.overview-metric.violet::after { background: rgba(108,84,255,0.14); }
.overview-metric span { color: var(--muted); font-size: 14px; }
.overview-metric strong { display: block; margin-top: 16px; color: var(--text); font-size: 32px; }
.overview-metric em { margin-left: 4px; color: var(--muted); font-size: 14px; font-style: normal; font-weight: 500; }
.overview-metric p { margin: 14px 0 0; color: #2f8f63; font-size: 13px; }
.overview-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(340px, 0.75fr); gap: 18px; margin-top: 18px; }
.overview-panel { border: 1px solid var(--line); border-radius: 18px; background: #fff; padding: 20px; box-shadow: 0 12px 32px rgba(33,38,52,0.07); }
.overview-wide-panel { min-height: 260px; }
.overview-panel-head { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.overview-panel-head strong { color: var(--text); font-size: 20px; }
.overview-panel-head span { color: var(--muted); font-size: 13px; }
.overview-business-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.overview-business-card { min-height: 98px; border-radius: 14px; padding: 16px; background: linear-gradient(180deg, #f8fbff, #eef5ff); }
.overview-business-card span { color: #69758a; }
.overview-business-card strong { display: block; margin-top: 10px; font-size: 26px; }
.overview-business-card p { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.overview-work-list { display: grid; grid-template-columns: 1fr; gap: 12px; }
.overview-work-item { display: flex; flex-direction: row; justify-content: space-between; align-items: center; min-height: 64px; border-radius: 12px; padding: 12px 14px; background: #f7f9fc; }
.overview-work-item strong { display: block; color: #263144; }
.overview-work-item span { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; }
.overview-work-item em { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #1f8fff; color: #fff; font-style: normal; font-weight: 800; }
.overview-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.overview-action-grid button { height: 46px; border: 1px solid #dbe6f4; border-radius: 10px; background: #f7fbff; color: #255179; font-weight: 700; }
.overview-action-grid button:hover { border-color: var(--blue); background: #eaf5ff; color: var(--blue); }
.overview-status-panel { background: linear-gradient(180deg, #ffffff, #fbfbef); }
.overview-status-list { display: grid; grid-template-columns: 1fr; gap: 13px; }
.overview-status-list span { display: flex; flex-direction: row; align-items: center; gap: 10px; color: #465066; }
.overview-status-list i { width: 9px; height: 9px; border-radius: 50%; background: #40c986; box-shadow: 0 0 0 5px rgba(64,201,134,0.14); }

.content-console { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; min-height: calc(100vh - 112px); }
.content-subnav { display: flex; flex-direction: column; gap: 8px; border-radius: 12px; padding: 12px; background: #fff; box-shadow: 0 12px 28px rgba(33,38,52,0.06); }
.content-subnav-item { height: 54px; border: 0; border-radius: 5px; background: transparent; color: #4a5568; font-size: 17px; }
.content-subnav-item.active { background: #ede9ff; color: #684dff; font-weight: 800; }
.content-workbench { min-width: 0; }
.content-page-card, .content-edit-page, .content-empty-panel { min-height: calc(100vh - 116px); border-radius: 8px; background: #fff; box-shadow: 0 12px 28px rgba(33,38,52,0.06); }
.content-page-title { display: flex; flex-direction: row; justify-content: space-between; align-items: center; min-height: 66px; padding: 0 30px; border-bottom: 1px solid #eef0f5; }
.content-page-title h2, .content-edit-head h2 { margin: 0; color: #684dff; font-size: 24px; }
.content-page-title div { display: flex; flex-direction: row; gap: 18px; }
.product-summary-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 20px 30px 0; }
.product-summary-row div { border-radius: 12px; padding: 16px; background: linear-gradient(135deg, #fff7ed, #f8fafc); box-shadow: 0 10px 24px rgba(33,38,52,0.06); }
.product-summary-row span { color: #64748b; font-size: 13px; }
.product-summary-row strong { display: block; margin-top: 8px; color: #111827; font-size: 24px; }
.product-mode-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 18px 50px 8px; }
.product-mode-card { display: flex; flex-direction: column; align-items: flex-start; min-height: 86px; border: 1px solid #e2e8f0; border-radius: 18px; padding: 18px 20px; background: #fff; text-align: left; box-shadow: 0 12px 26px rgba(15,23,42,0.06); }
.product-mode-card strong { color: #0f172a; font-size: 20px; font-weight: 900; }
.product-mode-card span { margin-top: 8px; color: #64748b; line-height: 1.5; }
.product-mode-card.active { border-color: #0f172a; background: linear-gradient(135deg, #0f172a, #1e3a8a); box-shadow: 0 18px 32px rgba(30,58,138,0.22); }
.product-mode-card.active strong, .product-mode-card.active span { color: #fff; }
.product-self-sale-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0 50px 10px; }
.product-self-sale-group { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; background: #fbfdff; }
.product-self-sale-group span { flex: 0 0 76px; color: #334155; font-weight: 800; }
.product-self-sale-group button { height: 36px; border: 1px solid #1d4ed8; border-radius: 6px; background: #fff; color: #1d4ed8; padding: 0 13px; font-weight: 700; }
.product-self-sale-group button:hover { background: #1d4ed8; color: #fff; }
.product-self-sale-group button.active { border-color: #0f172a; background: #0f172a; color: #fff; box-shadow: 0 8px 18px rgba(15,23,42,0.18); }
.product-self-sale-note { margin: 0 50px 6px; border-radius: 8px; padding: 11px 14px; background: #eff6ff; color: #31517a; line-height: 1.6; }
.product-trade-result { margin: 0 50px 8px; border: 1px solid #dbeafe; border-radius: 14px; background: #ffffff; overflow: hidden; }
.product-trade-result-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; background: linear-gradient(135deg, #f8fafc, #eff6ff); }
.product-trade-result-head strong { color: #0f172a; font-size: 16px; }
.product-trade-result-head span { color: #1d4ed8; font-weight: 800; }
.product-trade-table { width: 100%; border-collapse: collapse; }
.product-trade-table th, .product-trade-table td { border-top: 1px solid #eef2f7; padding: 12px 14px; color: #334155; text-align: center; }
.product-trade-table th { background: #fbfdff; color: #475569; font-weight: 800; }
.product-trade-status { display: inline-flex; align-items: center; min-height: 24px; border-radius: 999px; padding: 0 10px; background: #fff7ed; color: #9a3412; font-weight: 800; }
.product-trade-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 116px; gap: 8px; color: #64748b; }
.product-trade-empty strong { color: #0f172a; font-size: 17px; }
.product-trade-empty span { color: #2563eb; font-weight: 800; }
.product-trade-empty em { color: #94a3b8; font-style: normal; }
.message-type-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 6px 30px 18px; }
.message-type-grid-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.message-type-card { min-height: 98px; border: 1px solid #e2e8f0; border-radius: 18px; padding: 18px; background: #fff; text-align: left; box-shadow: 0 12px 26px rgba(15,23,42,0.06); }
.message-type-card strong { display: block; color: #0f172a; font-size: 18px; font-weight: 900; }
.message-type-card span { display: block; margin-top: 8px; color: #64748b; line-height: 1.5; }
.message-type-card.active { border-color: #0f172a; background: linear-gradient(135deg, #0f172a, #1e3a8a); }
.message-type-card.active strong, .message-type-card.active span { color: #fff; }
.message-workbench-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 0 30px 26px; }
.message-workbench-card { border: 1px solid #e5e7eb; border-radius: 18px; background: #fbfdff; padding: 16px; }
.message-workbench-wide { margin: 18px 30px 28px; }
.message-workbench-card h3 { margin: 0 0 12px; color: #111827; font-size: 17px; }
.message-compose.compact { grid-template-columns: 1fr; padding: 0; }
.message-log-panel { margin: 0 30px 18px; border: 1px solid #e5e7eb; border-radius: 16px; padding: 14px; background: #fff; }
.message-log-panel h3 { margin: 0 0 10px; color: #111827; }
.message-mini-table { width: 100%; border-collapse: collapse; background: #fff; }
.message-mini-table th, .message-mini-table td { border: 1px solid #eef2f7; padding: 10px; color: #334155; text-align: center; }
.message-mini-table th { background: #f8fafc; color: #475569; font-weight: 800; }
.message-order-link { max-width: 190px; border: 0; background: transparent; color: #1d4ed8; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.message-ellipsis { display: inline-block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.message-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 96px; gap: 8px; color: #64748b; }
.message-empty-state strong { color: #0f172a; font-size: 16px; }
.message-empty-state span { max-width: 560px; line-height: 1.6; }
.message-reply-box { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.message-reply-box strong { color: #0f172a; }
.message-reply-box textarea { min-height: 92px; border: 1px solid #dbe3ef; border-radius: 12px; padding: 10px; resize: vertical; }
.qr-pay-setting-box { display: flex; gap: 18px; align-items: center; border: 1px solid #e5e7eb; border-radius: 18px; padding: 18px; background: #fbfdff; }
.qr-pay-preview { display: flex; align-items: center; justify-content: center; width: 148px; height: 148px; border: 1px dashed #94a3b8; border-radius: 16px; background: #fff; color: #64748b; font-weight: 800; }
.qr-pay-config { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; flex: 1; }
.qr-pay-config em { flex: 0 0 100%; color: #64748b; line-height: 1.7; }
.payment-provider-panel { margin: 18px 30px; border: 1px solid #dbeafe; border-radius: 18px; padding: 18px; background: linear-gradient(135deg, #f8fbff, #eef6ff); }
.payment-provider-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.payment-provider-head strong { display: block; color: #0f172a; font-size: 18px; }
.payment-provider-head span { display: block; margin-top: 6px; color: #64748b; line-height: 1.6; }
.payment-provider-head em { border-radius: 999px; padding: 7px 12px; background: #1d4ed8; color: #fff; font-style: normal; font-weight: 800; }
.payment-provider-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.payment-provider-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.payment-provider-grid-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.payment-provider-card { min-height: 116px; border: 1px solid #bfdbfe; border-radius: 16px; padding: 18px; background: #fff; color: #334155; text-align: left; box-shadow: 0 12px 26px rgba(15,23,42,0.06); }
.payment-provider-card strong { display: block; color: #0f172a; font-size: 20px; }
.payment-provider-card span { display: block; margin-top: 9px; color: #64748b; line-height: 1.7; }
.payment-provider-card.active { border-color: #0f172a; background: linear-gradient(135deg, #0f172a, #1e40af); box-shadow: 0 18px 34px rgba(30,64,175,0.2); }
.payment-provider-card.active strong, .payment-provider-card.active span { color: #fff; }
.payment-provider-note { margin-top: 14px; border-radius: 14px; padding: 13px 15px; background: #ecfdf5; color: #166534; line-height: 1.7; }
.payment-provider-note.warning { background: #fff7ed; color: #9a3412; }
.payment-provider-note strong { margin-right: 10px; }
.payment-cloud-status { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin: 18px 30px; border: 1px solid #bfdbfe; border-radius: 18px; padding: 18px; background: linear-gradient(135deg, #eff6ff, #fff); box-shadow: 0 12px 24px rgba(15,23,42,0.06); }
.payment-cloud-status strong { display: block; color: #0f172a; font-size: 19px; }
.payment-cloud-status span { display: block; margin-top: 7px; color: #475569; line-height: 1.7; }
.payment-cloud-status button { flex: 0 0 auto; min-width: 126px; }
.payment-cloud-status.ready { border-color: #86efac; background: linear-gradient(135deg, #ecfdf5, #fff); }
.payment-cloud-status.warning { border-color: #fed7aa; background: linear-gradient(135deg, #fff7ed, #fff); }
.payment-cloud-status.danger { border-color: #fecaca; background: linear-gradient(135deg, #fef2f2, #fff); }
.official-pay-page { margin: 0 30px 24px; }
.official-pay-hero { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-radius: 20px; padding: 22px 24px; background: linear-gradient(135deg, #172554, #0f766e); color: #fff; box-shadow: 0 18px 38px rgba(15,118,110,0.16); }
.official-pay-hero.reconcile { background: linear-gradient(135deg, #111827, #b45309); box-shadow: 0 18px 38px rgba(180,83,9,0.16); }
.official-pay-hero.native-v3 { background: linear-gradient(135deg, #0f172a, #0369a1); box-shadow: 0 18px 38px rgba(3,105,161,0.18); }
.official-pay-hero strong { display: block; font-size: 24px; }
.official-pay-hero span { display: block; max-width: 860px; margin-top: 9px; color: rgba(255,255,255,0.8); line-height: 1.7; }
.official-pay-hero em { flex: 0 0 auto; border-radius: 999px; padding: 8px 14px; background: rgba(255,255,255,0.16); color: #fef3c7; font-style: normal; font-weight: 900; }
.official-pay-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.official-pay-card { min-height: 136px; border: 1px solid #e2e8f0; border-radius: 18px; padding: 17px; background: #fff; box-shadow: 0 12px 26px rgba(15,23,42,0.06); }
.official-pay-card strong { display: block; color: #0f172a; font-size: 18px; }
.official-pay-card span { display: block; margin-top: 9px; color: #64748b; line-height: 1.6; }
.official-pay-card em { display: inline-flex; margin-top: 12px; border-radius: 999px; padding: 5px 10px; background: #dcfce7; color: #166534; font-style: normal; font-weight: 900; }
.official-pay-card.warning em { background: #ffedd5; color: #9a3412; }
.official-pay-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.official-pay-compare div { border-radius: 18px; padding: 18px; background: #f8fafc; border: 1px solid #e2e8f0; }
.official-pay-compare h3 { margin: 0; color: #0f172a; font-size: 18px; }
.official-pay-compare p { margin: 9px 0 0; color: #475569; line-height: 1.7; }
.official-pay-checklist { margin-right: 0; margin-left: 0; }
.official-pay-steps { display: grid; grid-template-columns: 1fr; gap: 10px; }
.official-pay-steps span { display: flex; align-items: center; gap: 12px; min-height: 42px; border-radius: 12px; padding: 9px 12px; background: #fff; color: #334155; }
.official-pay-steps b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #1d4ed8; color: #fff; }
.official-pay-lock { border-radius: 16px; padding: 15px 18px; background: #fff7ed; color: #9a3412; line-height: 1.7; }
.official-pay-lock strong { margin-right: 10px; }
.product-edit-tabs { padding-top: 18px; padding-right: 30px; padding-left: 30px; flex-wrap: wrap; }
.product-edit-tabs button { min-width: 132px; }
.product-panel { display: none; }
.product-panel.active { display: block; }
.product-stock-warning { color: #dc2626; font-weight: 800; }
.product-title-cell { min-width: 260px; }
.product-cover-thumb { float: left; display: grid; place-items: center; width: 54px; height: 54px; margin-right: 12px; overflow: hidden; border-radius: 10px; background: #f4d69a; color: #8a520f; font-weight: 800; }
.product-cover-thumb img { width: 100%; height: 100%; object-fit: cover; }
.shop-product-picker { display: flex; flex-direction: row; gap: 8px; width: 100%; }
.shop-product-picker select { flex: 1; min-width: 0; }
.content-green-button, .content-outline-danger, .content-edit-button, .content-delete-button { height: 42px; border-radius: 4px; padding: 0 22px; background: #fff; }
.content-green-button { border: 1px solid #36bf16; background: #36bf16; color: #fff; font-weight: 700; }
.content-outline-danger { border: 1px solid #ff2f45; color: #ff2f45; }
.content-data-table { width: calc(100% - 60px); margin: 24px 30px 36px; border-collapse: collapse; }
.content-data-table th, .content-data-table td { height: 72px; border: 1px dashed #e9edf4; padding: 10px 12px; color: #252f3f; text-align: center; }
.content-data-table th { height: 58px; background: #fcfcfd; color: #445066; font-weight: 700; }
.content-id-badge { display: inline-block; min-width: 64px; border-radius: 4px; padding: 5px 10px; background: #9aa0a8; color: #fff; font-weight: 800; }
.content-thumb-placeholder { display: grid; place-items: center; width: 38px; height: 38px; margin: 0 auto; border-radius: 8px; background: #f7dca5; color: #8a541b; font-weight: 800; }
.content-status { display: inline-block; border-radius: 5px; padding: 5px 12px; background: #33bd16; color: #fff; font-weight: 800; }
.content-status.danger { background: #b91c1c; }
.content-style-tag { display: inline-block; border: 1px solid #ffa800; border-radius: 3px; padding: 5px 12px; color: #ff9b00; }
.content-level-tag { display: inline-block; border-radius: 3px; padding: 5px 10px; background: #fff3bf; color: #9b6400; font-weight: 700; }
.content-edit-button { border: 1px solid #684dff; color: #684dff; }
.content-delete-button { margin-left: 8px; border: 1px solid #ff2f45; color: #ff2f45; }
.content-empty-panel { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; color: #465066; }
.content-empty-panel h2 { margin: 0; color: #684dff; font-size: 26px; }
.content-empty-panel p { max-width: 520px; margin: 0; color: var(--muted); line-height: 1.7; text-align: center; }
.content-edit-head { display: flex; flex-direction: row; justify-content: space-between; align-items: center; min-height: 66px; padding: 0 30px; border-bottom: 1px solid #eef0f5; }
.content-presentation-notice { display: flex; flex-direction: row; align-items: center; gap: 18px; margin: 24px 56px 0; border: 1px solid #dbeafe; border-radius: 10px; padding: 14px 18px; background: #eff6ff; color: #31517a; }
.content-presentation-notice strong { flex: 0 0 auto; color: #1f66b1; }
.content-presentation-notice span { line-height: 1.6; }
.content-form-section { margin: 30px 56px 0; }
.content-form-section h3 { margin: 0 0 20px; border-radius: 4px; padding: 16px 24px; background: #fafafa; color: #111827; font-size: 19px; }
.content-form-grid { display: grid; grid-template-columns: minmax(180px, 760px) minmax(260px, 1fr); gap: 20px 84px; align-items: start; }
.content-form-grid label { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 18px; color: #354052; font-size: 16px; }
.content-form-grid label span, .content-form-grid label em { color: #b7c0d5; font-size: 14px; font-style: normal; }
.content-form-grid input, .content-form-grid select { height: 42px; }
.content-textarea-row textarea { height: 150px; }
.content-image-row, .content-textarea-row, .content-style-choice { grid-column: 1 / -1; }
.content-upload-line { display: flex; flex-direction: row; align-items: center; gap: 12px; }
.content-upload-line button { width: 86px; height: 86px; border: 1px dashed #dbe1eb; border-radius: 4px; background: #fbfcfe; color: #c3ccda; }
.content-image-preview { display: grid; place-items: center; width: 100px; height: 100px; border-radius: 6px; background: #f7dca5; color: #8a541b; font-weight: 800; }
.content-image-preview.empty { background: #f3f3f3; color: #8b8f99; }
.content-radio-row { display: flex; flex-direction: row; align-items: center; gap: 14px; min-height: 42px; }
.content-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #dce1e8; background: #f0f2f5; }
.content-radio.active { border: 6px solid #4f6df6; background: #fff; }
.content-style-options { display: flex; flex-direction: row; flex-wrap: wrap; gap: 14px; }
.content-style-options button { min-width: 120px; height: 40px; border: 1px solid #dbe1eb; border-radius: 6px; background: #fff; color: #465066; }
.content-style-options button.active { border-color: #684dff; color: #684dff; font-weight: 800; }
.content-layout-options { display: grid; grid-template-columns: repeat(5, minmax(140px, 1fr)); gap: 14px; max-width: 1120px; }
.gallery-layout-options { grid-template-columns: repeat(4, minmax(170px, 1fr)); }
.content-layout-card { position: relative; min-height: 154px; border: 1px solid #dfe5ef; border-radius: 12px; padding: 68px 14px 14px; background: #fff; color: #354052; text-align: left; }
.content-layout-card::before { content: ''; position: absolute; left: 14px; right: 14px; top: 14px; height: 42px; border-radius: 8px; background: linear-gradient(135deg, #dbeafe, #93c5fd); }
.content-layout-card:nth-child(1)::before { height: 56px; background: linear-gradient(135deg, #1d4ed8, #bfdbfe); }
.content-layout-card:nth-child(2)::before { background: linear-gradient(90deg, #0ea5e9 0 48%, transparent 48% 52%, #22c55e 52% 100%); }
.content-layout-card:nth-child(3)::before { background: linear-gradient(90deg, #e2e8f0 0 58%, #fb923c 58% 100%); }
.content-layout-card:nth-child(4)::before { background: linear-gradient(90deg, #38bdf8 0 34%, #e2e8f0 34% 100%); }
.content-layout-card:nth-child(5)::before { height: 24px; background: repeating-linear-gradient(180deg, #cbd5e1 0 4px, transparent 4px 10px); }
.content-layout-card.active { border-color: #684dff; box-shadow: 0 0 0 3px rgba(104,77,255,0.12); }
.content-layout-card strong { display: block; color: #111827; font-size: 16px; }
.content-layout-card span { display: block; margin-top: 8px; color: #64748b; font-size: 13px; line-height: 1.5; }
.content-layout-card em { display: block; margin-top: 10px; color: #684dff; font-style: normal; font-weight: 700; font-size: 12px; }
.content-layout-card.gallery-card::before { height: 52px; background: linear-gradient(135deg, #0284c7, #bae6fd); }
.content-layout-card.gallery-card:nth-child(2)::before { background: linear-gradient(90deg, #0f766e 0 48%, transparent 48% 52%, #0284c7 52% 100%); }
.content-layout-card.gallery-card:nth-child(3)::before { height: 64px; background: linear-gradient(135deg, #0f766e 0 45%, #facc15 45% 62%, #92400e 62% 100%); }
.content-layout-card.gallery-card:nth-child(4)::before { background: conic-gradient(from 90deg, #38bdf8, #22c55e, #facc15, #fb7185, #38bdf8); }
.content-save-bar { position: sticky; bottom: 0; margin-top: 30px; border-top: 1px solid #eef0f5; padding: 14px 0; background: rgba(255,255,255,0.96); text-align: center; }
.content-save-bar button { min-width: 86px; height: 42px; background: #684dff; }
.content-filter-row { display: flex; flex-direction: row; gap: 12px; padding: 30px 50px 14px; }
.content-filter-row select { width: 220px; height: 42px; }
.content-filter-row input { width: 220px; height: 42px; }
.content-toolbar-row { display: flex; flex-direction: row; gap: 16px; padding: 12px 50px 10px; }
.content-solid-green, .content-solid-orange, .content-push-button, .content-copy-button { height: 42px; border-radius: 4px; padding: 0 22px; background: #fff; }
.content-solid-green { border: 1px solid #159947; background: #159947; color: #fff; font-weight: 700; }
.content-solid-orange { border: 1px solid #ffa800; color: #ffa800; }
.article-table .content-title-cell { text-align: left; }
.content-blue-badge { display: inline-block; margin-right: 8px; border-radius: 4px; padding: 5px 13px; background: #2f9ceb; color: #fff; font-weight: 800; }
.content-title-cell strong { margin-right: 8px; }
.content-title-cell em { display: block; width: fit-content; margin-top: 8px; border: 1px solid #2f9ceb; border-radius: 3px; padding: 5px 12px; color: #2f9ceb; font-style: normal; }
.rating-code-link { display: inline-block; border-radius: 6px; padding: 7px 14px; background: #eff6ff; color: #1d4ed8; font-weight: 900; text-decoration: none; }
.rating-code-link:hover { background: #dbeafe; color: #1e40af; }
.rating-url-cell a { color: #2563eb; text-decoration: none; word-break: break-all; }
.rating-url-cell span { display: inline-block; max-width: 360px; color: #475569; font-size: 12px; word-break: break-all; }
.content-push-button { margin-left: 8px; border: 1px solid #2f9ceb; color: #2f9ceb; }
.content-copy-button { margin-left: 8px; border: 1px solid #ffa800; color: #ffa800; }
.comment-table th, .comment-table td { height: 84px; }
.comment-title-cell { max-width: 260px; line-height: 1.5; }
.content-audit-pass { display: inline-block; border: 1px solid #16a34a; border-radius: 3px; padding: 8px 14px; color: #16a34a; line-height: 1.4; font-weight: 700; }
.content-table-foot { padding: 0 50px 34px; color: #111827; font-size: 17px; }
.content-table-foot strong { color: #ff2f45; }
.video-library-page { min-height: 680px; }
.video-library-tip { margin: 0 34px 20px; border-radius: 10px; padding: 14px 16px; background: #eff6ff; color: #1e40af; line-height: 1.7; }
.video-library-tip strong { color: #1d4ed8; }
.video-library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; padding: 0 34px 34px; }
.video-library-empty { grid-column: 1 / -1; border: 1px dashed #cbd5e1; border-radius: 12px; padding: 48px; color: #94a3b8; text-align: center; background: #f8fafc; }
.video-library-card { overflow: hidden; border: 1px solid #e5e7eb; border-radius: 14px; background: #fff; box-shadow: 0 10px 22px rgba(15,23,42,0.06); }
.video-library-thumb { display: grid; place-items: center; aspect-ratio: 16 / 9; background: #111827; color: #fff; }
.video-library-thumb span { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,0.18); font-size: 24px; }
.video-library-thumb img { width: 100%; height: 100%; object-fit: cover; }
.video-library-meta { display: grid; gap: 6px; padding: 14px; }
.video-library-meta strong { color: #111827; font-size: 16px; }
.video-library-meta em { color: #64748b; font-size: 12px; font-style: normal; }
.video-library-meta p { overflow: hidden; margin: 0; color: #94a3b8; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.video-library-actions { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; padding: 0 14px 14px; }
.video-library-actions button { margin: 0; }
.content-gallery-thumb { display: grid; place-items: center; width: 38px; height: 38px; margin: 0 auto; border-radius: 5px; background: #f5f5f5; color: #b5bbc6; font-size: 12px; }
.content-gallery-thumb.red { background: #b91c1c; color: #ffe66b; font-weight: 800; }
.content-image-preview.gallery-red { background: #b91c1c; color: #ffe66b; }
.content-image-preview.gallery-photo { background: linear-gradient(135deg, #334155, #e2e8f0); color: #fff; }
.content-edit-tabs { display: flex; flex-direction: row; gap: 18px; padding: 30px 50px 10px; border-bottom: 1px solid #eef0f5; }
.content-edit-tabs button { min-width: 150px; height: 52px; border: 1px solid #e3e7ef; border-radius: 7px 7px 0 0; background: #fff; color: #111827; font-size: 17px; }
.content-edit-tabs button.active { border-color: #684dff; background: #684dff; color: #fff; font-weight: 800; }
.article-edit-page .content-form-grid { grid-template-columns: minmax(180px, 760px) minmax(360px, 1fr); }
.content-unit-field { display: grid; grid-template-columns: 1fr 52px; }
.content-unit-field input { border-radius: 4px 0 0 4px; }
.content-unit-field span { display: grid; place-items: center; border-radius: 0 4px 4px 0; background: #eeeaff; color: #684dff; font-weight: 800; }
.content-editor-row { grid-column: 1 / -1; align-items: start !important; }
.content-rich-editor { width: 720px; max-width: 100%; border: 1px solid #dbe1eb; border-radius: 4px; overflow: hidden; background: #fff; }
.content-rich-toolbar { min-height: 92px; border-bottom: 1px solid #dbe1eb; padding: 12px; background: linear-gradient(#fbfbfb, #eceff4); color: #4b5563; line-height: 1.9; }
.content-rich-body { min-height: 280px; padding: 18px; background: #111; color: #fff; line-height: 1.8; }
.word-editor-shell { width: min(1120px, 100%); overflow: hidden; border: 1px solid #cfd7e6; border-radius: 8px; background: #eef2f7; box-shadow: 0 16px 38px rgba(33,38,52,0.08); }
.word-editor-shell.compact { width: 100%; }
.word-editor-ribbon { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid #cfd7e6; padding: 10px; background: linear-gradient(180deg, #ffffff, #edf2f8); }
.word-ribbon-group { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; border: 1px solid #dbe3ef; border-radius: 8px; padding: 8px; background: rgba(255,255,255,0.82); }
.word-ribbon-group strong { width: 100%; color: #64748b; font-size: 12px; font-weight: 700; }
.word-ribbon-group button, .word-ribbon-group select { height: 32px; border: 1px solid #cfd7e6; border-radius: 5px; background: #fff; color: #1f2937; padding: 0 9px; font-size: 13px; }
.word-ribbon-group button:hover { border-color: #684dff; color: #684dff; }
.word-ribbon-group label { display: flex !important; grid-template-columns: none !important; flex-direction: row; align-items: center; gap: 5px; color: #4b5563; font-size: 13px; }
.word-ribbon-group input[type="color"] { width: 34px; height: 28px; border: 1px solid #cfd7e6; border-radius: 5px; padding: 2px; background: #fff; }
.word-editor-meta { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 14px; padding: 10px 18px; color: #64748b; font-size: 13px; }
.word-editor-meta span { color: #111827 !important; font-weight: 800; }
.word-editor-meta em { color: #64748b !important; font-style: normal; }
.word-editor-page { min-height: 520px; margin: 0 auto 22px; width: min(880px, calc(100% - 44px)); border: 1px solid #d8dee9; border-radius: 2px; padding: 46px 56px; background: #fff; color: #111827; line-height: 1.85; outline: none; box-shadow: 0 12px 30px rgba(33,38,52,0.1); }
.word-editor-shell.compact .word-editor-page { min-height: 360px; width: calc(100% - 28px); margin-bottom: 14px; padding: 32px 38px; }
.word-editor-page h1, .word-editor-page h2, .word-editor-page h3 { margin: 0 0 18px; color: #111827; line-height: 1.35; }
.word-editor-page p { margin: 0 0 14px; }
.word-editor-page blockquote { margin: 16px 0; border-left: 4px solid #684dff; padding: 8px 14px; background: #f6f4ff; color: #465066; }
.word-editor-page img { max-width: 100%; height: auto; border-radius: 6px; }
.word-editor-page img.rich-editor-image-selected { outline: 3px solid #3b82f6; outline-offset: 3px; box-shadow: 0 0 0 6px rgba(59,130,246,0.16); }
.article-doc-table, .word-editor-page table { width: 100%; margin: 18px 0; border-collapse: collapse; }
.article-doc-table td, .word-editor-page td { min-width: 80px; border: 1px solid #cbd5e1; padding: 10px; }
.content-check-row { display: flex; flex-direction: row; gap: 18px; align-items: center; }
.content-check { width: 18px; height: 18px; border: 1px solid #dbe1eb; border-radius: 4px; background: #f5f7fa; }
.content-link-input { display: grid; grid-template-columns: 70px 1fr; }
.content-link-input span { display: grid; place-items: center; border: 1px solid #dbe1eb; border-right: 0; border-radius: 4px 0 0 4px; background: #eeeaff; color: #684dff; }
.content-link-input input { border-radius: 0 4px 4px 0; }

.user-console { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; min-height: calc(100vh - 112px); }
.user-subnav { display: flex; flex-direction: column; gap: 8px; border-radius: 12px; padding: 12px; background: #fff; box-shadow: 0 12px 28px rgba(33,38,52,0.06); }
.user-subnav-item { height: 54px; border: 0; border-radius: 5px; background: transparent; color: #4a5568; font-size: 17px; }
.user-subnav-item.active { background: #ede9ff; color: #684dff; font-weight: 800; }
.user-workbench { min-width: 0; }
.user-dashboard { display: grid; gap: 20px; }
.user-summary-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.user-summary-card { display: flex; flex-direction: row; align-items: center; gap: 18px; min-height: 124px; border: 0; border-radius: 8px; padding: 24px; background: #fff; box-shadow: 0 12px 28px rgba(33,38,52,0.06); text-align: left; }
.user-summary-card:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(33,38,52,0.1); }
.user-summary-icon { display: block; width: 74px; height: 74px; border-radius: 12px; background: #684dff; }
.user-summary-icon::after { content: ''; display: block; width: 34px; height: 34px; margin: 20px auto; border-radius: 50%; background: rgba(255,255,255,0.88); }
.user-green { background: #28b82f; }
.user-orange { background: #ff8617; }
.user-teal { background: #11bd8f; }
.user-purple { background: #684dff; }
.user-summary-card p { margin: 0; color: #536071; font-size: 16px; }
.user-summary-card p em { margin-left: 8px; color: #7a8294; font-style: normal; }
.user-summary-card strong { display: block; margin-top: 8px; color: #111827; font-size: 30px; }
.user-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(420px, 1fr); gap: 20px; }
.user-panel { min-height: 260px; border-radius: 8px; padding: 24px; background: #fff; box-shadow: 0 12px 28px rgba(33,38,52,0.06); }
.user-panel h2 { margin: 0 0 18px; font-size: 22px; }
.user-panel-head { display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.user-panel-head h2 { margin: 0; }
.user-time-tabs { display: flex; flex-direction: row; }
.user-time-tabs button { min-width: 68px; height: 34px; border: 1px solid #dbe1eb; background: #fff; color: #64748b; }
.user-time-tabs button.active { border-color: #684dff; background: #684dff; color: #fff; }
.user-line-chart { position: relative; height: 250px; margin-top: 8px; padding-left: 38px; background: repeating-linear-gradient(180deg, transparent 0 48px, #e9eef7 49px 50px); }
.user-line-chart.dynamic { padding-left: 0; overflow: hidden; }
.user-line-chart.dynamic svg { position: absolute; left: 18px; right: 18px; top: 8px; width: calc(100% - 36px); height: 202px; }
.user-line-chart.dynamic circle { fill: #fff; stroke: #684dff; stroke-width: 3; }
.user-y { position: absolute; left: 0; color: #6b7280; font-size: 14px; }
.user-y.y2 { top: 0; } .user-y.y15 { top: 50px; } .user-y.y1 { top: 99px; } .user-y.y05 { top: 148px; } .user-y.y0 { top: 196px; }
.user-curve { position: absolute; left: 190px; top: 28px; width: 300px; height: 170px; border-radius: 50% 50% 16px 16px; border-top: 4px solid #684dff; box-shadow: 0 18px 20px rgba(104,77,255,0.12) inset; }
.user-x-axis { position: absolute; left: 70px; right: 20px; bottom: 0; display: flex; flex-direction: row; justify-content: space-between; color: #6b7280; }
.user-funnel { display: grid; grid-template-columns: 1fr 1.1fr; gap: 26px; align-items: center; min-height: 190px; }
.funnel-shape { display: flex; flex-direction: column; align-items: center; color: #fff; font-weight: 800; }
.funnel-shape span:nth-child(1) { display: grid; place-items: center; width: 220px; height: 70px; clip-path: polygon(0 0, 100% 0, 74% 100%, 26% 100%); background: #684dff; }
.funnel-shape span:nth-child(2) { display: grid; place-items: center; width: 54px; height: 76px; background: #28b82f; }
.funnel-shape span:nth-child(3) { display: grid; place-items: center; width: 32px; height: 72px; background: #ff8617; }
.funnel-data p { color: #64748b; line-height: 1.7; }
.dot { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; }
.dot.purple { background: #684dff; } .dot.green { background: #28b82f; } .dot.orange { background: #ff8617; }
.member-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.member-card { min-height: 138px; border: 1px solid #f1e7df; border-radius: 6px; padding: 28px; background: linear-gradient(135deg, #fff7f1, #fff); }
.member-card strong { display: block; color: #1f2937; font-size: 20px; }
.member-card p { margin: 26px 0 0; color: #111827; }
.member-card em { color: #684dff; font-style: normal; }
.member-card b { color: #ff2f45; }
.user-tag-table { width: 100%; border-collapse: collapse; }
.user-tag-table th, .user-tag-table td { height: 64px; border: 1px dashed #e9edf4; padding: 0 26px; text-align: left; }
.user-tag-table th { background: #f6f4fb; }
.user-tag-table td:last-child { color: #684dff; }
.user-placeholder { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; min-height: calc(100vh - 116px); border-radius: 8px; background: #fff; box-shadow: 0 12px 28px rgba(33,38,52,0.06); }
.user-placeholder h2 { margin: 0; color: #684dff; font-size: 26px; }
.user-placeholder p { max-width: 520px; margin: 0; color: var(--muted); line-height: 1.7; text-align: center; }
.user-manage-card { min-height: calc(100vh - 116px); border-radius: 8px; background: #fff; box-shadow: 0 12px 28px rgba(33,38,52,0.06); }
.user-page-title { min-height: 66px; padding: 0 30px; border-bottom: 1px solid #eef0f5; display: flex; flex-direction: row; align-items: center; }
.user-page-title h2 { margin: 0; color: #684dff; font-size: 24px; }
.user-filter-row { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; align-items: center; padding: 30px 50px 20px; }
.user-filter-row label { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.user-filter-row select { width: 190px; }
.user-filter-row input { width: 220px; }
.user-manage-table { width: calc(100% - 100px); margin: 0 50px 40px; border-collapse: collapse; }
.user-manage-table th, .user-manage-table td { border: 1px dashed #e9edf4; padding: 16px; text-align: center; vertical-align: middle; }
.user-manage-table th { height: 58px; background: #fcfcfd; color: #445066; }
.user-info-cell { display: flex; flex-direction: row; gap: 14px; align-items: center; text-align: left; }
.user-avatar, .user-detail-avatar { display: block; flex: 0 0 auto; width: 62px; height: 62px; border-radius: 50%; background: #dff3ff; }
.user-avatar.dark, .user-detail-avatar.dark { background: radial-gradient(circle, #111 0 48%, #f7d36a 49% 52%, #111 53% 100%); }
.user-info-cell p { margin: 5px 0; }
.user-info-cell em { display: inline-block; min-width: 48px; margin-right: 8px; border-radius: 4px; padding: 3px 7px; background: #2f9ceb; color: #fff; font-style: normal; font-weight: 800; text-align: center; }
.user-info-cell em.phone { background: #d9a100; color: #111; }
.user-info-cell em.source { background: #1f2937; }
.user-info-cell i { display: inline-block; width: 20px; height: 20px; border-radius: 50%; background: #10b981; vertical-align: middle; }
.user-manage-table a { color: #684dff; }
.user-detail-overlay, .user-permission-overlay { position: fixed; inset: 0; z-index: 30; }
.user-detail-mask { position: absolute; inset: 0; background: rgba(0,0,0,0.45); }
.user-detail-drawer { position: absolute; right: 0; top: 0; width: 68vw; min-width: 980px; height: 100vh; overflow-y: auto; background: #fff; box-shadow: -24px 0 60px rgba(0,0,0,0.18); }
.user-detail-head { display: flex; flex-direction: row; align-items: center; gap: 20px; padding: 28px 32px; }
.user-detail-head strong { margin-right: 12px; font-size: 22px; }
.user-detail-head em { display: inline-block; margin-right: 6px; border-radius: 4px; padding: 5px 10px; background: #aeb4bd; color: #fff; font-style: normal; }
.user-detail-head button { margin-left: auto; border: 0; background: transparent; font-size: 30px; color: #64748b; }
.user-detail-actions { display: flex; flex-direction: row; justify-content: flex-end; gap: 12px; padding: 0 32px 22px; }
.user-wallet-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding: 0 32px 24px; }
.user-wallet-grid div { min-height: 110px; border-radius: 8px; padding: 22px; background: #f7f7fb; position: relative; }
.user-wallet-grid span { color: #7a8294; }
.user-wallet-grid strong { display: block; margin-top: 8px; font-size: 30px; }
.user-wallet-grid a { position: absolute; right: 22px; top: 28px; color: #684dff; }
.user-trade-stat { border-top: 12px solid #f5f3fb; border-bottom: 12px solid #f5f3fb; padding: 22px 32px; }
.user-trade-stat h3 { margin: 0 0 18px; font-size: 20px; }
.user-trade-stat div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.user-trade-stat span { color: #64748b; }
.user-trade-stat strong { display: block; margin-top: 8px; color: #111827; font-size: 28px; }
.user-detail-tabs { display: flex; flex-direction: row; gap: 34px; overflow-x: auto; padding: 22px 32px 0; border-bottom: 1px solid #eef0f5; }
.user-detail-tabs button { min-width: max-content; height: 48px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: #64748b; font-size: 16px; }
.user-detail-tabs button.active { border-color: #684dff; color: #111827; }
.user-base-info { padding: 28px 32px 60px; }
.user-detail-tab-body { min-height: 280px; }
.user-base-info label { display: flex; flex-direction: row; align-items: center; gap: 10px; margin-bottom: 22px; color: #64748b; }
.user-base-info [data-user-inline-edit] { cursor: pointer; color: #684dff; }
.user-switch { display: inline-block; width: 44px; height: 24px; border-radius: 12px; background: #e5e7eb; }
.user-switch.active { background: #684dff; }
.user-base-info table { width: 100%; border-collapse: collapse; }
.user-base-info th, .user-base-info td { border: 1px solid #dfe3ea; padding: 16px; text-align: left; }
.user-base-info th { width: 150px; background: #f3f3f3; font-weight: 500; }
.user-permission-dialog { position: absolute; left: 50%; top: 50%; width: 750px; transform: translate(-50%, -50%); border-radius: 4px; background: #fff; box-shadow: 0 24px 70px rgba(0,0,0,0.25); }
.user-permission-dialog h2 { margin: 0; padding: 18px; border-bottom: 1px solid #eef0f5; text-align: center; font-size: 20px; }
.user-permission-dialog label { display: flex; flex-direction: row; align-items: center; gap: 16px; margin: 28px 50px; font-size: 17px; }
.user-permission-dialog div { display: flex; flex-direction: row; justify-content: center; gap: 12px; padding: 20px; }
.user-consume-tabs { display: flex; flex-direction: row; gap: 18px; padding: 32px 50px 0; border-bottom: 1px solid #eef0f5; }
.user-consume-tabs button { min-width: 150px; height: 52px; border: 1px solid #e3e7ef; border-bottom: 0; border-radius: 7px 7px 0 0; background: #fff; color: #111827; font-size: 17px; }
.user-consume-tabs button.active { border-color: #684dff; background: #684dff; color: #fff; font-weight: 800; }
.user-consume-note { margin: 18px 50px 0; border: 1px solid #dbeafe; border-radius: 8px; padding: 12px 16px; background: #eff6ff; color: #31517a; line-height: 1.6; }
.consume-filter-row { padding-top: 22px; }
.user-consume-table { width: calc(100% - 100px); margin: 0 50px 40px; border-collapse: collapse; }
.user-consume-table th, .user-consume-table td { height: 68px; border: 1px dashed #e9edf4; padding: 12px 16px; color: #253044; text-align: center; }
.user-consume-table th { height: 58px; background: #fcfcfd; color: #445066; font-weight: 700; }
.consume-avatar { display: inline-block; width: 36px; height: 36px; margin-right: 10px; border-radius: 50%; background: linear-gradient(135deg, #fde68a, #bae6fd); vertical-align: middle; }
.consume-type { display: inline-block; border-radius: 4px; padding: 5px 12px; color: #fff; font-weight: 800; }
.consume-type.income { background: #36bf16; }
.consume-type.expense { background: #ff2341; }
.member-setting-page { position: relative; padding-bottom: 80px; }
.member-setting-note { margin: 24px 50px 0; border: 1px solid #dbeafe; border-radius: 8px; padding: 12px 16px; background: #eff6ff; color: #31517a; line-height: 1.6; }
.member-setting-form { display: grid; grid-template-columns: 1fr; gap: 34px; max-width: 1180px; padding: 36px 50px; }
.member-setting-form label { display: grid; grid-template-columns: 120px minmax(0, 560px) minmax(280px, 1fr); align-items: center; gap: 18px; color: #354052; font-size: 17px; }
.member-setting-form em { color: #b7c0d5; font-size: 14px; font-style: normal; line-height: 1.6; }
.member-unit-field { display: grid; grid-template-columns: 1fr 56px; }
.member-unit-field input { height: 42px; border-radius: 4px 0 0 4px; }
.member-unit-field span { display: grid; place-items: center; border-radius: 0 4px 4px 0; background: #eeeaff; color: #684dff; font-weight: 800; }
.member-check-row { display: flex; flex-direction: row; align-items: center; gap: 14px; min-height: 42px; }
.member-check { display: inline-block; width: 20px; height: 20px; border: 1px solid #dbe1eb; border-radius: 4px; background: #f5f7fa; }
.member-check.active { border-color: #4f6df6; background: #4f6df6; position: relative; }
.member-check.active::after { content: '✓'; position: absolute; left: 4px; top: -2px; color: #fff; font-weight: 800; }
.member-level-actions { padding: 32px 50px 10px; }
.member-level-table { width: calc(100% - 100px); margin: 16px 50px 26px; border-collapse: collapse; }
.member-level-table th, .member-level-table td { height: 88px; border: 1px dashed #e9edf4; padding: 12px 16px; color: #253044; text-align: center; }
.member-level-table th { height: 58px; background: #fcfcfd; color: #445066; font-weight: 700; }
.level-number { display: inline-block; border-radius: 4px; padding: 7px 14px; background: #ff1f3d; color: #fff; font-weight: 800; }
.level-plain-tag { display: inline-block; border: 1px solid #6b7280; border-radius: 3px; padding: 5px 12px; color: #6b7280; }
.level-disable { margin-left: 8px; color: #ff2341; }
.member-level-edit-page { padding-bottom: 80px; }
.member-level-form { padding-top: 28px; }
.member-card-preview-row { align-items: start !important; }
.member-card-preview { width: 394px; height: 236px; border-radius: 6px; padding: 28px; background: linear-gradient(135deg, #e7bd75, #f4dcaa); color: #000; }
.member-card-preview strong { display: block; margin-bottom: 22px; font-size: 24px; }
.member-card-preview small { font-size: 18px; }
.member-card-preview span { font-size: 14px; }
.member-color-input { display: grid; grid-template-columns: 44px 1fr; }
.member-color-input span { background: #d920d9; border-radius: 4px 0 0 4px; }
.member-color-input.black span { background: #000; }
.member-color-input input { border-radius: 0 4px 4px 0; }
.member-edit-section { margin: 24px 50px 0; border-top: 1px solid #eef0f5; padding-top: 24px; }
.member-edit-section h3 { margin: 0 0 18px; border-radius: 4px; padding: 16px 24px; background: #fafafa; color: #111827; font-size: 19px; }
.member-setting-form.compact { padding: 0; }
.member-benefit-list { width: 620px; display: grid; grid-template-columns: 1fr; gap: 16px; margin-left: 266px; }
.member-benefit-list div { display: grid; grid-template-columns: 1fr 86px; height: 42px; border: 1px solid #dfe4eb; border-radius: 4px; overflow: hidden; }
.member-benefit-list div { align-items: center; padding-left: 12px; font-weight: 700; }
.member-benefit-list button { height: 42px; border: 0; background: #ff2341; color: #fff; font-weight: 700; }
.benefit-add { margin: 26px 0 24px 266px; }
.card-record-table { width: calc(100% - 100px); margin: 28px 50px 40px; border-collapse: collapse; }
.card-record-table th, .card-record-table td { height: 92px; border: 1px dashed #e9edf4; padding: 12px 18px; color: #253044; text-align: center; }
.card-record-table th { height: 58px; background: #fcfcfd; color: #445066; font-weight: 700; }
.card-user-cell { display: flex; flex-direction: row; align-items: center; gap: 14px; text-align: left; }
.user-message-dialog { position: absolute; left: 50%; top: 50%; width: 680px; transform: translate(-50%, -50%); border-radius: 6px; background: #fff; box-shadow: 0 24px 70px rgba(0,0,0,0.25); }
.user-message-dialog h2 { margin: 0; padding: 18px; border-bottom: 1px solid #eef0f5; text-align: center; font-size: 20px; }
.user-message-dialog label { display: grid; grid-template-columns: 96px 1fr; align-items: start; gap: 14px; margin: 22px 36px; color: #354052; }
.user-message-dialog textarea { min-height: 130px; }
.user-message-dialog div { display: flex; flex-direction: row; justify-content: center; gap: 12px; padding: 18px; border-top: 1px solid #eef0f5; }

.system-console { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; min-height: calc(100vh - 112px); }
.system-subnav { display: flex; flex-direction: column; gap: 8px; border-radius: 12px; padding: 12px; background: #fff; box-shadow: 0 12px 28px rgba(33,38,52,0.06); }
.system-subnav-item { height: 54px; border: 0; border-radius: 5px; background: transparent; color: #4a5568; font-size: 17px; }
.system-subnav-item.active { background: #ede9ff; color: #684dff; font-weight: 800; }
.system-card { min-height: calc(100vh - 116px); border-radius: 8px; background: #fff; box-shadow: 0 12px 28px rgba(33,38,52,0.06); padding-bottom: 80px; }
.system-title { min-height: 66px; padding: 0 30px; border-bottom: 1px solid #eef0f5; display: flex; flex-direction: row; align-items: center; }
.system-title h2 { margin: 0; color: #684dff; font-size: 24px; }
.system-form-section { margin: 30px 50px 0; }
.system-form-section h3 { margin: 0 0 20px; border-radius: 4px; padding: 16px 24px; background: #fafafa; color: #111827; font-size: 19px; }
.system-form-section h3 a { color: #684dff; font-size: 15px; }
.system-form-grid { display: grid; grid-template-columns: 1fr; gap: 26px; max-width: 1240px; }
.system-form-grid label { display: grid; grid-template-columns: 150px minmax(320px, 560px) minmax(260px, 1fr); align-items: center; gap: 18px; color: #354052; font-size: 16px; }
.system-form-grid label em { color: #b7c0d5; font-size: 14px; font-style: normal; line-height: 1.6; }
.system-textarea-row, .system-editor-row, .system-auth-preview-row { align-items: start !important; }
.system-textarea-row textarea { height: 150px; }
.system-auth-preview { width: 220px; height: 410px; border-radius: 18px; background: linear-gradient(180deg, #f7efe7, #fffaf6); display: grid; place-items: start center; padding-top: 34px; box-shadow: inset 0 0 0 1px rgba(123,49,29,.08); }
.system-auth-preview div { width: 176px; border-radius: 18px; padding: 18px 14px; background: #fff; text-align: center; box-shadow: 0 12px 24px rgba(123,49,29,.1); }
.system-auth-preview strong, .system-auth-preview span { display: block; }
.system-auth-preview .preview-avatar { width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 50%; background: #b9372b; color: #fff; font-size: 22px; font-weight: 800; line-height: 52px; box-shadow: 0 8px 18px rgba(185,55,43,.18); }
.system-auth-preview strong { color: #7b311d; font-size: 20px; line-height: 28px; }
.system-auth-preview span { margin-top: 6px; color: #6d5649; font-size: 11px; }
.system-auth-preview button { width: 100%; margin: 14px 0 8px; border: 0; border-radius: 16px; padding: 9px; background: #24414d; color: #fff; font-weight: 700; }
.system-auth-preview p { margin: 4px 0 0; color: #6d5649; font-size: 10px; line-height: 16px; text-align: left; }
.system-auth-preview p i { display: inline-block; width: 11px; height: 11px; margin-right: 4px; border-radius: 3px; background: #b9372b; color: #fff; font-size: 8px; line-height: 11px; text-align: center; font-style: normal; }
.system-auth-preview p b { color: #b9372b; font-weight: 700; }
.content-rich-body.light { min-height: 260px; overflow-y: auto; background: #fff; color: #111827; white-space: pre-line; }
.system-tip-warning { margin-bottom: 22px; border: 1px solid #fde68a; border-radius: 6px; padding: 16px 24px; background: #fff3cd; color: #8a5a00; }
.system-toggle-button { min-width: 96px; height: 38px; border: 1px solid #dbe1eb; border-radius: 5px; background: #f5f7fa; color: #64748b; font-weight: 700; }
.system-toggle-button.active { border-color: #36bf16; background: #36bf16; color: #fff; }
.remote-setting-box { margin-top: 24px; }
.remote-setting-box.disabled { opacity: 0.48; filter: grayscale(0.3); }
.remote-setting-box.disabled input, .remote-setting-box.disabled select { background: #f3f4f6; cursor: not-allowed; }
.forum-admin-card { padding-bottom: 26px; }
.forum-admin-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 24px 30px 0; }
.forum-admin-summary button { min-height: 96px; border: 1px solid transparent; border-radius: 12px; padding: 18px; background: linear-gradient(135deg, #fff7ed, #f8fafc); text-align: left; box-shadow: 0 10px 24px rgba(33,38,52,0.06); cursor: pointer; }
.forum-admin-summary button.active { border-color: #ef4444; background: linear-gradient(135deg, #fee2e2, #fff7ed); }
.forum-admin-summary button.danger { background: linear-gradient(135deg, #fff1f2, #f8fafc); }
.forum-admin-summary span { color: #64748b; font-size: 13px; }
.forum-admin-summary strong { display: block; margin-top: 10px; color: #111827; font-size: 28px; }
.forum-admin-summary em { display: block; margin-top: 8px; color: #b91c1c; font-size: 12px; font-style: normal; }
.forum-risk-tip { margin: 14px 30px 0; border: 1px solid #fecaca; border-radius: 10px; padding: 12px 14px; background: #fff1f2; color: #991b1b; font-weight: 700; line-height: 1.6; }
.forum-risk-tip-detail { margin: 12px 0; }
.forum-admin-toolbar { display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; margin: 22px 30px 0; border-radius: 10px; padding: 16px; background: #f8fafc; }
.forum-admin-toolbar label { display: flex; flex-direction: row; align-items: center; gap: 8px; color: #475569; }
.forum-admin-toolbar input, .forum-admin-toolbar select { width: 180px; height: 38px; }
.forum-admin-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.65fr); gap: 18px; margin: 20px 30px 0; }
.forum-admin-layout-single { grid-template-columns: minmax(0, 1fr); }
.forum-post-table-wrap { min-width: 0; overflow: auto; border: 1px solid #eef0f5; border-radius: 10px; }
.forum-post-table { width: 100%; min-width: 980px; border-collapse: collapse; background: #fff; }
.forum-post-table th, .forum-post-table td { border-bottom: 1px dashed #e9edf4; padding: 12px; color: #253044; text-align: center; vertical-align: middle; }
.forum-post-table th { height: 54px; background: #fcfcfd; color: #445066; font-weight: 800; }
.forum-post-title-cell { text-align: left !important; }
.forum-post-title-cell strong { display: block; color: #111827; line-height: 1.45; }
.forum-post-title-cell span { display: block; margin-top: 7px; color: #64748b; font-size: 12px; }
.forum-post-table em { color: #64748b; font-style: normal; }
.forum-risk-reason { display: block; margin-top: 7px; color: #b91c1c; font-weight: 800; }
.forum-op-tag { display: inline-block; margin: 2px; border-radius: 999px; padding: 4px 8px; background: #e5e7eb; color: #64748b; font-size: 12px; }
.forum-op-tag.active { background: #fee2e2; color: #b91c1c; font-weight: 800; }
.forum-post-table .content-edit-button, .forum-post-table .content-copy-button, .forum-post-table .content-push-button, .forum-post-table .content-delete-button { height: 32px; margin: 3px; padding: 0 10px; }
.forum-comment-panel { min-width: 0; max-height: calc(100vh - 260px); overflow: auto; border: 1px solid #eef0f5; border-radius: 10px; padding: 16px; background: #fff; }
.forum-comment-panel h3 { margin: 0; color: #111827; font-size: 20px; }
.forum-comment-panel p { margin: 8px 0 16px; color: #64748b; line-height: 1.6; }
.forum-comment-group { margin-top: 14px; border-top: 1px solid #eef0f5; padding-top: 14px; }
.forum-comment-group h4 { margin: 0 0 10px; color: #334155; font-size: 14px; line-height: 1.45; }
.forum-comment-item { margin-bottom: 10px; border-radius: 10px; padding: 12px; background: #f8fafc; }
.forum-comment-item strong { color: #111827; }
.forum-comment-item span { display: block; margin-top: 4px; color: #94a3b8; font-size: 12px; }
.forum-comment-item p { margin: 8px 0; color: #334155; }
.forum-comment-item em { color: #b91c1c; font-style: normal; font-weight: 800; }
.forum-comment-item footer { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.forum-comment-item button { height: 30px; border: 1px solid #dbe1eb; border-radius: 5px; background: #fff; color: #475569; padding: 0 10px; }
.forum-comment-empty { border-radius: 8px; padding: 12px; background: #f8fafc; color: #94a3b8; text-align: center; }
.forum-detail-drawer { max-width: 760px; }
.forum-detail-flags { display: flex; flex-direction: row; gap: 8px; margin: 16px 0; }
.forum-detail-flag { display: inline-grid; place-items: center; min-width: 34px; height: 30px; border-radius: 8px; padding: 0 9px; background: #e5e7eb; color: #475569; font-weight: 900; }
.forum-detail-flag.top { background: #fee2e2; color: #b91c1c; }
.forum-detail-flag.fine { background: #fef3c7; color: #b45309; }
.forum-detail-flag.rec { background: #dbeafe; color: #1d4ed8; }
.forum-detail-flag.risk { background: #b91c1c; color: #ffffff; }
.forum-detail-body { border-radius: 14px; padding: 18px; background: #f8fafc; }
.forum-detail-body p { margin: 0; color: #334155; line-height: 1.8; }
.forum-detail-stats { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.forum-detail-stats span { border-radius: 999px; padding: 6px 10px; background: #fff; color: #64748b; font-size: 12px; }
.forum-detail-comments { margin-top: 18px; }
.forum-detail-comment { margin-top: 10px; border-radius: 10px; padding: 12px; background: #f8fafc; }
.forum-detail-comment span { display: block; margin-top: 4px; color: #94a3b8; font-size: 12px; }
.forum-detail-comment p { margin: 8px 0; color: #334155; }
.forum-detail-comment em { color: #b91c1c; font-style: normal; font-weight: 800; }
.forum-detail-comment footer { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.forum-detail-comment button { height: 30px; border: 1px solid #dbe1eb; border-radius: 5px; background: #fff; color: #475569; padding: 0 10px; }
.personal-center-card { padding-bottom: 0; }
.personal-center-layout { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 24px; padding: 24px; }
.personal-preview-column { display: flex; flex-direction: row; justify-content: center; }
.personal-phone-preview { width: 360px; min-height: 760px; overflow: hidden; border: 1px dashed #60a5fa; border-radius: 8px; background: #f8fafc; }
.personal-header-card { padding: 20px 20px 0; background: linear-gradient(180deg, #f8d7da, #ef8f8f); }
.personal-user-row { display: flex; flex-direction: row; align-items: center; gap: 14px; }
.personal-avatar { width: 70px; height: 70px; border-radius: 50%; background: linear-gradient(135deg, #111827, #9ca3af); }
.personal-user-row strong { display: block; color: #1f2937; font-size: 18px; }
.personal-user-row em { display: block; margin-top: 4px; color: #b45309; font-style: normal; }
.personal-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); padding: 18px 8px; text-align: center; }
.personal-stat-row strong { display: block; font-size: 20px; }
.personal-stat-row span { color: #7f1d1d; font-size: 14px; font-weight: 700; }
.personal-group-button { display: inline-grid; place-items: center; min-width: 86px; height: 34px; border: 0; border-radius: 17px; background: #ef4444; color: #fff; font-size: 14px; font-weight: 800; box-shadow: 0 8px 18px rgba(239,68,68,0.25); }
.personal-stat-row .personal-group-button + span { display: block; margin-top: 6px; color: #7f1d1d; font-size: 12px; }
.personal-member-bar { display: flex; flex-direction: row; justify-content: space-between; align-items: center; border-radius: 10px 10px 0 0; padding: 12px 14px; background: rgba(255,255,255,0.9); color: #ef4444; font-weight: 700; }
.personal-balance-card { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 16px 18px; background: #fff; border-top: 6px solid #ef4444; }
.personal-balance-card button { border: 0; border-radius: 6px; padding: 10px 18px; background: #ef4444; color: #fff; }
.personal-bind-row { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 16px 18px; background: #fff; border-top: 6px solid #ef4444; }
.personal-bind-row span { color: #6b7280; }
.personal-order-shortcuts { margin-top: 12px; padding: 16px 18px; background: #fff; }
.personal-order-shortcuts .personal-section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.personal-order-shortcuts .personal-section-head span { color: #9a6a56; font-size: 12px; }
.personal-order-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; text-align: center; }
.personal-order-grid div { display: grid; place-items: center; gap: 8px; }
.personal-order-grid span { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #fef2f2; color: #ef4444; font-weight: 800; }
.personal-order-grid .system-inline-svg { width: 42px; height: 42px; }
.personal-order-grid strong { color: #374151; font-size: 14px; }
.personal-section-card { margin-top: 12px; padding: 18px; background: #fff; }
.personal-section-head { margin-bottom: 16px; }
.personal-section-head strong { font-size: 18px; }
.personal-app-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 12px; }
.personal-app-item { text-align: center; }
.personal-app-icon { display: block; width: 52px; height: 52px; margin: 0 auto 8px; border-radius: 50%; }
.personal-app-icon.orange { background: #ff6b1a; }
.personal-app-icon.gold { background: linear-gradient(135deg, #facc15, #f59e0b); }
.personal-app-icon.blue { background: #2196f3; }
.personal-app-icon.amber { background: #ffbf3c; }
.personal-app-icon.coral { background: #ff7043; }
.personal-app-icon.green { background: #2ecc71; }
.personal-app-icon.pink { background: #ff5c8a; }
.personal-app-icon.dark { background: #2f2f2f; }
.personal-app-item em { font-style: normal; color: #374151; font-size: 13px; }
.banner-card { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.member-mall-card, .service-card { display: grid; place-items: center; min-height: 74px; background: #f3f4f6; color: #1f2937; font-weight: 700; text-align: center; }
.personal-setting-column { min-width: 0; }
.personal-setting-grid { gap: 20px; }
.personal-app-tip { margin: 18px 0; border-radius: 6px; padding: 14px 16px; background: #fee2e2; color: #ef4444; }
.personal-add-app-button { margin: 0 0 18px; }
.personal-app-editor-list { display: grid; grid-template-columns: 1fr; gap: 16px; }
.personal-app-editor { display: grid; grid-template-columns: 122px 1fr; gap: 16px; border: 1px solid #e5e7eb; border-radius: 6px; padding: 14px; background: #fff; }
.personal-app-editor-icon { display: grid; place-items: end center; height: 92px; border: 0; color: #fff; font-weight: 700; border-radius: 6px; background-size: cover; background-position: center; }
.personal-app-editor-icon.has-image { text-shadow: 0 1px 4px rgba(0,0,0,0.7); }
.personal-app-editor-body { display: grid; gap: 10px; }
.personal-inline-field { display: grid; grid-template-columns: 80px 1fr; }
.personal-inline-field span { display: grid; place-items: center; border: 1px solid #dfe4eb; border-right: 0; background: #f8fafc; color: #6b7280; }
.personal-inline-field input, .personal-inline-field select { border-radius: 0 4px 4px 0; }
.personal-link-field { grid-template-columns: 80px 1fr 92px; }
.personal-link-field button { border: 1px solid #dfe4eb; border-left: 0; background: #f8fafc; color: #684dff; }
.personal-remove-app { width: fit-content; margin-left: 0; }
.personal-banner-config { margin-top: 22px; display: grid; gap: 14px; }
.personal-banner-config h3 { margin: 0; border-radius: 4px; padding: 14px 16px; background: #fafafa; font-size: 18px; }
.personal-banner-editor { display: grid; gap: 10px; border: 1px solid #e5e7eb; border-radius: 6px; padding: 14px; background: #fff; }
.personal-banner-editor strong { color: #111827; }
.personal-banner-editor em { color: #64748b; font-size: 13px; font-style: normal; }
.personal-group-qr-row { display: grid; grid-template-columns: 132px 1fr; gap: 14px; align-items: center; }
.personal-group-qr-row div { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; align-items: center; }
.personal-group-qr-row em { flex-basis: 100%; }
.personal-group-qr-preview { display: grid; place-items: center; width: 132px; height: 132px; border: 1px dashed #f87171; border-radius: 10px; background: #fff7f7; color: #ef4444; font-size: 13px; background-size: cover; background-position: center; }
.personal-group-qr-preview.has-image { border-style: solid; color: transparent; }
.tabbar-config-card { padding-bottom: 78px; }
.tabbar-config-layout { display: grid; grid-template-columns: 260px 420px minmax(420px, 1fr); gap: 18px; padding: 24px; }
.tabbar-list-panel, .tabbar-preview-panel, .tabbar-setting-panel { min-height: 720px; background: #fff; }
.tabbar-list-head { display: flex; flex-direction: row; align-items: center; gap: 10px; min-height: 56px; border-bottom: 1px solid #eef0f5; }
.tabbar-list-head button { border: 0; background: transparent; color: #684dff; }
.tabbar-switch { margin-left: auto; width: 44px; height: 24px; border-radius: 12px; background: #cbd5e1; }
.tabbar-switch.active { background: #36bf16; }
.tabbar-list-item { display: flex; flex-direction: row; justify-content: space-between; min-height: 78px; padding: 14px; background: #f1edff; }
.tabbar-list-item div { display: flex; flex-direction: row; gap: 8px; }
.tabbar-preview-panel { position: relative; display: flex; flex-direction: column; align-items: center; background: #f7f6fb; }
.tabbar-demo-button { align-self: flex-end; margin: 0 10px 18px 0; }
.tabbar-phone { position: relative; width: 330px; height: 620px; overflow: hidden; border-radius: 18px 18px 0 0; background: #f2f2f2; box-shadow: 0 16px 40px rgba(33,38,52,0.1); }
.tabbar-phone-status { display: flex; flex-direction: row; justify-content: space-between; height: 42px; padding: 10px 22px; background: #fff; font-weight: 800; }
.tabbar-phone-body { height: 506px; background: #f5f5f5; }
.tabbar-bottom-preview { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); height: 72px; background: #fff; }
.tabbar-preview-item { display: flex; flex-direction: column; align-items: center; justify-content: center; color: #b8b8c0; }
.tabbar-preview-item span { font-size: 24px; }
.tabbar-preview-image { width: 24px; height: 24px; border-radius: 6px; background-size: cover; background-position: center; }
.tabbar-preview-item em { margin-top: 4px; font-size: 12px; font-style: normal; }
.tabbar-preview-item.active { color: #51475f; }
.tabbar-setting-panel { overflow-y: auto; border-left: 1px solid #eef0f5; }
.tabbar-form-grid label { grid-template-columns: 100px minmax(280px, 1fr) minmax(150px, 0.7fr); }
.tabbar-style-grid { display: grid; grid-template-columns: repeat(3, 126px); gap: 12px; }
.tabbar-style-grid button { min-height: 112px; border: 1px solid #e5e7eb; border-radius: 6px; background: #f3f5f9; color: #9aa3b2; font-weight: 700; }
.tabbar-style-grid button.active { border-color: #684dff; color: #684dff; background: #fff; }
.tabbar-color-field { display: grid; grid-template-columns: 1fr 58px; }
.tabbar-color-field input { border-radius: 4px 0 0 4px; }
.tabbar-color-field button { border: 1px solid #dfe4eb; border-left: 0; background: #f8fafc; color: #64748b; }
.tabbar-type-row { display: flex; flex-direction: row; gap: 12px; margin: 12px 0 16px; }
.tabbar-mode-button { display: flex; flex-direction: row; align-items: center; gap: 8px; min-width: 96px; height: 38px; border: 1px solid #dfe4eb; border-radius: 6px; background: #fff; color: #465066; padding: 0 14px; }
.tabbar-mode-button.active { border-color: #684dff; background: #f1edff; color: #684dff; font-weight: 800; }
.tabbar-item-editor-list { display: grid; gap: 14px; }
.tabbar-item-editor { position: relative; display: grid; grid-template-columns: 92px 1fr; gap: 12px; border: 1px solid #e5e7eb; border-radius: 6px; padding: 12px; }
.tabbar-icon-box { display: grid; grid-template-rows: 1fr 28px; overflow: hidden; border: 1px solid #e5e7eb; }
.tabbar-icon-box strong { display: grid; place-items: center; font-size: 32px; color: #4b5563; }
.tabbar-editor-svg { width: 34px; height: 34px; }
.tabbar-icon-box div { display: grid; grid-template-columns: 1fr 1fr; }
.tabbar-icon-box button { border: 0; background: rgba(0,0,0,0.45); color: #fff; }
.tabbar-icon-box input[type="color"] { width: 100%; height: 28px; border: 0; padding: 0; }
.tabbar-icon-box.image-mode { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; min-height: 92px; border: 1px dashed #cbd5e1; border-radius: 6px; background: #f8fafc; color: #684dff; font-weight: 800; background-size: cover; background-position: center; }
.tabbar-icon-box.image-mode span { border-radius: 999px; padding: 4px 8px; background: rgba(255,255,255,0.86); color: #64748b; font-size: 12px; font-weight: 500; }
.tabbar-icon-box.image-mode.has-image { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.45); }
.tabbar-item-fields { display: grid; gap: 10px; }
.tabbar-item-fields .personal-inline-field { grid-template-columns: 58px 1fr 86px; }
.tabbar-item-fields .personal-inline-field button { border: 1px solid #dfe4eb; border-left: 0; background: #f8fafc; color: #64748b; }
.tabbar-preview-svg { width: 22px; height: 22px; }
.tabbar-system-icon-grid { display: grid; grid-template-columns: repeat(10, minmax(44px, 1fr)); gap: 7px; }
.tabbar-system-icon-grid button { display: grid; place-items: center; gap: 3px; min-height: 54px; border: 1px solid #e5e7eb; border-radius: 10px; background: linear-gradient(180deg, #fff, #f8fafc); color: #475569; cursor: pointer; }
.tabbar-system-svg { width: 22px; height: 22px; stroke: currentColor; }
.tabbar-system-icon-grid button span { font-size: 10px; line-height: 12px; }
.tabbar-system-icon-grid button:hover, .tabbar-system-icon-grid button.active { border-color: #684dff; background: #f5f2ff; color: #684dff; box-shadow: 0 4px 12px rgba(104,77,255,.12); }
.icon-picker-field { display: grid; grid-template-columns: 1fr 86px; }
.personal-inline-field.icon-picker-field { grid-template-columns: 58px 1fr 86px; }
.icon-picker-field input { min-width: 0; }
.icon-picker-field button { border: 1px solid #dfe4eb; border-left: 0; background: #f8fafc; color: #64748b; }
.system-icon-sheet-mask { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center; background: rgba(15, 23, 42, .38); }
.system-icon-sheet { width: min(920px, 100%); height: 54vh; display: grid; grid-template-rows: auto 1fr auto; border-radius: 22px 22px 0 0; background: #ffffff; box-shadow: 0 -18px 48px rgba(15, 23, 42, .22); overflow: hidden; }
.system-icon-sheet header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 14px; border-bottom: 1px solid #eef0f5; }
.system-icon-sheet header strong { display: block; color: #1f2937; font-size: 18px; }
.system-icon-sheet header span { display: block; margin-top: 4px; color: #64748b; font-size: 12px; }
.system-icon-sheet header button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: #f1f5f9; color: #475569; font-size: 20px; cursor: pointer; }
.system-icon-sheet-grid { overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 12px; padding: 18px 22px 22px; }
.system-icon-sheet-grid button { display: grid; place-items: center; gap: 8px; min-height: 82px; border: 1px solid #e5e7eb; border-radius: 14px; background: linear-gradient(180deg, #fff, #f8fafc); color: #475569; cursor: pointer; }
.system-icon-sheet-grid button:hover, .system-icon-sheet-grid button.active { border-color: #684dff; background: #f5f2ff; color: #684dff; box-shadow: 0 8px 18px rgba(104,77,255,.14); }
.system-icon-sheet-svg { width: 28px; height: 28px; stroke: currentColor; }
.system-inline-svg { width: 1em; height: 1em; stroke: currentColor; vertical-align: -0.16em; }
.system-icon-sheet-grid button span { font-size: 12px; line-height: 16px; }
.system-icon-sheet footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px 18px; border-top: 1px solid #eef0f5; background: #fff; }
.system-icon-sheet footer button { min-width: 92px; border: 1px solid #dfe4eb; border-radius: 10px; padding: 10px 16px; background: #f8fafc; color: #475569; cursor: pointer; }
.system-icon-sheet footer .primary-button { border-color: #684dff; background: #684dff; color: #fff; }
.tabbar-remove { position: absolute; right: 8px; top: 6px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: #b8b8c0; color: #fff; }

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

button { cursor: pointer; }

.app-shell {
  display: grid;
  grid-template-columns: 420px minmax(560px, 1fr) 460px;
  height: calc(100vh - 68px);
  min-height: 0;
  overflow: hidden;
}

.module-panel, .setting-panel {
  height: calc(100vh - 68px);
  min-height: 0;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.92);
  border-right: 1px solid var(--line);
}

.setting-panel { border-right: 0; border-left: 1px solid var(--line); }

.brand-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px 12px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: #111827;
  color: #ffe66b;
  font-size: 24px;
  font-weight: 800;
}

.brand-card h1 { margin: 0; font-size: 22px; }
.brand-card p { margin: 5px 0 0; color: var(--muted); }

.panel-tabs {
  display: flex;
  justify-content: center;
  gap: 38px;
  padding: 10px 24px 24px;
}

.tab-button {
  min-width: 122px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: #394155;
}

.tab-button.active {
  border-color: var(--violet);
  background: var(--violet);
  color: #fff;
  font-weight: 700;
}

.module-group { margin: 0 24px 24px; border: 1px solid var(--line); }
.module-group header { padding: 10px 14px; background: #f5f5f6; color: #555f70; font-size: 17px; }
.hidden-panel { display: none; }
.hidden { display: none !important; }

.module-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.module-card {
  min-height: 112px;
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  background: #fff;
  color: #7c8597;
}

.module-card:nth-child(4n) { border-right: 0; }
.module-card:hover { background: #f5faff; color: var(--blue); }

.module-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 16px auto 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #37a7ff, #75c7ff);
  color: #fff;
  font-size: 24px;
  font-weight: 800;
}

.module-icon.green { background: linear-gradient(135deg, #36c983, #62dfa3); }
.module-name { display: block; text-align: center; font-size: 17px; }
.page-list-actions { padding: 12px 12px 0; }
.page-action-button { width: 100%; }
.page-list { padding: 12px; }
.page-card { margin-bottom: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.page-card-main { display: block; width: 100%; padding: 0; border: 0; background: transparent; text-align: left; }
.page-card strong { display: block; color: var(--text); }
.page-card span { display: block; margin-top: 5px; color: var(--muted); font-size: 13px; }
.page-card-actions { display: flex; gap: 8px; margin-top: 10px; }
.page-card-actions button { height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 4px; background: #f7fafc; color: #536071; }
.page-card-actions button:last-child { color: var(--danger); }
.empty-page { padding: 18px; color: var(--muted); line-height: 1.6; }

.preview-stage {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: calc(100vh - 68px);
  overflow: hidden;
}

.stage-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 58px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.62);
  flex: 0 0 auto;
}

.stage-toolbar strong { display: block; font-size: 20px; }
.stage-toolbar span { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; }

.toolbar-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.primary-button, .secondary-button, .danger-button {
  height: 34px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-weight: 700;
}
.primary-button { background: var(--blue); color: #fff; }
.secondary-button { background: #fff; border-color: var(--line); color: #3c4558; }
.secondary-button.active { border-color: var(--blue); background: #eaf5ff; color: var(--blue); }
.danger-button { background: var(--danger); color: #fff; }

.phone-frame-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 18px 28px;
}

.phone-frame {
  align-self: center;
  width: 430px;
  height: calc(100vh - 158px);
  min-height: 520px;
  max-height: 720px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 5px;
  background: #f3f3f3;
  box-shadow: var(--shadow);
}

.phone-status {
  display: flex;
  justify-content: space-between;
  height: 32px;
  padding: 6px 30px 0;
  background: #fff;
  font-weight: 700;
}

.phone-title {
  height: 52px;
  padding-top: 14px;
  background: #fff;
  text-align: center;
  font-size: 16px;
  font-weight: 800;
}

.phone-title.header-official { display: flex; flex-direction: row; align-items: center; justify-content: center; border-bottom: 1px solid #eef0f5; }
.phone-title.header-custom { animation: headerFadeIn 360ms ease-out both; }
.preview-official-title { position: relative; display: flex; flex-direction: row; align-items: center; justify-content: center; width: 100%; height: 44px; padding: 0 88px 0 16px; }
.preview-official-title span { max-width: 210px; overflow: hidden; color: #111827; font-size: 15px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.preview-official-capsule { position: absolute; right: 10px; top: 7px; display: flex; flex-direction: row; align-items: center; justify-content: space-around; width: 72px; height: 30px; border: 1px solid rgba(0,0,0,0.18); border-radius: 16px; background: rgba(255,255,255,0.78); }
.preview-official-capsule i { color: #111827; font-style: normal; font-size: 18px; line-height: 1; }
.preview-official-capsule b { display: block; width: 16px; height: 16px; border: 2px solid #111827; border-radius: 50%; }

.preview-header-inner { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.preview-header-inner img { display: block; height: auto; max-height: 78%; object-fit: contain; }
.preview-header-inner strong { color: #f7d36a; font-size: 18px; letter-spacing: 1px; }
.preview-header-fade { animation: headerFadeIn 420ms ease-out both; }
@keyframes headerFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.page-header-type-help { grid-column: 1 / -1; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 18px; border: 1px solid #dbeafe; border-radius: 8px; padding: 12px 14px; background: #eff6ff; color: #31517a; }
.page-header-type-help span { color: #31517a; line-height: 1.7; }

.phone-body { flex: 1; min-height: 0; overflow-y: auto; background: #f2f2f2; }

.preview-module {
  position: relative;
  outline: 2px dashed transparent;
  outline-offset: -2px;
  cursor: grab;
}

.preview-module.active { outline-color: #139dff; }
.preview-module.dragging { opacity: 0.48; cursor: grabbing; }
.preview-module.drag-over { outline-color: #684dff; box-shadow: inset 0 0 0 3px rgba(104,77,255,0.18); }
.preview-module::before { content: '拖曳排序'; position: absolute; right: 8px; top: 6px; z-index: 2; display: none; border-radius: 999px; padding: 3px 8px; background: rgba(17,24,39,0.74); color: #fff; font-size: 11px; }
.preview-module:hover::before, .preview-module.dragging::before { display: block; }
.module-order-save-bar { align-self: center; display: flex; flex-direction: row; align-items: center; gap: 12px; margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; background: rgba(255,255,255,0.92); box-shadow: 0 10px 24px rgba(33,38,52,0.08); }
.module-order-save-bar span { color: var(--muted); font-size: 13px; }

.search-preview { display: flex; align-items: center; }
.search-box { display: flex; align-items: center; width: 100%; overflow: hidden; }
.search-icon { margin-right: 8px; color: #a6adba; }
.search-placeholder { flex: 1; }
.super-form-card { overflow: hidden; padding: 16px; background: #ffffff; box-shadow: 0 16px 32px rgba(120,72,18,0.12); }
.super-form-card-head { display: flex; flex-direction: column; gap: 6px; }
.super-form-card-head em { align-self: flex-start; border-radius: 999px; padding: 4px 9px; color: #ffffff; font-size: 10px; font-style: normal; font-weight: 900; letter-spacing: .5px; }
.super-form-card-head strong { color: #111827; font-size: 20px; line-height: 1.25; }
.super-form-card-head span { color: #64748b; font-size: 12px; line-height: 1.5; }
.super-form-field-list { display: grid; gap: 8px; margin: 14px 0; }
.super-form-field-list p { display: flex; align-items: center; justify-content: space-between; margin: 0; border: 1px solid #f1e4d1; border-radius: 10px; padding: 9px 10px; background: #fffaf4; }
.super-form-field-list b { color: #374151; font-size: 13px; }
.super-form-field-list i { color: #b45309; font-size: 11px; font-style: normal; }
.super-form-card button { width: 100%; height: 38px; border: 0; border-radius: 999px; font-weight: 900; }
.float-window-button { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; font-size: 10px; font-weight: 700; }
.float-window-button strong { font-size: 22px; line-height: 1; }
.float-window-button img { width: 60%; height: 60%; object-fit: contain; }
.helper-line-preview span { position: absolute; left: 50%; top: 50%; padding: 0 10px; font-size: 12px; transform: translate(-50%, -50%); white-space: nowrap; }
.helper-blank-preview { min-height: 4px; }
.image-text-card { overflow: hidden; background: rgba(255,255,255,0.92); }
.image-text-thumb { display: grid; place-items: center; min-height: 92px; overflow: hidden; flex: 0 0 auto; background: linear-gradient(135deg, #f4d69a, #fff3d8); color: #8a520f; font-weight: 800; }
.image-text-thumb img { width: 100%; height: 100%; object-fit: cover; }
.image-text-copy { display: flex; flex: 1; flex-direction: column; gap: 7px; min-width: 0; }
.image-text-copy strong { font-size: 16px; line-height: 1.35; }
.image-text-copy p { margin: 0; font-size: 12px; line-height: 1.55; }
.image-text-copy button { align-self: flex-start; border: 0; border-radius: 999px; padding: 7px 12px; font-size: 12px; font-weight: 800; }

.button-group-preview { display: grid; gap: 14px 8px; }
.button-item-preview { display: flex; align-items: center; justify-content: center; min-width: 0; }
.button-item-inner { position: relative; display: flex; align-items: center; gap: 8px; max-width: 100%; }
.button-icon-preview { display: grid; place-items: center; overflow: hidden; color: #fff; font-weight: 800; }
.button-icon-preview img { width: 100%; height: 100%; object-fit: cover; }
.button-badge { position: absolute; top: -8px; right: -12px; padding: 2px 6px; border-radius: 10px; background: #f05a4f; color: #fff; font-size: 11px; }
.button-text-preview { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.text-button-preview { display: flex; align-items: center; justify-content: center; }
.text-button-item { display: inline-flex; align-items: center; gap: 5px; }
.text-separator { color: #e0e0e0; }
.single-button-preview { display: flex; justify-content: center; }
.single-button { width: 100%; border: 1px solid; color: #fff; }
.title-bar-preview { display: flex; align-items: center; }
.title-icon { margin-right: 8px; }
.subtitle-preview { display: flex; align-items: center; justify-content: space-between; }
.subtitle-left { display: flex; align-items: center; min-width: 0; }
.subtitle-decorate { display: inline-block; width: 4px; height: 22px; margin-right: 8px; border-radius: 2px; }
.subtitle-more { color: #4b5563; font-size: 13px; }
.rich-text-preview { line-height: 1.5; }
.rich-text-preview p { margin: 0 0 8px; }
.rich-text-preview img { display: block; max-width: 100%; height: auto; margin: 8px auto; border-radius: 6px; }
.rich-text-preview table { width: 100%; margin: 8px 0; border-collapse: collapse; }
.rich-text-preview td { border: 1px solid #d8dee9; padding: 6px; }
.rich-editor-row { align-items: start; }
.design-rich-editor { max-width: 100%; }
.word-editor-shell.compact .design-rich-editor-page { min-height: 220px; padding: 18px; }
.notice-preview { display: flex; align-items: center; overflow: hidden; }
.notice-icon { flex: 0 0 auto; }
.notice-separator { width: 1px; height: 20px; margin: 0 12px; background: #e4e7ec; }
.notice-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.generic-shop-preview { overflow: hidden; }
.shop-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.shop-preview-head div { display: flex; flex-direction: column; min-width: 0; }
.shop-preview-head strong { color: #111827; font-size: 20px; }
.shop-preview-head span { margin-top: 4px; color: #7c5f33; font-size: 12px; line-height: 1.45; }
.shop-preview-head button { flex: 0 0 auto; border: 0; border-radius: 999px; padding: 8px 12px; font-size: 12px; }
.shop-grid-preview { display: grid; }
.shop-card-preview { overflow: hidden; background: #ffffff; box-shadow: 0 14px 28px rgba(120,72,18,0.10); }
.shop-cover-preview { position: relative; display: flex; align-items: center; justify-content: center; height: 138px; overflow: hidden; margin: 8px; background: linear-gradient(135deg, #f4d69a, #fff3d8); color: #8a520f; font-weight: 800; }
.shop-cover-preview img { width: 100%; height: 100%; object-fit: cover; }
.shop-cover-preview em { position: absolute; left: 8px; top: 8px; border-radius: 999px; padding: 3px 7px; color: #ffffff; font-size: 11px; font-style: normal; }
.shop-copy-preview { padding: 0 10px 11px; }
.shop-copy-preview strong { display: block; color: #111827; font-size: 13px; line-height: 1.35; }
.shop-copy-preview p { min-height: 32px; margin: 5px 0 8px; color: #7b6a55; font-size: 11px; line-height: 1.45; }
.shop-copy-preview div { display: flex; flex-direction: column; gap: 4px; }
.shop-copy-preview b { font-size: 16px; }
.shop-copy-preview span { color: #9a8a78; font-size: 10px; }
.shop-buy-preview { width: 100%; height: 32px; margin-top: 9px; border: 0; border-radius: 16px; font-size: 12px; font-weight: 800; }
.shop-load-preview { margin-top: 12px; color: #9a8a78; font-size: 12px; text-align: center; }
.hotspot-canvas { position: relative; display: grid; place-items: center; overflow: hidden; background: linear-gradient(135deg, #e5e7eb, #f8fafc); color: #64748b; font-size: 13px; }
.hotspot-canvas img { width: 100%; height: 100%; object-fit: cover; }
.hotspot-pin { position: absolute; border: 2px solid rgba(255,255,255,0.82); border-radius: 999px; padding: 5px 9px; font-size: 11px; font-weight: 800; transform: translate(-50%, -50%); box-shadow: 0 8px 18px rgba(15,23,42,0.22); }
.image-window-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; min-height: 176px; }
.image-window-grid.grid-2 { grid-template-columns: repeat(2, 1fr); }
.image-window-grid.single-row { grid-template-columns: repeat(3, 1fr); }
.image-window-card { position: relative; display: grid; place-items: center; min-height: 84px; overflow: hidden; background: linear-gradient(135deg, #f4d69a, #fff3d8); color: #8a520f; font-weight: 800; }
.image-window-card.main { grid-row: span 2; }
.image-window-grid.grid-2 .image-window-card.main, .image-window-grid.single-row .image-window-card.main { grid-row: auto; }
.image-window-card img { width: 100%; height: 100%; object-fit: cover; }
.image-window-card strong { position: absolute; left: 8px; right: 8px; bottom: 8px; border-radius: 999px; padding: 4px 8px; background: rgba(15,23,42,0.62); color: #fff; font-size: 11px; text-align: center; }
.group-list-grid { display: grid; }
.group-list-card { overflow: hidden; background: #ffffff; box-shadow: 0 12px 24px rgba(15,23,42,0.08); }
.group-list-cover { position: relative; display: grid; place-items: center; height: 116px; overflow: hidden; margin: 8px; background: linear-gradient(135deg, #dbeafe, #f8fafc); color: #2563eb; font-weight: 800; }
.group-list-cover img { width: 100%; height: 100%; object-fit: cover; }
.group-list-cover em { position: absolute; right: 7px; top: 7px; border-radius: 999px; padding: 3px 7px; background: rgba(17,24,39,0.72); color: #fff; font-size: 10px; font-style: normal; }
.group-list-card strong { display: block; padding: 0 10px; color: #111827; font-size: 13px; line-height: 1.35; }
.group-list-card p { min-height: 30px; margin: 5px 0 8px; padding: 0 10px; color: #64748b; font-size: 11px; line-height: 1.4; }
.group-list-card button { width: calc(100% - 20px); height: 30px; margin: 0 10px 10px; border: 0; border-radius: 15px; font-size: 12px; font-weight: 800; }
.group-list-more { margin-top: 10px; color: #64748b; font-size: 12px; text-align: center; }

.local-forum-preview { overflow: hidden; }
.forum-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.forum-preview-head div { display: flex; flex-direction: column; min-width: 0; }
.forum-preview-head strong { color: #111827; font-size: 19px; }
.forum-preview-head span { margin-top: 4px; color: #6b7280; font-size: 12px; }
.forum-preview-head button { flex: 0 0 auto; border: 0; border-radius: 999px; padding: 8px 12px; font-size: 12px; }
.forum-compose-preview { display: flex; gap: 6px; overflow: hidden; margin-bottom: 12px; }
.forum-compose-preview span { flex: 1; border-radius: 999px; padding: 7px 5px; background: #ffffff; color: #111827; text-align: center; font-size: 11px; box-shadow: 0 8px 18px rgba(15,23,42,0.06); }
.forum-waterfall-preview { column-count: 2; column-gap: 10px; }
.forum-post-card { display: inline-block; width: 100%; margin: 0 0 10px; overflow: hidden; background: #ffffff; box-shadow: 0 12px 26px rgba(15,23,42,0.08); break-inside: avoid; }
.forum-post-cover { position: relative; display: flex; align-items: center; justify-content: center; height: 128px; overflow: hidden; background: linear-gradient(135deg, #f9e7d7, #fef3c7); color: #9a3412; font-weight: 800; }
.forum-post-card.tall .forum-post-cover { height: 170px; }
.forum-post-cover img { width: 100%; height: 100%; object-fit: cover; }
.forum-post-cover em { position: absolute; left: 8px; bottom: 8px; border-radius: 999px; padding: 3px 7px; color: #ffffff; font-size: 11px; font-style: normal; }
.forum-flag-row { position: absolute; left: 8px; top: 8px; display: flex; flex-direction: row; gap: 4px; }
.forum-flag { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; color: #fff; font-size: 12px; font-style: normal; font-weight: 900; box-shadow: 0 6px 14px rgba(15,23,42,0.18); }
.forum-flag.top { background: #ef4444; }
.forum-flag.fine { background: #f59e0b; }
.forum-flag.rec { background: #2563eb; }
.forum-post-copy { padding: 9px; }
.forum-post-copy strong { display: block; color: #111827; font-size: 13px; line-height: 1.35; }
.forum-post-copy p { margin: 5px 0 8px; color: #6b7280; font-size: 11px; line-height: 1.45; }
.forum-post-copy div { display: flex; justify-content: space-between; gap: 6px; color: #8a93a4; font-size: 10px; }
.forum-post-copy b { font-weight: 700; }
.forum-settings-preview { border: 1px dashed #cbd5e1; border-radius: 18px; background: #fff; }
.forum-settings-head { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.forum-settings-head strong { color: #111827; font-size: 18px; }
.forum-settings-head span { color: #64748b; font-size: 12px; line-height: 1.5; }
.forum-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.forum-settings-grid div { display: flex; flex-direction: row; justify-content: space-between; align-items: center; border-radius: 12px; padding: 9px 10px; background: #f8fafc; }
.forum-settings-grid span { color: #334155; font-size: 12px; }
.forum-settings-grid strong { border-radius: 999px; padding: 3px 8px; background: #e5e7eb; color: #64748b; font-size: 11px; }
.forum-settings-grid strong.enabled { background: #dcfce7; color: #15803d; }
.forum-settings-meta { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.forum-settings-meta span { border-radius: 999px; padding: 5px 9px; background: #fff7ed; color: #9a3412; font-size: 11px; }
.forum-module-post-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.forum-manual-slots { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.forum-manual-slot { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px; background: #ffffff; }
.forum-manual-slot strong { display: block; color: #111827; font-size: 14px; }
.forum-manual-slot span { display: block; margin-top: 5px; color: #334155; font-size: 13px; font-weight: 800; }
.forum-manual-slot em { display: block; margin-top: 5px; color: #94a3b8; font-size: 12px; font-style: normal; line-height: 1.45; }
.forum-slot-picker { max-width: 720px; }
.forum-select-post-card { min-height: 92px; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px; background: #ffffff; text-align: left; cursor: pointer; }
.forum-select-post-card.active { border-color: #ef4444; background: #fff1f2; box-shadow: 0 8px 18px rgba(239,68,68,0.08); }
.forum-select-post-card strong { display: block; color: #111827; font-size: 14px; line-height: 1.45; }
.forum-select-post-card span { display: block; margin-top: 7px; color: #64748b; font-size: 12px; line-height: 1.5; }
.forum-select-post-card em { display: inline-block; margin-top: 8px; border-radius: 999px; padding: 4px 8px; background: #f1f5f9; color: #475569; font-size: 11px; font-style: normal; font-weight: 800; }
.forum-select-post-card.active em { background: #fee2e2; color: #b91c1c; }
.forum-post-picker-list { max-height: 360px; overflow: auto; }

.module-float-actions {
  position: sticky;
  top: 84px;
  display: flex;
  flex-direction: column;
  margin-left: 26px;
  overflow: hidden;
  border-radius: 4px;
  background: #747982;
}

.module-float-actions button {
  width: 54px;
  height: 54px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.25);
  background: transparent;
  color: #fff;
  font-size: 28px;
}

.setting-header { padding: 22px 28px 18px; border-bottom: 1px solid var(--line); }
.setting-header h2 { margin: 0; font-size: 22px; }
.setting-header p { margin: 8px 0 0; color: var(--muted); }
.setting-body { padding: 20px 28px 60px; }
.setting-save-bar { position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 14px 0 0; background: rgba(255, 255, 255, 0.95); }
.setting-save-button { min-width: 140px; }
.setting-save-hint { color: var(--muted); font-size: 13px; }

.form-section { padding: 18px 0; border-bottom: 1px dashed var(--line); }
.form-section-title { margin: 0 0 16px; color: #3a4255; font-size: 20px; }
.field-row { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 16px; margin-bottom: 16px; }
.field-row:last-child { margin-bottom: 0; }
.field-row label { color: #465066; }
.inline-controls { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.inline-controls label { display: inline-flex; gap: 7px; align-items: center; color: #333b4d; }

input[type="text"], input[type="number"], select, textarea {
  width: 100%;
  height: 38px;
  border: 1px solid #dfe4eb;
  border-radius: 4px;
  padding: 0 10px;
  background: #fff;
  color: #2d3445;
}

textarea { height: 180px; padding: 10px; line-height: 1.6; resize: vertical; }
.tall-row { align-items: start; }
.section-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; border: 0; background: #f7f7f8; }
.section-tab { display: block; padding: 12px 0; text-align: center; }
.section-tab.active { background: var(--violet); color: #fff; font-weight: 700; }

input[type="color"] { width: 82px; height: 38px; padding: 0; border: 1px solid #dfe4eb; background: #fff; }
input[type="range"] { width: 260px; accent-color: var(--violet); }

.range-value { min-width: 74px; color: #333b4d; }
.mini-button { height: 36px; border: 1px solid #dfe4eb; background: #f7fafc; color: #536071; border-radius: 4px; }

.item-card {
  position: relative;
  margin: 14px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
}

.item-tools { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; }
.item-tools button { width: 26px; height: 26px; border: 0; border-radius: 50%; background: #d8dde6; color: #fff; }
.button-action-box { margin: 10px 0; padding: 12px; border-radius: 6px; background: #f5f7fb; }
.action-summary-box { display: grid; gap: 10px; }
.action-summary-line { display: flex; align-items: center; justify-content: space-between; color: #465066; }
.action-summary-line strong { color: var(--blue); }
.action-summary-desc { overflow: hidden; color: var(--muted); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.action-open-button { width: 128px; }
.action-tip { margin-bottom: 14px; padding: 10px 12px; border-radius: 4px; background: #fff6eb; color: #d97706; line-height: 1.5; }
.image-picker { display: grid; grid-template-columns: 88px 1fr; gap: 12px; align-items: center; }
.image-box { display: grid; place-items: center; width: 88px; height: 72px; overflow: hidden; border-radius: 4px; background: #e9edf2; color: #596579; }
.image-box img { width: 100%; height: 100%; object-fit: cover; }
.upload-field { display: grid; grid-template-columns: 88px 1fr; gap: 12px; align-items: center; }
.upload-preview { display: grid; place-items: center; width: 88px; height: 72px; overflow: hidden; border-radius: 4px; background: #e9edf2; color: #596579; font-size: 13px; }
.upload-preview img { width: 100%; height: 100%; object-fit: cover; }
.upload-controls { display: grid; gap: 8px; }
.upload-actions { display: flex; gap: 8px; }
.link-field { display: grid; grid-template-columns: 1fr 90px; gap: 8px; }
.hidden-file-input { display: none; }
.inline-icon-image { width: 18px; height: 18px; object-fit: cover; margin-right: 6px; vertical-align: middle; }
.notice-image { width: 22px; height: 22px; object-fit: cover; margin-right: 10px; }

.carousel-preview, .large-image-preview, .ad-image-preview, .option-card-preview, .column-list-preview, .project-intro-preview, .single-video-preview, .service-center-preview, .enterprise-info-preview, .list-nav-preview { display: block; }
.carousel-image, .large-image-card, .video-box { position: relative; display: grid; place-items: center; overflow: hidden; background: #d9dde5; color: #fff; }
.carousel-image img, .large-image-card img, .tab-thumb img, .column-thumb img, .project-thumb img, .video-box img { width: 100%; height: 100%; object-fit: cover; }
.carousel-dots { display: flex; justify-content: center; gap: 6px; margin-top: -18px; padding-bottom: 8px; }
.carousel-dots span { width: 7px; height: 7px; border-radius: 50%; }
.large-image-card { min-height: 190px; }
.large-image-copy { position: absolute; left: 16px; top: 16px; display: grid; gap: 6px; }
.large-image-copy strong { font-size: 18px; }
.large-image-copy em { font-style: normal; font-size: 13px; }
.ad-image-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ad-image-card { display: grid; grid-template-columns: minmax(0, 1fr) 82px; align-items: center; min-height: 94px; overflow: hidden; background: #f8f8f8; }
.ad-image-card img, .ad-image-empty { width: 82px; height: 82px; }
.ad-image-card img { object-fit: contain; }
.ad-image-empty { display: grid; place-items: center; background: #eef2f7; color: #8a93a3; font-weight: 800; }
.ad-image-copy { min-width: 0; padding: 14px 4px 14px 16px; }
.ad-image-copy strong { display: block; font-size: 18px; font-weight: 800; line-height: 1.25; }
.ad-image-copy p { margin: 9px 0 0; font-size: 14px; line-height: 1.35; }
.list-nav-row { display: flex; align-items: center; justify-content: space-between; min-height: 56px; border-bottom: 1px solid #e5e5e5; background: #fff; }
.list-nav-left { display: flex; align-items: center; min-width: 0; }
.list-nav-icon { width: 28px; margin-right: 8px; font-size: 22px; line-height: 1; text-align: center; }
.list-nav-left strong { overflow: hidden; font-size: 17px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.list-nav-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.list-nav-right span { font-size: 14px; }
.list-nav-right em { font-style: normal; font-size: 24px; line-height: 1; }
.tab-heads { display: flex; justify-content: space-around; padding-bottom: 10px; }
.tab-heads span { padding-bottom: 7px; border-bottom: 2px solid transparent; font-weight: 700; }
.tab-article, .column-card, .project-card { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding: 10px; background: #fff; }
.tab-thumb, .column-thumb, .project-thumb { position: relative; display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; background: #e5e8ee; color: #7a8294; }
.tab-thumb { width: 120px; height: 68px; }
.tab-article strong, .column-info strong, .project-info strong { display: block; color: #222; }
.tab-article p, .column-info p, .project-info p { margin: 6px 0 0; color: #6f7788; font-size: 13px; }
.tab-article em, .column-info em { display: block; margin-top: 6px; color: #9aa1ad; font-style: normal; font-size: 12px; }
.column-card button { flex: 0 0 auto; border: 0; border-radius: 18px; padding: 7px 12px; color: #fff; }
.column-thumb { width: 120px; height: 68px; border-radius: 5px; }
.column-thumb span, .project-thumb span { position: absolute; left: 0; top: 0; padding: 3px 7px; background: #f2433e; color: #fff; font-size: 12px; }
.project-thumb { width: 86px; height: 86px; }
.project-info { flex: 1; min-width: 0; }
.project-title-row { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.project-tag-inline { flex: 0 0 auto; border-radius: 3px; padding: 3px 7px; font-size: 12px; line-height: 1; }
.project-card a { flex: 0 0 auto; text-decoration: none; }
.video-box { min-height: 190px; background: #222; }
.video-box.wide { aspect-ratio: 16 / 9; min-height: 0; }
.video-box.portrait { aspect-ratio: 9 / 16; min-height: 0; }
.video-box.square { aspect-ratio: 1 / 1; min-height: 0; }
.video-box b { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: rgba(255,255,255,0.2); color: #fff; font-size: 28px; }
.video-box span { position: absolute; left: 14px; bottom: 12px; font-weight: 700; }
.video-box em { position: absolute; left: 14px; top: 12px; border-radius: 999px; padding: 5px 9px; background: rgba(0,0,0,0.42); color: #fff; font-size: 12px; font-style: normal; }
.single-video-link-card { display: grid; grid-template-columns: 1fr 108px; gap: 12px; align-items: center; border: 1px solid #dbeafe; border-radius: 10px; padding: 14px; background: #eff6ff; }
.single-video-link-card strong { display: block; color: #1d4ed8; font-size: 15px; }
.single-video-link-card span { display: block; overflow: hidden; margin-top: 5px; color: #64748b; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.single-video-link-card button { height: 38px; margin: 0; }
.single-video-setting-section .content-radio-row { flex-wrap: wrap; gap: 8px 14px; }
.webpage-container-preview, .activity-preview { display: block; }
.webpage-card { overflow: hidden; background: #fff; }
.webpage-card img { display: block; width: 100%; height: 180px; object-fit: cover; }
.webpage-cover-empty { display: grid; place-items: center; height: 180px; background: linear-gradient(135deg, #dfe8f5, #cfd8ea); color: #5f6d86; font-size: 28px; font-weight: 700; }
.webpage-card-copy { padding: 14px; }
.webpage-card-copy strong { display: block; color: #222; font-size: 18px; }
.webpage-card-copy p { margin: 8px 0 0; color: #6f7788; font-size: 13px; line-height: 1.6; }
.webpage-card-copy button { margin-top: 12px; border: 0; border-radius: 18px; padding: 8px 14px; color: #fff; }
.activity-card { overflow: hidden; background: #fff; box-shadow: 0 10px 24px rgba(242, 67, 62, 0.12); }
.activity-card img { display: block; width: 100%; height: 170px; object-fit: cover; }
.activity-cover-empty { display: grid; place-items: center; height: 170px; background: linear-gradient(135deg, #ffdfca, #ff8f70); color: #fff; font-size: 30px; font-weight: 800; }
.activity-copy { padding: 14px; }
.activity-copy strong { display: block; color: #222; font-size: 18px; }
.activity-copy p { margin: 8px 0 0; color: #6f7788; font-size: 13px; line-height: 1.6; }
.activity-copy em { display: block; margin-top: 10px; color: #f2433e; font-style: normal; font-weight: 700; }
.activity-date-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.activity-date-grid span { display: block; border-radius: 10px; padding: 8px 10px; background: #fff7ed; border: 1px solid #fed7aa; }
.activity-date-grid b { display: block; color: #9a3412; font-size: 11px; }
.activity-date-grid em { margin-top: 3px; color: #1f2937; font-size: 13px; }
.activity-applicant-row { display: flex; align-items: center; gap: 9px; margin-top: 12px; border-radius: 12px; padding: 8px 10px; background: #f8fafc; }
.activity-applicant-row span { display: flex; flex-direction: column; gap: 2px; }
.activity-applicant-row b { color: #111827; font-size: 13px; }
.activity-applicant-row em { margin: 0; color: #64748b; font-size: 12px; }
.activity-avatar-stack { display: flex; flex-direction: row; align-items: center; }
.activity-avatar-stack .activity-avatar { margin-right: -10px; }
.activity-avatar { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border: 2px solid #fff; border-radius: 50%; padding: 0; background: linear-gradient(135deg, #f7b267, #f79d65 42%, #3b2f2f 43%, #1f2937 100%); box-shadow: 0 5px 12px rgba(15,23,42,0.18); overflow: hidden; }
.activity-avatar.tone-1 { background: linear-gradient(135deg, #93c5fd, #2563eb 45%, #172554 46%, #111827); }
.activity-avatar.tone-2 { background: linear-gradient(135deg, #fda4af, #fb7185 45%, #4a1d1f 46%, #111827); }
.activity-avatar.tone-3 { background: linear-gradient(135deg, #86efac, #16a34a 45%, #14532d 46%, #111827); }
.activity-avatar.tone-4 { background: linear-gradient(135deg, #fde68a, #d97706 45%, #451a03 46%, #111827); }
.activity-avatar.tone-5 { background: linear-gradient(135deg, #c4b5fd, #7c3aed 45%, #2e1065 46%, #111827); }
.activity-avatar i { display: block; width: 18px; height: 18px; margin-top: 13px; border-radius: 50% 50% 42% 42%; background: #ffd7b5; box-shadow: 0 -13px 0 -4px #2f241f, 0 16px 0 7px #f97316; }
.activity-countdown-text { display: block; margin-top: 10px; color: #f2433e; font-style: normal; font-weight: 700; }
.activity-copy button { margin-top: 12px; border: 0; border-radius: 18px; padding: 8px 16px; color: #fff; font-weight: 700; }
.activity-copy button.disabled { cursor: not-allowed; }
.activity-address { margin-top: 10px; border-radius: 10px; padding: 8px 10px; background: #f1f5f9; color: #475569; }
.activity-address b { display: block; color: #0f172a; font-size: 12px; }
.activity-address span { display: block; margin-top: 3px; font-size: 12px; line-height: 1.5; }
.service-center-card, .enterprise-info-card { overflow: hidden; background: #fff; box-shadow: 0 10px 24px rgba(33,38,52,0.08); }
.service-center-card { position: relative; background: #ffffff; }
.service-center-head { position: relative; z-index: 1; padding: 34px 14px 20px; text-align: center; }
.service-center-head strong { display: block; color: #fff; font-size: 26px; line-height: 1; font-weight: 900; text-shadow: 0 2px 8px rgba(0,0,0,0.35); }
.service-center-head span { display: block; margin-top: 8px; color: #dbe0ea; font-size: 16px; }
.service-center-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; padding: 4px 36px 8px; }
.service-center-item { display: flex; flex-direction: row; align-items: center; justify-content: center; min-height: 48px; border: 1px solid #e5bd35; border-radius: 28px; padding: 0 14px; background: #c8171d; box-shadow: 0 6px 16px rgba(0,0,0,0.22); text-align: center; }
.service-center-item > * { display: none !important; }
.service-center-item .service-center-label { display: block !important; width: 100%; color: #fff; font-size: 18px; font-weight: 800; line-height: 48px; white-space: nowrap; text-align: center; }
.service-center-decor { position: absolute; width: 150px; height: 130px; border: 1px solid rgba(255,255,255,0.45); border-radius: 62% 38% 64% 36%; opacity: 0.45; transform: rotate(-28deg); }
.service-center-decor-left { left: -72px; bottom: -44px; }
.service-center-decor-right { right: -50px; top: 24px; }
.enterprise-info-card { display: flex; flex-direction: column; align-items: center; padding-bottom: 16px; }
.enterprise-cover-strip { width: 100%; height: 58px; background: #000; }
.enterprise-logo-wrap { display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; margin-top: -34px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.14); }
.enterprise-logo-wrap img, .enterprise-logo-empty { width: 60px; height: 60px; border-radius: 50%; }
.enterprise-logo-wrap img { object-fit: cover; }
.enterprise-logo-empty { display: grid; place-items: center; background: #fff7e6; color: #b88418; font-size: 22px; font-weight: 800; }
.enterprise-name { display: block; margin-top: 8px; color: #000; font-size: 21px; font-weight: 800; text-align: center; }
.enterprise-tag { display: block; margin-top: 12px; border: 1px solid #f2433e; border-radius: 18px; padding: 3px 12px; font-size: 13px; line-height: 18px; }
.enterprise-info-lines { width: calc(100% - 30px); margin-top: 38px; }
.enterprise-info-line { display: flex; align-items: center; justify-content: space-between; min-height: 64px; border-bottom: 1px solid #eef0f4; color: #111; font-size: 17px; }
.enterprise-line-left { display: flex; align-items: center; min-width: 110px; color: #1f2937; }
.enterprise-line-left i { display: inline-flex; align-items: center; justify-content: center; width: 22px; margin-right: 8px; color: #5c6470; font-style: normal; }
.enterprise-info-line b { max-width: 210px; color: #111827; font-size: 16px; font-weight: 500; line-height: 1.25; text-align: right; }

.add-item-button { width: 100%; height: 42px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--blue); font-weight: 700; }

.json-dialog { width: 720px; border: 0; border-radius: 12px; padding: 0; box-shadow: var(--shadow); }
.dialog-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.dialog-head button { border: 0; background: transparent; color: var(--blue); }
#jsonOutput { display: block; width: 100%; height: 520px; border: 0; padding: 16px; font-family: Consolas, monospace; font-size: 13px; }
.action-dialog { width: 920px; max-width: calc(100vw - 80px); border: 0; border-radius: 12px; padding: 0; box-shadow: var(--shadow); }
.action-dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.action-dialog-head button { border: 0; background: transparent; color: var(--blue); }
.action-category-tabs { display: flex; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: #fbfcfe; }
.action-category-button { min-width: 110px; height: 36px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: #3c4558; }
.action-category-button.active { border-color: var(--blue); background: var(--blue); color: #fff; font-weight: 700; }
.action-dialog-body { display: grid; grid-template-columns: 220px 1fr; min-height: 520px; }
.action-type-list { padding: 14px; border-right: 1px solid var(--line); background: #f7f9fc; }
.action-type-button { display: block; width: 100%; height: 38px; margin-bottom: 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #3c4558; text-align: left; padding: 0 12px; }
.action-type-button.active { border-color: var(--blue); background: #eaf5ff; color: var(--blue); font-weight: 700; }
.action-config-panel { padding: 18px 22px; }
.action-config-panel h3 { margin: 0 0 18px; font-size: 20px; }
.action-dialog-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--line); }
.admin-log-dialog { width: 860px; max-width: calc(100vw - 80px); border: 0; border-radius: 12px; padding: 0; box-shadow: var(--shadow); }
.admin-log-body { max-height: 560px; overflow: auto; padding: 18px; background: #f7f9fc; }
.admin-log-table { width: 100%; border-collapse: collapse; background: #fff; }
.admin-log-table th, .admin-log-table td { border: 1px solid var(--line); padding: 12px; text-align: left; vertical-align: top; }
.admin-log-table th { background: #f1f5f9; color: #354052; }
.admin-log-empty { padding: 36px; border-radius: 10px; background: #fff; color: var(--muted); text-align: center; }
.admin-health-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.admin-health-card { border: 1px solid var(--line); border-radius: 10px; padding: 16px; background: #fff; }
.admin-health-card strong { display: block; color: var(--text); font-size: 17px; }
.admin-health-card span { display: block; margin-top: 8px; color: var(--muted); line-height: 1.6; }
.admin-health-card em { display: inline-block; margin-top: 10px; border-radius: 999px; padding: 5px 10px; background: #eaf5ff; color: var(--blue); font-style: normal; font-weight: 700; }
.admin-health-card.warning em { background: #fff4e5; color: #c66a00; }
.admin-lock-dialog { width: 460px; border: 0; border-radius: 18px; padding: 0; background: transparent; }
.admin-lock-dialog::backdrop { background: rgba(17,24,39,0.76); backdrop-filter: blur(8px); }
.admin-lock-box { display: flex; flex-direction: column; align-items: center; gap: 14px; border-radius: 18px; padding: 34px; background: #fff; box-shadow: var(--shadow); text-align: center; }
.admin-lock-box h2 { margin: 4px 0 0; font-size: 26px; }
.admin-lock-box p { margin: 0; color: var(--muted); line-height: 1.7; }
.admin-lock-box input { width: 100%; height: 44px; border: 1px solid var(--line); border-radius: 8px; padding: 0 12px; text-align: center; font-size: 18px; }
.admin-lock-box button { width: 100%; height: 42px; }
.action-page-picker { display: grid; gap: 14px; }
.action-page-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-height: 360px; overflow-y: auto; }
.action-page-card { min-height: 76px; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 12px; text-align: left; }
.action-page-card:hover { border-color: var(--blue); background: #f5faff; }
.action-page-card.active { border-color: var(--blue); background: #eaf5ff; }
.action-page-card strong { display: block; color: var(--text); font-size: 15px; }
.action-page-card span { display: block; margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.action-page-empty { padding: 18px; border-radius: 8px; background: #f7f9fc; color: var(--muted); }
.content-library-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.content-card-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.content-card { min-height: 86px; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 12px; text-align: left; }
.content-card.active, .content-card:hover { border-color: var(--blue); background: #eaf5ff; }
.content-card strong { display: block; color: var(--text); font-size: 15px; }
.content-card span { display: block; margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.super-form-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 18px 30px; border-radius: 16px; padding: 22px; background: linear-gradient(135deg, #111827, #7c2d12); color: #fff; }
.super-form-hero strong { display: block; font-size: 22px; }
.super-form-hero span { display: block; max-width: 760px; margin-top: 8px; color: #fed7aa; line-height: 1.6; }
.super-form-hero button { flex: 0 0 auto; height: 40px; border: 1px solid rgba(255,255,255,.36); border-radius: 999px; padding: 0 16px; background: rgba(255,255,255,.12); color: #fff; font-weight: 900; }
.super-form-stat-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0 30px 20px; }
.super-form-stat-grid div { border: 1px solid #fed7aa; border-radius: 12px; padding: 16px; background: #fff7ed; }
.super-form-stat-grid strong { display: block; color: #9a3412; font-size: 28px; }
.super-form-stat-grid span { color: #7c2d12; font-size: 13px; }
.super-form-section { margin: 24px 30px; }
.super-form-section h3 { margin: 0; color: var(--text); font-size: 20px; }
.super-form-template-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.super-form-template-card { border: 1px solid #f1e4d1; border-radius: 14px; padding: 16px; background: #fff; box-shadow: 0 10px 24px rgba(120,72,18,0.07); }
.super-form-template-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.super-form-template-head span { border-radius: 999px; padding: 5px 10px; background: #fff7ed; color: #9a3412; font-weight: 900; }
.super-form-template-card strong { display: block; margin-top: 12px; color: #111827; font-size: 18px; }
.super-form-template-card p { min-height: 42px; margin: 8px 0 12px; color: #64748b; line-height: 1.55; }
.super-form-field-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 58px; }
.super-form-field-chips i { border-radius: 999px; padding: 5px 8px; background: #f8fafc; color: #475569; font-size: 12px; font-style: normal; }
.super-form-template-card footer { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.super-form-template-card footer button, .super-form-submit-table button { height: 30px; margin: 2px; padding: 0 9px; }
.super-form-submit-table em { color: var(--muted); font-style: normal; }
.super-form-shell { display: grid; grid-template-columns: 170px minmax(0, 1fr); min-height: calc(100vh - 170px); background: #f4f6fb; }
.super-form-inner-nav { padding: 22px 12px; background: #ffffff; }
.super-form-inner-nav button { display: block; width: 100%; height: 55px; margin-bottom: 12px; border: 0; border-radius: 4px; background: transparent; color: #475569; font-size: 16px; font-weight: 700; }
.super-form-inner-nav button.active { background: #e9e2ff; color: #6252ff; }
.super-form-workbench { min-width: 0; padding: 16px; }
.super-form-table-panel { min-height: 760px; border-radius: 4px; background: #ffffff; box-shadow: 0 8px 24px rgba(15,23,42,0.04); }
.super-form-table-title { border-bottom: 1px solid #eef0f5; padding: 22px 30px; }
.super-form-table-title h2 { margin: 0; color: #6252ff; font-size: 22px; }
.super-form-toolbar { display: flex; flex-direction: row; align-items: center; gap: 12px; margin: 24px 30px 0; }
.super-form-toolbar input { width: 220px; height: 42px; border: 1px solid #dfe3eb; border-radius: 4px; padding: 0 12px; }
.super-form-filter-row { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; margin: 24px 30px 0; }
.super-form-filter-row label { display: flex; flex-direction: row; align-items: center; gap: 8px; color: #1f2937; font-weight: 700; }
.super-form-filter-row input, .super-form-filter-row select { height: 42px; border: 1px solid #dfe3eb; border-radius: 4px; padding: 0 12px; background: #fff; }
.super-form-admin-table, .super-form-submit-table { width: calc(100% - 60px); margin-top: 26px; }
.super-form-admin-table th, .super-form-admin-table td, .super-form-submit-table th, .super-form-submit-table td { height: 70px; border-color: #edf0f5; }
.super-form-record-link { border: 0; background: transparent; color: #ff1f1f; font-size: 16px; cursor: pointer; }
.super-form-copy-link { height: 30px; border: 0; border-radius: 4px; padding: 0 12px; background: #8b8f98; color: #fff; font-weight: 700; }
.super-form-user-avatar { display: inline-block; width: 44px; height: 44px; margin-right: 10px; border-radius: 50%; background: linear-gradient(180deg, #dff4ff, #ffffff); vertical-align: middle; }
.super-form-admin-table .content-edit-button, .super-form-admin-table .content-copy-button, .super-form-admin-table .content-green-button, .super-form-admin-table .content-delete-button, .super-form-submit-table .content-edit-button, .super-form-submit-table .content-delete-button { height: 34px; margin: 3px; padding: 0 14px; }
.super-form-edit-tabs { margin: 18px 0 0; }
.super-form-component-palette { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 18px; }
.super-form-component-palette section { border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; background: #fff; }
.super-form-component-palette h4 { margin: 0; padding: 12px 16px; background: #f8fafc; color: #111827; font-size: 16px; }
.super-form-component-palette section > div { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; }
.super-form-component-palette button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 88px; border: 0; border-right: 1px solid #eef2f7; border-bottom: 1px solid #eef2f7; background: #fff; color: #111827; cursor: pointer; }
.super-form-component-palette button:hover { background: #f8fafc; }
.super-form-component-palette button span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #fff; font-weight: 900; }
.super-form-component-palette button.green span { background: linear-gradient(135deg, #6ee7b7, #34d399); }
.super-form-component-palette button.violet span { background: linear-gradient(135deg, #a78bfa, #7c3aed); }
.super-form-component-palette button.blue span { background: linear-gradient(135deg, #7dd3fc, #38bdf8); }
.super-form-component-palette button em { font-size: 13px; font-style: normal; }
.super-form-field-editor-list { display: grid; gap: 10px; margin-bottom: 14px; }
.super-form-field-editor { display: grid; grid-template-columns: 1fr 120px 82px 82px 82px 1fr 1fr 1fr 1fr 74px; gap: 8px; align-items: end; border: 1px solid #f1e4d1; border-radius: 12px; padding: 12px; background: #fffaf4; }
.super-form-field-editor label { display: flex; flex-direction: column; gap: 6px; color: #475569; font-size: 12px; font-weight: 800; }
.super-form-field-editor input, .super-form-field-editor select { width: 100%; height: 34px; border: 1px solid #ead7bd; border-radius: 7px; padding: 0 9px; background: #fff; }
.super-form-field-editor .wide { grid-column: span 2; }
.super-form-builder { min-height: calc(100vh - 116px); background: #f0f0f0; }
.super-form-builder-head { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 36px; background: #343a40; color: #fff; box-shadow: 0 2px 12px rgba(15,23,42,0.12); }
.super-form-layout-tools, .super-form-builder-actions { display: flex; align-items: center; gap: 12px; }
.super-form-layout-tools strong { font-size: 18px; font-weight: 800; }
.super-form-layout-tools button { height: 34px; border: 0; border-radius: 4px; padding: 0 18px; background: #4b5158; color: #fff; font-size: 16px; }
.super-form-layout-tools button.active { background: #4285f4; }
.super-form-builder-actions button { height: 40px; border: 0; border-left: 1px solid rgba(255,255,255,0.2); padding: 0 28px; background: transparent; color: #fff; font-size: 17px; font-weight: 800; }
.super-form-builder-body { display: grid; grid-template-columns: 294px minmax(390px, 1fr) 500px; gap: 14px; padding: 14px; }
.super-form-builder-left, .super-form-builder-setting { min-height: calc(100vh - 194px); overflow: auto; border-radius: 0; background: #fff; box-shadow: 0 1px 0 rgba(15,23,42,0.04); }
.super-form-builder-preview { display: flex; justify-content: center; min-height: calc(100vh - 194px); overflow: auto; border-radius: 0; background: #f3f3f3; padding: 22px 0; }
.super-form-builder-palette section { border-bottom: 1px solid #eef2f7; }
.super-form-builder-palette h3 { margin: 0; padding: 13px 18px; background: #f8fafc; color: #111827; font-size: 16px; }
.super-form-builder-palette section > div { display: grid; grid-template-columns: repeat(3, 1fr); }
.super-form-builder-palette button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 96px; border: 0; border-right: 1px solid #eef2f7; border-bottom: 1px solid #eef2f7; background: #fff; cursor: pointer; }
.super-form-builder-palette button:hover { background: #f8fafc; }
.super-form-builder-palette span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: #fff; font-weight: 900; }
.super-form-builder-palette .green span { background: linear-gradient(135deg, #6ee7b7, #34d399); }
.super-form-builder-palette .violet span { background: linear-gradient(135deg, #a78bfa, #7c3aed); }
.super-form-builder-palette .blue span { background: linear-gradient(135deg, #7dd3fc, #38bdf8); }
.super-form-builder-palette em { color: #111827; font-size: 14px; font-style: normal; }
.super-form-phone { width: 390px; min-height: 760px; overflow: hidden; background: #f5f5f5; box-shadow: 0 16px 34px rgba(15,23,42,0.12); }
.super-form-phone-status { display: flex; justify-content: space-between; height: 36px; padding: 10px 22px 0; background: #fff; font-weight: 800; }
.super-form-phone-title { height: 48px; background: #fff; color: #111827; font-size: 18px; font-weight: 800; line-height: 48px; text-align: center; }
.super-form-phone-body { padding: 12px; }
.super-form-phone-desc { margin-bottom: 12px; color: #64748b; font-size: 13px; line-height: 1.6; }
.super-form-phone-field { position: relative; border: 1px dashed transparent; padding: 8px; background: #fff; cursor: move; }
.super-form-phone-field.active { border-color: #3b82f6; background: #f8fbff; }
.super-form-phone-field.dragging { opacity: .42; transform: scale(.985); }
.super-form-phone-field.drag-over { border-color: #f59e0b; box-shadow: inset 0 0 0 2px rgba(245,158,11,.28); }
.phone-field-drag-handle { position: absolute; left: -30px; top: 8px; display: none; width: 24px; height: 24px; border-radius: 999px; background: #111827; color: #fff; font-size: 11px; font-weight: 900; line-height: 24px; text-align: center; }
.super-form-phone-field.active .phone-field-drag-handle, .super-form-phone-field:hover .phone-field-drag-handle { display: block; }
.super-form-phone.left-right .super-form-phone-field { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 8px; }
.super-form-phone-field label { display: block; margin-bottom: 8px; color: var(--field-label-color, #111827); font-size: var(--field-title-size, 15px); font-weight: 900; }
.super-form-phone.left-right .super-form-phone-field label { margin-bottom: 0; }
.super-form-phone-field label em { margin-right: 3px; color: #ef4444; font-style: normal; }
.phone-input, .phone-textarea, .phone-upload, .phone-picker, .phone-download, .phone-native-picker { border: 1px solid var(--field-border-color, #e5e7eb); border-radius: var(--field-radius, 6px); padding: 12px; background: var(--field-input-bg, #f8fafc); color: #94a3b8; font-size: var(--field-input-size, 14px); }
.phone-rich-text { overflow: auto; border: 1px solid var(--field-border-color, #e5e7eb); border-radius: var(--field-radius, 6px); padding: 12px; background: var(--field-input-bg, #f8fafc); color: #475569; font-size: var(--field-input-size, 14px); line-height: 1.6; }
.phone-rich-text p { margin: 0 0 8px; }
.phone-rich-text img { display: block; max-width: 100%; height: auto; margin: 8px auto; border-radius: 6px; }
.phone-native-picker { width: 100%; min-height: 42px; color: #475569; }
.phone-date-single, .phone-date-range div { display: grid; grid-template-columns: minmax(0, 1fr) 42px; gap: 6px; }
.phone-date-range { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); align-items: center; gap: 6px; }
.phone-date-range > span { color: #64748b; text-align: center; }
.phone-date-single button, .phone-date-range button { border: 1px solid var(--field-border-color, #e5e7eb); border-radius: var(--field-radius, 6px); background: #fff; cursor: pointer; }
.super-form-phone-field.line-style .phone-input, .super-form-phone-field.line-style .phone-textarea, .super-form-phone-field.line-style .phone-upload, .super-form-phone-field.line-style .phone-picker, .super-form-phone-field.line-style .phone-download { border-width: 0 0 1px; border-radius: 0; background: transparent; }
.phone-textarea { min-height: 78px; }
.phone-upload { display: grid; place-items: center; min-height: 90px; gap: 6px; color: #64748b; }
.phone-upload.interactive { place-items: stretch; }
.phone-upload.interactive > button { min-height: 44px; border: 1px dashed #cbd5e1; border-radius: 6px; background: #fff; color: #2563eb; font-weight: 800; }
.phone-upload span { color: #94a3b8; font-size: 12px; }
.phone-upload-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.phone-upload-grid figure { position: relative; margin: 0; aspect-ratio: 1; overflow: hidden; border-radius: 6px; background: #e2e8f0; }
.phone-upload-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.phone-upload-grid button { position: absolute; right: 2px; top: 2px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(15,23,42,.7); color: #fff; }
.phone-video-list { display: grid; gap: 10px; margin-top: 8px; }
.phone-video-list figure { margin: 0; overflow: hidden; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; }
.phone-video-list video { display: block; width: 100%; max-height: 180px; background: #0f172a; }
.phone-video-list figcaption { display: grid; grid-template-columns: minmax(0, 1fr) 58px 48px; align-items: center; gap: 8px; padding: 8px; }
.phone-video-list b { overflow: hidden; color: #334155; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.phone-video-list em { color: #94a3b8; font-size: 11px; font-style: normal; text-align: right; }
.phone-video-list button { border: 0; background: transparent; color: #ef4444; font-size: 12px; }
.phone-file-list { display: grid; gap: 6px; margin-top: 8px; }
.phone-file-list p { display: flex; align-items: center; justify-content: space-between; margin: 0; border: 1px solid #e2e8f0; border-radius: 5px; padding: 7px 8px; background: #fff; }
.phone-file-list b { max-width: 210px; overflow: hidden; color: #334155; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.phone-file-list button { border: 0; background: transparent; color: #ef4444; }
.phone-options { display: flex; flex-wrap: wrap; gap: 8px; }
.phone-options.vertical { display: grid; grid-template-columns: 1fr; }
.phone-options span { border: 1px solid #e5e7eb; border-radius: 999px; padding: 7px 10px; background: #fff; color: #475569; }
.phone-options button { border: 1px solid #e5e7eb; border-radius: 999px; padding: 7px 10px; background: #fff; color: #475569; text-align: left; }
.phone-options.vertical button { border-radius: 6px; }
.phone-options button.active { border-color: #4285f4; background: #eff6ff; color: #1d4ed8; font-weight: 800; }
.phone-picker { color: #475569; }
.phone-agreement { display: flex; align-items: center; gap: 8px; color: #475569; font-size: 13px; line-height: 1.5; }
.phone-agreement i { width: 15px; height: 15px; border: 1px solid #cbd5e1; border-radius: 3px; background: #fff; }
.phone-rating { display: flex; color: #cbd5e1; font-size: 24px; letter-spacing: 2px; }
.phone-rating span { cursor: pointer; }
.phone-rating span.active { color: #f59e0b; }
.phone-rating-control { display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px 42px; align-items: center; gap: 8px; }
.phone-rating-control button { height: 34px; border: 1px solid #dbe1ea; border-radius: 50%; background: #fff; color: #4285f4; font-size: 18px; font-weight: 900; }
.phone-rating-control em { color: #64748b; font-style: normal; font-weight: 800; }
.phone-download { display: flex; align-items: center; justify-content: space-between; width: 100%; color: #111827; }
.phone-download span { border-radius: 999px; padding: 5px 9px; background: #e0f2fe; color: #0284c7; font-size: 12px; }
.phone-auth-button { width: 100%; height: 40px; border: 0; border-radius: var(--field-radius, 6px); background: #07c160; color: #fff; font-weight: 900; }
.phone-title-module { display: block; color: #111827; font-size: 20px; }
.phone-divider { height: 1px; background: #e5e7eb; }
.phone-blank { height: 28px; }
.phone-inline-submit, .super-form-phone-submit { width: 100%; height: 42px; border: 0; border-radius: 999px; background: #6252ff; color: #fff; font-weight: 900; }
.phone-field-tools { position: absolute; right: -1px; top: -1px; display: none; }
.super-form-phone-field.active .phone-field-tools { display: block; }
.phone-field-tools button { border: 0; padding: 4px 8px; background: #3b82f6; color: #fff; }
.super-form-right { padding: 0; background: #fff; }
.super-form-top-setting, .super-form-module-card { margin: 0; border: 0; background: #fff; }
.super-form-top-setting { padding: 14px 0 22px; }
.super-form-top-title { display: none; }
.super-form-module-head { display: flex; align-items: center; min-height: 82px; padding: 0 24px; }
.super-form-module-head h2 { position: relative; margin: 0; padding-left: 18px; color: #111827; font-size: 28px; font-weight: 900; }
.super-form-module-head h2::before { content: ''; position: absolute; left: 0; top: 6px; width: 8px; height: 30px; background: #4285f4; }
.super-form-top-title span, .super-form-module-head span { color: #94a3b8; font-size: 13px; }
.super-form-top-setting label, .super-form-setting-panel label { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: center; margin: 14px 18px 0; color: #111827; }
.super-form-top-setting label span, .super-form-setting-panel label span { color: #374151; font-size: 14px; }
.super-form-top-setting input, .super-form-top-setting select, .super-form-top-setting textarea, .super-form-setting-panel input, .super-form-setting-panel select, .super-form-setting-panel textarea { width: 100%; min-height: 38px; border: 1px solid #dfe4ee; border-radius: 3px; padding: 0 10px; background: #fff; color: #111827; }
.super-form-top-setting input[type="color"], .super-form-setting-panel input[type="color"] { padding: 3px; }
.super-form-top-setting textarea, .super-form-setting-panel textarea { min-height: 72px; padding-top: 8px; line-height: 1.5; resize: vertical; }
.super-form-setting-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); margin: 0 20px 24px; border: 1px solid #d9dee7; border-radius: 6px; overflow: hidden; }
.super-form-setting-tabs button { height: 58px; border: 0; background: #f7f8fa; color: #111827; font-size: 20px; cursor: pointer; }
.super-form-setting-tabs button.active { background: #4285f4; color: #fff; }
.super-form-setting-panel { padding: 0 0 18px; }
.super-form-setting-panel section { margin: 0; }
.super-form-setting-panel h3 { margin: 18px 20px 26px; border-radius: 4px; padding: 11px 24px; background: #f4f5f7; color: #111827; font-size: 22px; font-weight: 900; }
.super-form-setting-panel p { margin: 14px 18px; color: #64748b; line-height: 1.7; }
.super-form-inline-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 18px; }
.super-form-inline-row label { grid-template-columns: 70px minmax(0, 1fr); margin: 14px 0 0; }
.super-form-control-row { display: flex; align-items: center; gap: 22px; margin: 0 42px 28px; color: #111827; font-size: 18px; }
.super-form-control-row > span { min-width: 110px; text-align: right; }
.super-form-control-row em { color: #94a3b8; font-size: 16px; font-style: normal; }
.super-form-radio-list { display: flex; align-items: center; gap: 30px; }
.super-form-radio-list label { display: inline-flex; align-items: center; gap: 9px; margin: 0; color: #111827; font-size: 18px; }
.super-form-radio-list input { display: none; }
.super-form-radio-list i { width: 18px; height: 18px; border: 1px solid #d7dce5; border-radius: 50%; background: #fff; }
.super-form-radio-list input:checked + i { border: 6px solid #4285f4; }
.super-form-switch { position: relative; width: 50px; height: 26px; margin: 0; }
.super-form-switch input { display: none; }
.super-form-switch i { position: absolute; inset: 0; border-radius: 99px; background: #e9edf2; transition: .2s; }
.super-form-switch i::after { content: ''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.18); transition: .2s; }
.super-form-switch input:checked + i { background: #4285f4; }
.super-form-switch input:checked + i::after { transform: translateX(24px); }
.super-form-range-row { display: grid; grid-template-columns: 110px minmax(180px, 1fr) 160px 36px; align-items: center; gap: 18px; margin: 0 42px 24px; font-size: 18px; }
.super-form-range-row > span { text-align: right; }
.super-form-range-row input[type="range"] { width: 100%; accent-color: #4285f4; }
.super-form-stepper { display: grid; grid-template-columns: 40px 70px 40px; border: 1px solid #dbe1ea; border-radius: 5px; overflow: hidden; }
.super-form-stepper button { border: 0; background: #f4f6f9; color: #64748b; font-size: 18px; }
.super-form-stepper input { width: 100%; border: 0; text-align: center; }
.super-form-range-row b { font-weight: 700; }
.super-form-color-row { display: flex; align-items: center; gap: 12px; margin: 0 42px 28px; font-size: 18px; }
.super-form-color-row span { min-width: 110px; text-align: right; }
.super-form-color-row input[type="color"] { width: 64px; height: 38px; padding: 4px; border: 1px solid #dbe1ea; border-radius: 5px; }
.super-form-color-row input[type="text"] { width: 100px; height: 38px; border: 1px solid #dbe1ea; padding: 0 10px; }
.super-form-color-row button, .super-form-color-grid button { height: 38px; border: 1px solid #dbe1ea; border-radius: 4px; background: #f7f8fa; color: #334155; }
.super-form-style-cards { display: flex; gap: 24px; margin: 0 42px 28px; }
.super-form-style-cards label { display: grid; gap: 10px; margin: 0; text-align: center; color: #111827; font-size: 18px; }
.super-form-style-cards input { display: none; }
.super-form-style-cards span { display: grid; gap: 12px; width: 120px; height: 76px; border: 1px solid #dbe1ea; border-radius: 6px; padding: 20px; }
.super-form-style-cards i, .super-form-style-cards b { height: 10px; background: #dbeafe; }
.super-form-style-cards b { width: 70%; }
.super-form-style-cards input:checked + span { border-color: #4285f4; }
.super-form-color-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 36px; margin: 0 42px 28px; }
.super-form-color-grid label { display: grid; grid-template-columns: 96px 64px 100px 56px; align-items: center; gap: 8px; margin: 0; font-size: 17px; }
.super-form-color-grid input[type="color"] { width: 64px; height: 38px; padding: 4px; border: 1px solid #dbe1ea; border-radius: 5px; }
.super-form-color-grid em { height: 38px; border: 1px solid #dbe1ea; padding: 0 8px; color: #111827; font-style: normal; line-height: 38px; }
.super-form-check-row { display: flex; align-items: center; gap: 26px; margin: 0 42px 28px; font-size: 18px; }
.super-form-check-row > span { min-width: 110px; text-align: right; }
.super-form-check-row label { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: #475569; }
.super-form-check-row input { width: 20px; height: 20px; accent-color: #4285f4; }
.super-form-example-row { display: flex; align-items: center; gap: 24px; margin: 0 42px 24px; font-size: 18px; }
.super-form-example-row > span { min-width: 110px; text-align: right; }
.super-form-example-row em { color: #94a3b8; font-style: normal; }
.super-form-example-box { display: grid; place-items: center; width: 100px; height: 100px; border: 1px solid #e2e8f0; border-radius: 4px; background: #f8fafc; color: #b8c2cc; font-size: 28px; }
.super-form-image-demo { display: flex; gap: 24px; margin: 0 42px 28px 180px; }
.super-form-image-demo div { width: 220px; height: 190px; border: 1px solid #dbe1ea; background: #fff; }
.super-form-image-demo b { display: block; height: 38px; background: #aebdcb; color: #fff; font-size: 16px; line-height: 38px; text-align: center; }
.super-form-image-demo i { display: grid; place-items: center; width: 110px; height: 110px; margin: 32px auto 0; border: 2px dashed #e2e8f0; color: #cbd5e1; font-style: normal; font-size: 32px; }
.super-form-option-editor { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 22px; margin: 0 42px 28px; font-size: 18px; }
.super-form-option-editor > span { text-align: right; }
.super-form-option-line { display: grid; grid-template-columns: 28px 70px minmax(0, 1fr) 58px; align-items: center; border: 1px solid #e2e8f0; }
.super-form-option-line i { color: #94a3b8; font-style: normal; text-align: center; }
.super-form-option-line b { height: 44px; background: #f2f5f8; font-weight: 400; line-height: 44px; text-align: center; }
.super-form-option-line input { height: 44px; border: 0; padding: 0 14px; }
.super-form-option-line a { color: #2563eb; cursor: pointer; }
.super-form-option-editor p { margin: 14px 0 0; color: #2563eb; }
.super-form-file-upload-row { display: grid; grid-template-columns: 110px 130px minmax(0, 1fr); align-items: center; gap: 14px; margin: 0 42px 24px; font-size: 18px; }
.super-form-file-upload-row > span { text-align: right; }
.super-form-file-upload-row button { height: 38px; border: 1px solid #4285f4; border-radius: 4px; background: #4285f4; color: #fff; }
.super-form-file-upload-row em { overflow: hidden; color: #64748b; font-size: 15px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.content-editor-dialog { width: 980px; max-width: calc(100vw - 80px); border: 0; border-radius: 12px; padding: 0; box-shadow: var(--shadow); }
.content-editor-body { padding: 18px 22px; }
.content-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: #f7f9fc; }
.content-toolbar button { height: 34px; border: 1px solid var(--line); border-radius: 5px; background: #fff; padding: 0 12px; color: #3c4558; }
.content-toolbar label { display: flex; align-items: center; gap: 8px; color: #465066; }
.article-editor { min-height: 420px; max-height: 560px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; padding: 18px; background: #fff; line-height: 1.8; outline: none; }
.article-editor img { max-width: 100%; display: block; margin: 12px 0; border-radius: 6px; }
.gallery-editor-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
.gallery-editor-item { position: relative; min-height: 120px; overflow: hidden; border-radius: 8px; background: #eef2f7; }
.gallery-editor-item img { width: 100%; height: 120px; object-fit: cover; display: block; }
.gallery-editor-item button { position: absolute; right: 8px; top: 8px; border: 0; border-radius: 14px; padding: 4px 10px; background: rgba(232,75,64,0.92); color: #fff; }