/* Extracted from index.html */

:root {
    --bg: #0a0c10;
    --surface: #111318;
    --surface2: #181b22;
    --border: #1e2330;
    --accent: #f0c040;
    --accent2: #3de8a0;
    --accent3: #5b8af5;
    --text: #e8eaf0;
    --muted: #6b7280;
    --danger: #ff7d8f; --shadow: 0 24px 60px rgba(0,0,0,.26);
  }

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

  body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Manrope', sans-serif;
    min-height: 100vh;
    background-image: radial-gradient(ellipse at 10% 20%, rgba(91,138,245,0.06) 0%, transparent 50%),
                      radial-gradient(ellipse at 90% 80%, rgba(61,232,160,0.05) 0%, transparent 50%);
  }

  /* NAV */
  nav {
    display: flex;
    align-items: center;
    padding: 0 2rem;
    height: 64px;
    border-bottom: 1px solid var(--border);
    background: rgba(10,12,16,0.84); backdrop-filter: blur(16px); box-shadow: 0 12px 30px rgba(0,0,0,.18);
    position: sticky;
    top: 0;
    z-index: 100;
    gap: 2rem;
  }

  .logo {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--accent);
    letter-spacing: 0.05em;
    margin-right: auto;
  }
  .logo span { color: var(--accent2); }

  .nav-tabs { display: flex; gap: 0.25rem; }
  .nav-links { display: flex; gap: 0.25rem; }
  .nav-tab { padding: 0.4rem 1rem; border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s;
    color: var(--muted);
    text-decoration: none;
  }
  .nav-tab.active { background: linear-gradient(180deg, rgba(91,138,245,.14), rgba(91,138,245,.06)); border-color: rgba(91,138,245,.35); color: var(--text); }
  .nav-tab:hover:not(.active) { color: var(--text); }
  .nav-link {
    padding: .38rem .85rem; border-radius: 999px; font-size: .78rem; font-weight: 700;
    color: var(--muted); text-decoration: none; transition: all .12s; border: 1px solid transparent;
  }
  .nav-link:hover { color: var(--text); background: var(--surface2); }
  .nav-link.active { color: var(--text); background: linear-gradient(180deg,rgba(91,138,245,.14),rgba(91,138,245,.06)); border-color: rgba(91,138,245,.35); }

  .nav-right { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; }
  .nav-cta{
    padding:.42rem .8rem;border-radius:999px;border:1px solid rgba(61,232,160,.35);background:rgba(61,232,160,.09);color:var(--accent2);
    text-decoration:none;font-size:.72rem;font-weight:800;transition:all .12s
  }
  .nav-cta:hover{transform:translateY(-1px);background:rgba(61,232,160,.13)}
  .btn-wallet { padding: 0.45rem 1rem; border-radius: 999px; border: 1px solid rgba(110,224,185,.35); background: rgba(110,224,185,.08);
    color: var(--text);
    font-family: 'Manrope', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
  }
  .btn-wallet:hover { border-color: var(--accent2); color: var(--accent2); transform: translateY(-1px); }

  .avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    display: flex; align-items: center; justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    color: #000;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s;
  }
  .avatar:hover { border-color: var(--accent); }

  /* LAYOUT */
  .layout {
    display: grid;
    grid-template-columns: 200px 1fr 240px;
    gap: 0;
    height: calc(100vh - 64px);
  }

  /* SIDEBAR LEFT */
  .sidebar-left {
    border-right: 1px solid var(--border);
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .section-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.5rem;
  }

  .miner-card { background: linear-gradient(180deg, rgba(17,19,24,.98), rgba(24,27,34,.92)); border: 1px solid rgba(91,138,245,.14); border-radius: 16px; box-shadow: var(--shadow);
    padding: 0.75rem;
    transition: border-color 0.2s;
    cursor: pointer;
  }
  .miner-card:hover { border-color: var(--accent2); }
  .miner-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.25rem;
  }
  .miner-hash {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    color: var(--accent2);
  }
  .miner-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent2);
    box-shadow: 0 0 6px var(--accent2);
    display: inline-block;
    margin-right: 0.4rem;
    animation: pulse 2s infinite;
  }
  @keyframes pulse {
    0%,100% { opacity: 1; }
    50% { opacity: 0.4; }
  }

  /* MAIN */
  .main {
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  /* HASH STATS BAR */
  .hash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid rgba(91,138,245,.14); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); }
  .hash-stat { background: linear-gradient(180deg, rgba(17,19,24,.98), rgba(24,27,34,.92)); padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  .hash-stat-label { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
  .hash-stat-value { font-family: 'JetBrains Mono', monospace; font-size: 1.4rem; font-weight: 700; }
  .hash-stat-value.tu { color: var(--accent); }
  .hash-stat-value.pool { color: var(--accent3); }
  .hash-stat-value.net { color: var(--accent2); }

  /* CHART */
  .chart-container { background: linear-gradient(180deg, rgba(17,19,24,.98), rgba(16,27,47,.94)); border: 1px solid rgba(91,138,245,.14); border-radius: 20px; padding: 1.35rem; box-shadow: var(--shadow); }
  .chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
  }
  .chart-title { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

  canvas#hashChart  { width: 100% !important; height: 140px !important; }
  canvas#pdHashChart { width: 100% !important; height: 140px !important; }
  /* Contener la altura del chart wrapper */
  .chart-container { position: relative; }

  /* EARNINGS + BALANCE */
  .bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }

  .card { background: linear-gradient(180deg, rgba(17,19,24,.98), rgba(24,27,34,.92)); border: 1px solid rgba(91,138,245,.14); border-radius: 18px; padding: 1.25rem; box-shadow: var(--shadow); }
  .card-title { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; }

  .earning-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
  }
  .earning-row:last-child { border-bottom: none; }
  .earning-block { color: var(--muted); }
  .earning-value { color: var(--accent); font-weight: 700; }

  .balance-big {
    font-family: 'JetBrains Mono', monospace;
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 0.5rem;
  }
  .pd-balance-card { position: relative; overflow: hidden; }
  .pd-balance-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(1.35);
    width: 92px;
    height: 92px;
    object-fit: contain;
    opacity: 0.92;
    pointer-events: none;
    flex-shrink: 0;
  }
  @media (max-width: 900px) {
    .pd-balance-logo { width: 64px; height: 64px; }
  }
  .balance-label { font-size: 0.7rem; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }

  /* BLOCKS TABLE */
  .blocks-section { background: linear-gradient(180deg, rgba(17,19,24,.98), rgba(17,19,24,.94)); border: 1px solid rgba(91,138,245,.14); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); }
  /* Pool detail: connect tab needs internal scroll */
  #pd-view-connect {
    overflow-y: visible;
    max-height: none;
  }
  #pd-view-settings {
    overflow-y: visible;
    max-height: none;
  }
  .blocks-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .blocks-title { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

  table { width: 100%; border-collapse: collapse; }
  thead tr { background: var(--surface2); }
  thead th {
    padding: 0.65rem 1rem;
    text-align: left;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent3);
    border-bottom: 1px solid var(--border);
  }
  tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
  }
  tbody tr:last-child { border-bottom: none; }
  tbody tr:hover { background: var(--surface2); }
  tbody td {
    padding: 0.75rem 1rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    color: var(--text);
  }
  .td-time { color: var(--muted); }
  .td-finder { color: var(--accent3); }
  .td-height { font-weight: 700; }
  .td-luck { font-weight: 700; }
  .luck-hi { color: var(--accent2); }
  .luck-mid { color: var(--accent); }
  .luck-lo { color: var(--danger); }

  .badge-confirmed {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    background: rgba(61,232,160,0.12);
    color: var(--accent2);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .progress-bar-wrap {
    background: rgba(91,138,245,0.15);
    border-radius: 4px;
    height: 8px;
    width: 80px;
    overflow: hidden;
  }
  .progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent3), var(--accent2));
    border-radius: 4px;
    width: 100%;
  }

  .td-reward { color: var(--accent); font-weight: 700; }

  /* SIDEBAR RIGHT */
  .sidebar-right { border-left: 1px solid rgba(91,138,245,.12); padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    overflow-y: auto;
  }

  .coin-section { display: flex; flex-direction: column; gap: 0.5rem; }

  .coin-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 0.85rem; border-radius: 14px; border: 1px solid rgba(91,138,245,.12); background: rgba(255,255,255,.025);
    cursor: pointer;
    transition: all 0.2s;
  }
  .coin-item:hover { background: var(--surface2); border-color: var(--border); }
  .coin-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
  .coin-name { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; font-weight: 700; }
  .coin-sub { font-size: 0.65rem; color: var(--muted); margin-top: 0.1rem; }
  .coin-right { margin-left: auto; text-align: right; }
  .coin-val { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--accent); }

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

  /* TAB TOGGLE */
  .section-tabs { display: flex; gap: 0.25rem; }
  .sec-tab {
    padding: 0.3rem 0.9rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    font-family: 'Manrope', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s;
    letter-spacing: 0.04em;
  }
  .sec-tab.active {
    background: var(--surface2);
    border-color: var(--accent3);
    color: var(--accent3);
  }
  .sec-tab:hover:not(.active) { color: var(--text); border-color: var(--border); }

  /* WORKERS TABLE */
  .workers-table { width: 100%; border-collapse: collapse; }
  .workers-table thead tr { background: var(--surface2); }
  .workers-table thead th {
    padding: 0.65rem 1rem;
    text-align: left;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent3);
    border-bottom: 1px solid var(--border);
  }
  .workers-table tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
  }
  .workers-table tbody tr:last-child { border-bottom: none; }
  .workers-table tbody tr:hover { background: var(--surface2); }
  .workers-table tbody td {
    padding: 0.75rem 1rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    color: var(--text);
  }
  .worker-name { color: var(--accent2); font-weight: 700; }
  .worker-offline { color: var(--muted); }
  .worker-hash-bar { display: flex; align-items: center; gap: 0.6rem; }
  .worker-bar-wrap {
    background: rgba(91,138,245,0.12);
    border-radius: 3px;
    height: 6px;
    width: 80px;
    overflow: hidden;
  }
  .worker-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent3), var(--accent2));
    border-radius: 3px;
    transition: width 0.4s ease;
  }
  .worker-status-on {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.18rem 0.55rem;
    border-radius: 4px;
    background: rgba(61,232,160,0.1);
    color: var(--accent2);
    font-size: 0.65rem; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
  }
  .worker-status-off {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.18rem 0.55rem;
    border-radius: 4px;
    background: rgba(107,114,128,0.12);
    color: var(--muted);
    font-size: 0.65rem; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
  }
  .w-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

  /* =============================================
     COIN POOL PAGE - pool table styles
     ============================================= */

  /* pagina coinpool scrollable */
  #page-coinpool {
    height: calc(100vh - 64px);
    overflow-y: auto;
  }
  #page-coinpool-detail {
    min-height: calc(100vh - 64px);
    overflow-y: auto;
  }
  #page-coinpool-detail .layout {
    height: auto;
    min-height: calc(100vh - 64px);
  }
  #page-coinpool-detail .main {
    overflow: visible;
  }
  #page-coinpool-detail .blocks-section {
    overflow: hidden;
  }
  /* Forzar visibilidad de hash stats en detalle de pool */
  #page-pool .hash-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: 92px;
    margin-bottom: 0.25rem;
  }
  #page-pool .hash-stat {
    min-height: 92px;
  }
  /* En pool detail, permitir que el bloque inferior crezca y haga scroll en la pagina */
  #page-pool .blocks-section {
    max-height: none;
    overflow: visible;
  }
  #pd-view-blocks,
  #pd-view-workers,
  #pd-view-payments,
  #pd-view-earnings,
  #pd-view-connect,
  #pd-view-settings { -webkit-overflow-scrolling: touch; }
  #pd-view-blocks table,
  #pd-view-workers table,
  #pd-view-payments table,
  #pd-view-earnings table,
  #pd-view-connect table {
    min-width: 860px;
  }

  /* Pantallas de poca altura (portatiles/zoom) */
  @media (max-height: 820px) {
    .layout {
      height: auto;
      min-height: calc(100vh - 64px);
    }
    .main,
    .sidebar-left,
    .sidebar-right {
      overflow: visible;
      max-height: none;
    }
    #page-pool .blocks-section { max-height: none; }
  }

  /* Filtros de algoritmo */
  #algorithmFilters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
  }
  #algorithmFilters .filter-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    padding: 0.3rem 0.9rem;
    border-radius: 4px;
    font-family: 'Manrope', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.15s;
  }
  #algorithmFilters .filter-btn:hover {
    border-color: var(--accent3);
    color: var(--text);
  }
  #algorithmFilters .filter-btn.active {
    background: var(--accent3);
    border-color: var(--accent3);
    color: #000;
    font-weight: 800;
  }

  /* seccion por algoritmo */
  .algo-section { margin-bottom: 2rem; }

  .pool-table-wrapper {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface);
  }

  .pool-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface2);
  }
  .pool-table-header-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .algo-name {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text);
    font-family: 'Manrope', sans-serif;
  }
  .pool-table-header-right {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    color: var(--accent2);
  }

  /* Tabla de monedas */
  .pool-table {
    width: 100%;
    border-collapse: collapse;
  }
  .pool-table thead tr { background: var(--surface2); }
  .pool-table thead th {
    padding: 0.6rem 1rem;
    text-align: left;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent3);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
  }
  .pool-table tbody tr.pool-row {
    border-bottom: 1px solid var(--border);
    transition: background 0.12s;
    cursor: pointer;
  }
  .pool-table tbody tr.pool-row:last-child { border-bottom: none; }
  .pool-table tbody tr.pool-row:hover { background: var(--surface2); }
  .pool-table td {
    padding: 0.7rem 1rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    vertical-align: middle;
    white-space: nowrap;
    color: var(--text);
  }
  .pool-table .muted  { color: var(--muted); }
  .pool-table .accent  { color: var(--accent); font-weight: 700; }
  .pool-table .accent2 { color: var(--accent2); }
  .pool-table .coin-name {
    font-weight: 700;
    color: var(--text);
    font-size: 0.8rem;
    font-family: 'Manrope', sans-serif;
  }
  .pool-table .coin-algo {
    font-size: 0.62rem;
    color: var(--muted);
    font-family: 'JetBrains Mono', monospace;
    margin-top: 0.15rem;
  }

  /* Badges online/offline */
  .badge-online {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--accent2);
    letter-spacing: 0.05em;
  }
  .badge-offline {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--danger);
    letter-spacing: 0.05em;
  }
  .badge-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: currentColor;
    animation: pulse 2s infinite;
  }

  /* Loading state */
  .pool-loading {
    padding: 2rem;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: var(--muted);
    letter-spacing: 0.08em;
  }
  .pool-loading span {
    display: inline-block;
    animation: blink 1.2s step-end infinite;
  }
  .pool-loading span:nth-child(2) { animation-delay: 0.2s; }
  .pool-loading span:nth-child(3) { animation-delay: 0.4s; }
  @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.2} }

  /* Responsive */
  @media (max-width: 900px) {
    nav {
      padding: 0 1rem;
      gap: 0.75rem;
      flex-wrap: wrap;
      height: auto;
      min-height: 64px;
    }
    .nav-tabs {
      order: 3;
      width: 100%;
      overflow-x: auto;
      padding-bottom: 0.65rem;
    }
    .layout {
      grid-template-columns: 1fr;
      height: auto;
      min-height: calc(100vh - 64px);
    }
    .sidebar-left,
    .sidebar-right {
      display: none;
    }
    .main {
      padding: 1rem;
    }
    .bottom-grid {
      grid-template-columns: 1fr;
    }
    .pool-table thead th:nth-child(n+7),
    .pool-table td:nth-child(n+7) { display: none; }
  }
  @media (max-width: 600px) {
    .logo { font-size: 0.95rem; }
    .nav-tab { padding: 0.35rem 0.78rem; font-size: 0.78rem; }
    #nav-user > div:first-child { display: none; }
    .hash-stats { grid-template-columns: 1fr; }
    .chart-container { padding: 0.95rem; }
    .card { padding: 0.95rem; }
    .pool-table thead th:nth-child(n+5),
    .pool-table td:nth-child(n+5) { display: none; }
    #page-coinpool { padding: 1rem; }
    #page-pool #pd-view-blocks,
    #page-pool #pd-view-workers,
    #page-pool #pd-view-payments,
    #page-pool #pd-view-earnings,
    #page-pool #pd-view-connect,
    #page-pool #pd-view-settings { max-height: none; }
  }
  @media (max-height: 820px) {
    #page-coinpool-detail .layout {
      height: auto;
      min-height: calc(100vh - 64px);
    }
    #page-coinpool-detail .main {
      overflow: visible;
    }
  }


  /* a”€a”€ Auth nav styles a”€a”€ */
  #nav-right-area { position: relative; }
  #nav-guest a, #nav-user { transition: all 0.15s; }
  /* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* ==========================================================================
   Premium Visual Refresh (frontend only)
   ========================================================================== */
