:root { --ink:#17231f; --muted:#718078; --paper:#f5f5ef; --surface:#fff; --line:#dce4dd; --forest:#1d5544; --forest-dark:#103b2f; --lime:#dff5a4; font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; }
html,body { min-height:100%; margin:0; }
body { background:radial-gradient(circle at 82% 4%,rgba(223,245,164,.55),transparent 28rem),radial-gradient(circle at 5% 70%,rgba(242,163,110,.11),transparent 25rem),var(--paper); }
a { color:inherit; text-decoration:none; }
button,input,select { font:inherit; }
.profile-header { display:flex; width:min(100% - 48px,1160px); min-height:82px; align-items:center; justify-content:space-between; margin:auto; border-bottom:1px solid rgba(220,228,221,.75); }
.profile-brand { display:inline-flex; gap:11px; align-items:center; font-size:20px; font-weight:850; letter-spacing:-.04em; }
.profile-brand img { width:42px; height:42px; object-fit:contain; }
.skip-link { padding:9px 15px; border:1px solid var(--line); border-radius:999px; color:var(--forest); background:rgba(255,255,255,.72); font-size:12px; font-weight:800; }
.profile-main { width:min(100% - 48px,1020px); margin:auto; padding:42px 0 90px; }
.steps { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:24px; color:#8a968f; font-size:11px; }
.steps i { width:34px; height:1px; background:#cbd6ce; }
.steps strong { color:var(--forest); }
.profile-card { display:grid; grid-template-columns:minmax(250px,.72fr) minmax(0,1.45fr); overflow:hidden; border:1px solid rgba(29,85,68,.14); border-radius:28px; background:rgba(255,255,255,.9); box-shadow:0 24px 70px rgba(26,61,48,.1); }
.profile-intro { padding:48px 38px; color:#fff; background:var(--forest); }
.eyebrow { margin:0 0 16px; color:var(--lime); font-size:10px; font-weight:850; letter-spacing:.2em; }
.profile-intro h1 { margin:0 0 18px; font-size:clamp(30px,4vw,46px); line-height:1.08; letter-spacing:-.06em; }
.profile-intro p:last-child { margin:0; color:rgba(255,255,255,.72); font-size:13px; line-height:1.85; }
.profile-form { padding:38px; }
.field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.field-grid label { display:grid; gap:8px; }
.field-grid label>span { color:#58675f; font-size:12px; font-weight:800; }
.field-grid input,.field-grid select { width:100%; min-height:46px; padding:0 13px; border:1px solid var(--line); border-radius:11px; outline:none; color:var(--ink); background:#fff; }
.field-grid input:focus,.field-grid select:focus { border-color:rgba(29,85,68,.52); box-shadow:0 0 0 4px rgba(223,245,164,.28); }
.field-grid input::placeholder { color:#a6b0aa; }
.field-wide { grid-column:1/-1; }
.form-actions { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:28px; }
.form-actions>a { color:var(--muted); font-size:12px; font-weight:750; }
.form-actions button { display:inline-flex; min-height:50px; align-items:center; gap:16px; padding:0 22px; border:0; border-radius:13px; color:#fff; background:var(--forest); cursor:pointer; font-weight:850; box-shadow:0 10px 24px rgba(29,85,68,.2); }
.form-actions button:hover { background:var(--forest-dark); transform:translateY(-1px); }
.form-actions button b { color:var(--lime); font-size:19px; }
.save-status { margin:15px 0 0; color:var(--forest); font-size:12px; text-align:right; }
.profile-footer { display:flex; width:min(100% - 48px,1160px); min-height:64px; align-items:center; justify-content:space-between; margin:auto; border-top:1px solid var(--line); color:#87938b; font-size:10px; }
@media (max-width:760px) { .profile-card { grid-template-columns:1fr; } .profile-intro { padding:34px 26px; } .profile-form { padding:26px; } }
@media (max-width:560px) { .profile-header,.profile-main,.profile-footer { width:min(100% - 28px,1020px); } .profile-main { padding-top:28px; } .steps { gap:7px; } .steps i { width:18px; } .field-grid { grid-template-columns:1fr; } .field-wide { grid-column:auto; } .form-actions { align-items:stretch; flex-direction:column-reverse; } .form-actions button { justify-content:center; } }