:root { color-scheme: only light; }
* { box-sizing: border-box; }
body { margin: 0; background: #edf3f8; color: #12345b; font-family: "Microsoft YaHei", sans-serif; }
button, input, textarea { font: inherit; }
.survey-app { width: 100%; max-width: 480px; min-height: 100vh; min-height: 100dvh; margin: auto; padding-bottom: 36px; background: #eff5fb; }
.survey-app .topbar { height: 60px; display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; text-align: center; background: white; padding: 0 12px; }
.survey-app .topbar.qc-top-navigation { display: grid !important; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 0 !important; }
.survey-app .topbar > strong { text-align: center; font-size: 17px; }
.survey-app .back { color: #12345b; text-decoration: none; font-size: 28px; }
[data-survey-root] { padding: 20px; }
[data-survey-root] > h1 { font-size: 26px; margin: 8px 0 12px; }
.survey-card, .survey-section { display: block; background: white; border: 1px solid #e0eaf5; border-radius: 18px; padding: 22px; margin: 0 0 18px; }
.survey-card { color: inherit; text-decoration: none; }
.survey-card h2, .survey-section h2 { margin: 0 0 12px; font-size: 19px; }
.survey-card p, .survey-notice { color: #60758e; line-height: 1.8; }
.survey-card .survey-start { display: block; color: #075cff; margin-top: 16px; }
a.survey-card { padding: 16px; margin-bottom: 12px; }
a.survey-card h2 { margin: 0 0 6px; font-size: 18px; }
a.survey-card p { margin: 6px 0; line-height: 1.5; }
a.survey-card .survey-start { margin-top: 8px; line-height: 1.5; }
.survey-question { padding: 14px 0; scroll-margin-top: 85px; }
.survey-question > label, .survey-question > .survey-label { display: block; font-weight: 600; margin-bottom: 10px; line-height: 1.7; }
.survey-required { color: #bd2727; margin-left: 5px; }
.survey-hint { font-size: 13px; color: #65758a; line-height: 1.7; }
.survey-options { display: grid; gap: 9px; }
.survey-option { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid #dce6f2; border-radius: 10px; line-height: 1.65; cursor: pointer; }
.survey-option:has(input:checked) { border-color: #1260f5; background: #f0f6ff; }
.survey-option input, .survey-consent input { appearance: none; flex: 0 0 20px; width: 20px; height: 20px; border: 1px solid #94a7c0; border-radius: 5px; margin: 3px 0 0; display: grid; place-content: center; background: white; }
.survey-option input[type=radio] { border-radius: 50%; }
.survey-option input:checked, .survey-consent input:checked { background: #125cff; border-color: #125cff; }
.survey-option input:checked::after, .survey-consent input:checked::after { content: ''; width: 8px; height: 8px; border-radius: 2px; background: white; }
.survey-question > input, .survey-question textarea { width: 100%; padding: 13px; border: 1px solid #c9d8ea; border-radius: 10px; background: white; color: inherit; font-size: 16px; }
.survey-question textarea { min-height: 110px; resize: vertical; }
.survey-consent { display: flex; gap: 10px; align-items: flex-start; line-height: 1.8; font-size: 14px; margin: 18px 0; }
.survey-primary, .survey-retry { padding: 14px 20px; border: 0; border-radius: 12px; background: #115cff; color: white; cursor: pointer; }
.survey-primary { width: 100%; }
.survey-primary:disabled { opacity: .55; cursor: wait; }
.survey-error { color: #b52020; line-height: 1.7; min-height: 26px; }
.survey-question[aria-invalid=true] { border-left: 3px solid #b52020; padding-left: 12px; }
.survey-field-error { margin:8px 0 0; color:#b52020; font-size:14px; line-height:1.6; }
.survey-question input[aria-invalid=true], .survey-question textarea[aria-invalid=true] { border-color:#b52020; }
.survey-question .survey-options:has(input[aria-invalid=true]) { border-radius:10px; outline:1px solid #b52020; outline-offset:3px; }
.survey-app :focus-visible { outline: 3px solid #78aaff; outline-offset: 3px; }
.survey-app [hidden] { display: none !important; }
.survey-success-actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:20px; }
.survey-success-actions .survey-primary { width:auto; flex:1 1 200px; margin:0; }
.survey-success-actions .survey-start { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:8px 16px; box-sizing:border-box; }
@media (max-width: 400px) { [data-survey-root] { padding: 14px; } .survey-section { padding: 16px; } }

.survey-draft-status:empty { display:none; }