.settings-panel { margin-top: 14px; padding: 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-surface); }
.settings-panel h2 { margin: 0; font-size: 22px; }.settings-panel > p { color: var(--text-muted); margin: 7px 0 19px; font-size: 15px; line-height: 1.55; }
.score-profile-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.score-profile-form > label { display: grid; align-content: start; gap: 7px; min-width: 0; padding: 13px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-surface); }
.score-profile-form label > span { color: #d0dce2; font-size: 15px; font-weight: 700; }
.score-profile-form label > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.score-profile-form input { width: 100%; min-width: 0; box-sizing: border-box; }
.score-profile-form label b { color: #94a9b7; font-size: 14px; }
.score-profile-form label small { color: #8ba1b0; font-size: 13px; line-height: 1.55; }
.score-state-card { min-width: 0; margin: 0; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-surface); }
.score-state-card legend { padding: 0 6px; color: #d0dce2; font-size: 15px; font-weight: 800; }
.score-state-card.normal { border-left: 3px solid var(--success); }
.score-state-card.warning { border-left: 3px solid var(--warning); }
.score-state-card.danger { border-left: 3px solid var(--danger); }
.score-state-card.normal legend { color: var(--success); }
.score-state-card.warning legend { color: var(--warning); }
.score-state-card.danger legend { color: var(--danger); }
.score-state-card label { display: grid; gap: 6px; margin-top: 8px; }
.score-state-card .range-inputs { grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr) auto; }
.score-state-card .range-inputs i { color: #8299a8; font-size: 14px; font-style: normal; }
.score-profile-footer { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.score-profile-footer > span { color: #9fb2be; font-size: 14px; }
.score-profile-footer > span.error { color: var(--danger); }
.score-profile-footer > div { display: flex; gap: 8px; }
.score-profile-note { display: grid; gap: 6px; margin-top: 12px; padding: 13px 15px; border-left: 3px solid var(--accent); color: var(--text-muted); background: var(--bg-surface); font-size: 14px; line-height: 1.65; }
.score-profile-note strong { color: #d0dce2; font-size: 15px; }
.score-profile-note small { color: #8ba1b0; }
.layout-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.layout-card { padding: 13px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-surface); display: grid; gap: 8px; }
.layout-card > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.layout-card h3 { margin: 0; font-size: 18px; }.layout-card small { color: #8ba1b0; font-size: 12px; }
.layout-card select { width: 100%; }
.layout-footer { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.layout-footer > span { color: #9fb2be; font-size: 14px; }.layout-footer > span.error { color: var(--danger); }
.layout-footer > div { display: flex; gap: 8px; }
@media (max-width: 1024px) {
  .layout-footer { position: sticky; z-index: 3; bottom: calc(8px + env(safe-area-inset-bottom)); padding: 12px; border: 1px solid #294252; border-radius: 12px; background: #0a1720f2; box-shadow: 0 12px 30px #0009; backdrop-filter: blur(10px); }
}
@media (max-width: 900px) { .layout-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
  .layout-grid { grid-template-columns: 1fr; }
  .layout-card > div { align-items: flex-start; flex-direction: column; }
  .layout-footer { align-items: stretch; flex-direction: column; }
  .score-profile-form { grid-template-columns: 1fr; }
  .score-profile-footer { align-items: stretch; flex-direction: column; }
  .score-profile-footer > div, .layout-footer > div { display: grid; grid-template-columns: 1fr; }
}
@media (min-width: 621px) and (max-width: 1024px) {
  .score-profile-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}