/* base.css — фирменная тёмная гамма Спикарта */
:root {
  --bg:      #020208;
  --bg2:     #07071a;
  --bg3:     #0d0d24;
  --c:       rgba(0,212,255,.55);
  --cglow:   rgba(0,212,255,.18);
  --accent:  #00d4ff;
  --purple:  #7c3aed;
  --pglow:   rgba(124,58,237,.25);
  --text:    #c8c8e0;
  --text2:   #505075;
  --text3:   #2a2a4a;
  --green:   #00e676;
  --red:     #ff4040;
  --yellow:  #ffd740;
  --font:    'Segoe UI', system-ui, sans-serif;
  --mono:    'Cascadia Code', 'Fira Code', monospace;
  --radius:  3px;
  --radius2: 6px;
}

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

html, body {
  height: 100%; overflow: hidden;
  background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 13px;
  line-height: 1.55;
}

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,212,255,.2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,212,255,.4); }

button { font-family: var(--font); font-size: 12px; cursor: pointer; border: none; outline: none; transition: all .15s; }
input, textarea, select { font-family: var(--font); font-size: 12px; background: var(--bg3); border: 1px solid var(--c); color: var(--text); border-radius: var(--radius); outline: none; transition: border-color .2s, box-shadow .2s; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 8px var(--cglow); }
textarea { resize: none; }
select option { background: var(--bg2); }

.panel { border: 1px solid var(--c); box-shadow: 0 0 14px var(--cglow), inset 0 0 8px rgba(0,0,0,.5); }
.btn { padding: 6px 14px; border-radius: var(--radius); background: transparent; border: 1px solid var(--accent); color: var(--accent); font-weight: 600; font-size: 12px; }
.btn:hover { background: rgba(0,212,255,.1); box-shadow: 0 0 8px var(--cglow); }
.btn-purple { border-color: var(--purple); color: var(--purple); }
.btn-purple:hover { background: rgba(124,58,237,.1); box-shadow: 0 0 8px var(--pglow); }
.btn-icon { background: transparent; border: none; color: var(--text2); padding: 4px 6px; border-radius: var(--radius); font-size: 14px; }
.btn-icon:hover { color: var(--accent); background: rgba(0,212,255,.07); }
.btn-sm { padding: 3px 8px; font-size: 11px; background: transparent; border: 1px solid rgba(0,212,255,.3); color: var(--text2); border-radius: var(--radius); }
.btn-sm:hover { border-color: var(--accent); color: var(--accent); }
.hidden { display: none !important; }
.mono { font-family: var(--mono); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }