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

body {
    font-family: var(--font-family);
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

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

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-lg) 80px;
}

/* Hero section */
.hero {
    position: relative;
    padding: 40px var(--space-lg) 32px;
    text-align: center;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, var(--accent-glow), transparent 70%);
    pointer-events: none;
}
.hero h1 {
    font-size: var(--fs-2xl);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: var(--space-sm);
}
.hero-sub {
    color: var(--text-dim);
    font-size: var(--fs-md);
}
.hero-actions {
    display: flex;
    justify-content: center;
}

/* Section header */
.section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--space-md);
}
.section-title { font-size: var(--fs-lg); font-weight: 700; }
.section-count {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 2px 10px;
    font-size: .78rem;
    color: var(--text-dim);
    font-weight: 600;
}
.header-actions { margin-left: auto; display: flex; gap: var(--space-sm); }

/* Loading / skeleton */
.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 60px 20px;
    color: var(--text-dim);
}
.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.sk {
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 50%, var(--surface-2) 75%);
    background-size: 800px 100%;
    animation: shimmer 1.5s infinite linear;
    border-radius: var(--radius-sm);
}

/* Access denied */
.access-denied {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 80px 20px;
    text-align: center;
}
.access-denied-icon { font-size: 2.5rem; }
.access-denied h2 { font-size: 1.2rem; }
.access-denied p { color: var(--text-dim); font-size: var(--fs-md); }

/* Action buttons */
.action-btn {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}
.action-btn:hover { background: var(--surface-2); color: var(--text); }
.action-btn.delete:hover { color: var(--red); background: rgba(225,115,85,.12); }
.action-btn svg { width: 16px; height: 16px; }
.actions-cell { display: flex; gap: 4px; align-items: center; }