@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

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

:root {
    --white: #ffffff;
    --gray-50: #fafafa;
    --gray-100: #f4f4f5;
    --gray-200: #e4e4e7;
    --gray-300: #d4d4d8;
    --gray-400: #a1a1aa;
    --gray-500: #71717a;
    --gray-600: #52525b;
    --gray-700: #3f3f46;
    --gray-800: #27272a;
    --gray-900: #18181b;
    --gray-950: #09090b;
    --blue-500: #3b82f6;
    --blue-600: #2563eb;
    --indigo-500: #6366f1;
    --indigo-600: #4f46e5;
    --green-500: #22c55e;
    --red-500: #ef4444;
    --amber-500: #f59e0b;
}

body {
    background: var(--gray-950);
    color: var(--gray-300);
    font-family: 'Inter', -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: inherit; text-decoration: none; }

.mono { font-family: 'JetBrains Mono', monospace; }

/* Layout */
.container { max-width: 1024px; margin: 0 auto; padding: 0 24px; width: 100%; }

/* Nav */
nav { border-bottom: 1px solid var(--gray-800); }
nav .inner { height: 56px; display: flex; align-items: center; justify-content: space-between; }
nav .left { display: flex; align-items: center; gap: 32px; }
nav .logo { font-weight: 700; font-size: 14px; color: var(--white); letter-spacing: -0.01em; }
nav .logo span { font-weight: 500; color: var(--gray-500); margin-left: 6px; }
nav .links { display: flex; gap: 24px; }
nav .links a { font-size: 14px; color: var(--gray-500); transition: color 0.15s; }
nav .links a:hover, nav .links a.active { color: var(--white); }
nav .right { display: flex; align-items: center; gap: 20px; }
nav .right a { font-size: 14px; color: var(--gray-500); transition: color 0.15s; }
nav .right a:hover { color: var(--gray-300); }
/* Dropdown */
.dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    background: var(--gray-900);
    border: 1px solid var(--gray-800);
    border-radius: 8px;
    padding: 4px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
    z-index: 100;
}
.dropdown-menu.dropdown-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--gray-400);
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}
.dropdown-item:hover {
    background: var(--gray-800);
    color: var(--white);
}

/* Main */
main { flex: 1; padding: 16px 0; }

/* Footer */
footer { border-top: 1px solid var(--gray-800); }
footer .inner { padding: 24px 0; display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--gray-600); }
footer a { color: var(--gray-500); }
footer a:hover { color: var(--gray-400); }

/* Typography */
h1 { font-size: 20px; font-weight: 600; color: var(--white); }
h2 { font-size: 14px; font-weight: 500; color: var(--white); margin-bottom: 20px; background: rgba(59,130,246,0.06); border-left: 3px solid rgba(59,130,246,0.3); padding: 8px 12px; border-radius: 0 6px 6px 0; }
.subtitle { font-size: 14px; color: var(--gray-500); margin-top: 4px; }
.hero-number { font-size: 40px; font-weight: 700; color: var(--white); font-family: 'JetBrains Mono', monospace; letter-spacing: -0.03em; }
.hero-label { font-size: 14px; color: var(--gray-500); margin-left: 12px; }
.text-green { color: var(--green-500); }
.text-xs { font-size: 12px; }
.text-sm { font-size: 14px; }

/* Grid */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.gap-px { gap: 1px; background: var(--gray-800); border: 1px solid var(--gray-800); border-radius: 8px; overflow: hidden; }
.gap-px > div { background: var(--gray-950); padding: 16px 20px; }

/* Cards / Panels */
.panel { border: 1px solid var(--gray-800); border-radius: 8px; overflow: hidden; }
.panel-row { padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; }
.panel-row + .panel-row { border-top: 1px solid var(--gray-800); }

/* Status dot */
.dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.dot-green { background: var(--green-500); }
.dot-red { background: var(--red-500); }
.dot-amber { background: var(--amber-500); }

/* Status inline */
.status { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gray-500); }

/* Bar chart */
.bar-track { height: 4px; background: var(--gray-800); border-radius: 2px; margin-top: 4px; }
.bar-fill { height: 4px; background: var(--gray-600); border-radius: 2px; }

/* Stat cell */
.stat-value { font-size: 24px; font-weight: 600; color: var(--white); font-family: 'JetBrains Mono', monospace; }
.stat-label { font-size: 12px; color: var(--gray-500); margin-top: 4px; }

/* Spacing */
.section { margin-bottom: 48px; }
.mb-1 { margin-bottom: 4px; }

/* Ticker */
@keyframes ticker-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.ticker-track {
    display: flex;
    gap: 0;
    white-space: nowrap;
    animation: ticker-scroll 30s linear infinite;
    font-size: 13px;
    color: var(--gray-400);
}
.ticker-item { flex-shrink: 0; }
.ticker-sep { flex-shrink: 0; margin: 0 16px; color: var(--gray-700); }

/* Mobile menu toggle */
.mobile-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--gray-400);
    cursor: pointer;
    padding: 4px;
}
.mobile-menu {
    display: none;
}
.mobile-menu.mobile-open {
    display: block;
    border-bottom: 1px solid var(--gray-800);
    padding: 12px 0;
}
.mobile-menu a,
.mobile-menu button {
    display: block;
    padding: 8px 0;
    font-size: 14px;
    color: var(--gray-500);
    transition: color 0.15s;
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    width: 100%;
}
.mobile-menu a:hover,
.mobile-menu button:hover { color: var(--white); }
.mobile-menu a.active { color: var(--white); }
.mobile-menu .mobile-divider {
    height: 1px;
    background: var(--gray-800);
    margin: 8px 0;
}

/* Responsive */
@media (max-width: 768px) {
    .container { padding: 0 16px; }
    .grid-3 { grid-template-columns: 1fr; }
    .grid-2 { grid-template-columns: 1fr; gap: 24px; }
    .hero-number { font-size: 24px; }
    .hero-label { display: block; margin-left: 0; margin-top: 4px; font-size: 13px; }
    nav .links { display: none; }
    nav .right { display: none; }
    .mobile-toggle { display: block; }
    .section { margin-bottom: 32px; }
    .stat-value { font-size: 20px; }
    footer .inner { flex-direction: column; gap: 8px; text-align: center; }

    /* About page grids */
    [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
    [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2,1fr) !important; }
    [style*="grid-template-columns:repeat(2,1fr)"][style*="gap:16px"] { grid-template-columns: 1fr !important; }

    /* Apply form */
    [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }

    /* Analysis hero */
    [style*="min-height:180px"] { min-height: 140px !important; padding: 24px 16px !important; }
    [style*="min-height:220px"] { min-height: 160px !important; padding: 32px 16px !important; }

    /* Tables */
    table { font-size: 12px !important; }
    .panel-row { padding: 10px 12px; }

    /* Recently Added pagination */
    #recent-panel .panel-row { padding: 10px 12px; }
}

@media (max-width: 480px) {
    .hero-number { font-size: 20px; }
    .grid-3.gap-px > div { padding: 12px 14px; }
    .stat-value { font-size: 18px; }
    [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: 1fr !important; }
    [style*="font-size:28px"] { font-size: 22px !important; }
}