/* ═══════════════════════════════════════════════════════════════════════════
   BeeDesk Design System v2.0
   Fonts: Onest (sans) + JetBrains Mono (mono)
   Palette: Honey amber + Warm cream neutrals
   ═══════════════════════════════════════════════════════════════════════════ */

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

/* ─── CSS Змінні ──────────────────────────────────────────────────────────── */
:root {
  /* ── Honey / amber primary ─────────────────────────────────────────────── */
  --honey-50:  #fdf8ec;
  --honey-100: #faedc8;
  --honey-200: #f5dc92;
  --honey-300: #efc456;
  --honey-400: #e89826;
  --honey-500: #cf7f15;
  --honey-600: #a86310;
  --honey-700: #804910;
  --honey-800: #5a3309;
  --honey-900: #3a2106;

  /* ── Warm neutrals (cream → ink) ────────────────────────────────────────── */
  --cream-50:  #fdfbf5;
  --cream-100: #faf5e8;
  --cream-200: #f3ead4;
  --cream-300: #e8dab8;
  --cream-400: #c9b78b;
  --cream-500: #9c8b62;
  --cream-600: #6f6244;
  --cream-700: #4a4131;
  --cream-800: #2b251c;
  --ink:       #1b1714;

  /* ── Accent — bee wing teal ─────────────────────────────────────────────── */
  --teal-100: #d6ecf1;
  --teal-200: #a5d3dc;
  --teal-300: #5ba4b8;
  --teal-500: #3a7d8f;
  --teal-700: #265562;

  /* ── Accent — bee stripe burgundy ───────────────────────────────────────── */
  --plum-100: #ecd9dc;
  --plum-300: #b07380;
  --plum-500: #7a3f4a;
  --plum-700: #4f2630;

  /* ── Semantic ────────────────────────────────────────────────────────────── */
  --ok:       #4a8a52;
  --ok-bg:    #e3efd9;
  --warn:     #c8881f;
  --warn-bg:  #fbeec2;
  --danger:   #a8362a;
  --danger-bg:#f3d8d2;
  --info:     #3a6ea8;
  --info-bg:  #d8e4f2;

  /* ── Surfaces ────────────────────────────────────────────────────────────── */
  --bg:              var(--cream-50);
  --surface:         #ffffff;
  --surface-sunken:  var(--cream-100);
  --border:          #ebe2cd;
  --border-strong:   #d8cba8;

  /* ── Shadows ─────────────────────────────────────────────────────────────── */
  --shadow-sm:    0 1px 2px rgba(40, 27, 8, 0.04);
  --shadow-md:    0 4px 14px rgba(40, 27, 8, 0.06), 0 1px 3px rgba(40, 27, 8, 0.04);
  --shadow-lg:    0 18px 40px -16px rgba(40, 27, 8, 0.18), 0 4px 12px rgba(40, 27, 8, 0.06);
  --shadow-honey: 0 8px 30px -10px rgba(232, 152, 38, 0.45);

  /* ── Typography ──────────────────────────────────────────────────────────── */
  --font-sans: "Onest", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  /* ── Radius ──────────────────────────────────────────────────────────────── */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   22px;
  --r-pill: 999px;

  /* ── Transition ──────────────────────────────────────────────────────────── */
  --transition: 0.18s cubic-bezier(.4, 0, .2, 1);

  /* ── Backward-compat aliases (старий JS/HTML продовжує працювати) ─────────── */
  --primary:            var(--honey-400);
  --primary-soft:       var(--honey-300);
  --primary-hover:      var(--honey-500);
  --primary-bright:     var(--honey-300);

  --success:            var(--ok);
  --success-soft:       var(--ok-bg);

  --radius-sm:          var(--r-sm);
  --radius-md:          var(--r-md);
  --radius-lg:          var(--r-lg);

  --color-primary:      var(--honey-400);
  --color-primary-soft: var(--honey-300);
  --color-secondary:    var(--honey-500);
  --color-success:      var(--ok);
  --color-success-soft: var(--ok-bg);
  --color-danger:       var(--danger);

  --color-bg-card:   var(--surface);
  --color-bg-sec:    var(--cream-100);
  --color-bg-main:   var(--cream-50);

  --color-border:      var(--border);
  --color-border-hover:var(--border-strong);

  --color-text-main:   var(--ink);
  --color-text-sec:    var(--cream-700);
  --color-text-muted:  var(--cream-600);

  /* ── Category dot colors (нові, по дизайну) ─────────────────────────────── */
  --cat-pay:      #e89826;
  --cat-logistic: #c47a3e;
  --cat-order:    #6b9b4b;
  --cat-quality:  #c4503a;
  --cat-rules:    #7a3f4a;
  --cat-services: #b07380;
  --cat-docs:     #3a7d8f;
  --cat-misc:     #9c8b62;

  /* ── Legacy category colors (backward compat) ────────────────────────────── */
  --cat-color-1: var(--cat-pay);
  --cat-color-2: var(--cat-logistic);
  --cat-color-3: var(--cat-quality);
  --cat-color-4: var(--cat-order);
  --cat-color-5: var(--cat-rules);
  --cat-color-6: var(--cat-services);
  --cat-color-7: var(--cat-docs);

  /* ── Kit bridge tokens (kit component CSS uses --amber, --surf, --text, --bg, --line) */
  --amber:      var(--honey-400);
  --amber-soft: var(--honey-300);
  --amber-deep: var(--honey-500);
  --amber-bg:   rgba(232, 152, 38, 0.08);
  --teal:       var(--teal-700);
  --plum:       var(--plum-500);
  --surf:       var(--surface);
  --surf2:      var(--surface-sunken);
  --surf3:      var(--cream-200);
  --line:       var(--border);
  --line2:      var(--border-strong);
  --text:       var(--ink);
  --text2:      var(--cream-700);
  --text3:      var(--cream-600);
  --bg:         var(--cream-50);
  --bg2:        var(--cream-100);
}

/* ─── Базові стилі ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}

body {
  background: var(--cream-50);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
}

/* ─── Honeycomb фон ───────────────────────────────────────────────────────── */
.honeycomb-bg {
  background-color: var(--cream-50);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'><g fill='none' stroke='%23e8dab8' stroke-width='1' opacity='0.55'><polygon points='28,2 52,16 52,48 28,62 4,48 4,16'/></g></svg>");
}
.honeycomb-bg-strong {
  background-color: var(--cream-100);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'><g fill='none' stroke='%23d8cba8' stroke-width='1.2' opacity='0.8'><polygon points='28,2 52,16 52,48 28,62 4,48 4,16'/></g></svg>");
}

/* ═══════════════════════════════════════════════════════════════════════════
   КОМПОНЕНТИ ДИЗАЙН-СИСТЕМИ
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Кнопки ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid transparent;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--ink);
  transition: all var(--transition);
  white-space: nowrap;
  text-decoration: none;
}
.btn-primary {
  background: var(--honey-400);
  color: white;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.2);
}
.btn-primary:hover { background: var(--honey-500); }
.btn-secondary {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--cream-700);
}
.btn-secondary:hover { background: var(--cream-100); }
.btn-ghost { color: var(--cream-700); }
.btn-ghost:hover { background: var(--cream-100); }
.btn-ghost.active { background: var(--honey-50); color: var(--honey-700); border-color: var(--honey-300); }
.btn-sm   { padding: 7px 12px; font-size: 13px; }
.btn-xs   { padding: 5px 9px; font-size: 12px; gap: 5px; }
.btn-icon { width: 36px; height: 36px; padding: 0; justify-content: center; }
.btn-danger {
  color: var(--danger);
  border-color: var(--danger);
}
.btn-danger:hover { background: var(--danger-bg); }

/* ─── Chips / Tags ────────────────────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 4px 8px;
  border-radius: var(--r-xs);
  background: var(--cream-100);
  color: var(--cream-700);
  border: 1px solid var(--cream-200);
  white-space: nowrap;
}
.chip-honey { background: var(--honey-50);  color: var(--honey-700); border-color: var(--honey-100); }
.chip-teal  { background: var(--teal-100);  color: var(--teal-700);  border-color: var(--teal-200); }
.chip-plum  { background: var(--plum-100);  color: var(--plum-700);  border-color: #e5c4ca; }
.chip-ink   { background: var(--ink);       color: var(--cream-100); border-color: var(--ink); }
.chip-ok    { background: var(--ok-bg);     color: var(--ok);        border-color: #b8d9bc; }
.chip-warn  { background: var(--warn-bg);   color: var(--warn);      border-color: #e8c97a; }
.chip-danger{ background: var(--danger-bg); color: var(--danger);    border-color: #d9a49e; }

/* ─── Клавіші ────────────────────────────────────────────────────────────── */
.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--cream-700);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
}

/* ─── Картки ─────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}

/* ─── Інпути ─────────────────────────────────────────────────────────────── */
.input {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 14px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  color: var(--ink);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.input:focus {
  border-color: var(--honey-400);
  box-shadow: 0 0 0 3px rgba(232, 152, 38, 0.18);
}

/* ─── Dots (категорії) ───────────────────────────────────────────────────── */
.dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.dot-pay      { background: var(--cat-pay); }
.dot-logistic { background: var(--cat-logistic); }
.dot-order    { background: var(--cat-order); }
.dot-quality  { background: var(--cat-quality); }
.dot-rules    { background: var(--cat-rules); }
.dot-services { background: var(--cat-services); }
.dot-docs     { background: var(--cat-docs); }
.dot-misc     { background: var(--cat-misc); }

/* ── Утиліти ─────────────────────────────────────────────────────────────── */
.mono   { font-family: var(--font-mono); }
.muted  { color: var(--cream-600); }
.tiny   { font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cream-600); font-weight: 600; }
.divider{ height: 1px; background: var(--border); }

/* ═══════════════════════════════════════════════════════════════════════════
   USER BAR (топбар з профілем)
   ═══════════════════════════════════════════════════════════════════════════ */
#user-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
  height: 52px;
}

.userbar-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
  gap: 12px;
}

.userbar-user   { display: flex; align-items: center; gap: 10px; }

.userbar-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--honey-400);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.userbar-name   { font-size: 13px; font-weight: 600; color: var(--ink); }

.userbar-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--honey-100);
  color: var(--honey-700);
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.userbar-actions { display: flex; gap: 6px; align-items: center; }

.userbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--cream-600);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition);
  font-family: var(--font-sans);
}
.userbar-btn:hover {
  background: var(--cream-100);
  color: var(--ink);
  border-color: var(--border-strong);
}

