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

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #1a1a1a;
  color: #fff; }

.main-content {
  margin-left: 320px;
  padding: 2rem;
  min-height: 100vh; }

.content-header {
  margin-bottom: 2rem; }
  .content-header h2 {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: .5rem; }
  .content-header p {
    color: #9ca3af; }

.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 320px;
  background: #2d2d2d;
  padding: 2rem 0;
  overflow-y: auto; }
  .sidebar .logo-container {
    padding: 0 1.5rem 2.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 2rem; }
    .sidebar .logo-container .logo {
      display: flex;
      align-items: center;
      gap: 1.5rem; }
    .sidebar .logo-container .logo-icon {
      width: 50px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      background: none;
      border-radius: 0;
      padding: 0; }
      .sidebar .logo-container .logo-icon::before {
        content: none; }
      .sidebar .logo-container .logo-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    .sidebar .logo-container .logo-text h1 {
      font-size: 1.5rem;
      font-weight: bold;
      color: #fff;
      margin-bottom: .25rem; }
    .sidebar .logo-container .logo-text p {
      font-size: .875rem;
      color: #9ca3af; }
  .sidebar .menu-section {
    padding: 0 1rem; }
    .sidebar .menu-section .menu-label {
      color: #6b7280;
      font-size: .75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .05em;
      padding: 0 .5rem .5rem;
      margin-bottom: .5rem; }
    .sidebar .menu-section .menu-item {
      display: flex;
      align-items: center;
      gap: 1.5rem;
      padding: .875rem 1rem;
      color: #9ca3af;
      text-decoration: none;
      border-radius: 8px;
      margin-bottom: .25rem;
      transition: all .2s;
      position: relative; }
      .sidebar .menu-section .menu-item:hover {
        background: rgba(255, 255, 255, 0.05);
        color: #fff; }
      .sidebar .menu-section .menu-item.active {
        background: rgba(74, 144, 226, 0.1);
        color: #4a90e2;
        border-left: 3px solid #4a90e2; }
        .sidebar .menu-section .menu-item.active::before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          width: 3px;
          background: #4a90e2;
          border-radius: 0 3px 3px 0; }

@media (max-width: 768px) {
  .sidebar {
    width: 70px; }

  .logo-text, .menu-label, .upgrade-section {
    display: none; }

  .main-content {
    margin-left: 70px; } }
.holdings-table {
  background: #2d2d2d;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden; }
  .holdings-table .table-header {
    background: #1a1a1a;
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  .holdings-table .table-tabs {
    display: flex;
    gap: 1rem; }
    .holdings-table .table-tabs .table-tab {
      padding: .5rem 1rem;
      background: transparent;
      color: #9ca3af;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: .2s; }
      .holdings-table .table-tabs .table-tab.active {
        background: rgba(74, 144, 226, 0.1);
        color: #4a90e2; }
  .holdings-table table {
    width: 100%;
    border-collapse: collapse; }
  .holdings-table th {
    background: #1a1a1a;
    color: #9ca3af;
    padding: 1rem .75rem;
    text-align: left;
    font-size: .875rem;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  .holdings-table td {
    padding: 1rem .75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: #fff;
    font-size: .875rem; }
  .holdings-table tr:hover {
    background: rgba(255, 255, 255, 0.02); }

.change {
  font-size: .875rem;
  margin-top: .5rem; }
  .change.positive {
    color: #10b981; }
  .change.negative {
    color: #ef4444; }

/* Falta en tu CSS en vivo: ícono del menú y tarjeta Upgrade Pro */
.menu-icon{
  width:24px; height:24px;
  display:flex; align-items:center; justify-content:center;
}

.upgrade-section{
  margin:2rem 1rem;
  padding:1.5rem;
  background:linear-gradient(135deg,#2d2d2d 0%,#1a1a1a 100%);
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.1);
  text-align:center;
}
.upgrade-section h3{
  font-size:1.125rem;
  font-weight:bold;
  margin-bottom:0.5rem;
}
.upgrade-section p{
  font-size:0.875rem;
  color:#9ca3af;
  margin-bottom:1rem;
}
.upgrade-btn{
  width:100%;
  padding:0.75rem;
  background:#10b981;
  color:#fff;
  border:none;
  border-radius:8px;
  font-weight:600;
  cursor:pointer;
  transition:background 0.2s;
}
.upgrade-btn:hover{ background:#059669; }

/* === KPI cards (igual que la plantilla) === */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  gap:1.5rem;
  margin-bottom:2rem;
}
.stat-card{
  background:#2d2d2d;
  padding:1.5rem;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.1);
}
.stat-card h3{
  font-size:.875rem;
  color:#9ca3af;
  margin-bottom:.5rem;
}
.stat-card p{
  font-size:1.875rem;
  font-weight:bold;
   margin:0;
}
.stat-card .change{
  font-size:.875rem;
  margin-top:.5rem;
}
.change.positive{ color:#10b981; }
.change.negative{ color:#ef4444; }


/* ===== User menu (topbar) ===== */

.gh-topbar{
  position: sticky; /* o fixed si lo quieres siempre visible */
  top: 0;
  z-index: 20;           /* suficiente para el dropdown, sin exagerar */
  height: 56px;          /* altura estable */
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 16px;
  background: rgba(26,26,26,.92);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin: 0;             /* <- importante */
}

/* ===== Topbar minimal, alineado al tema oscuro ===== */

.gh-topbar__left{display:flex; align-items:center; gap:.5rem; color:#9ca3af;}
.gh-topbar__label{font-size:.9rem;}
.gh-topbar__value{color:#fff; font-weight:600; text-transform:capitalize;}
.gh-topbar__right{display:flex; align-items:center; gap:12px; color:#9ca3af; font-size:.85rem;}
.gh-topbar__user{opacity:.9;}


.gh-menu{
  position: absolute; right: 0; top: 100%;
  margin-top: 8px; min-width: 220px;
  background:#1f2937; border:1px solid rgba(255,255,255,.08);
  border-radius:10px; padding:8px;
  opacity:0; transform:translateY(-4px);
  pointer-events:none; transition:.16s ease;
  z-index: 30; /* solo sobre el topbar, no sobre toda la página */
}
.gh-menu__item{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:8px; color:#e5e7eb; text-decoration:none;
}
.gh-menu__item:hover{ background:rgba(255,255,255,.06); color:#fff; }
.gh-menu__danger{ color:#f87171; }
.gh-menu__danger:hover{ background:rgba(248,113,113,.12); color:#fecaca; }

.gh-menu__sep{
  height:1px; background:rgba(255,255,255,.08); margin:6px 8px;
}


.gh-user{ position:relative; }
.gh-user__btn{
  display:flex; align-items:center; gap:10px;
  background:transparent; border:0; color:#9ca3af;
  font-size:.9rem; padding:6px 8px; border-radius:8px;
}

.gh-user__avatar{
  width:28px; height:28px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:#4b5563; color:#fff; font-weight:600; font-size:.9rem;
}
.gh-user__email{ max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gh-user__caret{ opacity:.7; font-size:.8rem; }




/* Mantener abierto al pasar del botón al menú y al hacer click */
.gh-user:hover .gh-menu,
.gh-user:focus-within .gh-menu,
.gh-user.is-open .gh-menu{
  opacity:1; transform:translateY(0); pointer-events:auto;
}

.gh-user__btn:focus{ outline:none; }






.table-container{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* scroll suave en iOS */
  display: block;
}

/* Mantén la tabla legible en pantallas estrechas */
.table-container table{
  width: 100%;
  min-width: 900px; /* ajusta si quieres menos/más columnas visibles */
}

/* (Opcional) estilito de scrollbar horizontal */
.table-container::-webkit-scrollbar{ height:8px; }
.table-container::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.18);
  border-radius: 8px;
}
.table-container::-webkit-scrollbar-track{
  background: rgba(255,255,255,.06);
  border-radius: 8px;
}

/* Utilidades que usa la plantilla en las celdas */
.stock-name{ font-weight:600; margin-bottom:.25rem; }
.stock-ticker{ color:#9ca3af; font-size:.75rem; }
.value-line{ display:block; margin-bottom:.25rem; }
.value-line:last-child{ margin-bottom:0; }

/* Ajuste responsive de la tabla (espaciado y tamaño de letra) */
@media (max-width: 640px){
  .holdings-table th,
  .holdings-table td{
    padding: .75rem .5rem;
    font-size: .8rem;
  }
}


/* Lista scrollable dentro del card de holdings de DASHBOARD */
.gh-holdings-list{
  flex: 1;                 /* ocupa el alto restante del card */
  overflow-y: auto;        /* scroll vertical si se pasa */
  padding-right: 6px;      /* espacio para el scrollbar */
  -webkit-overflow-scrolling: touch;
}

/* Scrollbar sutil, a juego con el tema (opcional) */
.gh-holdings-list::-webkit-scrollbar{ width: 8px; }
.gh-holdings-list::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.18);
  border-radius: 8px;
}
.gh-holdings-list::-webkit-scrollbar-track{
  background: rgba(255,255,255,.06);
  border-radius: 8px;
}

/* En móviles puedes soltar el alto fijo si prefieres */
@media (max-width: 768px){
  .gh-holdings-list{ max-height: 50vh; }
}


/* —— Vista con tabs en el card de tabla —— */
.table-viewport{
  height: 420px;            /* alto fijo del box */
  overflow: hidden;         /* el scroll vive dentro del contenedor interno */
}

/* cada pestaña (pane) */
.table-pane{ display:none; height:100%; }
.table-pane.active{ display:block; }

/* el contenedor que scrollea (vertical + horizontal) */
.table-fixed-height{
  height: 100%;
  overflow: auto;                 /* vertical + horizontal si hace falta */
  -webkit-overflow-scrolling: touch;
}

/* encabezado sticky para tablas largas */
.holdings-table thead th{
  position: sticky;
  top: 0;
  z-index: 1;
  background: #1a1a1a;           /* mismo header de tabla del theme */
}

/* opcional: scrollbar sutil solo dentro de la tabla */
.table-fixed-height::-webkit-scrollbar{ height:8px; width:8px; }
.table-fixed-height::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.18);
  border-radius: 8px;
}
.table-fixed-height::-webkit-scrollbar-track{
  background: rgba(255,255,255,.06);
  border-radius: 8px;
}



/* Paneado de tablas (mismas clases ya usadas) */
.table-viewport { position: relative; }
.table-pane { display: none; }
.table-pane.active { display: block; }

/* Altura fija + scroll vertical en el mismo box */
.table-fixed-height { max-height: 360px; overflow: auto; }


/* ===== Registration (pública) Formulario de Registro ===== */
.gh-register-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background: radial-gradient(circle at top left, #0f172a 0%, #020617 80%);
  padding:2rem;
}
.gh-register-card{
  background: rgba(17,24,39,.9);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:2rem 2.5rem;
  max-width:680px; width:100%;
  box-shadow:0 0 40px rgba(0,0,0,.5);
  text-align:center;
}
.gh-register-card h1{
  font-size:2rem; font-weight:800; margin-bottom:.5rem;
  background: linear-gradient(90deg,#38bdf8,#818cf8);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.gh-register-card p{ color:#9ca3af; margin-bottom:2rem; }

/* Formulario */
.gh-form{ text-align:left; }
.gh-form .row{
  display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem;
}
.gh-form .field label{
  display:block; margin-bottom:.5rem; font-weight:600; color:#cbd5e1;
}
.gh-form input, .gh-form select{
  width:100%; padding:.6rem .75rem; border-radius:8px;
  border:1px solid rgba(255,255,255,.12);
  background:#0f172a; color:#e5e7eb;
}
.gh-user-editor .gh-form input,
.gh-user-editor .gh-form select,
.gh-user-editor .gh-form textarea{
  background:#1a1a1a;
  border-color:rgba(255,255,255,.16);
}
.gh-form input:focus, .gh-form select:focus{
  outline:none; border-color:rgba(74,144,226,.6);
}

/* Range + burbuja */
.gh-range{ display:flex; align-items:center; gap:.75rem; }
.gh-range input[type="range"]{ width:100%; }
.gh-range-bubble{ min-width:2ch; text-align:center; color:#9ca3af; }
.gh-mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

/* Alertas */
.gh-alert{ padding:.8rem 1rem; border-radius:10px; margin-bottom:1rem; }
.gh-alert--error{ background:#7f1d1d; border:1px solid #fecaca; color:#fee2e2; }
.gh-alert--ok{ background:#064e3b; border:1px solid #a7f3d0; color:#d1fae5; }
.gh-alert ul{ margin:0; padding-left:1.1rem; }

/* Botón submit reutilizando tu .table-tab */
.gh-submit-btn{
  width:100%; font-size:1.05rem; margin-top:1rem; text-align:center;
}
@media (max-width: 640px){
  .gh-form .row{ grid-template-columns:1fr; }
}

/* ===== Botones genéricos (primario como "Get started") ===== */
.gh-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.8rem 1rem; border-radius:10px; font-weight:600; border:0; cursor:pointer;
}
.gh-btn--primary{
  background: linear-gradient(135deg,#4a90e2 0%, #2171ce 100%);
  color:#fff;
}
.gh-btn--warning{
  background:#d97706;
  color:#fff;
}
.gh-btn--success{
  background:#16a34a;
  color:#fff;
}
.gh-btn--danger{
  background:#b91c1c;
  color:#fff;
}
.gh-btn--primary:disabled{ opacity:.45; cursor:not-allowed; }

/* ===== Consents / checkboxes alineados a la izquierda ===== */
.gh-consents{ margin: .75rem 0 1rem; }
.gh-check{
  display:flex; gap:.6rem; align-items:flex-start; text-align:left; line-height:1.5; color:#cbd5e1;
}
.gh-check + .gh-check{ margin-top:.5rem; }
.gh-check input[type="checkbox"]{ margin-top:.25rem; width:18px; height:18px; }
.gh-link{ color:#93c5fd; text-decoration:underline; }

/* === Connect account page === */
.connect-wrapper{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:2rem;
}

.connect-panel{
  background:#1e1f24;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  padding:2.25rem 2.5rem;
  box-shadow:0 25px 40px rgba(0,0,0,.35);
}

.connect-panel__headline{
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}

.connect-panel__headline h3{
  font-size:1.5rem;
  margin:0;
}

.connect-panel__list{
  margin:0;
  padding-left:1.25rem;
  line-height:1.65;
  color:#cfd7f3;
}

.connect-panel__notice{
  color:#94a3b8;
  margin:0;
}

.connect-panel__subtitle{
  margin:0 0 .5rem;
  font-size:1rem;
  color:#e5e7eb;
}

.connect-action{
  width:280px;
  justify-content:center;
  font-size:1rem;
  padding:0.95rem 1.2rem;
  border-radius:12px;
}

.connect-grid{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:2rem;
}

.connect-callouts{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.connect-callout{
  background:#0c1e3e;
  border:1px solid rgba(147,197,253,.25);
  border-radius:14px;
  padding:1rem 1.25rem;
  color:#cfe1fb;
}

.connect-callout h4{
  margin:0 0 .35rem;
  font-size:1rem;
  color:#f1f5ff;
}

.connect-callout ul{
  margin:0;
  padding-left:1.15rem;
}

.connect-callout li{ margin-bottom:.25rem; }

.connect-faq{
  background:#1c1d22;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.05);
  padding:2rem 2.5rem;
}

.connect-faq h3{
  margin:0 0 1rem;
  font-size:1.25rem;
}

.connect-faq dl{ display:flex; flex-direction:column; gap:1rem; }
.connect-faq dt{ font-weight:600; color:#e5e7eb; }
.connect-faq dd{ margin:0; color:#aeb7cf; }

@media (max-width:900px){
  .connect-grid{ grid-template-columns:1fr; }
  .connect-action{ width:100%; }
}
.gh-link:hover{ color:#bfdbfe; }