:root {
  --bg: #06080f;
  --surface: #0d1220;
  --surface2: #121a2b;
  --border: rgba(122, 165, 255, 0.22);
  --accent: #f9c643;
  --accent2: #2ff2c8;
  --accent3: #4f8dff;
  --text: #edf3ff;
  --muted: #93a2be;
  --danger: #ff7c9a;
  --shadow: 0 20px 48px rgba(2, 6, 20, 0.5);
}

body {
  background:
    radial-gradient(1200px 500px at -5% -10%, rgba(79,141,255,0.22), transparent 55%),
    radial-gradient(900px 450px at 105% -15%, rgba(47,242,200,0.16), transparent 58%),
    linear-gradient(160deg, #06080f 0%, #070d1a 45%, #05070d 100%);
  color: var(--text);
  overflow-x: hidden;
}

nav {
  height: 72px;
  border-bottom: 1px solid rgba(122,165,255,0.2);
  background: rgba(8, 12, 23, 0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.logo {
  font-size: 1.18rem;
  letter-spacing: 0.07em;
}

.nav-tab {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  padding: 0.45rem 1.05rem;
}

.nav-tab.active {
  background: linear-gradient(180deg, rgba(79,141,255,.26), rgba(79,141,255,.11));
  border: 1px solid rgba(79,141,255,0.45);
  color: #f2f7ff;
}

.layout {
  grid-template-columns: 214px 1fr 258px;
  height: calc(100vh - 72px);
}

.sidebar-left,
.sidebar-right {
  background: linear-gradient(180deg, rgba(9, 13, 24, 0.56), rgba(7, 11, 20, 0.25));
}

.sidebar-left { border-right: 1px solid rgba(122,165,255,0.18); }
.sidebar-right { border-left: 1px solid rgba(122,165,255,0.18); }

.main {
  padding: 1.4rem 1.35rem 1.55rem;
  gap: 1rem;
}

.dash-hero {
  background:
    linear-gradient(130deg, rgba(17, 25, 42, 0.95), rgba(11, 17, 30, 0.95)),
    radial-gradient(500px 180px at 0% 0%, rgba(79,141,255,0.24), transparent 65%);
  border: 1px solid rgba(120, 160, 255, 0.28);
  border-radius: 18px;
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow);
}

.dash-hero-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.85rem;
}

.dash-kicker {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-weight: 700;
  font-size: 0.62rem;
}

.dash-title {
  font-size: 1.25rem;
  letter-spacing: 0.01em;
  margin-top: 0.2rem;
}

.dash-pill {
  border: 1px solid rgba(47,242,200,0.45);
  color: var(--accent2);
  padding: 0.38rem 0.72rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dash-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.72rem;
}

.dash-metric {
  background: linear-gradient(180deg, rgba(16, 22, 37, .9), rgba(12, 17, 29, .9));
  border: 1px solid rgba(122,165,255,0.2);
  border-radius: 14px;
  padding: 0.82rem;
}

.dash-metric-label {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.61rem;
  font-weight: 700;
}

.dash-metric-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.06rem;
  color: #f4f8ff;
  font-weight: 700;
  margin-top: 0.32rem;
}

