/* YBees Nova — shared visual language for authenticated product surfaces. */
:root {
  --nova-cyan:#22c7ff; --nova-violet:#7c3aed; --nova-magenta:#d946ef;
  --nova-green:#4ade80; --nova-coral:#fb7185; --nova-ink:#07101f;
}
html[data-theme="light"] {
  --bg:#f6f8fd !important; --surface:#ffffff !important; --surface-2:#edf3fc !important;
  --border:rgba(93,140,203,.20) !important; --border-strong:rgba(71,159,222,.38) !important;
  --text:#17233a !important; --text-sec:#52647e !important; --text-light:#7184a1 !important;
  --amber:var(--nova-violet) !important; --amber-dark:#6332d5 !important; --amber-light:#a78bfa !important;
  --green:#20a96b !important; --red:#e54863 !important;
}
html[data-theme="dark"] {
  --bg:#07101f !important; --surface:#0c1930 !important; --surface-2:#111f39 !important;
  --border:rgba(106,167,241,.16) !important; --border-strong:rgba(83,190,255,.35) !important;
  --text:#f4f7ff !important; --text-sec:#b6c5db !important; --text-light:#7486a3 !important;
  --amber:var(--nova-cyan) !important; --amber-dark:#0aa8e0 !important; --amber-light:#6bdcff !important;
  --green:var(--nova-green) !important; --red:var(--nova-coral) !important;
}
body { background:radial-gradient(ellipse 46% 31% at 83% -10%,rgba(139,92,246,.13),transparent 65%),radial-gradient(ellipse 33% 25% at 8% 8%,rgba(34,199,255,.09),transparent 72%),var(--bg) !important; }
html[data-theme="light"] .app-main { background:transparent; }

/* Content-tag chips use the shared semantic colors from each page.  The
   original light-theme green was too pale against the chip background,
   especially on mobile. Keep the dark theme unchanged but use accessible
   ink colors in light mode. */
html[data-theme="light"] .content-tag-chip.tag-pro_ukraine {
  color:#087a45 !important;
  background:rgba(32,169,107,.16) !important;
}
html[data-theme="light"] .content-tag-chip.tag-antisemitic {
  color:#bd263c !important;
  background:rgba(229,72,99,.13) !important;
}
html[data-theme="light"] .content-tag-chip.tag-kremlinbot_rhetoric {
  color:#8a5600 !important;
  background:rgba(245,166,35,.18) !important;
}
.ybees-sidebar { background:rgba(255,255,255,.86) !important; border-right-color:var(--border) !important; }
html[data-theme="dark"] .ybees-sidebar { background:rgba(8,19,40,.92) !important; }
/* Removed the unconditional violet override that used to sit here - it
   ignored --amber's own theme-aware value entirely (cyan in dark mode,
   violet in light - see this file's own :root blocks above), which is
   exactly why the sidebar's ".ai" read dim/washed-out in the product's
   default dark theme instead of matching the landing page's own bright
   cyan wordmark. sidebar.css's own `.sb-brand span { color: var(--amber,
   ...) }` already does the right thing once nothing here fights it. */
