/* ============================================================
   UniDesk — дизайн-система CodeClub
   Светлая/тёмная тема, шрифты Onest + JetBrains Mono.
   Подключается на всех страницах, кроме главной (index.html).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Поверхности (светлая тема) */
  --bg: #EAEDF5;
  --bg-2: #F3F5FA;
  --card: #FFFFFF;
  --card-2: #FAFBFD;
  --line: #EDEFF5;
  --line-2: #F1F3F7;
  /* Текст */
  --t1: #1B2236;
  --t2: #6B7388;
  --t3: #9AA1B4;
  /* Акценты */
  --primary: #3B5BDB;
  --primary-2: #4A68E0;
  --primary-3: #3349B8;
  --primary-tint: #EEF1FD;
  --success: #1FA971;
  --success-tint: #E2F5EC;
  --cyan: #1499B5;
  --cyan-tint: #E0F3F7;
  --warning: #D9912A;
  --warning-tint: #FBF0DD;
  --danger: #D8604F;
  --danger-tint: #FBEAE7;
  /* Прочее */
  --radius-lg: 20px;
  --radius: 16px;
  --radius-sm: 12px;
  --radius-xs: 10px;
  --shadow-card: 0 1px 2px rgba(38,50,90,.05), 0 12px 30px -20px rgba(38,50,90,.2);
  --shadow-pop: 0 14px 36px -10px rgba(38,50,90,.28);
  --shadow-primary: 0 8px 20px -8px rgba(59,91,219,.6);
  --sans: 'Onest', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

html.dark {
  --bg: #0D1017;
  --bg-2: #1C232E;
  --card: #171D27;
  --card-2: #1E2530;
  --line: #28303C;
  --line-2: #232B36;
  --t1: #E9ECF2;
  --t2: #A3ABBA;
  --t3: #6E7686;
  --primary-tint: #1E2740;
  --success-tint: #12291F;
  --cyan-tint: #10262B;
  --warning-tint: #2A2417;
  --danger-tint: #2A1B18;
  --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 12px 30px -20px rgba(0,0,0,.6);
  --shadow-pop: 0 14px 36px -10px rgba(0,0,0,.6);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--t1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.mono { font-family: var(--mono); }

::selection { background: rgba(59,91,219,.18); }
::placeholder { color: var(--t3); }
input, select, textarea, button { font-family: inherit; }

/* Скроллбар */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--t3); background-clip: padding-box; }

/* ---------- Переиспользуемые компоненты ---------- */

.cc-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.cc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: none; border-radius: var(--radius-xs);
  padding: 11px 16px; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: filter .14s ease, transform .14s ease, background .14s ease;
  color: var(--t1); background: var(--bg-2);
}
.cc-btn:hover { filter: brightness(.97); }
.cc-btn:disabled { opacity: .55; cursor: not-allowed; }

.cc-btn-primary { background: var(--primary); color: #fff; box-shadow: var(--shadow-primary); }
.cc-btn-primary:hover { filter: brightness(.94); }
.cc-btn-success { background: var(--success); color: #fff; box-shadow: 0 8px 20px -8px rgba(31,169,113,.55); }
.cc-btn-ghost { background: var(--bg-2); color: var(--primary); }

.cc-input {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 15px;
  font-size: 15px; color: var(--t1);
  outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.cc-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59,91,219,.13); }

.cc-label { font-size: 13px; font-weight: 600; color: var(--t2); display: block; margin-bottom: 9px; }

.cc-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600;
  padding: 4px 10px; border-radius: 7px;
  background: var(--bg-2); color: var(--t3);
}
.cc-badge-success { background: var(--success-tint); color: var(--success); }
.cc-badge-primary { background: var(--primary-tint); color: var(--primary); }
.cc-badge-warning { background: var(--warning-tint); color: var(--warning); }
.cc-badge-danger { background: var(--danger-tint); color: var(--danger); }

/* Логотип-плитка «>_» */
.cc-logo-mark {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 11px; background: var(--primary);
  box-shadow: 0 6px 14px -5px rgba(59,91,219,.6);
  color: #fff; font-family: var(--mono); font-weight: 600; letter-spacing: -1px;
}

/* Переключатель темы */
.cc-theme-toggle {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--bg-2); border-radius: 9px; padding: 3px;
}
.cc-theme-toggle button {
  width: 28px; height: 26px; border: none; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; background: transparent; color: var(--t3);
}
.cc-theme-toggle button.active {
  background: var(--card); color: var(--primary);
  box-shadow: 0 1px 2px rgba(38,50,90,.18);
}

/* Хлебные крошки */
.cc-crumbs {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--t3); margin-bottom: 8px;
}
.cc-crumbs .cur { color: var(--t2); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001s !important; transition-duration: .001s !important; }
}