:root {
  --bg: #0c0c0c;
  --fg: #cccccc;
  --dim: #7a7a7a;
  --red: #d9534f;
  --green: #6a9a1f;
  --yellow: #c19c00;
  --blue: #3b78c4;
  --magenta: #b4469b;
  --cyan: #2aa198;
  --logo: #b5b5b5;
  --mono: "JetBrains Mono", "Cascadia Mono", "Cascadia Code", Consolas, "DejaVu Sans Mono", "Liberation Mono", Menlo, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; background: var(--bg); color: var(--fg); }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.35;
}

a { color: inherit; }

/* ---------- терминал ---------- */
.term {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 20px 12px;
  flex: 1;
}

.prompt { margin: 0 0 14px; white-space: pre-wrap; word-break: break-all; }
.prompt.end { margin: 28px 0 0; }
.user { color: var(--red); font-weight: bold; }
.path { color: var(--blue); }

.cursor {
  display: inline-block;
  width: 0.6em;
  height: 1.15em;
  background: var(--fg);
  vertical-align: text-bottom;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }

.fetch {
  display: flex;
  gap: 36px;
  align-items: flex-start;
}

.logo {
  display: block;
  flex: none;
  width: 256px;
  height: 256px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

.info { min-width: 0; }

.title { color: var(--red); font-weight: bold; }
.sep { color: var(--fg); letter-spacing: 0; overflow: hidden; }

.rows { list-style: none; margin: 0; padding: 0; }

.row {
  display: flex;
  align-items: center;
  gap: 0.55em;
  padding: 1px 6px;
  margin: 0 -6px;
  text-decoration: none;
  color: var(--fg);
  white-space: nowrap;
}
.row .k { color: var(--red); font-weight: bold; }
.row .colon { margin-left: -0.55em; }
.row .v { overflow: hidden; text-overflow: ellipsis; }

.row:hover, .row:focus-visible {
  background: var(--fg);
  color: var(--bg);
  outline: none;
}
.row:hover .k, .row:focus-visible .k { color: var(--bg); }

.icon {
  flex: none;
  width: 1.15em;
  height: 1.15em;
  background-color: var(--red);
  -webkit-mask: var(--i) center / contain no-repeat;
  mask: var(--i) center / contain no-repeat;
}
.row:hover .icon, .row:focus-visible .icon { background-color: var(--bg); }

.i-discord   { --i: url(/static/icons/discord.svg); }
.i-twitch    { --i: url(/static/icons/twitch.svg); }
.i-youtube   { --i: url(/static/icons/youtube.svg); }
.i-telegram  { --i: url(/static/icons/telegram.svg); }
.i-instagram { --i: url(/static/icons/instagram.svg); }
.i-github    { --i: url(/static/icons/github.svg); }
.i-minecraft { --i: url(/static/icons/minecraft.svg); }
.i-boosty    { --i: url(/static/icons/boosty.svg); }

/* палитра как в fastfetch */
.palette { margin-top: 28px; }
.palette div { display: flex; }
.palette i { display: block; width: 3ch; height: 1.9em; }
.c0 { background: #555; } .c1 { background: #b0352f; } .c2 { background: #6a8a0e; }
.c3 { background: #b88a00; } .c4 { background: #2f6fb5; } .c5 { background: #a43478; }
.c6 { background: #1f9488; } .c7 { background: #8a8a8a; }
.b0 { background: #6e6e6e; } .b1 { background: #e0524a; } .b2 { background: #8cc63f; }
.b3 { background: #e0b81a; } .b4 { background: #4a90d9; } .b5 { background: #d9609f; }
.b6 { background: #30b8aa; } .b7 { background: #d4d4d4; }

/* ---------- футер (уже не fastfetch) ---------- */
.footer {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--dim);
  text-align: center;
  padding: 28px 20px 32px;
}
.footer p { margin: 0 0 4px; }
.footer a { color: #9a9a9a; text-underline-offset: 3px; }
.footer a:hover { color: var(--fg); }
.footer .note { font-size: 12px; opacity: 0.85; }

/* ---------- текстовые страницы ---------- */
.doc {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 20px 12px;
  flex: 1;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
}
.doc h1 { font-size: 26px; margin: 0 0 6px; }
.doc h2 { font-size: 18px; margin: 28px 0 8px; color: #e6e6e6; }
.doc p, .doc li { color: #bdbdbd; }
.doc .muted { color: var(--dim); font-size: 14px; }
.doc a { color: #8ab4f8; }
.doc code { font-family: var(--mono); background: #1a1a1a; padding: 1px 5px; border-radius: 4px; font-size: 0.92em; }
.back { display: inline-block; margin-bottom: 18px; color: var(--dim) !important; text-decoration: none; font-family: var(--mono); font-size: 14px; }
.back:hover { color: var(--fg) !important; }

/* ---------- статистика ---------- */
.stats pre { margin: 0 0 18px; font-family: var(--mono); white-space: pre; overflow-x: auto; }
.stats .h { color: var(--red); font-weight: bold; }

/* ---------- мобильные ---------- */
@media (max-width: 720px) {
  body { font-size: 14px; }
  .fetch { flex-direction: column; gap: 18px; }
  .logo { width: 192px; height: 192px; }
}
@media (max-width: 380px) {
  .logo { width: 150px; height: 150px; }
  .row .v { font-size: 13px; }
}
.dim { color: var(--dim); }