/* GrimX.fun — общая тема: токены, базовые элементы, анимации.
   Подключается и лендингом (site.css), и админкой (admin.css). */

:root {
  --bg:        #0a0706;
  --bg-2:      #0d0807;
  --panel:     #100b09;
  --panel-2:   #170f0d;
  --field:     #0d0807;
  --line:      #2c1a17;
  --line-2:    #3a211c;
  --line-3:    #1e1412;
  --text:      #f2e4de;
  --text-2:    #c9b6b0;
  --muted:     #8d7873;
  --muted-2:   #6e5a54;
  --muted-3:   #5e4c47;
  --fire:      #ff6a1a;
  --fire-2:    #ff9b5a;
  --fire-3:    #ffb066;
  --blood:     #c2200f;
  --blood-2:   #8f1607;
  --shadow-btn:#6d1206;
  --ok:        #5ad463;
  --ink:       #1a0f0c;
  --font:      'Rubik', system-ui, -apple-system, sans-serif;
  --pixel:     'Pixelify Sans', 'Courier New', monospace;
}

* { box-sizing: border-box; }

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

body {
  font-family: var(--font);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

a { color: #ff7a2a; text-decoration: none; }
a:hover { color: var(--fire-2); }
::selection { background: var(--blood); color: #fff; }

input, textarea, select, button { font-family: inherit; box-sizing: border-box; }
input::placeholder, textarea::placeholder { color: var(--muted-2); }
input[type=range] { accent-color: var(--fire); }

/* ---------- анимации ---------- */
@keyframes rise { 0%{transform:translateY(0) scale(1); opacity:0} 12%{opacity:.9} 100%{transform:translateY(-88vh) scale(.4); opacity:0} }
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@keyframes flicker { 0%,100%{filter:brightness(1)} 42%{filter:brightness(1)} 44%{filter:brightness(1.5)} 46%{filter:brightness(.82)} 48%{filter:brightness(1.35)} 52%{filter:brightness(1)} }
@keyframes blink { 0%,100%{opacity:1; box-shadow:0 0 10px var(--ok)} 50%{opacity:.45; box-shadow:0 0 2px var(--ok)} }
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes sweep { 0%{transform:translateX(-120%)} 60%,100%{transform:translateX(240%)} }
@keyframes crackshift { 0%{background-position:0 0} 100%{background-position:400px 0} }
@keyframes fadein { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---------- типографика ---------- */
.pixel { font-family: var(--pixel); font-weight: 700; }
.label {
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.muted { color: var(--muted); }

/* ---------- кнопки ---------- */
.btn {
  display: inline-block; padding: 14px 24px; text-align: center;
  background: linear-gradient(180deg, var(--fire), var(--blood));
  color: var(--ink); font-weight: 900; text-transform: uppercase; letter-spacing: 1px;
  font-size: 14px; cursor: pointer; border: none;
  box-shadow: 0 5px 0 var(--shadow-btn);
  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
}
.btn:hover { filter: brightness(1.13); transform: translateY(-2px); box-shadow: 0 7px 0 var(--shadow-btn), 0 0 30px rgba(255,106,26,.35); }
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--shadow-btn); }
.btn:disabled, .btn.is-busy { opacity: .6; pointer-events: none; }
.btn-sm { padding: 11px 16px; font-size: 13px; box-shadow: 0 4px 0 var(--shadow-btn); }

.btn-ghost {
  display: inline-block; padding: 13px 22px; text-align: center;
  background: #140d0b; border: 1px solid var(--line-2); color: var(--text);
  font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 13px;
  cursor: pointer; transition: all .16s ease;
}
.btn-ghost:hover { border-color: var(--fire); color: var(--fire-2); }
.btn-ghost.sm { padding: 9px 13px; font-size: 12px; text-transform: none; letter-spacing: 0; }

.icon-btn {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--line-2); color: var(--muted); background: transparent;
  cursor: pointer; transition: all .16s ease; font-size: 16px;
}
.icon-btn:hover { border-color: var(--blood); color: var(--blood); }

/* ---------- поля ---------- */
.field {
  width: 100%; padding: 10px 12px; background: var(--field);
  border: 1px solid var(--line-2); color: var(--text);
  font-size: 14px; outline: none; transition: border-color .16s ease;
}
.field:focus { border-color: var(--fire); }
.field.err { border-color: var(--blood); }
textarea.field { resize: vertical; line-height: 1.6; }
select.field { cursor: pointer; }

/* ---------- панели ---------- */
.panel {
  border: 2px solid var(--line);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
}
.divider-crack {
  height: 3px;
  background: repeating-linear-gradient(90deg, var(--blood) 0 18px, var(--fire) 18px 26px, var(--line) 26px 60px);
  background-size: 400px 3px;
  animation: crackshift 9s linear infinite;
  box-shadow: 0 0 18px rgba(255,106,26,.35);
}

/* ---------- всплывающее уведомление ---------- */
.toast-wrap {
  position: fixed; right: 18px; bottom: 18px; z-index: 200;
  display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.toast {
  padding: 13px 18px; background: var(--panel-2); border: 1px solid var(--line-2);
  border-left: 4px solid var(--fire); color: var(--text); font-size: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.6); animation: fadein .18s ease;
  max-width: 340px;
}
.toast.ok { border-left-color: var(--ok); }
.toast.err { border-left-color: var(--blood); }

/* ---------- скроллбар ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: #2a1a16; border: 2px solid var(--bg-2); }
::-webkit-scrollbar-thumb:hover { background: #3f2620; }