/* GritHQ finalization — Settings authoritative page layer */
#view-settings{
  min-width:0;
  padding-bottom:18px;
}
#view-settings *{min-width:0}

#view-settings .settings-page-head{
  margin:2px 2px 16px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(102,142,184,.14);
}
#view-settings .settings-page-head h2{
  margin:2px 0 4px;
  letter-spacing:-.045em;
}
#view-settings .settings-head-icon{
  width:48px;
  height:48px;
  flex:0 0 48px;
  border-radius:15px;
  display:grid;
  place-items:center;
  color:var(--accent);
  background:linear-gradient(145deg,rgba(var(--accent-rgb),.18),rgba(var(--accent-rgb),.07));
  border:1px solid rgba(var(--accent-rgb),.28);
  box-shadow:0 10px 26px rgba(0,0,0,.18);
}
#view-settings .settings-head-icon svg{
  width:25px;
  height:25px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
}

#view-settings .settings-section{
  display:grid;
  gap:10px;
  margin-top:18px;
}
#view-settings .settings-section:first-of-type{margin-top:0}
#view-settings .settings-section>.section-title-row{
  margin:0 2px;
}
#view-settings .settings-section>.section-title-row h3{
  margin:0 0 3px;
  font-size:18px;
  letter-spacing:-.025em;
}
#view-settings .settings-section>.section-title-row .subtle{
  margin:0;
}

#view-settings .theme-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  margin:0;
}
#view-settings .theme-option{
  width:100%;
  min-height:72px;
  display:grid;
  grid-template-columns:72px minmax(0,1fr) 24px;
  align-items:center;
  gap:11px;
  padding:9px 10px;
  text-align:left;
  color:var(--text);
  background:linear-gradient(155deg,var(--panel),rgba(var(--accent-rgb),.025));
  border:1px solid var(--line);
  border-radius:15px;
}
#view-settings .theme-option.selected{
  border-color:rgba(var(--accent-rgb),.62)!important;
  box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.24),0 8px 22px rgba(0,0,0,.14)!important;
}
#view-settings .theme-preview{
  height:50px;
  border-radius:11px;
  padding:7px;
}
#view-settings .theme-option-copy{
  display:grid;
  gap:3px;
}
#view-settings .theme-option-copy strong{font-size:14px}
#view-settings .theme-option-copy small{
  font-size:11px;
  line-height:1.3;
  color:var(--muted);
}
#view-settings .theme-check{
  font-size:19px;
  text-align:center;
}

#view-settings .settings-group{
  display:grid;
  gap:9px;
  margin:0;
}
#view-settings .settings-group>.card,
#view-settings .setting-row,
#view-settings .compatibility-grid,
#view-settings .app-update-card,
#view-settings .data-actions,
#view-settings .data-safety-card,
#view-settings .settings-advanced{
  margin:0;
  border:1px solid var(--gh-card-border,var(--line));
  background:linear-gradient(155deg,#091521,#071019);
  border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
}
html[data-theme]:not([data-theme="midnight-ember"]) #view-settings .settings-group>.card,
html[data-theme]:not([data-theme="midnight-ember"]) #view-settings .setting-row,
html[data-theme]:not([data-theme="midnight-ember"]) #view-settings .compatibility-grid,
html[data-theme]:not([data-theme="midnight-ember"]) #view-settings .app-update-card,
html[data-theme]:not([data-theme="midnight-ember"]) #view-settings .data-actions,
html[data-theme]:not([data-theme="midnight-ember"]) #view-settings .data-safety-card,
html[data-theme]:not([data-theme="midnight-ember"]) #view-settings .settings-advanced{
  background:var(--panel);
  border-color:var(--line);
}

#view-settings .profile-card,
#view-settings .cue-volume-card,
#view-settings .voice-card,
#view-settings .app-update-card,
#view-settings .data-safety-card{
  padding:14px!important;
}
#view-settings .profile-card-head,
#view-settings .cue-volume-head,
#view-settings .data-safety-head,
#view-settings .app-update-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}
#view-settings .profile-card-head>div,
#view-settings .cue-volume-head>div,
#view-settings .data-safety-head>div,
#view-settings .app-update-head>div{min-width:0}
#view-settings .profile-card-head strong,
#view-settings .cue-volume-head strong,
#view-settings .data-safety-head strong,
#view-settings .app-update-head strong,
#view-settings .voice-card strong{font-size:14px}
#view-settings .status-chip{flex:0 0 auto}

#view-settings .training-profile-summary{
  margin:10px 0 0;
  padding:11px 12px;
  display:grid;
  gap:3px;
  border-radius:11px;
  background:rgba(6,15,24,.68);
  border:1px solid rgba(71,108,145,.22);
}
#view-settings .training-profile-summary span{
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}
#view-settings .profile-actions-row{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);
  gap:8px;
  margin-top:10px;
}
#view-settings .profile-actions-row button{width:100%}

#view-settings .setting-row{
  min-height:72px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 34px;
  align-items:center;
  gap:12px;
  padding:13px 14px;
}
#view-settings .setting-row>div{min-width:0}
#view-settings .setting-row strong{font-size:14px}
#view-settings .setting-row .subtle{margin:3px 0 0}
#view-settings .setting-row input[type="checkbox"]{
  width:26px!important;
  height:26px!important;
  justify-self:end;
  accent-color:var(--accent);
}

