/* ============================================================
   CheatCheck — тема в стиле HolyWorld (тёмный баклажан + фиолет)
   Заголовки: Unbounded · Текст: Onest · Код: JetBrains Mono
   Эмодзи: Noto Color Emoji
   ============================================================ */
:root {
  --bg: #130b1f;
  --surface: #1b1330;
  --surface2: #22193b;
  --hover: #2a2047;
  --line: #322648;
  --line2: #42335f;
  --dash: #4a3a68;
  --text: #eee9f7;
  --text2: #c6bcdd;
  --dim: #948aad;

  --accent: #a855f7;
  --accent-hi: #c48bff;
  --accent-dk: #7c3aed;
  --accent-soft: rgba(168, 85, 247, 0.14);
  --grad: linear-gradient(135deg, #7c3aed 0%, #b15bff 100%);
  --cyan: #6cc0ff;
  --grad-cyan: linear-gradient(120deg, #7ea8ff, #6ce0ff);

  --danger: #ff5468;
  --warn: #f4a740;
  --low: #e6c94f;
  --ok: #45d19a;

  --font-display: "Unbounded", "Segoe UI", system-ui, sans-serif;
  --font-head: "Onest", "Segoe UI", system-ui, sans-serif;
  --font-body: "Onest", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "Consolas", monospace;
  --emoji: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;

  --radius: 16px;
}

* { box-sizing: border-box; }
html { scrollbar-color: var(--line2) var(--bg); }
body {
  margin: 0;
  color: var(--text);
  font-family: var(--emoji), var(--font-body);
  background: var(--bg);
  min-height: 100vh;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
}
/* мягкое сиреневое свечение сверху — как на HolyWorld */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 45% at 50% -8%, rgba(124, 58, 237, 0.35), transparent 70%),
    radial-gradient(40% 30% at 88% 4%, rgba(168, 85, 247, 0.18), transparent 70%),
    radial-gradient(40% 30% at 6% 8%, rgba(108, 60, 200, 0.16), transparent 70%);
  pointer-events: none;
}
::selection { background: var(--accent-soft); }
a { color: var(--accent-hi); }

.wrap { max-width: 900px; margin: 0 auto; padding: 0 20px 90px; }

/* ---------- Header ---------- */
header {
  padding: 52px 0 30px;
  margin-bottom: 8px;
  text-align: center;
}
header::before {
  content: "🔒 Безопасно   •   🎁 Бесплатно   •   🛡 Без регистрации";
  font-family: var(--emoji), var(--font-head);
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text2);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 8px 18px;
  border-radius: 999px;
  margin-bottom: 22px;
}
header h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 8vw, 68px);
  letter-spacing: -1px;
  line-height: 1.02;
  color: var(--text);
}
header h1::after {
  content: "";
  display: block;
  width: 64px; height: 5px; margin: 18px auto 0;
  border-radius: 999px;
  background: var(--grad);
}
header p {
  margin: 18px auto 0;
  color: var(--text2);
  font-size: 16.5px;
  max-width: 560px;
}

/* ---------- Tabs — плавающая капсула ---------- */
.tabs {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 30px auto 34px;
  padding: 7px;
  width: fit-content;
  max-width: 100%;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  flex-wrap: wrap;
}
.tabs button {
  font-family: var(--emoji), var(--font-head);
  background: none;
  color: var(--dim);
  border: none;
  border-radius: 999px;
  padding: 11px 22px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14.5px;
  transition: color .15s, background .15s;
}
.tabs button:hover { color: var(--text); background: var(--hover); }
.tabs button.active {
  color: #fff;
  background: var(--grad);
  box-shadow: 0 6px 20px -8px rgba(168, 85, 247, 0.8);
}

/* ---------- Панели ---------- */
.card, .cmd, .verdict, .drop, .finding, .cmd-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* ---------- Drop zone ---------- */
.drop {
  padding: 56px 24px;
  text-align: center;
  cursor: pointer;
  border: 2px dashed var(--dash);
  background: rgba(27, 19, 48, 0.6);
  transition: border-color .15s, background .15s;
}
.drop:hover, .drop.drag { border-color: var(--accent); background: var(--surface2); }
.drop-icon { font-family: var(--emoji); font-size: 42px; }
.drop-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  margin-top: 16px;
  letter-spacing: -0.4px;
}
.drop-sub { color: var(--dim); margin-top: 10px; font-size: 13px; }

/* ---------- Progress ---------- */
.progress { margin-top: 22px; font-family: var(--font-mono); font-size: 12px; color: var(--dim); }
.progress-bar {
  height: 8px; border-radius: 999px;
  background: var(--surface2); border: 1px solid var(--line);
  overflow: hidden; margin-bottom: 8px;
}
.progress-bar > div { height: 100%; background: var(--grad); border-radius: 999px; transition: width .2s; }
.error {
  margin-top: 18px;
  background: rgba(255, 84, 104, 0.08);
  border: 1px solid rgba(255, 84, 104, 0.35);
  border-radius: 12px;
  color: #ff97a2;
  padding: 13px 16px;
  font-size: 13.5px;
}

