/* Дизайн-токены (из концептов «Единый» и «Мобильный») + базовые стили.
 * Тема задаётся атрибутом data-theme на <html> (см. js/theme.js). */

:root, [data-theme="dark"] {
  --bg: #161718; --chatbg: #141516; --panel: #1E1F21; --drawer: #1A1B1D;
  --rail: #111213; --railbtn: #26282B; --railact: #3A3D41; --railicon: #9A9EA3;
  --surf: #2A2C2F; --surf2: #222326; --line: #2E3033; --sel: #2D2F32; --chip: #3A3D41; --bin: #26282B;
  --text: #ECEDEE; --muted: #A5A9AE; --faint: #8B9095;
  --hi: #6FCF97; --onhi: #111213;
  --pri: #4A4E53; --onpri: #FFFFFF; --onpri2: #C9CCD0;
  --stage: #0E0F10; --tile: #222326; --ctrl: #2E3033;
  --name1: #E8C66A; --red: #E07A7A; --danger: #C73E3E;
  --scrim: rgba(0, 0, 0, .55); --shadow: 0 12px 32px rgba(0, 0, 0, .35);
  --av1: #3A3630; --av1t: #E6DCC4; --av2: #23362C; --av2t: #A7E5C0; --av3: #30343A; --av3t: #C9D2DC;
  --av4: #3A2F36; --av4t: #EBC6D8; --av5: #2C3340; --av5t: #BFD3F2; --av6: #3B3428; --av6t: #F0D3A6;
  color-scheme: dark;
}

[data-theme="light"] {
  --bg: #F4F5F6; --chatbg: #EEEFF1; --panel: #FFFFFF; --drawer: #F8F9FA;
  --rail: #2A2C2F; --railbtn: #36393D; --railact: #4A4E53; --railicon: #B9BDC2;
  --surf: #EEEFF1; --surf2: #F6F7F8; --line: #E1E3E6; --sel: #E6E8EB; --chip: #D3D6DA; --bin: #FFFFFF;
  --text: #18191B; --muted: #55595E; --faint: #6B7076;
  --hi: #1E7A50; --onhi: #FFFFFF;
  --pri: #3F4347; --onpri: #FFFFFF; --onpri2: #CDD0D4;
  --stage: #2A2C2F; --tile: #3A3D41; --ctrl: #4A4E53;
  --name1: #8A6A10; --red: #C73E3E; --danger: #C73E3E;
  --scrim: rgba(0, 0, 0, .35); --shadow: 0 12px 32px rgba(0, 0, 0, .15);
  --av1: #ECE3CC; --av1t: #4A3E14; --av2: #D3EBDD; --av2t: #0F3D2E; --av3: #DDE1E6; --av3t: #33383E;
  --av4: #F1DCE6; --av4t: #5A2440; --av5: #DCE6F5; --av5t: #1F3A66; --av6: #F3E4CC; --av6t: #5A3A0A;
  color-scheme: light;
}

/* Цвет оформления (Профиль → Цвет оформления): --hi — акцент темы, --hi-bright — он же
 * на всегда тёмных местах (полоса серверов, звонок). Ключи — ACCENTS в accounts/models.py. */
