/* ============================================================
   style.css
   Each page should be a separate styling. It makes it look better.
   ============================================================ */

/* === Tokens === */
:root {
    --bg-primary:    #0f0f13;
    --bg-secondary:  #1a1a24;
    --bg-card:       #22222e;
    --bg-hover:      #2a2a38;
    --accent:        #6c63ff;
    --accent-dim:    rgba(108, 99, 255, 0.18);
    --accent-2:      #ff6b6b;
    --text-primary:  #e8e8f0;
    --text-secondary:#8888aa;
    --text-muted:    #555570;
    --border:        #2a2a3a;
    --success:       #4caf50;
    --warning:       #ff9800;
    --radius:        10px;
    --shadow:        0 4px 20px rgba(0,0,0,0.5);
    --nav-height:    58px;
    --transition:    all 0.18s ease;
}

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

html { font-size: 16px; scroll-behavior: smooth; }

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }

/* === Scrollbar === */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ============================================================
   NAVBAR — include via shared.js or copy this block
   ============================================================ */
.navbar {
    position: sticky;
    top: 0;
    z-index: 200;
    height: var(--nav-height);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 24px;
    gap: 32px;
}

.navbar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--accent);
    white-space: nowrap;
    letter-spacing: -0.3px;
}

.navbar-logo svg { flex-shrink: 0; }

.navbar-links {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
}

.nav-link {
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 7px;
}

.nav-link:hover { background: var(--bg-hover); color: var(--text-primary); }
.nav-link.active { background: var(--accent-dim); color: var(--accent); font-weight: 600; }
.nav-link.disabled { opacity: 0.38; pointer-events: none; }

.nav-badge {
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 6px;
    background: var(--accent);
    color: #fff;
    line-height: 1;
}

.navbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* === Page shell (use in every agent page) === */
.page-shell {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 24px;
}

.page-title {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin-bottom: 6px;
}

.page-subtitle {
    color: var(--text-secondary);
    font-size: 0.925rem;
    margin-bottom: 28px;
    line-height: 1.5;
}

/* === Cards === */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: var(--transition);
}

.card:hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-dim), var(--shadow); }

/* === Buttons === */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    border: none;
    transition: var(--transition);
}

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { filter: brightness(1.12); }

.btn-ghost {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-secondary);
}
.btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); }

/* === Grid helpers === */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

@media (max-width: 900px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
    .page-shell { padding: 20px 16px; }
    .navbar-links .nav-link span { display: none; }
}

/* === Utility === */
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.text-muted { color: var(--text-muted); font-size: 0.85rem; }
.text-accent { color: var(--accent); }