.watch-btn {
  background: none; border: none; cursor: pointer; padding: 0;
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  color: var(--text-tertiary); border-radius: 5px;
  transition: color 0.15s, transform 0.15s;
  flex-shrink: 0;
}
.watch-btn:hover { color: #FF9500; transform: scale(1.15); }
.watch-btn.active { color: #FF9500; }
.watch-btn svg { width: 14px; height: 14px; }

/* Bell icon in header */
.bell-btn {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--text-secondary); position: relative;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.bell-btn:hover { background: rgba(128,128,128,0.12); color: var(--text); }
.bell-btn svg { width: 16px; height: 16px; }
.bell-badge {
  position: absolute; top: 3px; right: 3px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #FF3B30; border: 1.5px solid var(--header-bg);
  display: none;
}
.bell-badge.show { display: block; }

/* Watchlist tab */
.watch-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 40px 20px; text-align: center;
}
.watch-empty svg { width: 36px; height: 36px; color: var(--text-tertiary); }
.watch-empty p { font-size: 14px; color: var(--text-secondary); line-height: 1.5; }

/* ── Watch Card v3 — name-top layout ── */
.watch-card {
  background: var(--bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  transition: box-shadow 0.18s, border-color 0.18s;
}
[data-theme="dark"] .watch-card { border-color: rgba(255,255,255,0.13); }
[data-theme="light"] .watch-card { border-color: rgba(0,0,0,0.12); box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.watch-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.10); }
.watch-card.has-changes { border-color: #FF9500; }
/* no left accent stripe — removed */
.watch-card__accent { display: none; }
.watch-card.has-changes { border-color: #FF9500; border-left: 3px solid #FF9500; }

/* right stock stripe */
.watch-card__stock {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 3px; border-radius: 0 10px 10px 0;
  background: #34C759;
}
.watch-card__stock.out { background: #FF3B30; }

/* HEAD */
.watch-card__head {
  display: flex; align-items: center;
  gap: 6px; padding: 6px 8px 5px 10px; min-height: 28px;
}
.watch-card__name {
  font-size: 12px; font-weight: 600; color: var(--text);
  line-height: 1.3; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.watch-card__del {
  background: none; border: none; cursor: pointer; padding: 0;
  width: 18px; height: 18px; display: flex; align-items: center;
  justify-content: center; color: var(--text-tertiary); border-radius: 4px; flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}
.watch-card__del:hover { color: #FF3B30; background: rgba(255,59,48,0.10); }
.watch-card__del svg { width: 9px; height: 9px; }

/* BODY: single row */
.watch-card__body {
  display: flex; align-items: center;
  border-top: 1px solid var(--divider);
  padding: 4px 10px 5px 10px;
  gap: 0; overflow: hidden; min-height: 26px;
}
/* sep */
.wc-sep { width: 1px; height: 13px; background: var(--divider); flex-shrink: 0; margin: 0 6px; }
/* SKU: flex grow, min 0, clips with ellipsis */
.wc-sku {
  flex: 1 1 0; min-width: 0; overflow: hidden;
  font-family: 'SF Mono','Menlo','Courier New',monospace;
  font-size: 11px; font-weight: 600; color: #0078D4;
  white-space: nowrap; text-overflow: ellipsis;
}
/* qty chip: fixed 54px — макс "9 999 шт." */
.wc-qty {
  flex: 0 0 54px; display: flex; align-items: center; gap: 4px; overflow: hidden;
}
/* price chip: fixed 58px — макс "99 999" */
.wc-price {
  flex: 0 0 58px; display: flex; align-items: center; gap: 4px; overflow: hidden;
}
/* distri: flex grow */
.wc-distri {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 4px; overflow: hidden;
}
.wc-qty svg, .wc-price svg, .wc-distri svg { width: 12px; height: 12px; flex-shrink: 0; }
.wc-val {
  font-size: 11px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wc-val.distri { color: var(--text-secondary); font-weight: 500; }
.wc-val.no-data { color: var(--text-tertiary); font-weight: 400; }
.wc-was { font-size: 10px; color: var(--text-tertiary); text-decoration: line-through; opacity: 0.65; white-space: nowrap; }
.wc-new { font-size: 11px; font-weight: 700; color: var(--text); white-space: nowrap; }

/* delta */
.watch-card__metric-delta {
  display: inline-flex; align-items: center; gap: 2px; font-size: 10px; font-weight: 600;
}
.watch-card__metric-delta svg { width: 8px; height: 8px; flex-shrink: 0; }
.watch-card__metric-delta.up   { color: #FF3B30; }
.watch-card__metric-delta.down { color: #34C759; }
.watch-card__metric-delta.qty  { color: #FF9500; }
.watch-card__metric-was { font-size: 9px; color: var(--text-tertiary); text-decoration: line-through; opacity: 0.6; white-space: nowrap; }

/* style overrides */
[data-style="circle"] .watch-card { border-radius: 14px !important; }
[data-style="circle"] .watch-card__stock { border-radius: 0 14px 14px 0 !important; }
[data-style="circle"] .watch-card__del { border-radius: 6px !important; }
[data-style="square"] .watch-card { border-radius: 4px !important; }
[data-style="square"] .watch-card__stock { border-radius: 0 4px 4px 0 !important; }
[data-style="square"] .watch-card__del { border-radius: 2px !important; }

/* Watch card clear button — red, both themes */
.watch-clear-btn {
  width: 100%; height: 34px; border-radius: 6px;
  background: rgba(255,59,48,0.08); color: #FF3B30;
  border: 1px solid rgba(255,59,48,0.30);
  font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background 0.15s, opacity 0.15s; font-family: inherit;
}
.watch-clear-btn:hover { background: rgba(255,59,48,0.14); }
/* === Watch card layout modes === */
/* Layout toggle buttons in watchlist header */
.wl-layout-btn {
  width: 28px; height: 28px; border-radius: 6px;
  border: 1px solid var(--filter-border); background: transparent;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--text-tertiary); transition: all 0.15s; flex-shrink: 0; padding: 0;
}
.wl-layout-btn:hover { background: var(--row-hover); color: var(--text); }
.wl-layout-btn.active { background: var(--accent-light); color: var(--accent); border-color: var(--accent); }
.wl-layout-btn svg { display: block; }
/* Watch grid container */
.watch-grid {
  display: flex; flex-direction: column; gap: 5px; padding: 8px 4px;
}
/* 3-row mode: row2 and row3 are new rows; body stays visible in both modes */
.watch-card__row2,
.watch-card__row3 {
  display: none; /* hidden by default (2-row mode) */
}
/* In 3-row mode: hide original body, show row2/row3 */
.watch-card--rows3 .watch-card__body { display: none; }
.watch-card--rows3 .watch-card__row2,
.watch-card--rows3 .watch-card__row3 { display: flex; align-items: center; }
/* Row 2: SKU(flex) | Price(25%) */
.watch-card__row2 {
  border-top: 1px solid var(--divider);
  padding: 3px 10px 3px 10px;
  gap: 0; overflow: hidden; min-width: 0; min-height: 24px;
}
/* Row 3: Distri(flex) | Qty(25%) */
.watch-card__row3 {
  border-top: 1px solid var(--divider);
  padding: 3px 10px 4px 10px;
  gap: 0; overflow: hidden; min-width: 0; min-height: 24px;
}
/* Flex layout for row2 and row3 — price and qty each take 25% */
.watch-card__row2 .wc-sku   { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.watch-card__row2 .wc-price { flex: 0 0 25%; min-width: 0; overflow: hidden; }
.watch-card__row3 .wc-distri { flex: 1 1 0; min-width: 0; overflow: hidden; }
.watch-card__row3 .wc-qty   { flex: 0 0 25%; min-width: 0; overflow: hidden; }
/* Separator alignment: uniform width in both rows */
.watch-card__row2 .wc-sep,
.watch-card__row3 .wc-sep { width: 1px; height: 13px; background: var(--divider); flex-shrink: 0; margin: 0 6px; }
/* Alternating colors: works in both light & dark via CSS variables */
.watch-card__body { background: var(--row-alt); }
.watch-card--rows3 .watch-card__row2 { background: var(--row-alt); }
.watch-card--rows3 .watch-card__row3 { background: transparent; }

[data-style="circle"] .watch-clear-btn { border-radius: 10px !important; font-size: 13px !important; }
/* Legacy compat — hide old cards if any remain */
.watch-item { display: none; }
.watch-item__tag, .watch-item__changed, .watch-item__price, .watch-item__qty,
.watch-item__name, .watch-item__del, .watch-item__top, .watch-item__meta { display: none; }

/* ===== AUTH ===== */
.user-btn {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer;
  background: var(--card-border);
  color: var(--text-secondary);
  transition: background 0.18s, color 0.18s;
  flex-shrink: 0; padding: 0;
}
.user-btn:hover { background: rgba(128,128,128,0.18); color: var(--text); }
.user-btn svg { width: 16px; height: 16px; }
.user-btn.logged-in { background: #0078D4; color: #fff; border-radius: 4px; }
.user-btn.logged-in:hover { background: #106EBE; }

/* Auth overlay */