:root { --hi-bright: #6FCF97; --frog: #4CAF50; }
[data-accent="teal"] { --frog: #26A69A; }
[data-accent="blue"] { --frog: #3C7FE0; }
[data-accent="purple"] { --frog: #7E5FE6; }
[data-accent="pink"] { --frog: #D9529A; }
[data-accent="red"] { --frog: #D9574A; }
[data-accent="orange"] { --frog: #E58A2E; }
[data-accent="yellow"] { --frog: #D6AE2E; }
[data-accent="teal"] { --hi-bright: #5FD3C8; }
[data-theme="dark"][data-accent="teal"] { --hi: #5FD3C8; }
[data-theme="light"][data-accent="teal"] { --hi: #11756C; }
[data-accent="blue"] { --hi-bright: #74A9FF; }
[data-theme="dark"][data-accent="blue"] { --hi: #74A9FF; }
[data-theme="light"][data-accent="blue"] { --hi: #1F5FBF; }
[data-accent="purple"] { --hi-bright: #B49CFF; }
[data-theme="dark"][data-accent="purple"] { --hi: #B49CFF; }
[data-theme="light"][data-accent="purple"] { --hi: #5B3FC4; }
[data-accent="pink"] { --hi-bright: #F38FBF; }
[data-theme="dark"][data-accent="pink"] { --hi: #F38FBF; }
[data-theme="light"][data-accent="pink"] { --hi: #B0306E; }
[data-accent="red"] { --hi-bright: #F2897E; }
[data-theme="dark"][data-accent="red"] { --hi: #F2897E; }
[data-theme="light"][data-accent="red"] { --hi: #B83A2E; }
[data-accent="orange"] { --hi-bright: #FFB068; }
[data-theme="dark"][data-accent="orange"] { --hi: #FFB068; }
[data-theme="light"][data-accent="orange"] { --hi: #A2560F; }
[data-accent="yellow"] { --hi-bright: #F0CF68; }
[data-theme="dark"][data-accent="yellow"] { --hi: #F0CF68; }
[data-theme="light"][data-accent="yellow"] { --hi: #8A6A10; }

/* лягушка Froge (логотип, иконка звонка) — в цвет оформления */
.frog-fill { fill: var(--frog); }
.frog-stroke { stroke: var(--frog); }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.4 "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
input::placeholder, textarea::placeholder { color: var(--faint); }
a { color: var(--hi); }
[hidden] { display: none !important; }
.icon { flex-shrink: 0; vertical-align: middle; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.lbl { font-size: 11px; font-weight: 700; letter-spacing: .8px; color: var(--faint); text-transform: uppercase; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 13px; }
.center { text-align: center; }

/* кнопки */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border: 0; border-radius: 12px;
  background: var(--pri); color: var(--onpri); font-size: 14px; font-weight: 600;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { filter: brightness(1.1); }
.btn:disabled { opacity: .5; cursor: default; filter: none; }
.btn.hi { background: var(--hi); color: var(--onhi); }
.btn.outline { background: transparent; border: 1px solid var(--chip); color: var(--text); }
.btn.outline-hi { background: transparent; border: 1px solid var(--hi); color: var(--hi); }
.btn.ghost { background: transparent; color: var(--muted); }
.btn.ghost:hover { background: var(--surf); color: var(--text); filter: none; }
.btn.danger { background: var(--danger); color: #fff; }
.btn.danger-ghost { background: transparent; color: var(--red); border: 1px solid var(--chip); }
.btn.small { height: 32px; padding: 0 12px; border-radius: 10px; font-size: 13px; }
.btn.wide { width: 100%; }
.btn.dashed { background: transparent; border: 1px dashed var(--chip); color: var(--muted); font-weight: 500; }

.ib {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px;
  background: transparent; color: var(--muted); text-decoration: none;
}
.ib:hover, .ib.on { background: var(--surf); color: var(--text); }
.ib.danger:hover { color: var(--red); }

.badge {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--hi); color: var(--onhi); font-size: 11px; font-weight: 700; font-style: normal;
}
.badge.muted { background: var(--surf); color: var(--muted); }
.badge.red { background: var(--danger); color: #fff; }

/* аватары: мягкие пары «фон + текст» из концепта */
.avatar {
  --size: 40px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: var(--size); height: var(--size); border-radius: 50%;
  font-weight: 700; font-size: calc(var(--size) * .36); user-select: none;
  background: var(--av3); color: var(--av3t);
}
.avatar.sq { border-radius: calc(var(--size) * .32); }
.avatar.a1 { background: var(--av1); color: var(--av1t); }
.avatar.a2 { background: var(--av2); color: var(--av2t); }
.avatar.a3 { background: var(--av3); color: var(--av3t); }
.avatar.a4 { background: var(--av4); color: var(--av4t); }
.avatar.a5 { background: var(--av5); color: var(--av5t); }
.avatar.a6 { background: var(--av6); color: var(--av6t); }
.presence {
  position: absolute; right: 0; bottom: 0;
  width: max(10px, calc(var(--size) * .26)); height: max(10px, calc(var(--size) * .26));
  border-radius: 50%; background: var(--faint); border: 2px solid var(--presence-ring, var(--panel));
}
.presence.on { background: var(--hi); }

/* поля ввода */
.field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; font-size: 13px; font-weight: 600; color: var(--muted); }
.input, .field input, .field select, .field textarea {
  width: 100%; height: 44px; padding: 0 14px; border: 1px solid transparent; border-radius: 12px;
  background: var(--surf); color: var(--text); font-size: 15px; font-weight: 400; outline: none;
}
.field textarea { height: auto; padding: 10px 14px; }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--hi); }
.search {
  display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px;
  border-radius: 12px; background: var(--surf); color: var(--muted);
}
.search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--text); font-size: 15px; }
.search input::-webkit-search-cancel-button { filter: grayscale(1); }

/* переключатель */
.switch {
  display: inline-flex; align-items: center; flex-shrink: 0;
  width: 50px; height: 30px; padding: 3px; border-radius: 15px; background: var(--chip); transition: background .15s;
}
.switch::after { content: ""; width: 24px; height: 24px; border-radius: 12px; background: #fff; transition: transform .15s; }
.switch.on { background: var(--hi); }
.switch.on::after { transform: translateX(20px); }

/* всплывающие уведомления */
#toasts {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px; align-items: center; z-index: 1000; pointer-events: none;
  width: min(92vw, 480px);
}
.toast {
  padding: 10px 16px; border-radius: 12px; background: var(--panel); color: var(--text);
  border: 1px solid var(--line); box-shadow: var(--shadow); transition: opacity .3s, transform .3s; text-align: center;
}
.toast.hide { opacity: 0; transform: translateY(8px); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--chip); border-radius: 5px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }