/* scope — всё моноширинное, тёмное, как нулевые */
:root {
  --bg:   #0a0a0a;
  --fg:   #c8c8c8;
  --dim:  #6a6a6a;
  --acc:  #9fe09f;
  --warn: #e07f7f;
  --link: #7ab8ff;
}

* { box-sizing: border-box; }

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: Consolas, "DejaVu Sans Mono", "Courier New", monospace;
  font-size: 14px;
  line-height: 1.4;
  margin: 0;
  padding: 0;
}

body {
  max-width: 1000px;
  margin: 0 auto;
  padding: 12px 16px;
}

a, a:visited { color: var(--link); text-decoration: none; }
a:hover      { color: #fff; }

hr {
  border: 0;
  border-top: 1px dashed var(--dim);
  margin: 10px 0;
}

/* высота логотипа = высота плашки каталога */
#banner {
  display: block;
  margin: 0;
  height: 48px;
  width: auto;
  max-width: 100%;
}
/* ASCII-техника внизу: шрифт ужимается под ширину окна, чтобы картинка не вылезала */
#art { margin: 48px 0 16px; overflow: hidden; }
#art pre {
  margin: 0;
  color: var(--acc);
  opacity: 0.7;
  white-space: pre;
  line-height: 1.15;
  font-size: min(12px, calc((100vw - 32px) / 68));
}

#head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
}
#brandbox { flex: 0 0 auto; min-width: 0; }
#cat-slot { flex: 1 1 360px; min-width: 0; }
#cat-slot .row { margin: 0; }
#cat-slot .box { margin: 0; }


#nav a {
  margin-right: 18px;
}


#topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px dashed var(--dim);
  margin-bottom: 10px;
}
#searchform { flex: 1; }
#searchbox {
  background: #111;
  color: var(--fg);
  border: 1px solid var(--dim);
  font: inherit;
  padding: 2px 6px;
  width: 100%;
  max-width: 400px;
}
#langsel {
  background: #111;
  color: var(--fg);
  border: 1px solid var(--dim);
  font: inherit;
  width: auto;
  min-width: 160px;
  padding: 2px 6px;
}
/* убираем всё внешнее от Google Translate: верхнюю плашку, подсказку при наведении, подсветку */
iframe.skiptranslate,
.goog-te-banner-frame,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
#goog-gt-tt,
.goog-tooltip,
.goog-tooltip:hover,
.goog-te-balloon-frame,
.VIpgJd-yAWNEb-L7lbkb,
.VIpgJd-yAWNEb-nptwpf,
.VIpgJd-yAWNEb-hvhgNd,
.VIpgJd-yAWNEb-hvhgNd-ONiVed,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf { display: none !important; visibility: hidden !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }
body { top: 0 !important; position: static !important; }
html { margin-top: 0 !important; }
.goog-te-gadget { color: var(--dim); font-size: 12px; }
.goog-te-gadget-simple {
  background: #111 !important;
  border: 1px solid var(--dim) !important;
  padding: 2px 6px !important;
  font: inherit !important;
}
.goog-te-gadget-simple a, .goog-te-gadget-simple span { color: var(--fg) !important; }
.goog-te-gadget img { display: none; }

#view { white-space: normal; }

.box {
  border: 1px solid var(--dim);
  padding: 8px 10px;
  margin: 8px 0;
}

.row { display: flex; gap: 12px; flex-wrap: wrap; }
.col { min-width: 180px; flex: 1 1 180px; }

ul.plain { list-style: none; padding-left: 0; margin: 0; }
ul.plain li { padding: 2px 0; }

.hint { color: var(--dim); font-size: 12px; }

input[type=text], input[type=number], textarea, select {
  background: #111;
  color: var(--fg);
  border: 1px solid var(--dim);
  font: inherit;
  padding: 4px 6px;
  width: 100%;
}
textarea { min-height: 100px; resize: vertical; }
input.filter { margin: 6px 0; }
.cat-line { display: flex; align-items: center; gap: 8px; }
.cat-line input.filter { margin: 0; flex: 1; min-width: 0; }
input.filter:disabled { opacity: 0.5; }
.captcha { margin: 8px 0; }
.captcha b { white-space: nowrap; }

.stars     { color: var(--acc); white-space: nowrap; }
.big-stars { color: var(--acc); font-size: 28px; letter-spacing: 2px; }
pre.dist   { margin: 8px 0 0; }
button.star {
  border: 0; background: none; color: var(--acc);
  font-size: 30px; padding: 0 3px; line-height: 1;
}
button.star:hover { background: none; color: #fff; }
input.cap-in { width: 5em; }

button {
  background: #1a1a1a;
  color: var(--acc);
  border: 1px solid var(--acc);
  padding: 4px 10px;
  font: inherit;
  cursor: pointer;
}
button:hover { background: var(--acc); color: #0a0a0a; }

.author  { color: var(--dim); }
.spam    { color: var(--warn); }
.pros    { color: var(--acc); }
.cons    { color: var(--warn); }

pre.body { white-space: pre-wrap; word-break: break-word; margin: 6px 0; }

.vote { color: var(--dim); }
.vote b { color: var(--fg); }

/* Ascii-рамки для заголовков */
h2.ascii {
  color: var(--acc);
  font-weight: normal;
  margin: 14px 0 4px 0;
  font-size: 14px;
}

.err { color: var(--warn); }
.ok  { color: var(--acc); }

@media (max-width: 640px) {
  body { padding: 8px; }
  #banner { font-size: 10px; }
}