* { margin:0; padding:0; box-sizing:border-box; font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; }
body { background:#f6f9fe; display:flex; flex-direction:column; align-items:center; min-height:100vh; padding:20px 16px; }
.app-container { max-width:520px; width:100%; margin:0 auto; }
.card { background:#fff; border-radius:32px; box-shadow:0 12px 30px rgba(0,0,0,.04); padding:24px; margin-bottom:20px; }
.brand { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.brand-logo { font-size:24px; font-weight:700; background:linear-gradient(135deg,#1e2b5e,#3f5efb); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.brand-actions a { color:#5f6c84; text-decoration:none; font-size:14px; font-weight:500; margin-left:12px; }
.brand-actions a:hover { color:#1e2b5e; }
.profile-card { text-align:center; padding:28px 20px 20px; }
.avatar { width:96px; height:96px; border-radius:50%; background:linear-gradient(145deg,#f0f4ff,#d9e2ff); margin:0 auto 16px; display:flex; align-items:center; justify-content:center; border:3px solid #fff; box-shadow:0 8px 18px rgba(0,20,60,.08); font-size:44px; color:#3f5efb; font-weight:600; }
.display-name { font-size:24px; font-weight:700; color:#111827; margin-bottom:6px; display:flex; align-items:center; justify-content:center; gap:6px; }
.badge-verified { color:#3f5efb; font-size:18px; }
.username { font-size:15px; color:#6b7280; margin-bottom:12px; }
.bio { font-size:15px; color:#374151; line-height:1.5; max-width:360px; margin:0 auto 22px; }
.links-section { display:flex; flex-direction:column; gap:12px; margin:8px 0 4px; }
.link-item { display:flex; align-items:center; padding:14px 18px; background:#fff; border:1px solid #edf2f7; border-radius:18px; text-decoration:none; color:#111827; transition:all .2s; cursor:pointer; }
.link-item:hover { border-color:#b9c8ff; background:#fafcff; transform:translateY(-2px); box-shadow:0 12px 20px -10px rgba(63,94,251,.2); }
.link-icon { width:40px; height:40px; background:#eef2ff; border-radius:14px; display:flex; align-items:center; justify-content:center; margin-right:16px; color:#3f5efb; font-size:20px; flex-shrink:0; }
.link-content { flex:1; text-align:left; }
.link-title { font-weight:600; font-size:16px; margin-bottom:2px; }
.link-desc { font-size:13px; color:#6b7280; }
.link-arrow { color:#9aa6b9; font-size:16px; margin-left:8px; }
.stats-card { display:flex; justify-content:space-around; align-items:center; padding:16px 8px; background:#f8faff; border-radius:24px; margin-top:16px; }
.stat-item { text-align:center; }
.stat-number { font-size:22px; font-weight:800; color:#1e2b5e; }
.stat-label { font-size:12px; color:#6b7280; margin-top:4px; }
.divider { width:1px; height:28px; background:#e5e9f0; }
.promo-card { text-align:center; padding:20px 16px; background:#fff; border-radius:28px; border:1px solid #eef2f8; color:#374151; font-size:14px; margin-bottom:16px; }
.cta-button { display:block; width:100%; background:#1e2b5e; color:#fff; text-align:center; padding:16px; border-radius:50px; font-weight:700; font-size:16px; margin-top:12px; text-decoration:none; border:none; cursor:pointer; transition:.2s; }
.cta-button:hover { background:#2b3d7c; }
.admin-panel { display:none; background:#fff; border-radius:28px; padding:20px; border:1px solid #dbe4f0; box-shadow:0 12px 30px rgba(0,0,0,.06); margin-bottom:20px; }
.admin-panel.active { display:block; }
.admin-title { font-size:18px; font-weight:700; color:#1e2b5e; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.admin-item { display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid #f0f3f9; }
.admin-item:last-child { border-bottom:none; }
.admin-label { font-size:14px; color:#374151; font-weight:500; }
.admin-input { width:60%; padding:8px 12px; border:1px solid #d1d9e6; border-radius:40px; font-size:14px; outline:none; }
.admin-input:focus { border-color:#3f5efb; box-shadow:0 0 0 3px #3f5efb20; }
.admin-save-btn { background:#3f5efb; border:none; color:#fff; font-weight:600; padding:10px 18px; border-radius:40px; font-size:14px; cursor:pointer; margin-top:8px; width:100%; }
.admin-save-btn:hover { background:#2b4ad0; }
.footer-note { font-size:12px; color:#9ca3af; text-align:center; margin-top:16px; }
.link-edit-row { display:flex; flex-direction:column; gap:6px; padding:12px; border:1px solid #eef2f8; border-radius:16px; margin-bottom:10px; background:#fafcff; }
.link-edit-row input { width:100%; padding:8px 12px; border:1px solid #d1d9e6; border-radius:12px; font-size:13px; }
.link-edit-row .row-actions { display:flex; gap:8px; }
.link-edit-row .row-actions button { flex:1; padding:8px; border-radius:12px; border:none; cursor:pointer; font-size:13px; }
.btn-del { background:#fee2e2; color:#b91c1c; }

/* ============ 暗黑模板 ============ */
.dark-template { background:#111827; }
.dark-template .dark-avatar { background:linear-gradient(145deg,#4c1d95,#7c3aed); color:#f9fafb; border-color:#1f2937; }
.dark-template .dark-name { color:#f9fafb; }
.dark-template .dark-username { color:#9ca3af; }
.dark-template .dark-bio { color:#d1d5db; }
.dark-link-item { background:#1f2937; border-color:#374151; }
.dark-link-item:hover { background:#374151; border-color:#8b5cf6; }
.dark-link-icon { background:#4c1d95; color:#c4b5fd; }
.dark-link-title { color:#f9fafb; }
.dark-link-desc { color:#9ca3af; }
.dark-arrow { color:#6b7280; }
.dark-stats { background:#1f2937; }
.dark-stat-number { color:#c4b5fd; }
.dark-stat-label { color:#9ca3af; }
.dark-divider { background:#374151; }

/* ============ 渐变潮流模板 ============ */
.gradient-template { background:linear-gradient(160deg,#667eea 0%,#764ba2 100%); border:none; }
.gradient-template .gradient-avatar { background:rgba(255,255,255,.25); color:#fff; border-color:rgba(255,255,255,.5); backdrop-filter:blur(8px); }
.gradient-template .gradient-name { color:#fff; }
.gradient-template .gradient-username { color:rgba(255,255,255,.85); }
.gradient-template .gradient-bio { color:rgba(255,255,255,.9); }
.gradient-link-item { background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.25); backdrop-filter:blur(8px); }
.gradient-link-item:hover { background:rgba(255,255,255,.28); transform:translateY(-2px); }
.gradient-link-icon { background:rgba(255,255,255,.25); color:#fff; }
.gradient-link-title { color:#fff; }
.gradient-link-desc { color:rgba(255,255,255,.8); }
.gradient-link-item .link-arrow { color:rgba(255,255,255,.7); }
.gradient-stats { background:rgba(255,255,255,.15); backdrop-filter:blur(8px); }
.gradient-stat-number { color:#fff; }
.gradient-stat-label { color:rgba(255,255,255,.85); }
.gradient-divider { background:rgba(255,255,255,.3); }

/* 模板选择器 */
.template-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:8px; }
.template-option { border:2px solid #e5e9f0; border-radius:16px; padding:12px 8px; text-align:center; cursor:pointer; transition:.2s; }
.template-option.active { border-color:#3f5efb; background:#f0f4ff; }
.template-option .tpl-preview { width:100%; height:52px; border-radius:10px; margin-bottom:8px; }
.tpl-preview-default { background:linear-gradient(145deg,#f0f4ff,#d9e2ff); }
.tpl-preview-dark { background:linear-gradient(145deg,#1f2937,#4c1d95); }
.tpl-preview-gradient { background:linear-gradient(145deg,#667eea,#764ba2); }
.template-option span { font-size:12px; color:#374151; font-weight:600; }