/* ===== SlabPulse Base Layout ===== */

body {
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background-color: #05060a;
    color: #f5f5f5;
}

/* Centered content wrapper (if not already using one) */
.page-content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 16px 48px;
}

/* ===== Header & Branding ===== */

.site-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: radial-gradient(circle at top left, #20263a 0, #05060a 60%);
}

.site-header .brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.brand-mark {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #f5f5f5;
    background: linear-gradient(135deg, #141726, #262f4a);
}

.brand-name {
    font-size: 18px;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff;
}

.brand-subtitle {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

/* ===== Navigation ===== */

.site-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}

.site-nav a {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.70);
    text-decoration: none;
    border-radius: 999px;
    border: 1px solid transparent;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.site-nav a:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.site-nav a.nav-active {
    background: rgba(99, 179, 237, 0.12);
    border-color: rgba(99, 179, 237, 0.65);
    color: #e4f0ff;
}

/* ===== Page Headings & Text ===== */

.page-header h1 {
    margin: 0 0 8px;
    font-size: 26px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #ffffff;
}

.page-intro {
    margin: 0 0 12px;
    font-size: 14px;
    color: rgba(245, 245, 245, 0.80);
}

.page-intro small {
    font-size: 12px;
    color: rgba(245, 245, 245, 0.65);
}

/* Status / error message under heading */
.status-message {
    min-height: 18px;
    font-size: 12px;
    color: #ffb4b4;
}

/* ===== Data Table ===== */

.table-section {
    margin-top: 20px;
    background: radial-gradient(circle at top left, #151a26 0, #070812 55%);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 16px 16px 12px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    table-layout: fixed;
}

.data-table thead {
    background: rgba(255, 255, 255, 0.02);
}

.data-table th,
.data-table td {
    padding: 9px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.data-table th {
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

.data-table tbody tr {
    transition: background 0.12s ease, transform 0.05s ease;
}

.data-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.01);
}

.data-table tbody tr:hover {
    background: rgba(99, 179, 237, 0.12);
    cursor: pointer;
    transform: translateY(-1px);
}

.data-table tbody td {
    color: rgba(245, 245, 245, 0.90);
}

/* “No data / loading” row */
.data-table tbody tr td[colspan] {
    text-align: center;
    color: rgba(245, 245, 245, 0.72);
}

/* ===== Footnote ===== */

.table-footnote {
    margin-top: 8px;
    font-size: 11px;
    color: rgba(245, 245, 245, 0.55);
}

/* ===== Small-screen tweaks ===== */

@media (max-width: 768px) {
    .site-header {
        padding: 14px 16px;
    }

    .page-content {
        padding: 20px 12px 32px;
    }

    .data-table {
        font-size: 12px;
    }

    .data-table th,
    .data-table td {
        padding: 7px 6px;
    }
}

/* ===== SP30 PAGE – FANCY DASHBOARD, NO WEDGE ===== */

/* Scope everything to SP30 so we don't affect other pages */
body.sp30-page {
    background: #020617;
    color: #e5e7eb;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Center content and remove any old pseudo-backgrounds */
body.sp30-page .page-content {
    max-width: 1120px;
    margin: 24px auto 48px;
    padding: 0 16px;
    position: relative;
}

body.sp30-page .page-content::before,
body.sp30-page .page-content::after {
    content: none !important;
}

/* HERO CARD */

.sp30-hero-card {
    margin-top: 16px;
    padding: 20px 24px;
    border-radius: 20px;
    border: 1px solid rgba(148,163,184,0.35);
    background:
        radial-gradient(circle at top left, rgba(56,189,248,0.22), transparent 55%),
        radial-gradient(circle at bottom right, rgba(168,85,247,0.22), transparent 55%),
        #020617;
    box-shadow: 0 22px 60px rgba(15,23,42,0.9);
    display: flex;
    justify-content: space-between;
    gap: 32px;
    align-items: flex-end;
}

.sp30-hero-left h1 {
    margin: 0 0 4px 0;
    font-size: 24px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.sp30-hero-intro {
    margin: 0 0 10px 0;
    font-size: 13px;
    color: rgba(209,213,219,0.9);
}

.sp30-hero-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.sp30-chip {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    border: 1px solid rgba(148,163,184,0.5);
    background: rgba(15,23,42,0.95);
    color: rgba(226,232,240,0.95);
}

.sp30-chip-live {
    border-color: rgba(45,212,191,0.9);
    color: rgba(45,212,191,0.95);
}

.sp30-status {
    margin-top: 6px;
    font-size: 12px;
    color: #f97373;
}

.sp30-hero-right {
    text-align: right;
    min-width: 220px;
}

.sp30-metric-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(148,163,184,0.9);
}

.sp30-metric-value {
    margin-top: 4px;
    font-size: 34px;
    font-weight: 700;
}

.sp30-metric-sub {
    margin-top: 4px;
    font-size: 12px;
    color: rgba(209,213,219,0.9);
}

/* LAYOUT ROW + CARDS */

.sp30-shell .sp30-row {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.sp30-card {
    border-radius: 18px;
    border: 1px solid rgba(55,65,81,0.9);
    background: radial-gradient(circle at top, #020617, #020617 60%, #020617);
    padding: 14px 16px 16px;
    box-shadow: 0 16px 42px rgba(15,23,42,0.85);
}

.sp30-chart-card {
    flex: 1 1 320px;
    max-width: 420px;
}

.sp30-movers-card {
    flex: 1 1 320px;
}

.sp30-card-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
}

.sp30-card-header h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.sp30-card-note {
    font-size: 11px;
    color: rgba(156,163,175,0.9);
}

/* SPARKLINE */

.sp30-sparkline {
    width: 100%;
    height: 80px;
    display: block;
}

.sp30-spark-axis {
    stroke: rgba(148,163,184,0.4);
    stroke-width: 1;
}

.sp30-spark-path {
    stroke: url(#sp30-line-grad);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.sp30-chart-range {
    margin-top: 4px;
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: rgba(156,163,175,0.95);
}

/* MOVERS */

.sp30-movers-columns {
    display: flex;
    gap: 16px;
}

.sp30-movers-columns h3 {
    margin: 0 0 6px 0;
    font-size: 13px;
    font-weight: 600;
}

.sp30-movers-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 12px;
}

.sp30-mover-item {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    border-bottom: 1px solid rgba(15,23,42,0.9);
}

.sp30-mover-item:last-child {
    border-bottom: none;
}

.sp30-movers-empty {
    font-size: 12px;
    color: rgba(156,163,175,0.95);
}

.sp30-mover-item a {
    text-decoration: none;
    color: #e5e7eb;
}

.sp30-mover-item a:hover {
    text-decoration: underline;
}

.sp30-mover-change {
    min-width: 70px;
    text-align: right;
}

.sp30-mover-change.up {
    color: #22c55e;
}

.sp30-mover-change.down {
    color: #fb7185;
}

/* TABLE */

.sp30-table-card {
    margin-top: 20px;
}

.table-scroll {
    overflow-x: auto;
}

.sp30-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.sp30-table th,
.sp30-table td {
    padding: 7px 10px;
    border-bottom: 1px solid rgba(31,41,55,0.95);
}

.sp30-table th {
    background: radial-gradient(circle at top, #020617, #020617 60%, #020617);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(148,163,184,0.95);
}

.sp30-table tr:nth-child(even) td {
    background: rgba(15,23,42,0.88);
}

.sp30-table tr:nth-child(odd) td {
    background: rgba(15,23,42,0.96);
}

.sp30-table a {
    color: #e5e7eb;
    text-decoration: none;
}

.sp30-table a:hover {
    text-decoration: underline;
}

.table-footnote {
    margin-top: 8px;
    font-size: 11px;
    color: rgba(148,163,184,0.95);
}


/* Global: remove any old angled wedges on page-content */
.page-content::before,
.page-content::after {
    content: none !important;
}

/* ===== SLAB UNIVERSE – MATCH SP30 LOOK ===== */

.universe-shell {
    max-width: 1120px;
    margin: 24px auto 48px;
    padding: 0 16px;
}

/* Hero card */
.universe-hero-card {
    padding: 20px 24px;
    border-radius: 20px;
    border: 1px solid rgba(148,163,184,0.35);
    background:
        radial-gradient(circle at top left, rgba(56,189,248,0.18), transparent 55%),
        radial-gradient(circle at bottom right, rgba(248,250,252,0.05), transparent 55%),
        #020617;
    box-shadow: 0 22px 60px rgba(15,23,42,0.9);
    display: flex;
    justify-content: space-between;
    gap: 32px;
    align-items: flex-end;
}

.universe-hero-left h1 {
    margin: 0 0 4px 0;
    font-size: 24px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.universe-hero-intro {
    margin: 0 0 10px 0;
    font-size: 13px;
    color: rgba(209,213,219,0.9);
}

.universe-hero-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.universe-chip {
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    border: 1px solid rgba(148,163,184,0.5);
    background: rgba(15,23,42,0.95);
    color: rgba(226,232,240,0.95);
}

.universe-chip-live {
    border-color: rgba(56,189,248,0.9);
    color: rgba(56,189,248,0.95);
}

.universe-status {
    margin-top: 6px;
    font-size: 12px;
    color: #f97373;
}

.universe-hero-right {
    text-align: right;
    min-width: 260px;
}

.universe-metric-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(148,163,184,0.9);
}

.universe-metric-value {
    margin-top: 4px;
    font-size: 32px;
    font-weight: 700;
}

.universe-metric-sub {
    margin-top: 4px;
    font-size: 12px;
    color: rgba(209,213,219,0.9);
}

/* Universe table card */
.universe-card {
    border-radius: 18px;
    border: 1px solid rgba(55,65,81,0.9);
    background: radial-gradient(circle at top, #020617, #020617 60%, #020617);
    padding: 14px 16px 16px;
    box-shadow: 0 16px 42px rgba(15,23,42,0.85);
    margin-top: 20px;
}

.universe-card-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
}

.universe-card-header h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.universe-card-note {
    font-size: 11px;
    color: rgba(156,163,175,0.9);
}

/* Table */
.universe-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.universe-table th,
.universe-table td {
    padding: 7px 10px;
    border-bottom: 1px solid rgba(31,41,55,0.95);
}

.universe-table th {
    background: radial-gradient(circle at top, #020617, #020617 60%, #020617);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(148,163,184,0.95);
}

.universe-table tr:nth-child(even) td {
    background: rgba(15,23,42,0.88);
}

.universe-table tr:nth-child(odd) td {
    background: rgba(15,23,42,0.96);
}

/* Clickable rows */
.universe-row {
    cursor: pointer;
    transition: background-color 0.12s ease, transform 0.06s ease;
}

.universe-row:hover td {
    background: rgba(30,64,175,0.75);
}


/* ===== SLAB PAGE ===== */

body.slab-page {
    background: #020617;
    color: #e5e7eb;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.slab-shell {
    max-width: 1120px;
    margin: 24px auto 48px;
    padding: 0 16px;
}

/* HERO CARD */

.slab-hero-card {
    padding: 20px 24px;
    border-radius: 20px;
    border: 1px solid rgba(148,163,184,0.35);
    background:
        radial-gradient(circle at top left, rgba(56,189,248,0.20), transparent 55%),
        radial-gradient(circle at bottom right, rgba(168,85,247,0.18), transparent 55%),
        #020617;
    box-shadow: 0 22px 60px rgba(15,23,42,0.9);
    display: flex;
    justify-content: space-between;
    gap: 32px;
    align-items: flex-end;
}

.slab-hero-left h1 {
    margin: 0 0 4px 0;
    font-size: 24px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.slab-hero-left .slab-code {
    margin: 4px 0 8px;
    font-size: 13px;
    color: rgba(209,213,219,0.85);
}

.slab-chip {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    border: 1px solid rgba(148,163,184,0.5);
    background: rgba(15,23,42,0.95);
    color: rgba(226,232,240,0.95);
}

.slab-chip-live {
    border-color: rgba(45,212,191,0.9);
    color: rgba(45,212,191,0.95);
}

/* RIGHT SECTION */

.slab-metric-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(148,163,184,0.9);
}

.slab-metric-value {
    margin-top: 4px;
    font-size: 34px;
    font-weight: 700;
}

.slab-metric-sub {
    margin-top: 6px;
    font-size: 12px;
    color: rgba(209,213,219,0.9);
}

/* CARDS */

.slab-card {
    border-radius: 18px;
    border: 1px solid rgba(55,65,81,0.9);
    background: #020617;
    padding: 14px 16px 16px;
    box-shadow: 0 16px 42px rgba(15,23,42,0.85);
    margin-top: 20px;
}

.slab-card-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.slab-card-header h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.slab-card-note {
    font-size: 11px;
    color: rgba(156,163,175,0.9);
}

/* SPARKLINE */

.slab-sparkline {
    width: 100%;
    height: 80px;
}

.slab-chart-range {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: 11px;
    color: rgba(148,163,184,0.95);
}

/* TABLE */

.slab-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.slab-table td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(30,41,59,0.95);
}

.slab-table tr:nth-child(even) td {
    background: rgba(15,23,42,0.88);
}

.slab-table tr:nth-child(odd) td {
    background: rgba(15,23,42,0.96);
}