/* ============================================================
   Vega UI — design system (K1)
   Tokens are prefixed --v- to avoid colliding with common.css.
   ============================================================ */

:root {
  --v-bg:        #040810;
  --v-surface:   rgba(8,20,40,.55);
  --v-surface2:  rgba(99,210,255,.06);
  --v-border:    rgba(99,210,255,.12);
  --v-accent:    #63d2ff;
  --v-accent2:   #00ff9d;
  --v-danger:    #ff4d6a;
  --v-warn:      #ffb84d;
  --v-text:      #e8f4ff;
  --v-muted:     #5a7a99;
  --v-radius:    12px;
}

/* ── Card ─────────────────────────────────────────────────────── */
.v-card {
  background: var(--v-surface);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--v-border);
  border-radius: var(--v-radius);
  padding: 24px;
  position: relative;
  overflow: hidden;
  transition: .3s;
}
.v-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--v-accent), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.v-card:hover::before { transform: scaleX(1); }
.v-card:hover {
  border-color: rgba(99,210,255,.4);
  transform: translateY(-2px);
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}

/* ── Buttons ──────────────────────────────────────────────────── */
.v-btn {
  display: inline-block;
  font-family: 'Space Mono', monospace;
  font-size: 14px;
  letter-spacing: 1px;
  padding: 12px 28px;
  border-radius: 4px;
  color: var(--v-bg);
  background: var(--v-accent);
  border: none;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  transition: .2s;
}
.v-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--v-accent2);
  transform: translateX(-100%);
  transition: transform .3s ease;
}
.v-btn:hover::after { transform: translateX(0); }
.v-btn span { position: relative; z-index: 1; }

.v-btn-ghost {
  background: transparent;
  color: var(--v-accent);
  border: 1px solid rgba(99,210,255,.4);
}
.v-btn-ghost::after { background: rgba(99,210,255,.08); }
.v-btn-ghost:hover::after { transform: translateX(0); }

.v-btn[disabled] {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}
.v-btn[disabled]:hover::after { transform: translateX(-100%); }

/* ── Badge ────────────────────────────────────────────────────── */
.v-badge {
  display: inline-block;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 4px 10px;
  border-radius: 3px;
  border: 1px solid;
}
.v-badge-live { color: var(--v-accent2); border-color: rgba(0,255,157,.3); background: rgba(0,255,157,.1); }
.v-badge-dev  { color: var(--v-warn);    border-color: rgba(255,184,77,.3); background: rgba(255,184,77,.1); }
.v-badge-info { color: var(--v-accent);  border-color: rgba(99,210,255,.3); background: rgba(99,210,255,.1); }

/* ── Text styles ──────────────────────────────────────────────── */
.v-money {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 32px;
  color: var(--v-text);
}
.v-money-lg {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 42px;
  background: linear-gradient(90deg, var(--v-accent), var(--v-accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.v-label {
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--v-muted);
}
.v-pos { color: var(--v-accent2); }
.v-neg { color: var(--v-danger); }

/* ============================================================
   Shell (sidebar + topbar)
   ============================================================ */
.v-shell { display: flex; min-height: 100vh; }

/* ── Sidebar ──────────────────────────────────────────────────── */
.v-sidebar {
  width: 220px;
  position: fixed;
  top: 0; bottom: 0; left: 0;
  background: rgba(4,8,16,.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid var(--v-border);
  z-index: 50;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease;
}

.v-sidebar-logo {
  font-family: 'Space Mono', monospace;
  font-size: 20px;
  font-weight: 700;
  color: var(--v-accent);
  letter-spacing: 1px;
  padding: 24px 20px;
}
.v-sidebar-logo span { color: var(--v-accent2); }

.v-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 8px; }

.v-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  margin: 4px 10px;
  color: var(--v-muted);
  font-size: 15px;
  border-radius: 10px;
  border: 1px solid transparent;
  text-decoration: none;
  transition: color .2s, background .2s, border-color .2s, box-shadow .2s;
}
.v-nav-link:hover {
  color: var(--v-text);
  background: var(--v-surface2);
  border-color: var(--v-border);
  opacity: 1;
}
.v-nav-link.active {
  color: var(--v-text);
  background: var(--v-surface2);
  border-color: rgba(99,210,255,.35);
  box-shadow: 0 0 20px rgba(99,210,255,.15), inset 3px 0 0 var(--v-accent);
}
.v-nav-link.v-nav-disabled {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}
.v-nav-ext::after { content: ' ↗'; }

/* ── Main / topbar ────────────────────────────────────────────── */
.v-main { margin-left: 220px; flex: 1; display: flex; flex-direction: column; min-width: 0; }

.v-topbar {
  height: 60px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 28px;
  border-bottom: 1px solid var(--v-border);
  background: rgba(4,8,16,.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: sticky;
  top: 0;
  z-index: 40;
}

.v-topbar-title {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--v-text);
}

/* ── Profile menu ─────────────────────────────────────────────── */
.v-profile { position: relative; margin-left: auto; }

.v-profile-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  z-index: 60;
}
.v-profile-menu.open { display: block; }

.v-menu-item {
  display: block;
  width: 100%;
  padding: 12px 18px;
  color: var(--v-text);
  font-size: 15px;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  border-radius: 6px;
  transition: background .2s;
}
.v-menu-item:hover { background: var(--v-surface2); opacity: 1; }

.v-menu-divider { height: 1px; background: var(--v-border); margin: 6px 0; }

/* ── Burger (mobile) ──────────────────────────────────────────── */
.v-burger {
  display: none;
  background: none;
  border: 1px solid var(--v-border);
  color: var(--v-text);
  border-radius: 6px;
  width: 34px;
  height: 34px;
  font-size: 16px;
  cursor: pointer;
}

/* ── Content ──────────────────────────────────────────────────── */
.v-content { padding: 28px; max-width: 1200px; width: 100%; }

/* ── Mobile ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .v-sidebar { transform: translateX(-100%); }
  .v-sidebar.open { transform: translateX(0); }
  .v-burger { display: block; }
  .v-main { margin-left: 0; }
}