/**
 * Source Browser Styles
 * Extracted from kildekode.php for better maintainability
 * Uses CSS variables from styles.css
 */

/* ==========================================================================
   PAGE LAYOUT
   ========================================================================== */

.source-page {
    padding-top: 0;
    height: calc(100vh - 44px);
    background: linear-gradient(180deg, #050508 0%, #0a0a12 30%, #060610 70%, #030306 100%);
    overflow: hidden;
    position: relative;
    z-index: 1;
}

/* Hide scroll progress bar on kildekode — it's an SPA, not a scroll page */
.page-kildekode .progress-bar { display: none !important; }

/* ==========================================================================
   IDE CONTAINER
   ========================================================================== */

.source-ide {
    background: linear-gradient(135deg, rgba(2, 2, 8, 0.95) 0%, rgba(0, 15, 20, 0.9) 50%, rgba(2, 2, 8, 0.95) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 255, 249, 0.3);
    border-radius: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow:
        0 0 60px rgba(0, 255, 249, 0.1),
        0 0 120px rgba(0, 255, 249, 0.03),
        inset 0 1px 0 rgba(0, 255, 249, 0.1);
    position: relative;
}

/* Animated top border glow */
.source-ide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--neon-cyan) 15%,
        var(--neon-magenta) 35%,
        var(--neon-green) 55%,
        var(--neon-cyan) 85%,
        transparent 100%
    );
    opacity: 0.8;
    animation: borderPulse 4s ease-in-out infinite;
    z-index: 5;
}

@keyframes borderPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

.ide-view {
    flex: 1;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

/* Active view - shown with consistent layout */
.ide-view.active {
    display: flex;
}

/* Content area within view - scrollable, distinct from nav */
.source-content,
.activity-feed,
.commits-list,
.tags-grid-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(0, 255, 249, 0.08);
}

.view-title {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--neon-cyan);
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(0, 255, 249, 0.4);
}

/* Screen reader only text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.source-widget {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border-cyan);
    border-radius: 8px;
    overflow: hidden;
    max-width: var(--max-content);
}

/* ==========================================================================
   TAB BAR
   ========================================================================== */

.source-tab-bar {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0;
    background: rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(0, 255, 249, 0.1);
    min-height: 36px; /* Consistent height even when hidden */
    position: relative;
}

/* Scrollable tabs container */
.source-tab-bar .tabs-scroll-container {
    display: flex;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    flex: 1;
    min-width: 0; /* Allow shrinking */
}

.source-tab-bar .tabs-scroll-container::-webkit-scrollbar {
    display: none;
}

.source-tab-bar:empty,
.source-tab-bar[style*="display: none"] + .ide-view {
    /* No extra margin when tabs hidden */
}

.source-tab-bar::-webkit-scrollbar {
    display: none;
}

.source-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(0, 255, 249, 0.15);
    border-bottom: 2px solid rgba(0, 255, 249, 0.2);
    border-radius: 6px 6px 0 0;
    margin-right: 2px;
    color: #888;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    max-width: 200px;
    position: relative;
    will-change: transform, background, border-color;
}

.source-tab:hover {
    background: rgba(0, 255, 249, 0.12);
    border-color: rgba(0, 255, 249, 0.3);
    color: #ccc;
    transform: translateY(-1px);
}

.source-tab.active {
    background: linear-gradient(180deg, rgba(0, 255, 249, 0.15) 0%, rgba(0, 255, 249, 0.08) 100%);
    color: var(--neon-cyan);
    border: 1px solid var(--neon-cyan);
    border-bottom: 3px solid var(--neon-cyan);
    box-shadow: 0 0 15px rgba(0, 255, 249, 0.3), inset 0 1px 0 rgba(0, 255, 249, 0.2);
    transform: translateY(0);
}

.source-tab.active::before {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--neon-cyan) 50%,
        transparent 100%
    );
    box-shadow: 0 0 15px var(--neon-cyan);
    animation: tabGlowPulse 2s ease-in-out infinite;
}

@keyframes tabGlowPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.source-tab.terminal-tab.active::before {
    background: linear-gradient(90deg, transparent 0%, var(--neon-magenta) 50%, transparent 100%);
    box-shadow: 0 0 15px var(--neon-magenta);
}

.source-tab.readme-tab.active::before {
    background: linear-gradient(90deg, transparent 0%, #ffd700 50%, transparent 100%);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}

/* README tab - no width limit, special styling */
.source-tab.readme-tab {
    max-width: none;
    flex-shrink: 0;
    border-left: 2px solid rgba(0, 255, 249, 0.3);
    margin-left: 8px;
}

.source-tab.readme-tab .tab-name {
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--neon-cyan);
}

.source-tab.readme-tab.active {
    background: linear-gradient(180deg, rgba(0, 255, 249, 0.2) 0%, rgba(0, 255, 249, 0.12) 100%);
    border-bottom: 3px solid var(--neon-cyan);
    box-shadow: 0 0 20px rgba(0, 255, 249, 0.4);
}

.tab-icon {
    font-size: 1rem;
    opacity: 1;
    filter: drop-shadow(0 0 2px currentColor);
}

.source-tab.active .tab-icon {
    filter: drop-shadow(0 0 6px var(--neon-cyan));
}

.tab-name {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
    font-weight: 500;
}

.source-tab.active .tab-name {
    font-weight: 600;
    text-shadow: 0 0 8px rgba(0, 255, 249, 0.5);
}

/* Editable tab name (active tab) */
.source-tab.active .tab-name[contenteditable="true"] {
    cursor: text;
    outline: none;
    border-radius: 2px;
    transition: background var(--transition-fast);
}

.source-tab.active .tab-name[contenteditable="true"]:hover {
    background: rgba(0, 255, 249, 0.1);
}

.source-tab.active .tab-name[contenteditable="true"]:focus {
    background: rgba(0, 255, 249, 0.2);
    box-shadow: 0 0 0 1px var(--neon-cyan);
}

.tab-close {
    background: none;
    border: none;
    color: var(--text-subtle);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 0.2rem;
    margin-left: auto;
    opacity: 0;
    transition: all var(--transition-fast);
}

.source-tab:hover .tab-close,
.source-tab.active .tab-close {
    opacity: 1;
}

.tab-close:hover {
    color: var(--error-text);
}

.tab-add {
    background: none;
    border: none;
    color: var(--text-subtle);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0.5rem 1rem;
    transition: all var(--transition-fast);
}

.tab-add:hover {
    color: var(--neon-cyan);
    background: rgba(0, 255, 249, 0.05);
}

/* Close all tabs button - ALWAYS visible, sticky at right */
.tab-close-all {
    background: linear-gradient(135deg, rgba(255, 100, 100, 0.08) 0%, rgba(0, 0, 0, 0.6) 100%);
    border: 1px solid rgba(255, 100, 100, 0.15);
    border-left: 2px solid rgba(255, 100, 100, 0.4);
    color: var(--text-subtle);
    cursor: pointer;
    font-size: 0.7rem;
    font-family: var(--font-mono);
    padding: 0.35rem 0.75rem;
    border-radius: 2px;
    transition: all 0.15s ease-out;
    white-space: nowrap;
    flex-shrink: 0; /* Never shrink */
    position: sticky;
    right: 0;
    z-index: 10;
    /* Gradient fade effect from left edge */
    box-shadow: -10px 0 15px rgba(0, 0, 0, 0.5);
}

.tab-close-all:hover {
    background: linear-gradient(135deg, rgba(255, 100, 100, 0.2) 0%, rgba(255, 100, 100, 0.08) 100%);
    border-color: rgba(255, 100, 100, 0.4);
    color: #ff6b6b;
    box-shadow: 0 0 10px rgba(255, 100, 100, 0.15);
}

/* ==========================================================================
   TOOLBAR & NAVIGATION
   ========================================================================== */

.source-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: linear-gradient(180deg, rgba(0, 255, 249, 0.1) 0%, rgba(0, 0, 0, 0.4) 100%);
    border-bottom: 1px solid rgba(0, 255, 249, 0.3);
    flex-wrap: wrap;
    gap: 0.5rem;
    position: relative;
    overflow: hidden;
}

.source-toolbar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(0, 255, 249, 0.6) 50%, transparent 100%);
    animation: borderPulse 4s ease-in-out infinite;
}

.source-breadcrumb {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.source-breadcrumb a {
    color: var(--neon-cyan);
    text-decoration: none;
    text-shadow: 0 0 8px rgba(0, 255, 249, 0.3);
    transition: all 0.2s ease;
}

.source-breadcrumb a:hover {
    text-decoration: none;
    color: #fff;
    text-shadow: 0 0 12px rgba(0, 255, 249, 0.6);
}

.source-breadcrumb .bc-sep {
    color: rgba(0, 255, 249, 0.4);
    margin: 0 0.25rem;
}

.source-breadcrumb .bc-current {
    color: #fff;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
}

.source-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ==========================================================================
   BUTTONS - Futuristic Holographic Style
   ========================================================================== */

.src-btn {
    background: linear-gradient(135deg, rgba(0, 255, 249, 0.1) 0%, rgba(0, 255, 249, 0.05) 100%);
    border: 1px solid rgba(0, 255, 249, 0.25);
    color: var(--neon-cyan);
    padding: 0.45rem 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: all 0.2s ease;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.src-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 249, 0.2), transparent);
    transition: left 0.4s ease;
}

.src-btn:hover {
    background: linear-gradient(135deg, rgba(0, 255, 249, 0.2) 0%, rgba(0, 255, 249, 0.1) 100%);
    border-color: rgba(0, 255, 249, 0.4);
    box-shadow: 0 0 15px rgba(0, 255, 249, 0.2);
    transform: translateY(-1px);
}

.src-btn:hover::before {
    left: 100%;
}

.src-btn:active {
    transform: translateY(0);
    box-shadow: 0 0 8px rgba(0, 255, 249, 0.3);
}

.src-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.src-btn-primary {
    background: linear-gradient(135deg, rgba(57, 255, 20, 0.2) 0%, rgba(57, 255, 20, 0.08) 100%);
    border-color: rgba(57, 255, 20, 0.35);
    color: var(--neon-green);
}

.src-btn-primary:hover {
    background: linear-gradient(135deg, rgba(57, 255, 20, 0.3) 0%, rgba(57, 255, 20, 0.15) 100%);
    border-color: rgba(57, 255, 20, 0.5);
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.25);
}

.src-btn-small {
    padding: 0.25rem 0.55rem;
    font-size: 0.72rem;
}

.src-btn-active {
    background: linear-gradient(135deg, rgba(0, 255, 249, 0.3) 0%, rgba(0, 255, 249, 0.15) 100%);
    border-color: var(--neon-cyan);
    box-shadow: 0 0 15px rgba(0, 255, 249, 0.35), inset 0 0 10px rgba(0, 255, 249, 0.1);
}

/* Keyboard shortcut hints */
.kbd {
    display: inline-block;
    padding: 0.15rem 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-subtle);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    border-radius: 3px;
    margin-left: 0.5rem;
}

/* ==========================================================================
   FILE TAGS
   ========================================================================== */

.source-file-tags {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid var(--border-subtle);
    flex-wrap: wrap;
}

.file-tags-label {
    color: var(--text-faint);
    font-size: 0.7rem;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Futuristic file tag - cyber style matching .src-hashtag */
.file-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--neon-cyan);
    font-size: 0.7rem;
    text-decoration: none;
    padding: 0.2rem 0.5rem;
    background: linear-gradient(135deg, rgba(0, 255, 249, 0.08) 0%, rgba(0, 255, 249, 0.02) 100%);
    border: 1px solid rgba(0, 255, 249, 0.2);
    border-left: 2px solid var(--neon-cyan);
    border-radius: 2px;
    font-family: var(--font-mono);
    transition: all 0.15s ease-out;
}

.file-tag:hover {
    background: linear-gradient(135deg, rgba(0, 255, 249, 0.18) 0%, rgba(0, 255, 249, 0.08) 100%);
    border-color: var(--neon-cyan);
    color: #fff;
    box-shadow: 0 0 10px rgba(0, 255, 249, 0.2);
    transform: translateY(-1px);
}

.file-tag span {
    font-size: 0.6rem;
    color: var(--neon-green);
    background: rgba(0, 0, 0, 0.3);
    padding: 0.1rem 0.25rem;
    border-radius: 2px;
}

/* ==========================================================================
   DIRECTORY TABLE
   ========================================================================== */

.src-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    table-layout: fixed;
}

/* Force column widths */
.src-table th:nth-child(1),
.src-table td:nth-child(1) {
    width: 40% !important;
}

.src-table th:nth-child(2),
.src-table td:nth-child(2) {
    width: 45% !important;
}

.src-table th:nth-child(3),
.src-table td:nth-child(3) {
    width: 15% !important;
}

.src-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    background: linear-gradient(180deg, rgba(0, 255, 249, 0.1) 0%, rgba(0, 255, 249, 0.04) 100%);
    border-bottom: 1px solid rgba(0, 255, 249, 0.2);
    color: var(--text-secondary);
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05em;
    position: relative;
}

.src-table th::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 249, 0.3), transparent);
}

.src-table th.sortable {
    cursor: pointer;
    transition: all 0.15s ease;
}

.src-table th.sortable:hover {
    background: linear-gradient(180deg, rgba(0, 255, 249, 0.15) 0%, rgba(0, 255, 249, 0.06) 100%);
    color: var(--neon-cyan);
}

.sort-icon {
    color: var(--text-ghost);
    font-size: 0.7rem;
    transition: color 0.15s ease;
}

.sort-icon.active {
    color: var(--neon-cyan);
    text-shadow: 0 0 8px rgba(0, 255, 249, 0.5);
}

.src-row {
    cursor: pointer;
    position: relative;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.src-row::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%) scaleX(0);
    width: 3px;
    height: 80%;
    background: linear-gradient(180deg, var(--neon-cyan), var(--neon-green));
    box-shadow: 0 0 10px var(--neon-cyan);
    transition: transform 0.2s ease;
    transform-origin: left;
}

.src-row:hover::before {
    transform: translateY(-50%) scaleX(1);
}

.src-row:hover {
    background: linear-gradient(90deg, rgba(0, 255, 249, 0.1) 0%, rgba(0, 255, 249, 0.02) 60%, transparent 100%);
    box-shadow: inset 2px 0 0 var(--neon-cyan);
}

.src-row td {
    padding: 0.6rem 1rem;
    border-bottom: 1px solid rgba(0, 255, 249, 0.04);
    transition: all 0.2s ease;
}

