* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--tg-theme-bg-color, #f4f6fb); color: var(--tg-theme-text-color, #172033); }
.app { max-width: 720px; margin: 0 auto; padding: 16px 14px 28px; }
header { padding: 8px 2px 14px; }
h1 { margin: 0; font-size: 28px; line-height: 1.1; }
.eyebrow { color: var(--tg-theme-hint-color, #64748b); font-size: 13px; margin-bottom: 4px; }
.card { background: var(--tg-theme-secondary-bg-color, #fff); border-radius: 18px; padding: 14px; margin-bottom: 12px; box-shadow: 0 8px 20px rgba(15, 23, 42, .05); }
.picker-guide-card { padding: 12px 14px; background: linear-gradient(135deg, #eef6ff, #f8fbff); border: 1px solid #dbeafe; box-shadow: 0 8px 20px rgba(37, 99, 235, .08); }
.guide-title { font-weight: 850; color:#1e3a8a; margin-bottom:4px; }
.guide-text { color:#334155; font-size:13px; line-height:1.42; }
.label { display:block; font-size: 13px; color: var(--tg-theme-hint-color, #64748b); margin-bottom: 8px; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.segmented button, .small-btn { border: 0; border-radius: 12px; padding: 12px; background: #edf2f7; color: #172033; font-weight: 700; }
.segmented button.active { background: var(--tg-theme-button-color, #2481cc); color: var(--tg-theme-button-text-color, #fff); }
.select { width:100%; border:1px solid #d8dee9; border-radius:12px; padding:12px; font-size:16px; background:#fff; color:#172033; font-weight:700; scroll-margin-top: 12px; }
.select:focus { border-color: var(--tg-theme-button-color, #2481cc); box-shadow: 0 0 0 3px rgba(36, 129, 204, .12); outline:0; }
.hint { margin-top:8px; color:var(--tg-theme-hint-color, #64748b); font-size:12px; line-height:1.35; }
.section-title { font-weight: 800; margin-bottom: 10px; }
.row-between { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.slots { display: grid; gap: 10px; }
.player-picker { position: relative; scroll-margin-top: 12px; }
.player-field { display:flex; align-items:center; gap:10px; min-height:62px; border:1px solid #d8dee9; border-radius:14px; background:#fff; padding:9px 10px; cursor:text; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.player-field:focus-within { border-color: var(--tg-theme-button-color, #2481cc); box-shadow: 0 0 0 3px rgba(36, 129, 204, .12); }
.player-field.selected { background:#eef6ff; border-color:#bfdbfe; }
.player-field.empty { min-height:58px; }
.player-input-box { min-width: 0; flex: 1; }
.player-input { width:100%; border:0; outline:0; padding:8px 0; background:transparent; color:#172033; font-size:16px; font-weight:750; }
.player-input::placeholder { color:#94a3b8; font-weight:600; }
.player-field-meta { margin-top:1px; color:#475569; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.player-field.empty .player-field-meta { display:none; }
.avatar { width:38px; height:38px; border-radius:50%; background:#dbeafe; color:#1e3a8a; display:flex; align-items:center; justify-content:center; overflow:hidden; flex:0 0 38px; font-weight:800; }
.avatar img { width:100%; height:100%; object-fit:cover; }
.clear-player { width:30px; height:30px; border:0; border-radius:50%; background:#e2e8f0; color:#334155; font-size:20px; line-height:1; display:flex; align-items:center; justify-content:center; flex:0 0 30px; transition: background .15s ease, opacity .15s ease, transform .12s ease; }
.clear-player:hover, .clear-player:focus { background:#cbd5e1; outline:0; }
.clear-player:active { transform:scale(.96); }
.clear-player.is-empty { opacity:.55; background:#f1f5f9; color:#64748b; }
.suggestions { position:absolute; z-index:20; top:calc(100% + 6px); left:0; right:0; max-height:280px; overflow:auto; background:#fff; border:1px solid #e2e8f0; border-radius:16px; box-shadow:0 18px 42px rgba(15, 23, 42, .18); padding:6px; }
.suggestion { display:flex; gap:10px; align-items:center; width:100%; padding:10px; border:0; border-radius:12px; background:#fff; text-align:left; color:#172033; }
.suggestion:hover, .suggestion:focus { background:#f1f5f9; outline:0; }
.suggestion:disabled { opacity:.52; }
.suggestion-empty { color:#64748b; font-size:13px; padding:12px; }
.name { font-weight:750; }
.meta { color:#64748b; font-size:12px; }
 .set-row { display:grid; grid-template-columns: 1fr auto 1fr auto; gap:8px; align-items:center; margin-bottom:8px; }
.score-separator { color:#64748b; font-weight:800; }
.score-field { display:flex; align-items:center; gap:6px; border:1px solid #d8dee9; border-radius:12px; padding:0 8px 0 12px; background:#fff; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.score-field:focus-within { border-color: var(--tg-theme-button-color, #2481cc); box-shadow: 0 0 0 3px rgba(36, 129, 204, .12); }
.score-field.winner { background:#ecfdf3; border-color:#86efac; box-shadow:0 0 0 3px rgba(34, 197, 94, .12); }
.score-field input { width:100%; min-width:0; border:0; outline:0; padding:12px 0; font-size:16px; background:transparent; color:#172033; font-weight:800; }
.score-field.winner input { color:#166534; }
.clear-score { width:28px; height:28px; border:0; border-radius:50%; background:#e2e8f0; color:#334155; font-size:19px; line-height:1; display:flex; align-items:center; justify-content:center; flex:0 0 28px; transition: background .15s ease, opacity .15s ease, transform .12s ease; }
.clear-score:hover, .clear-score:focus { background:#cbd5e1; outline:0; }
.clear-score:active { transform:scale(.96); }
.clear-score.is-empty { opacity:.5; background:#f1f5f9; color:#64748b; }
.input { width:100%; border:1px solid #d8dee9; border-radius:12px; padding:12px; font-size:16px; background:#fff; color:#172033; }
.remove-set { border:0; border-radius:12px; background:#fee2e2; color:#991b1b; padding:10px 12px; }
.remove-set:disabled { opacity:.45; }
.primary { width:100%; border:0; border-radius:16px; padding:15px; background:var(--tg-theme-button-color, #2481cc); color:var(--tg-theme-button-text-color, #fff); font-size:16px; font-weight:800; }
.primary:disabled { opacity:.65; }
.message { margin-top:12px; line-height:1.4; }
.message.ok { color:#15803d; }
.message.err { color:#b91c1c; }
.hidden { display:none; }
@media (max-width: 380px) {
  .app { padding-left: 10px; padding-right: 10px; }
  h1 { font-size: 25px; }
  .player-input { font-size:15px; }
  .guide-text { font-size:12px; }
  .set-row { grid-template-columns: 1fr auto 1fr 36px; gap:6px; }
  .score-field { padding-left:10px; padding-right:6px; }
  .clear-score { width:26px; height:26px; flex-basis:26px; }
}
.suggestion-empty.err { color:#b91c1c; }

.strong-hint { color:#334155; font-weight:700; }
.strong-hint.err { color:#b91c1c; }

.result-scroll-spacer {
  margin: 18px 0 8px;
  padding: 0;
  border-radius: 24px;
  overflow: hidden;
  background: #e8efe1;
  box-shadow: 0 16px 36px rgba(15, 23, 42, .12);
}
.result-scroll-spacer img {
  display: block;
  width: 100%;
  height: auto;
  opacity: .88;
}
@media (max-width: 420px) {
  .result-scroll-spacer { margin-top: 16px; border-radius: 20px; }
}

.voice-result-card {
  background: linear-gradient(145deg, #f5f9ff, #ffffff);
  border: 1px solid #dbeafe;
  box-shadow: 0 10px 24px rgba(37, 99, 235, .08);
}
.voice-title-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.voice-result-card .voice-title-row, .voice-result-card .voice-title-row > span:first-child { color:#0f172a; }
.voice-ai-badge {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:32px; height:24px; padding:0 9px; border-radius:999px;
  background:#e0e7ff; color:#3730a3; font-size:11px; font-weight:900; letter-spacing:.06em;
}
.voice-help { color:#475569; font-size:13px; line-height:1.45; margin:-2px 0 12px; }
.voice-record {
  width:100%; border:0; border-radius:15px; padding:14px 16px;
  display:flex; align-items:center; justify-content:center; gap:9px;
  background:#e8f2ff; color:#174b7a; font-size:15px; font-weight:850;
  transition:transform .12s ease, background .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.voice-record:not(:disabled):active { transform:scale(.985); }
.voice-record:not(:disabled):hover { background:#dbeafe; }
.voice-record:disabled { opacity:.58; cursor:not-allowed; }
.voice-record.recording {
  background:#fee2e2; color:#991b1b;
  box-shadow:0 0 0 4px rgba(239, 68, 68, .10);
  animation:voice-pulse 1.4s ease-in-out infinite;
}
.voice-status { margin-top:9px; color:#64748b; font-size:12px; line-height:1.4; }
.voice-status.ok { color:#15803d; }
.voice-status.err { color:#b91c1c; }
.voice-status.warn { color:#9a6700; }
.voice-status.recording { color:#b91c1c; font-weight:750; }
.voice-status.processing { color:#1d4ed8; font-weight:750; }
.voice-transcript {
  margin-top:11px; padding:11px 12px; border-radius:13px;
  background:#f8fafc; border:1px solid #e2e8f0;
  color:#334155; font-size:13px; line-height:1.45;
}
.voice-transcript-label { color:#64748b; font-size:11px; font-weight:850; text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; }
@keyframes voice-pulse {
  0%, 100% { box-shadow:0 0 0 3px rgba(239, 68, 68, .08); }
  50% { box-shadow:0 0 0 7px rgba(239, 68, 68, .15); }
}