:root { --ink: #172018; --muted: #4f5d53; --line: #c7d0ca; --paper: #eef1eb; --card: #fff; --accent: #185c42; --accent-strong: #144f38; --danger: #9b2d20; }
* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; min-height: 100vh; background: var(--paper); color: var(--ink); font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif; }
main { width: min(760px, calc(100% - 32px)); margin: 0 auto; padding: 64px 0; }
header { display: grid; gap: 10px; margin-bottom: 28px; }
h1 { margin: 0; font-size: clamp(38px, 8vw, 72px); line-height: 1; }
p { color: var(--muted); line-height: 1.65; }
form, .workspace { display: grid; gap: 16px; padding: 24px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
label { display: grid; gap: 7px; font-weight: 700; }
input { min-height: 46px; border: 1px solid var(--line); border-radius: 7px; padding: 0 12px; font: inherit; color: var(--ink); }
input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
button { min-height: 44px; border: 1px solid #8bb6dd; border-radius: 7px; padding: 0 16px; background: #e8f3ff; color: #173b62; font-weight: 700; cursor: pointer; }
button:hover, button:focus-visible { border-color: #3e83c0; outline: 2px solid #c4e1fb; outline-offset: 1px; }
button[aria-disabled="true"] { opacity: 0.72; cursor: wait; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.error { color: var(--danger); }
.muted { color: var(--muted); font-size: 14px; }
[hidden] { display: none !important; }