:root { color-scheme: light dark; --bg:#fff7f1; --surface:rgba(255,255,255,.84); --surface-strong:#fff; --text:#2d2635; --muted:#766b78; --line:rgba(104,73,105,.13); --accent:#e85d75; --accent-2:#7d65d8; --good:#26796c; --warn:#9b671c; --shadow:0 22px 70px rgba(91,56,92,.13); font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif; }
* { box-sizing:border-box; }
html { min-height:100%; background:var(--bg); }
body { min-height:100vh; margin:0; padding:calc(env(safe-area-inset-top) + 18px) max(16px,env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 24px) max(16px,env(safe-area-inset-left)); color:var(--text); background:radial-gradient(circle at 12% 8%,rgba(232,93,117,.22),transparent 30rem),radial-gradient(circle at 90% 18%,rgba(125,101,216,.19),transparent 28rem),var(--bg); }
button,a,input,textarea { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
.shell { width:min(680px,100%); margin:0 auto; display:grid; gap:16px; }
.hero { min-height:132px; display:flex; align-items:center; gap:18px; padding:10px 8px; }
.hero img { width:104px; height:104px; object-fit:cover; border:3px solid rgba(255,255,255,.8); border-radius:28px; box-shadow:0 16px 38px rgba(96,57,100,.22); }
.hero h1,.card h2 { margin:.12rem 0; line-height:1.18; }
.hero h1 { font-size:clamp(1.75rem,7vw,2.5rem); }
.hero p:not(.eyebrow),.card p { margin:.45rem 0 0; color:var(--muted); line-height:1.65; }
.eyebrow { margin:0!important; color:var(--accent)!important; font-size:.68rem; font-weight:900; letter-spacing:.16em; }
.card { padding:20px; border:1px solid var(--line); border-radius:24px; background:var(--surface); box-shadow:var(--shadow); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); }
.section-title { display:flex; justify-content:space-between; align-items:start; gap:12px; }
.badge { padding:.4rem .65rem; border-radius:999px; background:rgba(155,103,28,.12); color:var(--warn); font-size:.72rem; font-weight:800; white-space:nowrap; }
.badge.ready { color:var(--good); background:rgba(38,121,108,.12); }
.badge.error { color:#b83c51; background:rgba(184,60,81,.12); }
.status-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin:18px 0 12px; }
.status-grid span { min-width:0; display:grid; gap:3px; padding:11px 12px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.35); }
.status-grid small { color:var(--muted); font-size:.65rem; }
.status-grid b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.82rem; }
.notice,.action-message { min-height:1.5em; font-size:.78rem; }
.action-card ol { margin:16px 0 20px; padding-left:1.3rem; color:var(--muted); font-size:.82rem; line-height:1.8; }
.primary,.secondary { min-height:48px; display:inline-flex; align-items:center; justify-content:center; border-radius:14px; border:0; padding:.75rem 1rem; font-weight:850; text-decoration:none; cursor:pointer; }
.primary { width:100%; color:white; background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 12px 28px rgba(145,74,137,.22); }
.secondary { color:var(--text); border:1px solid var(--line); background:var(--surface-strong); }
button:disabled { opacity:.48; cursor:not-allowed; }
.completed-actions { display:grid; grid-template-columns:1fr auto; gap:10px; margin-top:16px; }
.completed-actions textarea { grid-column:1/-1; }
textarea,input { width:100%; margin-top:7px; padding:.8rem; border:1px solid var(--line); border-radius:12px; color:var(--text); background:var(--surface-strong); outline:none; }
textarea:focus,input:focus { border-color:var(--accent-2); box-shadow:0 0 0 3px rgba(125,101,216,.12); }
.advanced summary { cursor:pointer; font-weight:800; }
.advanced label { display:block; margin-top:16px; color:var(--muted); font-size:.74rem; }
.advanced .secondary { margin-top:12px; }
.advanced p { font-size:.7rem; }
footer { display:flex; justify-content:space-between; gap:12px; padding:8px 12px; color:var(--muted); font-size:.67rem; }
footer span { text-align:right; }
@media (max-width:440px) { .hero { align-items:flex-start; } .hero img { width:86px;height:86px;border-radius:23px; } .card { padding:17px;border-radius:20px; } .completed-actions { grid-template-columns:1fr; } .completed-actions textarea { grid-column:auto; } footer { display:grid; } footer span { text-align:left; } }
@media (prefers-color-scheme:dark) { :root { --bg:#12101e; --surface:rgba(27,24,43,.86); --surface-strong:#242038; --text:#ece9f4; --muted:#aca5ba; --line:rgba(218,205,237,.12); --accent:#df7183; --accent-2:#8c79dc; --good:#75b9ad; --warn:#c3a36a; --shadow:0 24px 70px rgba(0,0,0,.24); } body { background:radial-gradient(circle at 12% 8%,rgba(184,74,104,.17),transparent 30rem),radial-gradient(circle at 90% 18%,rgba(113,92,193,.17),transparent 28rem),var(--bg); } .status-grid span { background:rgba(255,255,255,.025); } }