:root {
    --bg: #eef6fb;
    --bg-2: #dbeaf5;
    --surface: rgba(255,255,255,0.88);
    --line: #bfd7e7;
    --ink: #163247;
    --muted: #5b7a90;
    --accent: #4aa3d8;
    --accent-2: #2f6d91;
}
* { box-sizing: border-box; }
body.q10-body {
    margin:0; min-height:100vh; font-family:"Microsoft YaHei", sans-serif; color:var(--ink);
    background: linear-gradient(160deg, var(--bg) 0%, var(--bg-2) 100%);
    padding:30px 16px;
}
.q10-wrap { width:min(1080px,100%); margin:0 auto; display:grid; grid-template-columns:1.1fr .9fr; gap:22px; }
.q10-hero, .q10-panel {
    border:1px solid var(--line); border-radius:30px; background:var(--surface);
    box-shadow:0 20px 40px rgba(65, 101, 126, 0.12); padding:34px;
}
.q10-hero { min-height:620px; display:flex; flex-direction:column; justify-content:center; }
.q10-hero h1 { margin:0 0 16px; font-size:50px; line-height:1.08; }
.q10-hero p, .q10-remark { color:var(--muted); line-height:1.9; }
.q10-remark { margin-top:20px; padding:14px 16px; border-radius:18px; background:#f5fbff; }
.q10-panel h2 { margin:0; font-size:30px; }
.q10-sub { margin:10px 0 0; color:var(--muted); }
.q10-error { margin-top:18px; color:#c2410c; }
.q10-form { margin-top:18px; }
.q10-field-wrap + .q10-field-wrap { margin-top:16px; }
.q10-field-wrap label { display:block; margin-bottom:8px; color:#49667a; }
.q10-input {
    width:100%; padding:14px 16px; border-radius:16px; border:1px solid var(--line);
    background:#fff; color:var(--ink); outline:none;
}
.q10-input:focus { border-color:var(--accent); box-shadow:0 0 0 4px rgba(74,163,216,0.12); }
.q10-submit {
    width:100%; margin-top:22px; border:none; border-radius:18px; padding:15px 18px; cursor:pointer;
    background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; font-weight:700;
}
@media (max-width: 920px) { .q10-wrap { grid-template-columns:1fr; } .q10-hero { min-height:auto; } .q10-hero h1 { font-size:40px; } }