body {
    background-color: #f0f8ff;
    color: #262626;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important
}

div#content {
    padding-left: 0;
    padding-right: 0
}

.navbar {
    border: 0
}

.navbar-default {
    background-color: inherit;
    border-color: inherit
}

.form-control:focus {
    box-shadow: none
}

h1 {
    font-size: 20px
}

h2 {
    font-size: 18px
}

h3 {
    font-size: 16px
}

ol.results,
span#logo,
ul.results>li {
    line-height: 25px
}

.alert-info {
    color: #0b384d
}

code {
    font-size: 16px
}

ul.results li {
    font-size: 17px
}

ul.results>li {
    display: inline;
    padding-right: 5px;
    padding-left: 5px;
    *zoom: 1
}

span#logo {
    background-color: #178acc;
    font-weight: 700;
    font-size: 100%;
}

.breadcrumb {
    background-color: inherit
}

.breadcrumb .active {
    color: inherit;
    font-size: 15px;
    font-weight: inherit
}

form#crossword input[type=text],
input.inputmini {
    padding: 4px;
    max-width: 40px !important;
    text-align: center !important
}

a.linkfix {
    font-size: 14.5px
}

.quote {
    border-left: 5px solid #178acc;
    padding-left: 8px;
    font-size: 16px
}

#divbg {
    background-image: url(/img/bg.gif)
}

blockquote p {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.25
}

.anagram {
    color: red
}

.fill-all {
    width: -webkit-fill-available;
    width: -moz-available
}

.wmasked {
    color: #337ab7;
    cursor: pointer
}

mark {
    padding: 0
}

input[name^="c"]::placeholder {
    color: #999;
    font-size: 0.75em;
    opacity: 0.5;
}

::-webkit-input-placeholder {
    color: #999;
    font-size: 0.75em;
}

:-moz-placeholder {
    color: #999;
    font-size: 0.75em;
    opacity: 0.5;
}

::-moz-placeholder {
    color: #999;
    font-size: 0.75em;
    opacity: 0.5;
}

:-ms-input-placeholder {
    color: #999;
    font-size: 0.75em;
    opacity: 0.5;
}

input[name^="c"]:focus::placeholder {
    opacity: 0;
}

.plain-link {
    color: inherit;
}

/* 
==============================
Тёмная тема — Bootstrap 3.4.1
============================== 
*/

.dark-theme body {
  background-color: #121212;
  color: #e0e0e0;
}
.dark-theme body a {
  color: #87ceeb;
}
.dark-theme body a.plain-link {
  color: #e0e0e0;
}
.dark-theme span.wmasked {
  color: #87ceeb;
}

/* ---------- Navbar ---------- */
.dark-theme body .navbar {
  background-color: #1e1e1e;
  border-color: #333;
}
.dark-theme body .navbar .navbar-brand,
.dark-theme body .navbar .navbar-nav > li > a {
  color: #e0e0e0;
}
.dark-theme body .navbar .navbar-nav > li > a:hover,
.dark-theme body .navbar .navbar-nav > li > a:focus {
  color: #fff;
  background-color: #333;
}
.dark-theme body .navbar .navbar-toggle .icon-bar {
  background-color: #e0e0e0;
}
.dark-theme body .navbar .dropdown-menu {
  background-color: #1e1e1e;
}
.dark-theme body .navbar .dropdown-menu > li > a {
  color: #e0e0e0;
}
.dark-theme body .navbar .dropdown-menu > li > a:hover,
.dark-theme body .navbar .dropdown-menu > li > a:focus {
  background-color: #333;
  color: #fff;
}
.dark-theme body .navbar .dropdown-menu > .divider {
  background-color: #333;
}

/* ---------- Panels ---------- */
.dark-theme body .panel {
  background-color: #1e1e1e;
  border-color: #333;
}
.dark-theme body .panel-heading {
  background-color: #2c2c2c;
  border-color: #333;
}
.dark-theme body .panel-title,
.dark-theme body .panel-body {
  color: #e0e0e0;
}

/* ---------- Tables ---------- */
.dark-theme body .table {
  color: #e0e0e0;
}
.dark-theme body .table > thead > tr > th,
.dark-theme body .table > tbody > tr > th,
.dark-theme body .table > tfoot > tr > th,
.dark-theme body .table > thead > tr > td,
.dark-theme body .table > tbody > tr > td,
.dark-theme body .table > tfoot > tr > td {
  border-color: #333;
}
.dark-theme body .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #252525;
}
.dark-theme body .table-hover > tbody > tr:hover {
  background-color: #2c2c2c;
}

/* ---------- Forms ---------- */
.dark-theme body .form-control {
  background-color: #2c2c2c;
  color: #e0e0e0;
}
.dark-theme body .form-control::placeholder {
  color: #888;
}
.dark-theme body .input-group-addon {
  background-color: #2c2c2c;
  border-color: #333;
  color: #e0e0e0;
}

/* ---------- Buttons ---------- */
.dark-theme body .btn-default {
  background-color: #2c2c2c;
  border-color: #333;
  color: #e0e0e0;
}
.dark-theme body .btn-default:hover {
  background-color: #333;
  border-color: #555;
  color: #fff;
}

/* ---------- Modals ---------- */
.dark-theme body .modal-content {
  background-color: #1e1e1e;
  border-color: #333;
}
.dark-theme body .modal-header,
.dark-theme body .modal-footer {
  border-color: #333;
}

