/* ClipSync base.css — reset, переменные (оба слоя), body, .brand, #toast.
   Порядок правил перенесён из index.php буквально. @import намеренно стоит
   НЕ первой строкой: по спецификации CSS он игнорируется, шрифт IBM Plex Mono
   не загружается, фактический рендер идёт на Courier New. Перенос его вверх
   изменил бы внешний вид, поэтому положение сохранено. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:      #0d0d0f;
  --surface: #141417;
  --border:  #252529;
  --border2: #333338;
  --text:    #e8e8ec;
  --muted:   #636370;
  --accent:  #5b9cf6;
  --accent2: #7c6af7;
  --green:   #3ecf8e;
  --red:     #f25f5c;
  --amber:   #f0a500;
  --font:    'IBM Plex Mono', 'Courier New', monospace;
}

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600&display=swap');

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 16px 80px;
  gap: 26px;
}

.brand { font-size: 11px; letter-spacing: .25em; color: var(--muted); text-transform: uppercase; }

#toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px); background: var(--surface); border: 1px solid var(--border2); border-radius: 8px; padding: 10px 18px; font-size: 12px; color: var(--text); opacity: 0; transition: transform .25s, opacity .25s; z-index: 999; white-space: nowrap; }
#toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
#toast.ok   { border-color: var(--green);  color: var(--green); }
#toast.err  { border-color: var(--red);    color: var(--red); }
#toast.info { border-color: var(--accent); color: var(--accent); }

/* ── Variant B / v2 visual layer ── */
:root { --bg:#0a0b0f; --surface:#15161c; --surface2:#1c1e26; --border:#262832; --border2:#343747; --text:#eef0f6; --muted:#6b7085; --teal:#38e5c4; --violet:#9b7bff; --amber:#f2b84a; --red:#ff6b6b; --green:var(--teal); --accent:var(--teal); --accent2:var(--violet); }
body { background:radial-gradient(circle at 50% 0%,#12141c,var(--bg) 60%); padding:50px 16px 100px; gap:30px; }