.src-col-name {
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.src-row:hover .src-col-name {
    color: #fff;
    text-shadow: 0 0 10px rgba(0, 255, 249, 0.5);
    transform: translateX(4px);
}

.src-row-dir .src-col-name {
    color: var(--neon-cyan);
    text-shadow: 0 0 5px rgba(0, 255, 249, 0.15);
}

.src-row-dir:hover .src-col-name {
    text-shadow: 0 0 12px rgba(0, 255, 249, 0.5);
}

.src-row-dir:hover .src-col-name {
    text-shadow: 0 0 10px rgba(0, 255, 249, 0.4);
}

.src-col-commit {
    color: var(--text-subtle);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.src-col-commit .src-commit-hash {
    color: var(--neon-green);
    background: rgba(57, 255, 20, 0.1);
    border: 1px solid rgba(57, 255, 20, 0.2);
    padding: 0.1rem 0.3rem;
    border-radius: 2px;
    font-size: 0.7rem;
    margin-right: 0.5rem;
}

.src-col-time {
    color: var(--text-faint);
    text-align: right;
}

.src-icon {
    margin-right: 0.5rem;
    transition: transform 0.2s ease;
    display: inline-block;
}

.src-row:hover .src-icon {
    transform: scale(1.2) rotate(5deg);
}

/* ==========================================================================
   DIRECTORY COMMIT HEADER (GitHub-style)
   ========================================================================== */

.dir-commit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: linear-gradient(180deg, rgba(0, 255, 249, 0.06) 0%, rgba(0, 0, 0, 0.2) 100%);
    border-bottom: 1px solid rgba(0, 255, 249, 0.15);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.commit-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}

.commit-author {
    color: var(--neon-cyan);
    font-weight: 600;
    text-shadow: 0 0 8px rgba(0, 255, 249, 0.3);
}

.commit-hash-link {
    color: var(--neon-green);
    background: rgba(57, 255, 20, 0.1);
    border: 1px solid rgba(57, 255, 20, 0.2);
    padding: 0.15rem 0.4rem;
    border-radius: 2px;
    font-size: 0.75rem;
}

.commit-message {
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 400px;
}

.commit-tags-inline {
    display: flex;
    gap: 0.25rem;
}

.commit-tags-inline .commit-tag {
    background: rgba(0, 255, 249, 0.1);
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
    font-size: 0.7rem;
}

.commit-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.commit-time {
    color: var(--text-subtle);
    font-size: 0.8rem;
}

.history-link {
    color: var(--neon-cyan);
    text-decoration: none;
    font-size: 0.8rem;
    white-space: nowrap;
}

.history-link:hover {
    text-decoration: underline;
}

/* ==========================================================================
   FILE HEADER & CONTENT - Futuristic Terminal Style
   ========================================================================== */

.src-file-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(0, 255, 249, 0.15);
    background: linear-gradient(180deg,
        rgba(0, 255, 249, 0.06) 0%,
        rgba(0, 0, 0, 0.4) 100%
    );
    flex-wrap: wrap;
    position: relative;
}

.src-file-header::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 5%;
    right: 5%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 249, 0.4), transparent);
}

.src-file-info {
    flex: 1;
    min-width: 200px;
}

.src-file-name {
    color: var(--neon-cyan);
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 1rem;
    text-shadow: 0 0 15px rgba(0, 255, 249, 0.3);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.src-file-purpose {
    color: #888;
    font-size: 0.9em;
    font-style: italic;
    font-weight: 400;
}

.src-file-meta {
    color: var(--text-subtle);
    font-size: 0.75rem;
    font-family: var(--font-mono);
    background: rgba(0, 0, 0, 0.3);
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.src-file-actions {
    margin-left: auto;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.src-file-content {
    max-height: 600px;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--neon-cyan) transparent;
}

.src-file-content pre {
    margin: 0;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.3);
}

.src-file-content code {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    line-height: 1.6;
}

/* Line highlighting */
.line-highlight {
    background: rgba(0, 255, 249, 0.15);
    display: block;
}

/* ==========================================================================
   HASHTAG CLOUD & FILE REFERENCES
   ========================================================================== */

/* Futuristic hashtag cloud container */
.src-hashtag-cloud {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1rem;
    background: linear-gradient(135deg, rgba(0, 255, 249, 0.03) 0%, transparent 100%);
    border-bottom: 1px solid rgba(0, 255, 249, 0.1);
    border-left: 2px solid rgba(0, 255, 249, 0.3);
}

.cloud-label {
    color: var(--text-subtle);
    font-size: 0.75rem;
    font-family: var(--font-mono);
    margin-right: 0.3rem;
}

/* Futuristic hashtag design - sharp cyber aesthetic */
.src-hashtag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: linear-gradient(135deg, rgba(0, 255, 249, 0.08) 0%, rgba(0, 255, 249, 0.02) 100%);
    border: 1px solid rgba(0, 255, 249, 0.2);
    border-left: 2px solid var(--neon-cyan);
    color: var(--neon-cyan);
    padding: 0.25rem 0.6rem;
    border-radius: 2px;
    font-size: 0.75rem;
    font-family: var(--font-mono);
    text-decoration: none;
    transition: all 0.15s ease-out;
    position: relative;
    letter-spacing: 0.02em;
}

.src-hashtag::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--neon-cyan), transparent);
    opacity: 0.4;
}

.src-hashtag:hover {
    background: linear-gradient(135deg, rgba(0, 255, 249, 0.18) 0%, rgba(0, 255, 249, 0.08) 100%);
    border-color: var(--neon-cyan);
    color: #fff;
    box-shadow: 0 0 12px rgba(0, 255, 249, 0.25);
    transform: translateY(-1px);
}

.hashtag-count {
    background: rgba(0, 0, 0, 0.4);
    padding: 0.1rem 0.35rem;
    border-radius: 2px;
    font-size: 0.65rem;
    color: var(--neon-green);
    font-weight: 500;
    border: 1px solid rgba(57, 255, 20, 0.2);
}

.src-file-refs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: rgba(0, 255, 249, 0.03);
    border-bottom: 1px solid rgba(0, 255, 249, 0.08);
}

.refs-label {
    color: var(--text-subtle);
    font-size: 0.75rem;
    font-family: var(--font-mono);
    margin-right: 0.3rem;
}

/* Futuristic file reference - data terminal style */
.src-file-ref {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, rgba(0, 255, 249, 0.06) 0%, transparent 100%);
    border: 1px solid rgba(0, 255, 249, 0.12);
    border-left: 2px solid var(--neon-green);
    color: var(--neon-cyan);
    padding: 0.2rem 0.6rem;
    border-radius: 2px;
    font-size: 0.7rem;
    font-family: var(--font-mono);
    text-decoration: none;
    transition: all 0.15s ease-out;
    position: relative;
}

.src-file-ref::before {
    content: '→';
    margin-right: 0.3rem;
    color: var(--neon-green);
    font-size: 0.6rem;
    opacity: 0.7;
}

.src-file-ref:hover {
    background: linear-gradient(135deg, rgba(0, 255, 249, 0.15) 0%, rgba(0, 255, 249, 0.05) 100%);
    border-color: var(--neon-cyan);
    color: #fff;
    box-shadow: 0 0 10px rgba(0, 255, 249, 0.2);
    transform: translateX(2px);
}

.src-file-ref:hover::before {
    opacity: 1;
}

.refs-more {
    color: var(--text-faint);
    font-size: 0.7rem;
    font-family: var(--font-mono);
}

/* Container for both reference sections */
.src-refs-container {
    display: flex;
    flex-direction: column;
}

/* Referenced by section (files that reference THIS file) */
.src-referenced-by {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 0, 0.02);
    border-bottom: 1px solid rgba(255, 255, 0, 0.08);
}

/* Futuristic reverse reference - incoming link style */
.src-ref-by-item {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, rgba(255, 255, 0, 0.06) 0%, transparent 100%);
    border: 1px solid rgba(255, 255, 0, 0.12);
    border-left: 2px solid var(--neon-yellow);
    color: var(--neon-yellow);
    padding: 0.2rem 0.6rem;
    border-radius: 2px;
    font-size: 0.7rem;
    font-family: var(--font-mono);
    text-decoration: none;
    transition: all 0.15s ease-out;
    gap: 0.2rem;
    position: relative;
}

.src-ref-by-item::before {
    content: '←';
    margin-right: 0.2rem;
    color: var(--neon-yellow);
    font-size: 0.6rem;
    opacity: 0.7;
}

.src-ref-by-item:hover {
    background: linear-gradient(135deg, rgba(255, 255, 0, 0.15) 0%, rgba(255, 255, 0, 0.05) 100%);
    border-color: var(--neon-yellow);
    color: #fff;
    box-shadow: 0 0 10px rgba(255, 255, 0, 0.2);
    transform: translateX(-2px);
}

.src-ref-by-item:hover::before {
    opacity: 1;
}

.src-ref-by-item .ref-file {
    color: inherit;
}

.src-ref-by-item .ref-line {
    color: var(--text-subtle);
    font-size: 0.65rem;
}

.src-ref-by-item:hover .ref-line {
    color: var(--text-muted);
}

/* Line highlighting - strong visual indicator */
.blame-line.line-highlight {
    background: rgba(255, 255, 0, 0.15) !important;
    box-shadow: inset 4px 0 0 var(--neon-yellow), 0 0 20px rgba(255, 255, 0, 0.2);
    position: relative;
}

.blame-line.line-highlight::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 0, 0.4);
    border-bottom: 1px solid rgba(255, 255, 0, 0.4);
    pointer-events: none;
}

.blame-line.line-highlight .blame-num {
    color: var(--neon-yellow);
    font-weight: 700;
}

@keyframes lineFlash {
    0% {
        background: rgba(255, 255, 0, 0.4);
        box-shadow: inset 4px 0 0 var(--neon-yellow), 0 0 40px rgba(255, 255, 0, 0.5);
    }
    100% {
        background: rgba(255, 255, 0, 0.15);
        box-shadow: inset 4px 0 0 var(--neon-yellow), 0 0 20px rgba(255, 255, 0, 0.2);
    }
}

/* Code hashtags (clickable in code view) - futuristic cyan */
.code-hashtag {
    color: var(--neon-cyan) !important;
    text-decoration: none !important;
    background: rgba(0, 255, 249, 0.1);
    padding: 0 0.2rem;
    border-radius: 2px;
    border-bottom: 1px solid rgba(0, 255, 249, 0.3);
    transition: all 0.15s ease-out;
}

.code-hashtag:hover {
    background: rgba(0, 255, 249, 0.2);
    color: #fff !important;
    box-shadow: 0 0 8px rgba(0, 255, 249, 0.3);
}

/* File path links (clickable /svn/ paths in code) */
.code-file-link {
    color: var(--neon-yellow) !important;
    text-decoration: none !important;
    background: rgba(255, 255, 0, 0.08);
    padding: 0 0.2rem;
    border-radius: 2px;
    transition: all var(--transition-fast);
    cursor: pointer;
}

.code-file-link:hover {
    background: rgba(255, 255, 0, 0.2);
    color: #fff !important;
    text-decoration: underline !important;
}

/* ==========================================================================
   EDIT PANEL
   ========================================================================== */

.src-edit-panel {
    padding: 1rem;
}

.edit-meta {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.edit-input {
    flex: 1;
    min-width: 200px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border-cyan);
    color: var(--text-muted);
    padding: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    border-radius: 4px;
}

.edit-input:focus {
    outline: none;
    border-color: var(--neon-cyan);
}

.src-edit-panel textarea {
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border-cyan);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    padding: 1rem;
    border-radius: 4px;
    resize: vertical;
}

.src-edit-panel textarea#editContent {
    height: 350px;
}

.src-edit-panel textarea:focus {
    outline: none;
    border-color: var(--neon-cyan);
}

.edit-description {
    height: 60px !important;
    margin-top: 1rem;
}

.src-edit-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    justify-content: flex-end;
}

/* ==========================================================================
   CODE FOLDING
   ========================================================================== */

.fold-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: rgba(0, 255, 249, 0.05);
    border-bottom: 1px solid rgba(0, 255, 249, 0.1);
}

.fold-btn {
    background: rgba(0, 255, 249, 0.1);
    border: 1px solid rgba(0, 255, 249, 0.2);
    color: var(--neon-cyan);
    padding: 0.25rem 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    cursor: pointer;
    border-radius: 4px;
    transition: all var(--transition-fast);
}

.fold-btn:hover {
    background: rgba(0, 255, 249, 0.2);
    border-color: var(--neon-cyan);
}

.fold-hint {
    color: var(--text-subtle);
    font-size: 0.7rem;
    font-family: var(--font-mono);
    margin-left: auto;
}

.fold-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2em;
    height: 1.2em;
    margin-right: 0.25rem;
    color: var(--neon-cyan);
    cursor: pointer;
    transition: all var(--transition-fast);
    opacity: 0.6;
    font-size: 0.7rem;
    border-radius: 2px;
}

.fold-toggle:hover {
    opacity: 1;
    background: rgba(0, 255, 249, 0.2);
}

.fold-toggle.folded {
    color: var(--neon-green);
}

/* Fold header line - entire line is clickable, PROMINENT styling */
.blame-line.fold-header {
    background: linear-gradient(90deg, rgba(0, 255, 249, 0.08) 0%, rgba(0, 255, 249, 0.03) 50%, transparent 100%);
    border-left: 3px solid var(--neon-cyan);
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
}

.blame-line.fold-header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--neon-cyan);
    box-shadow: 0 0 8px rgba(0, 255, 249, 0.5);
}

.blame-line.fold-header:hover {
    background: linear-gradient(90deg, rgba(0, 255, 249, 0.15) 0%, rgba(0, 255, 249, 0.06) 50%, transparent 100%);
}

.blame-line.fold-header .blame-code {
    color: var(--neon-cyan);
    font-weight: 600;
    text-shadow: 0 0 10px rgba(0, 255, 249, 0.3);
}

/* Note: .fold-line-count removed - using .fold-line-badge with emoji/colors instead */

/* Folded header line - collapsed state */
.blame-line.folded {
    border-bottom: 2px dashed rgba(0, 255, 249, 0.4);
    background: linear-gradient(90deg, rgba(0, 255, 249, 0.06) 0%, rgba(0, 255, 249, 0.02) 50%, transparent 100%);
    border-left: 3px solid var(--neon-green);
}

.blame-line.folded::before {
    background: var(--neon-green);
    box-shadow: 0 0 8px rgba(57, 255, 20, 0.5);
}

/* Inline fold badge - shows line count, right-aligned */
.fold-line-badge {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    min-width: 4.5rem;
    padding: 0.1rem 0.4rem;
    background: rgba(0, 255, 249, 0.12);
    border: 1px solid rgba(0, 255, 249, 0.4);
    border-radius: 2px;
    color: var(--neon-cyan);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
    text-align: center;
    line-height: 1.2;
    transition: all 0.2s ease;
    will-change: opacity, transform;
}

/* Dynamic fold badge colors - graduated from tiny (green) to huge (red) */
.fold-line-badge.fold-badge-tiny {
    background: rgba(57, 255, 20, 0.15);
    border-color: rgba(57, 255, 20, 0.5);
    color: var(--neon-green);
}

.fold-line-badge.fold-badge-small {
    background: rgba(0, 255, 200, 0.15);
    border-color: rgba(0, 255, 200, 0.5);
    color: #00ffc8;
}

.fold-line-badge.fold-badge-medium {
    background: rgba(0, 255, 249, 0.15);
    border-color: rgba(0, 255, 249, 0.5);
    color: var(--neon-cyan);
}

.fold-line-badge.fold-badge-large {
    background: rgba(255, 255, 0, 0.15);
    border-color: rgba(255, 255, 0, 0.5);
    color: var(--neon-yellow);
}

.fold-line-badge.fold-badge-xlarge {
    background: rgba(255, 150, 0, 0.15);
    border-color: rgba(255, 150, 0, 0.5);
    color: #ff9600;
}

.fold-line-badge.fold-badge-huge {
    background: rgba(255, 100, 100, 0.15);
    border-color: rgba(255, 100, 100, 0.5);
    color: #ff6464;
}

/* Fold badge states - COLLAPSED (prominent) vs EXPANDED (subtle) */
.fold-line-badge.fold-collapsed {
    opacity: 1;
    font-weight: 600;
}

.fold-line-badge.fold-expanded {
    opacity: 0.6;
    font-weight: 500;
}

.blame-line.fold-header:hover .fold-line-badge.fold-expanded {
    opacity: 1;
}

.fold-line-badge .fold-count {
    margin-left: 0.3rem;
}

/* Make blame-code position relative for badge positioning */
.blame-line.fold-header .blame-code {
    position: relative;
    padding-right: 120px;
}

.blame-line.folded:hover {
    background: linear-gradient(90deg, rgba(0, 255, 249, 0.08) 0%, rgba(0, 255, 249, 0.03) 50%, transparent 100%);
}

.blame-line.folded:hover .fold-line-badge {
    background: rgba(0, 255, 249, 0.2);
    border-color: var(--neon-cyan);
    box-shadow: 0 0 10px rgba(0, 255, 249, 0.3);
}

/* Hide lines when folded */
.blame-line.fold-hidden {
    display: none !important;
}

/* Fold indicator in gutter */
.blame-num .fold-toggle {
    position: relative;
    top: -1px;
}

/* ==========================================================================
   BLAME VIEW
   ========================================================================== */

.blame-container {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    overflow-x: auto;
}

.blame-line {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--border-subtle);
    min-height: 1.6em;
    line-height: 1.6;
    contain: layout style;
}

.blame-line:hover {
    background: rgba(0, 255, 249, 0.03);
}

.blame-new-commit {
    border-top: 1px solid rgba(0, 255, 249, 0.08);
}

.blame-meta {
    flex: 0 0 170px;
    padding: 0 0.6rem;
    color: var(--text-dim);
    font-size: 0.8rem;
    text-align: right;
    border-right: 1px solid var(--border-subtle);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.blame-new-commit .blame-meta {
    color: var(--neon-cyan);
}

.blame-num {
    flex: 0 0 45px;
    text-align: right;
    padding: 0 0.5rem;
    color: var(--text-ghost);
    border-right: 1px solid var(--border-subtle);
    cursor: pointer;
    user-select: none;
}

.blame-num:hover {
    color: var(--neon-cyan);
    background: rgba(0, 255, 249, 0.05);
}

.blame-code {
    flex: 1;
    padding: 0 0.4rem 0 0.6rem;
    white-space: pre;
    color: var(--text-muted);
    /* Remove per-line scrollbar - let container handle horizontal scroll */
    overflow: visible;
    position: relative;
}

/* Blame line highlight for .blame-code text color */
.blame-line.line-highlight .blame-code {
    color: #fff;
}

/* Hashtags in blame view - inherit from .code-hashtag */
.blame-code .code-hashtag {
    color: var(--neon-cyan) !important;
    text-decoration: none !important;
    background: rgba(0, 255, 249, 0.1);
    padding: 0 0.2rem;
    border-radius: 2px;
    border-bottom: 1px solid rgba(0, 255, 249, 0.3);
    transition: all 0.15s ease-out;
}

.blame-code .code-hashtag:hover {
    background: rgba(0, 255, 249, 0.2);
    color: #fff !important;
    box-shadow: 0 0 8px rgba(0, 255, 249, 0.3);
}

/* ==========================================================================
   COMMITS LIST
   ========================================================================== */

.source-commits {
    border-bottom: 1px solid rgba(0, 255, 249, 0.1);
}

.src-commits-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    font-size: 0.8rem;
    color: var(--neon-cyan);
    font-weight: 600;
    background: linear-gradient(90deg, rgba(0, 255, 249, 0.08) 0%, rgba(0, 255, 249, 0.02) 100%);
    border-bottom: 1px solid rgba(0, 255, 249, 0.15);
}

.commits-title-text {
    font-family: var(--font-mono);
}

.view-all-commits {
    font-size: 0.7rem;
    color: var(--neon-cyan);
    text-decoration: none;
    padding: 0.25rem 0.6rem;
    background: rgba(0, 255, 249, 0.1);
    border: 1px solid rgba(0, 255, 249, 0.2);
    border-radius: 3px;
    transition: all 0.15s ease;
}

.view-all-commits:hover {
    background: rgba(0, 255, 249, 0.2);
    box-shadow: 0 0 10px rgba(0, 255, 249, 0.2);
}

.src-commits-footer {
    padding: 0.5rem 1rem;
    text-align: center;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(0, 255, 249, 0.05);
}

.view-more-link {
    font-size: 0.75rem;
    color: var(--neon-cyan);
    text-decoration: none;
    font-family: var(--font-mono);
    transition: all 0.15s ease;
}

.view-more-link:hover {
    color: #fff;
    text-shadow: 0 0 8px rgba(0, 255, 249, 0.5);
}

.commit-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    font-size: 0.6rem;
    background: rgba(0, 255, 249, 0.1);
    border-radius: 50%;
    color: var(--text-subtle);
    margin-right: 0.5rem;
}

.src-commits-list {
    max-height: 150px;
    overflow-y: auto;
}

.src-commit {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    border-bottom: 1px solid rgba(0, 255, 249, 0.06);
    transition: all 0.2s ease;
    position: relative;
}

.src-commit:hover {
    background: linear-gradient(90deg, rgba(0, 255, 249, 0.08) 0%, transparent 60%);
    border-left: 2px solid var(--neon-cyan);
    padding-left: calc(1rem - 2px);
}

.src-commit-hash {
    color: var(--neon-green);
    background: rgba(57, 255, 20, 0.1);
    border: 1px solid rgba(57, 255, 20, 0.2);
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-size: 0.7rem;
    text-decoration: none;
    text-shadow: 0 0 6px rgba(57, 255, 20, 0.3);
    transition: all 0.2s ease;
}

.src-commit-hash:hover {
    background: rgba(57, 255, 20, 0.2);
    border-color: rgba(57, 255, 20, 0.5);
    box-shadow: 0 0 12px rgba(57, 255, 20, 0.35);
    color: #fff;
}

.src-commit-msg {
    flex: 1;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.src-commit-tags {
    display: flex;
    gap: 0.25rem;
}

.commit-tag {
    color: var(--neon-cyan);
    font-size: 0.65rem;
    text-decoration: none;
    padding: 0.1rem 0.35rem;
    background: rgba(0, 255, 249, 0.08);
    border: 1px solid rgba(0, 255, 249, 0.15);
    border-radius: 3px;
    transition: all 0.2s ease;
}

.commit-tag:hover {
    background: rgba(0, 255, 249, 0.2);
    border-color: rgba(0, 255, 249, 0.4);
    box-shadow: 0 0 10px rgba(0, 255, 249, 0.2);
    color: #fff;
    text-shadow: 0 0 6px rgba(0, 255, 249, 0.4);
}

.src-commit-author {
    color: var(--neon-cyan);
}

.src-commit-time {
    color: var(--text-faint);
}

/* ==========================================================================
   COMMIT DETAIL VIEW - Enhanced Navigation
   ========================================================================== */

.commit-detail-view {
    padding: 1.25rem;
}

.commit-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(0, 255, 249, 0.15);
    flex-wrap: wrap;
}

.commit-detail-header h3 {
    margin: 0;
    font-family: 'Rajdhani', sans-serif;
    color: var(--neon-cyan);
}

/* Commit navigation */
.commit-nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.commit-nav-hash {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--neon-green);
    background: rgba(57, 255, 20, 0.1);
    padding: 0.3rem 0.75rem;
    border-radius: 4px;
    border: 1px solid rgba(57, 255, 20, 0.2);
}

/* Commit metadata - improved layout */
.commit-detail-meta {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 20, 25, 0.3) 100%);
    padding: 1rem 1.25rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(0, 255, 249, 0.1);
}

.commit-meta-row {
    display: flex;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    font-size: 0.85rem;
}

.commit-meta-row:last-child {
    border-bottom: none;
}

.commit-meta-row.message {
    flex-direction: column;
    gap: 0.5rem;
}

.commit-meta-label {
    color: var(--text-subtle);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    min-width: 80px;
}

.commit-meta-value {
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

.commit-meta-row.message .commit-meta-value {
    color: var(--text-primary);
    line-height: 1.5;
    padding-left: 0.5rem;
    border-left: 2px solid rgba(0, 255, 249, 0.2);
}

/* Legacy support */
.commit-detail-meta div {
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
}

.commit-detail-meta strong {
    color: var(--neon-cyan);
    margin-right: 0.5rem;
}

/* GitHub-style file diff list */
.commit-files-list {
    margin-top: 1rem;
}

.commit-files-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(0, 255, 249, 0.08);
    border: 1px solid rgba(0, 255, 249, 0.15);
    border-radius: 6px 6px 0 0;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    flex-wrap: wrap;
}

.files-count {
    color: var(--neon-cyan);
}

.total-stats {
    display: flex;
    gap: 0.5rem;
}

.expand-all-btn,
.collapse-all-btn {
    margin-left: auto;
}

.collapse-all-btn {
    margin-left: 0.5rem;
}

.file-diff-section {
    border: 1px solid rgba(0, 255, 249, 0.1);
    border-top: none;
}

.file-diff-section:last-child {
    border-radius: 0 0 6px 6px;
}

.file-diff-section:first-child {
    border-top: 1px solid rgba(0, 255, 249, 0.1);
    border-radius: 6px 6px 0 0;
}

.file-diff-section:only-child {
    border-radius: 6px;
}

.commit-files-header + .file-diff-section {
    border-radius: 0;
}

.commit-files-header + .file-diff-section:last-child {
    border-radius: 0 0 6px 6px;
}

.file-diff-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.file-diff-header:hover {
    background: rgba(0, 255, 249, 0.05);
}

.file-diff-toggle {
    color: var(--text-faint);
    font-size: 0.7rem;
    transition: transform var(--transition-fast);
    width: 1rem;
}

.file-diff-toggle.expanded {
    /* No transform needed - using different characters */
}

.file-open-btn {
    padding: 0.2rem 0.5rem;
    opacity: 0.5;
    transition: opacity 0.15s ease;
    text-decoration: none;
}

.file-diff-header:hover .file-open-btn {
    opacity: 1;
}

.file-diff-icon {
    font-size: 0.9rem;
}

.file-diff-name {
    color: var(--neon-cyan);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    flex: 1;
}

.file-diff-name:hover {
    text-decoration: underline;
    color: #fff;
}

.file-diff-stats {
    display: flex;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
}

.file-stat {
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
}

.file-stat.adds {
    background: rgba(57, 255, 20, 0.2);
    color: var(--neon-green);
}

.file-stat.dels {
    background: rgba(255, 100, 100, 0.2);
    color: var(--error-text);
}

.file-stat.binary {
    background: rgba(255, 215, 0, 0.2);
    color: var(--warning-text);
}

.file-diff-content {
    max-height: 500px;
    overflow: auto;
    background: rgba(0, 0, 0, 0.4);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    transition: max-height var(--transition-base), padding var(--transition-base);
}

.file-diff-content.collapsed {
    max-height: 0;
    overflow: hidden;
    padding: 0;
}

/* Diff/Editor view tabs */
.diff-view-tabs {
    display: flex;
    gap: 0;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(0, 255, 249, 0.1);
}

.diff-tab {
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s ease;
    border-bottom: 2px solid transparent;
}

.diff-tab:hover {
    color: var(--text-secondary);
    background: rgba(0, 255, 249, 0.03);
}

.diff-tab.active {
    color: var(--neon-cyan);
    border-bottom-color: var(--neon-cyan);
    background: rgba(0, 255, 249, 0.05);
}

.diff-content-wrapper,
.editor-content-wrapper {
    padding: 0;
}

.editor-content-wrapper {
    background: rgba(0, 0, 0, 0.2);
}

/* Embedded blame/editor view in commit diffs */
.embedded-blame-view,
.editor-blame-view {
    max-height: 500px;
    overflow: auto;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.5) 100%);
    border-radius: 0 0 6px 6px;
}

.embedded-blame-view .blame-container {
    font-size: 0.8rem;
}

.embedded-blame-view .blame-line,
.editor-blame-view .blame-line {
    border-bottom-color: rgba(255, 255, 255, 0.02);
}

.embedded-blame-view .blame-meta {
    font-size: 0.65rem;
    flex: 0 0 70px;
}

.embedded-blame-view .blame-num {
    font-size: 0.7rem;
    flex: 0 0 40px;
}

/* Embedded fold controls */
.embedded-fold-controls {
    background: rgba(0, 255, 249, 0.05);
    border-bottom: 1px solid rgba(0, 255, 249, 0.1);
    padding: 0.5rem 0.75rem;
    position: sticky;
    top: 0;
    z-index: 10;
}

.embedded-fold-controls .fold-btn {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
}

.embedded-fold-controls .fold-hint {
    font-size: 0.7rem;
}

.editor-loading {
    padding: 2rem;
    text-align: center;
    color: var(--text-subtle);
}

/* Diff line styles */
.diff-file-header {
    background: rgba(0, 255, 249, 0.1);
    color: var(--neon-cyan);
    padding: 0.4rem 0.75rem;
    font-size: 0.7rem;
    display: none;
}

.diff-file-path {
    color: var(--text-faint);
    padding: 0.1rem 0.75rem;
    font-size: 0.7rem;
}

.diff-hunk {
    background: rgba(0, 255, 249, 0.08);
    color: var(--neon-cyan);
    border-left: 2px solid var(--neon-cyan);
    padding: 0.3rem 0.75rem;
    margin-top: 0.25rem;
    font-size: 0.7rem;
}

.diff-add {
    background: rgba(57, 255, 20, 0.12);
    color: #8eff8e;
    padding: 0.1rem 0.75rem;
}

.diff-del {
    background: rgba(255, 100, 100, 0.12);
    color: #ff8a8a;
    padding: 0.1rem 0.75rem;
}

.diff-ctx {
    color: var(--text-subtle);
    padding: 0.1rem 0.75rem;
}

.diff-empty {
    color: var(--text-faint);
    padding: 1rem;
    text-align: center;
}

/* ==========================================================================
   DIFF EDITOR VIEW (Editor-format diff with syntax highlighting)
   ========================================================================== */

.diff-editor-view {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.5) 100%);
    border-radius: 0 0 6px 6px;
    max-height: 500px;
    overflow: auto;
}