/* ---------- Wells ---------- */
.dark-theme body .well {
  background-color: #1e1e1e;
  border-color: #333;
}

/* ---------- Alerts ---------- */
.dark-theme body .alert {
  background-color: #2c2c2c;
  border-color: #333;
  color: #e0e0e0;
}
.dark-theme body .alert-success {
  background-color: #1a3a1a;
  border-color: #2a5a2a;
  color: #a3d9a3;
}
.dark-theme body .alert-danger {
  background-color: #3a1a1a;
  border-color: #5a2a2a;
  color: #d9a3a3;
}
.dark-theme body .alert-warning {
  background-color: #3a3a1a;
  border-color: #5a5a2a;
  color: #d9d9a3;
}
.dark-theme body .alert-info {
  background-color: #1a2a3a;
  border-color: #2a4a5a;
  color: #a3c9d9;
}

/* ---------- Badges / Labels ---------- */
.dark-theme body .badge,
.dark-theme body .label {
  background-color: #555;
  color: #fff;
}

/* ---------- Breadcrumbs ---------- */
.dark-theme body .breadcrumb {
  background-color: #1e1e1e;
  border-color: #333;
}
.dark-theme body > li > a {
  color: #aaa;
}
.dark-theme body > li > a:hover {
  color: #fff;
}

/* ---------- Lists ---------- */
.dark-theme body .dropdown-menu,
.dark-theme body .pager li > a {
  background-color: #1e1e1e;
  border-color: #fff;
}
.dark-theme body .dropdown-menu li > a {
  background-color: #1e1e1e;
  border-color: #333;
  color: #fff;
}
.dark-theme body .dropdown-menu > li > a:hover,
.dark-theme body .dropdown-menu > li > a:focus {
  background-color: #2c2c2c;
}
.dark-theme body .nav > li > a:hover,
.dark-theme body .nav > li > a:focus {
  background-color: #23527c;
  color: #fff;
}

/* ---------- Jumbotron ---------- */
.dark-theme body .jumbotron {
  background-color: #1e1e1e;
  color: #e0e0e0;
}

/* ---------- Popover ---------- */
.dark-theme body .popover {
  background-color: #1e1e1e;
  border-color: #333;
}
.dark-theme body .popover-title {
  border-color: #333;
}

/* ---------- Carousel ---------- */
.dark-theme body .carousel-control {
  background: none;
  text-shadow: none;
}
.dark-theme body .carousel-indicators li {
  border-color: #333;
}
.dark-theme body .carousel-indicators li.active {
  background-color: #fff;
}

/* ---------- Code ---------- */
.dark-theme body mark,
.dark-theme body code {
  background-color: #178acc6e;
  color: #fff;
}
.dark-theme body pre {
  background-color: #2c2c2c;
  color: #f0c040;
}

/* ---------- Close button ---------- */
.dark-theme body .close {
  color: #fff;
  opacity: 0.6;
}
.dark-theme body .close:hover,
.dark-theme body .close:focus {
  opacity: 1;
}

/* ---------- Images ---------- */
.dark-theme body img {
  filter: brightness(0.9);
}

/* ==============================
   Theme Toggle Button
   ============================== */
.theme-toggle {
  position: relative;
  width: 52px;
  height: 28px;
  border: none;
  border-radius: 14px;
  background-color: #2c2c2c;
  cursor: pointer;
  outline: none;
  padding: 0;
  transition: background-color 0.3s ease;
  flex-shrink: 0;
}

.theme-toggle:focus-visible {
  box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.5);
}

/* Светлая тема — фон кнопки */
body:not(.dark-theme) .theme-toggle {
  background-color: #c0c0c0;
}

/* Тёмная тема — фон кнопки */
.dark-theme body .theme-toggle {
  background-color: #4a4a4a;
}

/* ---------- Track ---------- */
.theme-toggle .toggle-track {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  pointer-events: none;
}

/* ---------- Thumb ---------- */
.theme-toggle .toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #fff;
  transition: transform 0.3s ease, background-color 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.dark-theme body .theme-toggle .toggle-thumb {
  transform: translateX(24px);
  background-color: #f5f5dc;
}

/* ---------- Sun icon ---------- */
.theme-toggle .icon-sun {
  position: absolute;
  width: 14px;
  height: 14px;
  color: #f5a623;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ---------- Moon icon ---------- */
.theme-toggle .icon-moon {
  position: absolute;
  width: 14px;
  height: 14px;
  color: #555555;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Светлая тема: солнце видно, луна скрыта */
body:not(.dark-theme) .icon-sun {
  opacity: 1;
  transform: scale(1);
}
body:not(.dark-theme) .icon-moon {
  opacity: 0;
  transform: scale(0.5);
}

/* Тёмная тема: луна видна, солнце скрыто */
.dark-theme body .icon-sun {
  opacity: 0;
  transform: scale(0.5);
}
.dark-theme body .icon-moon {
  opacity: 1;
  transform: scale(1);
}

/* ---------- Tooltip ---------- */
.theme-toggle[aria-label]::after {
  content: attr(aria-label);
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 8px;
  font-size: 11px;
  color: #fff;
  background-color: #333;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.theme-toggle:hover::after {
  opacity: 1;
}