/* ================================================= */
/* FONTS */
/* ================================================= */

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

/* ================================================= */
/* RESET */
/* ================================================= */

*, *::before, *::after {
  margin: 0; padding: 0;
  box-sizing: border-box;
}

/* ================================================= */
/* TOKENS */
/* ================================================= */

:root {
  /* backgrounds - خالص تیره، بدون رنگ نارنجی */
  --bg:        #0a0a0f;
  --bg-2:      #0f0f18;
  --bg-3:      #13131e;
  --bg-4:      #171724;

  /* borders */
  --border:    rgba(255,255,255,0.07);
  --border-h:  rgba(255,255,255,0.14);

  /* text */
  --text:      #ffffff;
  --text-2:    #ccccdd;
  --text-3:    #8888aa;

  /* orange - فقط برای دکمه و accent */
  --orange:    #F7931A;
  --orange-2:  #d4780f;
  --orange-lo: rgba(247,147,26,0.12);
  --orange-md: rgba(247,147,26,0.22);

  /* status */
  --green:     #22c55e;
  --red:       #ef4444;
  --green-lo:  rgba(34,197,94,0.1);
  --red-lo:    rgba(239,68,68,0.1);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;

  --font-ui:   'Inter', 'Vazirmatn', sans-serif;
  --font-mono: 'JetBrains Mono', 'Vazirmatn', monospace;

  --ease:      cubic-bezier(0.4,0,0.2,1);
}

/* ================================================= */
/* BASE */
/* ================================================= */

html, body { width:100%; height:100%; }

body {
  height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ================================================= */
/* SCROLLBAR */
/* ================================================= */

::-webkit-scrollbar       { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); border-radius:99px; }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.18); }

/* ================================================= */
/* APP */
/* ================================================= */

.app {
  width:100%; height:100dvh;
  display:flex; overflow:hidden;
}

/* ================================================= */
/* SIDEBAR */
/* ================================================= */

.sidebar {
  width: 272px;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 14px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  background: var(--bg-2);
  border-right: 1px solid var(--border);
}

/* ================================================= */
/* LOGO */
/* ================================================= */

.logo-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 12px 16px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.logo-image {
  width: 150px;
  height: 150px;
  object-fit: contain;
  filter: drop-shadow(0 0 30px rgba(247,147,26,0.85)) drop-shadow(0 0 50px rgba(247,147,26,0.5));
}

.logo-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.logo-main {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.2px;
}

.logo-sub {
  font-size: 10px;
  color: var(--text-3);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ================================================= */
/* SIDEBAR SECTION LABEL */
/* ================================================= */

.sidebar-section-label {
  font-size: 9px;
  font-family: var(--font-mono);
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 1.8px;
  padding: 10px 4px 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ================================================= */
/* ACTION STACK */
/* ================================================= */

.action-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
}

/* ================================================= */
/* FORM GROUP */
/* ================================================= */

.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
}

.form-group label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-2);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding-left: 2px;
}

/* ================================================= */
/* INPUTS */
/* ================================================= */

input, select {
  width: 100%;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  outline: none;
  background: var(--bg);
  border: 1px solid var(--border);
  color: #ffffff;
  font-size: 12px;
  font-family: var(--font-mono);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}

input::placeholder { color: var(--text-3); }

input:focus, select:focus {
  border-color: rgba(247,147,26,0.5);
  box-shadow: 0 0 0 3px rgba(247,147,26,0.08);
}

select option { background: var(--bg-3); color: var(--text); }

/* ================================================= */
/* GLASS CARD */
/* ================================================= */

.glass-card {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 4px;
}

/* ================================================= */
/* CARD TITLE */
/* ================================================= */

.card-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-2);
  margin-bottom: 12px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ================================================= */
/* BUTTONS — base reset */
/* ================================================= */

button {
  cursor: pointer;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border: none;
  border-radius: var(--radius-sm);
  transition: all .18s var(--ease);
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* PRIMARY — نارنجی پر */
.primary-btn {
  width: 100%;
  padding: 10px 16px;
  background: var(--orange);
  color: #fff;
  border: none;
  box-shadow: 0 2px 12px rgba(247,147,26,0.25);
}

.primary-btn:hover {
  background: #ffa030;
  box-shadow: 0 4px 18px rgba(247,147,26,0.38);
  transform: translateY(-1px);
}

.primary-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 6px rgba(247,147,26,0.2);
}

/* SECONDARY — شفاف با border */
.secondary-btn {
  width: 100%;
  padding: 10px 16px;
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--border-h) !important;
}

.secondary-btn:hover {
  background: var(--bg-4);
  color: var(--text);
  border-color: rgba(255,255,255,0.2) !important;
  transform: translateY(-1px);
}

/* DANGER — قرمز کم‌رنگ */
.danger-btn {
  width: 100%;
  padding: 10px 16px;
  background: transparent;
  color: #f87171;
  border: 1px solid rgba(239,68,68,0.25) !important;
}

.danger-btn:hover {
  background: var(--red-lo);
  border-color: rgba(239,68,68,0.45) !important;
  transform: translateY(-1px);
}

/* ================================================= */
/* LANGUAGE BUTTON */
/* ================================================= */

.lang-btn {
  width: auto !important;
  padding: 7px 13px !important;
  font-size: 11px !important;
  background: var(--bg-3) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-2) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
}

.lang-btn:hover {
  background: var(--bg-4) !important;
  color: var(--text) !important;
  border-color: var(--border-h) !important;
  transform: none !important;
}

/* ================================================= */
/* MAIN LAYOUT */
/* ================================================= */

.main-layout {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ================================================= */
/* TOPBAR */
/* ================================================= */

/* topbar - overridden below in TOPBAR EXTENDED */

.live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px rgba(34,197,94,0.6);
  animation: blink 2s ease-in-out infinite;
  display: inline-block;
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

.live-dot.status-connected {
  background: #22c55e;
  box-shadow: 0 0 10px rgba(34,197,94,0.7);
}

.live-dot.status-unstable {
  background: #f97316;
  box-shadow: 0 0 10px rgba(249,115,22,0.7);
  animation: blink-fast 0.6s ease-in-out infinite;
}

.live-dot.status-disconnected {
  background: #ef4444;
  box-shadow: 0 0 10px rgba(239,68,68,0.7);
  animation: none;
}

@keyframes blink-fast {
  0%,100% { opacity:1; }
  50%      { opacity:0.3; }
}

@keyframes blink {
  0%,100% { opacity:1; }
  50%      { opacity:0.4; }
}

/* ================================================= */
/* CONTENT */
/* ================================================= */

.content-layout {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 10px;
  overflow: hidden;
}

/* ================================================= */
/* GRAPH PANEL */
/* ================================================= */

.graph-panel {
  flex: 1;
  min-width: 0; min-height: 0;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bg-2);
  border: 1px solid var(--border);
}

