:root {
  --vx-bg: #0b1015;
  --vx-rail: #11181d;
  --vx-panel: #121a1f;
  --vx-panel-deep: #0e1519;
  --vx-border: #253239;
  --vx-border-soft: #202c32;
  --vx-text: #edf5f2;
  --vx-muted: #829397;
  --vx-subtle: #5e7276;
  --vx-mint: #7cf3d0;
  --vx-coral: #ff917f;
  --vx-violet: #b5b8ff;
  --vx-amber: #ffb86b;
  --vx-radius: 12px;
}

#vortyx-dashboard-root {
  min-height: 100vh;
  background: var(--vx-bg);
  color: var(--vx-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#vortyx-dashboard-root *,
#vortyx-dashboard-root *::before,
#vortyx-dashboard-root *::after { box-sizing: border-box; }

#vortyx-dashboard-root button,
#vortyx-dashboard-root select { font: inherit; }

.vx-app { display: flex; min-height: 100vh; }
.vx-sidebar {
  width: 252px;
  flex: 0 0 252px;
  display: flex;
  flex-direction: column;
  padding: 20px 16px;
  background: var(--vx-rail);
  border-right: 1px solid var(--vx-border);
}
.vx-brand { display: flex; align-items: center; gap: 11px; padding: 0 12px; color: #f2f8f7; text-decoration: none; }
.vx-mark {
  position: relative; display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 10px; color: var(--vx-bg); background: var(--vx-mint);
  box-shadow: 0 0 0 4px rgba(124, 243, 208, .08);
}
.vx-mark::before { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; transform: rotate(45deg); }
.vx-mark::after { content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.vx-wordmark { font-size: 17px; font-weight: 750; letter-spacing: .18em; }
.vx-env {
  display: flex; align-items: center; gap: 8px; margin: 20px 12px 0; padding: 11px 12px;
  color: #cce5de; font-size: 11px; font-weight: 600; background: #13241f;
  border: 1px solid #29433e; border-radius: 8px;
}
.vx-env i { width: 6px; height: 6px; border-radius: 50%; background: var(--vx-mint); box-shadow: 0 0 0 3px rgba(124, 243, 208, .12); }
.vx-env svg { margin-left: auto; color: var(--vx-mint); }
.vx-nav { flex: 1; margin-top: 28px; }
.vx-nav-label { margin: 0 12px 8px; color: var(--vx-subtle); font-size: 9px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.vx-nav-label:not(:first-child) { margin-top: 26px; }
.vx-nav button {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; margin: 2px 0;
  color: #8ca0a4; background: transparent; border: 0; border-radius: 8px; cursor: pointer;
  font-size: 13px; text-align: left; transition: background .18s, color .18s, transform .18s;
}
.vx-nav button:hover { color: #dce8e6; background: #1b252a; transform: translateX(2px); }
.vx-nav button.is-active { color: #d7fff2; background: #203c38; box-shadow: inset 3px 0 var(--vx-mint); }
.vx-nav svg { width: 17px; height: 17px; flex: 0 0 17px; stroke-width: 1.8; }
.vx-nav .vx-dot { width: 6px; height: 6px; margin-left: auto; border-radius: 50%; background: var(--vx-mint); }
.vx-beta { margin-left: auto; padding: 3px 6px; color: #d5bcff; background: #2e2940; border-radius: 4px; font-size: 8px; font-weight: 800; letter-spacing: .05em; }
.vx-balance { padding: 16px 12px 0; border-top: 1px solid #263339; }
.vx-balance-head { display: flex; justify-content: space-between; color: #65777b; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.vx-balance button { padding: 0; color: #71868a; background: none; border: 0; cursor: pointer; }
.vx-balance button:hover { color: #d9e7e3; }
.vx-balance-amount { margin-top: 4px; color: #f1f7f5; font-size: 23px; font-weight: 700; letter-spacing: -.04em; }
.vx-balance-today { margin-top: 2px; color: var(--vx-mint); font-size: 11px; }
.vx-profile {
  display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 15px; padding: 9px 8px;
  color: inherit; text-align: left; background: transparent; border: 0; border-radius: 8px; cursor: pointer;
}
.vx-profile:hover { background: #1b252a; }
.vx-avatar { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; color: #261916; background: #d69b7c; font-size: 11px; font-weight: 800; }
.vx-profile-copy { min-width: 0; flex: 1; }
.vx-profile-name { display: block; overflow: hidden; color: #d8e5e2; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.vx-profile-role { display: block; margin-top: 2px; color: #718489; font-size: 10px; }
.vx-main { min-width: 0; flex: 1; background: var(--vx-bg); }
.vx-topbar {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between;
  height: 68px; padding: 0 32px; background: rgba(11, 16, 21, .96); border-bottom: 1px solid var(--vx-border-soft); backdrop-filter: blur(14px);
}
.vx-crumbs { display: flex; align-items: center; gap: 9px; color: #71858a; font-size: 11px; }
.vx-crumbs strong { color: #d7e5e2; font-weight: 600; }
.vx-top-actions { display: flex; align-items: center; gap: 10px; }
.vx-top-actions button { display: inline-flex; align-items: center; gap: 8px; padding: 9px 11px; color: #8da0a4; background: transparent; border: 1px solid #27353a; border-radius: 8px; cursor: pointer; font-size: 11px; }
.vx-top-actions button:hover { color: #d9e7e3; background: #182227; border-color: #3b5055; }
.vx-notification { position: relative; }
.vx-notification b { position: absolute; top: 7px; right: 7px; width: 5px; height: 5px; border-radius: 50%; background: #f39b7b; }
.vx-mobile-menu { display: none !important; }
.vx-content { width: min(1400px, 100%); margin: 0 auto; padding: 28px 40px 40px; }
.vx-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.vx-status { display: flex; align-items: center; gap: 8px; color: var(--vx-mint); font-size: 11px; font-weight: 600; }
.vx-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--vx-mint); box-shadow: 0 0 0 4px rgba(124, 243, 208, .08); }
.vx-heading h1 { margin: 8px 0 0; color: #f1f6f4; font-size: 34px; font-weight: 700; letter-spacing: -.05em; }
.vx-heading p { margin: 5px 0 0; color: #819397; font-size: 13px; }
.vx-primary { display: inline-flex; align-items: center; gap: 8px; padding: 11px 15px; color: var(--vx-bg); background: var(--vx-mint); border: 0; border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 800; box-shadow: 0 8px 24px rgba(124, 243, 208, .12); transition: transform .18s, background .18s; }
.vx-primary:hover { background: #a4ffe5; transform: translateY(-2px); }
.vx-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 26px; }
.vx-card { background: var(--vx-panel); border: 1px solid var(--vx-border); border-radius: var(--vx-radius); }
.vx-metric { padding: 16px; transition: border-color .18s; }
.vx-metric:hover { border-color: #3a4b4e; }
.vx-metric-head { display: flex; align-items: center; justify-content: space-between; color: #829397; font-size: 11px; }
.vx-metric-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; }
.vx-metric-value { margin-top: 12px; color: #edf5f2; font-size: 23px; font-weight: 700; letter-spacing: -.04em; }
.vx-positive { color: var(--vx-mint) !important; }
.vx-metric-sub { margin-top: 4px; color: var(--vx-mint); font-size: 10px; }
.vx-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, .9fr); gap: 16px; margin-top: 16px; }
.vx-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--vx-border); }
.vx-eyebrow { color: #819397; font-size: 11px; }
.vx-card-title { margin-top: 4px; color: #e8f1ee; font-size: 15px; font-weight: 700; }
.vx-large-value { margin-top: 4px; color: #edf5f2; font-size: 24px; font-weight: 700; letter-spacing: -.04em; }
.vx-tag { display: inline-flex; align-items: center; gap: 4px; margin: 16px 0 0 10px; padding: 5px 8px; color: var(--vx-mint); background: #17342e; border-radius: 5px; font-size: 10px; font-weight: 700; vertical-align: top; }
.vx-performance-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.vx-ranges { display: flex; gap: 2px; padding: 4px; background: var(--vx-panel-deep); border: 1px solid #2a393e; border-radius: 8px; }
.vx-ranges button { padding: 6px 9px; color: #6f8386; background: transparent; border: 0; border-radius: 6px; cursor: pointer; font-size: 10px; font-weight: 700; }
.vx-ranges button:hover, .vx-ranges button.is-active { color: #cffff0; background: #29433e; }
.vx-chart { padding: 20px 20px 8px; }
.vx-chart-grid { height: 128px; display: flex; flex-direction: column; justify-content: space-between; padding: 7px 0; background: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, #26363b 32px, transparent 33px); }
.vx-chart svg { width: 100%; height: 100%; overflow: visible; }
.vx-chart path { fill: none; stroke: var(--vx-mint); stroke-linecap: round; stroke-width: 3; }
.vx-chart-labels { display: flex; justify-content: space-between; margin-top: 4px; color: #5e7276; font-size: 9px; }
.vx-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--vx-border); }
.vx-stat { padding: 12px 20px; border-right: 1px solid var(--vx-border); }
.vx-stat:last-child { border-right: 0; }
.vx-stat small { display: block; color: #718488; font-size: 10px; }
.vx-stat strong { display: block; margin-top: 5px; color: var(--vx-mint); font-size: 12px; }
.vx-stat strong.vx-risk { color: var(--vx-amber); }
.vx-order .vx-card-head { min-height: 76px; }
.vx-order-body { padding: 20px; }
.vx-toggle { display: flex; gap: 4px; padding: 4px; background: #0c1317; border-radius: 8px; }
.vx-toggle button { flex: 1; padding: 9px; color: #71858a; background: transparent; border: 0; border-radius: 6px; cursor: pointer; font-size: 11px; font-weight: 700; }
.vx-toggle button.is-buy { color: var(--vx-mint); background: #193a32; }
.vx-toggle button.is-sell { color: #ff9c8b; background: #3b2528; }
.vx-field-label { display: block; margin-top: 20px; color: #72868a; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.vx-select-wrap { position: relative; margin-top: 8px; }
.vx-select { width: 100%; appearance: none; padding: 11px 30px 11px 12px; color: #dce9e5; background: #0e1519; border: 1px solid #2a393e; border-radius: 8px; outline: 0; font-size: 12px; }
.vx-select:focus { border-color: var(--vx-mint); }
.vx-select-wrap svg { position: absolute; top: 12px; right: 11px; color: #63777b; pointer-events: none; }
.vx-order-info { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.vx-order-info div { padding: 11px; background: #0e1519; border: 1px solid #26363b; border-radius: 8px; }
.vx-order-info small { display: block; color: #63777b; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.vx-order-info strong { display: block; margin-top: 5px; color: #e8f2ee; font-size: 15px; }
.vx-order-button { width: 100%; margin-top: 16px; }
.vx-disclaimer { margin: 11px 0 0; color: #617479; font-size: 9px; text-align: center; }
.vx-table { width: 100%; border-collapse: collapse; min-width: 570px; text-align: left; }
.vx-table th { padding: 12px 20px; color: #63767a; border-bottom: 1px solid var(--vx-border-soft); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.vx-table td { padding: 14px 12px; color: #a7b9b6; border-bottom: 1px solid var(--vx-border-soft); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.vx-table td:first-child { padding-left: 20px; font-family: inherit; }
.vx-table td:last-child { padding-right: 20px; text-align: right; }
.vx-table tr:last-child td { border-bottom: 0; }
.vx-table tbody tr { cursor: pointer; transition: background .18s; }
.vx-table tbody tr:hover { background: #172126; }
.vx-market { display: flex; align-items: center; gap: 9px; }
.vx-market-dot { width: 8px; height: 8px; border-radius: 50%; }
.vx-market-symbol { color: #dce9e5; font-family: inherit; font-size: 12px; font-weight: 700; }
.vx-market-size { display: block; margin-top: 2px; color: #6e8286; font-family: inherit; font-size: 10px; }
.vx-side { display: inline-block; padding: 5px 6px; border-radius: 4px; font-family: inherit; font-size: 9px; font-weight: 700; }
.vx-side.long { color: var(--vx-mint); background: #17342e; }
.vx-side.short { color: #ff9d91; background: #3b252d; }
.vx-watch-row { display: flex; align-items: center; gap: 9px; padding: 12px 20px; border-bottom: 1px solid var(--vx-border-soft); cursor: pointer; transition: background .18s; }
.vx-watch-row:last-child { border-bottom: 0; }
.vx-watch-row:hover { background: #172126; }
.vx-star { padding: 0; color: #506469; background: none; border: 0; cursor: pointer; }
.vx-star.is-watched { color: #ffcc83; }
.vx-watch-copy { min-width: 0; flex: 1; }
.vx-watch-copy strong { display: block; color: #d7e4e1; font-size: 11px; }
.vx-watch-copy small { display: block; margin-top: 2px; overflow: hidden; color: #677b80; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.vx-mini-chart { width: 72px; height: 30px; }
.vx-mini-chart path { fill: none; stroke: var(--vx-mint); stroke-width: 2; }
.vx-mini-chart.down path { stroke: var(--vx-coral); }
.vx-watch-price { text-align: right; }
.vx-watch-price strong { display: block; color: #c5d4d1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; }
.vx-watch-price small { display: block; margin-top: 3px; color: var(--vx-mint); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; }
.vx-watch-price small.down { color: var(--vx-coral); }
.vx-activity { display: grid; grid-template-columns: repeat(3, 1fr); }
.vx-activity-item { display: flex; align-items: center; gap: 12px; padding: 16px 20px; color: inherit; text-align: left; background: transparent; border: 0; border-right: 1px solid var(--vx-border-soft); cursor: pointer; }
.vx-activity-item:last-child { border-right: 0; }
.vx-activity-item:hover { background: #172126; }
.vx-activity-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 8px; }
.vx-activity-icon.buy { color: var(--vx-mint); background: #17342e; }
.vx-activity-icon.sell { color: var(--vx-coral); background: #3b252d; }
.vx-activity-icon.deposit { color: var(--vx-violet); background: #25263b; }
.vx-activity-copy { min-width: 0; flex: 1; }
.vx-activity-copy strong { display: block; color: #d8e6e2; font-size: 11px; }
.vx-activity-copy small { display: block; margin-top: 3px; overflow: hidden; color: #6e8286; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.vx-activity-copy time { display: block; margin-top: 4px; color: #53676b; font-size: 9px; }
.vx-activity-amount { color: var(--vx-mint); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 700; }
.vx-footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; padding: 0 4px; color: #53666b; font-size: 9px; }
.vx-footer span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.vx-toast { position: fixed; left: 50%; bottom: 20px; z-index: 20; transform: translateX(-50%); padding: 11px 16px; color: #d7fff1; background: #18312c; border: 1px solid #3b5a53; border-radius: 8px; box-shadow: 0 18px 35px rgba(0,0,0,.35); font-size: 11px; font-weight: 600; }
.vx-mobile-close { display: none; }
@media (max-width: 1120px) {
  .vx-content { padding-inline: 24px; }
  .vx-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .vx-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 10; transform: translateX(-102%); transition: transform .25s; box-shadow: 16px 0 50px rgba(0,0,0,.35); }
  .vx-sidebar.is-open { transform: translateX(0); }
  .vx-mobile-close { display: inline-grid; place-items: center; margin-left: auto; padding: 5px; color: #71848a; background: none; border: 0; cursor: pointer; }
  .vx-mobile-menu { display: inline-flex !important; }
  .vx-heading h1 { font-size: 29px; }
  .vx-metrics { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .vx-topbar { padding: 0 16px; }
  .vx-content { padding: 22px 16px 30px; }
  .vx-heading { align-items: flex-start; flex-direction: column; }
  .vx-heading .vx-primary { width: 100%; justify-content: center; }
  .vx-metrics { gap: 8px; }
  .vx-metric { padding: 13px; }
  .vx-metric-value { font-size: 19px; }
  .vx-card-head { padding-inline: 15px; }
  .vx-chart { padding-inline: 15px; }
  .vx-stats { grid-template-columns: 1fr; }
  .vx-stat { border-right: 0; border-bottom: 1px solid var(--vx-border); }
  .vx-stat:last-child { border-bottom: 0; }
  .vx-activity { grid-template-columns: 1fr; }
  .vx-activity-item { border-right: 0; border-bottom: 1px solid var(--vx-border-soft); }
  .vx-activity-item:last-child { border-bottom: 0; }
  .vx-footer { flex-direction: column; }
  .vx-top-actions .vx-learn { display: none; }
}