.sb-logo-icon { animation:none !important; display:grid; place-items:center; }
.sb-logo-icon svg { filter:drop-shadow(0 0 7px rgba(34,199,255,.30)); }
.sb-nav-item.active, .sb-channel-item.active { background:linear-gradient(100deg,rgba(124,58,237,.13),rgba(34,199,255,.12)) !important; color:var(--nova-violet) !important; }
html[data-theme="dark"] .sb-nav-item.active, html[data-theme="dark"] .sb-channel-item.active { color:var(--nova-cyan) !important; }
.sb-nav-item:hover, .sb-channel-item:hover { background:rgba(72,137,231,.08) !important; }
.page, .dashboard-page, .content { position:relative; }
.card, .panel, .stat-card, .summary-card, .table-card, .section-card {
  border-color:var(--border) !important;
  box-shadow:0 12px 28px rgba(37,66,108,.08),inset 0 1px rgba(255,255,255,.55) !important;
}
html[data-theme="dark"] .card, html[data-theme="dark"] .panel, html[data-theme="dark"] .stat-card, html[data-theme="dark"] .summary-card, html[data-theme="dark"] .table-card, html[data-theme="dark"] .section-card { box-shadow:0 16px 36px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.04) !important; }
button:not(.sb-theme-btn), .btn, .button, .primary-btn, .action-btn {
  border-radius:10px;
}
button.primary, .btn-primary, .primary-btn, .action-btn.primary, .save-btn, .search-btn, .topup-btn, .obs-link-row button {
  background:linear-gradient(105deg,var(--nova-violet),var(--nova-cyan)) !important;
  border-color:transparent !important; color:#fff !important;
  box-shadow:0 7px 16px rgba(95,77,224,.22) !important;
}
.topup-btn:hover:not(:disabled), .obs-link-row button:hover:not(:disabled) { background:linear-gradient(105deg,#6b2fd4,#0aa8e0) !important; }
input, select, textarea { border-color:var(--border) !important; }
input:focus, select:focus, textarea:focus { border-color:var(--nova-cyan) !important; box-shadow:0 0 0 3px rgba(34,199,255,.14) !important; }
.live-badge, .badge-live, .live-pill { background:var(--nova-coral) !important; color:#fff !important; }
.status-live, .positive, .support { color:var(--nova-green) !important; }
.negative, .attack { color:var(--nova-coral) !important; }

/* Shared product hierarchy: every data page gets the same concise, live
   intelligence voice without changing any of its data contracts. */
.page-title, .channel-header h1, .hive-header-title, .live-page-title {
  letter-spacing:-.045em !important; font-weight:800 !important;
}
.page-title::first-letter { text-shadow:0 0 18px rgba(34,199,255,.12); }
.page-sub, .channel-header p, .hive-header-subtitle { line-height:1.55; }
.channel-header {
  background:linear-gradient(105deg,#081426,#101d3a 60%,#12163f) !important;
  border-bottom:1px solid var(--border) !important;
  position:relative; overflow:hidden;
}
.channel-header::after { content:""; position:absolute; width:360px; height:220px; right:-100px; top:-145px; background:radial-gradient(ellipse,rgba(124,58,237,.34),transparent 68%); pointer-events:none; }
.channel-header > * { position:relative; z-index:1; }
.channel-header .channel-info h1 { color:#f7fbff !important; text-shadow:0 2px 18px rgba(0,0,0,.32); }
.channel-header .channel-info p { color:rgba(231,240,255,.84) !important; text-shadow:0 1px 10px rgba(0,0,0,.25); }
.channel-header .channel-info p a { color:#9d6cff !important; text-shadow:0 0 12px rgba(157,108,255,.45); }
.channel-avatar-img { box-shadow:0 0 0 2px rgba(34,199,255,.42),0 0 28px rgba(34,199,255,.22); }
.hive-header-bar, .toolbar, .filter-bar, .filters-bar {
  border-color:var(--border) !important;
  background:color-mix(in srgb, var(--surface) 84%, transparent) !important;
  box-shadow:0 10px 24px rgba(38,79,132,.06);
}
.stat-card, .stat-pill, .rank-card, .chart-card, .graph-card {
  background:linear-gradient(140deg,color-mix(in srgb,var(--surface) 96%,#fff),var(--surface-2)) !important;
  border-color:var(--border) !important;
}
html[data-theme="dark"] .stat-card, html[data-theme="dark"] .stat-pill,
html[data-theme="dark"] .rank-card, html[data-theme="dark"] .chart-card,
html[data-theme="dark"] .graph-card {
  background:linear-gradient(140deg,rgba(16,32,59,.96),rgba(10,21,42,.94)) !important;
}
.stat-card { overflow:hidden; position:relative; }
.stat-card::after { content:""; position:absolute; width:100px; height:100px; right:-45px; top:-55px; border-radius:50%; background:radial-gradient(circle,rgba(34,199,255,.18),transparent 67%); pointer-events:none; }
.card-title, .chart-card-title, .rank-card-title { letter-spacing:.01em; }
/* border-width:0, not just border-color:transparent - a transparent
   border still occupies geometry that gets anti-aliased separately from
   the gradient background's own border-radius clip, and the two edges
   don't quite line up: a thin fringe of the gradient bleeds past the
   pill's rounded corners (reported live, 2026-09-08, on "Top Good
   Vibes"/"By buzzes" pills - a transition fix was tried first and did
   NOT resolve it, confirming this is a static border/fill seam, not an
   animation artifact). Removing the border outright fixes the seam at
   the cost of these pills sitting ~1px narrower than their inactive
   siblings - imperceptible in practice. */
.quick-tab.active, .tb-btn.active, .btn-group .active { background:linear-gradient(105deg,var(--nova-violet),var(--nova-cyan)) !important; color:#fff !important; border-color:transparent !important; border-width:0 !important; }
.users-table th, .messages-table th, table th { color:var(--text-sec) !important; }
html[data-theme="light"] .card, html[data-theme="light"] .rank-card, html[data-theme="light"] .chart-card { background:#fff !important; }

/* A compact visual language for standalone utility and admin views. */
body.nova-standalone { background:radial-gradient(ellipse at 80% 0,rgba(124,58,237,.16),transparent 48%),#07101f !important; }
body.nova-standalone nav { background:rgba(7,16,31,.84) !important; border-bottom:1px solid rgba(83,190,255,.16); }
body.nova-standalone .card { border-color:rgba(83,190,255,.24) !important; box-shadow:0 20px 55px rgba(0,0,0,.26) !important; }

/* Mobile app canvas: use the viewport, not desktop gutters. Individual
   pages historically carried 32–40px side padding, which left narrow
   content columns and undersized data cards on phones. */
@media (max-width:768px) {
  .app-main { width:100%; max-width:100vw; min-width:0; }
  .app-main > .page, .app-main .page {
    width:100%; max-width:none !important; margin-left:0 !important; margin-right:0 !important;
    padding-left:16px !important; padding-right:16px !important; box-sizing:border-box;
  }
  .app-topnav { padding-left:16px; padding-right:16px; }
  .channel-header, .hive-header-bar { padding-left:16px !important; padding-right:16px !important; }
}
@media (max-width:390px) {
  .app-main > .page, .app-main .page { padding-left:12px !important; padding-right:12px !important; }
  .app-topnav, .channel-header, .hive-header-bar { padding-left:12px !important; padding-right:12px !important; }
}