.settings-overlay {
position: fixed;
inset: 0;
background: var(--bg-overlay-medium);
backdrop-filter: blur(2px);
opacity: 0;
pointer-events: none;
transition: opacity 200ms ease;
z-index: 10050;
}

.settings-overlay.active {
opacity: 1;
pointer-events: auto;
}

.settings-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.98);
width: min(900px, calc(100% - 24px));
height: min(640px, calc(100% - 40px));
border-radius: 14px;
background: var(--panel);
border: 1px solid var(--border-subtle-4);
box-shadow: var(--shadow-modal);
opacity: 0;
pointer-events: none;
transition: opacity 200ms ease, transform 200ms ease;
z-index: 11000;
display: flex;
flex-direction: column;
overflow: hidden;
color: var(--text);
}

.settings-modal.active {
opacity: 1;
pointer-events: auto;
transform: translate(-50%, -50%) scale(1);
}

.settings-close-btn {
position: absolute;
top: 10px;
right: 10px;
z-index: 2;
}

.settings-container {
display: flex;
flex-direction: column;
height: 100%;
}

.settings-header {
padding: 14px 18px 10px;
border-bottom: 1px solid var(--border-subtle);
}

.settings-header h2 {
margin: 0;
font-size: 1.2rem;
}

.settings-content {
flex: 1 1 auto;
display: flex;
min-height: 0;
}

.settings-sidebar {
width: 210px;
border-right: 1px solid var(--border-subtle);
background: var(--panel-3);
padding: 10px 0;
flex-shrink: 0;
}

#settings-tabs {
list-style: none;
margin: 0;
padding: 0;
}

.settings-tab {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
cursor: pointer;
font-size: 0.9rem;
color: var(--text-muted-2);
box-sizing: border-box;
width: 100%;
}

.settings-tab i {
width: 16px;
text-align: center;
}

.settings-tab:hover {
background: var(--hover-soft);
color: var(--text);
}

.settings-tab.active {
background: var(--gradient-settings-tab);
color: var(--text);
border-left: 3px solid var(--accent-soft);
padding-left: 11px;
}

.settings-panel {
flex: 1 1 auto;
padding: 14px 18px;
overflow-y: auto;
}

.settings-tab-content {
display: none;
}

.settings-tab-content.active {
display: block;
}

.settingstab-header h2 {
margin: 0 0 4px;
font-size: 1.15rem;
}

.settings-subheader {
font-size: 0.85rem;
color: var(--text-muted-3);
}

.settings-subheader p {
margin: 0;
}

.settings-tab-content h3 {
margin: 12px 0 6px;
font-size: 0.95rem;
}

.settings-note {
font-size: 0.8rem;
color: var(--text-muted-3);
margin: 0 0 8px;
}

.settings-note li {
  margin-bottom: 10px;
}

#strong {
    color: var(--text) !important;
}

.settings-list {
font-size: 0.85rem;
margin: 0 0 8px 18px;
padding: 0;
color: var(--text-muted-2);
}

.text-warning {
margin-top: 4px;
font-size: 0.82rem;
color: var(--text-warning);
}

hr {
border: none;
border-top: 1px solid var(--border-subtle);
margin: 10px 0;
}

.map-style-options,
.projection-options,
.units-toggle,
.number-toggle,
.site-theme,
.weather-icon-theme,
.tracker-icon-theme,
.language-theme,
.distance-mode-options,
.weather-source-options,
.time-of-day-options {
display: flex;
flex-wrap: wrap;
gap: 12px;
}

.map-icon-label,
.theme-toggle-label,
.widget-position-label,
.weather-icon-label,
.tracker-icon-label,
.language-label,
.number-label,
.distance-mode-label,
weather-source-label,
time-of-day-label {
position: relative;
display: inline-flex;
align-items: stretch;
justify-content: center;
padding: 0;
border-radius: 12px;
background: transparent;
border: none;
cursor: pointer;
font-size: 0.85rem;
}

.map-icon-label input,
.theme-toggle-label input,
.widget-position-label input,
.weather-icon-label input,
.tracker-icon-label input,
.language-label input,
.number-label input,
.distance-mode-label input,
.weather-source-label input,
.time-of-day-label input {
display: none;
}

.map-icon-label .toggle-label,
.tracker-icon-label .toggle-label {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid var(--border-soft-3);
background: var(--panel-3);
min-width: 100px;
min-height: 96px;
transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease, transform 100ms ease;
}