#3d-graph {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

#3d-graph canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  touch-action: none;
}

/* ================================================= */
/* GRAPH OVERLAY */
/* ================================================= */

.graph-overlay {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}

.overlay-chip {
  width: max-content;
  padding: 6px 11px;
  border-radius: 99px;
  background: rgba(10,10,15,0.8);
  border: 1px solid var(--border);
  backdrop-filter: blur(8px);
  font-size: 11px;
  font-weight: 600;
  color: #ffffff;
  font-family: var(--font-mono);
}

/* ================================================= */
/* RIGHT PANEL */
/* ================================================= */

.right-panel {
  width: 268px;
  min-width: 240px; max-width: 268px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  flex-shrink: 0;
}

/* ================================================= */
/* STATS */
/* ================================================= */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 8px;
}

.stat-box {
  padding: 14px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-4);
  border: 1px solid var(--border);
  text-align: center;
  transition: border-color .18s var(--ease);
}

.stat-box:hover { border-color: var(--border-h); }

.stat-number {
  font-size: 28px;
  font-weight: 800;
  color: var(--orange);
  margin-bottom: 4px;
  font-family: var(--font-mono);
  line-height: 1;
}

.stat-label {
  font-size: 10px;
  color: var(--text-2);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ================================================= */
/* ACTIVITY */
/* ================================================= */

.activity-card {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
}

#activity-feed {
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column;
  gap: 6px;
}

.activity-item {
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  font-family: var(--font-mono);
  animation: fadein .2s ease;
}

@keyframes fadein {
  from { opacity:0; transform:translateY(-4px); }
  to   { opacity:1; transform:translateY(0); }
}

.activity-time    { font-size:10px; color:var(--text-3); margin-bottom:2px; }
.activity-message { color: #ffffff; }

.activity-success {
  background: var(--green-lo);
  border: 1px solid rgba(34,197,94,0.18);
  border-left: 3px solid rgba(34,197,94,0.55);
}

.activity-fail {
  background: var(--red-lo);
  border: 1px solid rgba(239,68,68,0.18);
  border-left: 3px solid rgba(239,68,68,0.55);
}

/* ================================================= */
/* BOTTOM PANEL */
/* ================================================= */

.bottom-panel {
  height: 290px;
  flex-shrink: 0;
  margin: 0 10px 10px;
  padding: 14px;
  overflow: visible;
  display: flex; flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--bg-2);
  border: 1px solid var(--border);
}

/* ================================================= */
/* TABS */
/* ================================================= */

.tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  flex-shrink: 0;
  background: var(--bg);
  padding: 4px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  width: fit-content;
}

.tab {
  flex: none;
  padding: 7px 16px;
  border: none !important;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-3) !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: all .18s var(--ease);
}

.tab:hover {
  color: var(--text-2) !important;
  background: var(--bg-3) !important;
  transform: none !important;
}

.tab.active {
  color: #fff !important;
  background: var(--orange) !important;
  box-shadow: 0 2px 8px rgba(247,147,26,0.3) !important;
}

/* ================================================= */
/* TAB PANELS */
/* ================================================= */

.tab-panels { flex:1; min-height:0; overflow:visible; }

.tab-panel {
  width:100%; height:100%;
  display:none; overflow-x:hidden; overflow-y:auto;
}

.active-panel { display:block; }

/* ================================================= */
/* DETAILS GRID */
/* ================================================= */

.details-grid {
  width:100%; height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
  align-content:start;
  gap:8px;
  padding: 2px 2px 8px 2px;
}

/* ================================================= */
/* NODE / CHANNEL CARDS */
/* ================================================= */

.node-card, .channel-card {
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--bg-3);
  border: 1px solid var(--border);
  display: flex; flex-direction: column;
  gap: 8px;
  transition: border-color .18s var(--ease), transform .18s var(--ease);
  animation: fadein .25s ease;
}

.node-card:hover, .channel-card:hover {
  transform: translateY(-1px);
  border-color: var(--border-h);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}

.node-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--orange);
  font-family: var(--font-mono);
}

.node-meta { display:flex; flex-direction:column; gap:6px; }

.meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-family: var(--font-mono);
}

.meta-row span:first-child { color: var(--text-2); }
.meta-row span:last-child  { color: var(--text); }

/* ================================================= */
/* RTL */
/* ================================================= */

/* ================================================= */
/* RTL                                               */
/* ================================================= */

body.rtl {
  direction: rtl;
}

/* sidebar به راست */
body.rtl .sidebar {
  border-right: none;
  border-left: 1px solid var(--border);
}

/* فرم‌ها */
body.rtl .form-group label {
  text-align: right;
}
body.rtl input,
body.rtl select {
  direction: rtl;
  text-align: right;
}

/* topbar - فقط direction */
body.rtl .topbar {
  direction: rtl;
}

/* graph overlay راست */
body.rtl .graph-overlay {
  left: auto;
  right: 14px;
  align-items: flex-end;
}

/* کارت‌ها */
body.rtl .glass-card,
body.rtl .node-card,
body.rtl .channel-card {
  text-align: right;
}
body.rtl .card-title,
body.rtl .node-title {
  flex-direction: row-reverse;
}
body.rtl .meta-row {
  flex-direction: row-reverse;
}

/* activity */
body.rtl .activity-item {
  text-align: right;
  border-left: none;
  border-right: 3px solid transparent;
}
body.rtl .activity-success {
  border-right-color: rgba(34,197,94,0.55);
}
body.rtl .activity-fail {
  border-right-color: rgba(239,68,68,0.55);
}

/* گراف همیشه LTR */
body.rtl .graph-panel,
body.rtl #3d-graph,
body.rtl #3d-graph canvas {
  direction: ltr !important;
}

