/* DeM0RG — портфолио.
   Палитра: ~/Downloads/colors.toml (монохромный терминал / Omarchy vantablack).
   Окна: рамка 2px как в Hyprland (active #8d8d8d / inactive #595959aa),
   rounding 0, без теней и блюра, титлбар как groupbar. Композиция — site.svg. */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=DM+Mono:wght@400;500&display=swap');

:root {
  --bg: #000;
  --bg-darker: #070707;
  --bg-dark: #090909;
  --bg-light: #1a1a1a;
  --fg: #fff;
  --fg-light: #ececec;
  --fg-dark: #505050;
  --muted: #7a7a7a;
  --line: #2e2e2e;
  --accent: #8d8d8d;
  --border-active: #8d8d8d;              /* general:col.active_border */
  --border-inactive: rgba(89, 89, 89, 0.66); /* general:col.inactive_border */
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

::selection { background: var(--bg-light); color: var(--fg); }

html { color-scheme: dark; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  padding: 10px;
  color: var(--fg);
  font: 15px/1.75 var(--mono);
  background-color: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  clip: rect(0 0 0 0);
  overflow: hidden;
}

a { color: var(--fg-light); text-decoration: none; }
a:hover { color: var(--fg); text-decoration: underline; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-darker); }
::-webkit-scrollbar-thumb { background: var(--bg-light); border: 1px solid var(--border-inactive); }
::-webkit-scrollbar-thumb:hover { background: #262626; }

.caret {
  color: var(--fg-light);
  font-style: normal;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ---------- Сетка (композиция из site.svg) ---------- */

.bento {
  flex: 1;
  display: grid;
  gap: 5px;
  grid-template-columns: 1fr 2fr 1.1fr 1.08fr;
  min-height: 680px;
  /* 20 равных строк: левая часть делится на 11/9 (About ниже центра),
     правая — на 9/11 (Projects выше центра) */
  grid-template-rows: repeat(20, 1fr);
  grid-template-areas:
    "about about   track    friends"
    "about about   track    friends"
    "about about   track    friends"
    "about about   track    friends"
    "about about   track    friends"
    "about about   track    friends"
    "about about   track    friends"
    "about about   track    friends"
    "about about   track    friends"
    "about about   projects projects"
    "about about   projects projects"
    "count contact projects projects"
    "count contact projects projects"
    "count contact projects projects"
    "count contact projects projects"
    "count contact projects projects"
    "count contact projects projects"
    "count contact projects projects"
    "count contact projects projects"
    "count contact projects projects";
}

.card--about    { grid-area: about; }
.card--track    { grid-area: track; }
.card--friends  { grid-area: friends; }
.card--projects { grid-area: projects; }
.card--counter  { grid-area: count; }
.card--contacts { grid-area: contact; }

/* vantablack.webp — фон hero-окна, как рабочий стол в vantablack-теме */
.card--about {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.88)),
    url("assets/vantablack.webp");
  background-size: cover;
  background-position: center right;
}
.card--track    { grid-area: track; }
.card--friends  { grid-area: friends; }
.card--projects { grid-area: projects; }
.card--counter  { grid-area: count; }
.card--contacts { grid-area: contact; }

/* ---------- Окно терминала ---------- */

.window {
  background: var(--bg-darker);
  border: 2px solid var(--border-inactive);
  min-width: 0;
  transition: border-color 250ms ease;
}

.window:hover { border-color: var(--border-active); }

/* титлбар в духе groupbar Hyprland */
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 4px 12px;
  color: var(--fg);
  font: 12px var(--mono);
  font-weight: 400;
  letter-spacing: 0.04em;
  background: rgba(0, 0, 0, 0.35);
  border-bottom: 1px solid var(--line);
}

.dots i {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 5px;
  border: 1px solid var(--muted);
}
.dots i:nth-child(2) { background: var(--muted); }

.win-body { padding: 16px 18px 18px; }

.card__status { color: var(--muted); margin: 0; font-size: 13px; }

/* ---------- About ---------- */

.about {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.about__avatar {
  width: 129px;
  height: 129px;
  flex-shrink: 0;
  border: 2px solid var(--border-active);
  object-fit: cover;
}

.about__name {
  margin: 0;
  font: 700 clamp(26px, 3vw, 38px)/1.25 var(--mono);
  letter-spacing: -0.02em;
}

.about__names {
  margin: 10px 0 14px;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.04em;
}

.about__text p { margin: 0 0 12px; max-width: 68ch; color: var(--muted); font-size: 14px; }
.about__text p:last-child { margin-bottom: 0; }

/* ---------- Counter ---------- */

.counter { display: flex; flex-direction: column; gap: 8px; height: 100%; }

.counter__digits {
  text-align: center;
  color: var(--fg);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 4px;
  font-variant-numeric: tabular-nums;
}

.counter-note { margin: 0; text-align: center; font-size: 11px; color: var(--fg-dark); letter-spacing: 0.06em; }

.counter__recent {
  font-size: 12px;
  color: var(--muted);
  border-top: 1px dashed var(--line);
  padding-top: 8px;
  overflow-wrap: anywhere;
}
.counter__recent b { color: var(--fg-light); font-weight: 500; }

.visit-form { display: grid; gap: 8px; margin-top: auto; padding-top: 8px; }

.visit-form input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--fg);
  font: 14px var(--mono);
  padding: 7px 10px;
  border-radius: 0;
}