.diff-editor-view .blame-container {
    font-size: 0.8rem;
}

.diff-editor-view .blame-line {
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    transition: background 0.1s ease;
}

/* Diff line highlighting - additions (green) */
.diff-editor-view .blame-line.diff-line-add {
    background: linear-gradient(90deg,
        rgba(57, 255, 20, 0.15) 0%,
        rgba(57, 255, 20, 0.08) 100%
    );
    border-left: 3px solid var(--neon-green);
}

.diff-editor-view .blame-line.diff-line-add:hover {
    background: linear-gradient(90deg,
        rgba(57, 255, 20, 0.25) 0%,
        rgba(57, 255, 20, 0.12) 100%
    );
}

/* Diff line highlighting - deletions (red) */
.diff-editor-view .blame-line.diff-line-del {
    background: linear-gradient(90deg,
        rgba(255, 100, 100, 0.15) 0%,
        rgba(255, 100, 100, 0.08) 100%
    );
    border-left: 3px solid var(--error-text, #ff6464);
}

.diff-editor-view .blame-line.diff-line-del:hover {
    background: linear-gradient(90deg,
        rgba(255, 100, 100, 0.25) 0%,
        rgba(255, 100, 100, 0.12) 100%
    );
}

/* Diff indicator column (+/-) */
.diff-indicator {
    flex: 0 0 20px;
    text-align: center;
    font-weight: bold;
    font-size: 0.9rem;
    user-select: none;
}

.diff-indicator-add {
    color: var(--neon-green);
    text-shadow: 0 0 8px rgba(57, 255, 20, 0.5);
}

.diff-indicator-del {
    color: var(--error-text, #ff6464);
    text-shadow: 0 0 8px rgba(255, 100, 100, 0.5);
}

/* Hunk headers in editor view */
.diff-hunk-line {
    background: linear-gradient(90deg,
        rgba(0, 255, 249, 0.12) 0%,
        rgba(0, 255, 249, 0.05) 100%
    );
    border-left: 3px solid var(--neon-cyan);
    padding: 0.4rem 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.diff-hunk-marker {
    color: var(--neon-cyan);
    font-weight: bold;
    opacity: 0.8;
}

.diff-hunk-text {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-style: italic;
}

/* Context lines (unchanged) */
.diff-editor-view .blame-line:not(.diff-line-add):not(.diff-line-del):not(.diff-hunk-line) {
    opacity: 0.7;
}

.diff-editor-view .blame-line:not(.diff-line-add):not(.diff-line-del):not(.diff-hunk-line):hover {
    opacity: 1;
}

/* Diff line layout */
.diff-editor-view .blame-line {
    display: flex;
    align-items: stretch;
    min-height: 1.6em;
}

.diff-editor-view .blame-num.diff-line-num {
    flex: 0 0 50px;
    text-align: right;
    padding-right: 0.5rem;
    color: var(--text-faint);
    font-size: 0.75rem;
    user-select: none;
    background: rgba(0, 0, 0, 0.2);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.diff-line-add .diff-line-num {
    color: rgba(57, 255, 20, 0.6);
}

.diff-line-del .diff-line-num {
    color: rgba(255, 100, 100, 0.6);
}

.diff-editor-view .blame-code {
    flex: 1;
    padding: 0 0.5rem;
    white-space: pre-wrap;
    word-break: break-all;
}

/* Hunk range and context */
.hunk-range {
    color: var(--neon-cyan);
    font-weight: 500;
}

.hunk-context {
    color: var(--text-subtle);
    margin-left: 0.5rem;
    font-style: italic;
}

/* ==========================================================================
   MESSAGES & STATUS
   ========================================================================== */

.source-message {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    animation: fadeInUp 0.3s;
    z-index: 100;
}

.source-message-success {
    background: rgba(57, 255, 20, 0.2);
    border: 1px solid var(--neon-green);
    color: var(--neon-green);
}

.source-message-error {
    background: rgba(255, 100, 100, 0.2);
    border: 1px solid var(--error-text);
    color: var(--error-text);
}

.source-loading,
.source-error {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 3rem;
    color: var(--text-dim);
    font-family: var(--font-mono);
}

.source-error {
    color: var(--error-text);
}

.loading-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(0, 255, 249, 0.3);
    border-top-color: var(--neon-cyan);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ==========================================================================
   SEARCH MODAL
   ========================================================================== */

.search-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
    z-index: var(--z-modal);
}

.search-modal.active {
    display: flex;
}

.search-container {
    width: 100%;
    max-width: 600px;
    background: var(--dark-bg);
    border: 1px solid var(--border-cyan);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(0, 255, 249, 0.2);
}

.search-header {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    background: rgba(0, 255, 249, 0.05);
    border-bottom: 1px solid var(--border-cyan);
    gap: 0.5rem;
}

.search-icon {
    color: var(--neon-cyan);
    font-size: 1rem;
}

.search-input {
    flex: 1;
    background: none;
    border: none;
    color: #fff;
    font-family: var(--font-mono);
    font-size: 1rem;
    outline: none;
}

.search-input::placeholder {
    color: var(--text-subtle);
}

.search-close {
    background: none;
    border: none;
    color: var(--text-subtle);
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0.25rem;
}

.search-close:hover {
    color: var(--neon-cyan);
}

.search-filters {
    display: flex;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
    flex-wrap: wrap;
}

.search-filter {
    padding: 0.2rem 0.6rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 255, 249, 0.12);
    border-radius: 3px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.search-filter:hover {
    border-color: rgba(0, 255, 249, 0.3);
    color: var(--neon-cyan);
    background: rgba(0, 255, 249, 0.06);
}

.search-filter.active {
    background: rgba(0, 255, 249, 0.15);
    border-color: var(--neon-cyan);
    color: var(--neon-cyan);
    text-shadow: 0 0 6px rgba(0, 255, 249, 0.4);
    box-shadow: 0 0 8px rgba(0, 255, 249, 0.15);
}

.search-results {
    max-height: 400px;
    overflow-y: auto;
}

.search-result {
    display: block;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
    text-decoration: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: background 0.2s ease;
}

.search-result::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 249, 0.1), transparent);
    transition: left 0.5s ease;
}

.search-result:hover::after {
    left: 100%;
}

.search-result:hover,
.search-result.selected {
    background: rgba(0, 255, 249, 0.05);
}

.search-result-file {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--neon-cyan);
    margin-bottom: 0.25rem;
}

.search-result-line {
    color: var(--text-subtle);
    font-size: 0.7rem;
    margin-left: 0.5rem;
}

.search-result-content {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-content mark,
.search-match {
    background: rgba(255, 255, 0, 0.2);
    color: var(--neon-yellow);
    padding: 2px 4px;
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(255, 255, 0, 0.3);
    font-weight: 700;
}

.search-empty {
    padding: 2rem;
    text-align: center;
    color: var(--text-subtle);
    font-family: var(--font-mono);
}

.search-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem;
    color: var(--text-dim);
}

/* ==========================================================================
   GO-TO-LINE MODAL
   ========================================================================== */

.goto-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 25vh;
    z-index: var(--z-modal);
}

.goto-modal.active {
    display: flex;
}

.goto-container {
    background: var(--dark-bg);
    border: 1px solid var(--border-cyan);
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 0 40px rgba(0, 255, 249, 0.2);
}

.goto-label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.85rem;
}

.goto-input {
    width: 200px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border-cyan);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 1rem;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    text-align: center;
    outline: none;
}

.goto-input:focus {
    border-color: var(--neon-cyan);
    box-shadow: 0 0 10px rgba(0, 255, 249, 0.2);
}

/* ==========================================================================
   COPY FEEDBACK
   ========================================================================== */

.copy-tooltip {
    position: fixed;
    background: var(--neon-green);
    color: var(--dark-bg);
    padding: 0.4rem 0.75rem;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 600;
    pointer-events: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.2s, transform 0.2s;
    z-index: 10000;
}

.copy-tooltip.show {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   STATS BAR
   ========================================================================== */

.source-stats {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid var(--border-subtle);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-subtle);
}

.stats-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.stats-item .icon {
    opacity: 0.7;
}

.language-bar {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    flex: 1;
    max-width: 200px;
    background: rgba(255, 255, 255, 0.1);
}

.language-bar-segment {
    height: 100%;
    transition: width var(--transition-base);
}

.language-bar-segment.php { background: #8892BF; }
.language-bar-segment.js { background: #f7df1e; }
.language-bar-segment.css { background: #264de4; }
.language-bar-segment.html { background: #e34c26; }
.language-bar-segment.other { background: var(--text-subtle); }

/* ==========================================================================
   ACTIVITY VIEW
   ========================================================================== */

.activity-view {
    padding: 0;
}

/* Futuristic activity tag cloud header */
.activity-tag-cloud {
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(0, 255, 249, 0.15);
}

.activity-tag-cloud .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(0, 255, 249, 0.05) 0%, transparent 100%);
    border-bottom: 1px solid rgba(0, 255, 249, 0.1);
    border-left: 3px solid var(--neon-cyan);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-subtle);
}

/* Refresh button - more visible */
.refresh-btn {
    background: rgba(0, 255, 249, 0.1);
    border: 1px solid rgba(0, 255, 249, 0.2);
    border-radius: 3px;
    color: var(--neon-cyan);
    cursor: pointer;
    padding: 0.3rem 0.5rem;
    font-size: 0.9rem;
    transition: all 0.15s ease-out;
}

.refresh-btn:hover {
    background: rgba(0, 255, 249, 0.2);
    border-color: var(--neon-cyan);
    color: #fff;
    transform: rotate(90deg);
    box-shadow: 0 0 10px rgba(0, 255, 249, 0.3);
}

/* Futuristic tag cloud - data matrix layout */
.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 255, 249, 0.08);
    border-radius: 3px;
    position: relative;
}

.tag-cloud::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--neon-cyan), transparent 50%);
    opacity: 0.3;
}

/* Futuristic tag pill - cyber terminal aesthetic */
.tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: linear-gradient(135deg, rgba(0, 255, 249, 0.06) 0%, transparent 100%);
    border: 1px solid rgba(0, 255, 249, 0.15);
    border-left: 2px solid var(--neon-cyan);
    color: var(--neon-cyan);
    padding: 0.35rem 0.75rem;
    border-radius: 2px;
    font-size: 0.8rem;
    font-family: var(--font-mono);
    text-decoration: none;
    transition: all 0.15s ease-out;
    position: relative;
}

.tag-pill::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 2px;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(0, 255, 249, 0.3), transparent);
}

.tag-pill:hover,
.tag-pill.active {
    background: linear-gradient(135deg, rgba(0, 255, 249, 0.15) 0%, rgba(0, 255, 249, 0.05) 100%);
    border-color: var(--neon-cyan);
    color: #fff;
    box-shadow: 0 0 15px rgba(0, 255, 249, 0.2), inset 0 0 30px rgba(0, 255, 249, 0.03);
    transform: translateY(-1px);
}

.tag-pill .tag-count {
    background: rgba(0, 0, 0, 0.5);
    padding: 0.15rem 0.4rem;
    border-radius: 2px;
    font-size: 0.7rem;
    color: var(--neon-green);
    border: 1px solid rgba(57, 255, 20, 0.2);
}

.filter-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(0, 255, 249, 0.05);
    border-bottom: 1px solid rgba(0, 255, 249, 0.1);
}

/* Futuristic filter badge - active state indicator */
.filter-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, rgba(0, 255, 249, 0.12) 0%, rgba(0, 255, 249, 0.05) 100%);
    border: 1px solid rgba(0, 255, 249, 0.4);
    border-left: 3px solid var(--neon-cyan);
    color: var(--neon-cyan);
    padding: 0.4rem 0.9rem;
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    box-shadow: 0 0 15px rgba(0, 255, 249, 0.15);
}

/* Futuristic clear button - warning/danger style */
.clear-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: linear-gradient(135deg, rgba(255, 100, 100, 0.15) 0%, rgba(255, 100, 100, 0.05) 100%);
    border: 1px solid rgba(255, 100, 100, 0.3);
    border-left: 2px solid var(--error-text);
    color: var(--error-text);
    padding: 0.4rem 0.8rem;
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease-out;
}

.clear-filter-btn:hover {
    background: linear-gradient(135deg, rgba(255, 100, 100, 0.25) 0%, rgba(255, 100, 100, 0.1) 100%);
    border-color: var(--error-text);
    color: #fff;
    box-shadow: 0 0 10px rgba(255, 100, 100, 0.2);
}

.activity-table-container {
    overflow-x: auto;
}

.activity-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: 0.85rem;
}

.activity-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    background: rgba(0, 255, 249, 0.08);
    color: var(--text-subtle);
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 600;
    position: sticky;
    top: 0;
}

.activity-table td {
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
}

/* Activity row - entire row is clickable */
.activity-row {
    transition: all 0.15s ease-out;
    contain: layout style;
    will-change: transform, background;
}

.activity-row:hover {
    background: rgba(0, 255, 249, 0.08);
    border-left: 2px solid var(--neon-cyan);
}

.activity-row:hover .file-link {
    color: #fff;
}

.col-time {
    width: 70px;
    color: var(--neon-green);
    white-space: nowrap;
}

.col-file {
    width: 200px;
}

.col-content {
    color: var(--text-muted);
}

.col-tags {
    width: 150px;
    text-align: right;
}

.file-link {
    color: var(--neon-yellow);
    text-decoration: none;
    font-size: 0.8rem;
    transition: all 0.2s ease;
    text-shadow: 0 0 4px rgba(255, 255, 0, 0.15);
}

.file-link:hover {
    color: #fff;
    text-decoration: none;
    text-shadow: 0 0 12px rgba(255, 255, 0, 0.4);
}

.file-link .line-num,
.file-path-external .line-num {
    color: var(--text-ghost);
    font-size: 0.75rem;
}

.file-link-commit {
    color: var(--neon-cyan) !important;
}

.file-link-commit .commit-hash {
    color: var(--neon-green);
    background: rgba(57, 255, 20, 0.1);
    border: 1px solid rgba(57, 255, 20, 0.2);
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-size: 0.7rem;
    margin-right: 0.3rem;
}

.author-badge {
    color: var(--neon-cyan);
    font-size: 0.75rem;
    opacity: 0.7;
    margin-right: 0.3rem;
}

.mini-tag {
    color: var(--neon-cyan);
    font-size: 0.7rem;
    text-decoration: none;
    margin-left: 0.3rem;
    padding: 0.1rem 0.35rem;
    background: rgba(0, 255, 249, 0.1);
    border: 1px solid rgba(0, 255, 249, 0.2);
    border-radius: 3px;
    transition: all 0.2s ease;
    text-shadow: 0 0 4px rgba(0, 255, 249, 0.3);
}

.mini-tag:hover,
.mini-tag.active {
    background: rgba(0, 255, 249, 0.2);
    border-color: var(--neon-cyan);
    color: #fff;
    box-shadow: 0 0 10px rgba(0, 255, 249, 0.25);
}

.git-commit-row {
    background: rgba(0, 255, 249, 0.02);
}

.git-commit-row:hover {
    background: rgba(0, 255, 249, 0.08);
}

.load-more-container {
    text-align: center;
    padding: 1.5rem;
}

.load-more-btn {
    background: rgba(0, 255, 249, 0.1);
    border: 1px solid rgba(0, 255, 249, 0.3);
    color: var(--neon-cyan);
    padding: 0.75rem 2rem;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    cursor: pointer;
    border-radius: 4px;
    transition: all var(--transition-fast);
}

.load-more-btn:hover {
    background: rgba(0, 255, 249, 0.2);
}

.empty-message {
    text-align: center;
    color: var(--text-subtle);
    padding: 2rem !important;
    font-family: var(--font-mono);
}

.loading-cell {
    text-align: center;
    color: var(--text-subtle);
    padding: 2rem !important;
}

/* ==========================================================================
   COMMITS VIEW
   ========================================================================== */

.commits-view .source-toolbar {
    border-bottom: 1px solid rgba(0, 255, 249, 0.15);
}

.commits-title {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--neon-cyan);
    text-transform: uppercase;
}

.commits-list {
    flex: 1;
    overflow-y: auto;
}

/* ==========================================================================
   ACTIVITY GRAPH - Crisp SVG Visualization
   ========================================================================== */

.activity-graph-container {
    background: linear-gradient(135deg,
        rgba(0, 255, 249, 0.08) 0%,
        rgba(0, 0, 0, 0.6) 30%,
        rgba(0, 0, 0, 0.5) 70%,
        rgba(57, 255, 20, 0.05) 100%);
    border: 2px solid rgba(0, 255, 249, 0.25);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 255, 249, 0.15), inset 0 1px 0 rgba(0, 255, 249, 0.1);
    backdrop-filter: blur(10px);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
}

.activity-graph-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--neon-cyan) 50%, transparent 100%);
    opacity: 0.5;
}

.activity-graph-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(0, 255, 249, 0.1);
}

.graph-title {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--neon-cyan);
    font-weight: 600;
    text-shadow: 0 0 10px rgba(0, 255, 249, 0.3);
}

.graph-range {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    background: rgba(0, 0, 0, 0.3);
    padding: 0.2rem 0.6rem;
    border-radius: 3px;
}

.graph-stats {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-subtle);
    margin-left: auto;
}

.activity-graph {
    width: 100%;
    height: auto;
    max-height: 180px;
    will-change: transform;
    transform: translateZ(0); /* GPU acceleration */
    display: block;
}

.graph-grid {
    stroke: rgba(0, 255, 249, 0.1);
    stroke-width: 1;
    stroke-dasharray: 4 6;
}

.graph-area {
    opacity: 0.5;
}

.graph-bar {
    fill: url(#barGradient);
    opacity: 0.4;
}

.activity-graph:hover .graph-bar {
    opacity: 0.6;
}

.graph-line {
    fill: none;
    stroke: var(--neon-cyan);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.graph-point {
    fill: var(--dark-bg);
    stroke: var(--neon-cyan);
    stroke-width: 2;
    opacity: 0;
    cursor: pointer;
    transition: all 0.15s ease;
}

.activity-graph:hover .graph-point {
    opacity: 0.7;
}

.graph-point:hover {
    opacity: 1 !important;
    fill: var(--neon-cyan);
    filter: drop-shadow(0 0 6px var(--neon-cyan));
}

.graph-label-y {
    font-family: var(--font-mono);
    font-size: 10px;
    fill: var(--text-subtle);
    text-anchor: end;
}

.graph-label-x {
    font-family: var(--font-mono);
    font-size: 11px;
    fill: var(--text-subtle);
    text-anchor: middle;
}

/* Graph hover tooltip */
.activity-graph-container:hover {
    border-color: rgba(0, 255, 249, 0.3);
    box-shadow: 0 0 20px rgba(0, 255, 249, 0.1);
}

/* ==========================================================================
   COMMIT ITEMS - Futuristic Cards
   ========================================================================== */

.commit-item {
    padding: 1.5rem 1.75rem;
    margin: 1rem 0;
    background: linear-gradient(135deg,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 20, 25, 0.5) 50%,
        rgba(0, 10, 15, 0.6) 100%);
    border: 1px solid rgba(0, 255, 249, 0.15);
    border-left: 4px solid rgba(0, 255, 249, 0.3);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    contain: layout style;
    will-change: transform, box-shadow;
    backdrop-filter: blur(8px);
}

.commit-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(0, 255, 249, 0.4) 20%,
        rgba(0, 255, 249, 0.6) 50%,
        rgba(0, 255, 249, 0.4) 80%,
        transparent 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.commit-item::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(57, 255, 20, 0.4) 50%,
        transparent 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.commit-item:hover {
    background: linear-gradient(135deg,
        rgba(0, 255, 249, 0.12) 0%,
        rgba(0, 30, 35, 0.6) 50%,
        rgba(0, 20, 25, 0.5) 100%);
    border-color: rgba(0, 255, 249, 0.5);
    border-left-color: var(--neon-cyan);
    transform: translateX(6px) translateY(-2px);
    box-shadow:
        0 8px 32px rgba(0, 255, 249, 0.2),
        inset 0 1px 0 rgba(0, 255, 249, 0.1);
}

.commit-item:hover::before,
.commit-item:hover::after {
    opacity: 1;
}

.commit-item-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    flex-wrap: nowrap;
}

.commit-item .commit-hash {
    color: var(--neon-green);
    background: linear-gradient(135deg,
        rgba(57, 255, 20, 0.2) 0%,
        rgba(57, 255, 20, 0.1) 100%);
    border: 1px solid rgba(57, 255, 20, 0.4);
    padding: 0.4rem 0.9rem;
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(57, 255, 20, 0.5);
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.15);
    transition: all 0.2s ease;
}

.commit-item:hover .commit-hash {
    border-color: var(--neon-green);
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.3);
    text-shadow: 0 0 15px rgba(57, 255, 20, 0.7);
}

.commit-item .commit-author {
    color: var(--neon-cyan);
    font-family: var(--font-mono);
    font-size: 0.95rem;
    font-weight: 600;
    flex-shrink: 0;
    text-shadow: 0 0 8px rgba(0, 255, 249, 0.4);
    transition: all 0.2s ease;
}

.commit-item:hover .commit-author {
    color: #fff;
    text-shadow: 0 0 12px rgba(0, 255, 249, 0.6);
}

.commit-item .commit-time {
    color: #888;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    padding: 0.3rem 0.8rem;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 5px;
    margin-left: auto;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.commit-item:hover .commit-time {
    color: #aaa;
    border-color: rgba(0, 255, 249, 0.2);
    background: rgba(0, 255, 249, 0.05);
}

.commit-item-message {
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.95rem;
    line-height: 1.6;
    padding-left: 0.75rem;
    border-left: 2px solid rgba(0, 255, 249, 0.15);
    margin-left: 2.5rem;
    margin-top: 0.5rem;
}

.commit-item:hover .commit-item-message {
    color: var(--text-secondary);
    border-left-color: rgba(0, 255, 249, 0.3);
}

.commit-item-tags {
    margin-top: 0.75rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.commit-item-tags .commit-tag {
    color: var(--neon-cyan);
    font-size: 0.7rem;
    text-decoration: none;
    background: rgba(0, 255, 249, 0.08);
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    border: 1px solid rgba(0, 255, 249, 0.15);
    transition: all 0.15s ease;
}

.commit-item-tags .commit-tag:hover {
    background: rgba(0, 255, 249, 0.15);
    border-color: rgba(0, 255, 249, 0.3);
    box-shadow: 0 0 8px rgba(0, 255, 249, 0.2);
}

/* ==========================================================================
   PATCH SIZE INDICATORS - Visual commit impact
   ========================================================================== */

.patch-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    font-size: 1.1rem;
    border-radius: 6px;
    margin-right: 0.5rem;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.patch-indicator:hover {
    transform: scale(1.15);
}

/* Patch size color scales */
.patch-meta {
    background: rgba(128, 128, 128, 0.15);
    border: 1px solid rgba(128, 128, 128, 0.3);
}

.patch-tiny {
    background: linear-gradient(135deg, rgba(57, 255, 20, 0.15) 0%, rgba(57, 255, 20, 0.05) 100%);
    border: 1px solid rgba(57, 255, 20, 0.3);
    box-shadow: 0 0 8px rgba(57, 255, 20, 0.2);
}

.patch-small {
    background: linear-gradient(135deg, rgba(0, 255, 200, 0.15) 0%, rgba(0, 255, 200, 0.05) 100%);
    border: 1px solid rgba(0, 255, 200, 0.3);
    box-shadow: 0 0 8px rgba(0, 255, 200, 0.2);
}

.patch-medium {
    background: linear-gradient(135deg, rgba(0, 255, 249, 0.15) 0%, rgba(0, 255, 249, 0.05) 100%);
    border: 1px solid rgba(0, 255, 249, 0.3);
    box-shadow: 0 0 8px rgba(0, 255, 249, 0.2);
}

.patch-large {
    background: linear-gradient(135deg, rgba(255, 255, 0, 0.15) 0%, rgba(255, 255, 0, 0.05) 100%);
    border: 1px solid rgba(255, 255, 0, 0.3);
    box-shadow: 0 0 8px rgba(255, 255, 0, 0.2);
}

.patch-huge {
    background: linear-gradient(135deg, rgba(255, 150, 0, 0.2) 0%, rgba(255, 150, 0, 0.05) 100%);
    border: 1px solid rgba(255, 150, 0, 0.4);
    box-shadow: 0 0 10px rgba(255, 150, 0, 0.3);
}

.patch-massive {
    background: linear-gradient(135deg, rgba(255, 100, 100, 0.2) 0%, rgba(255, 100, 100, 0.05) 100%);
    border: 1px solid rgba(255, 100, 100, 0.4);
    box-shadow: 0 0 12px rgba(255, 100, 100, 0.3);
    animation: pulseMassive 2s ease-in-out infinite;
}

@keyframes pulseMassive {
    0%, 100% { box-shadow: 0 0 12px rgba(255, 100, 100, 0.3); }
    50% { box-shadow: 0 0 20px rgba(255, 100, 100, 0.5); }
}

/* Commit stats in header */
.commit-stats {
    display: flex;
    gap: 0.3rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
}

.stat-adds {
    color: var(--neon-green);
    background: rgba(57, 255, 20, 0.1);
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    font-weight: 500;
}

.stat-dels {
    color: #ff6b6b;
    background: rgba(255, 100, 100, 0.1);
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    font-weight: 500;
}

/* ==========================================================================
   TAGS VIEW
   ========================================================================== */

.tags-view .source-toolbar {
    border-bottom: 1px solid rgba(0, 255, 249, 0.15);
}

.tags-title {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--neon-cyan);
    text-transform: uppercase;
}

.tags-grid {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1rem;
    justify-content: flex-start;
    align-content: flex-start;
    width: 100%;
    overflow-y: auto;
}

/* Futuristic tag card - cyber terminal style */
.tag-card {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
    min-height: 2.5rem;
    background: linear-gradient(135deg,
        rgba(0, 255, 249, 0.08) 0%,
        rgba(0, 0, 0, 0.4) 50%,
        rgba(57, 255, 20, 0.04) 100%
    );
    border: 1px solid rgba(0, 255, 249, 0.2);
    border-left: 3px solid var(--neon-cyan);
    border-radius: 0;
    color: var(--neon-cyan);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    transition: all 0.2s ease-out;
    position: relative;
    overflow: hidden;
}

.tag-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 249, 0.1), transparent);
    transition: left 0.4s ease;
}

.tag-card:hover::before {
    left: 100%;
}

.tag-card:hover {
    background: linear-gradient(135deg,
        rgba(0, 255, 249, 0.18) 0%,
        rgba(0, 0, 0, 0.5) 50%,
        rgba(57, 255, 20, 0.1) 100%
    );
    border-color: var(--neon-cyan);
    color: #fff;
    transform: translateY(-2px) translateX(2px);
    box-shadow:
        0 4px 20px rgba(0, 255, 249, 0.3),
        inset 0 0 20px rgba(0, 255, 249, 0.05);
    text-shadow: 0 0 8px rgba(0, 255, 249, 0.5);
}

.tag-card .tag-name {
    font-weight: 600;
    letter-spacing: 0.3px;
}

.tag-card .tag-count {
    font-size: 0.7rem;
    font-weight: 500;
    background: linear-gradient(135deg, rgba(57, 255, 20, 0.15), rgba(0, 0, 0, 0.6));
    padding: 0.2rem 0.6rem;
    border-radius: 0;
    color: var(--neon-green);
    border: 1px solid rgba(57, 255, 20, 0.3);
    text-shadow: 0 0 6px rgba(57, 255, 20, 0.4);
}

.tag-card:hover .tag-count {
    background: linear-gradient(135deg, rgba(57, 255, 20, 0.25), rgba(0, 0, 0, 0.6));
    border-color: var(--neon-green);
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.3);
}

.tag-card.active {
    background: linear-gradient(135deg,
        rgba(0, 255, 249, 0.25) 0%,
        rgba(0, 0, 0, 0.5) 50%,
        rgba(57, 255, 20, 0.15) 100%
    );
    border-color: var(--neon-cyan);
    border-left-width: 4px;
    color: #fff;
    box-shadow:
        0 0 25px rgba(0, 255, 249, 0.35),
        inset 0 0 30px rgba(0, 255, 249, 0.08);
    text-shadow: 0 0 10px rgba(0, 255, 249, 0.6);
}

/* Tags header and filter controls */
.tags-header {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    margin-bottom: 0;
    background: linear-gradient(180deg,
        rgba(0, 255, 249, 0.08) 0%,
        rgba(0, 0, 0, 0.4) 100%
    );
    border-bottom: 1px solid rgba(0, 255, 249, 0.2);
    border-radius: 0;
    font-family: var(--font-mono);
    font-size: 0.85rem;
}

.tags-count {
    color: var(--neon-cyan);
    font-weight: 600;
    text-shadow: 0 0 10px rgba(0, 255, 249, 0.4);
}

.filter-hint {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
    margin-left: auto;
}

.active-filters {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.filter-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
}

.active-tag,
.active-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.7rem;
    background: linear-gradient(135deg, rgba(0, 255, 249, 0.2), rgba(0, 255, 249, 0.1));
    border: 1px solid var(--neon-cyan);
    border-left: 3px solid var(--neon-cyan);
    border-radius: 0;
    color: var(--neon-cyan);
    cursor: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s;
    text-shadow: 0 0 8px rgba(0, 255, 249, 0.4);
}

.active-tag:hover,
.active-filter-tag:hover {
    background: linear-gradient(135deg, rgba(255, 100, 100, 0.25), rgba(255, 100, 100, 0.1));
    border-color: #ff6464;
    border-left-color: #ff6464;
    color: #ff6464;
    text-shadow: 0 0 8px rgba(255, 100, 100, 0.5);
}

