/**
 * UNARA Visual Refinement — Teal / White / Purple Balance
 * Visual layer only. Teal remains primary for actions; violet is accent depth.
 */

:root {
  --accent-violet: #9a8fb5;
  --accent-violet-muted: #8b82a8;
  --accent-violet-soft: rgba(154, 143, 181, 0.1);
  --border-violet: rgba(154, 143, 181, 0.14);
  --border-neutral: rgba(255, 255, 255, 0.07);
}

/* 7 — Dashboard background depth (faint purple; preserves animated body layers) */
body::before {
  background:
    radial-gradient(circle at 14% 10%, rgba(154, 143, 181, 0.03), transparent 42%),
    radial-gradient(circle at 18% 12%, rgba(15, 168, 157, 0.035), transparent 40%),
    radial-gradient(circle at 84% 18%, rgba(47, 159, 154, 0.028), transparent 36%),
    radial-gradient(ellipse at 50% 92%, rgba(10, 111, 105, 0.04), transparent 52%);
}

/* 1 — Sidebar ambient (purple → teal vertical wash) */
.sidebar {
  background-color: var(--bg-1);
  background-image: linear-gradient(
    180deg,
    rgba(154, 143, 181, 0.042) 0%,
    rgba(15, 168, 157, 0.032) 38%,
    transparent 68%
  );
}

/* 6 — White-forward content hierarchy */
.stat-label,
.panel-head .header-subtitle,
.status-row .k,
.promo-text,
.sugg,
.doc-nav-item,
.chip:not(.active),
.wo-panel-lead,
.explorer-trust-risk-lede {
  color: rgba(156, 172, 192, 0.82) !important;
}

.stat-value,
.status-row .v {
  color: rgba(241, 245, 249, 0.96) !important;
}

.hash {
  color: rgba(186, 214, 218, 0.9) !important;
}

/* 2 — Card borders: teal primary panels, violet secondary, neutral elsewhere */
.app .panel,
.app .stat,
.app .search-input,
.app .explorer-wallet-panel,
.app #netOverwrap {
  border-color: var(--border-teal) !important;
}

.app .ai-card,
.app .wallet-card,
.app .insight-card,
.app .explorer-trust-risk-metric,
.app .net-hybrid-cell,
.app .explorer-dag-viz,
.app .status-box,
.app .promo,
.app .explorer-wallet-tx-item,
.app .explorer-network-insights .insights-card,
.app .metric,
.app .bar,
.app .explorer-trust-risk-awaiting,
.app .explorer-live-usage-awaiting,
.app .code-block {
  border-color: var(--border-violet) !important;
}

.app .btn:not(.btn-primary):not(.connect-wallet),
.app .chip:not(.active),
.app .nav-item:not(.active),
.app .icon-btn {
  border-color: var(--border-neutral) !important;
}

/* 5 — Teal preserved for primary actions & active nav */
.connect-wallet,
.btn-primary,
.ask-send,
.status-btn,
.nav-item.active,
.chip.active,
.doc-nav-item.active {
  border-color: var(--panel-border-2) !important;
}

/* 4 — Section header micro-accents (no typography change) */
#page-wallets .page-title,
#page-ai-insights .page-title,
.li-hero-kicker,
#netOverwrap > div:first-of-type > div:first-child,
#page-dashboard .dash-mission-stats {
  box-shadow: inset 3px 0 0 rgba(154, 143, 181, 0.38);
}

/* 3 — Network visualization: teal primary nodes, violet secondary, teal-white edges */
.map-dot {
  background: var(--accent-teal) !important;
  box-shadow: 0 0 10px rgba(15, 168, 157, 0.18) !important;
}

.map-dot.purple {
  background: var(--accent-violet-muted) !important;
  box-shadow: 0 0 8px rgba(154, 143, 181, 0.22) !important;
}

#page-dashboard .explorer-dag-svg .dag-edge.el,
#page-dashboard .explorer-dag-svg .dag-edge.mid {
  stroke: rgba(15, 168, 157, 0.42) !important;
}

#page-dashboard .explorer-dag-svg circle.dag-node.n1 {
  fill: rgba(15, 168, 157, 0.32) !important;
  stroke: rgba(15, 168, 157, 0.82) !important;
}

#page-dashboard .explorer-dag-svg circle.dag-node.n2,
#page-dashboard .explorer-dag-svg circle.dag-node.n3 {
  fill: rgba(154, 143, 181, 0.26) !important;
  stroke: rgba(168, 158, 188, 0.7) !important;
}

#page-dashboard .explorer-dag-svg circle.dag-node.n4 {
  fill: rgba(15, 168, 157, 0.28) !important;
  stroke: rgba(47, 159, 154, 0.75) !important;
}

#page-dashboard .net-hybrid-cell.net-hybrid-dag .net-hybrid-label {
  color: rgba(168, 158, 188, 0.88) !important;
}

#page-dashboard .net-hybrid-cell.net-hybrid-el .net-hybrid-label,
#page-dashboard .explorer-dag-viz-labels span:nth-child(1) {
  color: rgba(15, 168, 157, 0.88) !important;
}