.theme-toggle-label .toggle-label,
.widget-position-label .toggle-label,
.weather-icon-label .toggle-label,
.language-label .toggle-label,
.number-label .toggle-label,
.distance-mode-label .toggle-label,
.weather-source-label .toggle-label,
.time-of-day-label .toggle-label {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid var(--border-soft-3);
background: var(--panel-3);
width: 100%;
min-height: 72px;
transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease, transform 100ms ease;
}

.map-icon-label:hover .toggle-label,
.theme-toggle-label:hover .toggle-label,
.widget-position-label:hover .toggle-label,
.weather-icon-label:hover .toggle-label,
.tracker-icon-label:hover .toggle-label,
.language-label:hover .toggle-label,
.number-label:hover .toggle-label,
.distance-mode-label:hover .toggle-label,
.weather-source-label:hover .toggle-label,
.time-of-day-label:hover .toggle-label {
background: var(--panel);
border-color: var(--border-strong-4);
}

.map-image,
.toggle-image,
.toggle-icon-image {
width: 100px;
height: 100px;
border-radius: 8px;
background-size: cover;
background-position: center;
background-color: var(--bg-hero);
}

.toggle-text {
font-size: 0.85rem;
font-weight: 600;
text-align: center;
}

.toggle-subtext {
font-size: 0.75rem;
color: var(--text-muted-9);
text-align: center;
}

.map-icon-label input:checked + .toggle-label,
.theme-toggle-label input:checked + .toggle-label,
.widget-position-label input:checked + .toggle-label,
.weather-icon-label input:checked + .toggle-label,
.tracker-icon-label input:checked + .toggle-label,
.language-label input:checked + .toggle-label,
.number-label input:checked + .toggle-label,
.distance-mode-label input:checked + .toggle-label,
.weather-source-label input:checked + .toggle-label,
.time-of-day-label input:checked + .toggle-label {
border-color: var(--accent-strong);
background: var(--panel-control);
box-shadow: 0 0 0 1px var(--accent-strong), 0 0 0 1px #000000 inset;
color: var(--text-strong);
}

.toggle-option {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid var(--border-soft-3);
background: var(--panel-4);
cursor: pointer;
font-size: 0.85rem;
transition: background 150ms ease, border-color 150ms ease, transform 100ms ease;
}

.toggle-option input {
display: none;
}

.toggle-option .toggle-label {
font-size: 0.85rem;
}

.toggle-option:hover {
background: #1f2933;
border-color: var(--border-strong-5);
transform: translateY(-1px);
}

.toggle-option input:checked + .toggle-label {
color: var(--text-strong);
font-weight: 600;
}

.update-control,
.zoom-control-settings,
.opacity-control,
.icon-size-control {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.85rem;
margin-top: 4px;
flex-wrap: wrap;
}

.slider-text {
flex: 0 0 180px;
}

.number-input {
width: 70px;
background: var(--bg-hero);
border: 1px solid var(--border-soft);
border-radius: 6px;
color: var(--text);
padding: 4px 6px;
font-size: 0.85rem;
}

.toggle-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
font-size: 0.85rem;
margin: 12px 0;
cursor: pointer;
}

.toggle-row input {
display: none;
}

.toggle-text-group {
display: flex;
flex-direction: column;
align-items: flex-start;
}

.toggle-row .toggle-text {
font-size: 0.85rem;
font-weight: 500;
text-align: left;
}

.toggle-row .toggle-sub {
font-size: 0.75rem;
color: var(--text-muted-3);
margin-top: 2px;
}

.toggle-row .toggle-text,
.toggle-row .toggle-text-group {
flex: 1 1 auto;
}

.toggle-switch {
width: 42px;
height: 24px;
border-radius: 999px;
background: var(--border-soft-3);
border: 1px solid var(--border-soft-3);
position: relative;
flex-shrink: 0;
transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.toggle-switch::before {
content: "";
position: absolute;
width: 18px;
height: 18px;
border-radius: 999px;
background: var(--text);
top: 50%;
left: 3px;
transform: translate(0, -50%);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
transition: transform 0.2s ease;
}

.toggle-row:hover .toggle-switch {
border-color: var(--border-strong-3);
}

.toggle-row input:checked + .toggle-switch {
background: var(--accent-soft);
border-color: var(--accent-strong);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45) inset;
}

.toggle-row input:checked + .toggle-switch::before {
transform: translate(16px, -50%);
}

.selected-set,
.selected-set-credits {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.85rem;
}

.font-selection select,
.unit-select {
background: var(--bg-hero);
border: 1px solid var(--border-soft);
color: var(--text);
border-radius: 6px;
padding: 6px 8px;
font-size: 0.85rem;
}

.font-selection p {
font-size: 0.8rem;
color: var(--text-muted-3);
}

.settings-button,
.settings-apply-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 14px;
border-radius: 999px;
border: none;
background: var(--accent-soft-bg);
border: 1px solid var(--accent-soft);
color: var(--text);
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
letter-spacing: 0.05em;
}

.settings-button:hover,
.settings-apply-btn:hover {
background: var(--border-subtle);
border: 1px solid var(--border-strong-3);
}

#reset-button {
background: var(--danger-bg);
border: 1px solid var(--danger-border);
}

#reset-button:hover {
background: var(--danger-bg-hover);
border: 1px solid var(--danger-border-hover);
}

#presets p,
#language p,
#tracking p,
#display p,
#data p,
#about p {
font-size: 0.85rem;
color: var(--text-muted-2);
}

.unit-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 8px;
width: 100%;
font-size: 0.85rem;
}

.unit-row {
display: flex;
align-items: center;
gap: 8px;
}

.unit-label {
flex: 1 1 auto;
}

.settings-footer {
padding: 10px 18px;
border-top: 1px solid var(--border-subtle);
background: var(--panel-3);
display: grid;
grid-template-columns: 40px 1fr 100px;
align-items: center;
justify-content: space-between;
font-size: 0.8rem;
flex-shrink: 0;
}

.settings-footer-text {
max-width: 520px;
color: var(--text-muted-2);
}

#more-themes {
margin-top: 8px;
}

.site-theme {
flex-wrap: nowrap;
flex-direction: column;
gap: 8px;
}

.site-theme .theme-toggle-label,
.site-theme .widget-position-label,
.weather-icon-theme .weather-icon-label,
.language-theme .language-label,
.number-toggle .number-label,
.distance-mode-options .distance-mode-label,
.weather-source-options .weather-source-label,
.time-of-day-options .time-of-day-label {
width: 100% !important;
}

.site-theme .theme-toggle-label .toggle-label,
.site-theme .widget-position-label .toggle-label,
.weather-icon-theme .weather-icon-label .toggle-label,
.language-theme .language-label .toggle-label,
.number-toggle .number-label .toggle-label,
.distance-mode-options .distance-mode-label .toggle-label,
.weather-source-options .weather-source-label .toggle-label,
.time-of-day-options .time-of-day-label .toggle-label {
flex-direction: row;
align-items: center;
justify-content: flex-start;
min-width: 0;
min-height: 0;
padding: 8px 12px;
gap: 8px;
}

.theme-text-group,
.time-of-day-text-group {
display: flex;
flex-direction: column;
align-items: flex-start;
}

.site-theme .theme-toggle-label .toggle-text,
.site-theme .widget-position-label .toggle-text,
.weather-icon-theme .weather-icon-label .toggle-text,
.language-theme .language-label .toggle-text,
.weather-source-options .weather-source-label .toggle-text,
.number-toggle .number-label .toggle-text,
.distance-mode-options .distance-mode-label .toggle-text,
.time-of-day-options .time-of-day-label .toggle-text {
text-align: left;
}

.site-theme .theme-toggle-label .toggle-subtext,
.site-theme .widget-position-label .toggle-subtext,
.weather-icon-theme .weather-icon-label .toggle-subtext,
.language-theme .language-label .toggle-subtext,
.weather-source-options .weather-source-label .toggle-subtext,
.time-of-day-options .time-of-day-label .toggle-subtext {
text-align: left;
}

.theme-color-dot {
width: 28px;
height: 28px;
border-radius: 999px;
background: var(--bg-theme-dot);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8);
flex-shrink: 0;
}

#dark + .toggle-label .theme-color-dot {
background: var(--bg-theme-dark);
}

#light + .toggle-label .theme-color-dot {
background: var(--bg-theme-light);
}

#system + .toggle-label .theme-color-dot {
background: var(--gradient-system-theme-dot);
}

.weather-icon-theme,
.language-theme,
.number-toggle,
.weather-source-options,
.time-of-day-options {
flex-wrap: nowrap;
flex-direction: column;
gap: 8px;
}

.weather-icon-preview {
width: 28px;
height: 28px;
border-radius: 6px;
background-size: cover;
background-position: center;
flex-shrink: 0;
}

.language-icon-preview {
width: 36px;
height: 28px;
border-radius: 6px;
background-size: cover;
background-position: center;
flex-shrink: 0;
}

.weather-icon-label .toggle-text,
.language-label .toggle-text,
.number-label .toggle-text,
.distance-mode-label .toggle-text,
.weather-source-label .toggle-text,
.time-of-day-label .toggle-text {
font-size: 0.85rem;
font-weight: 600;
}

.weather-icon-label .toggle-subtext,
.language-label .toggle-subtext,
.weather-source-label .toggle-subtext,
.time-of-day-label .toggle-subtext {
font-size: 0.75rem;
color: var(--text-muted-9);
}

.settings-card {
border-radius: 12px;
background: var(--bg-settings-card);
border: 1px solid var(--border-soft);
padding: 10px 12px 10px;
margin-bottom: 10px;
}

html[data-reduced-motion="true"] * {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}

.unit-select,
.font-selection select {
transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.unit-select:hover,
.font-selection select:hover {
background: var(--panel);
border-color: var(--border-strong-3);
color: var(--text-strong);
}

.unit-select:focus,
.font-selection select:focus {
background: var(--panel-3);
border-color: var(--accent-strong);
color: var(--text);
outline: none;
box-shadow: 0 0 0 2px var(--accent-soft);
}

.unit-select option,
.font-selection select option {
background: var(--panel-3);
color: var(--text);
transition: background-color 140ms ease, color 140ms ease;
}

.unit-select option:hover,
.font-selection select option:hover {
background: var(--panel);
color: var(--text-strong);
}

.unit-select option:checked,
.font-selection select option:checked {
background: var(--accent-soft-bg);
color: var(--text-strong);
}

#hth-logo {
max-width: 30px;
max-height: 30px;
opacity: 0.5;
}

.widget-visibility-row {
max-width: 80%;
min-height: 100px;
display: flex;
gap: 10px;
margin: 6px 0 10px;
}

.widget-visibility-item {
flex: 1 1 0;
display: flex;
align-items: flex-end;
gap: 6px;
font-size: 0.8rem;
cursor: pointer;
}

.widget-visibility-item input {
display: none;
}

.widget-visibility-box {
width: 100%;
border-radius: 10px;
background: var(--panel-3);
border: 1px solid var(--border-soft-3);
position: relative;
display: grid;
text-align: center;
align-items: center;
font-size: 3em;
font-weight: lighter;
transition: border-color 150ms ease, background 150ms ease, transform 100ms ease, box-shadow 150ms ease;
}

.widget-visibility-item:nth-child(1) .widget-visibility-box {
height: 100%;
}

.widget-visibility-item:nth-child(2) .widget-visibility-box {
height: 80%;
}

.widget-visibility-item:nth-child(3) .widget-visibility-box {
height: 90%;
}

.widget-visibility-item:nth-child(4) .widget-visibility-box {
height: 80%;
}

.widget-visibility-item:nth-child(5) .widget-visibility-box {
height: 100%;
}

.widget-visibility-item:hover .widget-visibility-box {
background: var(--panel);
border-color: var(--border-strong-3);
}

.widget-visibility-item input:checked + .widget-visibility-box {
background: var(--accent-soft-bg);
border-color: var(--accent-soft);
box-shadow: 0 0 0 1px var(--accent-strong);
}

.widget-visibility-label {
font-size: 0.8rem;
color: var(--text-muted-2);
text-align:	center;
}

.widget-layout-group {
display: flex;
flex-direction: column;
gap: 8px;
}

.widget-layout-row {
display: flex;
align-items: center;
gap: 8px;
}

.toggle-label i {
font-size: 30px;
color: var(--text-muted-3);
}

#verified-translation {
width: 20px !important;
height: 20px !important;
}

#language-note {
font-size: 0.85em;
color: var(--text-muted-2);
}

span img {
display: inline-block;
vertical-align: middle;
height: 1em;
width: auto;
margin: 0 0.25em;
}

#discord-link {
font-size: 0.85em;
}

.language-label .toggle-label {
flex-direction: row;
align-items: center;
justify-content: flex-start;
width: 100%;
}

.language-label .theme-text-group {
flex: 1 1 auto;
min-width: 0;
align-items: flex-start;
}

.translated-by {
position: static;
margin-left: auto;
display: flex;
flex-direction: column;
align-items: flex-end;
text-align: right;
gap: 2px;
font-size: 0.72rem;
color: var(--text-muted-3);
line-height: 1.2;
}

.language-label [data-i18n="translated-by"] {
font-style: italic;
color: var(--text-muted-4);
}

.language-label .toggle-label > span:last-child span:last-child {
font-weight: 500;
color: var(--text-muted-2);
}