/* STREAMING_CHUNK:Importing Geist Sans & Inter typography tokens... */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800;900&family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
--color-primary: #4F46E5;
--color-primary-hover: #4338CA;
--color-navy: #0F172A;
--color-text-main: #1E293B;
--color-text-muted: #64748B;
--color-bg-body: #F8FAFC;
--color-bg-card: #FFFFFF;
--color-border: #E2E8F0;

--font-family: "Geist Sans", "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--radius-md: 12px;
--radius-full: 9999px;
--container-padding: clamp(1rem, 3.5vw, 2rem);
}

/* STREAMING_CHUNK:Applying base box-sizing and global font overrides... */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

html {
font-family: var(--font-family) !important;
font-size: 16px;
line-height: 1.6;
color: var(--color-text-main);
background-color: var(--color-bg-body);
text-rendering: optimizeLegibility;
-webkit-text-size-adjust: 100%;
}

body, button, input, select, textarea {
font-family: var(--font-family) !important;
}

body {
min-height: 100vh;
display: flex;
flex-direction: column;
}

main { flex: 1; }

a {
color: var(--color-primary);
text-decoration: none;
transition: color 0.15s ease;
}

a:hover { color: var(--color-primary-hover); }

img, svg { display: block; max-width: 100%; height: auto; }

/* STREAMING_CHUNK:Styling layout containers... */
.container {
width: 100%;
margin: 0 auto;
padding: 0 var(--container-padding);
}

.max-w-md { max-width: 800px; }
.max-w-lg { max-width: 1160px; }
.section { padding: 3rem 0; }
.bg-white { background-color: var(--color-bg-card); }
.bg-slate { background-color: var(--color-bg-body); }
.text-center { text-align: center; }

/* STREAMING_CHUNK:Styling buttons and interaction tokens... */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: inherit;
font-weight: 700;
font-size: 0.95rem;
padding: 0.75rem 1.5rem;
border-radius: var(--radius-md);
border: 1px solid transparent;
cursor: pointer;
min-height: 44px;
transition: all 0.15s ease;
}

.btn-primary { background: var(--color-primary); color: #FFF; }
.btn-primary:hover { background: var(--color-primary-hover); color: #FFF; }
.btn-secondary { background: #F1F5F9; color: var(--color-navy); border-color: var(--color-border); }
.btn-secondary:hover { background: #E2E8F0; }
.btn-lg { font-size: 1.1rem; padding: 0.95rem 2rem; }
.btn-sm { font-size: 0.82rem; padding: 0.45rem 0.85rem; min-height: 36px; }

/* STREAMING_CHUNK:Styling badges... */
.badge {
display: inline-flex;
align-items: center;
font-size: 0.76rem;
font-weight: 800;
padding: 0.25rem 0.65rem;
border-radius: var(--radius-full);
text-transform: uppercase;
letter-spacing: 0.3px;
}

.badge-gold { background: #FEF3C7; color: #B45309; }
.badge-purple { background: #EDE9FE; color: #5B21B6; }
.badge-cyan { background: #E0F2FE; color: #0369A1; }
.badge-green { background: #D1FAE5; color: #065F46; }
.badge-slate { background: #E2E8F0; color: #475569; }

/* STREAMING_CHUNK:Styling data tables... */
.table-responsive {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-bg-card);
}

.data-table {
width: 100%;
border-collapse: collapse;
text-align: left;
}

.data-table th {
background: var(--color-navy);
color: #FFF;
padding: 0.9rem 1.15rem;
font-size: 0.82rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.4px;
}

.data-table td {
padding: 0.95rem 1.15rem;
border-bottom: 1px solid var(--color-border);
font-size: 0.95rem;
}

.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover { background-color: rgba(248, 250, 252, 0.8); }

/* STREAMING_CHUNK:Styling platform selection pills... */
.platform-pill {
font-family: inherit;
font-size: 0.82rem;
font-weight: 700;
padding: 0.45rem 0.9rem;
background: #F1F5F9;
color: var(--color-text-main);
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
cursor: pointer;
transition: all 0.15s ease;
min-height: 38px;
}

.platform-pill:hover { background: #E2E8F0; }
.platform-pill.active { background: var(--color-navy); color: #FFF; border-color: var(--color-navy); }

/* STREAMING_CHUNK:Styling loading spinner... */
.spinner {
display: inline-block;
width: 36px;
height: 36px;
border: 3px solid rgba(79, 70, 229, 0.2);
border-radius: 50%;
border-top-color: var(--color-primary);
animation: spin 0.8s linear infinite;
}

@keyframes spin {
to { transform: rotate(360deg); }
}

/* STREAMING_CHUNK:Styling global footer... */
.site-footer {
background: var(--color-navy);
color: #94A3B8;
padding: 3rem 0 2rem 0;
margin-top: auto;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
margin-bottom: 2.5rem;
}

.footer-col h4 {
color: #FFF;
font-size: 0.95rem;
font-weight: 800;
margin-bottom: 1rem;
}

.footer-col ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.5rem;
}

.footer-col a { color: #94A3B8; font-size: 0.88rem; }
.footer-col a:hover { color: #FFF; }

.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding-top: 1.5rem;
font-size: 0.82rem;
text-align: center;
}