:root {
  --ink: #18212f;
  --muted: #667085;
  --line: #d8dee8;
  --bg: #f6f8fb;
  --panel: #fff;
  --primary: #0f766e;
  --primary-2: #e6fffb;
  --danger: #b42318;
  --warn: #b54708;
  --ok: #067647;
}

* { box-sizing: border-box; }
html { scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, "PingFang SC", "Microsoft YaHei", sans-serif; color: var(--ink); background: var(--bg); line-height: 1.6; }
a { color: inherit; text-decoration: none; }
svg { flex: 0 0 auto; }

.topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 14px clamp(16px, 5vw, 72px); background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.brand { font-size: 20px; font-weight: 800; color: var(--primary); }
nav { display: flex; gap: 18px; align-items: center; }
nav a { display: inline-flex; align-items: center; gap: 7px; }
nav a svg { width: 16px; height: 16px; fill: currentColor; }
.top-avatar { width: 36px; height: 36px; display: inline-grid; place-items: center; }
.topbar-avatar { width: 34px; height: 34px; border-radius: 12px; display: inline-grid; place-items: center; overflow: hidden; background: linear-gradient(135deg, #10b981, #0f766e); color: white; font-weight: 800; font-size: 15px; }
.topbar-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.topbar-avatar img + span { display: none; }
.page { max-width: 1180px; margin: 0 auto; padding: 28px 18px 56px; }
body.page-loading::after { content: ""; position: fixed; left: 0; right: 0; top: 0; z-index: 80; height: 2px; background: linear-gradient(90deg, transparent, #7c3aed, #f97316, transparent); background-size: 180% 100%; animation: page-load-line .85s linear infinite; }
@keyframes page-load-line { from { background-position: 180% 0; } to { background-position: -180% 0; } }

body.dashboard-mode { min-height: 100vh; background: #ffd7d1; }
body.dashboard-mode::before { content: ""; position: fixed; inset: 0; z-index: -2; background: linear-gradient(135deg, rgba(255,156,145,.95), rgba(255,223,157,.82) 34%, rgba(166,229,181,.88) 64%, rgba(196,149,231,.9)); }
body.dashboard-mode::after { content: ""; position: fixed; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.28) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.24) 1px, transparent 1px); background-size: 72px 72px; opacity: .6; }
body.dashboard-mode .topbar { position: sticky; top: 18px; width: min(960px, calc(100% - 28px)); margin: 18px auto 0; padding: 8px 12px; border: 1px solid rgba(255,255,255,.56); border-radius: 999px; background: rgba(255,239,235,.72); box-shadow: 0 18px 50px rgba(126,64,91,.18); backdrop-filter: blur(18px); }
body.dashboard-mode .brand { display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border-radius: 999px; background: rgba(255,255,255,.74); color: #18212f; box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); }
body.dashboard-mode .brand::first-letter { color: #26c6da; }
body.dashboard-mode nav { gap: 8px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.28); }
body.dashboard-mode nav > a:not(.top-avatar) { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0 18px; border-radius: 999px; font-weight: 800; color: #1f1f2b; }
body.dashboard-mode nav > a:not(.top-avatar) svg { width: 17px; height: 17px; }
body.dashboard-mode nav > a:not(.top-avatar):hover, body.dashboard-mode nav > a.active { background: rgba(129,114,247,.34); color: #17152e; }
body.dashboard-mode .top-avatar { width: 42px; height: 42px; border-radius: 999px; background: rgba(255,255,255,.72); }
body.dashboard-mode .topbar-avatar { width: 34px; height: 34px; border-radius: 50%; }
body.dashboard-mode .page { max-width: 1180px; padding: 28px 16px 56px; }
body.dashboard-mode .footer { margin: 0 auto 24px; width: min(960px, calc(100% - 28px)); border: 1px solid rgba(255,255,255,.56); border-radius: 999px; background: rgba(255,239,235,.58); box-shadow: 0 18px 50px rgba(126,64,91,.12); backdrop-filter: blur(18px); color: #2f2a35; }
body.dashboard-mode .card, body.dashboard-mode .panel, body.dashboard-mode .auth-box, body.dashboard-mode .tutorial-shell, body.dashboard-mode .faq-card, body.dashboard-mode .table, body.dashboard-mode .modal-panel { border: 1px solid rgba(255,255,255,.56); border-radius: 8px; background: rgba(255,247,242,.72); box-shadow: 0 18px 45px rgba(111,75,96,.14); backdrop-filter: blur(16px); }
body.dashboard-mode .hero-visual { border: 1px solid rgba(255,255,255,.56); background: rgba(255,247,242,.62); box-shadow: 0 18px 45px rgba(111,75,96,.12); backdrop-filter: blur(16px); }
body.dashboard-mode .card h3, body.dashboard-mode .panel h2, body.dashboard-mode h1 { color: #24202a; }
body.dashboard-mode .muted, body.dashboard-mode .hero p { color: #4f4656; }
body.dashboard-mode .btn, body.dashboard-mode button { border: 0; background: #8982ee; color: #fff; font-weight: 900; box-shadow: none; }
body.dashboard-mode .btn.secondary, body.dashboard-mode button.secondary { background: rgba(255,255,255,.72); color: #5848e7; }
body.dashboard-mode .danger-btn { border: 1px solid rgba(241,166,160,.8); background: rgba(255,255,255,.72); color: var(--danger); }
body.dashboard-mode input, body.dashboard-mode select, body.dashboard-mode textarea { border: 1px solid rgba(193,190,203,.6); background: rgba(255,255,255,.74); }
body.dashboard-mode .link-box, body.dashboard-mode .solution { border: 1px solid rgba(193,190,203,.6); background: rgba(255,255,255,.74); }
body.dashboard-mode .table th, body.dashboard-mode .table td { border-bottom-color: rgba(193,190,203,.45); }
body.dashboard-mode .social-icon, body.dashboard-mode .social-row { border-color: rgba(193,190,203,.6); background: rgba(255,255,255,.74); }
body.dashboard-mode .platform-tabs { border-color: rgba(193,190,203,.6); background: rgba(255,255,255,.48); }
body.dashboard-mode .tutorial-card { border: 1px solid rgba(255,255,255,.56); background: rgba(255,255,255,.62); box-shadow: 0 18px 45px rgba(111,75,96,.1); }
body.dashboard-mode .empty-state { border-color: rgba(193,190,203,.6); background: rgba(255,255,255,.64); }

.dashboard-hero { max-width: 1060px; margin: 0 auto; }
.dashboard-wrap { display: grid; gap: 16px; }
.dash-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dash-card { border: 1px solid rgba(255,255,255,.56); border-radius: 8px; background: rgba(255,247,242,.72); box-shadow: 0 18px 45px rgba(111,75,96,.14); backdrop-filter: blur(16px); }
.dash-stat { min-height: 180px; display: flex; flex-direction: column; justify-content: space-between; padding: 24px; }
.dash-card-title { display: flex; align-items: center; gap: 12px; color: #6b5cf6; font-size: 20px; font-weight: 900; }
.dash-mini-icon { width: 42px; height: 42px; display: inline-grid; place-items: center; border-radius: 16px; background: rgba(206,207,255,.72); color: #6b5cf6; }
.dash-mini-icon svg { width: 22px; height: 22px; fill: currentColor; }
.dash-stat strong { display: block; margin: 18px 0 10px; font-size: 22px; line-height: 1.25; color: #24202a; word-break: break-word; }
.dash-card-actions, .dash-wide-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dash-btn { position: relative; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 12px; border: 0; border-radius: 8px; font-weight: 900; font-size: 14px; color: #211827; white-space: nowrap; box-shadow: none; }
.dash-btn svg { width: 16px; height: 16px; fill: currentColor; }
.dash-btn-warm { background: #f5a51c; color: #1f1608; }
.dash-btn-cool { background: #8982ee; color: #fff; }
.dash-btn.copied::after, .dash-icon-btn.copied::after, .dash-link-plain button.copied::after, .copy-link-text.copied::after { content: "已复制"; position: absolute; transform: translateY(-34px); border-radius: 999px; padding: 4px 9px; background: rgba(24,33,47,.9); color: #fff; font-size: 12px; white-space: nowrap; }
.dash-progress-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #3f3744; font-size: 13px; }
.dash-progress-line em { font-style: normal; color: #665e6f; }
.dash-progress { height: 5px; border-radius: 999px; background: rgba(169,169,188,.3); overflow: hidden; }
.dash-progress i { display: block; height: 100%; border-radius: inherit; background: #11c997; }
.dash-main-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 16px; }
.dash-import, .dash-qr { min-height: 300px; padding: 24px; }
.dash-import { display: flex; flex-direction: column; }
.dash-import label { margin-top: 24px; color: #37313b; font-size: 13px; }
.dash-link-field { min-height: 60px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid rgba(193,190,203,.6); border-radius: 8px; background: rgba(255,255,255,.74); }
.dash-link-field span { display: inline-grid; place-items: center; width: 22px; height: 22px; color: #29212f; }
.dash-link-field svg { width: 18px; height: 18px; fill: currentColor; }
.dash-link-field input { min-height: 32px; padding: 0; border: 0; background: transparent; color: #1d1b21; font-size: 15px; overflow: hidden; text-overflow: ellipsis; }
.dash-icon-btn { position: relative; width: 32px; height: 32px; min-height: 32px; padding: 0; border: 1px solid rgba(117,111,130,.28); border-radius: 8px; background: rgba(255,255,255,.86); color: #34303a; }
.dash-icon-btn svg { width: 17px; height: 17px; fill: currentColor; }
.dash-link-plain { display: flex; align-items: center; gap: 10px; min-height: 42px; }
.dash-link-plain span { display: inline-grid; place-items: center; width: 22px; height: 22px; color: #29212f; }
.dash-link-plain svg { width: 18px; height: 18px; fill: currentColor; }
.dash-link-plain .subscription-url-text, .subscription-link-row .subscription-url-text { display: block; width: auto; height: auto; flex: 1; min-width: 0; word-break: break-all; font-weight: 700; line-height: 1.7; color: #1d1b21; }
.subscription-link-row { display: flex; align-items: center; gap: 10px; }
.dash-reset-form { margin: 0; }
.dash-reset-form .dash-btn { width: 100%; }
body.dashboard-mode .dash-link-plain button, body.dashboard-mode .copy-link-text, .dash-link-plain button, .copy-link-text { position: relative; display: inline; width: auto; min-height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; color: #1d1b21; box-shadow: none; font-weight: 700; text-align: left; word-break: break-all; line-height: 1.7; }
body.dashboard-mode .dash-link-plain .dash-icon-btn, .dash-link-plain .dash-icon-btn, .subscription-link-row .dash-icon-btn { flex: 0 0 34px; display: inline-grid; place-items: center; width: 34px; height: 34px; min-height: 34px; padding: 0; border: 1px solid rgba(117,111,130,.28); border-radius: 8px; background: rgba(255,255,255,.86); color: #34303a; }
body.dashboard-mode .dash-link-plain button:hover, body.dashboard-mode .copy-link-text:hover, .dash-link-plain button:hover, .copy-link-text:hover { color: #5848e7; background: transparent; }
body.dashboard-mode .dash-link-plain .dash-icon-btn:hover, .dash-link-plain .dash-icon-btn:hover, .subscription-link-row .dash-icon-btn:hover { background: #fff; color: #5848e7; }
.dash-note { margin: 16px 0; color: #5848e7; line-height: 1.75; }
.dash-empty-line { min-height: 60px; display: flex; align-items: center; padding: 0 14px; border: 1px dashed rgba(139,128,152,.45); border-radius: 8px; background: rgba(255,255,255,.55); color: #625d69; }
.dash-qr { display: grid; grid-template-rows: auto 1fr; }
.dash-qr-box { display: grid; place-items: center; min-height: 230px; }
.dash-qr-img { width: min(188px, 72vw); height: min(188px, 72vw); padding: 8px; background: white; object-fit: contain; }
.dash-qr-empty { display: grid; place-items: center; width: min(188px, 72vw); aspect-ratio: 1; border: 1px dashed rgba(139,128,152,.45); border-radius: 8px; color: #625d69; background: rgba(255,255,255,.55); }
.dash-shortcuts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.dash-shortcut { min-height: 74px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px; border: 1px solid rgba(255,255,255,.56); border-radius: 8px; background: rgba(255,247,242,.72); box-shadow: 0 18px 45px rgba(111,75,96,.12); backdrop-filter: blur(16px); color: #4338ca; font-weight: 900; }
.dash-shortcut svg { width: 20px; height: 20px; fill: currentColor; }
.dash-short-avatar { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; overflow: hidden; background: linear-gradient(135deg, #10b981, #0f766e); color: #fff; font-size: 12px; }
.dash-short-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dash-short-avatar img + span { display: none; }

.hero { display: grid; grid-template-columns: 1.2fr .8fr; gap: 24px; align-items: center; min-height: 420px; }
.hero h1 { font-size: 44px; line-height: 1.12; margin: 0 0 16px; }
.hero p { color: var(--muted); font-size: 18px; }
.hero-visual { min-height: 320px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(135deg, #e6fffb, #f8fafc 44%, #fff1f2); display: grid; place-items: center; padding: 28px; }

.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.card, .panel, .auth-box { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 20px; }
.card h3, .panel h2 { margin-top: 0; }
.muted { color: var(--muted); }
.btn, button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 9px 15px; border-radius: 8px; border: 1px solid var(--primary); background: var(--primary); color: white; font-weight: 700; cursor: pointer; }
.btn.secondary, button.secondary { background: white; color: var(--primary); }
.btn.small, button.small { min-height: 34px; padding: 6px 12px; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; }
.form-submit-row { display: flex; justify-content: flex-end; margin-top: 16px; }
.section { margin-top: 34px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
label { display: block; font-weight: 700; margin: 8px 0 6px; }
input, select, textarea { width: 100%; min-height: 40px; border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; background: white; color: var(--ink); }
textarea { min-height: 96px; }

.auth-box { max-width: 460px; margin: 34px auto; }
.login-box { padding: 24px; }
.login-box input { margin-bottom: 12px; }
.login-submit { width: 100%; margin-top: 14px; }
.auth-links { margin: 14px 0 0; text-align: center; color: var(--muted); }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 26px 0 14px; color: var(--muted); font-size: 13px; }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.social-icons { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.social-icon { width: 36px; height: 36px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: white; color: var(--ink); transition: .16s ease; overflow: hidden; }
.social-icon:hover { transform: translateY(-1px); border-color: var(--primary); box-shadow: 0 8px 20px rgba(15, 118, 110, .12); }
.social-icon svg { width: 20px; height: 20px; max-width: 20px; max-height: 20px; fill: currentColor; flex: none; }
.social-icon.qq { color: #1d4ed8; }
.social-icon.wx, .social-icon.wechat { color: #16a34a; }
.social-icon.alipay { color: #1677ff; }
.social-icon.github { color: #24292f; }
.social-icon.bound { background: var(--primary-2); border-color: var(--primary); }
.account-social h2 { margin-top: 0; }
.account-settings { align-items: start; }
.account-page { display: grid; gap: 24px; }
.profile-section, .login-bindings { display: grid; gap: 20px; }
.profile-section h1 { margin: 0 0 6px; font-size: 20px; }
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.profile-clean { justify-items: center; align-items: center; gap: 16px; min-height: 210px; }
.profile-spacer { min-height: 1px; }
.profile-avatar-center { display: grid; justify-items: center; }
.profile-avatar-card, .profile-info-card { border: 1px solid var(--line); border-radius: 8px; background: #fbfcfe; padding: 22px; }
.profile-avatar-card { display: flex; gap: 18px; align-items: center; min-height: 150px; }
.profile-info-card { display: grid; gap: 14px; align-content: start; justify-items: center; min-width: 0; border: 0; background: transparent; padding: 0; }
.profile-info-card h2 { margin: 0; font-size: 16px; }
.profile-avatar { width: 74px; height: 74px; border-radius: 22px; display: inline-grid; place-items: center; flex: 0 0 auto; overflow: hidden; background: linear-gradient(135deg, #10b981, #0f766e); color: white; font-size: 30px; font-weight: 800; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-avatar img + span { display: none; }
.info-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.info-row .btn { margin-left: auto; }
.info-row span { color: var(--muted); }
.info-row b { word-break: break-all; text-align: right; }
.profile-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.status-only { border-bottom: 0; justify-content: center; padding: 0; }
.status-text.ok { color: var(--ok); }
.status-text.bad { color: var(--danger); }
.login-bindings h2 { margin: 0 0 6px; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.account-card { min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.account-card h2 { margin: 0 0 8px; }
.account-social { grid-column: 1 / -1; }
.social-row { display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.social-row:first-of-type { border-top: 1px solid var(--line); }
.social-row .social-icon { pointer-events: none; }
.social-meta { display: grid; gap: 2px; min-width: 0; }
.social-meta .muted { font-size: 13px; }
.social-meta span { word-break: break-all; }
.social-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; }
.danger-btn { border-color: #f1a6a0; color: var(--danger); background: white; }
.inline-form { display: inline-flex; margin: 0; }
.inline-form button { margin: 0; }

.tutorial-shell { margin-top: 24px; padding: 24px; border: 1px solid rgba(216,222,232,.9); border-radius: 8px; background: rgba(255,255,255,.78); box-shadow: 0 18px 50px rgba(16,24,40,.08); backdrop-filter: blur(10px); }
.tutorial-title { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 18px; }
.tutorial-title h1, .tutorial-title h2 { margin: 0; font-size: 24px; }
.title-icon, .client-icon { width: 42px; height: 42px; display: inline-grid; place-items: center; border-radius: 8px; background: #eef4ff; color: #5b21b6; flex: 0 0 auto; overflow: hidden; }
.client-icon { width: 40px; height: 40px; }
.title-icon svg, .client-icon svg { width: 22px; height: 22px; fill: currentColor; }
.title-icon img, .client-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.platform-tabs { width: fit-content; max-width: 100%; margin: 0 auto 22px; padding: 6px; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 999px; background: rgba(248,250,252,.9); }
.platform-tab { min-height: 38px; border-radius: 999px; border-color: transparent; background: transparent; color: var(--muted); padding: 7px 13px; gap: 7px; }
.platform-tab svg { width: 18px; height: 18px; fill: currentColor; }
.platform-tab img { width: 18px; height: 18px; object-fit: contain; }
.platform-tab.active { background: #6d28d9; color: white; box-shadow: 0 8px 18px rgba(109,40,217,.22); }
.tutorial-panel { display: none; }
.tutorial-panel.active { display: block; }
.tutorial-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.tutorial-card { min-height: 360px; display: flex; flex-direction: column; gap: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcff; box-shadow: 0 10px 28px rgba(16,24,40,.06); }
.tutorial-card-head { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.tutorial-card-head h3 { margin: 0; font-size: 18px; }
.tutorial-card-head p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.github-link { color: #6d28d9; font-weight: 800; white-space: nowrap; }
.tutorial-card-body { display: grid; gap: 10px; color: #344054; }
.tutorial-card-body p { margin: 0; word-break: break-word; }
.client-notice { font-weight: 700; }
.tutorial-actions { margin-top: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tutorial-btn { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 8px; padding: 9px 10px; color: white; font-weight: 800; text-align: center; white-space: nowrap; }
.tutorial-btn svg { width: 18px; height: 18px; fill: currentColor; }
.tutorial-btn.video { background: #f97316; }
.tutorial-btn.download { background: #7c3aed; }
.tutorial-btn.apple-account-entry { grid-column: 1 / -1; background: #0f766e; }
.tutorial-btn.disabled { background: #e4e7ec; color: #667085; cursor: not-allowed; }
.empty-state { grid-column: 1 / -1; padding: 28px; border: 1px dashed var(--line); border-radius: 8px; background: white; color: var(--muted); text-align: center; }
.faq-shell { margin-top: 20px; }
.faq-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 16px; margin-top: 12px; }
.faq-card summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 800; }
.faq-card small { color: var(--muted); font-weight: 500; }
.solution { margin-top: 10px; padding: 12px; border-radius: 8px; background: #f8fafc; }
.modal { display: none; position: fixed; inset: 0; z-index: 50; padding: 18px; place-items: center; }
.modal:target { display: grid; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(16,24,40,.48); }
.modal-panel { position: relative; width: min(460px, 100%); max-height: calc(100vh - 48px); overflow: auto; background: white; border: 1px solid var(--line); border-radius: 8px; padding: 20px; box-shadow: 0 24px 70px rgba(16,24,40,.22); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.modal-head h2 { margin: 0; }
.modal-close { width: 32px; height: 32px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); }
.order-actions { align-items: center; margin-top: 16px; }
.order-compare-panel { width: min(760px, 100%); }
.order-compare-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.order-compare-card { position: relative; overflow: hidden; display: grid; gap: 12px; align-content: start; min-height: 238px; padding: 18px; border: 1px solid rgba(193,190,203,.7); border-radius: 8px; background: rgba(255,255,255,.78); }
.order-compare-card h3 { margin: 0; color: var(--muted); font-size: 14px; }
.order-compare-card strong { display: block; color: var(--ink); font-size: 20px; line-height: 1.3; word-break: break-word; }
.order-compare-card dl { display: grid; gap: 10px; margin: 0; }
.order-compare-card dl div { display: flex; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid rgba(193,190,203,.55); }
.order-compare-card dt { color: var(--muted); }
.order-compare-card dd { margin: 0; color: var(--ink); font-weight: 900; text-align: right; word-break: break-word; }
.order-compare-card.changed { border: 2px solid #8982ee; background: rgba(255,255,255,.9); box-shadow: 0 14px 36px rgba(137,130,238,.22); }
.change-ribbon { position: absolute; top: 14px; right: -34px; width: 128px; transform: rotate(36deg); display: inline-flex; justify-content: center; padding: 5px 0; background: #ef4444; color: #fff; font-size: 13px; font-weight: 900; box-shadow: 0 8px 18px rgba(239,68,68,.24); }
.code-actions { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.code-send-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.code-send-row button { white-space: nowrap; min-width: 112px; }

.notice { border-radius: 8px; padding: 11px 14px; margin: 12px 0; border: 1px solid var(--line); background: white; }
.notice.success { border-color: #8ee0c2; color: var(--ok); }
.notice.error { border-color: #f1a6a0; color: var(--danger); }
.notice.info { border-color: #9cc9ff; }
.social-login-toast { position: fixed; left: 50%; top: 50%; z-index: 100; min-width: 220px; max-width: calc(100vw - 48px); transform: translate(-50%, -50%); padding: 18px 28px; border: 1px solid rgba(255,255,255,.72); border-radius: 8px; background: rgba(255,247,242,.9); box-shadow: 0 24px 70px rgba(111,75,96,.28); backdrop-filter: blur(18px); color: #24202a; font-size: 20px; font-weight: 900; text-align: center; animation: socialToast 1.15s ease forwards; pointer-events: none; }
.code-toast { position: fixed; left: 50%; top: 50%; z-index: 110; min-width: 210px; max-width: calc(100vw - 48px); transform: translate(-50%, -50%); padding: 16px 24px; border: 1px solid rgba(255,255,255,.72); border-radius: 8px; background: rgba(255,247,242,.92); box-shadow: 0 24px 70px rgba(111,75,96,.28); backdrop-filter: blur(18px); color: #24202a; font-size: 18px; font-weight: 900; text-align: center; animation: codeToast 1.7s ease forwards; pointer-events: none; }
.code-toast.success { color: var(--ok); }
.code-toast.error { color: var(--danger); }
.code-toast.info { color: #24202a; }
@keyframes socialToast { 0% { opacity: 0; transform: translate(-50%, -46%) scale(.96); } 16%, 78% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -54%) scale(.98); visibility: hidden; } }
@keyframes codeToast { 0% { opacity: 0; transform: translate(-50%, -46%) scale(.96); } 12%, 78% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -54%) scale(.98); visibility: hidden; } }
.table-wrap { overflow: auto; }
.table { width: 100%; border-collapse: collapse; background: white; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.table th, .table td { padding: 11px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.list-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 14px 0 24px; }
.list-pagination button { min-width: 34px; min-height: 34px; padding: 5px 10px; }
.list-pagination button.active { background: var(--primary); color: #fff; }
.list-pagination button:disabled { cursor: not-allowed; opacity: .45; }
.badge { display: inline-flex; border-radius: 999px; padding: 2px 9px; background: var(--primary-2); color: var(--primary); font-size: 12px; }
.device-status.device-offline { border-color: #f1a6a0; background: #fef3f2; color: #b42318; }
.link-box { word-break: break-all; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 14px; }
.plain-link-box { display: flex; align-items: center; min-height: 38px; word-break: break-all; }
.notification-list { display: grid; gap: 14px; }
.notification-card { position: relative; padding-right: 190px; }
.notification-card time { position: absolute; top: 20px; right: 20px; color: var(--muted); font-size: 13px; }
.notification-card b { display: block; padding-right: 8px; }
.notification-card p { margin-bottom: 0; }
.footer { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; padding: 26px; color: var(--muted); border-top: 1px solid var(--line); background: white; }

.admin-body { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; overflow: auto; background: #101828; color: white; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.sidebar .brand { display: flex; align-items: center; min-height: 42px; padding: 0 10px 14px; border-bottom: 1px solid rgba(255,255,255,.12); color: #fff; font-size: 20px; font-weight: 900; }
.admin-nav { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.nav-section { display: grid; gap: 4px; }
.nav-title { padding: 0 10px; color: #98a2b3; font-size: 12px; font-weight: 900; }
.nav-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 0; background: transparent; color: #98a2b3; font: inherit; text-align: left; cursor: pointer; }
.nav-toggle:hover, .nav-toggle:focus-visible { color: #fff; }
.nav-toggle-icon { width: 7px; height: 7px; margin-right: 3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .16s ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon { transform: rotate(225deg) translate(-1px, -1px); }
.nav-links { display: grid; gap: 4px; min-height: 0; overflow: hidden; }
.nav-section.is-collapsed > .nav-links { display: none; }
.sidebar a { padding: 9px 10px; border-radius: 8px; color: #eef2f6; font-weight: 700; }
.sidebar a:hover, .sidebar a.active { background: rgba(255,255,255,.12); color: #fff; }
.sidebar a.active { box-shadow: inset 3px 0 0 #5eead4; }
.admin-logout { margin-top: auto; border-top: 1px solid rgba(255,255,255,.12); color: #fecaca !important; }
.admin-main { padding: 28px; min-width: 0; overflow-x: hidden; }
.admin-main h1 { margin: 0 0 18px; font-size: 26px; line-height: 1.25; }
.admin-main h2 { margin: 24px 0 12px; font-size: 18px; line-height: 1.3; }
.admin-main .panel { margin-bottom: 18px; padding: 22px; }
.admin-main label { margin-top: 12px; color: #344054; }
.admin-main input, .admin-main select, .admin-main textarea { min-height: 44px; padding: 10px 12px; border-color: #cbd5e1; background: #fff; font-size: 14px; }
.admin-main select { min-width: 160px; appearance: auto; }
.admin-main textarea { min-height: 112px; }
.admin-main button, .admin-main .btn { min-height: 42px; padding: 9px 16px; white-space: nowrap; }
.admin-main .btn.small, .admin-main button.small { min-height: 34px; padding: 6px 11px; }
.admin-main form:not(.inline-form) > button, .admin-main form:not(.inline-form) > .btn { margin: 16px 8px 6px 0; }
.admin-main input[type="checkbox"], .admin-main input[type="radio"] { width: auto; min-height: auto; margin-right: 6px; }
.admin-main .form-grid { grid-template-columns: repeat(2, minmax(260px, 1fr)); gap: 16px 18px; align-items: end; }
.admin-main .actions { gap: 12px; align-items: center; margin: 14px 0 18px; }
.admin-main form.actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, max-content)); justify-content: start; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.admin-main form.actions input, .admin-main form.actions select { width: min(260px, 100%); }
.admin-main form.actions button, .admin-main form.actions .btn { margin-top: 0; }
.admin-main .panel .actions { padding: 0; border: 0; background: transparent; }
.apple-account-shell { max-width: 1120px; margin-left: auto; margin-right: auto; }
.apple-risk { margin: 0 0 18px; padding: 16px 18px; border: 1px solid #fed7aa; border-left: 5px solid #f97316; border-radius: 8px; background: #fff7ed; color: #9a3412; font-weight: 800; }
.apple-risk p { margin: 8px 0 0; line-height: 1.7; }
.apple-toolbar { justify-content: flex-end; margin-bottom: 16px; }
.apple-account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.apple-account-card { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcff; box-shadow: 0 10px 28px rgba(16,24,40,.06); }
.apple-account-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.apple-account-card-head h3 { margin: 0; font-size: 18px; word-break: break-all; }
.apple-field { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid #e4e7ec; border-radius: 8px; background: #fff; }
.apple-field span { color: var(--muted); font-size: 13px; }
.apple-field strong { word-break: break-all; font-size: 15px; color: #1d2939; }
.apple-copy { position: relative; min-height: 34px; padding: 6px 10px; gap: 6px; border-color: #0f766e; background: #0f766e; white-space: nowrap; }
.apple-copy svg { width: 16px; height: 16px; fill: currentColor; }
.apple-copy.copied::after { content: "已复制"; position: absolute; right: 0; top: -32px; border-radius: 999px; padding: 4px 9px; background: rgba(24,33,47,.9); color: #fff; font-size: 12px; white-space: nowrap; }
.apple-meta { display: grid; gap: 5px; color: var(--muted); font-size: 13px; }
.apple-disabled-panel { text-align: center; }
.apple-disabled-panel .btn { margin-top: 10px; }
.apple-note-form { display: flex; gap: 6px; align-items: center; }
.apple-note-form input { min-width: 160px; }
.apple-preconfirm { max-width: 680px; margin: 0 auto; padding: 18px; border: 1px dashed var(--line); border-radius: 8px; background: #fff; color: var(--muted); text-align: center; }
.risk-confirm-overlay { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 18px; background: rgba(16,24,40,.58); }
.risk-confirm-modal { width: min(720px, 100%); max-height: calc(100vh - 36px); overflow: auto; padding: 22px; border: 1px solid rgba(255,255,255,.7); border-radius: 8px; background: #fff; box-shadow: 0 24px 70px rgba(16,24,40,.28); }
.risk-confirm-modal .modal-head { margin-bottom: 14px; }
.modal-risk { margin-bottom: 14px; }
.risk-confirm-emphasis { margin: 12px 0; padding: 12px 14px; border-radius: 8px; background: #f8fafc; color: #344054; line-height: 1.7; }
.risk-confirm-emphasis b { color: #b42318; }
.risk-confirm-text { margin: 8px 0 10px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; color: #1d2939; font-weight: 800; line-height: 1.7; word-break: break-word; }
.risk-confirm-modal textarea { min-height: 96px; resize: vertical; }
.risk-confirm-submit:disabled { border-color: #d0d5dd; background: #e4e7ec; color: #667085; cursor: not-allowed; }
.admin-field { margin: 16px 0; }
.field-title { margin: 0 0 8px; color: #344054; font-weight: 800; }
.field-note { margin: 7px 0 0; color: #667085; font-size: 13px; line-height: 1.6; }
.settings-form h2 { padding-top: 6px; border-top: 1px solid var(--line); }
.settings-form h2:first-of-type { border-top: 0; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; align-items: stretch; }
.choice-card { display: block; margin: 0; font-weight: 400; cursor: pointer; }
.choice-card input { position: absolute; opacity: 0; pointer-events: none; }
.choice-box { display: grid; gap: 5px; min-height: 88px; padding: 13px 14px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; box-shadow: 0 6px 18px rgba(16,24,40,.03); transition: .16s ease; }
.choice-box strong { color: #1d2939; font-size: 14px; line-height: 1.3; }
.choice-box small { color: #667085; font-size: 12px; line-height: 1.55; }
.choice-card input:checked + .choice-box { border-color: var(--primary); background: #ecfdf5; box-shadow: inset 0 0 0 1px var(--primary), 0 10px 24px rgba(15,118,110,.1); }
.choice-card input:focus-visible + .choice-box { outline: 3px solid rgba(15,118,110,.18); }
.config-summary { margin: 16px 0 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; color: #475467; }
.config-summary p { margin: 3px 0; word-break: break-all; }
.admin-main .inline-form { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }
.admin-main .inline-form button { margin-top: 0; }
.admin-main td .inline-form, .admin-main td form { margin: 3px 4px 3px 0; }
.admin-main td .btn, .admin-main td button { margin: 3px 4px 3px 0; }
.admin-main .table { min-width: 820px; box-shadow: 0 8px 24px rgba(16,24,40,.04); }
.admin-main .table th { background: #f8fafc; color: #475467; font-size: 13px; white-space: nowrap; }
.admin-main .table td { background: #fff; }
.admin-user-note { min-width: 180px; max-width: 320px; white-space: pre-wrap; word-break: break-word; }
.admin-main .table tr:hover td { background: #fbfdff; }
.admin-main .table pre { max-width: 520px; overflow: auto; padding: 10px; border-radius: 8px; background: #0f172a; color: #e2e8f0; white-space: pre-wrap; word-break: break-word; }
.admin-main > .table, .admin-main .panel > .table, .admin-main form > .table { display: block; overflow-x: auto; }
.admin-main .badge { min-height: 24px; align-items: center; padding: 3px 10px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.stat { background: white; border: 1px solid var(--line); border-radius: 8px; padding: 14px; }
.stat strong { display: block; font-size: 24px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.faq details { background: white; border: 1px solid var(--line); border-radius: 8px; padding: 14px; margin: 10px 0; }
.danger { color: var(--danger); }

@media (max-width: 900px) {
  .hero, .split, .form-grid { grid-template-columns: 1fr; }
  body.dashboard-mode .topbar { top: 10px; width: calc(100% - 20px); border-radius: 24px; align-items: center; }
  body.dashboard-mode nav { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; }
  body.dashboard-mode nav > a:not(.top-avatar) { flex: 0 0 auto; padding: 0 14px; }
  .dash-cards, .dash-main-grid { grid-template-columns: 1fr; }
  .dash-stat, .dash-import, .dash-qr { min-height: auto; }
  .settings-grid { grid-template-columns: 1fr; }
  .profile-grid { grid-template-columns: 1fr; }
  .profile-clean { grid-template-columns: 1fr; justify-items: center; min-height: auto; }
  .profile-spacer { display: none; }
  .tutorial-grid { grid-template-columns: 1fr; }
  .metric-grid, .card-grid, .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-body { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; overflow: visible; }
  .admin-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .nav-section { align-content: start; padding: 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; background: rgba(255,255,255,.04); }
  .admin-logout { margin-top: 0; }
  .topbar { align-items: flex-start; gap: 12px; }
  .topbar, nav { flex-wrap: wrap; }
  .hero h1 { font-size: 34px; }
}

@media (max-width: 560px) {
  .metric-grid, .card-grid, .stats { grid-template-columns: 1fr; }
  body.dashboard-mode .topbar { display: grid; grid-template-columns: 1fr; justify-items: center; padding: 10px; border-radius: 20px; }
  body.dashboard-mode .brand { min-height: 38px; width: 100%; justify-content: center; }
  body.dashboard-mode nav { width: 100%; }
  body.dashboard-mode nav > a:not(.top-avatar) { min-height: 38px; padding: 0 12px; font-size: 14px; }
  body.dashboard-mode .page { padding: 18px 10px 40px; }
  .dashboard-wrap { gap: 12px; }
  .dash-cards, .dash-main-grid, .dash-shortcuts { gap: 12px; }
  .dash-stat, .dash-import, .dash-qr { padding: 18px; }
  .dash-card-title { font-size: 18px; }
  .dash-stat strong { font-size: 20px; }
  .dash-card-actions, .dash-wide-actions { grid-template-columns: 1fr; }
  .dash-link-field { grid-template-columns: auto minmax(0, 1fr) auto; }
  .dash-note { font-size: 14px; }
  .dash-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-shortcut { min-height: 62px; }
  .page { padding: 18px 12px; }
  .hero h1 { font-size: 29px; }
  .table th, .table td { padding: 9px; }
  .sidebar { display: flex; }
  .admin-nav { grid-template-columns: 1fr; }
  .profile-avatar-card { align-items: flex-start; }
  .profile-avatar-center { justify-items: center; }
  .profile-info-card { width: 100%; }
  .info-row { align-items: flex-start; flex-wrap: wrap; }
  .info-row b { text-align: left; }
  .profile-actions .btn { width: 100%; }
  .form-submit-row button { width: auto; }
  .social-row { grid-template-columns: 38px minmax(0, 1fr) auto; }
  .social-actions { grid-column: auto; justify-content: flex-end; }
  .social-actions .btn, .social-actions form, .social-actions button { width: auto; }
  .notification-card { padding-right: 20px; padding-top: 44px; }
  .notification-card time { left: 20px; right: auto; top: 18px; }
  .code-actions { grid-template-columns: 1fr; }
  .code-send-row { grid-template-columns: 1fr; }
  .code-send-row button { width: 100%; }
  .order-actions { display: grid; grid-template-columns: 1fr; }
  .order-actions .btn, .order-actions button { width: 100%; }
  .order-compare-cards { grid-template-columns: 1fr; }
  .order-compare-card { min-height: auto; }
  .tutorial-shell { padding: 16px; }
  .platform-tabs { border-radius: 8px; width: 100%; }
  .platform-tab { flex: 1 1 42%; }
  .tutorial-card-head { grid-template-columns: auto 1fr; }
  .github-link { grid-column: 1 / -1; }
  .tutorial-actions { grid-template-columns: 1fr; }
  .tutorial-btn { white-space: normal; }
  .apple-account-grid { grid-template-columns: 1fr; }
  .apple-toolbar { justify-content: stretch; }
  .apple-toolbar .btn { width: 100%; }
  .apple-field { grid-template-columns: 1fr; align-items: stretch; }
  .apple-copy { width: 100%; }
  .faq-card summary { align-items: flex-start; flex-direction: column; }
}