:root {
  --font-sans: 'Inter', system-ui, sans-serif;
  --color-bg: #F7F7F8;
  --color-surface: #FFFFFF;
  --color-border: #E5E5E8;
  --color-border-strong: #D4D4D8;
  --color-text: #18181B;
  --color-text-secondary: #6B7280;
  --color-text-muted: #9CA3AF;
  --color-accent: #6366F1;
  --color-accent-bg: #EEF2FF;
  --color-success: #059669;
  --color-success-bg: #ECFDF5;
  --color-danger: #DC2626;
  --color-danger-bg: #FEF2F2;
  --radius: 10px;
  --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 48px;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-sans); background: var(--color-bg); color: var(--color-text); }
.page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: var(--space-5) var(--space-2); }
.brand { display:flex; align-items:center; gap:8px; margin-bottom: 20px; }
.brand-dot { width:22px; height:22px; border-radius:6px; background: var(--color-accent); }
.brand-name { font-size: 13px; color: var(--color-text-secondary); }
.card { width: 100%; max-width: 480px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; padding: 40px 36px; box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.04); position: relative; }
.lang-toggle { position:absolute; top:16px; right:16px; display:flex; align-items:center; gap:6px; font-size:12px; }
.lang-toggle button { background:none; border:none; padding:2px 4px; font-family: var(--font-sans); font-size:12px; color: var(--color-text-muted); cursor:pointer; border-radius:4px; transition: color .15s ease; }
.lang-toggle button.active { color: var(--color-accent); font-weight:600; }
.lang-toggle button:hover { color: var(--color-text); }
.lang-sep { color: var(--color-border-strong); }
.lang-fade { transition: opacity .15s ease; }
.lang-fade.dimmed { opacity: 0; }
.title { font-size: 22px; font-weight: 500; text-align:center; margin: 0 0 4px; }
.subtitle { font-size: 14px; color: var(--color-text-secondary); text-align:center; margin: 0 0 var(--space-4); }
.question { margin-bottom: var(--space-1); }
.divider { border-top: 1px solid var(--color-border); margin-top: var(--space-3); padding-top: var(--space-3); }
.question-label { display:block; font-size: 13px; color: var(--color-text-secondary); margin-bottom: 12px; }
.stars { display:flex; gap:6px; justify-content:center; margin-bottom: 8px; }
.star { font-size: 32px; color: var(--color-border-strong); cursor:pointer; transition: color .15s, transform .15s; }
.star.filled { color: var(--color-accent); transform: scale(1.05); }
.star-label { font-size: 13px; color: var(--color-text-muted); text-align:center; min-height: 18px; margin:0; }
.pill-row { display:flex; gap:10px; }
.pill { flex:1; padding:10px; border-radius: var(--radius); border:1px solid var(--color-border); background: var(--color-surface); font-family: var(--font-sans); font-size:14px; cursor:pointer; transition: all .15s; }
.pill-yes { background: var(--color-success-bg); border-color: var(--color-success); color: var(--color-success); }
.pill-no { background: var(--color-danger-bg); border-color: var(--color-danger); color: var(--color-danger); }
.effort-row { display:flex; gap:6px; }
.effort-btn { flex:1; padding:10px 0; border-radius: var(--radius); border:1px solid var(--color-border); background: var(--color-surface); font-family: var(--font-sans); font-size:14px; cursor:pointer; transition: all .15s; }
.effort-btn.selected { background: var(--color-accent-bg); border-color: var(--color-accent); color: var(--color-accent); }
.effort-labels { display:flex; justify-content: space-between; margin-top:6px; }
.effort-labels span { font-size: 11px; color: var(--color-text-muted); }
textarea { width:100%; min-height:70px; padding:10px 12px; border-radius: var(--radius); border:1px solid var(--color-border); background:#FAFAFA; font-family: var(--font-sans); font-size:14px; resize: vertical; }
.select-wrap select { width:100%; padding:10px 12px; border-radius: var(--radius); border:1px solid var(--color-border); background: #FAFAFA; font-family: var(--font-sans); font-size:14px; cursor:pointer; }
.submit-btn { width:100%; padding:12px; border-radius: var(--radius); border:none; background: var(--color-accent); color:#fff; font-size:14px; font-weight:500; margin-top: var(--space-4); cursor:pointer; transition: opacity .2s; }
.submit-btn:disabled { opacity:.4; cursor:not-allowed; }
.recaptcha-note { font-size:11px; color: var(--color-text-muted); text-align:center; margin-top:12px; line-height:1.5; }
.success { text-align:center; padding: 24px 0; }
.success-icon { width:48px; height:48px; border-radius:50%; background: var(--color-success-bg); color: var(--color-success); display:flex; align-items:center; justify-content:center; margin: 0 auto 16px; font-size:22px; }
.success-title { font-size:18px; font-weight:500; margin:0 0 4px; }
.success-subtitle { font-size:14px; color: var(--color-text-secondary); margin:0; }
.footer { font-size:12px; color: var(--color-text-muted); margin-top: 20px; }