.visit-form input::placeholder { color: var(--fg-dark); }
.visit-form input:focus-visible { outline: 1px solid var(--accent); outline-offset: 0; }

.btn-row { display: flex; gap: 8px; }

.btn {
  flex: 1;
  background: var(--bg-light);
  color: var(--fg);
  border: 2px solid var(--border-inactive);
  font: 13px var(--mono);
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 0;
}

.btn-row { flex-wrap: wrap; }

.btn:hover { border-color: var(--border-active); text-decoration: none; }
.btn:active { background: var(--bg-dark); }
.btn:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
.btn:disabled { opacity: 0.55; cursor: wait; }

.btn--secondary {
  flex: 1 1 auto;
  background: var(--bg-dark);
  color: var(--muted);
}

.btn--secondary:hover { color: var(--fg); }

.counter__msg { min-height: 1.5em; font-size: 12px; color: var(--muted); }
.counter__msg--ok { color: var(--fg-light); }
.counter__msg--err { color: var(--muted); }

/* ---------- Visitor: neofetch-подобная панель ---------- */

.visitor { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }

.visitor__prompt { color: var(--fg-dark); font-size: 12px; }
.visitor__prompt span { color: var(--fg-light); }

.visitor__list { margin: 0; }

.visitor__list > div { display: flex; gap: 12px; padding: 2px 0; }

.visitor__list dt { flex: none; min-width: 64px; color: var(--muted); }
.visitor__list dt::after { content: ":"; color: var(--line); }

.visitor__list dd { margin: 0; color: var(--fg-light); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.visitor__list em { color: var(--fg-dark); font-style: normal; font-size: 11px; }

/* ---------- История посещений (окно поверх страницы) ---------- */

.history-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.75);
}

.history-dialog {
  width: min(460px, 100%);
  max-height: 80vh;
  overflow: auto;
  background: var(--bg-darker);
  border: 2px solid var(--border-active);
}

.history-dialog .bar { position: sticky; top: 0; z-index: 1; }

.history-close {
  background: transparent;
  border: 0;
  color: var(--fg-dark);
  font: 16px var(--mono);
  cursor: pointer;
  padding: 0 4px;
}
.history-close:hover { color: var(--fg); }

.history-list { margin: 0; padding: 12px 20px 4px 38px; }

.history-list li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 13px;
  color: var(--fg-light);
}
.history-list li:last-child { border-bottom: 0; }

.history-list time { color: var(--muted); font-size: 11px; white-space: nowrap; }

.history-empty { padding: 6px 20px 8px; color: var(--muted); font-size: 13px; }

.history-more-wrap { display: flex; justify-content: center; padding: 0 20px 16px; }

/* ---------- Контакты: строки с dotted-лидерами, как cat-вывод ---------- */

.data { margin: 0; }

.data > div {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 8px 0;
}
.data > div + div { border-top: 1px dashed var(--bg-light); }

.data dt {
  flex: none;
  min-width: 92px;
  color: var(--fg-dark);
  font-size: 12px;
  white-space: nowrap;
}
.data dt::before { content: ":: "; color: var(--line); }

.data dd { margin: 0; color: var(--fg-light); font-size: 14px; overflow-wrap: anywhere; text-align: right; }

.leader {
  flex: 1;
  min-width: 16px;
  border-bottom: 1px dashed var(--line);
  transform: translateY(-4px);
}

/* ---------- Last track: те же строки-лидеры ---------- */

.track { display: flex; flex-direction: column; gap: 8px; }

.last-track-cover {
  display: block;
  width: 88px;
  height: 88px;
  object-fit: cover;
  margin: 0 auto 4px;
  border: 2px solid var(--border-inactive);
  background: var(--bg);
}

.last-track-status {
  margin: 0;
  color: var(--fg-dark);
  font-size: 11px;
  text-align: center;
  letter-spacing: 0.06em;
}

.last-track-content { font-size: 13px; overflow-wrap: anywhere; }

.last-track-content > div {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 5px 0;
}
.last-track-content > div + div { border-top: 1px dashed var(--bg-light); }

.last-track-content b {
  flex: none;
  min-width: 76px;
  color: var(--fg-dark);
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
}
.last-track-content b::before { content: ":: "; color: var(--line); }

.last-track-row--src { color: var(--muted); font-size: 11px; }

/* ---------- Friends: кнопки 88x31 идут друг за другом от левого верха ---------- */

.friends-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-content: flex-start;
  justify-content: flex-start;
}

.friends-grid img { display: block; border: 1px solid var(--line); }

.card--friends { display: flex; flex-direction: column; }
.friends { flex: 1; display: flex; flex-direction: column; }
.friends .friends-grid { margin-bottom: 8px; }

.get-button {
  width: 100%;
  margin-top: auto;
  background: var(--bg-dark);
  color: var(--muted);
  border: 2px solid var(--border-inactive);
  font: 12px var(--mono);
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 0;
  letter-spacing: 0.04em;
}

.get-button:hover {
  border-color: var(--border-active);
  color: var(--fg);
}

.get-button:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 1px;
}

/* ---------- Диалог «моя кнопка» ---------- */

.btn88-dialog {
  width: min(520px, 100%);
  max-height: 90vh;
}

.btn88-body {
  padding: 16px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 13px;
}

.btn88-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: var(--bg-dark);
  border: 1px dashed var(--line);
}

.btn88-preview img {
  flex-shrink: 0;
  border: 1px solid var(--border-inactive);
}

.btn88-preview span {
  color: var(--muted);
  font-size: 13px;
}

.btn88-steps {
  margin: 0;
  padding-left: 20px;
  color: var(--fg-light);
}

.btn88-steps li {
  padding: 3px 0;
  color: var(--muted);
}

.btn88-code {
  width: 100%;
  min-height: 96px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--fg-light);
  font: 12px var(--mono);
  padding: 10px;
  resize: vertical;
  border-radius: 0;
  line-height: 1.5;
}

.btn88-code:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 0;
}

.btn88-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.btn88-ok {
  color: var(--fg-light);
  font-size: 12px;
  margin-left: auto;
}

.btn88-body > p {
  margin: 0;
  color: var(--fg-dark);
  font-size: 11px;
  letter-spacing: 0.04em;
}

/* ---------- Projects: таблица ---------- */

.projects { overflow-x: auto; }

.proj-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.proj-table th {
  text-align: left;
  color: var(--fg-dark);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--line);
  padding: 2px 8px 6px;
  white-space: nowrap;
}

.proj-table th::before { content: ":: "; color: var(--line); }

.proj-table td { padding: 7px 8px; vertical-align: top; }

.proj-table tbody tr:nth-child(even) { background: var(--bg-dark); }
.proj-table tbody tr:hover { background: var(--bg-light); }

.proj-year { color: var(--muted); white-space: nowrap; font-size: 11px; }

.proj-name a { color: var(--fg); font-weight: 500; overflow-wrap: anywhere; }
.proj-name a:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }

.proj-desc { color: var(--muted); overflow-wrap: anywhere; }
.proj-desc--empty { font-style: italic; opacity: 0.7; }

.badge {
  display: inline-block;
  font-size: 11px;
  padding: 0 6px;
  border: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
}

.badge--arch { border-color: var(--fg-dark); color: var(--fg-light); }

/* ---------- Footer ---------- */

.footer {
  text-align: center;
  color: var(--fg-dark);
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 4px 0 8px;
}
.footer a { color: var(--muted); }
.footer a:hover { color: var(--fg); }

/* ---------- Появление при загрузке отключено: пользователь сразу
   взаимодействует с формой счётчика ---------- */

@media (prefers-reduced-motion: reduce) {
  .caret { animation: none; }
}

/* ---------- Мобильная раскладка ---------- */

@media (max-width: 860px) {
  body { padding: 10px; font-size: 14px; }

  .bento {
    gap: 5px;
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    align-content: start;
    grid-template-areas:
      "about"
      "track"
      "projects"
      "count"
      "contact"
      "friends";
  }

  .about { flex-direction: column; align-items: center; text-align: center; }
  .about__text { text-align: left; }

  .card--about { grid-area: about; }

  .window { transition: none; }

  .projects { max-height: none; overflow: visible; }
  .card--projects .win-body { max-height: none; }

  .data > div { flex-wrap: wrap; gap: 4px; }
  .leader { display: none; }
  .data dd { flex-basis: 100%; text-align: left; }

  .last-track-content > div { flex-wrap: wrap; gap: 2px; }
  .last-track-content b { min-width: 0; }
}

@media (max-width: 480px) {
  .about__avatar { width: 104px; height: 104px; }
  .win-body { padding: 14px 14px 16px; }
}