/* ---------- Verdict ---------- */
.verdict { margin-top: 24px; padding: 24px; }
.verdict.v-cheat { border-color: rgba(255, 84, 104, 0.5); }
.verdict.v-susp  { border-color: rgba(244, 167, 64, 0.5); }
.verdict.v-clean { border-color: rgba(69, 209, 154, 0.5); }
.verdict-head {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-display);
  font-size: 23px; font-weight: 700; letter-spacing: -0.6px;
}
.v-icon { font-family: var(--emoji); font-size: 26px; }
.v-cheat .verdict-head { color: var(--danger); }
.v-susp .verdict-head { color: var(--warn); }
.v-clean .verdict-head { color: var(--ok); }
.verdict-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.verdict-meta span {
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--dim);
}
.hint {
  color: var(--text2);
  font-size: 13.5px;
  margin-top: 16px;
  padding: 13px 16px;
  border-radius: 12px;
  background: var(--surface2);
  line-height: 1.6;
}

.findings { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.finding {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--surface2);
  border-left: 3px solid var(--line2);
}
.finding.sev-high { border-left-color: var(--danger); }
.finding.sev-medium { border-left-color: var(--warn); }
.finding.sev-low { border-left-color: var(--low); }
.finding-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.finding-name { font-family: var(--font-head); font-weight: 700; font-size: 16px; letter-spacing: -0.2px; }
.badge {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; border: 1px solid; white-space: nowrap;
}
.b-high { color: var(--danger); border-color: rgba(255,84,104,.4); background: rgba(255,84,104,.08); }
.b-medium { color: var(--warn); border-color: rgba(244,167,64,.4); background: rgba(244,167,64,.08); }
.b-low { color: var(--low); border-color: rgba(230,201,79,.4); background: rgba(230,201,79,.08); }
.finding ul { margin: 10px 0 0; padding-left: 16px; color: var(--dim); font-size: 12px; font-family: var(--font-mono); }
.finding li { margin: 4px 0; word-break: break-all; }

/* ---------- Programs (карточки с пунктиром) ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.card {
  padding: 20px;
  border: 1px dashed var(--dash);
  background: rgba(27, 19, 48, 0.5);
  transition: border-color .15s, background .15s, transform .12s;
}
.card:hover { border-color: var(--accent); background: var(--surface2); transform: translateY(-2px); }
.card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.card-name { font-family: var(--font-head); font-weight: 700; font-size: 17px; letter-spacing: -0.3px; color: var(--accent-hi); }
.card-tag {
  font-family: var(--emoji), var(--font-head);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase;
  color: var(--text2); background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 10px; white-space: nowrap;
}
.card p { margin: 0; color: var(--dim); font-size: 13.5px; line-height: 1.6; }
.card-dl {
  display: inline-block;
  margin-top: 16px;
  background: var(--grad);
  color: #fff; text-decoration: none;
  padding: 10px 20px; border-radius: 999px;
  font-family: var(--font-head); font-weight: 700; font-size: 13.5px;
  box-shadow: 0 6px 18px -8px rgba(168, 85, 247, 0.7);
  transition: transform .12s, box-shadow .15s;
}
.card-dl:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -8px rgba(168, 85, 247, 0.9); }

/* ---------- Commands ---------- */
.cmd-sections { display: flex; flex-direction: column; gap: 20px; }
.cmd-section { padding: 24px; }
.sec-head {
  font-family: var(--emoji), var(--font-display);
  font-weight: 700; font-size: 21px; letter-spacing: -0.5px;
  margin: 0 0 8px;
}
.sec-intro { color: var(--dim); font-size: 13.5px; margin: 0 0 18px; line-height: 1.6; }
.cmd-list { display: flex; flex-direction: column; gap: 12px; }
.cmd {
  padding: 16px;
  border-radius: 12px;
  background: var(--surface2);
  border: 1px solid var(--line);
}
.cmd-title { font-family: var(--font-head); font-weight: 700; font-size: 15.5px; margin-bottom: 10px; }
.cmd-row { display: flex; gap: 10px; align-items: stretch; }
.cmd-row code {
  flex: 1;
  background: #0e0a18;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--accent-hi);
  padding: 10px 13px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  overflow-x: auto;
  white-space: nowrap;
}
.cmd-row button {
  background: var(--hover);
  color: var(--text2);
  border: 1px solid var(--line2);
  border-radius: 999px;
  padding: 8px 18px;
  cursor: pointer;
  font-size: 12.5px; font-weight: 600;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.cmd-row button:hover { background: var(--grad); color: #fff; border-color: transparent; }
.cmd-note { color: var(--dim); font-size: 12.5px; margin-top: 10px; line-height: 1.55; }

/* ---------- Footer ---------- */
footer { margin-top: 54px; padding-top: 24px; border-top: 1px solid var(--line); text-align: center; }
footer p { color: var(--dim); font-size: 12.5px; line-height: 1.7; max-width: 640px; margin: 0 auto; }

/* ---------- Scrollbars ---------- */
::-webkit-scrollbar { height: 8px; width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-dk); }

@media (max-width: 560px) {
  .tabs { width: 100%; }
  .tabs button { padding: 10px 14px; font-size: 13.5px; }
  .cmd-row { flex-direction: column; }
  .cmd-row button { align-self: flex-start; }
}