.dash-metric-sub {
  margin-top: 0.22rem;
  color: rgba(162, 182, 214, 0.9);
  font-size: 0.66rem;
}

.hash-stats,
.chart-container,
.card,
.blocks-section,
.miner-card,
.coin-item,
#page-pool .hash-stats,
#page-pool .blocks-section {
  border-color: rgba(122,165,255,0.22) !important;
  box-shadow: var(--shadow);
}

.hash-stats {
  border-radius: 16px;
  overflow: hidden;
}

.hash-stat {
  background: linear-gradient(180deg, rgba(14, 20, 35, .95), rgba(11, 16, 29, .95));
}

.hash-stat-value {
  font-size: 1.9rem;
  line-height: 1.1;
}

.hash-stat-label {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
}

.chart-container {
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(13, 19, 34, .98), rgba(10, 17, 31, .97)),
    radial-gradient(900px 160px at 10% 100%, rgba(79,141,255,0.2), transparent 65%);
}

.card {
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(13, 18, 31, .96), rgba(11, 16, 28, .95));
}

.section-label,
.card-title,
.chart-title {
  letter-spacing: 0.12em;
}

.blocks-section {
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(13, 18, 31, .98), rgba(10, 14, 25, .96));
}

.blocks-header {
  border-bottom: 1px solid rgba(122,165,255,0.2);
}

.sec-tab {
  border: 1px solid rgba(122,165,255,0.22);
  border-radius: 10px;
  background: rgba(15, 21, 36, 0.6);
}

.sec-tab.active {
  background: linear-gradient(180deg, rgba(79,141,255,.2), rgba(79,141,255,.09));
  border-color: rgba(79,141,255,0.5);
}

table thead th {
  background: rgba(18, 26, 43, 0.88);
}

tbody tr:hover {
  background: rgba(79,141,255,0.09);
}

.progress-bar-wrap {
  height: 9px;
  border-radius: 999px;
}

.progress-bar-fill {
  border-radius: 999px;
  background: linear-gradient(90deg, #4f8dff, #2ff2c8);
}

.coin-item {
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(14,20,34,.9), rgba(11,16,28,.9));
}

.coin-item:hover {
  transform: translateY(-1px);
}

.coin-dot {
  width: 14px;
  height: 14px;
}

#user-menu {
  border: 1px solid rgba(122,165,255,0.25) !important;
  background: linear-gradient(180deg, rgba(14,20,34,.98), rgba(10,14,24,.98)) !important;
  border-radius: 14px !important;
}

@keyframes riseIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.dash-hero,
.hash-stats,
.chart-container,
.bottom-grid,
.blocks-section {
  animation: riseIn .45s ease-out both;
}

@media (max-width: 1200px) {
  .dash-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  nav { height: auto; min-height: 72px; }
  .layout {
    grid-template-columns: 1fr;
    height: auto;
    min-height: calc(100vh - 72px);
  }
  .main { padding: 1rem; }
  .dash-title { font-size: 1.05rem; }
}

@media (max-width: 640px) {
  .dash-hero { padding: 0.9rem; }
  .dash-hero-head { flex-direction: column; align-items: flex-start; }
  .dash-metrics { grid-template-columns: 1fr; }
  .hash-stat-value { font-size: 1.6rem; }
}

/* ==========================================================================
   Dashboard (Mining Page) polish
   ========================================================================== */
#page-miningpool .dashboard-main {
  gap: 1.05rem;
}

#page-miningpool .dash-subtitle {
  margin-top: 0.35rem;
  color: #a8b9d7;
  font-size: 0.83rem;
  line-height: 1.45;
  max-width: 62ch;
}

#page-miningpool .hero-actions {
  display: flex;
  gap: 0.55rem;
  margin-bottom: 0.85rem;
}

#page-miningpool .hero-btn {
  text-decoration: none;
  font-weight: 700;
  font-size: 0.73rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 10px;
  padding: 0.5rem 0.82rem;
  transition: transform .15s ease, border-color .15s ease, opacity .15s ease;
}

#page-miningpool .hero-btn:hover {
  transform: translateY(-1px);
}

#page-miningpool .hero-btn-primary {
  border: 1px solid rgba(47,242,200,0.55);
  color: #071018;
  background: linear-gradient(180deg, #2ff2c8, #22caa8);
}

#page-miningpool .hero-btn-ghost {
  border: 1px solid rgba(122,165,255,0.35);
  color: #dce8ff;
  background: rgba(16, 24, 40, 0.55);
}

#page-miningpool .dash-left .dash-side-section + .dash-side-section {
  margin-top: 1rem;
}

#page-miningpool .dash-stack {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#page-miningpool .quick-signal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}

#page-miningpool .quick-signal {
  border: 1px solid rgba(122,165,255,0.18);
  background: linear-gradient(180deg, rgba(14,20,34,.9), rgba(10,16,28,.9));
  border-radius: 10px;
  padding: 0.56rem;
}

#page-miningpool .q-label {
  color: var(--muted);
  font-size: 0.58rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

#page-miningpool .q-value {
  margin-top: 0.22rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.79rem;
  color: #eef5ff;
  font-weight: 700;
}

#page-miningpool .dash-right .coin-item {
  padding: 0.82rem 0.9rem;
}

#page-miningpool .dashboard-intel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 0.95rem;
  align-items: start;
}