/* ================================================= */
/* RESPONSIVE */
/* ================================================= */

@media (max-width: 1150px) { .right-panel { display:none; } }

@media (max-width: 900px) {
  body { overflow:auto; }
  .app { flex-direction:column; height:auto; }
  .sidebar { width:100%; height:auto; border-right:none; border-bottom:1px solid var(--border); }
  body.rtl .sidebar { border-left:none; border-bottom:1px solid var(--border); }
  .main-layout { height:auto; }
  .content-layout { flex-direction:column; height:auto; min-height:60vh; padding:10px; }
  .graph-panel { min-height:60vh; }
  .right-panel { width:100%; max-width:100%; }
  .bottom-panel { height:auto; min-height:290px; margin:0 10px 10px; }
  .tabs { flex-direction:column; width:100%; }
  .tab { width:100%; text-align:center; }
}

@media (max-width: 600px) {
  .stats-grid { grid-template-columns:1fr; }
  .graph-overlay { top:10px; left:10px; }
  body.rtl .graph-overlay { left:auto; right:10px; }
  .topbar { padding:0 12px; }
  .topbar-title { font-size:11px; }
  .sidebar { padding:14px 12px 20px; }
}

/* ================================================= */
/* TOPBAR EXTENDED  (مورد ۶)                         */
/* ================================================= */

.topbar {
  height: 54px;
  padding: 0 18px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  flex-shrink: 0;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  gap: 12px;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
}

.topbar-center {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  white-space: nowrap;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
}

.topbar-btn {
  width: auto;
  padding: 6px 12px;
  font-size: 11px;
  background: var(--bg-3);
  border: 1px solid var(--border) !important;
  color: var(--text-2);
  border-radius: var(--radius-sm);
  box-shadow: none !important;
  letter-spacing: 0.5px;
}

.topbar-btn:hover {
  background: var(--bg-4);
  color: var(--text);
  border-color: var(--border-h) !important;
  transform: none !important;
  box-shadow: none !important;
}

.topbar-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.topbar-stat-num {
  font-size: 16px;
  font-weight: 800;
  color: var(--orange);
  font-family: var(--font-mono);
  line-height: 1;
}

.topbar-stat-label {
  font-size: 9px;
  color: var(--text-2);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.topbar-divider {
  width: 1px;
  height: 28px;
  background: var(--border);
}

/* ================================================= */
/* BOTTOM PANEL OVERFLOW FIX  (مورد ۳)              */
/* ================================================= */

.bottom-panel {
  overflow: hidden;
}

.tab-panels {
  overflow: hidden;
  position: relative;
}

.details-grid {
  padding-bottom: 8px;
}

.node-card, .channel-card {
  transform-origin: center center;
  will-change: transform;
}

/* ================================================= */
/* LIGHT THEME  (مورد ۸)                             */
/* ================================================= */

body.theme-light {
  --bg:        #f8fafc;
  --bg-2:      #f1f5f9;
  --bg-3:      #e8eef4;
  --bg-4:      #dde5ee;
  --border:    rgba(0,0,0,0.09);
  --border-h:  rgba(0,0,0,0.18);
  --text:      #0f172a;
  --text-2:    #334155;
  --text-3:    #64748b;
  --green-lo:  rgba(34,197,94,0.12);
  --red-lo:    rgba(239,68,68,0.1);
  --orange:    #e07d0a;
  --orange-2:  #c4680a;
  --orange-lo: rgba(224,125,10,0.10);
  --orange-md: rgba(224,125,10,0.20);
}

body.theme-light input,
body.theme-light select {
  background: #ffffff;
  color: #0f172a;
  border-color: rgba(0,0,0,0.12);
}

body.theme-light input::placeholder { color: #94a3b8; }

body.theme-light .glass-card {
  background: #ffffff;
  box-shadow: 0 1px 8px rgba(0,0,0,0.08);
}

body.theme-light .node-card,
body.theme-light .channel-card {
  background: #f8fafc;
}

body.theme-light .stat-box {
  background: #ffffff;
}

body.theme-light .bottom-panel {
  background: #f1f5f9;
}

body.theme-light .sidebar {
  background: linear-gradient(180deg, #f1f5f9, #f8fafc);
}

body.theme-light .topbar {
  background: rgba(241,245,249,0.95);
}

body.theme-light .activity-success {
  background: rgba(34,197,94,0.08);
  border-color: rgba(34,197,94,0.2);
}

body.theme-light .activity-fail {
  background: rgba(239,68,68,0.07);
  border-color: rgba(239,68,68,0.2);
}

body.theme-light .overlay-chip {
  background: rgba(255,255,255,0.9);
  color: #334155;
  border-color: rgba(0,0,0,0.1);
}

body.theme-light .tab {
  color: #64748b !important;
  background: rgba(0,0,0,0.04) !important;
}

body.theme-light .tab.active {
  color: #ffffff !important;
  background: var(--orange) !important;
}

body.theme-light .card-title { color: var(--orange); }
body.theme-light .node-title { color: var(--orange); }
body.theme-light .stat-number { color: var(--orange); }
body.theme-light .logo-main { color: var(--orange); }
body.theme-light .topbar-title { color: var(--text-2); }
body.theme-light .meta-row span:last-child { color: var(--text-2); }

/* ================================================= */
/* RTL TOPBAR                                         */
/* ================================================= */



/* ================================================= */
/* LIQUIDITY BAR                                      */
/* ================================================= */

.liquidity-bar {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 99px;
  overflow: hidden;
  margin: 4px 0;
}

.liquidity-fill {
  height: 100%;
  background: linear-gradient(90deg, #F7931A, #ffcc44);
  border-radius: 99px;
  transition: width 0.4s ease;
  min-width: 4px;
}

/* ================================================= */
/* HTLC CARD                                          */
/* ================================================= */

.htlc-card {
  border-left: 3px solid rgba(247,147,26,0.4);
}

.htlc-card .node-title {
  font-size: 11px;
}

/* ================================================= */
/* EMPTY STATE                                        */
/* ================================================= */

.empty-state {
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: center;
  padding: 24px 0;
}

/* ================================================= */
/* POLISH — روز ۹                                    */
/* ================================================= */

/* Economic Stats card */
#economic-stats .meta-row {
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}

#economic-stats .meta-row:last-child {
  border-bottom: none;
}

/* Node card hover بهتر */
.node-card:hover .node-title,
.channel-card:hover .node-title {
  color: #ffb347;
  transition: color 0.2s ease;
}

/* HTLC card بهتر */
.htlc-card {
  transition: all 0.2s ease;
}

.htlc-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(167,139,250,0.15);
}

/* Activity item بهتر */
.activity-item {
  transition: opacity 0.2s ease;
}

/* Topbar shadow */
.topbar {
  box-shadow: 0 1px 0 var(--border);
}

/* Logo glow بهتر */
.logo-image {
  transition: filter 0.3s ease;
}

.logo-image:hover {
  filter: drop-shadow(0 0 38px rgba(247,147,26,1)) drop-shadow(0 0 60px rgba(247,147,26,0.6));
}

/* Bottom panel scrollbar */
.details-grid::-webkit-scrollbar { width: 3px; }

/* Input focus بهتر */
input:focus, select:focus {
  background: rgba(30,20,0,0.95);
}

/* button shimmer effect */
.primary-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  transition: left 0.5s ease;
  pointer-events: none;
}

.primary-btn:hover::before {
  left: 150%;
}

/* ================================================= */
/* TOPBAR CHIPS                                       */
/* ================================================= */

.topbar-chip {
  padding: 5px 11px;
  border-radius: 99px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-2);
  white-space: nowrap;
}

/* فونت فارسی */
body.rtl,
body.rtl * {
  font-family: 'Vazirmatn', sans-serif !important;
  letter-spacing: 0 !important;
}

body.rtl .node-meta,
body.rtl .meta-row,
body.rtl .card-title,
body.rtl .node-title,
body.rtl .activity-message,
body.rtl .stat-label,
body.rtl .sidebar-section-label,
body.rtl .form-group label,
body.rtl input,
body.rtl select,
body.rtl button {
  font-family: 'Vazirmatn', sans-serif !important;
}

/* ================================================= */
/* NODE PROFILE MODAL                                 */
/* ================================================= */

.profile-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-modal.hidden {
  display: none;
}

.profile-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
}

.profile-card {
  position: relative;
  z-index: 1;
  width: 480px;
  max-width: 95vw;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--bg-2);
  border: 1px solid var(--border-h);
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5);
  animation: profile-in 0.25s ease;
}

@keyframes profile-in {
  from { opacity:0; transform:scale(0.95) translateY(10px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}

.profile-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-close:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
  transform: none;
}

.profile-header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.profile-avatar {
  width: 64px; height: 64px;
  border-radius: 16px;
  background: linear-gradient(135deg, #0088ff, #38bdf8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(56,189,248,0.3);
}

.profile-name {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
}

.profile-pubkey {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-3);
  margin-bottom: 6px;
}

.profile-meta-row {
  font-size: 12px;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.profile-dot { color: var(--text-3); }

/* badges */
.profile-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.profile-badge {
  padding: 5px 12px;
  border-radius: 99px;
  background: rgba(247,147,26,0.1);
  border: 1px solid rgba(247,147,26,0.25);
  font-size: 12px;
  color: var(--orange);
  font-family: var(--font-mono);
  cursor: default;
}

/* stats */
.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.profile-stat {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 8px;
  text-align: center;
}

.profile-stat-num {
  font-size: 20px;
  font-weight: 800;
  color: var(--orange);
  font-family: var(--font-mono);
  margin-bottom: 4px;
}

.profile-stat-label {
  font-size: 9px;
  color: var(--text-3);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* section title */
.profile-section-title {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 10px;
}

/* activity */
.profile-activity {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.profile-act-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
}

.profile-act-desc {
  font-size: 11px;
  color: var(--text-2);
}

.profile-act-time {
  font-size: 10px;
  color: var(--text-3);
  white-space: nowrap;
}

/* light theme */
body.theme-light .profile-card {
  background: #ffffff;
  box-shadow: 0 24px 80px rgba(0,0,0,0.2);
}

body.theme-light .profile-act-item {
  background: var(--bg-3);
}

/* ================================================= */
/* LIBRARY PANEL  — کتابخانه آموزشی                  */
/* ================================================= */

.library-panel {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  animation: lib-fade 0.25s ease;
}

.library-panel.hidden { display: none; }

@keyframes lib-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.library-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px;
  border-bottom: 1px solid var(--border);
  background: var(--panel, #0d0d1a);
}

.library-title {
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
}

.library-subtitle {
  font-size: 13px;
  color: var(--text-2);
  font-family: var(--font-mono);
}

.library-close {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
}

.library-close:hover {
  background: rgba(239,68,68,0.15);
  border-color: rgba(239,68,68,0.3);
  color: #f87171;
}

.library-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* sidebar */
.library-sidebar {
  width: 280px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  padding: 20px 16px;
  overflow-y: auto;
  background: var(--panel-2, #111122);
}

.lib-category {
  margin-bottom: 24px;
}

.lib-cat-title {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 10px;
  padding: 0 8px;
}

.lib-article-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  margin-bottom: 4px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.lib-article-link:hover {
  background: rgba(255,255,255,0.04);
  border-color: var(--border);
}

.lib-article-link.active {
  background: rgba(247,147,26,0.1);
  border-color: rgba(247,147,26,0.3);
  color: var(--orange);
}

.lib-read-time {
  font-size: 10px;
  color: var(--text-3);
  font-family: var(--font-mono);
}

/* content */
.library-content {
  flex: 1;
  padding: 40px 48px;
  overflow-y: auto;
  max-width: 800px;
}

.lib-article-header {
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.lib-article-header h2 {
  font-size: 30px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 10px;
  line-height: 1.2;
}

.lib-article-time {
  font-size: 12px;
  color: var(--text-3);
  font-family: var(--font-mono);
}

.lib-article-body p {
  font-size: 16px;
  line-height: 1.9;
  color: var(--text);
  margin-bottom: 20px;
}

/* RTL برای فارسی */
body.rtl .library-sidebar {
  border-right: none;
  border-left: 1px solid var(--border);
}

body.rtl .lib-article-link {
  text-align: right;
  align-items: flex-end;
}

body.rtl .library-content {
  text-align: right;
}

/* light theme */
body.theme-light .library-panel { background: #f8fafc; }
body.theme-light .library-header { background: #fff; }
body.theme-light .library-sidebar { background: #f1f5f9; }
body.theme-light .library-title,
body.theme-light .lib-article-header h2 { color: #0f172a; }
body.theme-light .lib-article-body p { color: #1e293b; }

/* mobile */
@media (max-width: 768px) {
  .library-body { flex-direction: column; }
  .library-sidebar {
    width: 100%;
    max-height: 200px;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .library-content { padding: 24px 20px; }
}

/* library header actions */
.library-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* ================================================= */
/* LIBRARY ANIMATIONS                                 */
/* ================================================= */

.lib-anim {
  width: 100%;
  margin: 0 0 28px;
  padding: 24px;
  background: linear-gradient(135deg, rgba(247,147,26,0.05), rgba(56,189,248,0.03));
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}

.lib-anim svg {
  width: 100%;
  height: auto;
  display: block;
}

/* مراحل تکامل - یکی یکی ظاهر میشن */
.evo-stage {
  opacity: 0;
  animation: evo-appear 0.6s ease forwards;
  animation-delay: var(--delay, 0s);
}

@keyframes evo-appear {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.85);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* مرحله نهایی بیتکوین درخشش داره */
.evo-final {
  transform-origin: 528px 80px;
}

body.theme-light .lib-anim {
  background: linear-gradient(135deg, rgba(247,147,26,0.08), rgba(56,189,248,0.05));
}

/* انیمیشن شبکه لایتنینگ - بلاک‌های کند */
.lib-anim-block {
  opacity: 0;
  animation: block-appear 0.5s ease forwards;
  animation-delay: var(--bd, 0s);
}
@keyframes block-appear {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* رعد سریع بین دو نفر */
.lib-anim-bolt {
  animation: bolt-move 1.4s ease-in-out infinite;
}
@keyframes bolt-move {
  0%   { transform: translate(370px, 103px) scale(0.5); opacity: 0; }
  20%  { opacity: 1; }
  50%  { transform: translate(450px, 80px) scale(1.3); opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translate(530px, 103px) scale(0.5); opacity: 0; }
}

/* انیمیشن پرداخت‌های خرد - ساتوشی پرنده به سه گیرنده */
.sat-fly {
  animation-duration: 2.1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: var(--sd, 0s);
  opacity: 0;
}
.sat-fly-1 { animation-name: sat-to-coffee; }
.sat-fly-2 { animation-name: sat-to-news; }
.sat-fly-3 { animation-name: sat-to-music; }

@keyframes sat-to-coffee {
  0%   { transform: translate(110px, 100px); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translate(470px, 50px); opacity: 0; }
}
@keyframes sat-to-news {
  0%   { transform: translate(110px, 100px); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translate(490px, 100px); opacity: 0; }
}
@keyframes sat-to-music {
  0%   { transform: translate(110px, 100px); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translate(470px, 150px); opacity: 0; }
}

/* انیمیشن نود - نبض مرکزی و ظاهر شدن peers */
.node-center-pulse {
  animation: node-pulse 2s ease-in-out infinite;
  transform-origin: 300px 100px;
}
@keyframes node-pulse {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.08); }
}
.node-peer {
  opacity: 0;
  animation: peer-appear 0.5s ease forwards;
  animation-delay: var(--nd, 0s);
}
@keyframes peer-appear {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* انیمیشن کانال - نوار سبز و سکه رفت و برگشت */
.channel-fill {
  animation: channel-fill-anim 3s ease-in-out infinite;
}
@keyframes channel-fill-anim {
  0%, 100% { width: 70px; }
  50%      { width: 222px; }
}
.channel-coin {
  animation: channel-coin-anim 3s ease-in-out infinite;
}
@keyframes channel-coin-anim {
  0%   { transform: translate(160px, 100px); }
  50%  { transform: translate(440px, 100px); }
  100% { transform: translate(160px, 100px); }
}

/* انیمیشن کارمزد - پرداخت رد میشه، fee میپره بالا */
.fee-payment {
  animation: fee-pay-anim 2.6s ease-in-out infinite;
}
@keyframes fee-pay-anim {
  0%   { transform: translate(90px, 100px); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translate(510px, 100px); opacity: 0; }
}
.fee-pop {
  opacity: 0;
  animation: fee-pop-anim 2.6s ease-in-out infinite;
}
@keyframes fee-pop-anim {
  0%, 45%   { opacity: 0; transform: translateY(0); }
  50%       { opacity: 1; transform: translateY(-8px); }
  70%       { opacity: 1; transform: translateY(-8px); }
  85%, 100% { opacity: 0; transform: translateY(0); }
}

/* انیمیشن HTLC - قفل‌ها و کلید */
.htlc-lock {
  animation: lock-shake 2.8s ease-in-out infinite;
  animation-delay: var(--ld, 0s);
  transform-origin: center;
}
@keyframes lock-shake {
  0%, 60%, 100% { opacity: 1; }
  70%, 90%      { opacity: 0.3; }
}
.htlc-key {
  animation: key-travel 2.8s ease-in-out infinite;
  opacity: 0;
}
@keyframes key-travel {
  0%   { transform: translate(510px, 100px); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: translate(90px, 100px); opacity: 0; }
}

/* انیمیشن مسیریابی - بهترین مسیر و نقطه نورانی */
.route-best {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: route-draw 3s ease-in-out infinite;
}
@keyframes route-draw {
  0%        { stroke-dashoffset: 600; }
  40%, 100% { stroke-dashoffset: 0; }
}
.route-dot {
  offset-path: path("M 90 95 L 220 50 L 380 50 L 530 95");
  animation: route-move 3s ease-in-out infinite;
  opacity: 0;
}
@keyframes route-move {
  0%, 38% { offset-distance: 0%; opacity: 0; }
  45%     { opacity: 1; }
  95%     { offset-distance: 100%; opacity: 1; }
  100%    { offset-distance: 100%; opacity: 0; }
}

/* انیمیشن نقدینگی */
.liq-arrow {
  fill: #F7931A;
  animation: liq-bounce 1.5s ease-in-out infinite;
}
@keyframes liq-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%      { transform: translateY(4px); opacity: 1; }
}
.liq-balanced {
  animation: liq-balance 3s ease-in-out infinite;
}
@keyframes liq-balance {
  0%   { width: 255px; fill: #ef4444; }
  50%  { width: 150px; fill: #22c55e; }
  100% { width: 150px; fill: #22c55e; }
}

/* ================================================= */
/* INTERACTIVE TOUR                                   */
/* ================================================= */

.tour-overlay {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3000;
  width: 420px;
  max-width: 92vw;
}

.tour-overlay.hidden { display: none; }

.tour-box {
  background: var(--bg-2, #14141f);
  border: 1px solid rgba(247,147,26,0.35);
  border-radius: 18px;
  padding: 22px 24px;
  box-shadow: 0 16px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(247,147,26,0.1);
  animation: tour-rise 0.4s ease;
}

@keyframes tour-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tour-step-indicator {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}

.tour-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  transition: all 0.3s ease;
}
.tour-dot.active {
  background: var(--orange, #F7931A);
  width: 22px;
  border-radius: 4px;
}

.tour-title {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px;
}

.tour-text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-2, #b8c0cc);
  margin-bottom: 18px;
}

.tour-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.tour-skip {
  background: transparent;
  border: none;
  color: var(--text-3, #6b7280);
  font-size: 13px;
  cursor: pointer;
  padding: 8px 4px;
}
.tour-skip:hover { color: var(--text-2, #b8c0cc); }

.tour-next {
  background: linear-gradient(135deg, #F7931A, #ffb347);
  border: none;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 24px;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tour-next:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(247,147,26,0.4);
}

/* RTL */
body.rtl .tour-title,
body.rtl .tour-text { text-align: right; }

/* light theme */
body.theme-light .tour-box {
  background: #ffffff;
  box-shadow: 0 16px 60px rgba(0,0,0,0.2);
}
body.theme-light .tour-title { color: #0f172a; }
body.theme-light .tour-text { color: #475569; }

/* mobile */
@media (max-width: 768px) {
  .tour-overlay { bottom: 16px; width: 94vw; }
  .tour-box { padding: 18px 18px; }
}

/* هایلایت بخش‌ها موقع تور */
.tour-highlight {
  position: relative;
  z-index: 2500;
  border-radius: 12px;
  outline: 3px solid #F7931A;
  outline-offset: 4px;
  overflow: visible !important;
  animation: tour-glow 1.4s ease-in-out infinite;
}
@keyframes tour-glow {
  0%, 100% {
    outline-color: rgba(247,147,26,0.7);
    box-shadow: 0 0 0 4px rgba(247,147,26,0.25),
                0 0 25px 6px rgba(247,147,26,0.5),
                0 0 60px 12px rgba(247,147,26,0.3);
  }
  50% {
    outline-color: rgba(255,179,71,1);
    box-shadow: 0 0 0 6px rgba(247,147,26,0.4),
                0 0 40px 10px rgba(247,147,26,0.8),
                0 0 90px 20px rgba(247,147,26,0.45);
  }
}

/* دکمه قبلی تور و گروه دکمه‌ها */
.tour-nav-btns {
  display: flex;
  gap: 8px;
  align-items: center;
}
.tour-prev {
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  color: var(--text-2, #b8c0cc);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.tour-prev:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
}
body.theme-light .tour-prev {
  background: #f1f5f9;
  color: #475569;
}

/* ================================================= */
/* ANALYTICS DASHBOARD                                */
/* ================================================= */

.analytics-panel {
  position: fixed; inset: 0; z-index: 2000;
  background: var(--bg);
  display: flex; flex-direction: column;
  animation: lib-fade 0.25s ease;
}
.analytics-panel.hidden { display: none; }

.analytics-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 32px;
  border-bottom: 1px solid var(--border);
  background: var(--panel, #0d0d1a);
}
.analytics-title { font-size: 24px; font-weight: 800; color: #fff; margin-bottom: 4px; }
.analytics-subtitle { font-size: 13px; color: var(--text-2); font-family: var(--font-mono); }
.analytics-header-actions { display: flex; align-items: center; gap: 10px; }
.analytics-close {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.06); border: 1px solid var(--border);
  color: var(--text-2); font-size: 16px; cursor: pointer;
}
.analytics-close:hover { background: rgba(239,68,68,0.15); color: #f87171; }

.analytics-body {
  flex: 1; overflow-y: auto; padding: 28px 32px;
  max-width: 1100px; margin: 0 auto; width: 100%;
}
.analytics-loading, .analytics-empty {
  text-align: center; padding: 80px 20px; font-size: 18px;
  color: var(--text-3); font-family: var(--font-mono);
}

/* کارت‌های آمار */
.analytics-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
  gap: 14px; margin-bottom: 32px;
}
.analytics-card {
  background: rgba(247,147,26,0.06);
  border: 1px solid rgba(247,147,26,0.2);
  border-radius: 14px; padding: 20px 16px; text-align: center;
}
.ac-num { font-size: 26px; font-weight: 800; color: var(--orange); font-family: var(--font-mono); margin-bottom: 6px; word-break: break-word; }
.ac-label { font-size: 10px; color: var(--text-3); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.8px; }

/* بخش‌ها */
.analytics-section { margin-bottom: 36px; }
.as-title { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.as-desc { font-size: 12px; color: var(--text-3); margin-bottom: 16px; font-family: var(--font-mono); }

/* تمرکز */
.conc-bars { display: flex; flex-direction: column; gap: 12px; }
.conc-row { display: flex; align-items: center; gap: 14px; }
.conc-label { width: 90px; font-size: 12px; color: var(--text-2); font-family: var(--font-mono); }
.conc-track { flex: 1; height: 22px; background: rgba(255,255,255,0.05); border-radius: 11px; overflow: hidden; }
.conc-fill { height: 100%; background: linear-gradient(90deg,#F7931A,#ffb347); border-radius: 11px; transition: width 0.8s ease; }
.conc-pct { width: 44px; text-align: right; font-size: 14px; font-weight: 700; color: var(--orange); font-family: var(--font-mono); }

/* جدول */
.analytics-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); }
.analytics-table th {
  text-align: left; font-size: 10px; color: var(--text-3); text-transform: uppercase;
  letter-spacing: 0.8px; padding: 10px 12px; border-bottom: 1px solid var(--border);
}
.analytics-table td { padding: 10px 12px; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.ar-rank { color: var(--orange); font-weight: 700; width: 50px; }
.ar-node { color: #fff; font-weight: 600; }
.ar-cap { color: var(--text-2); }
.ar-bar-wrap { display: inline-block; width: 100px; height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; margin-right: 8px; vertical-align: middle; overflow: hidden; }
.ar-bar { height: 100%; background: var(--orange); border-radius: 3px; }
.ar-ch, .ar-fee { color: var(--text-2); }

/* RTL */
body.rtl .analytics-table th, body.rtl .analytics-table td { text-align: right; }
body.rtl .ar-bar-wrap { margin-right: 0; margin-left: 8px; }
body.rtl .conc-pct { text-align: left; }

/* light theme */
body.theme-light .analytics-panel { background: #f8fafc; }
body.theme-light .analytics-header { background: #fff; }
body.theme-light .analytics-title, body.theme-light .as-title { color: #0f172a; }
body.theme-light .ar-node { color: #0f172a; }

/* mobile */
@media (max-width: 768px) {
  .analytics-body { padding: 20px 16px; }
  .analytics-table { font-size: 11px; }
  .ar-bar-wrap { width: 50px; }
}

/* معیارهای پیشرفته */
.adv-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap: 16px;
}
.adv-metric {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  text-align: center;
}
.adv-val {
  font-size: 36px;
  font-weight: 800;
  color: #fff;
  font-family: var(--font-mono);
  margin-bottom: 4px;
}
.adv-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
}
.adv-badge {
  display: inline-block;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 3px 12px;
  margin-bottom: 12px;
}
.adv-desc {
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.6;
  font-family: var(--font-mono);
}
body.theme-light .adv-val { color: #0f172a; }

/* ================================================= */
/* ONBOARDING — خوش‌آمد و راهنمای قدم‌به‌قدم          */
/* ================================================= */

/* پیام خوش‌آمد */
.welcome-overlay {
  position: absolute; inset: 0; z-index: 1500;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at center, rgba(10,10,15,0.85), rgba(10,10,15,0.96));
  backdrop-filter: blur(6px);
}
.welcome-overlay.hidden { display: none; }

.welcome-box {
  max-width: 460px; text-align: center; padding: 40px 36px;
  background: var(--bg-2, #14141f);
  border: 1px solid rgba(247,147,26,0.3);
  border-radius: 22px;
  box-shadow: 0 20px 70px rgba(0,0,0,0.6), 0 0 60px rgba(247,147,26,0.15);
  animation: welcome-pop 0.5s cubic-bezier(0.22,1,0.36,1);
}
@keyframes welcome-pop {
  from { opacity: 0; transform: scale(0.92) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.welcome-icon {
  font-size: 52px; margin-bottom: 14px;
  filter: drop-shadow(0 0 20px rgba(247,147,26,0.8));
  animation: welcome-glow 2s ease-in-out infinite;
}
@keyframes welcome-glow {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.1); }
}
.welcome-title { font-size: 24px; font-weight: 800; color: #fff; margin-bottom: 12px; }
.welcome-text { font-size: 14px; line-height: 1.8; color: var(--text-2, #b8c0cc); margin-bottom: 28px; }
.welcome-actions { display: flex; flex-direction: column; gap: 12px; }
.welcome-btn-primary {
  background: linear-gradient(135deg,#F7931A,#ffb347);
  border: none; color: #fff; font-size: 15px; font-weight: 700;
  padding: 14px 24px; border-radius: 12px; cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.welcome-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(247,147,26,0.45); }
.welcome-btn-ghost {
  background: transparent; border: 1px solid var(--border, rgba(255,255,255,0.12));
  color: var(--text-2, #b8c0cc); font-size: 13px; padding: 11px 24px;
  border-radius: 12px; cursor: pointer;
}
.welcome-btn-ghost:hover { background: rgba(255,255,255,0.06); color: #fff; }

/* راهنمای قدم‌به‌قدم */
.step-guide {
  position: absolute; bottom: 20px; left: 20px; z-index: 1200;
  width: 300px; max-width: calc(100% - 40px);
  background: var(--bg-2, #14141f);
  border: 1px solid rgba(247,147,26,0.3);
  border-radius: 14px; padding: 14px 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  animation: step-slide 0.4s ease;
}
.step-guide.hidden { display: none; }
@keyframes step-slide {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.step-guide-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.step-guide-icon { font-size: 16px; }
.step-guide-label {
  flex: 1; font-size: 11px; font-weight: 700; color: var(--orange,#F7931A);
  text-transform: uppercase; letter-spacing: 0.6px; font-family: var(--font-mono);
}
.step-guide-close {
  background: transparent; border: none; color: var(--text-3,#6b7280);
  font-size: 13px; cursor: pointer; padding: 0 2px;
}
.step-guide-close:hover { color: #fff; }
.step-guide-text { font-size: 13px; line-height: 1.7; color: var(--text-2,#b8c0cc); }
.step-guide-text b { color: var(--orange,#F7931A); }

/* RTL */
body.rtl .step-guide { left: auto; right: 20px; }
body.rtl .step-guide-label { text-align: right; }
body.rtl .welcome-title, body.rtl .welcome-text { text-align: center; }

/* light theme */
body.theme-light .welcome-box { background: #fff; }
body.theme-light .welcome-title { color: #0f172a; }
body.theme-light .welcome-text { color: #475569; }
body.theme-light .step-guide { background: #fff; }
body.theme-light .step-guide-text { color: #475569; }

/* mobile */
@media (max-width: 768px){
  .welcome-box { padding: 30px 22px; margin: 16px; }
  .step-guide { width: calc(100% - 32px); bottom: 12px; left: 16px; }
  body.rtl .step-guide { right: 16px; }
}

/* ================================================= */
/* LANDING PAGE — صفحه اول                            */
/* ================================================= */

.landing-page {
  position: fixed; inset: 0; z-index: 5000;
  background: radial-gradient(ellipse at center, #14141f 0%, #0a0a0f 70%);
  overflow: hidden;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.landing-page.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.landing-stars {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; z-index: 1; pointer-events: none;
}

/* کانتینر اسکرول */
.landing-scroll {
  position: relative; z-index: 2;
  height: 100%; overflow-y: auto; overflow-x: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
}

/* هر بخش */
.landing-section {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 30px;
  scroll-snap-align: start;
}

.landing-content {
  position: relative; z-index: 2; text-align: center;
  max-width: 600px;
  animation: landing-rise 0.9s cubic-bezier(0.22,1,0.36,1);
}
@keyframes landing-rise {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.landing-logo {
  width: 180px; height: 180px; object-fit: contain;
  filter: drop-shadow(0 0 55px rgba(247,147,26,1)) drop-shadow(0 0 90px rgba(247,147,26,0.7)) drop-shadow(0 0 130px rgba(247,147,26,0.4));
  animation: landing-logo-float 3s ease-in-out infinite;
  margin-bottom: 24px;
}
@keyframes landing-logo-float {
  0%,100% { transform: translateY(0) scale(1); }
  50%     { transform: translateY(-10px) scale(1.04); }
}

.landing-title {
  font-size: 44px; font-weight: 900; color: #fff;
  letter-spacing: -1px; margin-bottom: 12px;
  text-shadow: 0 0 30px rgba(247,147,26,0.4);
}
.landing-tagline {
  font-size: 17px; color: var(--text-2, #b8c0cc);
  margin-bottom: 40px; line-height: 1.7;
}

.landing-actions {
  display: flex; gap: 16px; justify-content: center;
  margin-bottom: 50px; flex-wrap: wrap;
}
.landing-btn-primary {
  background: linear-gradient(135deg, #F7931A, #ffb347);
  border: none; color: #fff; font-size: 17px; font-weight: 700;
  padding: 16px 40px; border-radius: 14px; cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 8px 30px rgba(247,147,26,0.35);
}
.landing-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 44px rgba(247,147,26,0.55);
}
.landing-btn-ghost {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff; font-size: 17px; font-weight: 600;
  padding: 16px 40px; border-radius: 14px; cursor: pointer;
  transition: all 0.18s ease; backdrop-filter: blur(10px);
}
.landing-btn-ghost:hover {
  background: rgba(255,255,255,0.12);
  transform: translateY(-3px);
}
/* دکمه آموزش در تم روشن */
body.theme-light .landing-btn-ghost {
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.15);
  color: #0f172a;
}
body.theme-light .landing-btn-ghost:hover {
  background: rgba(0,0,0,0.08);
}

.landing-features {
  display: flex; gap: 28px; justify-content: center; flex-wrap: wrap;
}
.landing-feature {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-3, #8b95a5);
  font-family: var(--font-mono);
}
.lf-icon { font-size: 18px; }

/* light theme */
body.theme-light .landing-page {
  background: radial-gradient(ellipse at center, #ffffff 0%, #f1f5f9 70%);
}
body.theme-light .landing-title { color: #0f172a; }
body.theme-light .landing-tagline { color: #475569; }

/* mobile */
@media (max-width: 768px){
  .landing-title { font-size: 32px; }
  .landing-tagline { font-size: 15px; margin-bottom: 30px; }
  .landing-logo { width: 100px; height: 100px; }
  .landing-btn-primary, .landing-btn-ghost { padding: 14px 30px; font-size: 15px; width: 100%; }
  .landing-features { gap: 16px; }
}

/* دکمه‌های بالای صفحه اول */
.landing-topbtns {
  position: absolute; top: 24px; left: 24px; z-index: 10;
  display: flex; gap: 10px;
}
.landing-lang-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff; font-size: 13px; font-weight: 600;
  padding: 10px 18px; border-radius: 10px; cursor: pointer;
  backdrop-filter: blur(10px); transition: background 0.15s ease;
  font-family: var(--font-mono);
}
.landing-lang-btn:hover { background: rgba(255,255,255,0.16); }
body.rtl .landing-topbtns { left: auto; right: 24px; }
body.theme-light .landing-lang-btn { background: rgba(0,0,0,0.05); color: #0f172a; border-color: rgba(0,0,0,0.1); }

/* مخفی‌سازی فوری صفحه اول اگه قبلاً دیده شده */
.landing-page.instant-hide { display: none !important; }

/* ================================================= */
/* LANDING — بخش‌های اسکرولی                          */
/* ================================================= */

/* راهنمای اسکرول پایین Hero */
.landing-scroll-hint {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--text-3, #8b95a5); font-size: 13px; font-family: var(--font-mono);
  animation: scroll-bounce 2s ease-in-out infinite;
}
.scroll-arrow { font-size: 20px; }
@keyframes scroll-bounce {
  0%,100% { transform: translateX(-50%) translateY(0); opacity: 0.6; }
  50%     { transform: translateX(-50%) translateY(8px); opacity: 1; }
}

/* عنوان و متن بخش‌ها */
.landing-h2 {
  font-size: 34px; font-weight: 800; color: #fff;
  margin-bottom: 18px; text-align: center;
  text-shadow: 0 0 24px rgba(247,147,26,0.3);
}
.landing-p {
  font-size: 17px; line-height: 1.9; color: var(--text-2, #b8c0cc);
  max-width: 560px; margin: 0 auto 30px; text-align: center;
}

/* انیمیشن reveal موقع اسکرول */
.landing-reveal {
  max-width: 700px; text-align: center;
  opacity: 0; transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.landing-reveal.visible {
  opacity: 1; transform: translateY(0);
}

/* کارت‌های ویژگی */
.landing-feat-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap: 20px; margin-top: 30px;
}
.landing-feat-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(247,147,26,0.2);
  border-radius: 18px; padding: 28px 22px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.landing-feat-card:hover {
  transform: translateY(-5px);
  border-color: rgba(247,147,26,0.5);
}
.lfc-icon { font-size: 40px; margin-bottom: 14px; }
.lfc-title { font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 10px; }
.lfc-text { font-size: 13px; line-height: 1.7; color: var(--text-3, #8b95a5); }

/* light theme */
body.theme-light .landing-h2 { color: #0f172a; }
body.theme-light .landing-p { color: #475569; }
body.theme-light .lfc-title { color: #0f172a; }
body.theme-light .landing-feat-card { background: rgba(0,0,0,0.02); }

/* mobile */
@media (max-width: 768px){
  .landing-h2 { font-size: 26px; }
  .landing-p { font-size: 15px; }
  .landing-feat-cards { gap: 14px; }
}