:root {
  color-scheme: light;
  --green: #228b22;
  --green-dark: #166534;
  --green-soft: #f0fdf4;
  --pink: #f28bbd;
  --ink: #1f2937;
  --muted: #718096;
  --line: rgba(34,139,34,.14);
  --soft-line: #dbeee2;
  --bg: #f8fff9;
  --danger: #b42318;
  --warning: #a85b10;
  font-family: "PingFang SC", "Microsoft YaHei UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body { min-height: 100%; margin: 0; color: var(--ink); background: var(--bg); }
button, input, textarea, select { font: inherit; letter-spacing: 0; }
button, a { -webkit-tap-highlight-color: transparent; -webkit-touch-callout:none; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .58; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }

/* The public shell follows the original flower template: quiet green surface, pink title accent, and no extra hero copy. */
.public-site-shell { min-height: 100vh; background: radial-gradient(circle at 20% 32%, rgba(255,182,193,.08), transparent 24%), linear-gradient(135deg, #f0fdf4 0%, #fff 48%, #fff7fa 100%); }
.public-oss-header { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid rgba(34,139,34,.08); background: rgba(255,255,255,.86); box-shadow: 0 4px 16px rgba(34,139,34,.06); backdrop-filter: blur(12px); }
.public-oss-header-inner { width: min(1320px, calc(100vw - 96px)); min-height: 76px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.public-header-brand-actions { display:flex; align-items:center; gap:18px; min-width:0; }
.public-oss-brand { display: inline-flex; align-items: center; gap: 14px; }
.public-oss-brand-copy { display:grid; gap:4px; }
.public-oss-brand-copy strong { color: var(--green); font-size: 23px; font-weight: 850; line-height: 1; letter-spacing:-.025em; }
.public-oss-brand-copy small { color:#64748b; font-size:11px; font-weight:650; line-height:1; letter-spacing:.04em; }
.public-brand-en { font-weight: 900; }
.public-flower-logo { position: relative; display: inline-block; flex: none; width: 34px; height: 34px; }
.public-flower-logo i { position: absolute; top: 7px; left: 7px; width: 20px; height: 20px; border-radius: 0 100% 0 100%; background: linear-gradient(135deg,#ffb6c1,#ffc0cb); }
.public-flower-logo i:nth-child(1) { transform: rotate(0); }.public-flower-logo i:nth-child(2) { transform: rotate(72deg); }.public-flower-logo i:nth-child(3) { transform: rotate(144deg); }.public-flower-logo i:nth-child(4) { transform: rotate(216deg); }.public-flower-logo i:nth-child(5) { transform: rotate(288deg); }
.public-flower-logo b { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: #ffe4b5; transform: translate(-50%,-50%); }
.public-oss-nav { display: flex; align-items: center; gap: 34px; }
.public-oss-nav-link { min-height: 38px; padding: 0; display: inline-flex; align-items: center; color: #374151; border:0; border-bottom: 3px solid transparent; background:transparent; font-size: 16px; font-weight: 700; white-space:nowrap; touch-action:manipulation; user-select:none; -webkit-user-select:none; transition: color 180ms ease, transform 180ms ease, border-color 180ms ease; }
.public-oss-nav-link:hover, .public-oss-nav-link[data-current="true"] { color: var(--green); border-bottom-color: var(--green); transform: translateY(-1px); }
.public-bookmark-button { min-height:40px; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:0 14px; border:1px solid #bcdcc3; border-radius:10px; color:#227b29; background:#f8fdf9; font-size:14px; font-weight:700; white-space:nowrap; transition:border-color .18s ease,background-color .18s ease,transform .18s ease; }
.public-bookmark-button:hover { border-color:#80bd8b; background:#edf8ef; transform:translateY(-1px); }
.public-bookmark-button span { font-size:19px; line-height:1; }
.public-mobile-menu-button { display: none; width: 40px; height: 36px; padding: 8px; border: 1px solid var(--soft-line); border-radius: 8px; background: #fff; }
.public-mobile-menu-button span, .public-mobile-menu-button span::before, .public-mobile-menu-button span::after { display: block; height: 2px; background: var(--ink); content: ""; }.public-mobile-menu-button span::before { transform: translateY(-6px); }.public-mobile-menu-button span::after { transform: translateY(4px); }

.public-route-stage { position: relative; min-height: calc(100vh - 76px); }
.public-stage { min-height: calc(100vh - 76px); padding: 76px 20px 72px; }
.public-card { width: min(960px, 100%); margin: 0 auto; }
.public-card-header { display: grid; justify-items: center; padding: 0 24px 48px; }
.public-header-intro { text-align: center; }
.public-header-intro h1 { margin: 0; font-size: clamp(56px, 7vw, 92px); font-weight: 900; line-height: 1.05; letter-spacing: 0; }
.public-title-main { color: var(--ink); }.public-title-accent { color: var(--pink); }.public-header-intro p { margin: 24px 0 0; color: #526174; font-size: 20px; font-weight: 700; }
.public-home-brand-title { color:var(--ink); }
.public-home-brand-title b { color:var(--pink); font-weight:inherit; }
.public-home-system-title { margin:9px 0 0; color:#536276; font-size:clamp(21px,2.3vw,28px); font-weight:550; line-height:1.25; letter-spacing:.01em; }
.wizard-steps { width: min(720px, 100%); margin-top: 52px; display: grid; grid-template-columns: repeat(4,1fr); position: relative; }
.wizard-steps::before { position: absolute; top: 29px; left: 12.5%; right: 12.5%; height: 3px; content: ""; background: #d8e9f1; }
.wizard-step { position: relative; z-index: 1; display: grid; justify-items: center; gap: 11px; color: #91a4bb; font-weight: 750; }
.wizard-step-dot { width: 58px; height: 58px; display: grid; place-items: center; border: 3px solid #d8e9f1; border-radius: 50%; color: #91a4bb; background: #fff; font-size: 24px; font-style: normal; }
.wizard-step[data-active="true"] { color: var(--green); }.wizard-step[data-active="true"] .wizard-step-dot { border-color: var(--green); color: #fff; background: var(--green); box-shadow: 0 0 0 9px rgba(34,139,34,.08); }.wizard-step[data-completed="true"] { color: var(--green); }.wizard-step[data-completed="true"] .wizard-step-dot { border-color: #90ee90; color: var(--green); background: rgba(144,238,144,.22); }
.public-card-body { width: min(760px,100%); margin: 0 auto; }.wizard-panel { padding: 30px; border: 1px solid var(--soft-line); border-radius: 16px; background: rgba(255,255,255,.94); box-shadow: 0 20px 50px rgba(34,139,34,.08); animation: flower-section-in 360ms ease-out both; }
.public-field { display: block; }.public-field > span, .public-field-label { display: block; margin: 0 0 10px; color: var(--ink); font-size: 14px; font-weight: 850; }.public-input { width: 100%; min-height: 68px; padding: 0 22px; border: 1px solid #d8e9dc; border-radius: 17px; outline: none; color: var(--ink); background: #fff; box-shadow: 0 1px 0 rgba(34,139,34,.02); transition: border-color 180ms ease, box-shadow 180ms ease; }.public-input:focus { border-color: #90c995; box-shadow: 0 0 0 4px rgba(144,238,144,.18); }.public-input::placeholder { color: #aab4c2; }.public-input--token { min-height: 190px; padding: 16px 18px; resize: vertical; font: 13px/1.6 Consolas, monospace; }
.public-tip-box { margin-top: 24px; padding: 12px 16px; border: 1px solid rgba(255,166,80,.42); border-radius: 13px; color: var(--warning); background: #fff9f0; line-height: 1.5; font-size: 14px; font-weight: 700; }.public-tip-box p { margin: 0; }.public-tip-box strong { display: block; margin-bottom: 4px; }.public-tip-box--danger-soft { border-color: rgba(180,35,24,.2); color: var(--danger); background: #fff3f2; }.public-tip-box--warning { margin-top: 26px; }
.token-guide-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }.token-guide-heading { color: var(--ink); font-size: 20px; font-weight: 900; }.token-guide-heading--confirm { margin-bottom: 24px; }.token-guide-tutorial-button, .token-guide-action { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 14px; border: 0; border-radius: 9px; color: #fff; background: var(--green); font-size: 13px; font-weight: 800; }.token-guide-tutorial-button { border: 1px solid var(--green); color: var(--green); background: #fff; }.token-guide { display: grid; gap: 18px; margin: 24px 0; }.token-guide-step { display: flex; align-items: flex-start; gap: 12px; }.token-guide-step--spaced { padding-top: 3px; }.token-guide-check { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border: 1px solid #b9dfc0; border-radius: 50%; color: var(--green); background: var(--green-soft); font-weight: 900; }.token-guide-step-content { display: grid; gap: 9px; }.token-guide-step-content strong { line-height: 1.5; }.token-guide-action { width: fit-content; }.public-field--token { margin-top: 26px; }.form-error { min-height: 20px; margin: 8px 0 -8px; color: var(--danger); font-size: 13px; font-weight: 700; }
.public-summary-list { margin: 0; border-top: 1px solid #edf3ed; }.public-summary-list div { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 16px 0; border-bottom: 1px solid #edf3ed; }.public-summary-list dt { color: var(--muted); }.public-summary-list dd { max-width: 70%; margin: 0; text-align: right; overflow-wrap: anywhere; font-weight: 850; }
.public-card-footer { width: min(760px,100%); min-height: 60px; margin: 16px auto 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }.public-card-query-shortcut, .public-primary-button, .public-ghost-button, .public-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: 999px; font-weight: 850; transition: transform 180ms ease, background 180ms ease, border-color 180ms ease; }.public-card-query-shortcut { border: 2px solid var(--green); color: var(--green); background: #fff; }.public-card-query-shortcut:hover, .public-ghost-button:hover { background: var(--green-soft); transform: translateY(-1px); }.public-footer-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }.public-primary-button { border: 1px solid var(--green); color: #fff; background: var(--green); box-shadow: 0 12px 24px rgba(34,139,34,.15); }.public-primary-button:hover { background: var(--green-dark); transform: translateY(-1px); }.public-ghost-button { border: 1px solid var(--green); color: var(--green); background: #fff; }
.public-status-strip { width: min(660px,100%); margin: 22px auto 0; padding: 14px 18px; display: flex; align-items: center; gap: 14px; border: 1px solid #e7efe9; border-radius: 12px; background: #fff; box-shadow: 0 5px 18px rgba(35,91,64,.04); }.public-status-strip i { width: 11px; height: 11px; flex: none; border-radius: 50%; background: #aeb9c1; box-shadow: 0 0 0 5px #f1f4f3; }.public-status-strip i.success { background: var(--green); box-shadow: 0 0 0 5px var(--green-soft); }.public-status-strip i.active { background: #2a6f9d; box-shadow: 0 0 0 5px #eaf4fa; }.public-status-strip i.error { background: var(--danger); box-shadow: 0 0 0 5px #fff0f2; }.public-status-strip i.warning { background: var(--warning); box-shadow: 0 0 0 5px #fff7ed; }.public-status-strip strong, .public-status-strip span { display: block; }.public-status-strip span { margin-top: 3px; color: var(--muted); font-size: 13px; }.public-status-strip b { margin-left: auto; color: #718096; font: 700 11px Consolas, monospace; }
.wizard-panel--result { min-height: 460px; display: grid; place-items: center; }.public-result-card { width: min(560px,100%); min-height: 320px; padding: 40px 24px; display: grid; place-items: center; align-content: center; gap: 13px; border: 1px solid #e2efe5; border-radius: 18px; text-align: center; background: #fff; }.public-result-card strong { font-size: 27px; }.public-result-card p { max-width: 480px; margin: 0; color: var(--muted); line-height: 1.6; }.public-result-card > span { color: #8a98a4; font-size: 13px; }.public-result-card-icon { width: 76px; height: 76px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--green); font-size: 40px; }.public-result-card--processing { background: linear-gradient(180deg,#fff,#fbfdff); }.public-result-card--processing .public-result-card-icon { color: #54a8c8; background: #eef9ff; }.public-processing-spinner { width: 43px; height: 43px; display: block; border: 3px solid #cfeef8; border-top-color: #4aaed8; border-radius: 50%; animation: spin .9s linear infinite; }.public-result-card--success .public-result-card-icon { background: var(--green); }.public-result-card--danger .public-result-card-icon { background: var(--danger); }.public-result-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 10px; }.public-link { min-height: 40px; padding: 0 16px; border: 1px solid var(--green); color: var(--green); background: #fff; }.public-link:hover { color: #fff; background: var(--green); }.public-message { position: fixed; top: 22px; left: 50%; z-index: 50; display: none; transform: translateX(-50%); padding: 13px 18px; border: 1px solid rgba(34,139,34,.15); border-radius: 999px; color: var(--green); background: #f0fbf5; box-shadow: 0 18px 44px rgba(15,23,42,.12); font-weight: 800; }.public-message.is-visible { display: block; }

/* Old backstage workspace: same restrained flower palette, with the original five work areas kept as separate views. */
.admin-page { min-height: 100vh; background: #f8fff9; }.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }.login-panel { width: min(430px,100%); padding: 34px; border: 1px solid var(--soft-line); border-radius: 16px; background: #fff; box-shadow: 0 20px 50px rgba(34,139,34,.08); }.login-panel h1 { margin: 12px 0 8px; font-size: 30px; }.login-panel p { color: var(--muted); }.login-panel .eyebrow, .section-eyebrow { color: var(--green); font: 850 11px/1.2 Consolas, monospace; letter-spacing: .12em; }.input-label { display: block; margin: 20px 0 8px; font-weight: 800; }.login-panel input { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid #d8e9dc; border-radius: 10px; }.full-button { width: 100%; margin-top: 20px; }
.admin-shell { min-height: 100vh; }.backstage-topbar { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid rgba(34,139,34,.1); background: rgba(255,255,255,.94); backdrop-filter: blur(12px); }.backstage-topbar-inner { width: min(1360px,calc(100% - 64px)); min-height: 76px; margin: 0 auto; display: flex; align-items: center; gap: 30px; }.backstage-brand { display: inline-flex; align-items: center; gap: 12px; font-size: 25px; white-space: nowrap; }.backstage-brand .public-flower-logo { transform: scale(.8); }.backstage-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }.backstage-nav-button, .backstage-refresh-button, .backstage-logout-button { min-height: 40px; flex: 0 0 auto; padding: 0 14px; border: 1px solid transparent; border-radius: 999px; color: #53647b; background: transparent; font-weight: 800; white-space: nowrap; }.backstage-nav-button[data-active="true"] { border-color: #bfe4c7; color: var(--green); background: var(--green-soft); }.backstage-refresh-button { width: 42px; padding: 0; border-color: var(--soft-line); font-size: 20px; }.backstage-logout-button { color: var(--green); }
.backstage-main { width: min(1360px,calc(100% - 64px)); margin: 22px auto 60px; }.backstage-stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-bottom: 20px; }.backstage-stat-card { min-height: 114px; padding: 20px 22px; border: 1px solid var(--soft-line); border-radius: 12px; background: #fff; }.backstage-stat-card span { display: block; color: var(--muted); font-weight: 750; }.backstage-stat-card strong { display: block; margin-top: 8px; font-size: 32px; }.backstage-panel { margin-top: 20px; padding: 28px; border: 1px solid var(--soft-line); border-radius: 14px; background: #fff; box-shadow: 0 10px 28px rgba(34,139,34,.04); }.backstage-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }.backstage-panel h1, .backstage-panel h2 { margin: 5px 0 8px; }.backstage-panel h1 { font-size: 27px; }.backstage-panel h2 { font-size: 19px; }.backstage-panel p { margin: 0; color: var(--muted); }.backstage-count { display: grid; place-items: center; min-width: 70px; padding: 8px; border: 1px solid #cfe6d5; border-radius: 10px; color: var(--green); }.backstage-count strong { font-size: 22px; }.backstage-toolbar, .backstage-form { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; margin: 24px 0 20px; padding: 14px; border: 1px solid #edf4ef; border-radius: 10px; background: #fbfefc; }.backstage-form label { display: grid; gap: 6px; color: #53647b; font-size: 12px; font-weight: 800; }.backstage-form label.grow { flex: 1 1 230px; }.backstage-form input, .backstage-form select, .backstage-toolbar input, .backstage-toolbar select { min-height: 42px; padding: 0 12px; border: 1px solid #cfe4d4; border-radius: 9px; background: #fff; }.backstage-toolbar input { margin-left: auto; }.backstage-primary-button, .backstage-green-action { min-height: 43px; padding: 0 18px; border: 1px solid var(--green); border-radius: 999px; color: #fff; background: var(--green); font-weight: 850; box-shadow: 0 9px 20px rgba(34,139,34,.14); }.backstage-plain-button { min-height: 40px; padding: 0 15px; border: 1px solid var(--green); border-radius: 999px; color: var(--green); background: #fff; font-weight: 800; }.backstage-table-scroll { overflow-x: auto; border: 1px solid var(--soft-line); border-radius: 10px; }.backstage-table { width: 100%; min-width: 950px; border-collapse: collapse; font-size: 13px; }.backstage-table th, .backstage-table td { padding: 13px 14px; border-bottom: 1px solid #edf3ee; text-align: left; white-space: nowrap; }.backstage-table th { color: #64748b; background: #fbfefc; }.backstage-table tbody tr:hover { background: #fcfffd; }.backstage-status-badge, .backstage-inline-stat { display: inline-flex; align-items: center; padding: 5px 10px; border: 1px solid #dbeee2; border-radius: 999px; color: #64748b; background: #f5faf6; font-size: 12px; font-weight: 800; }.backstage-status-badge[data-status="completed"], .backstage-status-badge[data-status="unused"], .backstage-status-badge[data-status="active"] { border-color: #bfe4c7; color: var(--green); background: var(--green-soft); }.backstage-status-badge[data-status="failed"], .backstage-status-badge[data-status="disabled"] { color: var(--danger); background: #fff3f2; }.backstage-table-action { padding: 5px 8px; border: 0; color: var(--green); background: transparent; font-weight: 800; }.backstage-table-action.danger { color: var(--danger); }.backstage-empty-cell { height: 100px; color: var(--muted); text-align: center !important; }.backstage-log-details { max-width: 280px; overflow: hidden; color: var(--muted); text-overflow: ellipsis; }.backstage-payment-card { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid #edf3ee; }.backstage-payment-card strong { display: block; }.backstage-payment-card span { color: var(--muted); font-size: 13px; }.backstage-switch { display: inline-flex; align-items: center; gap: 9px; color: #53647b; font-weight: 800; }.backstage-switch input { width: 38px; height: 22px; accent-color: var(--green); }.backstage-note { margin: 16px 0; padding: 13px 16px; border: 1px solid rgba(255,166,80,.42); border-radius: 11px; color: var(--warning); background: #fff9f0; font-size: 13px; }.backstage-modal-backdrop { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 20px; background: rgba(17,24,39,.35); }.backstage-modal { width: min(620px,100%); max-height: calc(100vh - 40px); overflow: auto; padding: 24px; border-radius: 14px; background: #fff; box-shadow: 0 24px 72px rgba(17,24,39,.22); }.backstage-modal h3 { margin-top: 0; }.backstage-modal input, .backstage-modal textarea, .backstage-modal select { width: 100%; min-height: 44px; margin: 6px 0 12px; padding: 10px 12px; border: 1px solid #cfe4d4; border-radius: 9px; }.backstage-modal textarea { min-height: 180px; resize: vertical; }.backstage-modal-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 9px; margin-top: 16px; }.secret-dialog { width: min(600px,calc(100% - 30px)); padding: 24px; border: 1px solid var(--soft-line); border-radius: 14px; }.secret-dialog textarea { width: 100%; min-height: 220px; margin: 18px 0; padding: 12px; }
@keyframes flower-section-in { from { opacity: 0; transform: translateY(16px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) { .public-oss-header-inner { width: min(100% - 32px,760px); }.public-stage { padding-top: 52px; }.backstage-topbar-inner, .backstage-main { width: calc(100% - 32px); }.backstage-stats-grid { gap: 10px; }.backstage-stat-card { padding: 16px; } }
@media (max-width: 700px) { .public-oss-header-inner { min-height: 64px; }.public-mobile-menu-button { display: block; }.public-oss-nav { display: none; position: absolute; top: 64px; left: 16px; right: 16px; padding: 8px 14px; flex-direction: column; align-items: stretch; gap: 0; border: 1px solid var(--soft-line); border-radius: 10px; background: #fff; box-shadow: 0 16px 40px rgba(34,139,34,.12); }.public-oss-nav[data-open="true"] { display: flex; }.public-oss-nav-link { min-height: 44px; border-bottom: 1px solid #edf3ee; }.public-stage { padding: 34px 16px 50px; }.public-card-header { padding: 0 0 32px; }.public-header-intro h1 { font-size: clamp(42px,12vw,64px); }.public-header-intro p { margin-top: 15px; font-size: 16px; }.wizard-steps { margin-top: 36px; }.wizard-step { gap: 7px; font-size: 12px; }.wizard-step-dot { width: 46px; height: 46px; font-size: 19px; }.wizard-steps::before { top: 23px; }.wizard-panel { padding: 22px 17px; border-radius: 14px; }.public-input { min-height: 60px; padding-inline: 16px; }.public-card-footer { align-items: stretch; }.public-card-query-shortcut, .public-primary-button, .public-ghost-button { min-height: 44px; padding-inline: 15px; font-size: 14px; }.public-status-strip b { display: none; }.backstage-topbar-inner { min-height: 66px; flex-wrap: wrap; gap: 10px; padding: 10px 0; }.backstage-brand { font-size: 20px; }.backstage-actions { width: 100%; overflow-x: auto; margin-left: 0; }.backstage-nav-button { flex: 0 0 auto; }.backstage-stats-grid { grid-template-columns: repeat(2,1fr); }.backstage-stat-card { min-width:0; }.backstage-panel { padding: 20px 14px; }.backstage-panel-head { align-items: flex-start; }.backstage-toolbar input { width: 100%; margin-left: 0; }.backstage-form { display: grid; grid-template-columns: 1fr 1fr; align-items: end; }.backstage-form label.grow, .backstage-form .backstage-primary-button { grid-column: 1 / -1; }.backstage-payment-card { grid-template-columns: 1fr; } }
@media (max-width: 430px) { .public-card-footer { flex-direction: column-reverse; }.public-footer-actions { width: 100%; margin: 0; }.public-footer-actions > * { flex: 1; }.public-card-query-shortcut { width: fit-content; }.public-summary-list div { display: block; }.public-summary-list dd { max-width: none; margin-top: 6px; text-align: left; }.backstage-form { grid-template-columns: 1fr; }.backstage-form label.grow, .backstage-form .backstage-primary-button { grid-column: auto; } }
/* Error toast tone used by admin actions. */
.public-message.is-error { border-color: rgba(180,35,24,.18); color: var(--danger); background: #fff3f2; }

.login-panel .input-label + input { margin-bottom: 4px; }
.backstage-task-table { min-width: 1260px; }
.backstage-task-main-row td { padding-block: 12px; vertical-align: middle; }
.backstage-task-table th:nth-child(5), .backstage-task-table td:nth-child(5) { min-width: 280px; max-width: 360px; white-space: normal; }
.backstage-task-current-state { color: #34445a; font-weight: 800; line-height: 1.45; }
.backstage-task-current-state[data-status="completed"] { color: var(--green); }
.backstage-task-current-state[data-status="failed"], .backstage-task-current-state[data-status="rejected_subscription"], .backstage-task-current-state[data-status="rejected_token_expired"], .backstage-task-current-state[data-status="cancelled"] { color: var(--danger); }
.backstage-task-actions { min-width: 224px; white-space: normal !important; }
.backstage-action-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.backstage-action-grid .backstage-table-action { width: 100%; min-height: 32px; padding: 5px 8px; border: 1px solid #dcece0; border-radius: 6px; background: #f8fcf9; text-align: center; }
.backstage-action-grid .backstage-table-action:hover { border-color: #bfe0c6; background: #eef8f0; }
.backstage-action-grid .backstage-copy-token--invalid,
.backstage-action-grid .backstage-copy-token--invalid:disabled { border-color: #efc8c5; color: #b04d4a; background: #fff1f0; opacity: 1; }
.backstage-action-grid .backstage-copy-token--invalid:hover:not(:disabled) { border-color: #dfa6a2; color: #943f3b; background: #ffe7e5; }
.backstage-copy-value { max-width: 270px; overflow-wrap: anywhere; white-space: normal !important; user-select: text; }
.backstage-copy-code { max-width: 320px; padding: 4px 6px; border: 0; border-radius: 5px; color: #24415f; background: transparent; font: inherit; text-align: left; overflow-wrap: anywhere; white-space: normal; cursor: copy; }
.backstage-copy-code:hover { color: var(--green); background: #eef8f0; }
.backstage-modal-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.backstage-modal-heading h3 { margin: 4px 0 6px; }
.backstage-modal-heading p { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
.backstage-modal-close { width: 36px; height: 36px; flex: none; border: 1px solid #dce8df; border-radius: 50%; color: #53647b; background: #fff; font-size: 24px; line-height: 1; }
.backstage-task-log-modal { width: min(760px,100%); overflow: hidden; }
.backstage-task-log-list { display: grid; gap: 0; max-height: min(68vh,680px); margin: 22px 0 0; padding: 0 8px 0 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; }
.backstage-task-log-list li { display: grid; grid-template-columns: 96px minmax(0,1fr); gap: 14px; padding: 12px 4px; border-bottom: 1px solid #e7f0e9; }
.backstage-task-log-list time { color: #7b8998; font-size: 12px; }
.backstage-task-log-list li > div { display: grid; gap: 3px; min-width: 0; }
.backstage-task-log-list b { color: #65758a; font-size: 11px; font-weight: 800; }
.backstage-task-log-list strong { color: #27364a; font-size: 14px; }
.backstage-task-log-list span { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.backstage-task-log-details { white-space: pre-wrap; }
.backstage-task-log-details.is-empty { color: #9aa6b2; font-style: italic; }
.backstage-task-log-list li[data-level="error"] { background: #fff7f6; }
.backstage-task-log-list li[data-level="error"] b, .backstage-task-log-list li[data-level="error"] strong { color: var(--danger); }
.backstage-task-log-list li[data-level="warning"] b { color: var(--warning); }
@media (max-width: 700px) { .backstage-task-log-list li { grid-template-columns: 1fr; gap: 5px; } }
.backstage-status-badge[data-status="awaiting_token"] { color: #2a6f9d; background: #eef9ff; }
.backstage-status-badge[data-status="cancelled"], .backstage-status-badge[data-status="rejected_token_expired"], .backstage-status-badge[data-status="rejected_subscription"] { color: var(--danger); background: #fff3f2; }
.backstage-smtp-form { align-items: end; }
.backstage-smtp-form > label { flex: 1 1 180px; }
.backstage-smtp-form > label.grow { flex-basis: 280px; }
.backstage-monitor-switches { align-items: center; }
.backstage-form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-left: auto; }
.backstage-parse-status { min-height: 22px; margin: -4px 0 12px; color: var(--muted); font-size: 13px; }
.backstage-parse-status.success { color: var(--green); font-weight: 800; }
.backstage-worker-form { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.backstage-worker-form input { min-width: 240px; margin: 0; }

/* Public recharge flow: preserve the original layout while aligning later steps and live status. */
.public-route-stage[data-step]:not([data-step="1"]) .public-header-intro { display: none; }
.public-route-stage[data-step]:not([data-step="1"]) .public-stage:not(.public-stage--query) { padding-top: 24px; }
.public-route-stage[data-step]:not([data-step="1"]) .public-card-header { padding-bottom: 24px; }
.public-route-stage[data-step]:not([data-step="1"]) .wizard-steps { margin-top: 0; }
.public-route-stage[data-step]:not([data-step="1"]) .wizard-step { gap: 7px; }
.public-route-stage[data-step]:not([data-step="1"]) .wizard-step-dot { width: 50px; height: 50px; font-size: 21px; }
.public-route-stage[data-step]:not([data-step="1"]) .wizard-steps::before { top: 25px; }
.public-route-stage[data-step="2"] .public-stage:not(.public-stage--query) { padding-top: 10px; padding-bottom: 28px; }
.public-route-stage[data-step="2"] .public-card-header { padding-bottom: 12px; }
.public-route-stage[data-step="2"] .wizard-step { gap: 5px; font-size: 13px; }
.public-route-stage[data-step="2"] .wizard-step-dot { width: 42px; height: 42px; border-width: 2px; font-size: 18px; }
.public-route-stage[data-step="2"] .wizard-steps::before { top: 21px; height: 2px; }
.public-route-stage[data-step="2"] .wizard-panel { padding: 22px 26px 7px; }
.public-route-stage[data-step="2"] .token-guide-heading { font-size: 18px; }
.public-route-stage[data-step="2"] .token-guide { gap: 11px; margin: 14px 0; }
.public-route-stage[data-step="2"] .token-guide-check { width: 21px; height: 21px; }
.public-route-stage[data-step="2"] .token-guide-step-content { gap: 6px; }
.public-route-stage[data-step="2"] .token-guide-step-content strong { line-height: 1.4; }
.public-route-stage[data-step="2"] .token-guide-action,.public-route-stage[data-step="2"] .token-guide-tutorial-button { min-height: 34px; padding-inline: 12px; }
.public-route-stage[data-step="2"] .public-field--token { margin-top: 16px; }
.public-route-stage[data-step="2"] .public-input--token { height: 120px; min-height: 120px; max-height: 160px; }
.public-route-stage[data-step="2"] .form-error { min-height: 16px; margin-top: 5px; }
.public-route-stage[data-step="2"] .public-token-payment-section { margin-top: 5px; padding-top: 0; border-top: 0; }
.public-route-stage[data-step="2"] .public-payment-methods { gap: 7px; }
.public-route-stage[data-step="2"] .public-payment-method { min-height: 58px; padding: 8px 13px; }
.public-route-stage[data-step="2"] .public-tip-box--warning { margin-top: 14px; padding: 10px 14px; font-size: 13px; }
.public-route-stage[data-step="2"] .public-card-footer { min-height: 50px; margin-top: 9px; }
.public-field-title-row { display: flex !important; align-items: center; justify-content: space-between; gap: 18px; }
.public-availability { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; font-weight: 800; white-space: nowrap; }
.public-availability i { width: 9px; height: 9px; flex: none; border-radius: 50%; background: #9aa6b2; box-shadow: 0 0 0 4px #eef2f3; }
.public-availability[data-state="online"] { color: var(--green); }
.public-availability[data-state="online"] i { background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.public-availability[data-state="offline"] { color: var(--danger); }
.public-availability[data-state="offline"] i { background: var(--danger); box-shadow: 0 0 0 4px #fff0f2; }
.public-card-footer > .public-primary-button { margin-left: auto; }

/* The first step mirrors the product-plan chooser while keeping the existing recharge flow. */
.public-route-stage[data-step="1"] > .public-stage:not(.public-stage--query) .public-card { width:min(1880px,100%); }
.public-route-stage[data-step="1"] > .public-stage:not(.public-stage--query) .public-card-body { width:100%; }
.public-route-stage[data-step="1"] > .public-stage:not(.public-stage--query) .public-card-footer { width:min(1880px,100%); }
.public-route-stage[data-step="1"] .wizard-steps { display:none; }
.public-card-footer[data-step="1"] { display:none; }
.wizard-panel--plans { padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.public-plan-page-title { margin:0 0 24px; color:#171717; text-align:center; font-size:26px; font-weight:500; line-height:1.25; letter-spacing:-.02em; }
.public-plan-icon-defs { position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; }
.public-plan-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; align-items:stretch; }
.public-plan-card { min-width:0; min-height:clamp(780px,64vw,1234px); display:flex; flex-direction:column; padding:clamp(28px,2.2vw,43px) clamp(28px,2vw,39px) 30px; border:1px solid #e0e1e3; border-radius:34px; color:#111; background:#fff; box-shadow:0 7px 20px rgba(15,23,42,.075); }
.public-plan-card--recommended { border:2px solid #86b6ff; background:linear-gradient(180deg,#fff 0%,#f0f6ff 100%); box-shadow:0 8px 22px rgba(36,124,255,.09); }
.public-plan-card-top { min-height:42px; display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.public-plan-name { font-size:clamp(19px,1.55vw,30px); font-weight:750; letter-spacing:-.025em; }
.public-plan-recommend { padding:7px 10px; border-radius:999px; color:#1769d2; background:#eaf2ff; font-size:12px; font-weight:850; }
.public-plan-scale { display:inline-flex; padding:4px; border-radius:999px; color:#8c8f94; background:#f1f1f1; font-size:12px; }
.public-plan-scale button { min-width:48px; padding:6px 12px; border:0; border-radius:999px; color:#8c8f94; background:transparent; text-align:center; font-size:12px; font-weight:750; transition:color 160ms ease,background 160ms ease,box-shadow 160ms ease,transform 160ms ease; }
.public-plan-scale button:hover { color:#35383d; }
.public-plan-scale button[data-active="true"] { color:#1d1d1f; background:#fff; box-shadow:0 1px 4px rgba(15,23,42,.18); transform:scale(1.02); }
.public-plan-scale button:focus-visible { outline:2px solid #8ab8ff; outline-offset:1px; }
.public-plan-scale-badge { min-width:48px; padding:8px 13px; border-radius:999px; color:#4e535a; background:#f1f1f1; text-align:center; font-size:12px; font-weight:800; line-height:1; }
.public-plan-card h2 { margin:clamp(24px,2.7vw,52px) 0 clamp(12px,1.2vw,23px); font-size:clamp(27px,2.2vw,43px); line-height:1.16; letter-spacing:-.04em; }
.public-plan-description { min-height:clamp(54px,4vw,78px); margin:0; color:#696969; font-size:clamp(14px,1.32vw,25px); line-height:1.6; }
.public-plan-price { min-height:72px; margin:28px 0 18px; display:flex; align-items:center; color:#0c0c0d; }
.public-plan-price sup { align-self:flex-start; margin-top:12px; font-size:17px; font-weight:750; }
.public-plan-price strong { font-size:clamp(40px,3.15vw,61px); font-weight:500; line-height:1; letter-spacing:-.045em; }
.public-plan-price span { align-self:flex-end; margin:0 0 9px 8px; color:#5f6368; font-size:17px; }
.public-plan-button { width:100%; min-height:clamp(50px,3.35vw,66px); display:flex; align-items:center; justify-content:center; gap:8px; padding:0 18px; border:0; border-radius:999px; color:#fff; background:#09090a; font-size:clamp(15px,1.12vw,22px); font-weight:800; transition:transform 160ms ease,filter 160ms ease,box-shadow 160ms ease; }
.public-plan-button:hover { transform:translateY(-1px); filter:brightness(1.08); }
.public-plan-button:focus-visible { outline:3px solid rgba(34,139,34,.22); outline-offset:3px; }
.public-plan-button--primary { background:#1685f8; box-shadow:0 10px 22px rgba(22,133,248,.2); }
.public-plan-features { margin-top:28px; }
.public-plan-features h3 { margin:0 0 clamp(18px,1.8vw,35px); font-size:clamp(15px,1.16vw,22px); line-height:1.5; }
.public-plan-features ul { display:grid; gap:clamp(14px,1.6vw,30px); margin:0; padding:0; list-style:none; }
.public-plan-features li { display:grid; grid-template-columns:clamp(22px,1.8vw,34px) minmax(0,1fr); align-items:start; gap:clamp(10px,1vw,18px); padding:0; color:#171717; font-size:clamp(14px,1.17vw,22px); line-height:1.45; }
.public-plan-features li > svg { width:clamp(22px,1.8vw,34px); height:clamp(22px,1.8vw,34px); margin-top:-1px; overflow:visible; color:#111; }
.public-plan-card--recommended .public-plan-features li > svg { color:#2f73d3; }
.public-plan-card--recommended::after { min-height:clamp(56px,5vw,96px); flex:1 0 clamp(56px,5vw,96px); content:""; }
.public-plan-note { margin:auto 0 0; padding-top:26px; color:#6c6c6c; font-size:clamp(12px,1vw,19px); line-height:1.55; }
.public-plan-note u { text-underline-offset:3px; }
.public-availability--silent { display:none; }

@media (max-width:1280px) {
  .public-plan-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
  .public-plan-card { min-height:730px; padding:22px 20px; border-radius:20px; }
  .public-plan-name { font-size:19px; }
  .public-plan-card h2 { margin-top:17px; font-size:26px; }
  .public-plan-description { min-height:68px; font-size:14px; }
  .public-plan-price { margin-top:20px; }
  .public-plan-price strong { font-size:40px; }
  .public-plan-features { margin-top:23px; }
  .public-plan-features ul { gap:13px; }
  .public-plan-features li { grid-template-columns:22px minmax(0,1fr); gap:9px; padding-left:0; font-size:13px; }
  .public-plan-features li > svg { width:22px; height:22px; }
}

@media (max-width:900px) {
  .public-plan-grid { grid-template-columns:1fr; gap:18px; }
  .public-plan-card { width:min(620px,100%); min-height:0; margin:0 auto; padding:27px 25px; }
  .public-plan-name { font-size:21px; }
  .public-plan-card h2 { font-size:29px; }
  .public-plan-description { min-height:0; font-size:15px; }
  .public-plan-features li { font-size:14px; }
  .public-plan-card--recommended::after { display:none; }
}

@media (max-width:520px) {
  .public-plan-card { padding:23px 19px; border-radius:18px; }
  .public-plan-card h2 { margin-top:14px; font-size:27px; }
  .public-plan-price { min-height:62px; margin:20px 0 14px; }
  .public-plan-price strong { font-size:39px; }
  .public-plan-scale button { min-width:42px; padding-inline:9px; }
  .public-plan-features { margin-top:22px; }
}

/* Desktop plan chooser proportions follow the compact density of the source upgrade page. */
@media (min-width:901px) {
  .public-route-stage[data-step="1"] { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; -webkit-font-smoothing:antialiased; }
  .public-route-stage[data-step="1"] .public-stage { padding-top:28px; }
  .public-route-stage[data-step="1"] .public-card-header { padding-bottom:24px; }
  .public-route-stage[data-step="1"] .public-header-intro h1 { font-size:clamp(50px,4.2vw,62px); font-weight:680; }
  .public-route-stage[data-step="1"] .public-home-system-title { margin-top:8px; font-size:clamp(20px,1.8vw,25px); font-weight:450; }
  .wizard-panel--plans { width:min(1080px,86vw); margin:0 auto; }
  .public-plan-card { min-height:680px; padding:24px 22px; border-radius:21px; }
  .public-plan-card-top { min-height:38px; }
  .public-plan-name { font-size:17px; font-weight:500; }
  .public-plan-recommend,.public-plan-scale-badge { padding:6px 10px; font-size:10px; font-weight:550; }
  .public-plan-card h2 { margin:23px 0 12px; font-size:26px; font-weight:500; }
  .public-plan-description { min-height:55px; font-size:14px; line-height:1.52; }
  .public-plan-price { min-height:58px; margin:19px 0 15px; }
  .public-plan-price sup { margin-top:9px; font-size:14px; }
  .public-plan-price strong { font-size:40px; font-weight:400; }
  .public-plan-price span { margin:0 0 6px 7px; font-size:14px; }
  .public-plan-button { min-height:44px; font-size:14px; font-weight:500; }
  .public-plan-features { margin-top:22px; }
  .public-plan-features h3 { margin-bottom:15px; font-size:14px; font-weight:500; }
  .public-plan-features ul { gap:11px; }
  .public-plan-features li { grid-template-columns:20px minmax(0,1fr); gap:10px; font-size:13.5px; font-weight:400; line-height:1.38; }
  .public-plan-features li > svg { width:20px; height:20px; }
  .public-plan-card--recommended::after { min-height:28px; flex-basis:28px; }
  .public-plan-note { padding-top:18px; font-size:12px; font-weight:400; }
}

@media (min-width:1281px) {
  .wizard-panel--plans { width:min(1720px,86.5vw); }
}

/* Match the source page's responsive rhythm: four columns only when every card
   has enough room, two columns for tablets and medium desktop windows, then one
   column on phones. */
@media (min-width:721px) and (max-width:1280px) {
  .wizard-panel--plans { width:min(780px,calc(100vw - 40px)); margin:0 auto; }
  .public-plan-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
}

@media (max-width:720px) {
  .wizard-panel--plans { width:min(384px,100%); margin:0 auto; }
  .public-plan-page-title { margin-bottom:20px; font-size:22px; }
  .public-plan-grid { grid-template-columns:minmax(0,1fr); }
  .public-route-stage[data-step="1"] { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-synthesis:none; }
  .public-plan-card { width:100%; padding:24px; border-radius:22px; }
  .public-plan-card-top { min-height:36px; }
  .public-plan-name { font-size:17px; font-weight:500; }
  .public-plan-recommend,.public-plan-scale-badge { padding:6px 10px; font-size:10px; font-weight:550; }
  .public-plan-card h2 { margin:22px 0 12px; font-size:26px; font-weight:500; }
  .public-plan-description { font-size:14px; font-weight:400; line-height:1.52; }
  .public-plan-price { min-height:58px; margin:20px 0 15px; }
  .public-plan-price sup { margin-top:9px; font-size:14px; }
  .public-plan-price strong { font-size:40px; font-weight:400; }
  .public-plan-price span { margin:0 0 6px 7px; font-size:14px; }
  .public-plan-button { min-height:44px; font-size:14px; font-weight:500; }
  .public-plan-features { margin-top:23px; }
  .public-plan-features h3 { margin-bottom:15px; font-size:14px; font-weight:500; }
  .public-plan-features ul { gap:12px; }
  .public-plan-features li { grid-template-columns:20px minmax(0,1fr); gap:10px; font-size:13.5px; font-weight:400; line-height:1.4; }
  .public-plan-features li > svg { width:20px; height:20px; }
  .public-plan-card[data-plan-card="plus"] { order:1; }
  .public-plan-card[data-plan-card="go"] { order:2; }
  .public-plan-card[data-plan-card="pro5"] { order:3; }
  .public-plan-card[data-plan-card="pro20"] { order:4; }
}

@media (max-width:700px) {
  .public-route-stage[data-step="1"] .public-stage:not(.public-stage--query) { padding-top:14px; }
  .public-route-stage[data-step="1"] .public-card-header { padding-bottom:14px; }
  .public-route-stage[data-step="1"] .public-plan-page-title { margin-bottom:14px; }
  .public-header-brand-actions { gap:9px; }
  .public-oss-brand-copy strong { font-size:20px; font-weight:700; }
  .public-oss-brand-copy small { font-size:9px; }
  .public-oss-nav-link { font-weight:600; }
  .public-bookmark-button { width:auto; min-height:34px; padding:0 10px; border:1px solid #c9e2ce; border-radius:9px; background:#f8fdf9; font-size:11px; font-weight:600; }
  .public-bookmark-button:hover { background:#edf8ef; transform:none; }
  .public-bookmark-button span { font-size:15px; }
  .public-header-intro p { font-weight:500; }
  .public-primary-button,.public-ghost-button,.public-card-query-shortcut { font-weight:600; }
}

/* Give the desktop Token flow more vertical rhythm without forcing shorter
   laptop screens to scroll. */
@media (min-width:901px) and (min-height:850px) {
  .public-route-stage[data-step="2"] .public-stage:not(.public-stage--query) { padding-top:14px; }
  .public-route-stage[data-step="2"] .public-card-header { padding-bottom:16px; }
  .public-route-stage[data-step="2"] .wizard-panel { padding:26px 28px 7px; }
  .public-route-stage[data-step="2"] .token-guide { gap:14px; margin:18px 0; }
  .public-route-stage[data-step="2"] .token-guide-action,
  .public-route-stage[data-step="2"] .token-guide-tutorial-button { min-height:36px; }
  .public-route-stage[data-step="2"] .public-field--token { margin-top:19px; }
  .public-route-stage[data-step="2"] .public-input--token { height:132px; min-height:132px; max-height:172px; }
  .public-route-stage[data-step="2"] .public-card-footer { margin-top:12px; }
}

@media (min-width:1100px) and (min-height:960px) {
  .public-route-stage[data-step="2"] .public-stage:not(.public-stage--query) { padding-top:18px; }
  .public-route-stage[data-step="2"] .public-card-header { padding-bottom:20px; }
  .public-route-stage[data-step="2"] .wizard-panel { padding:30px 30px 7px; }
  .public-route-stage[data-step="2"] .token-guide { gap:18px; margin:22px 0; }
  .public-route-stage[data-step="2"] .token-guide-action,
  .public-route-stage[data-step="2"] .token-guide-tutorial-button { min-height:38px; }
  .public-route-stage[data-step="2"] .public-field--token { margin-top:24px; }
  .public-route-stage[data-step="2"] .public-input--token { height:152px; min-height:152px; max-height:188px; }
  .public-route-stage[data-step="2"] .public-payment-method { min-height:62px; }
  .public-route-stage[data-step="2"] .public-card-footer { margin-top:14px; }
}

/* Public recharge credential flow: preserve the existing green floral design. */
.public-recharge-welcome { min-height: 146px; display: flex; align-items: center; gap: 22px; padding: 28px; border: 1px solid #d9eddf; border-radius: 14px; background: linear-gradient(135deg,#f8fff9,#fff); }
.public-recharge-welcome-mark { flex: 0 0 66px; width: 66px; height: 66px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--green); box-shadow: 0 0 0 9px rgba(34,139,34,.08); font-size: 38px; font-weight: 300; }
.public-recharge-welcome strong { display: block; color: var(--ink); font-size: 22px; }
.public-recharge-welcome p { margin: 9px 0 0; color: var(--muted); line-height: 1.7; }
.public-availability--welcome { width: fit-content; margin: 18px auto 0; }
.public-payment-methods { display: grid; gap: 10px; margin: 24px 0 0; padding: 0; border: 0; }
.public-payment-methods legend { margin-bottom: 3px; color: #53647b; font-size: 13px; font-weight: 850; }
.public-payment-method { min-height: 68px; display: grid; grid-template-columns: 40px 1fr 16px; align-items: center; gap: 13px; padding: 12px 15px; border: 1px solid var(--soft-line); border-radius: 12px; background: #fff; cursor: pointer; transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease; }
.public-payment-method { -webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none; touch-action:manipulation; }
.public-payment-method::selection,.public-payment-method *::selection { color:inherit; background:transparent; }
.public-payment-method:has(input:focus-visible) { outline:2px solid rgba(34,139,34,.28); outline-offset:2px; }
.public-payment-method:hover { transform: translateY(-1px); border-color: #a9d8b3; }
.public-payment-method:has(input:checked) { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green), 0 9px 24px rgba(34,139,34,.07); }
.public-payment-method input { position: absolute; opacity: 0; pointer-events: none; }
.public-payment-method > span:nth-of-type(2) { display: grid; gap: 3px; }
.public-payment-method strong { color: var(--ink); font-size: 14px; }
.public-payment-method small { color: var(--muted); font-size: 11px; }
.public-payment-method > i { width: 14px; height: 14px; border: 1px solid #aab9ae; border-radius: 50%; }
.public-payment-method:has(input:checked) > i { border: 4px solid var(--green); }
.public-wechat-icon,.public-card-key-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; }
.public-wechat-icon { overflow: visible; background: transparent; }
.public-wechat-icon img { width: 100%; height: 100%; display: block; object-fit: contain; }
.public-card-key-icon { color: var(--green); background: var(--green-soft); font-size: 25px; }
.public-code-option { min-height:50px; display:flex; align-items:center; gap:12px; padding:3px 2px; }
.public-code-toggle { flex:0 0 auto; display:flex; align-items:center; gap:9px; min-height:42px; color:#617084; cursor:pointer; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.public-code-toggle input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.public-code-toggle strong { color:#607087; font-size:14px; font-weight:650; white-space:nowrap; transition:color 160ms ease; }
.public-code-checkbox { position:relative; width:21px; height:21px; flex:0 0 21px; border:1px solid #aebbb2; border-radius:4px; background:#fff; transition:border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease; }
.public-code-checkbox::after { content:""; position:absolute; left:6px; top:2px; width:6px; height:11px; border:solid #fff; border-width:0 2px 2px 0; opacity:0; transform:rotate(45deg) scale(.75); transition:opacity 140ms ease, transform 160ms ease; }
.public-code-toggle:hover .public-code-checkbox { border-color:#72b781; }
.public-code-toggle:has(input:checked) strong { color:var(--ink); }
.public-code-toggle:has(input:checked) .public-code-checkbox { border-color:var(--green); background:var(--green); box-shadow:0 0 0 3px rgba(34,139,34,.1); }
.public-code-toggle:has(input:checked) .public-code-checkbox::after { opacity:1; transform:rotate(45deg) scale(1); }
.public-code-toggle:has(input:focus-visible) .public-code-checkbox { outline:2px solid rgba(34,139,34,.35); outline-offset:2px; }
.public-card-credential { flex:1 1 220px; min-width:120px; margin:0; animation:public-inline-code-in 180ms ease-out both; }
.public-card-credential[hidden] { display:none; }
.public-card-credential .public-input { height:42px; min-height:42px; padding:0 14px; border:1px solid var(--soft-line); border-radius:10px; color:var(--ink); background:#fff; box-shadow:inset 0 1px 2px rgba(25,53,34,.025); font-size:13px; }
.public-card-credential .public-input::placeholder { color:#a3afbd; }
.public-card-credential .public-input:hover { border-color:#b8d9c0; }
.public-card-credential .public-input:focus { border-color:var(--green); background:#fff; box-shadow:0 0 0 3px rgba(34,139,34,.09); }
.public-token-payment-section { margin-top: 22px; padding-top: 20px; border-top: 1px solid #e5efe7; }
.public-token-payment-section .public-payment-methods { margin-top: 0; }
.public-payment-backdrop { position: fixed; inset: 0; z-index: 1000; background: rgba(17,20,28,.46); backdrop-filter: blur(3px) saturate(.88); animation: public-payment-backdrop-in 180ms ease-out both; }
.public-payment-backdrop[hidden] { display: none; }
.public-wechat-qr { position: fixed; top: 50%; left: 50%; z-index: 1001; width: min(400px,calc(100vw - 28px)); margin: 0; padding: 30px 26px 26px; border: 1px solid rgba(7,193,96,.22); border-radius: 20px; text-align: center; background: linear-gradient(180deg,#f7fff9,#fff); box-shadow: 0 28px 80px rgba(15,18,24,.28); transform: translate(-50%,-50%); transition: transform 420ms cubic-bezier(.4,0,.2,1), opacity 360ms ease; }
.public-wechat-qr.is-restoring { animation: public-payment-modal-in 240ms cubic-bezier(.2,.8,.2,1) both; }
.public-wechat-qr.is-minimizing { transform: translate(calc(-50% + var(--minimize-x,0px)),calc(-50% + var(--minimize-y,0px))) scale(.12); opacity: 0; pointer-events: none; }
.public-wechat-qr-minimize { position: absolute; top: 10px; right: 11px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #6e7f73; background: transparent; font-size: 24px; line-height: 1; cursor: pointer; transition: color 160ms ease, background 160ms ease, transform 160ms ease; }
.public-wechat-qr-minimize:hover { color: var(--green-dark); background: var(--green-soft); transform: rotate(8deg); }
.public-wechat-qr-label { display: flex; align-items: center; justify-content: center; gap: 8px; color: #40536c; font-size: 16px; line-height: 1.25; font-weight: 850; transform: translateX(-6px); }
.public-wechat-account-confirm { margin: -3px 34px 15px; padding: 0 0 13px; border-bottom: 1px solid #dceae0; text-align: center; }
.public-wechat-account-confirm span,.public-wechat-account-confirm strong { display:block; }
.public-wechat-account-confirm span { color:#7a8998; font-size:11px; font-weight:650; }
.public-wechat-account-confirm strong { width:100%; margin-top:4px; overflow:hidden; color:#263649; font-size:14px; font-weight:700; line-height:1.4; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.public-wechat-qr-label img { width: 22px; height: 22px; display: block; flex: 0 0 22px; border-radius: 0; object-fit: contain; }
.public-wechat-qr-frame { width: 196px; height: 196px; margin: 15px auto 10px; padding: 8px; border: 1px solid #d9ebe0; border-radius: 12px; background: #fff; box-shadow: 0 10px 26px rgba(34,139,34,.08); }
.public-wechat-qr-frame img { width: 100%; height: 100%; display: block; object-fit: contain; }
.public-wechat-qr-frame { position:relative; display:grid; place-items:center; overflow:hidden; box-sizing:content-box; }
.public-wechat-qr-frame::before { position:absolute; inset:8px; z-index:0; content:""; background:#fff url('/assets/wechat-qr-loading.svg?v=1') center/contain no-repeat; filter:blur(4.5px); opacity:.56; transform:scale(.985); transition:opacity 360ms ease,filter 420ms ease,transform 420ms ease; }
.public-wechat-qr-frame > span { color:#8290a0; font-size:12px; font-weight:650; }
.public-wechat-qr-frame > button { min-height:34px; padding:0 14px; border:1px solid #b9dbc1; border-radius:999px; color:var(--green-dark); background:#fff; font-size:12px; font-weight:750; cursor:pointer; }
.public-wechat-qr-frame img { position:relative; z-index:1; opacity:0; filter:blur(8px); transform:scale(.985); transition:opacity 380ms ease,filter 480ms cubic-bezier(.2,.75,.2,1),transform 480ms cubic-bezier(.2,.75,.2,1); }
.public-wechat-qr-frame[data-state="loading"] > span,.public-wechat-qr-frame[data-state="loading"] > button { display:none; }
.public-wechat-qr-frame[data-state="ready"] img { opacity:1; filter:blur(0); transform:scale(1); }
.public-wechat-qr-frame[data-state="ready"]::before { opacity:0; filter:blur(1px); transform:scale(1.015); }
.public-wechat-qr-frame[data-state="ready"] > span,.public-wechat-qr-frame[data-state="ready"] > button { display:none; }
.public-wechat-qr-frame[data-state="error"] { align-content:center; gap:12px; background:#fbfdfb; }
.public-wechat-qr-frame[data-state="error"]::before,.public-wechat-qr-frame[data-state="error"] img { display:none; }
.public-wechat-qr-frame[data-state="error"] > span,.public-wechat-qr-frame[data-state="error"] > button { position:relative; z-index:2; }
.public-wechat-qr > strong { display: block; color: var(--green-dark); font-size: 20px; }
.public-wechat-mobile-pay { display:none; align-items:center; justify-content:center; gap:9px; width:100%; min-height:48px; margin:14px 0 3px; padding:0 18px; border:0; border-radius:12px; color:#fff; background:#07c160; box-shadow:0 10px 24px rgba(7,193,96,.2); font-size:15px; font-weight:850; cursor:pointer; }
.public-wechat-mobile-pay img { width:23px; height:23px; border-radius:0; object-fit:contain; }
.public-wechat-qr > p { margin: 6px 0 0; color: var(--muted); font-size: 11px; }
.public-wechat-qr > p[data-state="success"] { color: var(--green-dark); font-weight: 850; }
.public-wechat-progress-button { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-width:210px; min-height:48px; margin:18px auto 0; padding:0 24px; border:0; border-radius:12px; color:#fff; background:var(--green); box-shadow:0 12px 26px rgba(34,139,34,.2); font-size:15px; font-weight:800; cursor:pointer; transition:background 160ms ease, transform 160ms ease, box-shadow 160ms ease; }
.public-wechat-progress-button:hover { background:var(--green-dark); box-shadow:0 14px 30px rgba(34,139,34,.25); transform:translateY(-1px); }
.public-wechat-progress-button:focus-visible { outline:3px solid rgba(34,139,34,.22); outline-offset:3px; }
.public-wechat-progress-button[hidden] { display:none; }
.public-wechat-qr.is-payment-success { width:min(430px,calc(100vw - 28px)); padding:32px 28px 30px; }
.public-wechat-qr.is-payment-success .public-wechat-account-confirm { margin-bottom:22px; }
.public-wechat-qr.is-payment-success .public-wechat-qr-label { color:var(--green-dark); font-size:18px; transform:none; }
.public-wechat-qr.is-payment-success .public-wechat-qr-frame,
.public-wechat-qr.is-payment-success > #wechat-qr-amount,
.public-wechat-qr.is-payment-success .public-wechat-mobile-pay,
.public-wechat-qr.is-payment-success .public-wechat-payment-notice { display:none; }
.public-wechat-qr.is-payment-success > #wechat-qr-status { display:flex; align-items:center; justify-content:center; gap:9px; margin:24px 0 0; color:#263649; font-size:15px; font-weight:700; }
.public-wechat-qr.is-payment-success > #wechat-qr-status::before { content:'✓'; width:26px; height:26px; display:grid; place-items:center; flex:0 0 26px; border-radius:50%; color:#fff; background:var(--green); font-size:15px; font-weight:900; }
.public-wechat-qr .public-wechat-payment-notice { margin:8px 0 0; padding:0 6px; border:0; color:#7c8996; font-size:10px; font-weight:500; line-height:1.65; text-align:center; }
@keyframes public-payment-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes public-payment-modal-in { from { opacity: 0; transform: translate(-50%,-46%) scale(.94); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
@keyframes public-inline-code-in { from { opacity:0; transform:translateX(-8px); } to { opacity:1; transform:translateX(0); } }

@media (max-width: 520px) {
  .public-recharge-welcome { align-items: flex-start; padding: 22px 17px; }
  .public-recharge-welcome-mark { flex-basis: 48px; width: 48px; height: 48px; font-size: 29px; }
  .public-recharge-welcome strong { font-size: 18px; }
}
.public-card-footer[data-step="4"] { display: none; }
.public-result-card { width: min(620px,100%); min-height: 400px; }
#result-message { min-height: 25px; color: #34445a; font-size: 16px; font-weight: 800; }
#result-message[data-level="warning"] { color: var(--warning); }
#result-message[data-level="error"] { color: var(--danger); }
.membership-dialog { width: min(430px,calc(100vw - 32px)); padding: 0; border: 0; border-radius: 8px; background: #fff; box-shadow: 0 22px 70px rgba(15,23,42,.2); }
.membership-dialog::backdrop { background: rgba(15,23,42,.38); }
.membership-dialog-body { padding: 30px 28px 26px; text-align: center; }
.membership-dialog-icon { width: 52px; height: 52px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--warning); font-size: 28px; font-weight: 900; }
.membership-dialog h2 { margin: 0 0 12px; font-size: 22px; }
.membership-dialog p { margin: 7px 0; color: var(--muted); line-height: 1.65; }
.membership-dialog .public-primary-button { width: 100%; margin-top: 20px; }
.public-result-timeline { width: min(520px,100%); margin: 8px 0 0; padding: 4px 0 4px 26px; list-style: none; text-align: left; }
.public-result-timeline li { position: relative; min-height: 38px; padding: 0 0 16px 18px; border-left: 2px solid #cfe6d5; color: #445266; }
.public-result-timeline li:last-child { min-height: 22px; padding-bottom: 0; border-left-color: transparent; }
.public-result-timeline li::before { position: absolute; top: 2px; left: -6px; width: 10px; height: 10px; content: ""; border: 2px solid #fff; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 1px #bfe4c7; }
.public-result-timeline li[data-level="error"] { color: var(--danger); border-left-color: #efb4ad; }
.public-result-timeline li[data-level="error"]::before { background: var(--danger); box-shadow: 0 0 0 1px #efb4ad; }
.public-result-timeline li[data-level="warning"]::before { background: var(--warning); }
.public-result-timeline strong, .public-result-timeline time { display: block; }
.public-result-timeline strong { font-size: 14px; line-height: 1.45; }
.public-result-timeline time { margin-top: 3px; color: #8a98a4; font-size: 11px; }

.public-stage--query { padding-top: 58px; }
.public-page-title--query { margin-bottom: 30px; text-align: center; }
.public-page-title--query h1 { margin: 0; color: var(--ink); font-size: 34px; }
.public-card--query { width: min(1120px,100%); }
.public-query-panel { padding: 34px; }
.public-query-form { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 14px; }
.public-query-input { height: 52px; min-height: 52px; max-height: 260px; display: block; padding: 12px 18px; resize: vertical; overflow-y: auto; line-height: 1.5; }
.public-query-input:placeholder-shown { overflow-y:hidden; resize:none; }
.public-query-form .public-primary-button { min-width: 138px; min-height: 52px; margin-bottom: 0; border-radius: 12px; }
.public-local-preview-button { display:block; margin:12px 0 0 auto; padding:8px 12px; border:1px dashed #b9d6bf; border-radius:8px; color:var(--green); background:#f7fbf8; font-size:12px; }
.public-query-result { margin-top: 28px; padding-top: 24px; border-top: 1px solid #e4efe6; }
.public-query-result-head { min-height: 42px; margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.public-query-result-head h2 { margin: 0; font-size: 20px; }
.public-query-result-head p { margin: 5px 0 0; color: #8290a0; font-size: 13px; }
.public-query-result-actions { display: flex; align-items: center; gap: 10px; }
.public-query-filters { display: inline-flex; padding: 3px; border: 1px solid #dceadf; border-radius: 8px; background: #f7fbf8; }
.public-query-filters button, .public-query-copy { min-height: 34px; padding: 0 13px; border: 0; border-radius: 6px; color: #607086; background: transparent; font-size: 13px; font-weight: 800; }
.public-query-filters button[data-active="true"] { color: #fff; background: var(--green); box-shadow: 0 3px 10px rgba(34,139,34,.16); }
.public-query-copy { border: 1px solid #cfe4d4; color: var(--green); background: #fff; }
.public-query-copy:hover { background: var(--green-soft); }
.public-query-table-scroll { width: 100%; overflow-x: auto; padding-bottom: 7px; outline: none; scrollbar-gutter: stable; -webkit-overflow-scrolling: touch; }
.public-query-table-scroll:focus-visible { box-shadow: 0 0 0 3px rgba(144,238,144,.2); }
.public-query-table { width: 100%; min-width: 860px; border-collapse: collapse; table-layout: fixed; }
.public-query-table th, .public-query-table td { padding: 14px 16px; border-bottom: 1px solid #e6efe8; text-align: center; vertical-align: middle; }
.public-query-table th { color: #65758a; background: #f7fbf8; font-size: 12px; font-weight: 850; white-space: nowrap; }
.public-query-table th:first-child { width: 30%; }.public-query-table th:nth-child(2) { width: 14%; }.public-query-table th:nth-child(3) { width: 33%; }.public-query-table th:nth-child(4) { width: 23%; }
.public-task-table th:first-child { width:30%; }.public-task-table th:nth-child(2) { width:29%; }.public-task-table th:nth-child(3) { width:23%; }.public-task-table th:nth-child(4) { width:18%; }
.public-query-table td { color: #334155; font-size: 14px; }
.public-query-table-code { color:#334155; font-family:"PingFang SC","Microsoft YaHei UI",system-ui,sans-serif; font-size:14px; font-weight:700; line-height:1.4; text-align:center; overflow-wrap:anywhere; }
.public-task-detail-strong { color:#334155; font-weight:700; }
.public-task-table th,.public-task-table td { padding-right:10px; padding-left:10px; text-align:center; white-space:nowrap; }
.public-query-table-status { display: inline-flex; align-items: center; gap: 7px; font-weight: 850; white-space: nowrap; }
.public-query-table-status::before { width: 8px; height: 8px; content: ""; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.public-query-table-status[data-status="used"] { color: var(--danger); }
.public-query-table-status[data-status="used"]::before { background: var(--danger); box-shadow: 0 0 0 4px #fff0f2; }
.public-query-table-status[data-status="completed"] { color: var(--green); }
.public-query-table-status[data-status="processing"] { color: #c17808; }
.public-query-table-status[data-status="processing"]::before { background: #e4a11b; box-shadow: 0 0 0 4px #fff7dc; }
.public-query-table-status[data-status="failed"],.public-query-table-status[data-status="cancelled"],.public-query-table-status[data-status="rejected_token_expired"],.public-query-table-status[data-status="rejected_subscription"] { color: var(--danger); }
.public-query-table-status[data-status="failed"]::before,.public-query-table-status[data-status="cancelled"]::before,.public-query-table-status[data-status="rejected_token_expired"]::before,.public-query-table-status[data-status="rejected_subscription"]::before { background: var(--danger); box-shadow: 0 0 0 4px #fff0f2; }
.public-query-empty { height: 100px; color: var(--muted) !important; text-align: center !important; }

@media (max-width:1100px) {
  #query-result .public-query-table-scroll { overflow-x:visible; padding-bottom:0; scrollbar-gutter:auto; }
  #query-result .public-task-table { width:100%; min-width:0; display:block; }
  #query-result .public-task-table thead { display:none; }
  #query-result .public-task-table tbody { width:100%; display:block; }
  #query-result .public-task-table tr { width:100%; display:block; padding:5px 14px; border-top:1px solid #e4eee6; border-bottom:1px solid #e4eee6; background:#fff; }
  #query-result .public-task-table tr+tr { margin-top:12px; }
  #query-result .public-task-table td[data-label] { width:100%; min-height:44px; display:flex; align-items:center; justify-content:center; gap:10px; padding:9px 0; border-bottom:1px solid #edf3ee; text-align:center; white-space:nowrap; }
  #query-result .public-task-table td[data-label]::before { content:attr(data-label) "："; color:#768698; font-size:12px; font-family:"PingFang SC","Microsoft YaHei UI",system-ui,sans-serif; font-weight:750; text-align:center; }
  #query-result .public-task-table td[data-label]:last-child { border-bottom:0; }
  #query-result .public-task-table .public-task-time-value { transform:none; }
  #query-result .public-task-table .public-query-empty { display:block; width:100%; padding:28px 12px; border-bottom:0; text-align:center; }
}

.video-guide-dialog { width: min(1120px,calc(100vw - 40px)); max-width: none; max-height: calc(100vh - 40px); padding: 0; border: 0; border-radius: 12px; overflow: visible; background: transparent; }
.video-guide-dialog::backdrop { background: rgba(17,24,39,.72); backdrop-filter: blur(5px); }
.video-guide-frame { position: relative; width: 100%; margin: auto; padding: 50px 16px 16px; border-radius: 12px; background: #101513; box-shadow: 0 28px 90px rgba(0,0,0,.38); }
.video-guide-frame[data-variant="mobile"] { width: min(430px,calc(100vw - 40px)); }
.video-guide-heading { position: absolute; top: 0; left: 0; right: 0; height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px 0 18px; color: #fff; }
.video-guide-heading h2 { margin: 0; font-size: 16px; }
.video-guide-heading button { width: 36px; height: 36px; padding: 0; border: 0; color: #fff; background: transparent; font-size: 28px; line-height: 1; }
.video-guide-frame video { width: 100%; aspect-ratio: 16 / 9; display: block; border-radius: 7px; background: #000; }
.video-guide-frame[data-variant="mobile"] video { aspect-ratio: 9 / 16; max-height: calc(100vh - 90px); object-fit: contain; }

@media (max-width: 700px) {
  .public-route-stage[data-step]:not([data-step="1"]) .public-stage:not(.public-stage--query) { padding-top: 18px; }
  .public-route-stage[data-step]:not([data-step="1"]) .public-card-header { padding-bottom: 20px; }
  .public-field-title-row { gap: 10px; }
  .public-availability { font-size: 12px; }
  .public-card-footer { flex-direction: row; align-items: center; }
  .public-card-footer > .public-primary-button { margin-left: auto; }
  .public-card-footer > button { flex: 0 1 auto; }
  .public-stage--query { padding-top: 34px; }
  .public-query-panel { padding: 22px 17px; }
  .public-query-form { grid-template-columns: 1fr; }
  .public-query-form .public-primary-button { width: 100%; min-height: 48px; margin-bottom: 0; border-radius: 999px; }
  .public-query-result-head { align-items: flex-start; flex-direction: column; }
  .public-query-result-actions { width: 100%; justify-content: space-between; overflow-x: auto; }
  .public-query-filters { flex: 0 0 auto; }
  .public-query-table { min-width: 730px; }
  .public-query-table th:first-child { width: 27%; }
  .public-query-table th:nth-child(2) { width: 15%; }
  .public-query-table th:nth-child(3) { width: 34%; }
  .public-query-table th:nth-child(4) { width: 24%; }
  .public-task-table { min-width: 700px; }
  .public-task-table th:first-child { width: 18%; }
  .public-task-table th:nth-child(2) { width: 29%; }
  .public-task-table th:nth-child(3) { width: 25%; }
  .public-task-table th:nth-child(4) { width: 28%; }
  .public-task-table th,.public-task-table td { padding-right:7px; padding-left:7px; text-align:center; white-space:nowrap; }
  .public-task-time-value { display:inline-block; transform:translateX(-38px); }
  #query-result .public-query-table-scroll { overflow-x:visible; padding-bottom:0; }
  #query-result .public-task-table { min-width:0; display:block; }
  #query-result .public-task-table thead { display:none; }
  #query-result .public-task-table tbody { display:block; }
  #query-result .public-task-table tr { display:block; padding:5px 14px; border-top:1px solid #e4eee6; border-bottom:1px solid #e4eee6; background:#fff; }
  #query-result .public-task-table tr+tr { margin-top:12px; }
  #query-result .public-task-table td[data-label] { width:100%; min-height:44px; display:flex; align-items:center; justify-content:center; gap:10px; padding:9px 0; border-bottom:1px solid #edf3ee; text-align:center; white-space:nowrap; }
  #query-result .public-task-table td[data-label]::before { content:attr(data-label) "："; color:#768698; font-size:12px; font-family:"PingFang SC","Microsoft YaHei UI",system-ui,sans-serif; font-weight:750; text-align:center; }
  #query-result .public-task-table td[data-label]:last-child { border-bottom:0; }
  #query-result .public-task-table .public-task-time-value { transform:none; }
  #query-result .public-task-table .public-query-empty { display:block; width:100%; padding:28px 12px; border-bottom:0; text-align:center; }
  .public-result-card { padding: 30px 17px; }
  .public-result-timeline { padding-left: 12px; }
  .video-guide-dialog { width: calc(100vw - 20px); max-height: calc(100vh - 20px); }
  .video-guide-frame { padding: 46px 8px 8px; }
  .video-guide-frame[data-variant="mobile"] { width: calc(100vw - 20px); }
}

@media (max-width:700px) {
  .public-route-stage[data-step="2"] .public-stage:not(.public-stage--query) { padding-top:8px; padding-bottom:20px; }
  .public-route-stage[data-step="2"] .public-card-header { padding-bottom:10px; }
  .public-route-stage[data-step="2"] .wizard-step { font-size:11px; }
  .public-route-stage[data-step="2"] .wizard-step-dot { width:38px; height:38px; font-size:16px; }
  .public-route-stage[data-step="2"] .wizard-steps::before { top:19px; }
  .public-route-stage[data-step="2"] .wizard-panel { padding:18px 16px; }
  .public-route-stage[data-step="2"] .public-input--token { height:108px; min-height:108px; max-height:140px; }
}

/* Filter, pagination, and payment-card refinements. */
.backstage-payment-summary-shell { display: none; margin-bottom: 20px; }
.admin-shell[data-current-view="payment"] .backstage-payment-summary-shell { display: block; }
.backstage-haifu-summary > div { border-color: var(--soft-line); background: #fff; }
.backstage-payment-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0; }
.backstage-payment-meta .backstage-payment-remaining { color: #b66b00; }
.backstage-payment-meta .backstage-payment-priority { color: var(--green); font-weight: 850; }
.backstage-payment-meta .backstage-payment-balance { color: #2f9e44; }
.backstage-payment-card--unusable { border-color: #e1e4e7; background: #f3f4f6; opacity: .72; }
.backstage-payment-card--unusable strong, .backstage-payment-card--unusable .backstage-payment-meta { color: #8a929a; }
.backstage-cdk-table th select { display: block; min-width: 74px; margin: 5px auto 0; padding: 3px 20px 3px 6px; border: 1px solid #d7e9dc; border-radius: 6px; color: #53647b; background: #fff; font-size: 11px; }
.backstage-queue-head-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 9px; margin-left: auto; }
.backstage-queue-head-actions select { min-height: 42px; padding: 0 28px 0 10px; border: 1px solid #cfe4d4; border-radius: 9px; color: #53647b; background: #fff; }
.backstage-queue-head-actions input { width: 230px; margin-left: 0; }
.backstage-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; padding-top: 14px; color: #64748b; font-size: 13px; }
.backstage-pagination button:disabled { color: #a8b3bd; border-color: #e5eaed; background: #f7f8f9; cursor: not-allowed; }
.backstage-table th, .backstage-table td { padding-block: 8px; }
.backstage-task-table .backstage-task-main-row td { padding-block: 8px; }
@media (max-width: 700px) {
  .backstage-queue-head-actions { width: 100%; justify-content: flex-start; margin: 10px 0 0; }
  .backstage-queue-head-actions input { flex: 1 1 160px; width: auto; }
  .backstage-cdk-table th select { max-width: 84px; }
}

.backstage-status-badge[data-status="completed"] { border-color: #f0b8b3; color: var(--danger); background: #fff3f2; }
.backstage-status-badge[data-status="unused"] { border-color: #bfe4c7; color: var(--green); background: var(--green-soft); }
.backstage-status-badge[data-status="retryable"] { border-color: #efd49b; color: #9a6200; background: #fff8df; }
.backstage-cdk-toolbar { flex-wrap: nowrap; align-items: center; overflow-x: auto; }
.backstage-cdk-toolbar h2, .backstage-cdk-toolbar .backstage-plain-button { flex: 0 0 auto; }
.backstage-cdk-toolbar #cdk-search { width: min(290px,32vw); min-width: 220px; }
.backstage-batch-actions { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; min-height: 40px; padding: 3px 5px 3px 11px; border: 1px solid #d9e9dd; border-radius: 8px; background: #fff; }
.backstage-batch-actions[hidden] { display: none; }
.backstage-batch-actions strong { min-width: 38px; color: #53647b; font-size: 12px; }
.backstage-batch-actions button { min-height: 32px; padding: 0 9px; border: 0; border-radius: 6px; color: var(--green); background: transparent; font-weight: 800; }
.backstage-batch-actions button:hover { background: var(--green-soft); }
.backstage-batch-actions button.danger { color: var(--danger); }
.backstage-batch-actions button.danger:hover { background: #fff3f2; }
.backstage-select-cell { width: 44px; padding-right: 6px !important; text-align: center !important; }
.backstage-select-cell input { width: 17px; height: 17px; margin: 0; accent-color: var(--green); cursor: pointer; }
.backstage-cdk-table tbody tr[data-selected="true"] { background: #f3faf5; }
.backstage-payment-head-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 9px; }
.backstage-payment-card .backstage-payment-failures { display: block; margin-top: 5px; color: var(--danger); font-weight: 850; }
.backstage-payment-total { display: grid; min-width: 142px; padding-right: 14px; text-align: right; }
.backstage-payment-total small { color: var(--muted); font-size: 11px; font-weight: 800; }
.backstage-payment-total strong { margin-top: 2px; color: var(--green); font-size: 24px; }
.backstage-auto-open-modal { width: min(560px,100%); }
.backstage-auto-open-modal > label { display: grid; gap: 6px; margin-top: 14px; color: #53647b; font-size: 12px; font-weight: 800; }
.backstage-auto-open-modal > label input { margin: 0; }
.backstage-auto-open-summary { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-top: 1px solid #edf3ee; border-bottom: 1px solid #edf3ee; }
.backstage-auto-open-summary span { color: var(--muted); font-weight: 800; }
.backstage-auto-open-summary strong { color: var(--green); font-size: 24px; }

@media (min-width: 701px) and (max-width: 900px) {
  .admin-view-panel[data-view-panel="payment"] > .backstage-panel-head {
    display: block;
  }
  .admin-view-panel[data-view-panel="payment"] > .backstage-panel-head h1 {
    margin-bottom: 14px;
    white-space: nowrap;
  }
  .admin-view-panel[data-view-panel="payment"] .backstage-payment-head-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 700px) {
  .backstage-cdk-toolbar { padding-bottom: 10px; }
  .backstage-cdk-toolbar #cdk-search { width: 240px; min-width: 240px; margin-left: auto; }
  .backstage-payment-head-actions { width: 100%; justify-content: flex-start; }
  .backstage-payment-total { margin-right: auto; padding-right: 0; text-align: left; }
  .backstage-worker-form { width: 100%; margin-left: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; }
  .backstage-worker-form input { width: 100%; min-width: 0; }
  .backstage-worker-form .backstage-primary-button { padding-inline: 14px; white-space: nowrap; }
}

@media (max-width: 430px) {
  .backstage-worker-form { grid-template-columns: 1fr; }
  .backstage-worker-form .backstage-primary-button { width: 100%; }
}

/* Back-office inventory and live-state alignment. */
.admin-shell[data-current-view="payment"] .backstage-stats-grid { display: none; }
.backstage-stat-card { min-height: 82px; padding: 14px 18px; }
.backstage-stat-card strong { margin-top: 4px; font-size: 27px; }
.backstage-stat-card strong[data-state="online"] { color: var(--green); }
.backstage-stat-card strong[data-state="offline"] { color: var(--danger); }
.backstage-haifu-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.backstage-haifu-summary > div { min-height: 82px; padding: 14px 18px; border: 1px solid var(--soft-line); border-radius: 12px; background: #fff; box-shadow: none; }
.backstage-haifu-summary small { display: block; color: var(--muted); font-weight: 800; }
.backstage-haifu-summary strong { display: block; margin-top: 6px; color: #263448; font-size: 25px; }
#payment-total-remaining { color: var(--green); font-weight: 900; }
.backstage-cdk-head-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 9px; margin-left: auto; }
.backstage-cdk-head-actions .backstage-count { flex: 0 0 auto; min-width: 64px; padding: 6px 10px; }
.backstage-cdk-head-actions input { width: 220px; min-height: 42px; padding: 0 12px; border: 1px solid #cfe4d4; border-radius: 9px; background: #fff; }
.backstage-cdk-head-actions .backstage-batch-actions { order: -1; }
.backstage-cdk-toolbar { display: none; }
.backstage-panel-head > input { width: min(280px, 100%); min-height: 42px; margin-left: auto; padding: 0 12px; border: 1px solid #cfe4d4; border-radius: 9px; }
.backstage-table th, .backstage-table td { text-align: center; vertical-align: middle; }
.backstage-cdk-table { min-width: 920px; table-layout: fixed; }
.backstage-cdk-table th:nth-child(1), .backstage-cdk-table td:nth-child(1) { width: 54px; }
.backstage-cdk-table th:nth-child(2), .backstage-cdk-table td:nth-child(2) { width: 27%; }
.backstage-cdk-table th:nth-child(3), .backstage-cdk-table td:nth-child(3) { width: 10%; }
.backstage-cdk-table th:nth-child(4), .backstage-cdk-table td:nth-child(4) { width: 13%; }
.backstage-cdk-table th:nth-child(5), .backstage-cdk-table td:nth-child(5) { width: 15%; }
.backstage-cdk-table th:nth-child(6), .backstage-cdk-table td:nth-child(6) { width: 15%; }
.backstage-cdk-table th:nth-child(7), .backstage-cdk-table td:nth-child(7) { width: 12%; }
.backstage-cdk-table td:nth-child(2), .backstage-cdk-table .backstage-copy-code { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.backstage-note-cell { white-space: nowrap !important; }
.backstage-note-tag { display: inline-block; max-width: 5em; overflow: hidden; padding: 4px 9px; border-radius: 999px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.backstage-note-tag[data-color="0"] { color: #2563eb; background: #eff6ff; }
.backstage-note-tag[data-color="1"] { color: #047857; background: #ecfdf5; }
.backstage-note-tag[data-color="2"] { color: #b45309; background: #fffbeb; }
.backstage-note-tag[data-color="3"] { color: #9333ea; background: #faf5ff; }
.backstage-note-tag[data-color="4"] { color: #be123c; background: #fff1f2; }
.backstage-note-tag[data-color="5"] { color: #0f766e; background: #f0fdfa; }
.backstage-task-table { min-width: 1240px; table-layout: fixed; }
.backstage-task-table th:nth-child(1), .backstage-task-table td:nth-child(1) { width: 16%; }
.backstage-task-table th:nth-child(2), .backstage-task-table td:nth-child(2) { width: 19%; }
.backstage-task-table th:nth-child(3), .backstage-task-table td:nth-child(3) { width: 9%; }
.backstage-task-table th:nth-child(4), .backstage-task-table td:nth-child(4) { width: 7%; }
.backstage-task-table th:nth-child(5), .backstage-task-table td:nth-child(5) { width: 17%; min-width: 0; max-width: none; white-space: normal; }
.backstage-task-table th:nth-child(6), .backstage-task-table td:nth-child(6) { width: 8%; min-width: 0; max-width: none; white-space: nowrap; }
.backstage-task-table th:nth-child(7), .backstage-task-table td:nth-child(7) { width: 10%; white-space: nowrap; }
.backstage-task-table th:nth-child(8), .backstage-task-table td:nth-child(8) { width: 14%; }
.backstage-product-tag { display:inline-flex; align-items:center; justify-content:center; min-width:44px; padding:5px 10px; border:1px solid #cfe5d4; border-radius:999px; color:#24752b; background:#f0faf2; font-size:12px; font-weight:800; line-height:1; }
.backstage-product-tag[data-product="go"] { border-color:#b9ddf4; color:#176c9a; background:#eef8ff; }
.backstage-task-current-state { white-space: normal; }
.backstage-task-current-state > span { display: -webkit-box; max-height: 2.9em; overflow: hidden; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.45; text-align: center; }
.backstage-task-duration { color: #42566f; font-weight: 800; text-align: center; }
.backstage-copy-value { max-width: none; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; }
.backstage-action-grid .backstage-table-action:disabled { color: #a8b3bd; border-color: #e5eaed; background: #f7f8f9; cursor: not-allowed; }
.backstage-form #cdk-note-new { margin-top: 0; }
@media (max-width: 700px) {
  .admin-view-panel[data-view-panel="cards"] .backstage-panel-head { display: block; }
  .admin-view-panel[data-view-panel="cards"] .backstage-panel-head h1 { white-space: nowrap; }
  .admin-view-panel[data-view-panel="cards"] .backstage-cdk-head-actions { margin-left: 0; }
  .backstage-haifu-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .backstage-haifu-summary > div { min-height: 72px; padding: 12px; }
  .backstage-haifu-summary strong { font-size: 20px; }
  .backstage-cdk-head-actions { width: 100%; justify-content: flex-start; margin-top: 10px; }
  .backstage-cdk-head-actions input { flex: 1 1 180px; width: auto; min-width: 150px; }
  .backstage-panel-head > input { width: 100%; margin: 8px 0 0; }
  .backstage-panel-head:has(> input) { display: block; }
}

/* Back-office header controls and compact filter menus. */
.backstage-title-tools { display: flex; align-items: center; gap: 12px; min-width: 0; }
.backstage-title-tools h1 { margin: 5px 0 8px; }
.backstage-title-tools .backstage-plain-button { min-height: 34px; padding: 0 12px; font-size: 12px; }
.backstage-head-search { width: min(280px, 100%); min-height: 42px; margin-left: auto; padding: 0 13px; border: 1px solid #cfe4d4; border-radius: 11px; color: var(--ink); background: #fbfefc; box-shadow: 0 5px 14px rgba(34,139,34,.06); outline: none; }
.backstage-head-search:focus, .backstage-search-input:focus, .backstage-cdk-head-actions input:focus { border-color: #8fc89b; box-shadow: 0 0 0 3px rgba(34,139,34,.10); }
.backstage-filter-heading { display: inline-flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; }
.backstage-filter-heading select { display: inline-block !important; width: 21px; min-width: 21px !important; height: 21px; min-height: 21px; margin: 0 !important; padding: 0; border: 1px solid #b9d9c0; border-radius: 50%; color: transparent; background-color: #f3fbf5; background-image: linear-gradient(45deg, transparent 50%, #228b22 50%), linear-gradient(135deg, #228b22 50%, transparent 50%); background-position: calc(50% - 3px) 50%, calc(50% + 2px) 50%; background-repeat: no-repeat; background-size: 5px 5px, 5px 5px; appearance: none; cursor: pointer; }
.backstage-filter-heading select:focus-visible { outline: 2px solid rgba(34,139,34,.35); outline-offset: 2px; }
.backstage-queue-head-actions .backstage-filter-select, .backstage-queue-head-actions .backstage-search-input { min-height: 42px; border: 1px solid #cfe4d4; border-radius: 11px; color: #53647b; background-color: #fbfefc; box-shadow: 0 5px 14px rgba(34,139,34,.06); outline: none; }
.backstage-queue-head-actions .backstage-filter-select { min-width: 112px; padding: 0 31px 0 12px; background-image: linear-gradient(45deg, transparent 50%, #228b22 50%), linear-gradient(135deg, #228b22 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-repeat: no-repeat; background-size: 5px 5px, 5px 5px; appearance: none; }
.backstage-queue-head-actions .backstage-search-input { width: 230px; padding: 0 13px; }
.backstage-queue-panel-head { align-items: center; }
.backstage-queue-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; min-width: 0; }
.backstage-queue-heading h1 { flex: 0 0 auto; }
.backstage-status-segments { display: inline-flex; align-items: center; gap: 3px; padding: 4px; border: 1px solid #dce9df; border-radius: 11px; background: #f5f8f6; }
.backstage-status-segments button { min-height: 34px; padding: 0 14px; border: 0; border-radius: 8px; color: #65758a; background: transparent; font-size: 13px; font-weight: 750; white-space: nowrap; cursor: pointer; transition: color .16s ease, background-color .16s ease, box-shadow .16s ease; }
.backstage-status-segments button:hover { color: var(--green); background: rgba(255,255,255,.72); }
.backstage-status-segments button[data-active="true"] { color: #fff; background: var(--green); box-shadow: 0 4px 10px rgba(34,139,34,.18); }
.backstage-status-segments button:focus-visible { outline: 2px solid rgba(34,139,34,.35); outline-offset: 2px; }
.backstage-payment-card strong .backstage-payment-api-label { color: #53647b; font-size: .78em; font-weight: 700; opacity: .6; }
#payment-summary-shell { background: transparent; }
.admin-view-panel[data-view-panel="monitoring"] .backstage-monitor-switches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 12px 18px; margin: 18px 0 14px; padding: 0; border: 0; background: transparent; }
.admin-view-panel[data-view-panel="monitoring"] .backstage-monitoring-head { align-items: center; }
.admin-view-panel[data-view-panel="monitoring"] .backstage-monitoring-head .backstage-plain-button { flex: 0 0 auto; }
.admin-view-panel[data-view-panel="monitoring"] .backstage-monitor-switches .backstage-switch { min-height: 48px; display: flex; align-items: center; padding: 0 14px; border: 1px solid #e1eee4; border-radius: 11px; background: #fbfefc; }
.admin-view-panel[data-view-panel="monitoring"] .backstage-monitor-switches .backstage-switch input[type="checkbox"] { width: 34px; min-width: 34px; height: 20px; min-height: 20px; flex: 0 0 34px; margin: 0; padding: 0; border: 1px solid #c8d8cc; border-radius: 999px; appearance: none; background-color: #e7eee9; background-image: radial-gradient(circle, #fff 0 6px, transparent 6.5px); background-position: 1px center; background-repeat: no-repeat; background-size: 16px 16px; box-shadow: inset 0 1px 2px rgba(31,54,38,.08); cursor: pointer; transition: background-color .18s ease, background-position .18s ease, border-color .18s ease; }
.admin-view-panel[data-view-panel="monitoring"] .backstage-monitor-switches .backstage-switch input[type="checkbox"]:checked { border-color: var(--green); background-color: var(--green); background-position: 15px center; }
.admin-view-panel[data-view-panel="monitoring"] .backstage-monitor-switches .backstage-switch input[type="checkbox"]:focus-visible { outline: 3px solid rgba(34,139,34,.18); outline-offset: 2px; }
.admin-view-panel[data-view-panel="monitoring"] .backstage-monitor-switches .backstage-switch input[type="checkbox"]:disabled { opacity: .55; cursor: not-allowed; }
.admin-view-panel[data-view-panel="monitoring"] .backstage-smtp-form { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; gap: 14px; margin: 0 0 24px; padding: 18px; border: 1px solid #e1eee4; border-radius: 12px; background: #fbfefc; }
.admin-view-panel[data-view-panel="monitoring"] .backstage-smtp-form > label.grow { grid-column: span 2; flex: none; }
.admin-view-panel[data-view-panel="monitoring"] .backstage-smtp-form .backstage-form-actions { grid-column: 1 / -1; justify-content: flex-end; margin-left: 0; padding-top: 3px; }
.admin-view-panel[data-view-panel="monitoring"] .backstage-toolbar { margin-top: 20px; }
@media (max-width: 700px) {
  .admin-view-panel[data-view-panel="queue"] .backstage-panel-head { display: block; }
  .admin-view-panel[data-view-panel="queue"] .backstage-panel-head h1 { white-space: nowrap; }
  .backstage-queue-heading { display: block; }
  .backstage-status-segments { width: 100%; margin: 8px 0 12px; overflow-x: auto; }
  .backstage-status-segments button { flex: 1 0 auto; min-height: 36px; padding-inline: 10px; }
  .backstage-title-tools { justify-content: space-between; }
  .backstage-head-search { width: 220px; }
  .admin-view-panel[data-view-panel="monitoring"] .backstage-monitor-switches { grid-template-columns: 1fr; }
  .admin-view-panel[data-view-panel="monitoring"] .backstage-monitoring-head { align-items: center; flex-direction: row; }
  .admin-view-panel[data-view-panel="monitoring"] .backstage-monitoring-head h1 { white-space: nowrap; }
  .admin-view-panel[data-view-panel="monitoring"] .backstage-monitoring-head .backstage-plain-button { min-height: 38px; padding-inline: 12px; font-size: 12px; }
  .admin-view-panel[data-view-panel="monitoring"] .backstage-smtp-form { grid-template-columns: 1fr 1fr; }
  .admin-view-panel[data-view-panel="monitoring"] .backstage-smtp-form > label.grow { grid-column: 1 / -1; }
  .admin-view-panel[data-view-panel="monitoring"] .backstage-smtp-form .backstage-form-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .backstage-queue-head-actions .backstage-search-input { flex: 1 1 160px; width: auto; }
}

/* Final visual overrides for payment cards and compact header arrows. */
.backstage-payment-card { grid-template-columns: 1fr auto; padding: 16px 0; border: 0; border-bottom: 1px solid #edf3ee; border-radius: 0; background: transparent; }
.backstage-payment-card--unusable { border: 1px solid #e1e4e7; border-radius: 10px; background: #f3f4f6; }
.backstage-filter-heading select { width: 21px !important; min-width: 21px !important; height: 21px; min-height: 21px; padding: 0 !important; color: transparent; font-size: 11px !important; }
.backstage-filter-heading select option { color: #53647b; background: #fff; font-size: 13px; }
.backstage-filter-heading { position: relative; padding-right: 24px; }
.backstage-filter-heading::after { position: absolute; top: 50%; right: 3px; width: 7px; height: 7px; border-right: 2px solid #228b22; border-bottom: 2px solid #228b22; content: ''; transform: translateY(-65%) rotate(45deg); pointer-events: none; }
.backstage-filter-heading select { position: absolute; top: 50%; right: 0; z-index: 1; width: 21px !important; min-width: 21px !important; height: 21px; min-height: 21px; border: 0; opacity: 0; transform: translateY(-50%); appearance: auto; }
@media (max-width: 700px) {
  .backstage-payment-card { grid-template-columns: 1fr; }
}

/* Compact four-card overview. */
.backstage-stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) {
  .backstage-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .backstage-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Invitation rebate */
.public-page-title--referral { max-width: 900px; margin-inline: auto; text-align: left; }
.public-page-title--referral > span,.referral-kicker { display:block; color:#239329; font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.public-page-title--referral h1 { margin:8px 0 8px; }
.public-page-title--referral p { margin:0; color:#75869a; line-height:1.7; }
.public-card--referral { max-width:900px; margin-inline:auto; overflow:hidden; }
.referral-shell { padding:34px 38px 40px; }
.referral-entry { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,.8fr); gap:36px; align-items:end; padding:30px; border:1px solid #dceee0; border-radius:20px; background:linear-gradient(135deg,#f5fff7 0%,#fff 72%); }
.referral-entry h2,.referral-identity h2,.referral-records-head h3,.referral-query-block h3 { margin:7px 0 6px; color:#263446; }
.referral-entry p,.referral-query-block p { margin:0; color:#74859a; line-height:1.65; }
.referral-inline-form { display:flex; gap:10px; align-items:center; }
.referral-inline-form .public-input { min-width:0; height:48px; }
.referral-inline-form button { flex:0 0 auto; white-space:nowrap; }
.referral-dashboard { animation:referralReveal .28s ease-out; }
@keyframes referralReveal { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:none } }
.referral-identity { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:22px; }
.referral-identity h2 { font-size:21px; word-break:break-all; }
.referral-active-badge { display:inline-flex; align-items:center; gap:7px; color:#238b29; font-size:13px; font-weight:700; background:#effaf1; border:1px solid #cfe9d3; border-radius:999px; padding:8px 12px; }
.referral-active-badge i { width:7px; height:7px; border-radius:50%; background:#2aa332; box-shadow:0 0 0 4px rgba(42,163,50,.12); }
.referral-share-grid { display:grid; grid-template-columns:minmax(0,1fr) 185px; gap:14px; }
.referral-share-main,.referral-code-card { border:1px solid #deebe1; border-radius:16px; background:#fbfdfb; padding:18px; }
.referral-share-main label,.referral-code-card span { display:block; margin-bottom:9px; color:#75869a; font-size:13px; font-weight:700; }
.referral-copy-field { display:flex; gap:8px; }
.referral-copy-field input { width:100%; min-width:0; border:0; background:transparent; color:#2c3b4e; font-size:15px; outline:none; }
.referral-copy-field button,.referral-code-card button { border:0; border-radius:9px; background:#229329; color:#fff; padding:9px 13px; font-weight:700; cursor:pointer; white-space:nowrap; }
.referral-code-card { display:grid; grid-template-columns:1fr auto; align-items:center; }
.referral-code-card span { grid-column:1/-1; }
.referral-code-card strong { color:#176e22; font-size:25px; letter-spacing:.08em; }
.referral-code-card button { color:#218d29; background:#edf8ef; }
.referral-stats { display:grid; grid-template-columns:repeat(3,1fr); margin:18px 0 28px; border:1px solid #e4ece6; border-radius:16px; overflow:hidden; }
.referral-stats div { padding:19px 22px; background:#fff; }
.referral-stats div+div { border-left:1px solid #e4ece6; }
.referral-stats span { display:block; color:#7a899b; font-size:13px; }
.referral-stats strong { display:block; margin-top:6px; color:#273648; font-size:25px; }
.referral-records-head { display:flex; align-items:end; justify-content:space-between; margin-bottom:12px; }
.referral-records-head small { color:#8b98a8; }
.referral-table-scroll { overflow-x:hidden; border:1px solid #e3ebe5; border-radius:14px; }
.public-query-table.referral-table { min-width:0; table-layout:fixed; }
.referral-table th,.referral-table td { padding:11px 8px; font-size:12px; line-height:1.45; }
.referral-table th { white-space:normal; }
.referral-table th:first-child { width:29%; }
.referral-table th:nth-child(2) { width:13%; }
.referral-table th:nth-child(3) { width:27%; }
.referral-table th:nth-child(4) { width:13%; }
.referral-table th:nth-child(5) { width:18%; }
.referral-table td:first-child,.referral-table td:nth-child(3) { overflow-wrap:anywhere; word-break:break-word; }
.referral-table td:nth-child(2),.referral-table td:nth-child(4),.referral-table td:nth-child(5) { white-space:nowrap; }
.referral-table code { color:#176e22; font:700 12px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace; }
.referral-result { display:inline-flex; border-radius:999px; padding:4px 7px; font-size:11px; font-weight:700; }
.referral-result[data-status="eligible"] { color:#198126; background:#eaf8ed; }
.referral-result[data-status="ineligible"] { color:#9a6521; background:#fff5e6; }
.referral-query-block { display:grid; grid-template-columns:minmax(0,1fr) minmax(330px,.8fr); gap:30px; align-items:center; margin-top:28px; padding-top:26px; border-top:1px solid #e6ece7; }
.backstage-muted { margin:5px 0 0; color:#8190a2; font-size:13px; }
.backstage-referral-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:22px; }
.backstage-referral-settings { display:grid; grid-template-columns:150px minmax(180px,300px) auto; align-items:end; gap:16px; margin:24px 0 18px; padding:18px 0; border-top:1px solid #e4ebe5; border-bottom:1px solid #e4ebe5; }
.backstage-referral-settings-intro,.backstage-plan-price-grid { grid-column:1/-1; }
.backstage-plan-price-grid { display:grid; grid-template-columns:repeat(4,minmax(130px,1fr)); gap:12px; }
.backstage-plan-price-grid label { min-width:0; }
.backstage-referral-settings > div strong,.backstage-referral-settings > div span { display:block; }
.backstage-referral-settings > div strong { color:#263647; font-size:16px; }
.backstage-referral-settings > div span { margin-top:5px; color:#7a8999; font-size:12px; line-height:1.55; }
.backstage-referral-settings label > span:first-child { display:block; margin-bottom:6px; color:#53647b; font-size:12px; font-weight:800; }
.backstage-referral-settings select { width:100%; height:43px; padding:0 10px; border:1px solid #cfe4d4; border-radius:9px; color:#35465a; background:#fff; }
.backstage-money-input { display:flex; align-items:center; height:43px; padding:0 11px; border:1px solid #cfe4d4; border-radius:9px; background:#fff; }
.backstage-money-input b { color:#228b22; }
.backstage-money-input input { width:100%; min-width:0; height:40px; padding:0 7px; border:0; outline:0; background:transparent; }
.backstage-reward-range { display:grid; grid-template-columns:1fr auto 1fr; align-items:end; gap:8px; }
.backstage-reward-range[hidden] { display:none; }
.backstage-reward-range i { padding-bottom:13px; color:#8a98a6; font-style:normal; font-size:12px; }
.backstage-referral-stats div { padding:18px 20px; border:1px solid #e0ebe2; border-radius:14px; background:#fbfdfb; }
.backstage-referral-stats span { display:block; color:#7a8999; font-size:12px; }
.backstage-referral-stats strong { display:block; margin-top:5px; color:#263647; font-size:24px; }
.backstage-referral-layout { display:grid; gap:26px; }
.backstage-referral-layout > section { border-top:1px solid #e4ebe5; padding-top:20px; }
.backstage-subhead { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:12px; }
.backstage-subhead h2 { margin:0; font-size:17px; }
.backstage-subhead input { width:min(340px,50vw); }
.backstage-inline-form { display:grid; grid-template-columns:minmax(220px,1fr) minmax(260px,1.3fr) auto; gap:10px; }
.backstage-chip-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.backstage-chip-list span { display:inline-flex; align-items:center; gap:9px; padding:8px 10px; border:1px solid #eadfcf; border-radius:999px; background:#fff9f1; color:#6f583a; font-size:12px; }
.backstage-chip-list button { border:0; background:transparent; color:#a06827; cursor:pointer; font-weight:800; }
@media (max-width:760px) { .referral-shell{padding:24px 18px}.referral-entry,.referral-query-block{grid-template-columns:1fr}.referral-share-grid{grid-template-columns:1fr}.referral-inline-form{align-items:stretch;flex-direction:column}.referral-inline-form button{width:100%}.referral-stats div{padding:15px 12px}.referral-stats strong{font-size:21px}.referral-records-head{align-items:flex-start;flex-direction:column;gap:5px} }
@media (max-width:760px) { .backstage-referral-settings{grid-template-columns:1fr}.backstage-plan-price-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.backstage-referral-settings .backstage-primary-button{width:100%}.backstage-referral-stats{grid-template-columns:repeat(2,1fr)}.backstage-inline-form{grid-template-columns:1fr}.backstage-subhead{align-items:flex-start;flex-direction:column}.backstage-subhead input{width:100%} }

/* Referral admin workspace */
.admin-shell[data-current-view="referrals"] .backstage-stats-grid { display:none; }
.admin-shell[data-current-view="referrals"] .backstage-panel { margin-top:0; }
.backstage-referral-head { position:relative; align-items:center; padding-bottom:24px; border-bottom:1px solid #e8f0ea; }
.backstage-referral-head-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:9px; }
.backstage-icon-button { width:42px; height:42px; display:grid; place-items:center; flex:none; border:1px solid #d7e8db; border-radius:50%; color:var(--green); background:#fff; font-size:20px; cursor:pointer; }
.backstage-referral-stats { margin:22px 0 18px; }
.backstage-referral-stats div { padding:15px 18px; border-radius:11px; background:#fbfefc; }
.backstage-referral-stats strong { font-size:27px; }
.backstage-referral-tabs { display:flex; align-items:center; gap:4px; margin:0 0 22px; padding:4px; border-radius:11px; background:#f2f7f3; }
.backstage-referral-tabs button { min-height:42px; flex:0 0 auto; padding:0 18px; border:0; border-radius:8px; color:#68788a; background:transparent; font-size:13px; font-weight:800; cursor:pointer; }
.backstage-referral-tabs button[data-active="true"] { color:#1d7427; background:#fff; box-shadow:0 2px 8px rgba(25,65,35,.08); }
.backstage-referral-tab-panel[hidden] { display:none; }
.backstage-referral-toolbar { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:14px; }
.backstage-referral-toolbar h2 { margin:0 0 4px; font-size:18px; }
.backstage-referral-toolbar p { color:#8190a2; font-size:12px; }
.backstage-referral-toolbar > div:last-child { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.backstage-referral-toolbar input,.backstage-referral-toolbar select { min-height:40px; padding:0 12px; border:1px solid #d4e6d8; border-radius:8px; color:#35465a; background:#fff; box-sizing:border-box; }
.backstage-referral-toolbar input { width:min(310px,32vw); }
.backstage-referral-table-scroll { border-radius:9px; }
.backstage-reward-code-table { min-width:1180px; }
.backstage-invite-record-table { min-width:1220px; }
.backstage-profile-table { min-width:760px; }
.backstage-reward-code { color:#176e22; font:700 12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; cursor:copy; }
.backstage-reward-code:hover { text-decoration:underline; }
.backstage-status-badge[data-status="manual"] { border-color:#d8e5f6; color:#436b9b; background:#f2f7fd; }
.backstage-status-badge[data-status="invitation"] { border-color:#cce7d2; color:#267631; background:#f0faf2; }
.backstage-status-badge[data-status="processing"] { border-color:#eadfc8; color:#8a651f; background:#fff9ed; }
.backstage-status-badge[data-status="none"] { color:#8a98a6; background:#f6f8f7; }
.backstage-referral-dialog { width:min(760px,100%); }
.backstage-referral-dialog label { display:grid; gap:7px; color:#53647b; font-size:12px; font-weight:800; }
.backstage-referral-dialog label > input,.backstage-referral-dialog label > select { width:100%; min-height:43px; margin:0; padding:0 12px; border:1px solid #cfe4d4; border-radius:9px; box-sizing:border-box; color:#35465a; background:#fff; }
.backstage-dialog-field-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:24px 0 14px; }
.backstage-dialog-note { margin:14px 0 0 !important; padding:12px 14px; border-radius:9px; color:#667789 !important; background:#f6faf7; font-size:12px; line-height:1.6; }
.backstage-referral-dialog .backstage-plan-price-grid { margin-top:24px; }
.backstage-plan-settings-list { display:grid; gap:0; margin-top:22px; border-top:1px solid #e4ede6; }
.backstage-plan-setting-row { display:grid; grid-template-columns:minmax(230px,1fr) minmax(220px,280px); align-items:center; gap:24px; min-height:72px; padding:10px 0; border-bottom:1px solid #e4ede6; }
.backstage-plan-switch { position:relative; display:flex !important; grid-template-columns:none !important; align-items:center; gap:13px !important; min-width:0; cursor:pointer; }
.backstage-plan-switch > input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.backstage-switch-track { position:relative; width:42px; height:24px; flex:0 0 auto; border:1px solid #cbd9ce; border-radius:999px; background:#e9efeb; transition:background-color .18s ease,border-color .18s ease; }
.backstage-switch-track i { position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(33,56,40,.24); transition:transform .18s ease; }
.backstage-plan-switch > input:checked + .backstage-switch-track { border-color:#23942c; background:#23942c; }
.backstage-plan-switch > input:checked + .backstage-switch-track i { transform:translateX(18px); }
.backstage-plan-switch > input:focus-visible + .backstage-switch-track { outline:3px solid rgba(35,148,44,.18); outline-offset:2px; }
.backstage-plan-switch-copy { display:grid; gap:2px; min-width:0; }
.backstage-plan-switch-copy strong { color:#263647; font-size:15px; line-height:1.25; }
.backstage-plan-switch-copy small { color:#8a98a6; font-size:11px; font-weight:600; }
.backstage-plan-price-field { display:grid !important; grid-template-columns:72px minmax(0,1fr) !important; align-items:center; gap:10px !important; }
.backstage-plan-price-field > span:first-child { margin:0 !important; white-space:nowrap; }
.backstage-referral-setting-row { display:grid; grid-template-columns:160px 1fr; align-items:end; gap:14px; margin-top:18px; }
.backstage-referral-setting-row .backstage-reward-range { grid-column:auto; }
.backstage-referral-dialog .backstage-money-input { width:100%; box-sizing:border-box; }
.backstage-referral-dialog .backstage-money-input input { margin:0; }
#referral-exclusion-dialog .backstage-inline-form { margin-top:24px; }
#referral-exclusion-dialog .backstage-chip-list { max-height:300px; overflow:auto; align-content:flex-start; }

@media (max-width:900px) {
  .backstage-referral-head { align-items:flex-start; }
  .backstage-referral-head-actions { max-width:520px; }
  .backstage-referral-toolbar { align-items:flex-start; flex-direction:column; }
  .backstage-referral-toolbar > div:last-child { width:100%; justify-content:flex-start; }
  .backstage-referral-toolbar input { flex:1 1 220px; width:auto; }
}

@media (max-width:700px) {
  .admin-shell[data-current-view="referrals"] .backstage-main { width:calc(100% - 20px); margin-top:12px; }
  .admin-shell[data-current-view="referrals"] .backstage-panel { padding:18px 12px; }
  .backstage-referral-head { display:block; padding-bottom:17px; }
  .backstage-referral-head h1 { margin-top:0; }
  .backstage-referral-head-actions { display:grid; grid-template-columns:1fr 1fr; max-width:none; margin-top:16px; }
  .backstage-referral-head-actions .backstage-primary-button,.backstage-referral-head-actions .backstage-plain-button { min-width:0; padding:0 10px; border-radius:9px; font-size:12px; }
  .backstage-referral-head-actions .backstage-icon-button { position:absolute; top:16px; right:14px; width:36px; height:36px; }
  .backstage-referral-stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:16px 0; }
  .backstage-referral-stats div { padding:13px 14px; }
  .backstage-referral-stats strong { font-size:23px; }
  .backstage-referral-tabs { width:100%; overflow-x:auto; margin-bottom:17px; }
  .backstage-referral-tabs button { min-height:39px; padding:0 14px; }
  .backstage-referral-toolbar { gap:12px; }
  .backstage-referral-toolbar > div:last-child { display:grid; grid-template-columns:1fr 1fr; }
  .backstage-referral-toolbar input { width:100%; grid-column:1/-1; }
  .backstage-referral-table-scroll { overflow:visible; border:0; }
  .backstage-referral-table-scroll .backstage-table { min-width:0; border:0; }
  .backstage-referral-table-scroll thead { display:none; }
  .backstage-referral-table-scroll tbody,.backstage-referral-table-scroll tr,.backstage-referral-table-scroll td { display:block; width:100%; box-sizing:border-box; }
  .backstage-referral-table-scroll tr { margin-bottom:10px; padding:7px 12px; border:1px solid #e0ece3; border-radius:10px; background:#fff; }
  .backstage-referral-table-scroll td { min-height:38px; display:flex; align-items:center; justify-content:flex-end; gap:14px; padding:9px 0; border-bottom:1px solid #eef3ef; text-align:right; white-space:normal; overflow-wrap:anywhere; }
  .backstage-referral-table-scroll td:last-child { border-bottom:0; }
  .backstage-referral-table-scroll td::before { content:attr(data-label); margin-right:auto; flex:0 0 88px; color:#7a8998; font-size:11px; font-weight:700; text-align:left; }
  .backstage-referral-table-scroll .backstage-empty-cell { min-height:90px; justify-content:center; text-align:center !important; }
  .backstage-referral-table-scroll .backstage-empty-cell::before { display:none; }
  .backstage-referral-dialog { width:100%; max-height:calc(100svh - 20px); padding:20px 16px; }
  .backstage-dialog-field-grid,.backstage-referral-dialog .backstage-plan-price-grid,.backstage-referral-setting-row { grid-template-columns:1fr; }
  .backstage-plan-setting-row { grid-template-columns:minmax(0,1fr) minmax(132px,42%); gap:10px; min-height:66px; }
  .backstage-plan-price-field { grid-template-columns:1fr !important; gap:4px !important; }
  .backstage-plan-price-field > span:first-child { font-size:10px; }
  .backstage-referral-setting-row .backstage-reward-range { grid-column:auto; }
  #referral-exclusion-dialog .backstage-inline-form { display:grid; grid-template-columns:1fr; }
}

/* Public help center */
.public-faq-page { width:min(1180px,100%); margin:0 auto; padding-top:54px; }
.public-faq-hero { max-width:820px; margin:0 auto 45px; text-align:center; }
.public-faq-hero > span { display:block; color:var(--green); font-size:12px; font-weight:800; letter-spacing:.14em; }
.public-faq-hero h1 { margin:12px 0 0; color:var(--ink); font-size:clamp(34px,4.2vw,48px); line-height:1.18; letter-spacing:-.035em; }
.public-faq-hero > p { margin:15px 0 0; color:#748396; font-size:16px; line-height:1.7; }
.public-faq-status { width:fit-content; max-width:100%; display:flex; align-items:center; gap:10px; margin:24px auto 0; padding:11px 16px; border:1px solid #d9eadc; border-radius:999px; color:#58697b; background:rgba(255,255,255,.82); box-shadow:0 8px 24px rgba(31,92,47,.05); font-size:13px; }
.public-faq-status i { width:22px; height:22px; display:grid; flex:0 0 auto; place-items:center; border-radius:50%; color:#fff; background:var(--green); font-style:normal; font-weight:800; }
.public-faq-status strong { color:#2d3c4e; }
.public-faq-workspace { display:grid; grid-template-columns:210px minmax(0,1fr); gap:48px; align-items:start; }
.public-faq-categories { position:sticky; top:98px; display:grid; gap:4px; padding-top:2px; }
.public-faq-categories button { min-height:46px; padding:0 15px; border:0; border-left:3px solid transparent; border-radius:0 9px 9px 0; color:#718195; background:transparent; text-align:left; font:650 14px/1 inherit; cursor:pointer; transition:color .18s ease,background-color .18s ease,border-color .18s ease; }
.public-faq-categories button,.public-faq-item summary { -webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none; touch-action:manipulation; }
.public-faq-categories button::selection,.public-faq-item summary::selection,.public-faq-item summary *::selection { color:inherit; background:transparent; }
.public-faq-categories button:focus,.public-faq-item summary:focus { outline:none; }
.public-faq-categories button:focus-visible,.public-faq-item summary:focus-visible { outline:2px solid rgba(34,139,34,.28); outline-offset:-2px; }
.public-faq-categories button:hover { color:#2c5234; background:#f2f9f3; }
.public-faq-categories button[data-active="true"] { border-left-color:var(--green); color:var(--green); background:#edf8ef; font-weight:750; }
.public-faq-list { border-top:1px solid #dbe7de; }
.public-faq-item { border-bottom:1px solid #dbe7de; }
.public-faq-item[hidden] { display:none; }
.public-faq-item summary { min-height:78px; display:grid; grid-template-columns:42px minmax(0,1fr) 28px; align-items:center; gap:14px; padding:0 7px; color:#263648; cursor:pointer; list-style:none; }
.public-faq-item summary::-webkit-details-marker { display:none; }
.public-faq-item summary b { color:#a6b4aa; font:650 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; }
.public-faq-item summary span { font-size:17px; font-weight:700; }
.public-faq-item summary i { position:relative; width:28px; height:28px; border-radius:50%; background:#f2f8f3; }
.public-faq-item summary i::before,.public-faq-item summary i::after { position:absolute; top:50%; left:50%; width:11px; height:1.5px; border-radius:999px; background:#4b7653; content:""; transform:translate(-50%,-50%); transition:transform .2s ease; }
.public-faq-item summary i::after { transform:translate(-50%,-50%) rotate(90deg); }
.public-faq-item[open] summary { color:var(--green); }
.public-faq-item[open] summary i::after { transform:translate(-50%,-50%) rotate(0); }
.public-faq-item > div { padding:0 56px 24px 63px; }
.public-faq-item > div p { margin:0; color:#647487; font-size:14px; line-height:1.9; }
.public-faq-contact { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:34px; padding:24px 26px; border:1px solid #d7eadb; border-radius:16px; background:linear-gradient(135deg,#f3fbf4,#fff); }
.public-faq-contact div > span,.public-faq-contact div > strong,.public-faq-contact div > small { display:block; }
.public-faq-contact div > span { color:var(--green); font-size:12px; font-weight:800; letter-spacing:.08em; }
.public-faq-contact div > strong { margin-top:5px; color:#2b3b4c; font-size:18px; }
.public-faq-contact div > small { margin-top:6px; color:#788799; font-size:12px; line-height:1.5; }
.public-faq-contact .public-primary-button { flex:0 0 auto; min-width:132px; border-radius:12px; }

@media (max-width:760px) {
  .public-faq-page { padding-top:30px; padding-right:18px; padding-left:18px; }
  .public-faq-hero { margin-bottom:28px; }
  .public-faq-hero h1 { margin-top:9px; font-size:clamp(19px,6.25vw,24px); line-height:1.25; letter-spacing:-.055em; white-space:nowrap; }
  .public-faq-hero > p { margin-top:11px; font-size:clamp(11px,3.25vw,12.5px); line-height:1.55; letter-spacing:-.025em; white-space:nowrap; }
  .public-faq-status { align-items:flex-start; flex-wrap:wrap; justify-content:center; gap:7px 9px; margin-top:18px; padding:10px 13px; border-radius:14px; }
  .public-faq-status span { width:100%; }
  .public-faq-workspace { display:block; }
  .public-faq-categories { position:static; display:flex; gap:7px; margin:0 0 14px; padding:0 0 8px; overflow-x:auto; scrollbar-width:none; }
  .public-faq-categories::-webkit-scrollbar { display:none; }
  .public-faq-categories button { min-height:38px; flex:0 0 auto; padding:0 13px; border:1px solid #d9e8dc; border-radius:999px; background:#fff; font-size:12px; }
  .public-faq-categories button[data-active="true"] { border-color:#9ecda6; }
  .public-faq-item summary { min-height:68px; grid-template-columns:30px minmax(0,1fr) 26px; gap:9px; padding:0 2px; }
  .public-faq-item summary span { font-size:15px; line-height:1.45; }
  .public-faq-item > div { padding:0 36px 20px 39px; }
  .public-faq-item > div p { font-size:13px; line-height:1.8; }
  .public-faq-contact { align-items:stretch; flex-direction:column; margin-top:25px; padding:20px; }
  .public-faq-contact .public-primary-button { width:100%; }
}

/* Bookmark shortcut popover */
.public-bookmark-popover { position:fixed; z-index:920; width:min(348px,calc(100vw - 20px)); }
.public-bookmark-popover[hidden] { display:none; }
.public-bookmark-dialog { position:relative; width:100%; padding:21px; border:1px solid #d8ebdc; border-radius:16px; background:#fff; box-shadow:0 18px 46px rgba(13,27,18,.18); animation:public-bookmark-popover-in .2s cubic-bezier(.2,.78,.25,1) both; }
.public-bookmark-popover[data-placement="bottom"] .public-bookmark-dialog::before,.public-bookmark-popover[data-placement="top"] .public-bookmark-dialog::before { position:absolute; left:var(--bookmark-arrow-left); width:11px; height:11px; border-left:1px solid #d8ebdc; border-top:1px solid #d8ebdc; background:#fff; content:""; transform:translateX(-50%) rotate(45deg); }
.public-bookmark-popover[data-placement="bottom"] .public-bookmark-dialog::before { top:-6px; }
.public-bookmark-popover[data-placement="top"] .public-bookmark-dialog::before { bottom:-6px; transform:translateX(-50%) rotate(225deg); }
.public-bookmark-close { position:absolute; top:10px; right:10px; width:34px; height:34px; padding:0; border:0; border-radius:50%; color:#748278; background:transparent; font:300 26px/1 sans-serif; cursor:pointer; }
.public-bookmark-close:hover { color:#25372a; background:#edf7ef; }
.public-bookmark-close:focus-visible { outline:2px solid rgba(34,139,34,.5); outline-offset:2px; }
.public-bookmark-popover-heading { display:flex; align-items:center; gap:10px; padding-right:30px; }
.public-bookmark-popover-heading > span { width:32px; height:32px; display:grid; flex:0 0 auto; place-items:center; border-radius:50%; color:#228b22; background:#edf8ef; font-size:20px; line-height:1; }
.public-bookmark-dialog h2 { margin:0; color:#213144; font-size:19px; letter-spacing:-.01em; }
.public-bookmark-dialog > p { margin:11px 0 15px; color:#6b7b8d; font-size:13px; line-height:1.6; text-align:left; }
.public-bookmark-shortcuts { display:grid; }
.public-bookmark-shortcuts > div { min-height:58px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:9px 11px 9px 15px; border:1px solid #e0ebe2; border-radius:12px; background:#fbfefc; }
.public-bookmark-shortcuts > div > span { color:#3e4e60; font-size:14px; font-weight:700; }
.public-bookmark-shortcuts strong { display:flex; align-items:center; gap:8px; }
.public-bookmark-shortcuts kbd { min-width:40px; height:35px; display:grid; place-items:center; padding:0 9px; border:1px solid #cfdad2; border-bottom-width:3px; border-radius:8px; color:#2c3d4d; background:#fff; box-shadow:0 2px 0 rgba(30,50,38,.04); font:700 14px/1 inherit; }
.public-bookmark-shortcuts i { color:#8a988e; font-size:14px; font-style:normal; }
@keyframes public-bookmark-popover-in { from{opacity:0;transform:translateY(-5px) scale(.975)} to{opacity:1;transform:none} }

/* Floating support entry and contact popover */
.public-support-fab { position:fixed; right:24px; bottom:24px; z-index:80; min-width:0; min-height:48px; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:0 18px; border:1px solid rgba(255,255,255,.55); border-radius:999px; color:#fff; background:#228b22; box-shadow:0 12px 32px rgba(24,100,31,.25); opacity:.82; font:750 14px/1 inherit; cursor:grab; touch-action:none; user-select:none; will-change:left,top,width; transition:background-color .18s ease,box-shadow .18s ease,transform .18s ease,width .2s ease,padding .2s ease,gap .2s ease; }
.public-support-fab:hover:not([data-dragging="true"]) { background:#19781d; box-shadow:0 15px 36px rgba(24,100,31,.3); transform:translateY(-2px); }
.public-support-fab[data-dragging="true"] { cursor:grabbing; transition:none; transform:none; }
.public-support-fab[data-docked="true"] { width:48px; padding-inline:0; gap:0; }
.public-support-fab[data-docked="true"] span { display:none; }
.public-support-fab:focus-visible { outline:3px solid rgba(34,139,34,.25); outline-offset:3px; }
.public-support-fab svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.public-support-fab > span { height:21px; display:flex; align-items:center; line-height:21px; transform:translateX(-2px); }
.public-support-fab[data-docked="true"] > span { transform:none; }
.public-support-popover { position:fixed; z-index:910; width:min(372px,calc(100vw - 20px)); }
.public-support-popover[hidden] { display:none; }
.public-support-dialog { position:relative; width:100%; max-height:calc(100vh - 92px); overflow:auto; padding:23px 24px 24px; border:1px solid #d8ebdc; border-radius:18px; background:linear-gradient(180deg,#f8fff9 0,#fff 38%); box-shadow:0 22px 58px rgba(13,27,18,.22); text-align:center; animation:public-support-dialog-in .22s cubic-bezier(.2,.78,.25,1) both; }
.public-support-popover::before { position:absolute; z-index:1; left:var(--support-arrow-left); width:12px; height:12px; border-left:1px solid #d8ebdc; border-top:1px solid #d8ebdc; background:#fff; content:""; transform:translateX(-50%) rotate(45deg); }
.public-support-popover[data-placement="top"]::before { bottom:-6px; transform:translateX(-50%) rotate(225deg); }
.public-support-popover[data-placement="bottom"]::before { top:-6px; }
.public-support-close { position:absolute; top:10px; right:10px; width:33px; height:33px; padding:0; border:0; border-radius:50%; color:#748278; background:transparent; font:300 26px/1 sans-serif; cursor:pointer; }
.public-support-close:hover { color:#25372a; background:#edf7ef; }
.public-support-close:focus-visible { outline:2px solid rgba(34,139,34,.5); outline-offset:2px; }
.public-support-kicker { display:block; margin-bottom:5px; color:#228b22; font-size:10px; font-weight:800; letter-spacing:.14em; }
.public-support-dialog h2 { margin:0; color:#213144; font-size:21px; letter-spacing:-.02em; }
.public-support-contact { margin:10px auto 0; color:#53647b; font-size:14px; line-height:1.65; white-space:pre-line; overflow-wrap:anywhere; }
.public-support-image-frame { margin:14px auto 0; padding:8px; border:1px solid #dbece0; border-radius:13px; background:#fbfefc; }
.public-support-image-frame[hidden] { display:none; }
.public-support-image-frame img { display:block; width:auto; max-width:100%; max-height:min(38vh,270px); margin:0 auto; border-radius:8px; object-fit:contain; }
.public-support-copy { width:100%; min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:9px; margin-top:14px; padding:0 18px; border:1px solid #228b22; border-radius:11px; color:#fff; background:#228b22; box-shadow:0 10px 24px rgba(34,139,34,.16); font-size:14px; font-weight:750; cursor:pointer; transition:background-color .18s ease,box-shadow .18s ease,transform .18s ease; }
.public-support-copy[hidden] { display:none; }
.public-support-copy:hover { background:#19781d; box-shadow:0 13px 28px rgba(34,139,34,.22); transform:translateY(-1px); }
.public-support-copy:focus-visible { outline:3px solid rgba(34,139,34,.22); outline-offset:3px; }
.public-support-copy svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
@keyframes public-support-dialog-in { from{opacity:0;transform:translateY(7px) scale(.975)} to{opacity:1;transform:none} }

/* Support settings */
.backstage-support-form { width:100%; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr); gap:22px; margin-top:24px; padding:22px; border:1px solid #e2eee5; border-radius:14px; background:#fbfefc; }
.backstage-support-copy-fields { display:grid; align-content:start; gap:18px; }
.backstage-support-copy-fields label { display:grid; align-content:start; gap:8px; color:#53647b; font-size:13px; font-weight:800; }
.backstage-support-form textarea { width:100%; min-height:220px; padding:13px 14px; border:1px solid #cfe4d4; border-radius:11px; color:#263647; background:#fff; font:500 14px/1.7 inherit; resize:vertical; }
.backstage-support-form input[type="text"],.backstage-support-copy-fields input { width:100%; min-height:44px; padding:0 13px; border:1px solid #cfe4d4; border-radius:10px; color:#263647; background:#fff; font-size:14px; }
.backstage-support-form small { color:#8491a0; font-size:12px; font-weight:500; line-height:1.55; }
.backstage-support-media { display:grid; gap:12px; }
.backstage-support-upload { display:grid; grid-template-columns:1fr auto; align-items:center; gap:7px 12px; min-height:90px; padding:14px; border:1px dashed #afd6b7; border-radius:12px; color:#53647b; background:#fff; cursor:pointer; }
.backstage-support-upload > span { font-size:13px; font-weight:800; }
.backstage-support-upload input { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; }
.backstage-support-upload b { grid-row:1/3; grid-column:2; padding:8px 13px; border-radius:999px; color:#228b22; background:#edf8ef; font-size:12px; }
.backstage-support-upload small { grid-column:1; }
.backstage-support-preview { min-height:230px; display:grid; place-items:center; padding:12px; border:1px solid #e0ebe2; border-radius:12px; color:#94a09a; background:linear-gradient(45deg,#f6faf7 25%,transparent 25%) 0 0/18px 18px,linear-gradient(-45deg,#f6faf7 25%,transparent 25%) 0 0/18px 18px,#fff; font-size:13px; }
.backstage-support-preview img { display:block; max-width:100%; max-height:300px; border-radius:9px; object-fit:contain; }
.backstage-support-actions { grid-column:1/-1; display:flex; justify-content:flex-end; gap:10px; padding-top:2px; }
.backstage-support-actions button:disabled { cursor:not-allowed; opacity:.45; }

/* Logs have several verbose columns, but should remain readable on a normal
   desktop without forcing the whole panel into a horizontal scroll. */
.admin-view-panel[data-view-panel="logs"] .backstage-table { min-width:0; table-layout:fixed; }
.admin-view-panel[data-view-panel="logs"] .backstage-table th:nth-child(1) { width:12%; }
.admin-view-panel[data-view-panel="logs"] .backstage-table th:nth-child(2) { width:10%; }
.admin-view-panel[data-view-panel="logs"] .backstage-table th:nth-child(3) { width:13%; }
.admin-view-panel[data-view-panel="logs"] .backstage-table th:nth-child(4) { width:9%; }
.admin-view-panel[data-view-panel="logs"] .backstage-table th:nth-child(5) { width:26%; }
.admin-view-panel[data-view-panel="logs"] .backstage-table th:nth-child(6) { width:30%; }
.admin-view-panel[data-view-panel="logs"] .backstage-table td { white-space:normal; overflow-wrap:anywhere; line-height:1.5; }

@media (max-width:760px) {
  .public-bookmark-popover { width:min(320px,calc(100vw - 20px)); }
  .public-support-fab { right:15px; bottom:16px; min-height:44px; padding:0 15px; font-size:13px; }
  .public-support-popover { width:min(332px,calc(100vw - 20px)); }
  .public-support-dialog { max-height:calc(100vh - 80px); padding:20px 18px 19px; border-radius:16px; }
  .public-support-image-frame img { max-height:min(34vh,245px); }
  .backstage-support-form { grid-template-columns:1fr; padding:16px; }
  .backstage-support-actions { grid-column:auto; justify-content:stretch; }
  .backstage-support-actions button { flex:1; }
  /* A six-column audit log cannot stay legible at phone width. Keep the
     desktop column proportions and let the existing table viewport scroll
     horizontally instead of squeezing every word into a vertical stack. */
  .admin-view-panel[data-view-panel="logs"] .backstage-table { min-width:900px; }
}
@media (prefers-reduced-motion:reduce) {
  .public-bookmark-popover,.public-bookmark-dialog,.public-support-fab,.public-support-popover,.public-support-dialog { animation:none; transition:none; }
}

/* Refined public referral workspace */
.referral-redesign { width:min(1120px,calc(100% - 44px)); margin:0 auto; padding:78px 0 90px; }
.referral-landing { position:relative; max-width:980px; margin:0 auto; text-align:center; animation:referralHeroIn .48s cubic-bezier(.2,.75,.25,1) both; }
.referral-hero-mark { position:relative; display:grid; width:72px; height:72px; margin:0 auto 25px; place-items:center; border-radius:50%; color:#fff; background:#228b22; box-shadow:0 16px 34px rgba(34,139,34,.18); }
.referral-hero-mark span { position:relative; z-index:1; font-size:27px; font-weight:800; }
.referral-hero-mark i { position:absolute; right:-7px; bottom:3px; width:24px; height:24px; border:5px solid #f8fff9; border-radius:50%; background:#ffb8ca; }
.referral-redesign .referral-kicker { margin-bottom:13px; color:#248b2a; font-size:13px; letter-spacing:.12em; }
.referral-landing h1 { max-width:none; margin:0 auto; color:#202d3e; font-size:clamp(34px,4.3vw,54px); line-height:1.18; letter-spacing:-.045em; white-space:nowrap; }
.referral-title-reward-range { color:#228b22; }
.referral-lead { max-width:670px; margin:22px auto 0; color:#6e7f91; font-size:17px; line-height:1.85; }
.referral-hero-actions { display:flex; justify-content:center; align-items:center; gap:28px; margin-top:35px; }
.referral-hero-actions .public-primary-button { min-width:190px; height:54px; justify-content:center; gap:18px; border-radius:13px; box-shadow:0 12px 28px rgba(34,139,34,.2); transition:transform .2s ease,box-shadow .2s ease; }
.referral-hero-actions .public-primary-button:hover { transform:translateY(-2px); box-shadow:0 16px 34px rgba(34,139,34,.25); }
.referral-hero-actions .public-primary-button b { font-size:22px; font-weight:400; }
.referral-secondary-button { min-width:170px; height:54px; padding:0 22px; border:1px solid #b7cdbb; border-radius:13px; color:#31563a; background:rgba(255,255,255,.72); font-weight:700; cursor:pointer; box-shadow:0 8px 22px rgba(39,74,47,.06); transition:transform .2s ease,border-color .2s ease,color .2s ease,background .2s ease; }
.referral-secondary-button:hover { transform:translateY(-2px); border-color:#228b22; color:#228b22; background:#fff; }
.referral-text-button { padding:8px 2px; border:0; border-bottom:1px solid #9eb7a1; color:#496451; background:transparent; font-weight:700; cursor:pointer; transition:color .18s ease,border-color .18s ease; }
.referral-text-button:hover { color:#228b22; border-color:#228b22; }
.referral-how { display:grid; grid-template-columns:1fr 72px 1fr 72px 1fr; align-items:center; margin:54px 0 0; padding:28px 0; border-top:1px solid rgba(57,89,67,.12); border-bottom:1px solid rgba(57,89,67,.12); text-align:left; }
.referral-how > div { display:flex; align-items:center; gap:16px; min-width:0; }
.referral-how > div > b { color:#b9c7bc; font-size:12px; letter-spacing:.1em; }
.referral-how strong,.referral-how small { display:block; }
.referral-how strong { color:#2c3b4c; font-size:15px; }
.referral-how small { margin-top:6px; color:#8592a1; font-size:12px; line-height:1.5; }
.referral-how > i { height:1px; margin:0 18px; background:linear-gradient(90deg,#d9e3db,#a9cbae); }
.referral-footnote { margin:20px 0 0; color:#91a098; font-size:12px; }
@keyframes referralHeroIn { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }

.referral-workspace { max-width:1040px; margin:36px auto 0; padding-top:42px; border-top:1px solid #d9e5dc; scroll-margin-top:95px; animation:referralWorkspaceIn .4s cubic-bezier(.2,.75,.25,1) both; }
@keyframes referralWorkspaceIn { from{opacity:0;transform:translateY(14px) scale(.992)} to{opacity:1;transform:none} }
.referral-workspace-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding-bottom:27px; border-bottom:1px solid #dfe8e1; }
.referral-workspace-head h1 { margin:7px 0 0; color:#253345; font-size:26px; word-break:break-all; }
.referral-link-section { padding-bottom:30px; border-bottom:1px solid #dfe8e1; }
.referral-link-section-head { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:17px; }
.referral-link-section-head h2 { margin:0; color:#263446; font-size:21px; }
.referral-link-section-head .referral-active-badge { margin-right:9px; }
.referral-link-section .referral-link-focus { width:100%; }
.referral-share-line { display:grid; grid-template-columns:280px 1fr; gap:45px; padding:40px 0; border-bottom:1px solid #dfe8e1; }
.referral-code-focus,.referral-link-focus { min-width:0; }
.referral-code-focus > span,.referral-link-focus > span { display:block; margin-bottom:13px; color:#7e8e9f; font-size:12px; font-weight:700; }
.referral-code-focus strong { display:block; color:#176b20; font-size:42px; line-height:1; letter-spacing:.1em; }
.referral-code-focus button { margin-top:15px; padding:0; border:0; color:#228b22; background:transparent; font-size:13px; font-weight:700; cursor:pointer; }
.referral-link-focus > div { display:flex; align-items:center; gap:12px; min-height:54px; padding:8px 9px 8px 18px; border:1px solid #d9e6dc; border-radius:13px; background:rgba(255,255,255,.7); }
.referral-link-focus input { width:100%; min-width:0; border:0; outline:0; color:#405164; background:transparent; font-size:15px; }
.referral-link-focus button { flex:0 0 auto; height:38px; padding:0 17px; border:0; border-radius:9px; color:#fff; background:#228b22; font-weight:700; cursor:pointer; }
.referral-workspace .referral-stats { display:flex; margin:0; padding:27px 0; border:0; border-bottom:1px solid #dfe8e1; border-radius:0; background:transparent; }
.referral-workspace .referral-stats div { flex:1; padding:0 30px; background:transparent; }
.referral-workspace .referral-stats div:first-child { padding-left:0; }
.referral-workspace .referral-stats div+div { border-left:1px solid #dfe8e1; }
.referral-workspace .referral-stats strong { margin:0 0 6px; color:#263647; font-size:30px; }
.referral-workspace .referral-stats span { color:#7e8d9d; }
.referral-workspace .referral-records-head { align-items:flex-end; margin:34px 0 15px; }
.referral-workspace .referral-records-head h2 { margin:0; color:#263446; font-size:21px; }
.referral-workspace .referral-records-head p { margin:7px 0 0; color:#8290a0; font-size:13px; }
.referral-workspace .referral-table-scroll { border:0; border-top:1px solid #dfe8e1; border-radius:0; }

.referral-reward-backdrop { position:fixed; inset:0; z-index:110; display:grid; padding:22px; place-items:center; background:rgba(25,30,28,.58); backdrop-filter:blur(8px); animation:referralBackdropIn .22s ease both; }
.referral-reward-backdrop[hidden] { display:none; }
.referral-reward-dialog { position:relative; z-index:2; width:min(480px,100%); padding:29px 42px 34px; border:1px solid #d0ead5; border-radius:24px; background:#fff; box-shadow:0 30px 90px rgba(10,20,14,.28); text-align:center; animation:referralRewardIn .62s cubic-bezier(.22,.72,.28,1) both; }
.referral-reward-eyebrow { display:inline-flex; padding:6px 11px; border-radius:999px; color:#228b22; background:#edf8ef; font-size:12px; font-weight:800; letter-spacing:.08em; }
.referral-reward-dialog h2 { margin:0 0 8px; color:#263446; font-size:27px; }
.referral-reward-dialog > p { margin:0; color:#7c8b9a; font-size:14px; }
.referral-reward-dialog > strong { display:block; margin:25px 0 18px; color:#168126; font-size:42px; line-height:1; }
.referral-reward-code { display:flex; align-items:center; gap:10px; padding:9px 9px 9px 17px; border:1px solid #d9e8dc; border-radius:13px; background:#f8fbf8; }
.referral-reward-code code { min-width:0; flex:1; overflow:hidden; color:#33475a; font-size:15px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.referral-reward-code button { flex:0 0 auto; height:40px; padding:0 16px; border:0; border-radius:9px; color:#fff; background:#228b22; font-weight:800; cursor:pointer; }
.referral-confetti { position:fixed; inset:0; z-index:1; overflow:hidden; pointer-events:none; opacity:1; transition:opacity .35s ease; }
.referral-reward-backdrop[data-settled="true"] .referral-confetti,
.recharge-success-backdrop[data-settled="true"] .referral-confetti { opacity:0; }
.referral-confetti i { position:absolute; top:-20px; left:var(--confetti-x); width:8px; height:14px; border-radius:2px; background:var(--confetti-color); animation:referralConfettiFall var(--confetti-duration) cubic-bezier(.16,.74,.35,1) var(--confetti-delay) both; }
.recharge-success-backdrop { position:fixed; inset:0; z-index:112; display:grid; padding:22px; place-items:center; background:rgba(25,30,28,.58); backdrop-filter:blur(8px); animation:referralBackdropIn .22s ease both; }
.recharge-success-backdrop[hidden] { display:none; }
.recharge-success-dialog { position:relative; z-index:2; width:min(520px,100%); max-height:calc(100svh - 36px); overflow:auto; padding:27px 32px 30px; border:1px solid #d0ead5; border-radius:24px; background:#fff; box-shadow:0 30px 90px rgba(10,20,14,.28); text-align:center; animation:referralRewardIn .62s cubic-bezier(.22,.72,.28,1) both; }
.recharge-success-mark { width:42px; height:42px; margin:0 auto 12px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--green); box-shadow:0 0 0 9px var(--green-soft); font-size:24px; font-weight:850; }
.recharge-success-dialog h2 { max-width:420px; margin:0 auto; color:#263446; font-size:24px; line-height:1.35; }
.recharge-success-dialog img { width:100%; max-height:420px; margin-top:18px; display:block; object-fit:contain; border:1px solid #e2ece4; border-radius:14px; background:#f8faf8; }
.recharge-success-dialog .public-primary-button { width:100%; min-height:46px; margin-top:17px; border-radius:12px; }
@keyframes referralRewardIn { from{opacity:0;transform:translateY(14px) scale(.98)} to{opacity:1;transform:none} }
@keyframes referralConfettiFall { 0%{opacity:0;transform:translate3d(0,-12vh,0) rotate(0)} 10%{opacity:1} 100%{opacity:0;transform:translate3d(var(--confetti-drift),105vh,0) rotate(var(--confetti-rotate))} }

.referral-modal-backdrop { position:fixed; inset:0; z-index:90; display:grid; padding:22px; place-items:center; background:rgba(25,34,30,.54); backdrop-filter:blur(7px); animation:referralBackdropIn .2s ease both; }
.referral-modal-backdrop[hidden] { display:none; }
.referral-modal { position:relative; width:min(440px,100%); padding:36px 38px 32px; border:1px solid rgba(190,221,196,.9); border-radius:20px; background:#fff; box-shadow:0 28px 80px rgba(16,30,21,.22); animation:referralModalIn .3s cubic-bezier(.2,.8,.25,1) both; }
.referral-modal-close { position:absolute; top:15px; right:17px; width:34px; height:34px; border:0; color:#718075; background:transparent; font-size:25px; cursor:pointer; }
.referral-modal-symbol { display:grid; width:44px; height:44px; margin-bottom:22px; place-items:center; border-radius:50%; color:#fff; background:#228b22; font-size:20px; font-weight:800; }
.referral-modal-symbol--search { color:#228b22; background:#eef8ef; font-size:25px; }
.referral-query-heading { display:flex; align-items:center; gap:12px; padding-right:34px; }
.referral-query-heading .referral-modal-symbol { flex:0 0 auto; width:34px; height:34px; margin:0; font-size:20px; }
.referral-query-heading h2 { margin:0; }
.referral-generate-heading { display:flex; align-items:center; gap:12px; padding-right:34px; }
.referral-generate-heading .referral-modal-symbol { flex:0 0 auto; width:34px; height:34px; margin:0; font-size:17px; }
.referral-generate-heading h2 { margin:0; }
.referral-modal h2 { margin:0; color:#253345; font-size:24px; }
.referral-modal > p { margin:10px 0 24px; color:#758596; font-size:14px; line-height:1.7; }
.referral-modal label { display:block; margin-bottom:8px; color:#3f4e60; font-size:13px; font-weight:700; }
.referral-modal .public-input { width:100%; height:50px; }
.referral-modal .public-primary-button { width:100%; height:50px; margin-top:14px; justify-content:center; border-radius:11px; }
.referral-modal > small { display:block; margin-top:14px; color:#8c9990; font-size:11px; line-height:1.6; text-align:center; }
@keyframes referralBackdropIn { from{opacity:0} to{opacity:1} }
@keyframes referralModalIn { from{opacity:0;transform:translateY(18px) scale(.965)} to{opacity:1;transform:none} }

@media (max-width:760px) {
  .referral-redesign { width:min(100% - 24px,1120px); padding:26px 0 46px; }
  .referral-hero-mark { width:62px; height:62px; margin-bottom:21px; }
  .referral-landing h1 { font-size:clamp(18px,5.8vw,28px); letter-spacing:-.045em; }
  .referral-lead { margin-top:10px; font-size:15px; line-height:1.6; }
  .referral-hero-actions { flex-direction:row; gap:8px; margin-top:18px; }
  .referral-hero-actions .public-primary-button,.referral-hero-actions .referral-secondary-button { flex:1 1 0; width:auto; min-width:0; height:50px; padding:0 10px; font-size:13px; }
  .referral-hero-actions .public-primary-button { gap:8px; }
  .referral-how { grid-template-columns:1fr; gap:6px; margin:20px 0 0; padding:14px 0; }
  .referral-how > div { gap:12px; }
  .referral-how small { margin-top:3px; }
  .referral-how > i { width:1px; height:5px; margin:0 0 0 14px; background:#c9dbcc; }
  .referral-share-line { grid-template-columns:1fr; gap:30px; padding:30px 0; }
  .referral-workspace-head { align-items:flex-start; flex-direction:column; }
  .referral-link-section-head { align-items:flex-start; }
  .referral-workspace { margin-top:22px; padding-top:26px; }
  .referral-link-section { padding-bottom:24px; }
  .referral-code-focus strong { font-size:36px; }
  .referral-workspace .referral-stats div { padding:0 13px; }
  .referral-workspace .referral-stats strong { font-size:25px; }
  .referral-workspace .referral-records-head { align-items:flex-end; flex-direction:row; justify-content:space-between; gap:12px; margin:26px 0 12px; }
  .referral-workspace .referral-records-head > div { min-width:0; }
  .referral-workspace .referral-records-head .referral-text-button { flex:0 0 auto; white-space:nowrap; }
  .referral-reward-dialog { padding:29px 22px 26px; border-radius:20px; }
  .referral-reward-dialog h2 { font-size:24px; }
  .referral-reward-dialog > strong { font-size:36px; }
  .recharge-success-backdrop { padding:14px; }
  .recharge-success-dialog { max-height:calc(100svh - 24px); padding:23px 18px 20px; border-radius:20px; }
  .recharge-success-dialog h2 { font-size:20px; }
  .recharge-success-dialog img { max-height:52svh; border-radius:11px; }
  .referral-modal { padding:32px 24px 26px; border-radius:17px; }
  .referral-secondary-button { width:100%; }
  .referral-hero-actions .referral-secondary-button { width:auto; }
  .referral-table-scroll { overflow-x:auto; overscroll-behavior-inline:contain; padding-bottom:6px; -webkit-overflow-scrolling:touch; }
  .public-query-table.referral-table { min-width:760px; }
  .referral-table th,.referral-table td { padding:13px 11px; font-size:14px; }
  .referral-table th:first-child { width:27%; }
  .referral-table th:nth-child(2) { width:13%; }
  .referral-table th:nth-child(3) { width:25%; }
  .referral-table th:nth-child(4) { width:14%; }
  .referral-table th:nth-child(5) { width:21%; }
  .referral-table code { font-size:13px; }
  .referral-result { padding:4px 8px; font-size:12px; }
}

@media (prefers-reduced-motion:reduce) { .referral-confetti,.referral-confetti i { animation:none !important; display:none; } .referral-reward-dialog,.recharge-success-dialog { animation:none; } }

/* Unified public mobile alignment */
@media (max-width:700px) {
  .public-oss-header-inner { width:calc(100% - 28px); }
  .public-stage:not(.referral-redesign) { padding-right:16px; padding-left:16px; }
  .public-card,.public-card-body,.public-card-footer { width:100%; }
  .public-card-footer { gap:10px; }
  .public-card-footer > .public-card-query-shortcut,.public-card-footer > .public-primary-button,.public-card-footer > .public-ghost-button { flex:1 1 0; width:auto; margin:0; }
  .public-header-intro h1 { font-size:clamp(42px,11.5vw,54px); white-space:nowrap; }
  .public-home-system-title { margin-top:7px; font-size:clamp(18px,5.2vw,23px); font-weight:450; }
  .public-message { top:14px; width:max-content; max-width:calc(100vw - 28px); padding:11px 16px; text-align:center; }
  .token-guide-heading-row { align-items:flex-start; gap:12px; }
  .token-guide-tutorial-button { flex:0 0 auto; }
  .token-guide-action { min-height:44px; }
  .public-wechat-qr { width:calc(100vw - 24px); padding:25px 18px 22px; border-radius:18px; }
  .public-wechat-qr-frame { width:180px; height:180px; margin-top:13px; }
  .public-wechat-mobile-pay:not([hidden]) { display:flex; }
}

@media (max-width:430px) {
  .public-card-footer { flex-direction:column-reverse; align-items:stretch; }
  .public-card-footer > .public-primary-button,.public-card-footer > .public-ghost-button,.public-card-query-shortcut { width:100%; margin:0; }
  .public-footer-actions { width:100%; margin:0; }
  .public-footer-actions > * { flex:1; }
  .public-payment-method { grid-template-columns:38px minmax(0,1fr) 16px; padding:11px 12px; }
  .referral-link-focus > div { padding-left:13px; }
  .referral-link-focus button { padding:0 13px; }
  .referral-workspace .referral-records-head { gap:8px; }
  .referral-workspace .referral-records-head .referral-text-button { font-size:12px; }
  .referral-hero-actions .public-primary-button,.referral-hero-actions .referral-secondary-button { font-size:12px; }
}

/* Compact, lighter recharge flow on phones. Desktop sizing remains unchanged. */
@media (max-width:700px) {
  .public-site-shell { -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
  .public-oss-brand-copy strong { font-weight:750; }
  .public-oss-brand-copy small { font-weight:550; }
  .public-bookmark-button { font-weight:600; }
  .public-route-stage[data-step="2"] .public-stage:not(.public-stage--query) { padding-top:10px; padding-bottom:10px; }
  .public-route-stage[data-step="2"] .public-card-header { padding:2px 3px 13px; }
  .public-route-stage[data-step="2"] .wizard-steps { width:100%; }
  .public-route-stage[data-step="2"] .wizard-step { gap:4px; font-size:11px; line-height:1.25; font-weight:500; }
  .public-route-stage[data-step="2"] .wizard-step-dot { width:34px; height:34px; border-width:1.5px; font-size:14px; font-weight:500; }
  .public-route-stage[data-step="2"] .wizard-steps::before { top:16.5px; height:1.5px; }
  .public-route-stage[data-step="2"] .wizard-step[data-active="true"] .wizard-step-dot { box-shadow:0 0 0 4px rgba(34,139,34,.07); }
  .public-route-stage[data-step="2"] .wizard-panel { padding:18px 14px 7px; border-radius:12px; }
  .public-route-stage[data-step="2"] .token-guide-heading-row { align-items:center; }
  .public-route-stage[data-step="2"] .token-guide-heading { font-size:16px; font-weight:600; }
  .public-route-stage[data-step="2"] .token-guide-tutorial-button { min-height:31px; padding-inline:10px; font-size:11px; font-weight:550; }
  .public-route-stage[data-step="2"] .token-guide { gap:12px; margin:14px 0; }
  .public-route-stage[data-step="2"] .token-guide-step { gap:10px; }
  .public-route-stage[data-step="2"] .token-guide-check { width:18px; height:18px; font-size:11px; font-weight:600; }
  .public-route-stage[data-step="2"] .token-guide-step-content { gap:7px; }
  .public-route-stage[data-step="2"] .token-guide-step-content strong { font-size:12.5px; font-weight:500; line-height:1.42; }
  .public-route-stage[data-step="2"] .token-guide-action { min-height:36px; padding-inline:12px; font-size:11px; font-weight:550; }
  .public-route-stage[data-step="2"] .public-field--token { margin-top:14px; }
  .public-route-stage[data-step="2"] .public-field--token > span { margin-bottom:6px; font-size:12px; font-weight:550; }
  .public-route-stage[data-step="2"] .public-input--token { height:122px; min-height:122px; max-height:142px; padding:13px; border-radius:12px; font-size:11px; }
  .public-route-stage[data-step="2"] .form-error { min-height:10px; margin:2px 0 5px; font-size:11px; font-weight:500; line-height:1.35; }
  .public-route-stage[data-step="2"] .public-token-payment-section { margin-top:0; }
  .public-route-stage[data-step="2"] .public-payment-methods legend { font-size:11px; font-weight:500; }
  .public-route-stage[data-step="2"] .public-payment-methods legend { transform:translateY(-2px); }
  .public-route-stage[data-step="2"] .public-payment-method {
    width:fit-content;
    min-width:96px;
    min-height:32px;
    grid-template-columns:22px auto;
    justify-self:start;
    gap:6px;
    padding:4px 10px 4px 5px;
    border-color:#cfe3d3;
    border-radius:999px;
    background:#fbfefc;
    box-shadow:0 2px 7px rgba(34,139,34,.045);
  }
  .public-route-stage[data-step="2"] .public-payment-method:hover { transform:none; }
  .public-route-stage[data-step="2"] .public-payment-method:has(input:checked) { border-color:#8cc795; background:#f7fcf8; box-shadow:inset 0 0 0 1px rgba(34,139,34,.13),0 3px 9px rgba(34,139,34,.06); }
  .public-route-stage[data-step="2"] .public-wechat-icon { width:22px; height:22px; overflow:visible; border-radius:0; background:transparent; }
  .public-route-stage[data-step="2"] .public-wechat-icon img { object-fit:contain; }
  .public-route-stage[data-step="2"] .public-payment-method > span:nth-of-type(2) { height:22px; display:flex; align-items:center; }
  .public-route-stage[data-step="2"] .public-payment-method strong { display:block; font-size:11px; font-weight:500; line-height:22px; }
  .public-route-stage[data-step="2"] .public-payment-method small,
  .public-route-stage[data-step="2"] .public-payment-method > i { display:none; }
  .public-route-stage[data-step="2"] .public-code-option { height:37px; min-height:37px; gap:8px; padding-block:1px; }
  .public-route-stage[data-step="2"] .public-code-toggle { gap:7px; min-height:34px; }
  .public-route-stage[data-step="2"] .public-code-toggle strong { font-size:12px; font-weight:500; }
  .public-route-stage[data-step="2"] .public-code-checkbox { width:19px; height:19px; flex-basis:19px; }
  .public-route-stage[data-step="2"] .public-code-checkbox::after { left:5px; top:1px; }
  .public-route-stage[data-step="2"] .public-card-credential { height:34px; }
  .public-route-stage[data-step="2"] .public-card-credential .public-input { height:34px; min-height:34px; padding-inline:10px; border-radius:9px; font-size:11px; }
  .public-route-stage:is([data-step="2"],[data-step="3"]) .public-card-footer { min-height:42px; margin-top:8px; flex-direction:row; flex-wrap:nowrap; align-items:center; gap:8px; }
  .public-route-stage:is([data-step="2"],[data-step="3"]) .public-card-footer > .public-primary-button,
  .public-route-stage:is([data-step="2"],[data-step="3"]) .public-card-footer > .public-ghost-button { width:auto; min-width:0; min-height:40px; flex:1 1 0; margin:0; padding-inline:10px; font-size:12.5px; font-weight:550; white-space:nowrap; }
}

/* iPhone SE and other short phones: keep the complete Token workflow within one calm viewport. */
@media (max-width:390px) and (max-height:700px) {
  .public-route-stage[data-step="2"][data-step] .public-stage:not(.public-stage--query) { padding-top:6px; padding-bottom:7px; }
  .public-route-stage[data-step="2"][data-step] .public-card-header { padding:2px 2px 10px; }
  .public-route-stage[data-step="2"][data-step] .wizard-step { gap:3px; font-size:10.5px; line-height:1.22; }
  .public-route-stage[data-step="2"][data-step] .wizard-step-dot { width:34px; height:34px; border-width:1.5px; font-size:14px; }
  .public-route-stage[data-step="2"][data-step] .wizard-steps::before { top:16.5px; height:1.25px; }
  .public-route-stage[data-step="2"][data-step] .wizard-step[data-active="true"] .wizard-step-dot { box-shadow:0 0 0 4px rgba(34,139,34,.07); }
  .public-route-stage[data-step="2"][data-step] .wizard-panel { padding:13px 12px 6px; }
  .public-route-stage[data-step="2"][data-step] .token-guide-heading { font-size:15px; }
  .public-route-stage[data-step="2"][data-step] .token-guide-tutorial-button { min-height:30px; }
  .public-route-stage[data-step="2"][data-step] .token-guide { gap:8px; margin:9px 0; }
  .public-route-stage[data-step="2"][data-step] .token-guide-step-content { gap:4px; }
  .public-route-stage[data-step="2"][data-step] .token-guide-action { min-height:33px; }
  .public-route-stage[data-step="2"][data-step] .public-field--token { margin-top:9px; }
  .public-route-stage[data-step="2"][data-step] .public-input--token { height:82px; min-height:82px; max-height:96px; padding:9px 12px; }
  .public-route-stage[data-step="2"][data-step] .form-error { min-height:7px; margin:1px 0 3px; }
  .public-route-stage[data-step="2"][data-step] .public-payment-method { min-height:32px; }
  .public-route-stage[data-step="2"][data-step] .public-code-option { height:34px; min-height:34px; padding-block:0; }
  .public-route-stage[data-step="2"][data-step] .public-code-toggle { min-height:32px; }
  .public-route-stage[data-step="2"][data-step] .public-card-credential,
  .public-route-stage[data-step="2"][data-step] .public-card-credential .public-input { height:32px; min-height:32px; }
  .public-route-stage[data-step="2"][data-step] .public-card-footer { min-height:40px; margin-top:5px; }
}

/* Admin analytics: a quiet operational workspace with green health signals and blue sales data. */
.backstage-topbar-inner { width:min(1520px,calc(100% - 40px)); gap:18px; }
.backstage-actions { min-width:0; gap:4px; overflow-x:auto; scrollbar-width:none; }
.backstage-actions::-webkit-scrollbar { display:none; }
.backstage-nav-button { min-height:36px; padding-inline:10px; font-size:13px; font-weight:700; }
.backstage-refresh-button,.backstage-logout-button { min-height:36px; }
.backstage-main { width:min(1480px,calc(100% - 40px)); }
.admin-shell:not([data-current-view="dashboard"]) .backstage-inventory-details { display:none; }
.backstage-dashboard,.backstage-sales { margin-top:14px; padding:26px; border-color:#e1ebe4; box-shadow:0 12px 34px rgba(20,72,43,.045); }
.backstage-analytics-head { align-items:center; }
.backstage-analytics-head h1 { margin-top:5px; margin-bottom:5px; }
.backstage-data-freshness { flex:0 0 auto; padding:7px 10px; border:1px solid #e1ebe4; border-radius:8px; color:#718096; background:#fbfdfc; font-size:12px; }
.backstage-kpi-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:24px; }
.backstage-kpi-card { min-width:0; min-height:126px; padding:20px 22px; border:1px solid #edf1ef; border-radius:14px; background:#f7f9f8; }
.backstage-kpi-card > span { display:block; color:#566579; font-size:14px; }
.backstage-kpi-card > strong { display:block; margin-top:10px; color:#182230; font-size:32px; font-weight:650; font-variant-numeric:tabular-nums; letter-spacing:-.025em; }
.backstage-kpi-card > small { display:block; margin-top:6px; color:#7a8797; font-size:12px; }
.backstage-kpi-card > small b { color:#526174; font-weight:600; }
.backstage-dashboard-grid { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(300px,.72fr); gap:16px; margin-top:16px; }
.backstage-analytics-section { min-width:0; padding:20px; border:1px solid #edf1ef; border-radius:14px; background:#fff; }
.backstage-section-heading { min-height:42px; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.backstage-section-heading span,.backstage-section-heading strong { display:block; }
.backstage-section-heading span { color:#8793a2; font-size:11px; font-weight:750; letter-spacing:.08em; }
.backstage-section-heading strong { margin-top:4px; color:#273448; font-size:17px; }
.backstage-text-button { padding:5px 0; border:0; color:#2378de; background:transparent; font-size:12px; font-weight:700; }
.backstage-chart { position:relative; width:100%; min-height:260px; margin-top:8px; overflow:hidden; }
.backstage-chart--large { min-height:330px; margin-top:4px; }
.backstage-chart > svg { display:block; width:100%; height:260px; overflow:visible; }
.backstage-chart--large > svg { height:330px; }
.backstage-chart.is-empty { display:grid; place-items:center; border:1px dashed #dce8df; border-radius:10px; background:#fbfdfc; }
.backstage-chart.is-empty p { color:#8a98a6; }
.backstage-chart-grid-line { stroke:#dfe8f2; stroke-width:1; stroke-dasharray:5 5; vector-effect:non-scaling-stroke; }
.backstage-chart-grid-line--vertical { stroke-dasharray:none; opacity:.72; }
.backstage-chart-axis-label { fill:#758397; font-size:11px; font-weight:500; }
.backstage-chart-line { fill:none; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.backstage-chart-marker { fill:transparent; stroke:transparent; cursor:crosshair; }
.backstage-chart-marker:hover { fill:#fff; stroke:#2e8df7; stroke-width:4; vector-effect:non-scaling-stroke; }
.backstage-chart-tooltip { position:absolute; z-index:2; min-width:154px; display:grid; gap:4px; padding:10px 12px; border:1px solid #e3e9ef; border-radius:9px; color:#53647b; background:#fff; box-shadow:0 10px 28px rgba(15,23,42,.13); font-size:11px; transform:translate(-50%,calc(-100% - 10px)); pointer-events:none; }
.backstage-chart-tooltip[hidden] { display:none; }
.backstage-chart-tooltip strong { color:#1f2937; font-size:13px; }
.backstage-chart-tooltip small { color:#7c8998; }
.backstage-health-list { display:grid; gap:7px; margin-top:10px; }
.backstage-health-list > div { min-height:48px; display:flex; align-items:center; gap:11px; padding:8px 10px; border-radius:9px; background:#fafcfb; }
.backstage-health-list i { width:9px; height:9px; flex:0 0 auto; border-radius:50%; background:#9aa6b2; box-shadow:0 0 0 4px #edf1f3; }
.backstage-health-list span,.backstage-health-list strong,.backstage-health-list small { display:block; }
.backstage-health-list strong { color:#34445a; font-size:13px; }
.backstage-health-list small { margin-top:2px; color:#83909f; font-size:11px; }
.backstage-health-list > div[data-state="healthy"] i { background:#25a244; box-shadow:0 0 0 4px #e9f8ed; }
.backstage-health-list > div[data-state="warning"] i { background:#d58a17; box-shadow:0 0 0 4px #fff4dc; }
.backstage-health-list > div[data-state="error"] i { background:#c73b32; box-shadow:0 0 0 4px #ffebe9; }
.backstage-server-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid #edf1ef; }
.backstage-server-metrics > div { min-width:0; padding:8px 9px; border-radius:8px; background:#f6f8fa; }
.backstage-server-metrics span,.backstage-server-metrics strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.backstage-server-metrics span { color:#84909f; font-size:10px; }
.backstage-server-metrics strong { margin-top:3px; color:#405168; font-size:13px; font-weight:650; }
.backstage-inventory-details { margin-top:16px; border-top:1px solid #edf1ef; }
.backstage-inventory-details summary { width:max-content; margin:14px 0 0; color:#68778b; font-size:12px; font-weight:700; cursor:pointer; }
.backstage-inventory-details .backstage-stats-grid { margin:14px 0 0; }
.backstage-inventory-details .backstage-stat-card { min-height:76px; padding:12px 15px; background:#fbfdfc; }
.backstage-inventory-details .backstage-stat-card strong { font-size:22px; }
.backstage-sales-tabs { display:flex; gap:22px; margin-top:22px; border-bottom:1px solid #e8eeea; }
.backstage-sales-tabs button { min-height:42px; padding:0 2px; border:0; border-bottom:3px solid transparent; color:#66758a; background:transparent; font-weight:700; }
.backstage-sales-tabs button[data-active="true"] { color:#2078e8; border-bottom-color:#2078e8; }
.backstage-sales-tab-panel { padding-top:22px; }
.backstage-period-tabs,.backstage-chart-range { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.backstage-period-tabs button,.backstage-chart-range button { min-height:34px; padding:0 14px; border:0; border-radius:999px; color:#65758a; background:transparent; font-size:12px; font-weight:650; }
.backstage-period-tabs button:hover,.backstage-chart-range button:hover { color:#2378de; background:#f4f7fa; }
.backstage-period-tabs button[data-active="true"],.backstage-chart-range button[data-active="true"] { color:#2378de; background:#eff5ff; }
.backstage-sales-summary { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin:22px 0 18px; padding:18px 0; border-top:1px solid #edf1ef; border-bottom:1px solid #edf1ef; }
.backstage-sales-summary > div { min-width:0; padding:0 18px; border-right:1px solid #edf1ef; }
.backstage-sales-summary > div:last-child { border-right:0; }
.backstage-sales-summary span,.backstage-sales-summary strong { display:block; }
.backstage-sales-summary span { color:#68778b; font-size:12px; font-weight:650; }
.backstage-sales-summary strong { margin-top:9px; color:#1c2735; font-size:27px; font-weight:600; font-variant-numeric:tabular-nums; }
.backstage-chart-range { margin:4px 0 2px; }
.backstage-report-toolbar { min-height:58px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.backstage-report-toolbar strong,.backstage-report-toolbar span { display:block; }
.backstage-report-toolbar strong { color:#263448; }
.backstage-report-toolbar span { margin-top:3px; color:#84909f; font-size:11px; }
.backstage-export-button { min-height:38px; display:inline-flex; align-items:center; justify-content:center; padding:0 15px; border:1px solid #cbdcf4; border-radius:9px; color:#2378de; background:#f7faff; font-size:12px; font-weight:700; }
.backstage-export-button:hover { border-color:#7fb0ef; background:#eef5ff; }
.backstage-sales-table { min-width:760px; }
.backstage-sales-table th,.backstage-sales-table td { text-align:center; }

@media (max-width:1100px) {
  .backstage-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .backstage-dashboard-grid { grid-template-columns:1fr; }
  .backstage-health-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .backstage-server-metrics { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .backstage-sales-summary { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .backstage-sales-summary > div { border-right:0; }
}

@media (max-width:700px) {
  .backstage-topbar-inner,.backstage-main { width:calc(100% - 20px); }
  .backstage-topbar-inner { gap:7px; }
  .backstage-actions { gap:3px; padding-bottom:2px; }
  .backstage-nav-button { min-height:34px; padding-inline:9px; font-size:12px; }
  .backstage-dashboard,.backstage-sales { margin-top:10px; padding:17px 13px; }
  .backstage-analytics-head { align-items:flex-start; }
  .backstage-data-freshness { margin-top:2px; padding:6px 8px; font-size:10px; }
  .backstage-kpi-grid { gap:8px; margin-top:17px; }
  .backstage-kpi-card { min-height:98px; padding:14px; }
  .backstage-kpi-card > strong { margin-top:7px; font-size:24px; }
  .backstage-kpi-card > small { font-size:10px; }
  .backstage-dashboard-grid { gap:10px; margin-top:10px; }
  .backstage-analytics-section { padding:14px 10px; }
  .backstage-chart { min-height:230px; }
  .backstage-chart--large { min-height:270px; }
  .backstage-chart > svg { height:230px; }
  .backstage-chart--large > svg { height:270px; }
  .backstage-health-list { grid-template-columns:1fr; }
  .backstage-server-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .backstage-sales-tabs { margin-top:16px; }
  .backstage-sales-tab-panel { padding-top:15px; }
  .backstage-period-tabs,.backstage-chart-range { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .backstage-period-tabs button,.backstage-chart-range button { flex:0 0 auto; }
  .backstage-sales-summary { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; margin:15px 0 13px; padding:10px 0; }
  .backstage-sales-summary > div { padding:10px 12px; }
  .backstage-sales-summary strong { margin-top:5px; font-size:21px; }
  .backstage-report-toolbar { align-items:flex-start; }
  .backstage-inventory-details .backstage-stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:390px) {
  .backstage-kpi-card { padding:12px; }
  .backstage-kpi-card > span { font-size:12px; }
  .backstage-kpi-card > strong { font-size:21px; }
  .backstage-data-freshness { max-width:104px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .admin-view-panel[data-view-panel="payment"] > .backstage-panel-head { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
  .admin-view-panel[data-view-panel="payment"] > .backstage-panel-head > div:first-child { width:100%; }
  .admin-view-panel[data-view-panel="payment"] > .backstage-panel-head h1 { margin-bottom:0; white-space:nowrap; }
  .admin-view-panel[data-view-panel="payment"] .backstage-payment-head-actions { width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
  .admin-view-panel[data-view-panel="payment"] .backstage-payment-head-actions > button { width:100%; min-width:0; min-height:35px; padding-inline:8px; overflow:hidden; font-size:11px; line-height:1.15; text-overflow:ellipsis; white-space:nowrap; box-shadow:none; }
  .admin-view-panel[data-view-panel="payment"] .backstage-payment-head-actions > button:last-child { grid-column:1 / -1; }
}