/* Тема «ТокФин» для звонилки — как в CRM: бумага, толстые чёрные рамки, жёлтый акцент, Rubik.
   Подключается после style.css / op.css / cc.css и переопределяет их. */
@import url('https://fonts.googleapis.com/css2?family=Rubik+Mono+One&family=Rubik:wght@400;500;600;700;900&family=IBM+Plex+Mono:wght@400;600&display=swap');
:root {
  --ink: #1A1206; --ink-2: #5E5644; --ink-3: #8A8270; --line: #E7DFC9;
  --bg: #F7F3E9; --panel: #FFFFFF; --side: #1A1206; --side-ink: #E9E1CC;
  --accent: #1B4FDE; --accent-soft: #D9E6FF; --gold: #FFC72C; --gold-tint: #FFF3D0;
  --good: #1F8A56; --good-soft: #D6F2E0; --warn: #9A6500; --warn-soft: #FFF3D0; --bad: #C21F23; --bad-soft: #F5D8D8;
  --radius: 14px; --shadow: 4px 4px 0 var(--ink);
  --font-display: 'Rubik Mono One', sans-serif; --font-mono: 'IBM Plex Mono', monospace;
}
body {
  font-family: 'Rubik', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg); color: var(--ink);
  background-image: radial-gradient(rgba(26,18,6,.05) 1.5px, transparent 1.5px); background-size: 18px 18px;
}
.num, .phone, .kpi .v { font-family: var(--font-mono); }

/* боковое меню */
.side { background: var(--ink); border-right: 4px solid var(--ink); }
.brand { font-family: var(--font-display); font-size: 13px; letter-spacing: .01em; color: #fff; }
.brand .dot { background: var(--gold); border: 2px solid #fff; border-radius: 50%; }
.brand .dot svg { stroke: var(--ink); }
.nav button, .nav a.nav-link { font-weight: 700; color: #CFC6B0; border-radius: 9px; }
.nav button:hover { background: rgba(255,199,44,.12); color: #fff; }
.nav button.on { background: var(--gold); color: var(--ink); }
.nav .badge-live { background: var(--bad); color: #fff; border: 2px solid var(--ink); }
.side .status { border-top: 2px solid #3a3122; }
.side .logout { color: #CFC6B0; font-weight: 600; }

/* заголовки */
.head h1 { font-family: var(--font-display); font-size: 20px; letter-spacing: .01em; font-weight: 400; }

/* карточки и таблицы */
.card { border: 3px solid var(--ink); border-radius: 16px; box-shadow: 5px 5px 0 var(--ink); }
.card > h3, .card .ch { font-weight: 800; }
.kpi { border: 3px solid var(--ink) !important; border-radius: 14px; box-shadow: 4px 4px 0 var(--ink); background: #fff; }
.kpi .l { text-transform: uppercase; font-size: 10.5px; font-weight: 900; letter-spacing: .03em; color: var(--ink-3); }
.kpi .v { font-size: 26px; font-weight: 600; }
.kpi.hl { background: var(--gold); }
.tbl th { text-transform: uppercase; font-size: 10.5px; letter-spacing: .03em; font-weight: 900; color: var(--ink-3);
  border-bottom: 3px solid var(--ink); background: #FBFAF6; }
.tbl td { border-bottom: 2px solid #EFE9DA; }
.hint { background: var(--gold-tint); border: 2px dashed var(--ink); border-radius: 12px; color: var(--ink); }

/* кнопки */
.btn { border: 2.5px solid var(--ink); border-radius: 9px; background: #fff; color: var(--ink); font-weight: 800;
  box-shadow: 3px 3px 0 var(--ink); transition: transform .08s, box-shadow .08s; }
.btn:hover { background: #fff; border-color: var(--ink); transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink); }
.btn:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--ink); }
.btn.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn.primary:hover { background: var(--ink); }
.btn.good { background: var(--good); color: #fff; border-color: var(--ink); }
.btn.danger { color: var(--bad); }
.btn.sm { box-shadow: 2px 2px 0 var(--ink); }
.btn:disabled { opacity: .45; transform: none; box-shadow: 2px 2px 0 var(--ink); }
.seg { border: 2.5px solid var(--ink); border-radius: 10px; background: #fff; }
.seg button.on { background: var(--ink); color: #fff; }
input[type=text], input[type=password], input[type=number], input[type=time], input[type=search], input[type=date],
input[type=datetime-local], select, textarea { border: 2px solid var(--ink); border-radius: 9px; background: #fff; }
input:focus, select:focus, textarea:focus { border-color: var(--ink); box-shadow: 3px 3px 0 var(--gold); }

/* метки */
.tag { border: 2px solid var(--ink); font-weight: 700; }
.tag.running, .tag.lead { background: var(--good-soft); color: var(--good); }
.tag.paused, .tag.callback { background: var(--gold-tint); color: var(--warn); }
.chip { display: inline-block; padding: 1px 8px; margin: 1px 3px 1px 0; border-radius: 999px; border: 1.5px solid var(--ink);
  background: var(--gold-tint); font-size: 11.5px; font-weight: 700; white-space: nowrap; }

/* модальные окна */
.modal { border: 3px solid var(--ink); border-radius: 16px; box-shadow: 8px 8px 0 var(--ink); }
.mh { border-bottom: 3px solid var(--ink) !important; }
.modal .mf { border-top: 3px solid var(--ink); }
.overlay { background: rgba(26,18,6,.45); }
.toast { background: var(--ink); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--gold); }
.toast.err { background: var(--bad); }
.login form { border: 3px solid var(--ink); border-radius: 16px; box-shadow: 6px 6px 0 var(--ink); }
.login h1 { font-family: var(--font-display); font-size: 18px; font-weight: 400; }

/* рабочее место менеджера */
.opbar { background: #fff; color: var(--ink); border-bottom: 4px solid var(--ink); }
.opbar .who .muted { color: var(--ink-3); }
.opbar .btn.sm { background: #fff; color: var(--ink); border-color: var(--ink); }
.opbar .logo { font-family: var(--font-display); font-size: 14px; display: flex; align-items: center; gap: 8px; margin-right: 8px; }
.mode-tag { color: var(--ink-3); font-weight: 700; }
.state { background: #fff; border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.state b { color: var(--ink-3); }
.callbar { border-bottom: 3px solid var(--ink); }
.callbar .phone { font-size: 28px; }
.result { border: 3px solid var(--ink); background: var(--gold-tint); box-shadow: 4px 4px 0 var(--ink); }
.res-btns .btn.on { background: var(--ink); color: #fff; }
.items .it { border: 2px solid transparent; }
.items .it:hover { background: var(--gold-tint); }
.items .it.on { background: var(--gold-tint); border-color: var(--ink); }
.btn.danger.big { background: var(--bad); color: #fff; }
.crm-link { font-weight: 800; text-decoration: underline; color: var(--accent); }