:root { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }
.theme-toggle {
 position: absolute; right: 0; top: 0; z-index: 1;
 display: inline-flex; align-items: center; justify-content: center;
 min-height: 44px; min-width: 44px; padding: 0; border-radius: 24px;
 border: 1px solid #526175; background: #172033; color: #fff;
 font: 500 24px/1 sans-serif; cursor: pointer;
 box-shadow: 0 4px 16px rgba(0,0,0,.15);
}
html[data-theme="light"] .theme-toggle { background: #fff; color: #172033; border-color: #cbd5e1; }
.theme-toggle:focus-visible { outline: 3px solid #087f5b; outline-offset: 4px; }

/* Explicit colors override the template's transparent button rule. */
.theme-toggle, .theme-toggle:focus {
 background: #101010 !important; color: #bbb; border: 1px solid #777;
 margin: 0; width: auto; height: auto;
}
.theme-toggle:hover { background: #fff !important; color: #000; border-color: #fff; }
html[data-theme="light"] .theme-toggle,
html[data-theme="light"] .theme-toggle:focus {
 background: #fff !important; color: #111; border-color: #555;
}
html[data-theme="light"] .theme-toggle:hover {
 background: #111 !important; color: #fff; border-color: #111;
}
html[data-theme="light"] .btn { color: #087f5b; border-color: #087f5b; }
html[data-theme="light"] .btn:hover { background: #087f5b; color: #fff; }

html[data-theme="dark"] .theme-toggle:hover { background: #4bffa5 !important; color: #101010; border-color: #4bffa5; }

.header .head-top { min-height: 44px; }
.header .top-menu { padding-right: 60px; }
@media (max-width: 1199px) {
 .header .head-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: 10px;
 }
 .header .logo { grid-area: 1 / 1; max-width: 100%; }
 .header .theme-toggle { grid-area: 1 / 2; position: static; }
 .header .menu-btn { grid-area: 1 / 3; transform: none; }
 .header .top-menu { grid-column: 1 / -1; padding-right: 0; }
}