.clear-filters,
.clear-all-btn {
    padding: 0.3rem 0.7rem;
    background: linear-gradient(135deg, rgba(255, 100, 100, 0.15), rgba(255, 100, 100, 0.05));
    border: 1px solid rgba(255, 100, 100, 0.4);
    border-radius: 0;
    color: #ff6464;
    cursor: inherit;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.2s;
}

.clear-filters:hover,
.clear-all-btn:hover {
    background: linear-gradient(135deg, rgba(255, 100, 100, 0.25), rgba(255, 100, 100, 0.1));
    border-color: #ff6464;
    box-shadow: 0 0 15px rgba(255, 100, 100, 0.3);
}

/* Active tag filters in activity view */
.active-tag-filters {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    margin-bottom: 0;
    background: linear-gradient(180deg, rgba(0, 255, 249, 0.08), rgba(0, 0, 0, 0.3));
    border: 1px solid rgba(0, 255, 249, 0.2);
    border-left: 3px solid var(--neon-cyan);
    border-radius: 0;
    width: 100%;
}

/* Tags cloud section */
.tags-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1.25rem;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(0, 255, 249, 0.15);
    margin-bottom: 0;
}

/* Tags table */
.tags-table-wrapper {
    flex: 1;
    overflow-y: auto;
    width: 100%;
}

.tags-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 4px;
    font-family: var(--font-mono);
    font-size: 0.9rem;
}

.tags-table thead {
    position: sticky;
    top: 0;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.98) 0%,
        rgba(0, 20, 25, 0.95) 100%);
    z-index: 2;
    box-shadow: 0 2px 10px rgba(0, 255, 249, 0.1);
}

.tags-table th {
    padding: 0.75rem 1rem;
    text-align: left;
    color: var(--neon-cyan);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1px;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid rgba(0, 255, 249, 0.3);
    text-shadow: 0 0 8px rgba(0, 255, 249, 0.3);
}

.tags-table .col-tag { width: 200px; max-width: 200px; }
.tags-table .col-count { width: 90px; max-width: 90px; text-align: right; }
.tags-table .col-first { width: 180px; max-width: 180px; }
.tags-table .col-last { width: 180px; max-width: 180px; }
.tags-table .col-bar { width: auto; min-width: 120px; }

.tag-row {
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    background: rgba(0, 0, 0, 0.3);
    contain: layout style;
    will-change: transform, background;
}

.tag-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: transparent;
    transition: all 0.2s ease;
    border-radius: 0 2px 2px 0;
}

.tag-row:hover {
    background: linear-gradient(90deg,
        rgba(0, 255, 249, 0.15) 0%,
        rgba(0, 255, 249, 0.08) 20%,
        rgba(0, 255, 249, 0.03) 50%,
        transparent 100%
    );
    transform: translateX(4px);
    box-shadow: 0 2px 10px rgba(0, 255, 249, 0.1);
}

.tag-row:hover::before {
    background: var(--neon-cyan);
    box-shadow: 0 0 15px rgba(0, 255, 249, 0.6);
    width: 5px;
}

.tag-row.active {
    background: linear-gradient(90deg,
        rgba(0, 255, 249, 0.2) 0%,
        rgba(0, 255, 249, 0.12) 20%,
        rgba(0, 255, 249, 0.05) 50%,
        transparent 100%
    );
    border: 1px solid rgba(0, 255, 249, 0.2);
    box-shadow: 0 0 20px rgba(0, 255, 249, 0.15);
}

.tag-row.active::before {
    background: var(--neon-cyan);
    width: 6px;
    box-shadow:
        0 0 20px rgba(0, 255, 249, 0.8),
        0 0 30px rgba(0, 255, 249, 0.4);
}

.tag-row td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(0, 255, 249, 0.08);
}

.tag-row .tag-name {
    color: var(--neon-cyan);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    text-shadow: 0 0 8px rgba(0, 255, 249, 0.3);
    transition: all 0.2s ease;
}

.tag-row:hover .tag-name {
    color: #fff;
    text-shadow: 0 0 15px rgba(0, 255, 249, 0.6);
    transform: translateX(2px);
}

.tag-row.active .tag-name {
    color: #fff;
    font-size: 1rem;
    text-shadow:
        0 0 20px rgba(0, 255, 249, 0.8),
        0 0 30px rgba(0, 255, 249, 0.4);
}

.tag-row .col-count {
    color: var(--neon-green);
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    text-shadow: 0 0 6px rgba(57, 255, 20, 0.3);
}

.tag-row:hover .col-count {
    text-shadow: 0 0 10px rgba(57, 255, 20, 0.5);
}

.tag-bar {
    height: 12px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(0, 255, 249, 0.15);
    border-radius: 0;
    overflow: hidden;
}

.tag-bar-fill {
    height: 100%;
    background: linear-gradient(90deg,
        var(--neon-cyan) 0%,
        rgba(0, 255, 200, 1) 50%,
        var(--neon-green) 100%);
    border-radius: 0;
    box-shadow: 0 0 15px rgba(0, 255, 249, 0.4);
    transition: all 0.2s ease;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.tag-row:hover .tag-bar-fill {
    box-shadow:
        0 0 12px rgba(0, 255, 249, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.tag-row:hover .tag-bar-fill {
    box-shadow: 0 0 8px rgba(0, 255, 249, 0.5);
}

/* Tag file links in table */
.tag-file-link {
    color: var(--neon-cyan);
    text-decoration: none;
    font-size: 0.8rem;
    opacity: 0.8;
    transition: all var(--transition-fast);
}

.tag-file-link:hover {
    opacity: 1;
    text-decoration: underline;
}

/* Tags grid container - full width */
.tags-grid {
    width: 100%;
    padding: 0;
}

.tag-list-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 255, 249, 0.08);
    transition: all 0.15s ease;
    position: relative;
}

.tag-list-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: transparent;
    transition: all 0.15s ease;
}

.tag-list-item:hover {
    background: linear-gradient(90deg,
        rgba(0, 255, 249, 0.1) 0%,
        rgba(0, 255, 249, 0.03) 50%,
        transparent 100%
    );
}

.tag-list-item:hover::before {
    background: var(--neon-cyan);
    box-shadow: 0 0 10px rgba(0, 255, 249, 0.5);
}

.tag-list-item.active {
    background: linear-gradient(90deg,
        rgba(0, 255, 249, 0.15) 0%,
        rgba(0, 255, 249, 0.05) 50%,
        transparent 100%
    );
}

.tag-list-item.active::before {
    background: var(--neon-cyan);
    width: 4px;
    box-shadow: 0 0 15px rgba(0, 255, 249, 0.6);
}

.tag-list-name {
    flex: 0 0 200px;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--neon-cyan);
    font-weight: 600;
    letter-spacing: 0.3px;
}

.tag-list-item:hover .tag-list-name {
    color: #fff;
    text-shadow: 0 0 10px rgba(0, 255, 249, 0.5);
}

.tag-list-item.active .tag-list-name {
    color: #fff;
    text-shadow: 0 0 12px rgba(0, 255, 249, 0.6);
}

.tag-list-bar {
    flex: 1;
    height: 8px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0;
    overflow: hidden;
}

.tag-list-bar-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg,
        var(--neon-cyan) 0%,
        var(--neon-green) 100%
    );
    border-radius: 0;
    transition: all 0.2s ease;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.tag-list-item:hover .tag-list-bar-fill {
    box-shadow:
        0 0 12px rgba(0, 255, 249, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.tag-list-count {
    flex: 0 0 70px;
    text-align: right;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--neon-green);
    text-shadow: 0 0 6px rgba(57, 255, 20, 0.3);
}

.tag-list-item:hover .tag-list-count {
    color: #fff;
    text-shadow: 0 0 10px rgba(57, 255, 20, 0.5);
}

/* ==========================================================================
   PAGE FOOTER
   ========================================================================== */

.source-page-footer {
    text-align: center;
    padding: 2rem;
}

.footer-link {
    color: var(--neon-cyan);
    text-decoration: none;
    font-family: var(--font-mono);
}

.footer-link:hover {
    text-decoration: underline;
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

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

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */


@media (max-width: 768px) {
    .source-toolbar {
        padding: 0.5rem;
    }

    .source-breadcrumb {
        font-size: 0.75rem;
    }

    .source-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .src-table th:nth-child(2),
    .src-col-commit {
        display: none;
    }

    .src-table th,
    .src-row td {
        padding: 0.4rem 0.5rem;
    }

    .blame-meta {
        flex: 0 0 80px;
        font-size: 0.65rem;
    }

    .blame-num {
        flex: 0 0 35px;
        font-size: 0.7rem;
    }

    .blame-code {
        font-size: 0.7rem;
    }

    .dir-commit-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .commit-message {
        max-width: 100%;
    }

    .src-file-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .src-file-actions {
        margin-left: 0;
        width: 100%;
    }

    .search-container {
        margin: 0 1rem;
    }
}

@media (max-width: 480px) {
    .source-actions .src-btn span:not(.icon) {
        display: none;
    }

    .blame-meta {
        display: none;
    }
}

/* ==========================================================================
   CUSTOM SCROLLBARS - Terminal Theme
   ========================================================================== */

/* Firefox */
.source-page,
.source-page * {
    scrollbar-width: thin;
    scrollbar-color: var(--neon-cyan) rgba(0, 0, 0, 0.3);
}

/* WebKit (Chrome, Safari, Edge) */
.source-page ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.source-page ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.source-page ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--neon-cyan), rgba(0, 255, 249, 0.6));
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.3);
}

.source-page ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #00ffff, var(--neon-cyan));
    box-shadow: 0 0 10px rgba(0, 255, 249, 0.5);
}

.source-page ::-webkit-scrollbar-corner {
    background: rgba(0, 0, 0, 0.3);
}

/* Commits list scrollbar */
.src-commits-list {
    max-height: 250px;
    overflow-y: auto;
}

/* Commits view full list */
.commits-full-list {
    flex: 1;
    overflow-y: auto;
}

/* ==========================================================================
   SCRIPT PURPOSE WIDGET
   ========================================================================== */

.src-purpose-widget {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.12) 0%, rgba(255, 180, 0, 0.06) 100%);
    border: 1px solid rgba(255, 215, 0, 0.35);
    border-left: 3px solid rgba(255, 215, 0, 0.6);
    border-radius: 4px;
    margin-bottom: 0.5rem;
    position: relative;
    overflow: hidden;
}

.src-purpose-widget::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #ffd700;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
}

.src-purpose-widget .purpose-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.4));
}

.src-purpose-widget .purpose-text {
    color: #ffd700;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
}

/* ==========================================================================
   README SECTION
   ========================================================================== */

.dir-readme {
    margin-top: 1.5rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 255, 249, 0.15);
    border-radius: 8px;
    overflow: hidden;
}

.readme-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: rgba(0, 255, 249, 0.05);
    border-bottom: 1px solid rgba(0, 255, 249, 0.15);
}

.readme-header .readme-icon {
    font-size: 1rem;
}

.readme-header .readme-filename {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    color: var(--neon-cyan);
}

.readme-content {
    padding: 1.25rem;
    color: #ccc;
    font-size: 0.9rem;
    line-height: 1.7;
    max-height: 500px;
    overflow-y: auto;
}

.readme-content h1,
.readme-content h2,
.readme-content h3,
.readme-content h4 {
    font-family: 'Rajdhani', sans-serif;
    color: var(--neon-cyan);
    margin: 1.25rem 0 0.75rem;
}

.readme-content h1:first-child,
.readme-content h2:first-child {
    margin-top: 0;
}

.readme-content h1 { font-size: 1.5rem; }
.readme-content h2 { font-size: 1.25rem; }
.readme-content h3 { font-size: 1.1rem; }
.readme-content h4 { font-size: 1rem; }

.readme-content p {
    margin: 0.75rem 0;
}

.readme-content code {
    background: rgba(0, 255, 249, 0.1);
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85em;
    color: var(--neon-cyan);
}

.readme-content pre {
    background: rgba(0, 0, 0, 0.5);
    padding: 1rem;
    border-radius: 4px;
    overflow-x: auto;
    margin: 1rem 0;
}

.readme-content pre code {
    background: none;
    padding: 0;
    color: #aaa;
}

.readme-content ul,
.readme-content ol {
    margin: 0.75rem 0;
    padding-left: 1.5rem;
}

.readme-content li {
    margin: 0.3rem 0;
}

.readme-content a {
    color: var(--neon-cyan);
    text-decoration: none;
}

.readme-content a:hover {
    text-decoration: underline;
}

.readme-content blockquote {
    border-left: 3px solid var(--neon-cyan);
    margin: 1rem 0;
    padding: 0.5rem 1rem;
    background: rgba(0, 255, 249, 0.05);
    color: #aaa;
}

.readme-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

.readme-content th,
.readme-content td {
    border: 1px solid rgba(0, 255, 249, 0.2);
    padding: 0.5rem 0.75rem;
    text-align: left;
}

.readme-content th {
    background: rgba(0, 255, 249, 0.1);
    color: var(--neon-cyan);
}

.readme-content img {
    max-width: 100%;
    border-radius: 4px;
}

/* ==========================================================================
   PARTICLE CANVAS BACKGROUND (replaces scanlines/noise overlays)
   ========================================================================== */

#kildeParticles {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.35;
}

/* CRT vignette - kept for depth */
.source-page::after {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse 70% 60% at 50% 50%, transparent 40%, rgba(0, 0, 4, 0.7) 100%);
    pointer-events: none;
    z-index: 1;
}



/* ==========================================================================
   ACTIVITY TABLE - Cyberpunk data grid
   ========================================================================== */

.activity-table-container {
    background: rgba(2, 2, 8, 0.5);
}

.activity-table th {
    background: linear-gradient(180deg, rgba(0, 255, 249, 0.12) 0%, rgba(0, 255, 249, 0.04) 100%);
    color: var(--neon-cyan);
    font-size: 0.7rem;
    letter-spacing: 1.5px;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid rgba(0, 255, 249, 0.3);
    text-shadow: 0 0 8px rgba(0, 255, 249, 0.3);
}

.activity-table td {
    border-bottom: 1px solid rgba(0, 255, 249, 0.06);
}

.activity-row {
    position: relative;
}

.activity-row:hover {
    background: linear-gradient(90deg, rgba(0, 255, 249, 0.1) 0%, rgba(0, 255, 249, 0.03) 50%, transparent 100%);
    border-left: 3px solid var(--neon-cyan);
    box-shadow: inset 3px 0 20px rgba(0, 255, 249, 0.08);
}

.activity-row:hover .file-link {
    color: #fff;
    text-shadow: 0 0 8px rgba(255, 255, 0, 0.3);
}

.activity-row:nth-child(even) {
    background: rgba(0, 255, 249, 0.015);
}

.col-time {
    color: var(--neon-green);
    text-shadow: 0 0 6px rgba(57, 255, 20, 0.3);
    font-size: 0.8rem;
}


/* ==========================================================================
   TAG CLOUD - Glowing interactive chips
   ========================================================================== */

