:root { color-scheme: light dark; --page:#f4f7f5; --panel:#fff; --ink:#172b29; --muted:#52615d; --line:#d8e4df; --accent:#126b5b; --on-accent:#fff; }
@media(prefers-color-scheme:dark) { :root { --page:#111c19; --panel:#182722; --ink:#e9f4ef; --muted:#aebfb7; --line:#344d44; --accent:#8bdfc7; --on-accent:#102b22; } }
* { box-sizing:border-box; }
body.yidao-page { margin:0; min-height:100dvh; padding:64px 24px; color:var(--ink); background:var(--page); font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; }
.yidao-panel { width:100%; max-width:720px; margin:0 auto; padding:40px; border:1px solid var(--line); border-radius:24px; background:var(--panel); box-shadow:0 12px 36px #00000005; }
.yidao-brand { display:flex; align-items:center; gap:10px; font-size:17px; font-weight:650; }
.yidao-brand svg { flex:none; }
.yidao-eyebrow { margin:40px 0 8px; color:var(--muted); font-size:13px; letter-spacing:.04em; }
h1 { margin:0; font-size:32px; line-height:1.3; letter-spacing:-.025em; font-weight:650; overflow-wrap:anywhere; }
.yidao-lead { margin:16px 0 24px; color:var(--muted); font-size:16px; line-height:26px; }
.yidao-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin:32px 0; padding:0; list-style:none; counter-reset:step; }
.yidao-steps li { counter-increment:step; border-top:2px solid var(--line); padding-top:16px; }
.yidao-steps li::before { content:"0" counter(step); display:block; margin-bottom:8px; font-size:13px; color:var(--accent); }
.yidao-steps strong { display:block; margin-bottom:4px; font-weight:600; }
.yidao-steps span { color:var(--muted); font-size:13px; line-height:20px; }
button { min-height:44px; padding:10px 20px; border:1px solid transparent; border-radius:12px; font-family:inherit; font-size:15px; font-weight:600; line-height:22px; cursor:pointer; }
button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
button:disabled { opacity:.55; cursor:default; }
.yidao-primary { background:var(--accent); color:var(--on-accent); }
.yidao-secondary { background:transparent; color:var(--ink); border-color:var(--line); }
.yidao-primary:not(:disabled):hover { filter:brightness(.93); }
.yidao-status { min-height:24px; margin:24px 0; color:var(--muted); overflow-wrap:anywhere; }
.yidao-status[data-state="completed"] { color:var(--accent); font-weight:600; }
.yidao-status[data-state="expired"],.yidao-status[data-state="reconciliation_required"] { border-left:3px solid currentColor; padding-left:12px; }
.yidao-footnote { margin:20px 0 0; color:var(--muted); font-size:13px; line-height:20px; }
.yidao-summary { display:grid; grid-template-columns:128px minmax(0,1fr); margin:24px 0; padding:8px 0; border-block:1px solid var(--line); }
.yidao-summary dt,.yidao-summary dd { margin:0; padding:12px 0; overflow-wrap:anywhere; }
.yidao-summary dt { color:var(--muted); font-size:14px; }
.yidao-summary dd { font-size:16px; line-height:26px; }
.yidao-actions { display:flex; flex-wrap:wrap; gap:12px; }
.yidao-form { display:grid; gap:20px; }
.yidao-form label { display:grid; gap:8px; font-weight:600; }
.yidao-form textarea,.yidao-form select { box-sizing:border-box; width:100%; min-height:44px; padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--ink); font:inherit; font-size:15px; line-height:24px; }
.yidao-form textarea { font-family:inherit; resize:vertical; }
.yidao-form textarea:focus-visible,.yidao-form select:focus-visible,.yidao-back:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.yidao-form button { justify-self:start; }
.yidao-form .yidao-footnote { margin:0; }
.yidao-back { display:inline-flex; align-items:center; min-height:44px; color:var(--accent); text-underline-offset:4px; }
@media(max-width:640px) {
 body.yidao-page { padding:16px 12px; }
 .yidao-panel { padding:24px; border-radius:16px; }
 .yidao-eyebrow { margin-top:32px; }
 h1 { font-size:26px; line-height:36px; }
 .yidao-steps { grid-template-columns:1fr; gap:16px; margin:24px 0; }
 .yidao-steps li { display:grid; grid-template-columns:28px 1fr; column-gap:8px; padding-top:12px; }
 .yidao-steps li::before { grid-row:1/3; margin:2px 0 0; }
 .yidao-summary { grid-template-columns:1fr; padding:16px 0; }
 .yidao-summary dt { padding:8px 0 0; }
 .yidao-summary dd { padding:4px 0 12px; }
 .yidao-actions button { flex:1 1 auto; }
}