:root {
  --meeting-ink: oklch(0.2 0.02 255);
  --meeting-ink-soft: oklch(0.43 0.025 255);
  --meeting-ink-muted: oklch(0.58 0.02 255);
  --meeting-paper: oklch(0.975 0.006 255);
  --meeting-sheet: #fff;
  --meeting-inset: oklch(0.95 0.009 255);
  --meeting-line: oklch(0.2 0.02 255 / 0.1);
  --meeting-line-strong: oklch(0.2 0.02 255 / 0.18);
  --meeting-blue: oklch(0.58 0.2 253);
  --meeting-blue-hover: oklch(0.52 0.21 253);
  --meeting-green: oklch(0.59 0.15 155);
  --meeting-warm: oklch(0.96 0.018 85);
  --radius-control: 6px;
  --radius-panel: 8px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  font-family: "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif;
  color: var(--meeting-ink);
  background: var(--meeting-paper);
  letter-spacing: 0;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; background: var(--meeting-paper); }
button, a { font: inherit; letter-spacing: 0; }
.sr-only, .skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.skip-link:focus { position: fixed; inset: 8px auto auto 8px; z-index: 10; padding: 8px 12px; background: white; }
.topbar { height: 56px; display: flex; align-items: center; gap: 10px; padding-inline: max(20px, env(safe-area-inset-left)); border-block-end: 1px solid var(--meeting-line); background: color-mix(in oklch, white 92%, var(--meeting-paper)); }
.brand-mark { width: 27px; height: 27px; display: flex; align-items: end; justify-content: center; gap: 2px; padding: 6px; border-radius: 6px; background: var(--meeting-blue); }
.brand-mark span { width: 3px; background: white; border-radius: 1px; }
.brand-mark span:nth-child(1) { height: 7px; }.brand-mark span:nth-child(2) { height: 14px; }.brand-mark span:nth-child(3) { height: 10px; }
.topbar strong { font-size: 16px; }
.account { margin-inline-start: auto; max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--meeting-ink-soft); font-size: 13px; }
.workspace { width: min(100%, 720px); margin-inline: auto; padding: var(--space-8) 20px calc(var(--space-12) + env(safe-area-inset-bottom)); }
.intro { max-width: 580px; }
.eyebrow, .status-label { margin: 0 0 var(--space-2); color: var(--meeting-blue); font-size: 13px; font-weight: 700; }
h1 { margin: 0; max-width: 580px; font-size: 30px; line-height: 1.3; letter-spacing: 0; }
.intro-copy { margin: var(--space-3) 0 0; color: var(--meeting-ink-soft); line-height: 1.7; }
.connection { margin-block-start: var(--space-8); padding-block: var(--space-6); border-block: 1px solid var(--meeting-line); }
.track { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; list-style: none; }
.track-step { position: relative; display: flex; align-items: center; gap: var(--space-2); min-width: 0; color: var(--meeting-ink-muted); }
.track-step:not(:last-child)::after { content: ""; position: absolute; inset-inline: 38px 8px; inset-block-start: 15px; height: 1px; background: var(--meeting-line-strong); }
.track-dot { position: relative; z-index: 1; flex: 0 0 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--meeting-line-strong); border-radius: 50%; background: var(--meeting-sheet); font-size: 12px; font-weight: 700; }
.track-step span:last-child { display: grid; min-width: 0; }
.track-step strong { font-size: 14px; color: inherit; }
.track-step small { margin-block-start: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-step.active { color: var(--meeting-blue); }.track-step.done { color: var(--meeting-green); }
.track-step.done .track-dot { color: white; border-color: var(--meeting-green); background: var(--meeting-green); }
.action-band { margin-block-start: var(--space-8); padding: var(--space-6); border: 1px solid var(--meeting-line); border-radius: var(--radius-panel); background: var(--meeting-sheet); }
.action-band h2, .privacy h2 { margin: 0; font-size: 20px; line-height: 1.4; }
.action-band p:not(.status-label), .privacy p { margin: var(--space-2) 0 0; color: var(--meeting-ink-soft); line-height: 1.65; }
.actions { display: grid; gap: var(--space-3); margin-block-start: var(--space-6); }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 12px 18px; border: 1px solid transparent; border-radius: var(--radius-control); text-decoration: none; font-weight: 700; cursor: pointer; transition: background-color 150ms, border-color 150ms, color 150ms, transform 100ms; }
.button:active { transform: scale(.985); }.button:focus-visible { outline: 3px solid color-mix(in oklch, var(--meeting-blue) 25%, transparent); outline-offset: 2px; }
.button.primary { color: white; background: var(--meeting-blue); }.button.primary:hover { background: var(--meeting-blue-hover); }
.button.secondary { color: var(--meeting-ink); border-color: var(--meeting-line-strong); background: var(--meeting-sheet); }.button.secondary:hover { background: var(--meeting-inset); }
.button.disabled { opacity: .5; pointer-events: none; }.hidden { display: none !important; }
.message { min-height: 24px; font-size: 13px; }
.manual-binding { display: grid; gap: 6px; margin-block-start: var(--space-4); padding: 12px; border: 1px dashed var(--meeting-line-strong); border-radius: var(--radius-control); background: var(--meeting-inset); color: var(--meeting-ink-soft); font-size: 13px; }
.manual-binding strong { color: var(--meeting-ink); font-family: ui-monospace, Consolas, monospace; font-size: 22px; letter-spacing: 3px; }
.privacy { display: flex; gap: var(--space-4); margin-block-start: var(--space-6); padding: var(--space-5, 20px); background: var(--meeting-warm); border-radius: var(--radius-panel); }
.privacy-icon { flex: 0 0 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--meeting-green); font-weight: 800; }
.privacy h2 { font-size: 16px; }.privacy p { font-size: 14px; }

@media (max-width: 560px) {
  .workspace { padding-block-start: 24px; }
  h1 { font-size: 26px; }
  .track { grid-template-columns: 1fr; gap: 16px; }
  .track-step:not(:last-child)::after { inset-inline-start: 15px; inset-block: 30px -16px; width: 1px; height: auto; }
  .action-band { padding: 20px 16px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; } }
@media (prefers-contrast: more) { :root { --meeting-line: oklch(0.2 0.02 255 / .25); --meeting-line-strong: oklch(0.2 0.02 255 / .4); } }