.tag-cloud {
    background: rgba(2, 2, 8, 0.6);
    border: 1px solid rgba(0, 255, 249, 0.15);
    padding: 1.25rem;
    position: relative;
}

.tag-cloud::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--neon-cyan), var(--neon-magenta) 50%, transparent);
    opacity: 0.5;
}

.section-header {
    border-bottom: 1px solid rgba(0, 255, 249, 0.15);
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
}

.section-header span {
    color: var(--neon-cyan);
    text-shadow: 0 0 8px rgba(0, 255, 249, 0.3);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.8rem;
}

/* ==========================================================================
   COMMIT ITEMS - Card with glow, scanline, lift
   ========================================================================== */

.commit-item {
    background: rgba(5, 5, 15, 0.8);
    border: 1px solid rgba(0, 255, 249, 0.12);
    border-left: 3px solid rgba(0, 255, 249, 0.2);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

/* Scanline sweep through commit cards */
.commit-item::before {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 249, 0.4), transparent);
    top: 0;
    opacity: 0;
    animation: commit-scanline 4s ease-in-out infinite;
    pointer-events: none;
}

.commit-item:nth-child(2)::before { animation-delay: 0.8s; }
.commit-item:nth-child(3)::before { animation-delay: 1.6s; }
.commit-item:nth-child(4)::before { animation-delay: 2.4s; }

@keyframes commit-scanline {
    0%, 100% { top: 0; opacity: 0; }
    5% { opacity: 0.6; }
    95% { opacity: 0.6; }
    100% { top: 100%; opacity: 0; }
}

.commit-item:hover {
    background: linear-gradient(135deg, rgba(0, 255, 249, 0.08) 0%, rgba(5, 5, 15, 0.9) 100%);
    border-color: rgba(0, 255, 249, 0.4);
    border-left-color: var(--neon-cyan);
    transform: translateX(4px);
    box-shadow:
        0 0 30px rgba(0, 255, 249, 0.12),
        inset 0 0 20px rgba(0, 255, 249, 0.04);
}

.commit-item:hover::before {
    opacity: 1;
}

.commit-item .commit-hash {
    text-shadow: 0 0 8px rgba(57, 255, 20, 0.4);
}

.commit-item .commit-author {
    text-shadow: 0 0 8px rgba(0, 255, 249, 0.3);
}

.commit-item-message {
    border-left: 2px solid rgba(0, 255, 249, 0.2);
}

.commit-item:hover .commit-item-message {
    border-left-color: var(--neon-cyan);
}

/* ==========================================================================
   TAG CARDS - Neon chips with sweep + glow
   ========================================================================== */

.tag-card {
    background: rgba(5, 5, 15, 0.85);
    border: 1px solid rgba(0, 255, 249, 0.2);
    border-left: 3px solid var(--neon-cyan);
}

.tag-card:hover {
    background: rgba(0, 255, 249, 0.12);
    border-color: var(--neon-cyan);
    color: #fff;
    box-shadow:
        0 0 20px rgba(0, 255, 249, 0.25),
        inset 0 0 15px rgba(0, 255, 249, 0.06);
    transform: translateY(-2px);
    text-shadow: 0 0 10px rgba(0, 255, 249, 0.5);
}

.tag-card .tag-count {
    text-shadow: 0 0 6px rgba(57, 255, 20, 0.4);
}

/* ==========================================================================
   DIRECTORY TABLE - Glowing data rows
   ========================================================================== */

.src-table th {
    background: linear-gradient(180deg, rgba(0, 255, 249, 0.1) 0%, rgba(0, 255, 249, 0.03) 100%);
    color: var(--neon-cyan);
    text-shadow: 0 0 6px rgba(0, 255, 249, 0.3);
    letter-spacing: 1px;
}

.src-row:hover {
    background: linear-gradient(90deg, rgba(0, 255, 249, 0.08) 0%, transparent 80%);
    box-shadow: inset 3px 0 0 var(--neon-cyan);
}

.src-row:hover .src-col-name {
    text-shadow: 0 0 8px rgba(0, 255, 249, 0.3);
}

.src-row-dir:hover .src-col-name {
    text-shadow: 0 0 12px rgba(0, 255, 249, 0.5);
}

/* ==========================================================================
   BUTTONS - Brighter sweep + glow
   ========================================================================== */

.src-btn::before {
    background: linear-gradient(90deg, transparent, rgba(0, 255, 249, 0.3), transparent);
}

.src-btn:hover {
    box-shadow: 0 0 20px rgba(0, 255, 249, 0.25);
}

/* ==========================================================================
   SEARCH MODAL - CRT terminal feel
   ========================================================================== */

.search-modal .search-container {
    box-shadow:
        0 0 60px rgba(0, 255, 249, 0.15),
        0 0 120px rgba(0, 255, 249, 0.05),
        inset 0 1px 0 rgba(0, 255, 249, 0.2);
}

.search-input {
    text-shadow: 0 0 8px rgba(0, 255, 249, 0.3);
}

/* Blinking cursor in loading states */
.source-loading::after {
    content: '█';
    color: var(--neon-cyan);
    animation: cursor-blink 1s step-end infinite;
    margin-left: 0.3rem;
    font-size: 0.8em;
}

@keyframes cursor-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}


.filter-badge {
    text-shadow: 0 0 6px rgba(0, 255, 249, 0.3);
}

/* Keyboard shortcut badge glow */
.kbd {
    text-shadow: 0 0 4px rgba(0, 255, 249, 0.3);
    border-color: rgba(0, 255, 249, 0.15);
}

/* ==========================================================================
   VIEW TITLES
   ========================================================================== */

.view-title {
    font-size: 0.9rem;
    letter-spacing: 1.5px;
    text-shadow: 0 0 10px rgba(0, 255, 249, 0.4);
}

/* ==========================================================================
   KILDE HUD NAVIGATION - Game-style top bar
   ========================================================================== */

.kilde-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    height: 44px;
    background: linear-gradient(180deg, #0e0e18 0%, #08080c 100%);
    flex-shrink: 0;
    border-bottom: none;
}

.kilde-nav-glow {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        #00fff9 20%,
        #ff00ff 50%,
        #39ff14 80%,
        transparent 100%
    );
    background-size: 200% 100%;
    box-shadow:
        0 0 6px rgba(0, 255, 249, 0.6),
        0 0 15px rgba(255, 0, 255, 0.4),
        0 0 30px rgba(0, 255, 249, 0.2);
    animation: glowSlide 3s linear infinite;
}

@keyframes glowSlide {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.kilde-nav-inner {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 1rem;
    font-family: '3270 Nerd Font Mono', 'JetBrains Mono', monospace;
}

.kilde-nav-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 0 0 auto;
}

/* Back button */
.kilde-back {
    color: #555;
    text-decoration: none;
    font-size: 1.1rem;
    padding: 0.15rem 0.35rem;
    transition: all 0.25s;
    line-height: 1;
    border-radius: 4px;
}
.kilde-back:hover {
    color: #00fff9;
    text-shadow: 0 0 10px rgba(0, 255, 249, 0.6);
    background: rgba(0, 255, 249, 0.06);
}
.kilde-back-arrow {
    display: inline-block;
    transition: transform 0.2s;
}
.kilde-back:hover .kilde-back-arrow {
    transform: translateX(-2px);
}

/* Status indicator */
.kilde-status {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.6rem;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.kilde-status .status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #333;
    animation: statusPulse 1.5s infinite;
}
.kilde-status .status-dot.connected {
    background: #00fff9;
    box-shadow: 0 0 6px #00fff9, 0 0 12px rgba(0, 255, 249, 0.3);
    animation: none;
}

/* Center branding */
.kilde-nav-center {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    user-select: none;
    flex: 1;
    justify-content: center;
}

.kilde-icon {
    font-size: 0.95rem;
    margin-right: 0.4rem;
    animation: iconFloat 3s ease-in-out infinite;
    filter: drop-shadow(0 0 4px rgba(0, 200, 255, 0.5));
}

@keyframes iconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-1.5px); }
}

.kilde-letter {
    display: inline-block;
    transition: all 0.3s;
}
.kilde-letter:hover {
    transform: scale(1.2) translateY(-1px);
    filter: brightness(1.4);
}

.kilde-k {
    color: #00fff9;
    text-shadow: 0 0 8px rgba(0, 255, 249, 0.7), 0 0 20px rgba(0, 255, 249, 0.3);
}
.kilde-i {
    color: #ff00ff;
    text-shadow: 0 0 8px rgba(255, 0, 255, 0.7), 0 0 20px rgba(255, 0, 255, 0.3);
}
.kilde-l {
    color: #39ff14;
    text-shadow: 0 0 8px rgba(57, 255, 20, 0.7), 0 0 20px rgba(57, 255, 20, 0.3);
}
.kilde-d {
    color: #ffd700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.7), 0 0 20px rgba(255, 215, 0, 0.3);
}
.kilde-e {
    color: #00fff9;
    text-shadow: 0 0 8px rgba(0, 255, 249, 0.7), 0 0 20px rgba(0, 255, 249, 0.3);
}

.kilde-dot {
    color: #333;
    font-size: 1rem;
    margin: 0 0.05rem;
    opacity: 0.4;
}

/* Nav right section */
.kilde-nav-right {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex: 0 0 auto;
}

/* View buttons */
.kilde-view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 32px;
    padding: 0 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid #222;
    color: #555;
    cursor: pointer;
    transition: all 0.25s;
    border-radius: 4px;
    line-height: 1;
    white-space: nowrap;
}

.btn-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.kilde-view-btn:hover {
    border-color: rgba(0, 255, 249, 0.5);
    color: #00fff9;
    box-shadow: 0 0 10px rgba(0, 255, 249, 0.2);
    background: rgba(0, 255, 249, 0.04);
}

.kilde-view-btn.active {
    border-color: rgba(0, 255, 249, 0.6);
    color: #00fff9;
    background: rgba(0, 255, 249, 0.1);
    box-shadow: 0 0 15px rgba(0, 255, 249, 0.3), inset 0 0 8px rgba(0, 255, 249, 0.1);
}

.kilde-view-btn svg {
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ==========================================================================
   XP BADGE - Gamification HUD element
   ========================================================================== */

.kilde-xp-badge {
    display: none; /* shown when initialized */
    align-items: center;
    gap: 0.3rem;
    font-family: '3270 Nerd Font Mono', 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    color: #888;
    padding: 0.2rem 0.6rem;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 255, 249, 0.15);
    border-radius: 12px;
    white-space: nowrap;
    margin-right: 0.5rem;
    box-shadow: 0 0 8px rgba(0, 255, 249, 0.08);
}

/* ==========================================================================
   ACHIEVEMENT TOASTS
   ========================================================================== */

.kilde-achievement-toast {
    position: fixed;
    bottom: 2rem;
    right: -350px;
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, rgba(10, 14, 39, 0.98) 0%, rgba(0, 20, 30, 0.95) 100%);
    border: 1px solid rgba(255, 215, 0, 0.4);
    border-left: 3px solid #ffd700;
    border-radius: 8px;
    box-shadow:
        0 0 30px rgba(255, 215, 0, 0.2),
        0 0 60px rgba(255, 215, 0, 0.1);
    font-family: '3270 Nerd Font Mono', 'JetBrains Mono', monospace;
    transition: right 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.kilde-achievement-toast.show {
    right: 2rem;
}

.kilde-achievement-toast .achievement-icon {
    font-size: 1.5rem;
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.5));
}

.kilde-achievement-toast .achievement-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.kilde-achievement-toast .achievement-info strong {
    color: #ffd700;
    font-size: 0.85rem;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

.kilde-achievement-toast .achievement-info span {
    color: #888;
    font-size: 0.7rem;
}

/* ==========================================================================
   LEVEL UP OVERLAY
   ========================================================================== */

.kilde-levelup {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.kilde-levelup.show {
    opacity: 1;
}

.levelup-content {
    text-align: center;
    position: relative;
}

.levelup-flash {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, transparent 60%);
    animation: levelFlash 0.6s ease-out;
    pointer-events: none;
}

@keyframes levelFlash {
    0% { opacity: 1; transform: scale(0.5); }
    100% { opacity: 0; transform: scale(2); }
}

.levelup-text {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.levelup-label {
    font-family: 'Rajdhani', 'JetBrains Mono', monospace;
    font-size: 1rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.3em;
}

.levelup-name {
    font-family: 'Rajdhani', 'JetBrains Mono', monospace;
    font-size: 3rem;
    font-weight: 700;
    text-shadow: 0 0 30px currentColor, 0 0 60px currentColor;
    animation: levelPulse 0.8s ease-in-out infinite alternate;
}

@keyframes levelPulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.05); }
}

.levelup-confetti {
    position: fixed;
    top: 50%;
    left: 50%;
    pointer-events: none;
}

.confetti-piece {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    animation: confettiFall 1.5s var(--delay, 0s) ease-out forwards;
}

@keyframes confettiFall {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translate(var(--x), var(--y)) rotate(var(--r));
        opacity: 0;
    }
}

/* ==========================================================================
   COMMIT SUMMARY LINE (Browse view single-line)
   ========================================================================== */

.commit-summary-line {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1rem;
    background: rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid rgba(0, 255, 249, 0.08);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    overflow: hidden;
    white-space: nowrap;
}

.commit-summary-icon {
    flex-shrink: 0;
}

.commit-summary-hash {
    color: var(--neon-green);
    background: rgba(57, 255, 20, 0.1);
    border: 1px solid rgba(57, 255, 20, 0.2);
    padding: 0.1rem 0.35rem;
    border-radius: 2px;
    font-size: 0.75rem;
    text-decoration: none;
    flex-shrink: 0;
}

.commit-summary-hash:hover {
    background: rgba(57, 255, 20, 0.2);
    color: #fff;
}

.commit-summary-msg {
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.commit-summary-author {
    color: var(--text-subtle);
    flex-shrink: 0;
}

.commit-summary-time {
    color: var(--text-faint);
    flex-shrink: 0;
}

.commit-summary-sep {
    color: rgba(0, 255, 249, 0.2);
    flex-shrink: 0;
}

.commit-summary-all {
    color: var(--neon-cyan);
    text-decoration: none;
    font-size: 0.75rem;
    flex-shrink: 0;
    white-space: nowrap;
}

.commit-summary-all:hover {
    text-decoration: underline;
    text-shadow: 0 0 8px rgba(0, 255, 249, 0.4);
}

/* ==========================================================================
   FILE FOOTER (hashtags + refs moved below code)
   ========================================================================== */

.src-file-footer {
    border-top: 1px solid rgba(0, 255, 249, 0.12);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 255, 249, 0.02) 100%);
    padding-top: 0.25rem;
}

/* ==========================================================================
   TERMINAL CONTAINER (embedded xterm.js)
   ========================================================================== */

.kilde-terminal-container {
    background: #0a0e17;
    position: relative;
    z-index: 1;
    width: fit-content;
    height: fit-content;
}

/* Force xterm canvas to capture all pointer events */
.kilde-terminal-container .xterm {
    position: relative;
    z-index: 10;
}

