/* ФинКарта — экран «Обратная связь» (S5). Все цвета — через семантические токены (tokens.css).
   Локально заданы только цвета звёзд рейтинга. */
.s5{ --s5-star:#E0A200; --s5-star-empty:var(--fk-border-strong); max-width:680px; margin-left:auto; margin-right:auto; }
[data-theme="dark"] .s5{ --s5-star:#E2B64E; --s5-star-empty:var(--fk-border-strong); }

.s5-head{ display:flex; gap:14px; align-items:flex-start; margin-bottom:4px; }
.s5-badge{ flex:none; width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  background:var(--fk-accent-soft); color:var(--fk-accent); border:1px solid var(--fk-accent-line); }
.s5-eyebrow{ font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--fk-text-tertiary); font-weight:600; }
.s5 h1{ font-size:23px; font-weight:700; margin:2px 0 0; letter-spacing:-.01em; color:var(--fk-text-primary); }
.s5-lead{ color:var(--fk-text-secondary); font-size:14px; margin:14px 0 20px; max-width:58ch; }
.s5-lead b{ color:var(--fk-text-primary); font-weight:600; }

.s5-q{ background:var(--fk-surface); border:1px solid var(--fk-border); border-radius:14px;
  padding:16px 16px 15px; margin-bottom:12px; box-shadow:var(--fk-shadow-1); scroll-margin-top:16px;
  transition:border-color .18s, background .18s; }
.s5-q.miss{ border-color:var(--fk-status-error); background:var(--fk-status-error-soft); }
.s5-qtop{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.s5-qnum{ color:var(--fk-text-tertiary); font-weight:700; }
.s5-qlabel{ font-size:15px; font-weight:600; color:var(--fk-text-primary); }
.s5-qhelp{ color:var(--fk-text-secondary); font-size:12.5px; margin-top:2px; }
.s5-miss-note{ color:var(--fk-status-error); font-size:12.5px; font-weight:600; margin-top:7px; }

.s5-rate{ display:flex; align-items:center; gap:12px; margin-top:12px; flex-wrap:wrap; }
.s5-stars{ display:flex; gap:clamp(2px,1.4vw,7px); flex:1 1 auto; min-width:0; max-width:430px; }
.s5-star{ flex:1 1 0; min-width:0; max-width:40px; background:none; border:0; padding:3px 0; cursor:pointer;
  color:var(--s5-star-empty); border-radius:8px; display:flex; flex-direction:column; align-items:center; gap:3px;
  transition:color .12s, transform .08s; }
.s5-star svg{ width:clamp(20px,6.2vw,28px); height:auto; }
.s5-snum{ font-family:var(--fk-mono,"PT Mono",monospace); font-size:10.5px; line-height:1; color:var(--fk-text-tertiary); transition:color .12s; }
.s5-star:hover{ transform:translateY(-1px); }
.s5-star.on{ color:var(--s5-star); }
.s5-star.on .s5-snum{ color:var(--fk-text-secondary); }
.s5-star:focus-visible{ outline:2px solid var(--fk-accent); outline-offset:2px; }
.s5-val{ flex:none; min-width:116px; text-align:right; font-size:13px; color:var(--fk-text-secondary); }
.s5-val .num{ font-family:var(--fk-mono,"PT Mono",monospace); font-size:16px; color:var(--fk-text-primary); }
.s5-val .num.empty{ color:var(--fk-text-tertiary); }
.s5-val .word{ display:block; font-size:11px; color:var(--fk-text-tertiary); }

.s5-why{ margin-top:11px; }
.s5-inp{ width:100%; font:inherit; font-size:13.5px; color:var(--fk-text-primary); background:var(--fk-surface-sunken);
  border:1px solid var(--fk-border); border-radius:9px; padding:9px 11px; }
.s5-inp::placeholder{ color:var(--fk-text-tertiary); }
.s5-inp:focus{ outline:2px solid var(--fk-accent); outline-offset:1px; border-color:var(--fk-accent); }

.s5-opt{ background:var(--fk-surface); border:1px solid var(--fk-border); border-radius:14px; padding:16px;
  margin-bottom:12px; box-shadow:var(--fk-shadow-1); }
.s5-opt-label{ font-size:15px; font-weight:600; color:var(--fk-text-primary); }
.s5-opt-note{ color:var(--fk-text-tertiary); font-weight:400; font-size:13px; }
.s5-opt-sub{ color:var(--fk-text-secondary); font-size:12.5px; margin:2px 0 12px; }
.s5-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.s5-chip{ font:inherit; font-size:13px; padding:7px 13px; border-radius:999px; cursor:pointer;
  background:var(--fk-surface-sunken); border:1px solid var(--fk-border); color:var(--fk-text-primary); transition:.15s; }
.s5-chip:hover{ border-color:var(--fk-border-strong); }
.s5-chip.sel{ background:var(--fk-accent-soft); border-color:var(--fk-accent); color:var(--fk-accent);
  box-shadow:inset 0 0 0 1px var(--fk-accent); }
.s5-chip:focus-visible{ outline:2px solid var(--fk-accent); outline-offset:2px; }
.s5-ta{ width:100%; min-height:92px; resize:vertical; font:inherit; font-size:14px; color:var(--fk-text-primary);
  background:var(--fk-surface-sunken); border:1px solid var(--fk-border); border-radius:9px; padding:11px 12px; margin-top:12px; }
.s5-ta:focus{ outline:2px solid var(--fk-accent); outline-offset:1px; border-color:var(--fk-accent); }
.s5-count{ text-align:right; font-size:11.5px; color:var(--fk-text-tertiary); margin-top:5px; }

.s5-foot{ margin-top:20px; }
.s5-submit{ width:100%; font:inherit; font-size:15px; font-weight:600; color:var(--fk-on-accent); background:var(--fk-accent);
  border:0; border-radius:12px; padding:14px; cursor:pointer; transition:background .15s; }
.s5-submit:hover{ background:var(--fk-accent-hover); }
.s5-submit:disabled{ opacity:.6; cursor:default; }
.s5-submit:focus-visible{ outline:2px solid var(--fk-accent); outline-offset:3px; }
.s5-formerr{ margin-top:12px; background:var(--fk-status-error-soft); border:1px solid var(--fk-status-error-line);
  color:var(--fk-status-error); border-radius:9px; padding:11px 13px; font-size:13.5px; font-weight:600; }
.s5-privacy{ color:var(--fk-text-tertiary); font-size:12px; margin-top:14px; text-align:center; }

.s5-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.s5-done{ background:var(--fk-surface); border:1px solid var(--fk-border); border-radius:14px; padding:26px 20px;
  box-shadow:var(--fk-shadow-1); text-align:center; }
.s5-done-ic{ width:52px; height:52px; border-radius:50%; background:var(--fk-status-verified-soft); color:var(--fk-status-verified);
  display:grid; place-items:center; margin:0 auto 14px; }
.s5-done h2{ font-size:19px; margin:0 0 6px; font-weight:700; color:var(--fk-text-primary); }
.s5-done p{ color:var(--fk-text-secondary); font-size:14px; margin:0 auto; max-width:44ch; }
.s5-score{ font-family:var(--fk-mono,"PT Mono",monospace); font-size:30px; color:var(--fk-text-primary); margin:16px 0 4px; }
.s5-score small{ font-size:13px; color:var(--fk-text-secondary); font-family:inherit; }
.s5-again{ margin-top:20px; font:inherit; font-size:14px; font-weight:600; color:var(--fk-accent); background:none;
  border:1px solid var(--fk-border-strong); border-radius:9px; padding:9px 16px; cursor:pointer; }
.s5-again:hover{ background:var(--fk-surface-sunken); }

@media (max-width:560px){
  .s5-rate{ justify-content:center; }
  .s5-stars{ max-width:none; flex-basis:100%; }
  .s5-val{ width:100%; min-width:0; text-align:center; margin-top:2px; }
}
@media (prefers-reduced-motion:reduce){ .s5-star,.s5-q,.s5-chip,.s5-submit{ transition:none; } }