*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --red: #c0392b; --orange: #e67e22; --yellow: #f39c12;
  --green-light: #27ae60; --green-dark: #1e8449;
  --blue: #1565C0; --bg: #0d1b2a; --card: #1a2d42;
  --text: #e8eaf0; --muted: #8899aa; --border: #2a3f58;
}

body { font-family: 'Segoe UI', system-ui, sans-serif; background: var(--bg);
       color: var(--text); min-height: 100vh; }
[dir="rtl"] body { font-family: 'Segoe UI', 'Tahoma', system-ui, sans-serif; }

.header { background: #C91F3F; padding: 12px 20px;
          display: flex; justify-content: space-between; align-items: center; }
.header-title { font-size: 16px; font-weight: 600; color: white; }
.lang-switcher { display: flex; gap: 6px; }
.lang-btn { background: rgba(255,255,255,0.15); border: none; color: white;
            padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 13px;
            text-decoration: none; display: inline-block; }
.lang-btn.active { background: white; color: #C91F3F; font-weight: 700; }
.lang-btn:hover { background: rgba(255,255,255,0.3); }

.progress-bar { background: var(--border); height: 4px; }
.progress-fill { background: var(--blue); height: 4px; transition: width 0.3s; }

.container { max-width: 700px; margin: 0 auto; padding: 32px 20px; }

.block-title { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.block-subtitle { color: var(--muted); font-size: 14px; margin-bottom: 32px; }

.question-card { background: var(--card); border-radius: 12px; padding: 24px;
                 margin-bottom: 24px; border: 1px solid var(--border); }
.question-text { font-size: 15px; line-height: 1.6; margin-bottom: 20px; }

.scale { display: flex; gap: 8px; flex-wrap: wrap; }
.scale-btn { flex: 1; min-width: 52px; border: none; border-radius: 10px;
             padding: 12px 4px; text-align: center; cursor: pointer;
             transition: transform 0.1s, opacity 0.1s; }
.scale-btn:hover { transform: scale(1.05); }
.scale-btn.selected { outline: 3px solid white; transform: scale(1.08); }
.scale-btn .emoji { font-size: 24px; display: block; margin-bottom: 4px; }
.scale-btn .num { font-size: 13px; font-weight: 700; color: white; }
.scale-btn-1 { background: var(--red); }
.scale-btn-2 { background: var(--orange); }
.scale-btn-3 { background: var(--yellow); }
.scale-btn-4 { background: var(--green-light); }
.scale-btn-5 { background: var(--green-dark); }
.scale-btn-na { background: #3a4a5a; }
.scale-btn-na .emoji { font-size: 18px; }
.scale-hint { display: flex; justify-content: space-between;
              color: var(--muted); font-size: 11px; margin-top: 8px; padding: 0 4px; }

.nav-buttons { display: flex; justify-content: space-between; margin-top: 32px; }
[dir="rtl"] .nav-buttons { flex-direction: row-reverse; }
.btn { padding: 12px 28px; border: none; border-radius: 8px;
       font-size: 15px; cursor: pointer; font-weight: 600; }
.btn-primary { background: var(--blue); color: white; }
.btn-primary:hover { background: #1976D2; }
.btn-secondary { background: var(--card); color: var(--text);
                 border: 1px solid var(--border); text-decoration: none;
                 display: inline-block; }
.btn-secondary:hover { background: var(--border); }

.form-group { margin-bottom: 20px; }
.form-label { display: block; font-size: 14px; color: var(--muted);
              margin-bottom: 8px; font-weight: 500; }
.form-input { width: 100%; background: var(--card); border: 1px solid var(--border);
              color: var(--text); padding: 12px 16px; border-radius: 8px;
              font-size: 15px; }
.form-input:focus { outline: 2px solid var(--blue); border-color: var(--blue); }
textarea.form-input { min-height: 120px; resize: vertical; }

.danke-box { text-align: center; padding: 60px 20px; }
.danke-icon { font-size: 64px; margin-bottom: 16px; }
.danke-title { font-size: 28px; font-weight: 700; margin-bottom: 12px; }
.danke-text { color: var(--muted); font-size: 16px; }

.step-info { color: var(--muted); font-size: 13px; margin-bottom: 4px; }