/* Chromatic aberration — slight RGB split on the terminal text */
.kilde-terminal-container .xterm-screen {
    text-shadow:
        0.3px 0 0 rgba(255, 0, 0, 0.06),
        -0.3px 0 0 rgba(0, 100, 255, 0.06);
}

/* Terminal view fills all available space, centers the monitor */
#viewTerminal.active {
    flex: 1;
    min-height: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* ==========================================================================
   RETRO CRT MONITOR
   ========================================================================== */

.retro-monitor {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    padding: 12px 16px 6px;
}

.retro-monitor-bezel {
    display: flex;
    flex-direction: column;
    width: fit-content;
    max-width: 100%;
    background: linear-gradient(180deg, #3a3a4a 0%, #2a2a38 8%, #222230 50%, #1e1e2c 92%, #2d2d3d 100%);
    border-radius: 12px 12px 8px 8px;
    padding: 10px 12px 0 12px;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.06),
        inset 0 1px 0 rgba(255,255,255,0.1),
        inset 0 -1px 0 rgba(0,0,0,0.4),
        0 8px 32px rgba(0,0,0,0.7),
        0 2px 8px rgba(0,0,0,0.5);
    position: relative;
}

/* Model label embossed in top-right */
.retro-monitor-label {
    position: absolute;
    top: 4px;
    right: 20px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.12);
    text-transform: uppercase;
}

.retro-monitor-freq {
    color: rgba(0, 255, 249, 0.15);
    margin-left: 4px;
}

/* Screen inset - the "glass" area */
.retro-monitor-screen {
    display: flex;
    flex-direction: column;
    width: fit-content;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    box-shadow:
        inset 0 0 30px rgba(0,0,0,0.8),
        inset 0 0 4px rgba(0,0,0,0.9),
        0 0 8px rgba(0, 255, 249, 0.05),
        0 0 30px rgba(0, 255, 249, 0.02);
    border: 2px solid #111118;
}

/* ── CRT EFFECTS ── */

/* CRT effects sit between terminal background and xterm canvas.
   All have pointer-events:none. The .xterm element has z-index:10
   so it captures all mouse/keyboard input above the effects. */

/* Scanlines + RGB sub-pixel rasterization */
.retro-scanlines {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background:
        /* Horizontal scanlines */
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 2px,
            rgba(0, 0, 0, 0.12) 2px,
            rgba(0, 0, 0, 0.12) 3px
        ),
        /* RGB sub-pixel columns (visible on light text) */
        repeating-linear-gradient(
            90deg,
            rgba(255, 0, 0, 0.02) 0px,
            rgba(0, 0, 0, 0) 1px,
            rgba(0, 255, 0, 0.02) 1px,
            rgba(0, 0, 0, 0) 2px,
            rgba(0, 100, 255, 0.02) 2px,
            rgba(0, 0, 0, 0) 3px
        );
}

/* Rolling CRT refresh bar */
.retro-screen-flicker {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background: linear-gradient(
        0deg,
        transparent 0%,
        rgba(255, 255, 255, 0.012) 10%,
        rgba(255, 255, 255, 0.025) 20%,
        transparent 30%
    );
    background-size: 100% 100%;
    animation: crt-roll 6s linear infinite;
}

@keyframes crt-roll {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

/* Vignette — CRT edge darkening */
.retro-monitor-screen::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(
        ellipse at 50% 50%,
        transparent 55%,
        rgba(0, 0, 0, 0.35) 100%
    );
}

/* Glass reflection */
.retro-monitor-screen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 8%;
    right: 55%;
    height: 35%;
    z-index: 5;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(
        160deg,
        rgba(255, 255, 255, 0.03) 0%,
        transparent 50%
    );
}

/* Phosphor glow on screen — green-cyan tinge on the glass */
.retro-monitor-screen {
    box-shadow:
        inset 0 0 30px rgba(0,0,0,0.8),
        inset 0 0 4px rgba(0,0,0,0.9),
        0 0 15px rgba(0, 255, 249, 0.04),
        0 0 50px rgba(0, 255, 249, 0.02),
        0 0 100px rgba(0, 255, 200, 0.01);
    border: 2px solid #111118;
}

/* Chin strip — thin bar under screen */
.retro-monitor-chin {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px 5px;
    flex-shrink: 0;
}

/* Power LED */
.retro-monitor-led {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #39ff14;
    box-shadow: 0 0 4px #39ff14, 0 0 8px rgba(57, 255, 20, 0.4);
    animation: led-pulse 3s ease-in-out infinite;
}

@keyframes led-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 4px #39ff14, 0 0 8px rgba(57, 255, 20, 0.4); }
    50% { opacity: 0.7; box-shadow: 0 0 2px #39ff14, 0 0 4px rgba(57, 255, 20, 0.2); }
}

/* Adjustment knobs */
.retro-monitor-controls {
    margin-left: auto;
    display: flex;
    gap: 8px;
    align-items: center;
}

.retro-knob {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3a3a4a 0%, #252535 50%, #1a1a28 100%);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.1),
        0 1px 2px rgba(0,0,0,0.4);
    position: relative;
}

/* Knob indicator line */
.retro-knob::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 50%;
    width: 1px;
    height: 3px;
    background: rgba(255,255,255,0.15);
    transform: translateX(-50%);
}

/* Ventilation slots */
.retro-monitor-vents {
    margin-left: 12px;
    display: flex;
    gap: 3px;
}

.retro-monitor-vents span {
    display: block;
    width: 12px;
    height: 2px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 1px;
}

/* Right side of chin — theme dots + fullscreen */
.retro-chin-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Theme color dots */
.retro-theme-dots {
    display: flex;
    gap: 4px;
    align-items: center;
}

.theme-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: none;
    padding: 0;
    cursor: pointer;
    opacity: 0.3;
    transition: opacity 0.2s, box-shadow 0.2s, transform 0.15s;
    outline: none;
}

.theme-dot:hover {
    opacity: 0.7;
    transform: scale(1.4);
}

.theme-dot.active {
    opacity: 1;
    box-shadow: 0 0 4px currentColor;
    transform: scale(1.3);
}

/* Theme dot colors */
.theme-dot[data-theme="cyber"]     { background: #00fff9; color: #00fff9; }
.theme-dot[data-theme="dracula"]   { background: #bd93f9; color: #bd93f9; }
.theme-dot[data-theme="matrix"]    { background: #00ff41; color: #00ff41; }
.theme-dot[data-theme="amber"]     { background: #ffb000; color: #ffb000; }
.theme-dot[data-theme="solarized"] { background: #268bd2; color: #268bd2; }

/* Fullscreen button */
.retro-fullscreen-btn {
    background: none;
    border: none;
    padding: 2px;
    color: rgba(255, 255, 255, 0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    transition: color 0.2s, background 0.2s;
    outline: none;
}

.retro-fullscreen-btn:hover {
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.05);
}

/* CRT power-on effect */
.retro-monitor-screen {
    animation: crt-on 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes crt-on {
    0% {
        filter: brightness(30) saturate(0);
        transform: scaleY(0.005) scaleX(0.8);
        opacity: 1;
    }
    20% {
        filter: brightness(15) saturate(0);
        transform: scaleY(0.005) scaleX(1);
    }
    45% {
        filter: brightness(3) saturate(0.5);
        transform: scaleY(1.05) scaleX(1);
    }
    65% {
        filter: brightness(1.5) saturate(0.8);
        transform: scaleY(0.98) scaleX(1);
    }
    80% {
        filter: brightness(1.1) saturate(1);
        transform: scaleY(1.01) scaleX(1);
    }
    100% {
        filter: brightness(1) saturate(1);
        transform: scaleY(1) scaleX(1);
    }
}

/* Stand */
.retro-monitor-stand {
    width: 60px;
    height: 14px;
    background: linear-gradient(180deg, #2a2a38, #222230);
    border-radius: 0 0 3px 3px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 2px 4px rgba(0,0,0,0.3);
    flex-shrink: 0;
}

/* Base */
.retro-monitor-base {
    width: 180px;
    height: 5px;
    background: linear-gradient(180deg, #2d2d3d, #252535);
    border-radius: 0 0 10px 10px;
    box-shadow:
        0 2px 6px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.05);
    flex-shrink: 0;
}

/* Plaque under the monitor */
.retro-monitor-plaque {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.15);
}

.retro-plaque-brand {
    color: rgba(255, 255, 255, 0.25);
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.retro-plaque-sep {
    color: rgba(255, 255, 255, 0.08);
}

.retro-plaque-tech {
    color: rgba(0, 255, 249, 0.2);
}

.retro-plaque-alt {
    color: rgba(57, 255, 20, 0.2);
}

/* Terminal tab accent - magenta instead of cyan */
.source-tab.terminal-tab {
    border-color: rgba(255, 0, 255, 0.3);
    border-bottom-color: rgba(255, 0, 255, 0.4);
    background: rgba(255, 0, 255, 0.08);
}

.source-tab.terminal-tab .tab-icon {
    color: var(--neon-magenta);
    filter: drop-shadow(0 0 6px rgba(255, 0, 255, 0.6));
}

.source-tab.terminal-tab .tab-name {
    color: #ddd;
}

.source-tab.terminal-tab.active {
    border: 1px solid var(--neon-magenta);
    border-bottom: 3px solid var(--neon-magenta);
    color: var(--neon-magenta);
    background: linear-gradient(180deg, rgba(255, 0, 255, 0.18) 0%, rgba(255, 0, 255, 0.1) 100%);
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.4), inset 0 1px 0 rgba(255, 0, 255, 0.2);
}

.source-tab.terminal-tab.active .tab-name {
    color: var(--neon-magenta);
    text-shadow: 0 0 8px rgba(255, 0, 255, 0.5);
}

.source-tab.terminal-tab:hover {
    background: rgba(255, 0, 255, 0.14);
    border-color: rgba(255, 0, 255, 0.5);
}

/* ==========================================================================
   TAB DRAG & DROP
   ========================================================================== */

.source-tab {
    user-select: none;
    -webkit-user-select: none;
}

.source-tab[draggable="true"] {
    cursor: grab;
}

.source-tab[draggable="true"]:active {
    cursor: grabbing;
}

.source-tab.dragging {
    opacity: 0.4;
}

.source-tab.drag-over-left {
    box-shadow: inset 3px 0 0 var(--neon-cyan);
}

.source-tab.drag-over-right {
    box-shadow: inset -3px 0 0 var(--neon-cyan);
}

/* xterm scrollbar in kildekode */
.kilde-terminal-container .xterm-viewport { overflow-y: auto !important; }
.kilde-terminal-container .xterm-viewport::-webkit-scrollbar { width: 6px; }
.kilde-terminal-container .xterm-viewport::-webkit-scrollbar-track { background: transparent; }
.kilde-terminal-container .xterm-viewport::-webkit-scrollbar-thumb { background: rgba(0, 255, 249, 0.15); border-radius: 3px; }
.kilde-terminal-container .xterm-viewport::-webkit-scrollbar-thumb:hover { background: rgba(0, 255, 249, 0.3); }

/* ==========================================================================
   VISUAL POLISH - Mind Palace Feel
   ========================================================================== */

/* Custom reticle cursor on source page */
.source-page {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><circle cx="16" cy="16" r="2" fill="%2300fff9" opacity="0.9"/><circle cx="16" cy="16" r="8" fill="none" stroke="%2300fff9" stroke-width="0.8" opacity="0.35" stroke-dasharray="4 3.6"/><path d="M16 2v6M16 24v6M2 16h6M24 16h6" stroke="%2300fff9" stroke-width="0.8" opacity="0.5"/><path d="M7.5 7.5l3 3M21.5 21.5l3 3M21.5 7.5l3-3M7.5 21.5l-3 3" stroke="%23ff00ff" stroke-width="0.6" opacity="0.35"/></svg>') 16 16, crosshair;
}

.source-page a,
.source-page button,
.source-page select,
.source-page [onclick] {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><circle cx="16" cy="16" r="4" fill="%23ff00ff" opacity="0.8"/><circle cx="16" cy="16" r="8" fill="none" stroke="%23ff00ff" stroke-width="1" opacity="0.4"/><circle cx="16" cy="16" r="12" fill="none" stroke="%23ff00ff" stroke-width="0.5" opacity="0.2"/></svg>') 16 16, pointer;
}

/* File rows: scan-line hover effect */
.src-row:hover {
    background: linear-gradient(90deg, rgba(0, 255, 249, 0.1) 0%, rgba(0, 255, 249, 0.02) 60%, transparent 100%);
    box-shadow: inset 3px 0 0 var(--neon-cyan), 0 1px 0 rgba(0, 255, 249, 0.15);
}

/* Code view: line-number gutter glow on hover */
.blame-line:hover .blame-num {
    color: var(--neon-cyan);
    text-shadow: 0 0 10px rgba(0, 255, 249, 0.5);
}

/* Tab bar: active tab glowing underline animation */
.source-tab.active {
    position: relative;
}

.source-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent,
        var(--neon-cyan) 30%,
        var(--neon-magenta) 70%,
        transparent
    );
    background-size: 200% 100%;
    animation: tabGlow 2s linear infinite;
}

@keyframes tabGlow {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* Tab hover scale */
.source-tab:hover {
    transform: translateY(-1px);
}

/* Search modal: command-palette style */
.search-modal.active .search-container {
    border: 1px solid rgba(0, 255, 249, 0.3);
    box-shadow:
        0 0 80px rgba(0, 255, 249, 0.15),
        0 0 160px rgba(0, 255, 249, 0.05),
        inset 0 0 30px rgba(0, 255, 249, 0.03);
}

/* Search filters - keyboard hints */
.search-filter::after {
    content: attr(data-type);
    display: none;
}

/* Dynamic glow color cycling on source-ide */
.source-ide {
    --glow-color: rgba(0, 255, 249, 0.3);
    animation: glowCycle 12s ease-in-out infinite;
}

@keyframes glowCycle {
    0%, 100% { --glow-color: rgba(0, 255, 249, 0.3); }
    33% { --glow-color: rgba(255, 0, 255, 0.3); }
    66% { --glow-color: rgba(57, 255, 20, 0.3); }
}

/* Loading state: "SYSTEM INITIALIZING..." */
.source-loading {
    font-family: var(--font-mono);
    color: var(--neon-cyan);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.85rem;
    text-shadow: 0 0 10px rgba(0, 255, 249, 0.4);
}

/* ==========================================================================
   MOBILE - Hide terminal and particles, responsive layout
   ========================================================================== */

@media (max-width: 768px) {
    #kildeParticles {
        display: none;
    }

    #terminalViewBtn {
        display: none;
    }

    .kilde-nav-center {
        font-size: 0.9rem;
    }

    .kilde-xp-badge {
        display: none !important;
    }

    .kilde-view-btn {
        height: 28px;
        padding: 0 6px;
    }

    .btn-label {
        display: none;
    }

    .commit-summary-author,
    .commit-summary-time,
    .commit-summary-sep {
        display: none;
    }
}