:root { font-family: Inter, "Microsoft YaHei", Arial, sans-serif; color: #17252b; background: #f3f6f7; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; display: grid; place-items: center; padding: 24px; background: linear-gradient(135deg, #eaf4f0 0%, #f7faf9 48%, #edf1f6 100%); }
.shell { width: min(1040px, 100%); display: grid; grid-template-columns: 1.05fr .95fr; min-height: 590px; background: #fff; border: 1px solid #d9e3e3; border-radius: 10px; overflow: hidden; box-shadow: 0 20px 60px #18363a1c; }
.aside { padding: 54px; background: #143d39; color: #edf8f5; display: flex; flex-direction: column; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 750; letter-spacing: 0; }
.mark { width: 32px; height: 32px; border: 7px solid #65d4ae; border-radius: 7px 14px 7px 14px; transform: rotate(20deg); }
.aside h1 { font-size: 35px; line-height: 1.24; margin: 0; letter-spacing: 0; }
.aside p { color: #b9d4cf; font-size: 14px; line-height: 1.8; max-width: 330px; }
.aside small { color: #8fb6ae; line-height: 1.7; }
.panel { padding: 48px; align-self: center; width: 100%; max-width: 480px; }
.panel h2 { margin: 0 0 8px; font-size: 25px; letter-spacing: 0; }
.intro { color: #63777a; margin: 0 0 30px; font-size: 14px; line-height: 1.65; }
.tabs { display: flex; gap: 20px; border-bottom: 1px solid #dbe4e4; margin-bottom: 25px; }
.tabs button { background: transparent; border: 0; border-bottom: 3px solid transparent; color: #62777a; padding: 0 0 11px; font-weight: 700; cursor: pointer; }
.tabs button.selected { color: #176f5e; border-color: #176f5e; }
form { display: grid; gap: 15px; }
label { display: grid; gap: 7px; color: #435c5f; font-weight: 650; font-size: 13px; }
input, select { width: 100%; height: 42px; border: 1px solid #c8d6d5; border-radius: 5px; background: #fff; color: #17252b; padding: 0 12px; font: inherit; }
input:focus, select:focus { outline: 2px solid #83bfae; border-color: #3c917c; }
button { font: inherit; }
.primary { height: 43px; border: 0; border-radius: 5px; background: #176f5e; color: #fff; font-weight: 700; cursor: pointer; margin-top: 6px; }
.primary:hover { background: #105947; }.primary:disabled { opacity: .6; cursor: wait; }
.error { min-height: 21px; color: #b4483d; font-size: 13px; line-height: 1.5; margin: 8px 0 0; }.hint { color: #728689; font-size: 12px; line-height: 1.65; margin: 4px 0 0; }
[hidden] { display: none !important; }
@media (max-width: 760px) { body { padding: 0; display: block; }.shell { min-height: 100vh; grid-template-columns: 1fr; border: 0; border-radius: 0; }.aside { min-height: 230px; padding: 28px; }.aside h1 { font-size: 25px; }.aside p { display: none; }.panel { padding: 34px 28px; } }

/* Shared product polish: a calmer, denser workspace that still feels lightweight. */
body { background: radial-gradient(circle at 12% 8%, #eef8f4 0, transparent 34%), linear-gradient(135deg, #f7fafb 0%, #eef2f6 100%); }
.shell { border-radius: 18px; border-color: #dfe7e8; box-shadow: 0 28px 80px rgba(24,54,58,.14); }
.aside { padding: 58px; background: linear-gradient(145deg, #123b38 0%, #174f47 56%, #17373d 100%); }
.mark { box-shadow: 0 0 0 6px rgba(101,212,174,.11); }
.panel { padding: 54px 56px; }
.panel h2 { letter-spacing: -.45px; }
.tabs { gap: 26px; }
.tabs button { padding-bottom: 13px; }
input, select { border-radius: 9px; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
input:focus, select:focus { box-shadow: 0 0 0 4px rgba(60,145,124,.13); }
.primary { border-radius: 9px; box-shadow: 0 7px 16px rgba(23,111,94,.18); transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.primary:hover { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(23,111,94,.22); }
.link { border: 0; background: transparent; color: #176f5e; cursor: pointer; padding: 6px 0; font-weight: 650; }
.link:hover { color: #105947; text-decoration: underline; }
@media (max-width: 760px) { .shell { border-radius: 0; } .panel { padding: 38px 28px 48px; } }