#view-settings .cue-volume-card,
#view-settings .voice-card{display:grid;gap:11px}
#view-settings .volume-value{
  flex:0 0 auto;
  padding:5px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:850;
  color:var(--accent);
  background:rgba(var(--accent-rgb),.08);
  border:1px solid rgba(var(--accent-rgb),.22);
}
#view-settings .cue-volume-controls{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}
#view-settings .cue-volume-controls input[type="range"],
#view-settings .voice-slider-field input[type="range"]{
  width:100%;
  min-height:36px!important;
  accent-color:var(--accent);
}
#view-settings .cue-test-buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
#view-settings .cue-test-buttons button,
#view-settings .voice-button-row button{width:100%}
#view-settings .cue-test-status{margin:0}
#view-settings .voice-status-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
#view-settings .voice-slider-field{margin:0}
#view-settings .voice-slider-field label{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin:0 0 5px;
}
#view-settings .voice-button-row{
  display:grid;
  grid-template-columns:minmax(0,180px);
}

#view-settings .compatibility-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  padding:10px!important;
}
#view-settings .support-item{
  min-height:92px;
  padding:11px;
  display:grid;
  align-content:start;
  gap:4px;
  border-radius:12px;
  background:rgba(5,14,23,.58);
  border:1px solid rgba(69,105,141,.22);
}
#view-settings .support-item>span,
#view-settings .support-item small{font-size:11px}
#view-settings .support-item strong{font-size:13px}
#view-settings .install-note{
  margin:0;
  padding:11px 12px;
  border-radius:12px;
  font-size:12px;
  line-height:1.45;
}
#view-settings .app-update-card{display:grid;gap:10px}
#view-settings .app-update-card .subtle{margin:0}
#view-settings .app-update-card #checkUpdateBtn{justify-self:stretch;width:100%}

#view-settings .data-safety-card{display:grid;gap:10px}
#view-settings .data-safety-card>.subtle{margin:0}
#view-settings .data-version-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
}
#view-settings .data-version-grid>div{
  padding:9px;
  display:grid;
  gap:3px;
  border-radius:10px;
  background:rgba(5,14,23,.58);
  border:1px solid rgba(69,105,141,.20);
}
#view-settings .data-version-grid span{font-size:10px;color:var(--muted)}
#view-settings .data-version-grid strong{font-size:11px;line-height:1.2}
#view-settings .recovery-note{margin:0}
#view-settings .data-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  padding:10px!important;
}
#view-settings .data-actions button{width:100%;min-height:46px}
#view-settings button:disabled{
  opacity:.46;
  cursor:not-allowed;
  filter:saturate(.55);
}
#view-settings .settings-write-protected-note{
  margin:0 2px;
  padding:9px 10px;
  border-radius:10px;
  color:#ffc47a;
  background:rgba(112,68,15,.18);
  border:1px solid rgba(214,137,46,.28);
}

#view-settings .settings-advanced{
  margin-top:18px;
  overflow:hidden;
}
#view-settings .settings-advanced summary{
  min-height:60px;
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
  list-style:none;
}
#view-settings .settings-advanced summary::-webkit-details-marker{display:none}
#view-settings .settings-advanced summary>span{display:grid;gap:2px}
#view-settings .settings-advanced summary strong{font-size:14px}
#view-settings .settings-advanced summary small{font-size:11px;color:var(--muted)}
#view-settings .settings-advanced summary>b{
  color:var(--muted);
  font-size:22px;
  transition:transform .16s ease;
}
#view-settings .settings-advanced[open] summary>b{transform:rotate(90deg)}
#view-settings .settings-advanced-body{
  padding:0 14px 14px;
  display:grid;
  gap:10px;
}
#view-settings .settings-advanced-tool{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding-top:12px;
  border-top:1px solid rgba(80,116,151,.20);
}
#view-settings .settings-advanced-tool .subtle{margin:3px 0 0}
#view-settings .settings-advanced-tool button{min-width:150px}
#view-settings .app-build-info{
  margin:0;
  padding-top:4px;
  text-align:left;
  font-size:11px!important;
}

@media (max-width:390px){
  #view-settings .settings-head-icon{width:44px;height:44px;flex-basis:44px}
  #view-settings .theme-option{grid-template-columns:64px minmax(0,1fr) 22px;padding:8px;gap:9px}
  #view-settings .theme-preview{height:46px}
  #view-settings .profile-actions-row{grid-template-columns:1fr}
  #view-settings .compatibility-grid{grid-template-columns:1fr 1fr;gap:7px;padding:8px!important}
  #view-settings .support-item{min-height:88px;padding:9px}
  #view-settings .data-version-grid{grid-template-columns:1fr 1fr}
  #view-settings .data-version-grid>div:last-child{grid-column:1 / -1}
  #view-settings .settings-advanced-tool{grid-template-columns:1fr}
  #view-settings .settings-advanced-tool button{width:100%;min-width:0}
}

@media (max-width:360px){
  #view-settings .compatibility-grid{grid-template-columns:1fr}
  #view-settings .data-actions{grid-template-columns:1fr}
  #view-settings .cue-test-buttons{grid-template-columns:1fr}
  #view-settings .theme-option-copy small{font-size:10.5px}
}