* {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    --bg-primary: #16161e;
    --bg-secondary: #1c1c26;
    --bg-card: #1c1c26;
    --bg-card-hover: #242432;
    --bg-badge: #222230;
    --text-primary: #e5e5ea;
    --text-secondary: #a1a1aa;
    --text-muted: #71717a;
    --border-primary: rgba(255, 255, 255, 0.06);
    --border-card: rgba(255, 255, 255, 0.06);
    --border-hover: rgba(6, 182, 212, 0.3);
    --nav-bg: rgba(22, 22, 30, 0.95);
    --scrollbar-thumb: rgba(255, 255, 255, 0.08);
    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.12);
    --amber-bg: rgba(245, 158, 11, 0.05);
    --amber-border: rgba(245, 158, 11, 0.12);
    --amber-text: #fbbf24;
    --cyan-text: #22d3ee;
    --violet-text: #a78bfa;
    --emerald-text: #34d399;
    --selection-bg: rgba(6, 182, 212, 0.3);
    --card-shadow: 0 1px 2px rgba(0,0,0,0.3);
    --page-gradient: radial-gradient(ellipse at 50% 0%, rgba(6,182,212,0.06) 0%, transparent 60%);
}

@media (prefers-color-scheme: light) {
    body {
        --bg-primary: #f0f0f5;
        --bg-secondary: #ffffff;
        --bg-card: #ffffff;
        --bg-card-hover: #f8f8fc;
        --bg-badge: #e8e8f0;
        --text-primary: #111118;
        --text-secondary: #444455;
        --text-muted: #666677;
        --border-primary: rgba(0, 0, 0, 0.08);
        --border-card: rgba(0, 0, 0, 0.1);
        --border-hover: rgba(6, 182, 212, 0.5);
        --nav-bg: rgba(240, 240, 245, 0.95);
        --scrollbar-thumb: rgba(0, 0, 0, 0.15);
        --scrollbar-thumb-hover: rgba(0, 0, 0, 0.25);
        --amber-bg: rgba(217, 119, 6, 0.06);
        --amber-border: rgba(217, 119, 6, 0.2);
        --amber-text: #b45309;
        --cyan-text: #0e7490;
        --violet-text: #6d28d9;
        --emerald-text: #047857;
        --selection-bg: rgba(6, 182, 212, 0.15);
        --card-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
        --page-gradient: radial-gradient(ellipse at 50% 0%, rgba(6,182,212,0.05) 0%, transparent 60%);
    }
}

html, body {
    height: 100%;
}

body {
    background: var(--bg-primary);
    color: var(--text-primary);
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 600px;
    background: var(--page-gradient);
    pointer-events: none;
    z-index: 0;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 3em; /* Fallback */
    word-break: break-word;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator {
    display: inline;
}

.htmx-request.htmx-indicator {
    display: inline;
}

::selection {
    background: var(--selection-bg);
    color: inherit;
}

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

.card-hover {
    transition: all 0.2s ease;
}

.card-hover:hover {
    transform: translateY(-1px);
    border-color: var(--border-hover) !important;
    background: var(--bg-card-hover) !important;
    box-shadow: var(--card-shadow), 0 0 20px -8px rgba(6,182,212,0.12);
}