#page-miningpool .dashboard-primary {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#page-miningpool .dashboard-command-panel {
  border: 1px solid rgba(122,165,255,0.2);
  background: linear-gradient(180deg, rgba(14,20,34,.95), rgba(10,14,24,.95));
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(0,0,0,.3);
  padding: 1rem;
  position: sticky;
  top: 76px;
}

#page-miningpool .command-eyebrow {
  color: #87a5da;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

#page-miningpool .command-title {
  margin-top: 0.45rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: #ecf3ff;
  line-height: 1.25;
}

#page-miningpool .command-copy {
  margin-top: 0.55rem;
  color: #a8b9d7;
  font-size: 0.78rem;
  line-height: 1.45;
}

#page-miningpool .command-steps {
  margin-top: 0.9rem;
  display: grid;
  gap: 0.5rem;
}

#page-miningpool .command-steps > div {
  border: 1px solid rgba(122,165,255,0.16);
  background: rgba(15,22,36,0.7);
  border-radius: 10px;
  padding: 0.55rem 0.6rem;
  color: #cfe0ff;
  font-size: 0.73rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

#page-miningpool .command-steps span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 20px;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: rgba(47,242,200,0.2);
  color: #64ffd8;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  font-weight: 700;
}

#page-miningpool .bottom-grid .card:first-child {
  position: relative;
}

#page-miningpool .bottom-grid .card:first-child::after {
  content: '';
  position: absolute;
  inset: auto 14px 0 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(122,165,255,.28), transparent);
}

#page-miningpool .blocks-section {
  margin-top: 0.15rem;
}

#page-miningpool #view-blocks table,
#page-miningpool #view-workers table {
  min-width: 960px;
}

/* Prevent whole-page horizontal overflow on narrower wide screens (TVs, 1366x768, etc.) */
#page-miningpool .dashboard-main,
#page-miningpool .dashboard-primary,
#page-miningpool .blocks-section,
#page-miningpool #view-blocks,
#page-miningpool #view-workers {
  min-width: 0;
}

#page-miningpool #view-blocks,
#page-miningpool #view-workers {
  overflow-x: auto;
  overflow-y: visible;
}

@media (max-width: 1600px) {
  #page-miningpool .layout {
    grid-template-columns: 190px minmax(0, 1fr) 230px;
  }
}

@media (max-width: 1150px) {
  #page-miningpool .dash-subtitle {
    max-width: 48ch;
  }
  #page-miningpool .dashboard-intel-grid {
    grid-template-columns: 1fr;
  }
  #page-miningpool .dashboard-command-panel {
    position: relative;
    top: auto;
  }
}

@media (max-width: 900px) {
  #page-miningpool .hero-actions {
    flex-wrap: wrap;
  }
  #page-miningpool .dash-subtitle {
    max-width: none;
  }
}

@media (max-width: 640px) {
  #page-miningpool .hero-btn {
    width: 100%;
    text-align: center;
  }
}


/* Coin pool welcome dashboard */
.coinpool-welcome{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  margin-bottom:1.2rem;
}
.coinpool-w-card{
  background: linear-gradient(180deg, rgba(17,19,24,.98), rgba(24,27,34,.92));
  border:1px solid rgba(91,138,245,.14);
  border-radius:16px;
  padding:1rem;
  box-shadow:var(--shadow);
}
.coinpool-w-card.coinpool-w-wide{ grid-column:span 2; }
.coinpool-w-title{
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:.45rem;
}
.coinpool-w-value{
  font-family:'JetBrains Mono', monospace;
  font-size:1.25rem;
  font-weight:700;
  color:var(--accent2);
}
.coinpool-w-sub{
  margin-top:.3rem;
  font-family:'JetBrains Mono', monospace;
  font-size:.66rem;
  color:var(--muted);
}
.coinpool-chip-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
}
.coinpool-chip{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.35rem .62rem;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(24,27,34,.85);
  font-family:'JetBrains Mono', monospace;
  font-size:.64rem;
  color:var(--text);
}
.coinpool-chip strong{ color:var(--accent); font-weight:700; }

@media (max-width: 900px){
  .coinpool-welcome{ grid-template-columns:1fr; }
  .coinpool-w-card.coinpool-w-wide{ grid-column:span 1; }
}

/* Mining dashboard: avoid clipping bottom content on small/medium screens */
#page-miningpool {
  min-height: calc(100vh - 72px);
  overflow: visible;
}

#page-miningpool .dashboard-layout {
  height: auto !important;
  min-height: calc(100vh - 72px);
}

#page-miningpool .dashboard-main {
  overflow: visible !important;
}

#page-miningpool .dash-left,
#page-miningpool .dash-right {
  overflow: visible;
}

/* ========================================================================== 
   Coin Pool Public Dashboard (Premium)
   ========================================================================== */
#page-coinpool {
  max-width: 1340px;
  margin: 0 auto;
}

.cp-hero {
  display: grid;
  grid-template-columns: 1.45fr .9fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.cp-hero-main,
.cp-hero-aside,
.cp-panel,
.cp-market-table-wrap {
  background: linear-gradient(180deg, rgba(17,19,24,.98), rgba(24,27,34,.92));
  border: 1px solid rgba(91,138,245,.16);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.cp-hero-main {
  padding: 1.3rem 1.4rem;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 0% 0%, rgba(91,138,245,.20), transparent 38%),
    radial-gradient(circle at 100% 100%, rgba(61,232,160,.14), transparent 38%),
    linear-gradient(180deg, rgba(17,19,24,.98), rgba(24,27,34,.92));
}

.cp-hero-main::after {
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 1px solid rgba(61,232,160,.25);
  opacity: .45;
}

.cp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  border: 1px solid rgba(61,232,160,.28);
  color: var(--accent2);
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .7rem;
}

.cp-title {
  font-size: 2rem;
  line-height: 1.02;
  letter-spacing: -.02em;
  margin-bottom: .55rem;
}

.cp-copy {
  color: #9fb0cc;
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  line-height: 1.8;
  max-width: 78ch;
}

.cp-actions {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

.cp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .54rem .92rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(24,27,34,.88);
  color: var(--text);
  text-decoration: none;
  font-size: .74rem;
  font-weight: 800;
  transition: all .15s;
}

.cp-btn:hover { transform: translateY(-1px); border-color: var(--accent3); }
.cp-btn-primary {
  background: linear-gradient(135deg, rgba(91,138,245,.95), rgba(61,232,160,.88));
  color: #071017;
  border-color: transparent;
}
.cp-btn-ghost { border-color: rgba(61,232,160,.35); color: var(--accent2); }

.cp-trust {
  margin-top: .95rem;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.cp-trust span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .62rem;
  border-radius: 999px;
  border: 1px solid rgba(91,138,245,.26);
  background: rgba(91,138,245,.09);
  font-family: 'JetBrains Mono', monospace;
  font-size: .6rem;
  color: var(--text);
  text-transform: uppercase;
}

.cp-hero-aside {
  padding: .9rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

.cp-brand-orb {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(13,18,32,.96), rgba(17,19,24,.96));
  padding: .8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 126px;
}

.cp-brand-orb img {
  width: 100%;
  max-width: 260px;
  object-fit: contain;
  opacity: .95;
}

.cp-side-stat {
  border: 1px solid rgba(91,138,245,.18);
  border-radius: 12px;
  background: rgba(24,27,34,.75);
  padding: .72rem .78rem;
}

.cp-side-stat label {
  display: block;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .3rem;
}

.cp-side-stat strong {
  font-family: 'JetBrains Mono', monospace;
  font-size: .96rem;
  color: var(--accent2);
  font-weight: 700;
}

.cp-side-stat small {
  display: block;
  margin-top: .2rem;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem;
}

.cp-insight-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.cp-panel {
  padding: .95rem;
}

.cp-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .65rem;
}

.cp-panel-head h3 {
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.cp-panel-head span {
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem;
  color: var(--accent2);
}

.cp-market-table-wrap {
  padding: .95rem;
}

.cp-market-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: .75rem;
}

.cp-market-title {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .03em;
}

.cp-market-sub {
  margin-top: .2rem;
  font-size: .68rem;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
}

@media (max-width: 1040px){
  .cp-hero { grid-template-columns: 1fr; }
  .cp-insight-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px){
  #page-coinpool { padding: 1rem !important; }
  .cp-title { font-size: 1.45rem; }
  .cp-market-head { align-items: flex-start; }
  .cp-copy { font-size: .68rem; }
}