/* ─── Wrap ────────────────────────────────────────────────────────────────── */
.wrap { max-width: 860px; margin: 0 auto; padding: 2rem 1.25rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   ПОШУК
   ═══════════════════════════════════════════════════════════════════════════ */
.search-row {
  display: flex;
  gap: 12px;
  margin-bottom: 1.25rem;
  align-items: center;
  background: var(--surface);
  padding: 12px 18px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.search-row:focus-within {
  border-color: var(--honey-400);
  box-shadow: 0 0 0 3px rgba(232, 152, 38, 0.15);
}
.search-row input {
  flex: 1;
  font-size: 15px;
  padding: 4px 0;
  border: none;
  background: transparent;
  color: var(--ink);
  outline: none;
  font-family: var(--font-sans);
}
.search-row input::placeholder { color: var(--cream-500); }

.search-wrap {
  position: sticky;
  top: 16px;
  z-index: 20;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  border-radius: var(--r-lg);
  padding: 13px 18px;
  transition: var(--transition);
}
.search-box:focus-within {
  border-color: var(--honey-400);
  box-shadow: 0 0 0 3px rgba(232, 152, 38, 0.15), var(--shadow-md);
}
.search-box input {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  font-size: 15px;
  color: var(--ink);
  font-family: var(--font-sans);
}
.search-box input::placeholder { color: var(--cream-500); }

/* ═══════════════════════════════════════════════════════════════════════════
   ФІЛЬТРИ
   ═══════════════════════════════════════════════════════════════════════════ */
.filters { display: flex; flex-direction: column; gap: 6px; margin-bottom: 1rem; }
#subcategory-filters { margin-bottom: 1rem; }
.cat-row { display: flex; flex-wrap: wrap; gap: 8px; }

.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 8px 16px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  transition: all var(--transition);
  cursor: pointer;
  color: var(--cream-700);
  font-family: var(--font-sans);
}
.filter-btn:hover { background: var(--cream-100); border-color: var(--border-strong); }
.filter-btn.active { background: var(--honey-400); color: white; border-color: var(--honey-400); }

/* ── Subcat row (зберігаємо старі класи) ─────────────────────────────────── */
.subcat-row-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px;
  background: var(--cream-100);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.subcat-pill {
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  cursor: pointer;
  background: var(--surface);
  color: var(--cream-700);
  transition: all var(--transition);
  white-space: nowrap;
  font-family: var(--font-sans);
}
.subcat-pill:hover { background: var(--cream-50); border-color: var(--border-strong); }
.subcat-pill.active,
.active-sub,
.subcat-pill.sub-active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.expand-btn,
.subcat-toggle {
  font-size: 12px;
  color: var(--honey-600);
  border-color: transparent;
  background: transparent;
  padding: 5px 10px;
  cursor: pointer;
  font-family: var(--font-sans);
}
.subcat-toggle:hover { background: var(--honey-50); border-radius: var(--r-sm); }

/* ── Cat pills (в модалі / CMS) ──────────────────────────────────────────── */
.cat-pills-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--cream-100);
}
.cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  cursor: pointer;
  background: var(--surface);
  color: var(--cream-700);
  transition: all var(--transition);
  user-select: none;
  font-family: var(--font-sans);
}
.cat-pill input[type="checkbox"] { display: none; }
.cat-pill:hover { border-color: var(--border-strong); color: var(--ink); }
body:not(.dark) .cat-pill.special-cat-pill {
  border-color: #ead8bb;
  background: #fffaf0;
  color: #6f5735;
}
body:not(.dark) .cat-pill.special-cat-pill:hover {
  border-color: var(--honey-300);
  background: var(--honey-50);
  color: var(--ink);
}
body:not(.dark) .cat-pill.personal-pill {
  color: #7b5060;
}
body:not(.dark) .cat-pill.added-pill {
  color: #6a5527;
}
body:not(.dark) .cat-pill.all-categories-pill {
  border-color: #e5d8c2;
  background: #fff;
  color: var(--ink);
  font-weight: 600;
}
body:not(.dark) .cat-pill.all-categories-pill:hover {
  border-color: var(--honey-300);
  background: #fff8e8;
}

/* Active states for cat-pills using category colors */
.cat-pill.active,
.cat-pill.selected { color: #fff; border-color: transparent; }
body:not(.dark) .cat-pill.special-cat-pill.active {
  background: var(--plum-500);
  border-color: var(--plum-500);
  color: #fff;
}
body:not(.dark) .cat-pill.added-pill.active {
  background: var(--honey-500);
  border-color: var(--honey-500);
  color: #1f1608;
}
body:not(.dark) .cat-pill.all-categories-pill.active {
  background: var(--honey-400);
  border-color: var(--honey-400);
  color: #1f1608;
}
.cat-pill[data-cat="1"].active, .cat-pill[data-cat="1"].selected { background: var(--cat-pay); }
.cat-pill[data-cat="2"].active, .cat-pill[data-cat="2"].selected { background: var(--cat-logistic); }
.cat-pill[data-cat="3"].active, .cat-pill[data-cat="3"].selected { background: var(--cat-order); }
.cat-pill[data-cat="4"].active, .cat-pill[data-cat="4"].selected { background: var(--cat-quality); }
.cat-pill[data-cat="5"].active, .cat-pill[data-cat="5"].selected { background: var(--cat-rules); }
.cat-pill[data-cat="6"].active, .cat-pill[data-cat="6"].selected { background: var(--cat-services); }
.cat-pill[data-cat="7"].active, .cat-pill[data-cat="7"].selected { background: var(--cat-docs); }

/* ── Pills (фільтри категорій) ───────────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  cursor: pointer;
  background: var(--surface);
  color: var(--cream-700);
  transition: all var(--transition);
  white-space: nowrap;
  font-family: var(--font-sans);
}
.pill:hover { border-color: var(--border-strong); color: var(--ink); }
.pill.active { color: #fff; border-color: transparent; }

.pill[data-cat="0"].active { background: var(--honey-400); }
.pill[data-cat="1"] { color: #a56430; border-color: rgba(232,152,38,0.3); }
.pill[data-cat="1"].active { background: var(--cat-pay); }
.pill[data-cat="2"] { color: #8a5528; border-color: rgba(196,122,62,0.3); }
.pill[data-cat="2"].active { background: var(--cat-logistic); }
.pill[data-cat="3"] { color: #7a2e22; border-color: rgba(196,80,58,0.3); }
.pill[data-cat="3"].active { background: var(--cat-quality); }
.pill[data-cat="4"] { color: #3d6228; border-color: rgba(107,155,75,0.3); }
.pill[data-cat="4"].active { background: var(--cat-order); }
.pill[data-cat="5"] { color: var(--plum-700); border-color: rgba(122,63,74,0.3); }
.pill[data-cat="5"].active { background: var(--cat-rules); }
.pill[data-cat="6"] { color: #7a3f4a; border-color: rgba(176,115,128,0.3); }
.pill[data-cat="6"].active { background: var(--cat-services); }
.pill[data-cat="7"] { color: var(--teal-700); border-color: rgba(58,125,143,0.3); }
.pill[data-cat="7"].active { background: var(--cat-docs); }

/* ── Спеціальні пілюлі ───────────────────────────────────────────────────── */
.pill.special-pill {
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--cream-600);
  font-weight: 600;
}
.pill.special-pill:hover { border-color: var(--plum-500); color: var(--plum-500); }
.pill.special-pill.active {
  background: var(--plum-500);
  border-color: var(--plum-500);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ТУЛБАР
   ═══════════════════════════════════════════════════════════════════════════ */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  gap: 8px;
  flex-wrap: wrap;
}
.toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.stats { font-size: 13px; color: var(--cream-600); font-family: var(--font-mono); }

.toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--cream-700);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  font-family: var(--font-sans);
}
.toolbar-btn:hover { border-color: var(--border-strong); color: var(--ink); background: var(--cream-100); }
.toolbar-btn.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.toolbar-btn.add-btn { background: var(--honey-400); border-color: var(--honey-400); color: #fff; }
.toolbar-btn.add-btn:hover { background: var(--honey-500); border-color: var(--honey-500); }
.toolbar-btn.save-btn { background: var(--ok); border-color: var(--ok); color: #fff; }
.toolbar-btn.save-btn:hover { background: #3a7040; }

/* ─── Suggestions ─────────────────────────────────────────────────────────── */
.suggestions-list {
  display: grid;
  gap: 4px;
  margin-top: 6px;
  max-height: 220px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.suggestion-item {
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
  font-family: var(--font-sans);
  font-size: 14px;
}
.suggestion-item:hover { background: var(--cream-100); border-color: var(--border); }

/* ═══════════════════════════════════════════════════════════════════════════
   КАРТКИ ШАБЛОНІВ
   ═══════════════════════════════════════════════════════════════════════════ */
.results { display: flex; flex-direction: column; gap: 10px; }

/* ── Нова картка (stripe + body + right) ─────────────────────────────────── */
.tcard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  display: grid;
  grid-template-columns: 4px 1fr auto;
  overflow: hidden;
  transition: box-shadow var(--transition), border-color var(--transition);
  box-shadow: var(--shadow-sm);
}
.tcard:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}
.tcard.tcard-open {
  border-color: var(--honey-300, #fcd34d);
  box-shadow: 0 0 0 2px rgba(232,152,38,0.12), var(--shadow-md);
}

/* Кольоровий stripe по категорії */
.tcard .stripe { background: var(--honey-400); }
.tcard .stripe.pay      { background: var(--cat-pay); }
.tcard .stripe.logistic { background: var(--cat-logistic); }
.tcard .stripe.order    { background: var(--cat-order); }
.tcard .stripe.quality  { background: var(--cat-quality); }
.tcard .stripe.rules    { background: var(--cat-rules); }
.tcard .stripe.services { background: var(--cat-services); }
.tcard .stripe.docs     { background: var(--cat-docs); }
.tcard .stripe.misc     { background: var(--cat-misc); }

.tcard .tbody {
  padding: 14px 18px;
  cursor: pointer;
  min-width: 0;
}
.tcard .title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.tcard .title-row b { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.pin-template-btn {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  background: var(--surface);
  color: var(--cream-500);
  cursor: pointer;
  transition: color var(--transition), background var(--transition), border-color var(--transition), transform var(--transition);
}
.pin-template-btn:hover {
  color: var(--honey-600);
  border-color: var(--honey-300);
  background: var(--honey-50);
  transform: translateY(-1px);
}
.pin-template-btn.active {
  color: var(--honey-600);
  border-color: var(--honey-300);
  background: rgba(232,152,38,0.12);
}
.pin-template-btn i { font-size: 15px; }
.tcard .variant {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: var(--r-xs);
  background: var(--cream-100);
  color: var(--cream-700);
  font-family: var(--font-mono);
  font-weight: 500;
}
.tcard .pin-icon { color: var(--honey-500); font-size: 14px; }
.tcard .tags-row { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; }
/* .tag already styled globally; .tag-item is an alias */
.tcard .tag-item, .tcard .tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--r-xs);
  background: var(--cream-50);
  border: 1px solid var(--border);
  color: var(--cream-700);
  font-family: var(--font-mono);
}

.tcard .tright {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-left: 1px solid var(--border);
  background: var(--cream-50);
  flex-shrink: 0;
}
.tcard .uses-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 52px;
}
.tcard .uses-col b { font-size: 13px; font-weight: 600; color: var(--ink); }
.tcard .uses-col span {
  font-size: 10px;
  color: var(--cream-600);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Inline preview під карткою */
.tcard-preview {
  background: var(--cream-50);
  border-top: 1px solid var(--border);
  padding: 18px 20px;
  grid-column: 1 / -1;
  display: none;
}
.tcard-preview.open { display: block; }

/* ── Стара картка (backward compat) ─────────────────────────────────────── */
.card {
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
  box-shadow: var(--shadow-sm);
}
.card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }

.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  cursor: pointer;
  user-select: none;
}
.cat-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.card-title { font-size: 15px; font-weight: 600; flex: 1; letter-spacing: -0.01em; }
.card-sub {
  font-size: 11px;
  color: var(--cream-700);
  background: var(--cream-100);
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  white-space: nowrap;
  border: 1px solid var(--border);
}
.chevron { color: var(--cream-500); transition: transform var(--transition); }

.card-meta { display: flex; gap: 7px; flex-wrap: wrap; padding: 0 16px 13px; }
.tag {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: var(--r-xs);
  background: var(--cream-100);
  color: var(--cream-700);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all var(--transition);
  font-family: var(--font-mono);
}
.tag:hover { border-color: var(--honey-400); color: var(--honey-600); }

.card-body {
  padding: 16px;
  border-top: 1px solid var(--border);
  display: none;
  background: var(--cream-50);
}
.card-body.open { display: block; }

.label {
  font-size: 11px;
  font-weight: 700;
  color: var(--cream-600);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
  margin-top: 16px;
  font-family: var(--font-mono);
}
.label:first-child { margin-top: 0; }

.when {
  font-size: 13px;
  color: var(--cream-700);
  border-left: 3px solid var(--honey-400);
  padding: 8px 14px;
  margin-bottom: 14px;
  background: var(--honey-50);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.text-box {
  font-size: 14px;
  line-height: 1.65;
  color: var(--cream-700);
  white-space: pre-wrap;
  background: var(--surface);
  padding: 14px 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  max-height: 400px;
  overflow-y: auto;
}

/* preview inline ─────────────────────────────────────────────────────────── */
.preview-when {
  padding: 10px 14px;
  background: var(--honey-50);
  border-left: 3px solid var(--honey-400);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 13px;
  color: var(--cream-700);
  margin: 12px 0;
}
.preview-text {
  padding: 14px 16px;
  background: var(--cream-50);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 13px;
  line-height: 1.65;
  color: var(--cream-700);
  white-space: pre-wrap;
}
.preview-text .var-highlight {
  background: var(--honey-100);
  color: var(--honey-700);
  padding: 1px 6px;
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
}
.preview-vars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
.preview-vars label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cream-700);
  font-family: var(--font-mono);
  display: block;
  margin-bottom: 4px;
}
.preview-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   КНОПКИ В КАРТЦІ
   ═══════════════════════════════════════════════════════════════════════════ */
.card-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; align-items: center; }

.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: all var(--transition);
  font-family: var(--font-sans);
}
.copy-btn:hover { background: var(--cream-100); border-color: var(--border-strong); }
.copy-btn.copied { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }

.edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--cream-700);
  cursor: pointer;
  transition: all var(--transition);
  font-family: var(--font-sans);
}
.edit-btn:hover { border-color: var(--honey-400); color: var(--honey-600); }

.delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--cream-500);
  cursor: pointer;
  transition: all var(--transition);
  font-size: 16px;
}
.delete-btn:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); }

/* ═══════════════════════════════════════════════════════════════════════════
   ЗМІННІ В ШАБЛОНІ
   ═══════════════════════════════════════════════════════════════════════════ */
.template-variables {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.variable-field { margin-bottom: 12px; }
.variable-field label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--cream-600);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font-mono);
}
.variable-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-size: 14px;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--surface);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.variable-input:focus {
  border-color: var(--honey-400);
  box-shadow: 0 0 0 3px rgba(232, 152, 38, 0.15);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ПОШУКОВА ПІДСВІТКА
   ═══════════════════════════════════════════════════════════════════════════ */
mark {
  background: rgba(232, 152, 38, 0.2);
  color: inherit;
  padding: 0 2px;
  border-radius: 3px;
  font-weight: 600;
}

.empty {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--cream-500);
  font-size: 15px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   МОДАЛЬНЕ ВІКНО
   ═══════════════════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(27, 23, 20, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
  backdrop-filter: blur(4px);
}
.modal-overlay.open { display: flex; }

.modal {
  background: var(--surface);
  border-radius: var(--r-lg);
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(27, 23, 20, 0.22);
  border: 1px solid var(--border);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-title { font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.modal-close {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--cream-500);
  transition: all var(--transition);
  font-size: 16px;
}
.modal-close:hover { background: var(--cream-100); color: var(--ink); border-color: var(--border-strong); }

.modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label {
  font-size: 11px;
  font-weight: 700;
  color: var(--cream-600);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: var(--font-mono);
}
.form-field .required { color: var(--danger); }
.form-row.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.form-field input,
.form-field select,
.form-field textarea {
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-size: 14px;
  color: var(--ink);
  background: var(--surface);
  transition: border-color var(--transition), box-shadow var(--transition);
  font-family: var(--font-sans);
  outline: none;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--honey-400);
  box-shadow: 0 0 0 3px rgba(232, 152, 38, 0.15);
}
.form-field textarea { resize: vertical; line-height: 1.6; }
.field-hint { font-size: 12px; color: var(--cream-600); }
.field-hint code {
  background: var(--cream-100);
  padding: 1px 5px;
  border-radius: var(--r-xs);
  font-size: 12px;
  font-family: var(--font-mono);
}

/* ── Subcat picker ────────────────────────────────────────────────────────── */
.subcategory-wrapper { display: flex; gap: 6px; align-items: center; }
.subcategory-wrapper input { flex: 1; }
.btn-add-subcat {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--cream-100);
  color: var(--cream-600);
  cursor: pointer;
  font-size: 14px;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}
.btn-add-subcat:hover { background: var(--cream-200); color: var(--ink); }

.new-subcat-input { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.new-subcat-input input {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid var(--honey-400);
  border-radius: var(--r-sm);
  font-size: 14px;
  background: var(--surface);
  color: var(--ink);
  outline: none;
  font-family: var(--font-sans);
}
.new-subcat-input input:focus {
  box-shadow: 0 0 0 3px rgba(232, 152, 38, 0.18);
}

.btn-confirm,
.btn-cancel-input {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all var(--transition);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.btn-confirm { border-color: var(--ok); color: var(--ok); }
.btn-confirm:hover { background: var(--ok-bg); }
.btn-cancel-input { border-color: var(--danger); color: var(--danger); }
.btn-cancel-input:hover { background: var(--danger-bg); }

/* ── Subcat suggestions ───────────────────────────────────────────────────── */
.subcat-suggestions {
  display: grid;
  gap: 4px;
  margin-top: 8px;
  max-height: 220px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}
.subcat-suggestions button {
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--transition);
  font-family: var(--font-sans);
  font-size: 13px;
}
.subcat-suggestions button:hover { background: var(--cream-100); }

/* ── Multiselect ─────────────────────────────────────────────────────────── */
select[multiple] {
  min-height: 120px;
  padding: 8px;
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--surface);
}
select[multiple] option {
  padding: 6px 4px;
  font-size: 14px;
  color: var(--ink);
  background-color: var(--surface);
}
select[multiple] option:checked {
  background-color: var(--honey-400) !important;
  color: white;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px 20px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.btn-cancel {
  padding: 9px 20px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--cream-700);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  font-family: var(--font-sans);
}
.btn-cancel:hover { background: var(--cream-100); }

.btn-save {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 22px;
  border-radius: var(--r-sm);
  border: none;
  background: var(--honey-400);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
  font-family: var(--font-sans);
}
.btn-save:hover { background: var(--honey-500); }

/* ═══════════════════════════════════════════════════════════════════════════
   CAT BADGE (категорійна мітка)
   ═══════════════════════════════════════════════════════════════════════════ */
.cat-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   USER TEMPLATE META (автор, копіювань, особистий)
   ═══════════════════════════════════════════════════════════════════════════ */
.user-template-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  margin-top: 4px;
}
.author-badge,
.copy-count-badge,
.personal-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
}
.author-badge {
  background: var(--info-bg);
  color: var(--info);
  border: 1px solid #b6cde8;
}
.copy-count-badge {
  background: var(--honey-50);
  color: var(--honey-600);
  border: 1px solid var(--honey-100);
}
.personal-badge {
  background: var(--plum-100);
  color: var(--plum-700);
  border: 1px solid #e0c4ca;
}

.user-template-card { border-left: 3px solid var(--plum-500); }

/* ─── Personal toggle ────────────────────────────────────────────────────── */
.personal-toggle-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
  font-family: var(--font-sans);
}
.personal-toggle-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--plum-500);
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════════════════════════ */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--ink);
  color: var(--cream-100);
  padding: 12px 20px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  white-space: nowrap;
  z-index: 2000;
  box-shadow: var(--shadow-lg);
  font-family: var(--font-sans);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ═══════════════════════════════════════════════════════════════════════════
   BELL NOTIFICATIONS
   ═══════════════════════════════════════════════════════════════════════════ */
.bell-wrap { position: relative; display: inline-flex; }
.bell-btn  { position: relative; }

.bell-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--honey-400);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 0 0 2px var(--surface);
  animation: bell-pop 0.3s ease;
  font-family: var(--font-mono);
}
@keyframes bell-pop {
  0%   { transform: scale(0); }
  70%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.bell-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 300px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  overflow: hidden;
}
.bell-dropdown.open { display: block; }

.bell-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.bell-mark-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  color: var(--cream-600);
  padding: 3px 8px;
  border-radius: var(--r-sm);
  transition: all var(--transition);
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-sans);
}
.bell-mark-btn:hover { background: var(--cream-100); color: var(--ink); }

.bell-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}
.bell-item:last-child { border-bottom: none; }
.bell-item:hover { background: var(--cream-100); }

.bell-item-icon {
  width: 30px;
  height: 30px;
  background: var(--honey-50);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--honey-600);
  font-size: 15px;
  flex-shrink: 0;
  border: 1px solid var(--honey-100);
}
.bell-item-body  { flex: 1; min-width: 0; }
.bell-item-name  { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bell-item-meta  { font-size: 11px; color: var(--cream-600); margin-top: 2px; font-family: var(--font-mono); }
.bell-empty {
  padding: 20px 14px;
  text-align: center;
  color: var(--cream-500);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.bell-item-read { opacity: 0.5; cursor: default; }
.bell-item-read:hover { background: transparent !important; }
.bell-item-read .bell-item-icon { background: var(--cream-100) !important; color: var(--cream-500) !important; border-color: var(--border) !important; }
.bell-item-read .bell-item-name { color: var(--cream-600); font-weight: 500; }
.bell-item-read .bell-item-name::after { content: ' ✓'; color: var(--ok); font-size: 11px; }

/* ═══════════════════════════════════════════════════════════════════════════
   ТЕМНА ТЕМА
   ═══════════════════════════════════════════════════════════════════════════ */
body.dark {
  /* ── Warm neutrals (remapped to kit dark scale) ──────────────────────────── */
  --cream-50:  #1c160f;
  --cream-100: #221a11;
  --cream-200: #2b2117;
  --cream-300: #33271a;
  --cream-400: #503f29;
  --cream-500: #8a7757;
  --cream-600: #9c8b6c;
  --cream-700: #c4b393;
  --cream-800: #e0cba8;
  --ink:       #f3e9d4;

  /* ── Borders ─────────────────────────────────────────────────────────────── */
  --border:        #3a2e1f;
  --border-strong: #503f29;

  /* ── Surfaces ────────────────────────────────────────────────────────────── */
  --surface:        #1e160c;
  --surface-sunken: #271c10;

  /* ── Semantic (brighter for dark bg) ─────────────────────────────────────── */
  --ok:       #5fbf68;
  --ok-bg:    rgba(95, 191, 104, 0.12);
  --warn:     #f4ca4b;
  --warn-bg:  rgba(244, 202, 75, 0.12);
  --danger:   #ef6b4f;
  --danger-bg:rgba(239, 107, 79, 0.12);

  /* ── Kit bridge (dark overrides) ─────────────────────────────────────────── */
  --amber:      #e89826;
  --amber-soft: #f5b95b;
  --amber-deep: #cf7f15;
  --amber-bg:   rgba(232, 152, 38, 0.12);
  --teal:       #62b8ce;
  --plum:       #c98b96;
  --bg:    #0f0c08;
  --bg2:   #171108;
  --surf:  #1e160c;
  --surf2: #271c10;
  --surf3: #312314;
  --line:  #2e2214;
  --line2: #4a3520;
  --text:  #f3e9d4;
  --text2: #c4b393;
  --text3: #8a7757;

  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md:  0 4px 14px rgba(0, 0, 0, 0.45);
  --shadow-lg:  0 18px 40px rgba(0, 0, 0, 0.55);

  background: #0f0c08;
  color: var(--ink);
}

/* Dark overrides */
body.dark .card-body   { background: var(--surface-sunken); }
body.dark .text-box    { background: var(--surface-sunken); }
body.dark .modal       { background: var(--surface); border-color: var(--border); }
body.dark .search-box  { background: rgba(40,35,32,0.9); }
body.dark .tcard       { background: var(--surface); }
body.dark .tcard .tright { background: var(--surface-sunken); }
body.dark .tcard-preview { background: var(--surface-sunken); }
body.dark .pin-template-btn {
  background: var(--surface-sunken);
  border-color: var(--border);
  color: var(--cream-500);
}
body.dark .pin-template-btn:hover,
body.dark .pin-template-btn.active {
  background: rgba(232,152,38,0.16);
  border-color: rgba(232,152,38,0.35);
  color: var(--honey-300);
}
body.dark .kpi-card    { background: var(--surface) !important; }
body.dark .bell-dropdown { box-shadow: 0 12px 40px rgba(0,0,0,.5); }

/* ── Dark pills ──────────────────────────────────────────────────────────── */
body.dark .pill,
body.dark .filter-btn,
body.dark .toolbar-btn,
body.dark .subcat-pill { background: var(--surface); border-color: var(--border); color: var(--cream-600); }

body.dark .pill[data-cat="1"] { color: #e8a84a; border-color: rgba(232,168,74,0.25); }
body.dark .pill[data-cat="2"] { color: #d4976a; border-color: rgba(212,151,106,0.25); }
body.dark .pill[data-cat="3"] { color: #d4705a; border-color: rgba(212,112,90,0.25); }
body.dark .pill[data-cat="4"] { color: #8aba68; border-color: rgba(138,186,104,0.25); }
body.dark .pill[data-cat="5"] { color: #b88090; border-color: rgba(184,128,144,0.25); }
body.dark .pill[data-cat="6"] { color: #c498a0; border-color: rgba(196,152,160,0.25); }
body.dark .pill[data-cat="7"] { color: #6eb4c8; border-color: rgba(110,180,200,0.25); }

body.dark .pill.special-pill { border-color: var(--border); color: var(--cream-600); }
body.dark .pill.special-pill:hover { border-color: var(--plum-300); color: var(--plum-300); }
body.dark .pill.special-pill.active { background: var(--plum-500); color: #fff; }

/* ── Dark subcat ─────────────────────────────────────────────────────────── */
body.dark .subcat-pill.active,
body.dark .active-sub { background: var(--honey-600); border-color: var(--honey-600); color: #fff; }

/* Плавний перехід між темами */
body, #user-bar, .card, .tcard, .modal, .search-box, .bell-dropdown {
  transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}

/* ═══════════════════════════════════════════════════════════════════════════
   KANBAN VIEW — За категорією
   ═══════════════════════════════════════════════════════════════════════════ */

/* Board wrapper (horizontal scroll) */
.results.view-kanban { overflow: visible; }
.kb-board {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 10px;
  align-items: flex-start;
  scrollbar-width: thin;
  scrollbar-color: var(--cream-300) transparent;
}
.kb-board::-webkit-scrollbar { height: 6px; }
.kb-board::-webkit-scrollbar-track { background: transparent; }
.kb-board::-webkit-scrollbar-thumb { background: var(--cream-300); border-radius: 3px; }

/* Column */
.kb-col {
  min-width: 240px;
  max-width: 260px;
  flex: 0 0 248px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}

/* Column header */
.kb-col-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--cream-50);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 2;
}
.kb-col-header .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.kb-col-name {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cream-600);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kb-col-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--cream-600);
  background: var(--cream-100);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  flex-shrink: 0;
}

/* Cards list */
.kb-cards { display: flex; flex-direction: column; }

/* Single kanban card */
.kb-card {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
  position: relative;
}
.kb-card:last-child { border-bottom: none; }
.kb-card:hover { background: var(--cream-50); }

/* Left color stripe */
.kb-stripe {
  width: 3px;
  border-radius: 2px;
  flex-shrink: 0;
  align-self: stretch;
  min-height: 36px;
}
.kb-stripe.pay      { background: var(--cat-pay); }
.kb-stripe.logistic { background: var(--cat-logistic); }
.kb-stripe.order    { background: var(--cat-order); }
.kb-stripe.quality  { background: var(--cat-quality); }
.kb-stripe.rules    { background: var(--cat-rules); }
.kb-stripe.services { background: var(--cat-services); }
.kb-stripe.docs     { background: var(--cat-docs); }
.kb-stripe.misc     { background: var(--cream-400); }

/* Card body */
.kb-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.kb-card-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.35;
  cursor: pointer;
  transition: color 0.12s;
}
.kb-card-title:hover { color: var(--honey-600); }

/* Subcategory pill */
.kb-subcat {
  display: inline-block;
  font-size: 11px;
  color: var(--honey-700);
  background: var(--honey-50);
  border: 1px solid var(--honey-100);
  border-radius: var(--r-xs);
  padding: 2px 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Tags */
.kb-tags-row { display: flex; flex-wrap: wrap; gap: 3px; }
.kb-tag {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--cream-600);
  cursor: pointer;
  transition: color 0.12s;
}
.kb-tag:hover { color: var(--honey-600); }

/* Footer: count + copy */
.kb-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2px;
}
.kb-uses {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--cream-500);
}
.kb-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: rgba(232, 152, 38, 0.1);
  color: var(--honey-600);
  border: 1px solid rgba(232, 152, 38, 0.25);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
  font-family: var(--font-sans);
}
.kb-copy-btn:hover {
  background: var(--honey-400);
  color: white;
  border-color: var(--honey-400);
}

/* "Show more" button */
.kb-more {
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--honey-600);
  background: var(--cream-50);
  border: none;
  border-bottom: 1px solid var(--border);
  border-top: 1px dashed var(--border);
  width: 100%;
  text-align: center;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background 0.12s, color 0.12s;
}
.kb-more:hover { background: var(--cream-100); color: var(--honey-700); }

/* Add-template button at column bottom */
.kb-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-sans);
  color: var(--cream-500);
  background: transparent;
  border: none;
  border-top: 1px dashed var(--border);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  border-radius: 0 0 var(--r-md, 10px) var(--r-md, 10px);
}
.kb-add-btn:hover {
  background: var(--honey-50);
  color: var(--honey-600);
}
.kb-add-btn i { font-size: 14px; }

body.dark .kb-add-btn { color: var(--text3); border-top-color: var(--line); }
body.dark .kb-add-btn:hover { background: var(--amber-bg); color: var(--amber-soft); }

/* Empty state */
.kb-empty {
  padding: 32px 20px;
  color: var(--cream-500);
  font-size: 13px;
  text-align: center;
}

/* ── Dark mode ─────────────────────────────────────────────────────────────── */
body.dark .kb-col           { background: var(--surf); border-color: var(--line); }
body.dark .kb-col-header    { background: var(--surf2); border-bottom-color: var(--line); }
body.dark .kb-col-name      { color: var(--text3); }
body.dark .kb-col-count     { background: var(--surf3); border-color: var(--line); color: var(--text3); }
body.dark .kb-card          { border-bottom-color: var(--line); }
body.dark .kb-card:hover    { background: var(--surf2); }
body.dark .kb-card-title    { color: var(--text); }
body.dark .kb-card-title:hover { color: var(--amber-soft); }
body.dark .kb-subcat        { background: var(--amber-bg); border-color: rgba(232,152,38,0.2); color: var(--amber-soft); }
body.dark .kb-tag           { color: var(--text3); }
body.dark .kb-tag:hover     { color: var(--amber-soft); }
body.dark .kb-uses          { color: var(--text3); }
body.dark .kb-copy-btn      { background: rgba(232,152,38,0.1); color: var(--amber-soft); border-color: rgba(232,152,38,0.25); }
body.dark .kb-copy-btn:hover { background: var(--amber); color: #1b0e00; border-color: var(--amber); }
body.dark .kb-more          { background: var(--surf2); border-bottom-color: var(--line); border-top-color: var(--line); color: var(--amber-soft); }
body.dark .kb-more:hover    { background: var(--surf3); }
body.dark .kb-board::-webkit-scrollbar-thumb { background: var(--line2); }

/* ═══════════════════════════════════════════════════════════════════════════
   АДАПТИВНІСТЬ
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .form-row.two-col { grid-template-columns: 1fr; }
  .modal { max-height: 100vh; border-radius: 0; }
  .modal-overlay { padding: 0; align-items: flex-end; }
  .toolbar { flex-direction: column; align-items: flex-start; }
  .userbar-name { display: none; }
  .preview-vars { grid-template-columns: 1fr; }
  .tcard { grid-template-columns: 4px 1fr; }
  .tcard .tright { display: none; }
}