:root { --bg: #f5f6f8; --card: #fff; --fg: #1a1a1a; --muted: #6b7280; --line: #e5e7eb; --primary: #2563eb; --danger: #dc2626; }
@media (prefers-color-scheme: dark) { :root { --bg: #0f1115; --card: #181b21; --fg: #f3f4f6; --muted: #9ca3af; --line: #2a2f3a; --primary: #3b82f6; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.5 -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif; padding: 16px; }
.card { max-width: 440px; margin: 0 auto; background: var(--card); border-radius: 16px; padding: 24px 20px; }
h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 15px; margin: 0 0 8px; color: var(--muted); font-weight: 600; }
section { margin-top: 24px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
label { display: block; margin: 14px 0 0; font-size: 14px; color: var(--muted); }
input[type=tel], input[type=text], input[type=email] { width: 100%; margin-top: 6px; padding: 12px; font-size: 16px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--fg); }
.row { display: flex; gap: 8px; }
.row input { flex: 1; }
.row button { margin-top: 6px; white-space: nowrap; }
button { font: inherit; border-radius: 10px; padding: 12px 16px; cursor: pointer; border: 1px solid var(--line); background: transparent; color: var(--fg); }
button:disabled { opacity: .5; cursor: default; }
button.primary { background: var(--primary); color: #fff; border-color: var(--primary); width: 100%; margin-top: 18px; }
button.ghost.small, button.small { padding: 6px 12px; font-size: 13px; }
button.wide { width: 100%; }
button.danger { color: var(--danger); border-color: var(--danger); }
button.primary.danger { background: var(--danger); color: #fff; }
.agree { display: flex; gap: 8px; align-items: flex-start; margin-top: 16px; font-size: 13px; }
.agree input { margin-top: 3px; }
.divider { display: flex; align-items: center; gap: 12px; margin: 22px 0 14px; color: var(--muted); font-size: 13px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.err { color: var(--danger); font-size: 14px; margin-top: 12px; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.list li > span:first-child { flex: 1; }
.list em { font-style: normal; color: var(--primary); font-size: 12px; }
.profile { display: flex; align-items: center; gap: 12px; }
.profile > div { flex: 1; }
.avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: var(--line); }
.name { font-weight: 600; }
a { color: var(--primary); }
.switch input { width: 40px; height: 22px; appearance: none; background: var(--line); border-radius: 11px; position: relative; cursor: pointer; margin: 0; }
.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; }
.switch input:checked { background: var(--primary); }
.switch input:checked::after { left: 20px; }
dialog.card { border: none; margin: auto; max-width: 420px; width: calc(100% - 32px); box-shadow: 0 10px 40px rgba(0,0,0,.25); }
dialog::backdrop { background: rgba(0,0,0,.4); }
dialog .row { margin-top: 16px; }
dialog .row button { flex: 1; margin-top: 0; }