/* Manchester Labs - Dracula Theme Redesign */

/* ============================================================================
   RESET & BASE STYLES
   ============================================================================ */

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

:root {
    /* Dracula PRO Color Palette (Dark Theme) */
    --dracula-bg: #22212C;
    --dracula-current-line: #454158;
    --dracula-foreground: #F8F8F2;
    --dracula-comment: #7970A9;
    --dracula-cyan: #80FFEA;
    --dracula-green: #8AFF80;
    --dracula-orange: #FFCA80;
    --dracula-pink: #FF80BF;
    --dracula-purple: #9580FF;
    --dracula-red: #FF9580;
    --dracula-yellow: #FFFF80;

    /* Semantic Colors */
    --color-bg: var(--dracula-bg);
    --color-bg-elevated: #2C2A36;
    --color-bg-card: #2A2833;
    --color-text: var(--dracula-foreground);
    --color-text-dim: var(--dracula-comment);
    --color-primary: var(--dracula-purple);
    --color-primary-bright: #d5b3ff;
    --color-accent: var(--dracula-pink);
    --color-success: var(--dracula-green);
    --color-warning: var(--dracula-yellow);
    --color-error: var(--dracula-red);
    --color-info: var(--dracula-cyan);

    /* Theme transition */
    --theme-transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;

    /* Animation durations */
    --duration-fast: 0.15s;
    --duration-normal: 0.3s;
    --duration-slow: 0.5s;
}

/* Light Theme */
[data-theme="light"] {
    --dracula-bg: #f8f8f2;
    --dracula-current-line: #e8e6f0;
    --dracula-foreground: #282a36;
    --dracula-comment: #6272a4;
    --dracula-cyan: #0891b2;
    --dracula-green: #059669;
    --dracula-orange: #ea580c;
    --dracula-pink: #db2777;
    --dracula-purple: #7c3aed;
    --dracula-red: #dc2626;
    --dracula-yellow: #ca8a04;

    --color-bg: #ffffff;
    --color-bg-elevated: #f8f8f2;
    --color-bg-card: #f1f0f5;
    --color-text: #282a36;
    --color-text-dim: #6272a4;
    --color-primary: #7c3aed;
    --color-primary-bright: #8b5cf6;
}

[data-theme="light"] body {
    background: linear-gradient(135deg, #f8f8f2 0%, #e8e6f0 100%);
}

/* Light theme grid overlay - use darker lines for visibility */
[data-theme="light"] .grid-overlay {
    background-image:
        linear-gradient(rgba(124, 58, 237, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124, 58, 237, 0.08) 1px, transparent 1px);
}

/* Light theme panel backgrounds */
[data-theme="light"] .terminal-panel {
    background: linear-gradient(135deg, rgba(248, 248, 242, 0.95), rgba(232, 230, 240, 0.95));
    border-color: rgba(124, 58, 237, 0.3);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1),
                inset 0 1px 0 rgba(124, 58, 237, 0.1);
}

[data-theme="light"] .browser-panel {
    background: linear-gradient(135deg, rgba(248, 248, 242, 0.95), rgba(232, 230, 240, 0.95));
    border-color: rgba(124, 58, 237, 0.3);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1),
                inset 0 1px 0 rgba(124, 58, 237, 0.1);
}

[data-theme="light"] .tool-panel {
    background: rgba(248, 248, 242, 0.9);
    border-color: rgba(124, 58, 237, 0.3);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .display-panel {
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.2),
                inset 0 0 50px rgba(255, 255, 255, 0.3);
}

/* Light theme input and form elements */
[data-theme="light"] .path-readout,
[data-theme="light"] .terminal-input,
[data-theme="light"] .tool-input,
[data-theme="light"] .search-input,
[data-theme="light"] .sort-select {
    background: rgba(232, 230, 240, 0.8);
    border-color: rgba(124, 58, 237, 0.2);
}

[data-theme="light"] .terminal-header,
[data-theme="light"] .browser-header,
[data-theme="light"] .tool-header {
    border-bottom-color: rgba(124, 58, 237, 0.2);
}

/* Light theme additional form elements */
[data-theme="light"] .terminal-status {
    background: rgba(232, 230, 240, 0.8);
    border-color: rgba(124, 58, 237, 0.15);
}

[data-theme="light"] .input-wrapper {
    background: rgba(232, 230, 240, 0.8);
    border-color: rgba(124, 58, 237, 0.2);
}

[data-theme="light"] .input-wrapper:focus-within {
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.15);
}

/* Light theme file browser elements */
[data-theme="light"] .file-entry {
    background: rgba(232, 230, 240, 0.5);
    border-color: rgba(124, 58, 237, 0.1);
}

[data-theme="light"] .file-entry:hover {
    background: rgba(232, 230, 240, 0.8);
    border-color: rgba(124, 58, 237, 0.3);
}

[data-theme="light"] .file-entry.selected {
    background: rgba(124, 58, 237, 0.1);
    border-color: rgba(124, 58, 237, 0.4);
}

/* Light theme data grid and items */
[data-theme="light"] .data-grid {
    background: transparent;
}

[data-theme="light"] .data-item,
[data-theme="light"] .docker-item {
    background: rgba(232, 230, 240, 0.6);
    border-color: rgba(124, 58, 237, 0.15);
}

[data-theme="light"] .data-item:hover,
[data-theme="light"] .docker-item:hover {
    background: rgba(232, 230, 240, 0.9);
    border-color: rgba(124, 58, 237, 0.3);
}

/* Light theme tool inputs and outputs */
[data-theme="light"] .tool-input-group input,
[data-theme="light"] .tool-input-group select,
[data-theme="light"] .tool-output {
    background: rgba(232, 230, 240, 0.8);
    border-color: rgba(124, 58, 237, 0.2);
}

[data-theme="light"] .tool-output pre {
    background: rgba(248, 248, 242, 0.9);
}

/* Light theme loading display */
[data-theme="light"] .loading-display {
    background: rgba(248, 248, 242, 0.9);
}

/* Light theme modals */
[data-theme="light"] .modal-content {
    background: linear-gradient(135deg, rgba(248, 248, 242, 0.98), rgba(232, 230, 240, 0.98));
    border-color: rgba(124, 58, 237, 0.3);
}

/* Light theme dashboard cards */
[data-theme="light"] .dashboard-card,
[data-theme="light"] .stat-card {
    background: rgba(248, 248, 242, 0.9);
    border-color: rgba(124, 58, 237, 0.2);
}

/* Light theme file items */
[data-theme="light"] .file-item {
    background: rgba(248, 248, 242, 0.9);
    border-color: rgba(124, 58, 237, 0.2);
}

[data-theme="light"] .file-item:hover {
    background: rgba(232, 230, 240, 1);
    border-color: rgba(124, 58, 237, 0.4);
}

/* Light theme converter/calculator elements */
[data-theme="light"] .converter-selector {
    background: rgba(232, 230, 240, 0.6);
    border-color: rgba(124, 58, 237, 0.2);
}

[data-theme="light"] .converter-btn {
    background: rgba(248, 248, 242, 0.9);
    border-color: rgba(124, 58, 237, 0.3);
}

[data-theme="light"] .converter-btn:hover {
    background: rgba(124, 58, 237, 0.1);
}

[data-theme="light"] .converter-interface,
[data-theme="light"] .calculator-interface {
    background: rgba(232, 230, 240, 0.4);
    border-color: rgba(8, 145, 178, 0.2);
}

[data-theme="light"] .tool-input,
[data-theme="light"] .tool-select {
    background: rgba(248, 248, 242, 0.9);
    border-color: rgba(124, 58, 237, 0.3);
}

[data-theme="light"] .tool-input:read-only {
    background: rgba(232, 230, 240, 0.6);
}

/* Light theme network tools */
[data-theme="light"] .network-form,
[data-theme="light"] .network-output {
    background: rgba(232, 230, 240, 0.5);
    border-color: rgba(124, 58, 237, 0.2);
}

[data-theme="light"] .network-input {
    background: rgba(248, 248, 242, 0.9);
    border-color: rgba(124, 58, 237, 0.3);
}

[data-theme="light"] .output-content {
    background: rgba(248, 248, 242, 0.95);
}

/* Light theme snippets */
[data-theme="light"] .snippet-category,
[data-theme="light"] .snippet-item {
    background: rgba(232, 230, 240, 0.5);
    border-color: rgba(124, 58, 237, 0.2);
}

[data-theme="light"] .snippet-item:hover {
    background: rgba(232, 230, 240, 0.8);
}

[data-theme="light"] .snippet-code {
    background: rgba(248, 248, 242, 0.95);
    border-color: rgba(124, 58, 237, 0.2);
}

/* Light theme nav-user */
[data-theme="light"] .nav-user {
    background: rgba(8, 145, 178, 0.1);
    border-color: rgba(8, 145, 178, 0.3);
}

/* Light theme empty icon */
[data-theme="light"] .empty-icon {
    color: rgba(124, 58, 237, 0.4);
}

/* Light theme bulk actions bar */
[data-theme="light"] .bulk-actions-bar {
    background: rgba(232, 230, 240, 0.9);
    border-color: rgba(124, 58, 237, 0.2);
}

/* Light theme progress elements */
[data-theme="light"] .progress-modal,
[data-theme="light"] .progress-container {
    background: rgba(248, 248, 242, 0.98);
    border-color: rgba(124, 58, 237, 0.3);
}

/* Light theme docker containers */
[data-theme="light"] .container-item,
[data-theme="light"] .docker-container {
    background: rgba(248, 248, 242, 0.9);
    border-color: rgba(124, 58, 237, 0.2);
}

[data-theme="light"] .container-item:hover,
[data-theme="light"] .docker-container:hover {
    background: rgba(232, 230, 240, 1);
    border-color: rgba(124, 58, 237, 0.4);
}

/* Light theme reference tables */
[data-theme="light"] .reference-table,
[data-theme="light"] .reference-section {
    background: rgba(232, 230, 240, 0.5);
    border-color: rgba(124, 58, 237, 0.2);
}

[data-theme="light"] .reference-table th {
    background: rgba(124, 58, 237, 0.1);
}

[data-theme="light"] .reference-table td {
    background: rgba(248, 248, 242, 0.8);
    border-color: rgba(124, 58, 237, 0.1);
}

/* Light theme code/pre elements */
[data-theme="light"] pre,
[data-theme="light"] code {
    background: rgba(232, 230, 240, 0.8);
}

/* Light theme scrollbar */
[data-theme="light"] ::-webkit-scrollbar-track {
    background: rgba(232, 230, 240, 0.5);
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: rgba(124, 58, 237, 0.3);
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(124, 58, 237, 0.5);
}

/* Light theme data-grid scrollbar */
[data-theme="light"] .data-grid::-webkit-scrollbar-track {
    background: rgba(232, 230, 240, 0.5);
}

[data-theme="light"] .data-grid::-webkit-scrollbar-thumb {
    background: rgba(124, 58, 237, 0.4);
}

[data-theme="light"] .data-grid::-webkit-scrollbar-thumb:hover {
    background: rgba(124, 58, 237, 0.6);
}

/* ============================================================================
   COMPREHENSIVE LIGHT THEME - TOOLS, DASHBOARD, DOCKER PAGES
   ============================================================================ */

/* Tools page - tool panel */
[data-theme="light"] .tool-panel {
    background: rgba(248, 248, 242, 0.9);
    border-color: rgba(124, 58, 237, 0.3);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* Tools page - snippet textarea */
[data-theme="light"] .snippet-textarea {
    background: rgba(248, 248, 242, 0.95);
    border-color: rgba(124, 58, 237, 0.3);
}

/* Tools page - secondary button */
[data-theme="light"] .btn-secondary {
    background: rgba(232, 230, 240, 0.7);
    border-color: rgba(98, 114, 164, 0.5);
}

[data-theme="light"] .btn-secondary:hover {
    background: rgba(232, 230, 240, 0.9);
}

/* Tools page - network tool interface */
[data-theme="light"] .network-tool-interface {
    background: rgba(232, 230, 240, 0.4);
    border-color: rgba(8, 145, 178, 0.2);
}

[data-theme="light"] .network-output {
    background: rgba(248, 248, 242, 0.95);
    border-color: rgba(8, 145, 178, 0.2);
}

/* Tab navigation */
[data-theme="light"] .tab-navigation {
    background: rgba(232, 230, 240, 0.4);
    border-bottom-color: rgba(124, 58, 237, 0.3);
}

[data-theme="light"] .tab-btn {
    background: rgba(248, 248, 242, 0.8);
    border-color: rgba(124, 58, 237, 0.3);
}

[data-theme="light"] .tab-btn:hover {
    background: rgba(124, 58, 237, 0.1);
}

/* Dashboard - metrics header and logs header */
[data-theme="light"] .metrics-header,
[data-theme="light"] .logs-header {
    background: rgba(232, 230, 240, 0.6);
    border-color: rgba(124, 58, 237, 0.3);
}

/* Dashboard - metric cards */
[data-theme="light"] .metric-card {
    background: rgba(248, 248, 242, 0.9);
    border-color: rgba(124, 58, 237, 0.3);
}

[data-theme="light"] .metric-card:hover {
    border-color: rgba(124, 58, 237, 0.5);
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.2);
}

/* Dashboard - metric bar */
[data-theme="light"] .metric-bar {
    background: rgba(232, 230, 240, 0.8);
    border-color: rgba(124, 58, 237, 0.3);
}

/* Dashboard - network stat */
[data-theme="light"] .network-stat {
    background: rgba(232, 230, 240, 0.6);
    border-color: rgba(8, 145, 178, 0.2);
}

/* Dashboard - logs container */
[data-theme="light"] .logs-container {
    background: rgba(248, 248, 242, 0.9);
    border-color: rgba(124, 58, 237, 0.3);
}

/* Docker - overview panel */
[data-theme="light"] .docker-overview {
    background: rgba(248, 248, 242, 0.9);
    border-color: rgba(124, 58, 237, 0.3);
}

/* Docker - stat items */
[data-theme="light"] .stat-item {
    background: rgba(232, 230, 240, 0.6);
    border-color: rgba(124, 58, 237, 0.2);
}

/* Docker - containers list */
[data-theme="light"] .containers-list {
    background: rgba(248, 248, 242, 0.9);
    border-color: rgba(124, 58, 237, 0.3);
}

/* Docker - container cards */
[data-theme="light"] .container-card {
    background: rgba(232, 230, 240, 0.8);
    border-color: rgba(124, 58, 237, 0.3);
}

[data-theme="light"] .container-card:hover {
    border-color: rgba(124, 58, 237, 0.5);
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.2);
}

/* Docker - container card header border */
[data-theme="light"] .container-card-header {
    border-bottom-color: rgba(124, 58, 237, 0.2);
}

/* Docker - container stats sub-panel */
[data-theme="light"] .container-stats {
    background: rgba(232, 230, 240, 0.6);
    border-color: rgba(124, 58, 237, 0.15);
}

/* Docker - log viewer modal */
[data-theme="light"] .log-viewer-modal .modal-content {
    background: rgba(248, 248, 242, 0.98);
}

[data-theme="light"] .log-content {
    background: rgba(232, 230, 240, 0.9);
}

/* Action buttons in various panels */
[data-theme="light"] .action-btn,
[data-theme="light"] .container-action {
    background: rgba(232, 230, 240, 0.8);
    border-color: rgba(124, 58, 237, 0.3);
}

[data-theme="light"] .action-btn:hover,
[data-theme="light"] .container-action:hover {
    background: rgba(124, 58, 237, 0.15);
    border-color: rgba(124, 58, 237, 0.5);
}

/* Activity feed items */
[data-theme="light"] .activity-item,
[data-theme="light"] .feed-item {
    background: rgba(232, 230, 240, 0.5);
    border-color: rgba(124, 58, 237, 0.15);
}

[data-theme="light"] .activity-item:hover,
[data-theme="light"] .feed-item:hover {
    background: rgba(232, 230, 240, 0.8);
}

/* Bandwidth/stats displays */
[data-theme="light"] .bandwidth-display,
[data-theme="light"] .stats-display {
    background: rgba(232, 230, 240, 0.6);
    border-color: rgba(124, 58, 237, 0.2);
}

/* Filter/search inputs in headers */
[data-theme="light"] .filter-input,
[data-theme="light"] .logs-filters input,
[data-theme="light"] .logs-filters select {
    background: rgba(248, 248, 242, 0.95);
    border-color: rgba(124, 58, 237, 0.3);
}

/* Log entries */
[data-theme="light"] .log-entry {
    background: rgba(248, 248, 242, 0.8);
    border-color: rgba(124, 58, 237, 0.1);
}

[data-theme="light"] .log-entry:hover {
    background: rgba(232, 230, 240, 0.9);
}

/* Pagination controls */
[data-theme="light"] .logs-pagination,
[data-theme="light"] .pagination {
    background: rgba(232, 230, 240, 0.5);
    border-color: rgba(124, 58, 237, 0.2);
}

/* Empty states */
[data-theme="light"] .empty-state,
[data-theme="light"] .no-results {
    background: rgba(232, 230, 240, 0.4);
}

/* Info rows and details */
[data-theme="light"] .info-row,
[data-theme="light"] .detail-row {
    border-color: rgba(124, 58, 237, 0.1);
}

/* Split pane specific */
[data-theme="light"] .pane-divider {
    background: rgba(124, 58, 237, 0.2);
}

[data-theme="light"] .pane-divider:hover {
    background: rgba(124, 58, 237, 0.4);
}

/* Bandwidth monitor */
[data-theme="light"] .bandwidth-card {
    background: rgba(248, 248, 242, 0.9);
    border-color: rgba(124, 58, 237, 0.3);
}

[data-theme="light"] .bandwidth-stat {
    background: rgba(232, 230, 240, 0.7);
}

[data-theme="light"] .bandwidth-chart {
    background: rgba(232, 230, 240, 0.6);
}

/* Snippet manager */
[data-theme="light"] .snippet-controls {
    background: rgba(232, 230, 240, 0.5);
    border-color: rgba(8, 145, 178, 0.2);
}

[data-theme="light"] .snippet-card {
    background: rgba(248, 248, 242, 0.9);
    border-color: rgba(124, 58, 237, 0.3);
}

[data-theme="light"] .snippet-card:hover {
    border-color: rgba(124, 58, 237, 0.5);
}

[data-theme="light"] .snippet-action-btn {
    background: rgba(232, 230, 240, 0.8);
    border-color: rgba(124, 58, 237, 0.3);
}

[data-theme="light"] .snippet-action-btn:hover {
    background: rgba(124, 58, 237, 0.15);
}

[data-theme="light"] .snippet-code {
    background: rgba(232, 230, 240, 0.9);
    border-color: rgba(8, 145, 178, 0.2);
}

/* Calculator/converter tools */
[data-theme="light"] .calc-result {
    background: rgba(232, 230, 240, 0.6);
    border-color: rgba(124, 58, 237, 0.2);
}

[data-theme="light"] .converter-selector {
    background: rgba(232, 230, 240, 0.5);
    border-color: rgba(124, 58, 237, 0.2);
}

[data-theme="light"] .converter-btn {
    background: rgba(248, 248, 242, 0.9);
    border-color: rgba(124, 58, 237, 0.3);
}

[data-theme="light"] .converter-btn:hover {
    background: rgba(124, 58, 237, 0.1);
}

[data-theme="light"] .converter-interface,
[data-theme="light"] .calculator-interface {
    background: rgba(232, 230, 240, 0.4);
    border-color: rgba(8, 145, 178, 0.2);
}

[data-theme="light"] .tool-input {
    background: rgba(248, 248, 242, 0.95);
    border-color: rgba(124, 58, 237, 0.3);
}

[data-theme="light"] .tool-input:read-only {
    background: rgba(232, 230, 240, 0.7);
}

[data-theme="light"] .tool-select {
    background: rgba(248, 248, 242, 0.95);
    border-color: rgba(124, 58, 237, 0.3);
}

/* Filter inputs */
[data-theme="light"] .snippet-filter-group select,
[data-theme="light"] .snippet-filter-group input,
[data-theme="light"] .filter-group select,
[data-theme="light"] .filter-group input {
    background: rgba(248, 248, 242, 0.95);
    border-color: rgba(124, 58, 237, 0.3);
}

/* Modal styling */
[data-theme="light"] .modal-content {
    background: rgba(248, 248, 242, 0.98);
    border-color: rgba(124, 58, 237, 0.4);
    box-shadow: 0 0 30px rgba(124, 58, 237, 0.3);
}

[data-theme="light"] .modal-header {
    border-bottom-color: rgba(124, 58, 237, 0.2);
}

[data-theme="light"] .modal-footer {
    border-top-color: rgba(124, 58, 237, 0.2);
}

:root {
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;

    /* Typography */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;

    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px rgba(189, 147, 249, 0.3);
    --shadow-glow-pink: 0 0 20px rgba(255, 121, 198, 0.3);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 400ms ease;
}

body {
    font-family: var(--font-family);
    color: var(--color-text);
    background: linear-gradient(135deg, #282a36 0%, #1e1f29 100%);
    background-attachment: fixed;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    /* Smooth theme transitions */
    transition: var(--theme-transition);
}

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

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

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

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

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

/* ============================================================================
   UTILITIES
   ============================================================================ */

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* ============================================================================
   NAVIGATION
   ============================================================================ */

.nav {
    background: rgba(40, 42, 54, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 2px solid var(--dracula-current-line);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-md);
}

.nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) 0;
    animation: fadeIn 0.5s ease;
}

.nav-logo {
    font-size: 1.75rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--dracula-purple) 0%, var(--dracula-pink) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: var(--transition-normal);
    cursor: pointer;
}

.nav-logo:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 0 8px rgba(189, 147, 249, 0.5));
}

.nav-links {
    display: flex;
    list-style: none;
    gap: var(--spacing-lg);
}

.nav-links a {
    color: var(--color-text);
    text-decoration: none;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    transition: var(--transition-fast);
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--dracula-purple);
    transition: var(--transition-normal);
    transform: translateX(-50%);
}

.nav-links a:hover {
    color: var(--dracula-purple);
    background: rgba(189, 147, 249, 0.1);
}

.nav-links a:hover::after {
    width: 80%;
}

/* ============================================================================
   HERO SECTION
   ============================================================================ */

.hero {
    background: linear-gradient(135deg,
        rgba(189, 147, 249, 0.2) 0%,
        rgba(255, 121, 198, 0.2) 50%,
        rgba(139, 233, 253, 0.2) 100%
    );
    padding: var(--spacing-2xl) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(189, 147, 249, 0.1) 0%, transparent 70%);
    animation: pulse 8s ease-in-out infinite;
}

.hero-content {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    animation: fadeIn 0.8s ease;
}

.hero-title {
    font-size: 4rem;
    font-weight: 900;
    margin-bottom: var(--spacing-md);
    line-height: 1.1;
    background: linear-gradient(135deg,
        var(--dracula-purple) 0%,
        var(--dracula-pink) 50%,
        var(--dracula-cyan) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 40px rgba(189, 147, 249, 0.5);
    animation: slideInLeft 0.8s ease;
}

.hero-subtitle {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    color: var(--dracula-cyan);
    animation: fadeIn 1s ease 0.2s backwards;
}

.hero-description {
    font-size: 1.25rem;
    color: var(--color-text-dim);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.8;
    animation: fadeIn 1s ease 0.4s backwards;
}

/* ============================================================================
   SECTIONS
   ============================================================================ */

.section {
    padding: var(--spacing-2xl) 0;
    animation: fadeIn 0.6s ease;
}

.section-alt {
    background: linear-gradient(180deg, transparent 0%, rgba(68, 71, 90, 0.2) 100%);
}

.section-title {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: var(--spacing-xl);
    text-align: center;
    color: var(--dracula-purple);
    position: relative;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--dracula-purple), var(--dracula-pink));
    border-radius: 2px;
}

/* ============================================================================
   ABOUT SECTION
   ============================================================================ */

.about-content {
    max-width: 1000px;
    margin: 0 auto;
}

.about-content > p {
    font-size: 1.25rem;
    text-align: center;
    color: var(--color-text-dim);
    margin-bottom: var(--spacing-xl);
    line-height: 2;
}

.expertise-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.expertise-card {
    background: var(--color-bg-card);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    border: 2px solid var(--dracula-current-line);
    transition: var(--transition-normal);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.expertise-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(189, 147, 249, 0.1),
        transparent
    );
    transition: var(--transition-slow);
}

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

.expertise-card:hover {
    transform: translateY(-8px);
    border-color: var(--dracula-purple);
    box-shadow: var(--shadow-glow);
}

.expertise-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-sm);
    display: inline-block;
    transition: var(--transition-normal);
}

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

.expertise-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    color: var(--dracula-purple);
}

.expertise-card p {
    color: var(--color-text-dim);
    line-height: 1.6;
}

/* ============================================================================
   PROJECTS SECTION
   ============================================================================ */

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-lg);
}

.project-card {
    background: var(--color-bg-card);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    border: 2px solid var(--dracula-current-line);
    transition: var(--transition-normal);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.project-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--dracula-purple), var(--dracula-pink));
    transform: scaleX(0);
    transition: var(--transition-normal);
}

.project-card:hover::after {
    transform: scaleX(1);
}

.project-card:hover {
    transform: translateY(-8px);
    border-color: var(--dracula-pink);
    box-shadow: var(--shadow-glow-pink);
}

.project-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    color: var(--dracula-pink);
    transition: var(--transition-fast);
}

.project-card:hover h3 {
    color: var(--color-primary-bright);
}

.project-card p {
    color: var(--color-text-dim);
    margin-bottom: var(--spacing-md);
    line-height: 1.8;
}

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.tag {
    background: rgba(189, 147, 249, 0.2);
    color: var(--dracula-purple);
    padding: 0.375rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    border: 1px solid var(--dracula-purple);
    transition: var(--transition-fast);
    cursor: pointer;
}

.tag:hover {
    background: var(--dracula-purple);
    color: var(--dracula-bg);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(189, 147, 249, 0.3);
}

/* ============================================================================
   CONTACT SECTION
   ============================================================================ */

.contact-content {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.contact-content > p {
    font-size: 1.25rem;
    color: var(--color-text-dim);
    margin-bottom: var(--spacing-xl);
}

.contact-links {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    align-items: center;
}

.contact-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--dracula-cyan);
    text-decoration: none;
    font-size: 1.25rem;
    font-weight: 600;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-md);
    border: 2px solid var(--dracula-cyan);
    transition: var(--transition-normal);
    background: rgba(139, 233, 253, 0.1);
}

.contact-link:hover {
    background: var(--dracula-cyan);
    color: var(--dracula-bg);
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(139, 233, 253, 0.4);
}

.contact-icon {
    width: 2rem;
    height: 2rem;
    color: var(--dracula-cyan);
    transition: var(--transition-normal);
    display: block;
    align-self: center;
}

.contact-module:hover .contact-icon {
    transform: scale(1.1);
    color: var(--dracula-purple);
}

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

.footer {
    background: rgba(30, 31, 41, 0.8);
    border-top: 2px solid var(--dracula-current-line);
    padding: var(--spacing-xl) 0;
    text-align: center;
    margin-top: var(--spacing-2xl);
}

.footer p {
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-dim);
}

.footer-link {
    color: var(--dracula-purple);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition-fast);
}

.footer-link:hover {
    color: var(--color-primary-bright);
    text-decoration: underline;
}

/* ============================================================================
   PORTAL STYLES (Login & File Browser)
   ============================================================================ */

.portal-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
}

.portal-header {
    background: rgba(40, 42, 54, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 2px solid var(--dracula-current-line);
    padding: var(--spacing-md) 0;
    box-shadow: var(--shadow-md);
}

.portal-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.portal-main {
    flex: 1;
    padding: var(--spacing-xl) 0;
}

.login-container {
    max-width: 450px;
    margin: var(--spacing-2xl) auto;
    animation: fadeIn 0.6s ease;
}

.card {
    background: var(--color-bg-card);
    border-radius: var(--radius-xl);
    border: 2px solid var(--dracula-current-line);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-lg);
    transition: var(--transition-normal);
}

.card:hover {
    border-color: var(--dracula-purple);
    box-shadow: var(--shadow-glow);
}

.card-title {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: var(--spacing-lg);
    text-align: center;
    background: linear-gradient(135deg, var(--dracula-purple), var(--dracula-pink));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.form-group {
    margin-bottom: var(--spacing-md);
}

.form-label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: 600;
    color: var(--dracula-purple);
}

.form-input {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 2px solid var(--dracula-current-line);
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-family: var(--font-family);
    background: var(--color-bg-elevated);
    color: var(--color-text);
    transition: var(--transition-fast);
}

.form-input:focus {
    outline: none;
    border-color: var(--dracula-purple);
    box-shadow: 0 0 0 4px rgba(189, 147, 249, 0.2);
    background: var(--color-bg-card);
}

.btn {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-lg);
    border: none;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 700;
    font-family: var(--font-family);
    cursor: pointer;
    transition: var(--transition-normal);
    text-decoration: none;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn:hover::before {
    width: 300px;
    height: 300px;
}

.btn:active {
    transform: scale(0.98);
}

.btn-primary {
    background: linear-gradient(135deg, var(--dracula-purple), var(--dracula-pink));
    color: white;
    width: 100%;
    box-shadow: 0 4px 12px rgba(189, 147, 249, 0.4);
}

.btn-primary:hover {
    box-shadow: 0 8px 20px rgba(189, 147, 249, 0.6);
    transform: translateY(-2px);
}

.btn-secondary {
    background: var(--dracula-comment);
    color: white;
}

.btn-secondary:hover {
    background: var(--dracula-current-line);
    transform: translateY(-2px);
}

.btn-small {
    padding: 0;
    font-size: 0.95rem;
    white-space: nowrap;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border-radius: 50%;
    text-align: center;
}

/* ============================================================================
   ICON BUTTONS (Unified)
   Consolidated styles for all icon-based action buttons (download, rename, delete)
   ============================================================================ */

.icon-btn {
    padding: 0;
    font-size: 0.95rem;
    white-space: nowrap;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
    border: none;
    font-family: var(--font-family);
    transition: all 0.2s ease;
    position: relative;
    overflow: visible;
}

/* Hover state with scale transform */
.icon-btn:hover {
    transform: scale(1.05);
}

/* Active state */
.icon-btn:active {
    transform: scale(0.95);
}

/* Focus state for accessibility */
.icon-btn:focus {
    outline: 2px solid var(--dracula-purple);
    outline-offset: 2px;
}

/* Download variant */
.icon-btn.download {
    background: linear-gradient(135deg, var(--dracula-purple), var(--dracula-pink));
    color: white;
    box-shadow: 0 2px 8px rgba(189, 147, 249, 0.3);
}

.icon-btn.download:hover {
    box-shadow: 0 4px 12px rgba(189, 147, 249, 0.5);
}

/* Rename variant */
.icon-btn.rename {
    background: var(--dracula-comment);
    color: white;
    box-shadow: 0 2px 8px rgba(121, 112, 169, 0.3);
}

.icon-btn.rename:hover {
    background: var(--dracula-current-line);
    box-shadow: 0 4px 12px rgba(121, 112, 169, 0.5);
}

/* Delete variant */
.icon-btn.delete {
    background: linear-gradient(135deg, var(--dracula-red), var(--dracula-orange));
    color: white;
    box-shadow: 0 2px 8px rgba(255, 149, 128, 0.3);
}

.icon-btn.delete:hover {
    box-shadow: 0 4px 12px rgba(255, 149, 128, 0.5);
}

/* Disabled state */
.icon-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

.alert {
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
    border: 2px solid;
    animation: fadeIn 0.3s ease;
    font-weight: 600;
}

.alert-error {
    background: rgba(255, 85, 85, 0.2);
    border-color: var(--dracula-red);
    color: var(--dracula-red);
}

.alert-success {
    background: rgba(80, 250, 123, 0.2);
    border-color: var(--dracula-green);
    color: var(--dracula-green);
}

.file-browser {
    max-width: 1200px;
    margin: 0 auto;
}

.breadcrumb-container {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.breadcrumb {
    background: var(--color-bg-card);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    border: 2px solid var(--dracula-current-line);
    font-family: var(--font-mono);
    font-size: 1rem;
    color: var(--dracula-cyan);
    font-weight: 600;
    transition: var(--transition-fast);
    flex: 1;
}

.breadcrumb:hover {
    border-color: var(--dracula-cyan);
    box-shadow: 0 0 12px rgba(139, 233, 253, 0.3);
}

.file-list {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    border: 2px solid var(--dracula-current-line);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.file-item {
    display: flex;
    align-items: center;
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--dracula-current-line);
    transition: var(--transition-fast);
    cursor: pointer;
    animation: fadeIn 0.3s ease backwards;
}

.file-item:nth-child(1) { animation-delay: 0.05s; }
.file-item:nth-child(2) { animation-delay: 0.1s; }
.file-item:nth-child(3) { animation-delay: 0.15s; }
.file-item:nth-child(4) { animation-delay: 0.2s; }
.file-item:nth-child(5) { animation-delay: 0.25s; }

.file-item:last-child {
    border-bottom: none;
}

.file-item:hover {
    background: rgba(189, 147, 249, 0.1);
    transform: translateX(8px);
}

.file-icon {
    font-size: 2rem;
    margin-right: var(--spacing-md);
    min-width: 3rem;
    text-align: center;
    transition: var(--transition-normal);
}

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

.file-info {
    flex: 1;
}

.file-name {
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 0.25rem;
    font-size: 1.1rem;
}

.file-meta {
    font-size: 0.875rem;
    color: var(--color-text-dim);
    font-family: var(--font-mono);
}

.file-actions {
    display: flex;
    gap: var(--spacing-sm);
}

/* Pagination Controls */
.pagination-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
    margin-top: 1rem;
    background: rgba(69, 65, 88, 0.3);
    border: 1px solid rgba(149, 128, 255, 0.2);
    border-radius: 8px;
}

.pagination-btn {
    background: rgba(149, 128, 255, 0.2);
    border: 1px solid var(--dracula-purple);
    color: var(--dracula-foreground);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.pagination-btn:hover:not(:disabled) {
    background: rgba(149, 128, 255, 0.4);
    transform: translateY(-1px);
}

.pagination-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pagination-info {
    color: var(--dracula-comment);
    font-family: var(--font-mono);
    font-size: 0.875rem;
}

/* Light theme pagination */
[data-theme="light"] .pagination-controls {
    background: rgba(232, 230, 240, 0.6);
    border-color: rgba(124, 58, 237, 0.2);
}

[data-theme="light"] .pagination-btn {
    background: rgba(124, 58, 237, 0.1);
    border-color: var(--dracula-purple);
}

[data-theme="light"] .pagination-btn:hover:not(:disabled) {
    background: rgba(124, 58, 237, 0.2);
}

.loading {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--dracula-purple);
    font-size: 1.25rem;
    font-weight: 600;
}

.loading::after {
    content: '...';
    animation: pulse 1.5s ease-in-out infinite;
}

.empty-state {
    text-align: center;
    padding: var(--spacing-2xl);
    color: var(--color-text-dim);
    font-size: 1.25rem;
}

.user-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    color: var(--dracula-cyan);
    font-size: 1rem;
    font-weight: 600;
}

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

@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1.5rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .nav-links {
        gap: var(--spacing-sm);
    }

    .nav-links a {
        padding: 0.5rem;
        font-size: 0.9rem;
    }

    .expertise-grid,
    .projects-grid {
        grid-template-columns: 1fr;
    }

    .file-item {
        flex-wrap: wrap;
    }

    .file-actions {
        width: 100%;
        margin-top: var(--spacing-sm);
        justify-content: flex-end;
    }
}

@media (max-width: 480px) {
    .hero {
        padding: var(--spacing-xl) 0;
    }

    .hero-title {
        font-size: 2rem;
    }

    .nav-content {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .contact-links {
        width: 100%;
    }

    .contact-link {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================================
   SCROLLBAR STYLING
   ============================================================================ */

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

::-webkit-scrollbar-track {
    background: var(--dracula-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--dracula-current-line);
    border-radius: 6px;
}

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

/* ============================================================================
   SELECTION
   ============================================================================ */

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

::-moz-selection {
    background: var(--dracula-purple);
    color: var(--dracula-bg);
}

/* ============================================================================
   DOWNLOAD PROGRESS
   ============================================================================ */

.download-progress {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--color-bg-card);
    border: 2px solid var(--dracula-purple);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    box-shadow: var(--shadow-glow);
    min-width: 320px;
    max-width: 400px;
    z-index: 1000;
    animation: slideInRight 0.3s ease;
}

@keyframes slideInRight {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.progress-title {
    font-weight: 700;
    color: var(--dracula-purple);
    font-size: 1rem;
}

.progress-close {
    background: none;
    border: none;
    color: var(--color-text-dim);
    cursor: pointer;
    font-size: 1.5rem;
    padding: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
    border-radius: var(--radius-sm);
}

.progress-close:hover {
    color: var(--dracula-red);
    background: rgba(255, 85, 85, 0.1);
}

.progress-filename {
    font-size: 0.875rem;
    color: var(--color-text);
    margin-bottom: var(--spacing-md);
    font-family: var(--font-mono);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
}

.progress-bar-container {
    width: 100%;
    height: 10px;
    background: var(--dracula-current-line);
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: var(--spacing-sm);
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--dracula-purple), var(--dracula-pink));
    border-radius: 5px;
    transition: width 0.3s ease;
    box-shadow: 0 0 10px rgba(189, 147, 249, 0.5);
    position: relative;
}

.progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    animation: shimmer 2s infinite;
}

.progress-bar.indeterminate {
    width: 100%;
    background: linear-gradient(90deg,
        transparent,
        var(--dracula-purple),
        var(--dracula-pink),
        transparent
    );
    background-size: 200% 100%;
    animation: indeterminate-slide 2s ease-in-out infinite;
}

@keyframes indeterminate-slide {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.progress-bar.indeterminate::after {
    display: none;
}

.progress-text {
    font-size: 0.875rem;
    color: var(--color-text-dim);
    text-align: center;
    font-weight: 500;
}

.progress-success {
    color: var(--dracula-green) !important;
    font-weight: 700 !important;
}

/* ============================================================================
   CONTROL PANEL INTERFACE
   ============================================================================ */

.control-panel-body {
    font-family: var(--font-mono);
    letter-spacing: 0.5px;
}

/* Control Header */
.control-header {
    background: var(--dracula-bg);
    border-bottom: 2px solid var(--dracula-purple);
    padding: var(--spacing-md) 0;
    box-shadow: 0 0 20px rgba(149, 128, 255, 0.3);
}

.control-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-lg);
}

.system-status {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--dracula-comment);
    border: 2px solid var(--dracula-current-line);
    animation: pulse-indicator 2s ease-in-out infinite;
}

.status-indicator.active {
    background: var(--dracula-green);
    border-color: var(--dracula-green);
    box-shadow: 0 0 10px var(--dracula-green);
}

@keyframes pulse-indicator {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.status-text {
    font-size: 0.75rem;
    color: var(--dracula-green);
    font-weight: 700;
    letter-spacing: 2px;
}

.system-title {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--dracula-purple);
    letter-spacing: 4px;
    text-shadow: 0 0 10px rgba(149, 128, 255, 0.5);
}

.system-nav {
    display: flex;
    gap: var(--spacing-sm);
}

.nav-btn {
    padding: 0.5rem 1.5rem;
    background: var(--dracula-current-line);
    border: 1px solid var(--dracula-purple);
    color: var(--dracula-purple);
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: 1px;
    transition: var(--transition-fast);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    line-height: 1.5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    vertical-align: middle;
    box-sizing: border-box;
}

.nav-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--dracula-purple);
    transition: var(--transition-normal);
    z-index: 0;
}

.nav-btn:hover::before {
    left: 0;
}

.nav-btn:hover {
    color: var(--dracula-bg);
    box-shadow: 0 0 15px rgba(149, 128, 255, 0.5);
}

/* Portal button - highlighted style */
.nav-btn-portal {
    background: linear-gradient(135deg, rgba(149, 128, 255, 0.2), rgba(128, 255, 234, 0.1));
    border-color: var(--dracula-cyan);
    color: var(--dracula-cyan);
}

.nav-btn-portal::before {
    background: linear-gradient(135deg, var(--dracula-purple), var(--dracula-cyan));
}

.nav-btn-portal:hover {
    box-shadow: 0 0 20px rgba(128, 255, 234, 0.5);
}

/* Main Display Panel */
.main-display {
    padding: var(--spacing-2xl) 0;
    background: var(--dracula-bg);
}

.display-panel {
    position: relative;
    background: var(--dracula-current-line);
    border: 2px solid var(--dracula-purple);
    padding: var(--spacing-xl);
    box-shadow:
        0 0 20px rgba(149, 128, 255, 0.3),
        inset 0 0 50px rgba(0, 0, 0, 0.5);
}

/* Panel Corners */
.panel-corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 3px solid var(--dracula-cyan);
}

.panel-corner.tl {
    top: -2px;
    left: -2px;
    border-right: none;
    border-bottom: none;
}

.panel-corner.tr {
    top: -2px;
    right: -2px;
    border-left: none;
    border-bottom: none;
}

.panel-corner.bl {
    bottom: -2px;
    left: -2px;
    border-right: none;
    border-top: none;
}

.panel-corner.br {
    bottom: -2px;
    right: -2px;
    border-left: none;
    border-top: none;
}

/* Grid Overlay */
.grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(rgba(149, 128, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(149, 128, 255, 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
}

.display-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--dracula-purple);
}

.display-label {
    font-size: 0.75rem;
    color: var(--dracula-cyan);
    letter-spacing: 2px;
    font-weight: 700;
}

.display-indicators {
    display: flex;
    gap: var(--spacing-xs);
}

.indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dracula-comment);
    border: 1px solid var(--dracula-current-line);
}

.indicator.active {
    background: var(--dracula-cyan);
    box-shadow: 0 0 8px var(--dracula-cyan);
    animation: pulse-indicator 1.5s ease-in-out infinite;
}

.display-content {
    position: relative;
    z-index: 1;
}

.display-title {
    font-size: 3rem;
    font-weight: 900;
    color: var(--dracula-foreground);
    text-align: center;
    margin-bottom: var(--spacing-xl);
    line-height: 1.2;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.title-line {
    background: linear-gradient(90deg,
        var(--dracula-purple) 0%,
        var(--dracula-pink) 50%,
        var(--dracula-cyan) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: title-glow 3s ease-in-out infinite;
}

@keyframes title-glow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.2); }
}

.display-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.stat-readout {
    background: var(--dracula-bg);
    border: 1px solid var(--dracula-purple);
    padding: var(--spacing-md);
    text-align: center;
    position: relative;
}

.stat-readout::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--dracula-purple), transparent);
}

.stat-label {
    display: block;
    font-size: 0.65rem;
    color: var(--dracula-comment);
    letter-spacing: 1px;
    margin-bottom: var(--spacing-xs);
}

.stat-value {
    display: block;
    font-size: 2rem;
    color: var(--dracula-cyan);
    font-weight: 900;
    text-shadow: 0 0 10px rgba(128, 255, 234, 0.5);
}

.stat-value.success {
    color: var(--dracula-green);
    text-shadow: 0 0 10px rgba(138, 255, 128, 0.5);
}

/* Section Headers */
.section-header-panel {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.header-line {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--dracula-purple), transparent);
}

.panel-title {
    font-size: 1.5rem;
    color: var(--dracula-purple);
    letter-spacing: 3px;
    font-weight: 900;
    text-shadow: 0 0 10px rgba(149, 128, 255, 0.5);
}

/* Systems Section */
.systems-section {
    padding: var(--spacing-2xl) 0;
    background: var(--dracula-bg);
}

.instruments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
}

.instrument-panel {
    background: var(--dracula-current-line);
    border: 2px solid var(--dracula-purple);
    padding: var(--spacing-lg);
    position: relative;
    transition: var(--transition-normal);
}

.instrument-panel::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, var(--dracula-purple), var(--dracula-pink));
    opacity: 0;
    transition: var(--transition-normal);
    z-index: -1;
}

.instrument-panel:hover::before {
    opacity: 0.1;
}

.instrument-panel:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(149, 128, 255, 0.4);
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--dracula-purple);
}

.panel-id {
    font-size: 0.7rem;
    color: var(--dracula-cyan);
    font-weight: 700;
    letter-spacing: 1px;
}

.panel-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dracula-comment);
    border: 1px solid var(--dracula-current-line);
}

.panel-indicator.active {
    background: var(--dracula-green);
    box-shadow: 0 0 8px var(--dracula-green);
    animation: pulse-indicator 2s ease-in-out infinite;
}

.panel-icon {
    font-size: 3rem;
    text-align: center;
    margin: var(--spacing-md) 0;
    filter: drop-shadow(0 0 10px rgba(149, 128, 255, 0.5));
}

.panel-name {
    font-size: 1rem;
    color: var(--dracula-foreground);
    text-align: center;
    margin-bottom: var(--spacing-md);
    letter-spacing: 1px;
    font-weight: 700;
}

.panel-readout {
    margin: var(--spacing-md) 0;
}

.readout-line {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--dracula-purple), transparent);
    margin: var(--spacing-sm) 0;
}

.panel-description {
    font-size: 0.85rem;
    color: var(--dracula-comment);
    text-align: center;
    line-height: 1.6;
}

.panel-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    justify-content: center;
    margin-top: var(--spacing-md);
}

.metric {
    font-size: 0.65rem;
    color: var(--dracula-cyan);
    border: 1px solid var(--dracula-cyan);
    padding: 0.25rem 0.75rem;
    letter-spacing: 1px;
    font-weight: 700;
}

/* Projects Section */
.projects-section {
    padding: var(--spacing-2xl) 0;
    background: var(--dracula-bg);
}

.project-panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}

.project-module {
    background: var(--dracula-current-line);
    border: 1px solid var(--dracula-purple);
    padding: var(--spacing-lg);
    position: relative;
    transition: var(--transition-normal);
}

.project-module:hover {
    border-color: var(--dracula-pink);
    box-shadow: 0 5px 20px rgba(255, 128, 191, 0.3);
    transform: translateX(5px);
}

.module-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.module-id {
    font-size: 0.7rem;
    color: var(--dracula-pink);
    font-weight: 700;
    letter-spacing: 1px;
}

.status-bar {
    width: 40px;
    height: 4px;
    background: var(--dracula-comment);
    position: relative;
}

.status-bar.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 70%;
    background: var(--dracula-green);
    box-shadow: 0 0 5px var(--dracula-green);
    animation: status-pulse 2s ease-in-out infinite;
}

@keyframes status-pulse {
    0%, 100% { width: 70%; }
    50% { width: 85%; }
}

.module-title {
    font-size: 1.1rem;
    color: var(--dracula-foreground);
    margin-bottom: var(--spacing-md);
    letter-spacing: 1px;
    font-weight: 700;
}

.module-description {
    font-size: 0.85rem;
    color: var(--dracula-comment);
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
}

.module-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.tech-tag {
    font-size: 0.65rem;
    color: var(--dracula-purple);
    border: 1px solid var(--dracula-purple);
    padding: 0.25rem 0.75rem;
    letter-spacing: 1px;
    font-weight: 700;
    transition: var(--transition-fast);
}

.tech-tag:hover {
    background: var(--dracula-purple);
    color: var(--dracula-bg);
}

/* Contact Section */
.contact-section {
    padding: var(--spacing-2xl) 0;
    background: var(--dracula-bg);
}

.contact-panel {
    background: var(--dracula-current-line);
    border: 2px solid var(--dracula-cyan);
    padding: var(--spacing-xl);
}

.contact-display {
    text-align: center;
}

.contact-message {
    font-size: 1rem;
    color: var(--dracula-foreground);
    letter-spacing: 1px;
    margin-bottom: var(--spacing-xl);
}

.contact-modules {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    max-width: 600px;
    margin: 0 auto;
}

.contact-module {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: var(--spacing-md);
    background: var(--dracula-bg);
    border: 1px solid var(--dracula-cyan);
    padding: var(--spacing-md) var(--spacing-lg);
    text-decoration: none;
    transition: var(--transition-fast);
}

.contact-module:hover {
    border-color: var(--dracula-purple);
    box-shadow: 0 0 15px rgba(149, 128, 255, 0.4);
    transform: translateX(5px);
}

.module-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--dracula-cyan);
    box-shadow: 0 0 8px var(--dracula-cyan);
    animation: pulse-indicator 2s ease-in-out infinite;
}

.module-label {
    font-size: 0.7rem;
    color: var(--dracula-comment);
    letter-spacing: 2px;
    font-weight: 700;
    grid-column: 4;
    text-align: right;
    line-height: 1;
    align-self: center;
}

.module-data {
    font-size: 1rem;
    color: var(--dracula-cyan);
    grid-column: 3;
    line-height: 1;
    align-self: center;
}

/* Control Footer */
.control-footer {
    background: var(--dracula-bg);
    border-top: 2px solid var(--dracula-purple);
    padding: var(--spacing-xl) 0;
}

.footer-display {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}

.footer-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.footer-label {
    font-size: 0.65rem;
    color: var(--dracula-comment);
    letter-spacing: 1px;
    font-weight: 700;
}

.footer-value {
    font-size: 0.85rem;
    color: var(--dracula-foreground);
}

.footer-link {
    font-size: 0.85rem;
    color: var(--dracula-cyan);
    text-decoration: none;
    transition: var(--transition-fast);
}

.footer-link:hover {
    color: var(--dracula-purple);
    text-shadow: 0 0 10px rgba(149, 128, 255, 0.5);
}

.status-online {
    color: var(--dracula-green);
}

/* Responsive Design */
@media (max-width: 768px) {
    .control-header-content {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .system-nav {
        width: 100%;
        justify-content: center;
    }

    .display-title {
        font-size: 2rem;
    }

    .display-stats {
        grid-template-columns: 1fr;
    }

    .instruments-grid {
        grid-template-columns: 1fr;
    }

    .project-panels {
        grid-template-columns: 1fr;
    }

    .footer-display {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

/* ============================================================================
   LOGIN TERMINAL STYLES
   ============================================================================ */

.login-terminal {
    padding: var(--spacing-2xl) 0;
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
}

.terminal-panel {
    position: relative;
    background: linear-gradient(135deg, rgba(42, 40, 51, 0.95), rgba(34, 33, 44, 0.95));
    border: 2px solid rgba(149, 128, 255, 0.3);
    border-radius: 12px;
    padding: var(--spacing-xl);
    max-width: 600px;
    margin: 0 auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5),
                inset 0 1px 0 rgba(149, 128, 255, 0.1);
}

.terminal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid rgba(149, 128, 255, 0.2);
    margin-bottom: var(--spacing-lg);
}

.terminal-label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--dracula-cyan);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.terminal-indicators {
    display: flex;
    gap: 8px;
}

.terminal-content {
    position: relative;
    z-index: 1;
}

.terminal-status {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-md);
    background: rgba(34, 33, 44, 0.6);
    border: 1px solid rgba(149, 128, 255, 0.15);
    border-radius: 6px;
    margin-bottom: var(--spacing-lg);
}

.status-line {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--dracula-comment);
    display: flex;
    align-items: center;
}

.status-line::before {
    content: ">";
    color: var(--dracula-purple);
    margin-right: var(--spacing-xs);
}

.terminal-alert {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: rgba(255, 149, 128, 0.1);
    border: 1px solid var(--dracula-red);
    border-radius: 6px;
    margin-bottom: var(--spacing-lg);
}

.alert-indicator {
    width: 8px;
    height: 8px;
    background: var(--dracula-red);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.alert-text {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--dracula-red);
    flex: 1;
}

.terminal-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.terminal-input-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.input-label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--dracula-comment);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.label-bracket {
    color: var(--dracula-purple);
}

.input-wrapper {
    display: flex;
    align-items: center;
    background: rgba(34, 33, 44, 0.8);
    border: 2px solid rgba(149, 128, 255, 0.2);
    border-radius: 6px;
    padding: 0 var(--spacing-sm);
    transition: var(--transition-fast);
}

.input-wrapper:focus-within {
    border-color: var(--dracula-purple);
    box-shadow: 0 0 20px rgba(149, 128, 255, 0.2);
}

.input-prefix {
    font-family: var(--font-mono);
    color: var(--dracula-purple);
    margin-right: var(--spacing-xs);
    user-select: none;
}

.terminal-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    padding: var(--spacing-sm) 0;
    font-family: var(--font-mono);
    font-size: 0.95rem;
    color: var(--dracula-foreground);
}

.terminal-input::placeholder {
    color: rgba(121, 112, 169, 0.5);
}

.terminal-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    background: linear-gradient(135deg, var(--dracula-purple), var(--dracula-pink));
    border: none;
    border-radius: 6px;
    padding: var(--spacing-md) var(--spacing-lg);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--dracula-bg);
    cursor: pointer;
    transition: var(--transition-fast);
    margin-top: var(--spacing-sm);
    text-transform: uppercase;
}

.terminal-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(149, 128, 255, 0.4);
}

.terminal-submit:active {
    transform: translateY(0);
}

.submit-text {
    flex: 1;
}

.submit-arrow {
    font-size: 1.2rem;
}

/* ============================================================================
   FILE BROWSER TERMINAL STYLES
   ============================================================================ */

.browser-terminal {
    padding: var(--spacing-md) 0;
    min-height: calc(100vh - 260px);
}

.browser-panel {
    position: relative;
    background: linear-gradient(135deg, rgba(42, 40, 51, 0.95), rgba(34, 33, 44, 0.95));
    border: 2px solid rgba(149, 128, 255, 0.3);
    border-radius: 12px;
    padding: var(--spacing-md);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5),
                inset 0 1px 0 rgba(149, 128, 255, 0.1);
}

.browser-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid rgba(149, 128, 255, 0.2);
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
}

.browser-path-display {
    flex: 1;
    min-width: 300px;
}

.path-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--dracula-comment);
    letter-spacing: 1px;
    text-transform: uppercase;
    display: block;
    margin-bottom: var(--spacing-xs);
}

.path-readout {
    display: flex;
    align-items: center;
    background: rgba(34, 33, 44, 0.8);
    border: 1px solid rgba(149, 128, 255, 0.15);
    border-radius: 6px;
    padding: var(--spacing-xs) var(--spacing-sm);
}

.path-prefix {
    font-family: var(--font-mono);
    color: var(--dracula-purple);
    margin-right: var(--spacing-xs);
}

#current-path {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--dracula-foreground);
    word-break: break-all;
}

.control-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    background: linear-gradient(135deg, var(--dracula-purple), var(--dracula-pink));
    border: none;
    border-radius: 6px;
    padding: var(--spacing-sm) var(--spacing-md);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--dracula-bg);
    cursor: pointer;
    transition: var(--transition-fast);
    text-transform: uppercase;
}

.control-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(149, 128, 255, 0.4);
}

.control-btn:active {
    transform: translateY(0);
}

.btn-icon {
    font-size: 1rem;
}

.loading-display {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-2xl);
    min-height: 180px;
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(149, 128, 255, 0.2);
    border-top-color: var(--dracula-purple);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
}

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

.loading-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    min-width: 200px;
}

.loading-text {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--dracula-purple);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.loading-progress {
    width: 100%;
    height: 6px;
    background: rgba(149, 128, 255, 0.15);
    border-radius: 3px;
    overflow: hidden;
}

.loading-progress-bar {
    height: 100%;
    width: 30%;
    background: linear-gradient(90deg, var(--dracula-purple), var(--dracula-cyan));
    border-radius: 3px;
    animation: loading-scan 1.5s ease-in-out infinite;
}

@keyframes loading-scan {
    0% {
        width: 0%;
        margin-left: 0%;
    }
    50% {
        width: 60%;
        margin-left: 20%;
    }
    100% {
        width: 0%;
        margin-left: 100%;
    }
}

.loading-status {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--dracula-comment);
    letter-spacing: 1px;
}

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

.data-grid {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    max-height: calc(100vh - 350px);
    overflow-y: auto;
    padding-right: var(--spacing-xs);
}

/* Custom scrollbar for data-grid */
.data-grid::-webkit-scrollbar {
    width: 8px;
}

.data-grid::-webkit-scrollbar-track {
    background: rgba(69, 65, 88, 0.3);
    border-radius: 4px;
}

.data-grid::-webkit-scrollbar-thumb {
    background: rgba(149, 128, 255, 0.5);
    border-radius: 4px;
}

.data-grid::-webkit-scrollbar-thumb:hover {
    background: rgba(149, 128, 255, 0.7);
}

/* ============================================================================
   EMPTY STATES
   ============================================================================ */

.empty-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl);
    gap: var(--spacing-md);
    min-height: 300px;
    animation: fadeIn 0.3s ease;
}

.empty-icon {
    font-size: 4rem;
    color: rgba(149, 128, 255, 0.4);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.05);
    }
}

.empty-text {
    font-family: var(--font-mono);
    font-size: 1rem;
    color: var(--dracula-comment);
    letter-spacing: 2px;
    text-align: center;
}

.empty-hint {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--dracula-comment);
    opacity: 0.7;
    text-align: center;
    max-width: 400px;
    line-height: 1.6;
}

/* Update nav-user for username display */
.nav-user {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--dracula-cyan);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(128, 255, 234, 0.1);
    border: 1px solid rgba(128, 255, 234, 0.3);
    border-radius: 4px;
}

.nav-user::before {
    content: "USER: ";
    color: var(--dracula-comment);
}

/* Update file items to match control panel aesthetic */
.file-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(34, 33, 44, 1);
    border: 1px solid rgba(149, 128, 255, 0.3);
    border-radius: 6px;
    transition: var(--transition-fast);
    cursor: pointer;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.file-item:hover {
    background: rgba(69, 65, 88, 1);
    border-color: rgba(149, 128, 255, 0.5);
    transform: translateX(4px);
}

.file-icon {
    font-size: 1.5rem;
    width: 32px;
    text-align: center;
    flex-shrink: 0;
}

.file-info {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
    max-width: calc(100% - 200px);
}

.file-name {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--dracula-foreground);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-meta {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--dracula-comment);
    display: flex;
    gap: var(--spacing-md);
}

.file-actions {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
    margin-right: 1rem;
}

.file-actions .btn {
    margin: 0;
}

.action-btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(149, 128, 255, 0.1);
    border: 1px solid rgba(149, 128, 255, 0.3);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--dracula-purple);
    cursor: pointer;
    transition: var(--transition-fast);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.action-btn:hover {
    background: rgba(149, 128, 255, 0.2);
    border-color: var(--dracula-purple);
    box-shadow: 0 0 10px rgba(149, 128, 255, 0.3);
}

/* Parent directory button */
.parent-dir {
    background: rgba(128, 255, 234, 0.1);
    border-color: rgba(128, 255, 234, 0.3);
}

.parent-dir:hover {
    background: rgba(128, 255, 234, 0.2);
    border-color: var(--dracula-cyan);
}

.parent-dir .file-name {
    color: var(--dracula-cyan);
}

/* Directory items */
.file-item.directory {
    border-left: 3px solid var(--dracula-cyan);
}

.file-item.directory .file-name {
    color: var(--dracula-cyan);
}

/* Danger button variant */
.btn-danger {
    background: linear-gradient(135deg, var(--dracula-red), var(--dracula-orange));
    color: white;
    box-shadow: 0 4px 12px rgba(255, 149, 128, 0.4);
}

.btn-danger:hover {
    box-shadow: 0 8px 20px rgba(255, 149, 128, 0.6);
    transform: translateY(-2px);
}

/* Browser actions container */
.browser-actions {
    display: flex;
    gap: var(--spacing-sm);
}

/* Breadcrumb navigation */
.breadcrumb-item {
    color: var(--dracula-cyan);
    transition: var(--transition-fast);
}

.breadcrumb-item:hover {
    color: var(--dracula-green);
    text-shadow: 0 0 10px rgba(138, 255, 128, 0.5);
}

.breadcrumb-separator {
    color: var(--dracula-comment);
    cursor: default;
}

/* Bulk Actions Bar */
.bulk-actions-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(149, 128, 255, 0.1);
    border: 1px solid rgba(149, 128, 255, 0.3);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
    animation: fadeIn 0.2s ease;
}

.bulk-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--dracula-purple);
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--dracula-purple);
}

.bulk-buttons {
    display: flex;
    gap: var(--spacing-sm);
}

.bulk-btn {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: 0.85rem;
}

/* File item checkboxes */
.file-item-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--dracula-purple);
    flex-shrink: 0;
}

/* Modal Overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn 0.2s ease;
}

.modal-content {
    background: var(--color-bg-elevated);
    border: 2px solid var(--dracula-purple);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    min-width: 400px;
    max-width: 90vw;
    box-shadow: var(--shadow-lg), 0 0 40px rgba(149, 128, 255, 0.4);
    animation: slideInDown 0.3s ease;
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header {
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--dracula-current-line);
}

.modal-header h3 {
    font-family: var(--font-mono);
    font-size: 1.2rem;
    color: var(--dracula-purple);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.modal-body {
    margin-bottom: var(--spacing-lg);
    color: var(--dracula-foreground);
    line-height: 1.6;
}

.modal-footer {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: flex-end;
}

/* Form input styling for modals */
.form-input {
    width: 100%;
    padding: var(--spacing-sm);
    background: var(--color-bg);
    border: 2px solid var(--dracula-current-line);
    border-radius: var(--radius-sm);
    color: var(--dracula-foreground);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    transition: var(--transition-fast);
}

.form-input:focus {
    outline: none;
    border-color: var(--dracula-purple);
    box-shadow: 0 0 0 3px rgba(149, 128, 255, 0.2);
}

.form-input::placeholder {
    color: var(--dracula-comment);
}

/* Modal input styling */
.modal-input {
    width: 100%;
    padding: var(--spacing-sm);
    background: var(--color-bg);
    border: 2px solid var(--dracula-current-line);
    border-radius: var(--radius-sm);
    color: var(--dracula-foreground);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    transition: var(--transition-fast);
    margin: var(--spacing-sm) 0;
    box-sizing: border-box;
}

.modal-input:focus {
    outline: none;
    border-color: var(--dracula-purple);
    box-shadow: 0 0 0 3px rgba(149, 128, 255, 0.2);
}

.modal-input::placeholder {
    color: var(--dracula-comment);
}

/* ============================================================================
   TOAST NOTIFICATIONS (for undo delete, status messages)
   ============================================================================ */

.toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    min-width: 300px;
    max-width: 500px;
    background: var(--color-bg-elevated);
    border: 2px solid var(--dracula-purple);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    box-shadow: var(--shadow-lg), 0 0 30px rgba(149, 128, 255, 0.3);
    z-index: 10000;
    animation: slideInRight 0.3s ease;
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.toast.toast-exit {
    animation: slideOutRight 0.3s ease forwards;
}

@keyframes slideOutRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

.toast-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.toast-content {
    flex: 1;
}

.toast-message {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--dracula-foreground);
    margin-bottom: var(--spacing-xs);
}

.toast-actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-xs);
}

.toast-button {
    padding: var(--spacing-xs) var(--spacing-sm);
    background: transparent;
    border: 1px solid var(--dracula-purple);
    border-radius: var(--radius-sm);
    color: var(--dracula-purple);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.toast-button:hover {
    background: var(--dracula-purple);
    color: white;
    transform: scale(1.05);
}

.toast-button.primary {
    background: var(--dracula-purple);
    color: white;
}

.toast-button.primary:hover {
    background: var(--dracula-pink);
    border-color: var(--dracula-pink);
}

.modal-hint {
    font-size: 0.8rem;
    color: var(--dracula-comment);
    margin-top: var(--spacing-xs);
}

/* Search and Sort Controls */
.browser-search {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    flex: 1;
    max-width: 400px;
}

.search-input {
    flex: 1;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-bg);
    border: 2px solid var(--dracula-current-line);
    border-radius: var(--radius-sm);
    color: var(--dracula-foreground);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    transition: var(--transition-fast);
}

.search-input:focus {
    outline: none;
    border-color: var(--dracula-purple);
    box-shadow: 0 0 0 3px rgba(149, 128, 255, 0.2);
}

.search-input::placeholder {
    color: var(--dracula-comment);
}

.sort-select {
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-bg);
    border: 2px solid var(--dracula-current-line);
    border-radius: var(--radius-sm);
    color: var(--dracula-foreground);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    cursor: pointer;
    transition: var(--transition-fast);
}

.sort-select:focus {
    outline: none;
    border-color: var(--dracula-purple);
}

.sort-select option {
    background: var(--color-bg);
    color: var(--dracula-foreground);
}

.empty-search {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--dracula-comment);
    font-family: var(--font-mono);
}

/* Responsive updates for terminal pages */
@media (max-width: 768px) {
    .terminal-panel,
    .browser-panel {
        padding: var(--spacing-md);
    }

    .browser-header {
        flex-direction: column;
        align-items: stretch;
    }

    .browser-path-display {
        min-width: 100%;
    }

    .control-btn {
        width: 100%;
        justify-content: center;
    }

    .file-item {
        flex-direction: column;
        align-items: flex-start;
    }

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

/* ============================================================================
   ADVANCED UI ENHANCEMENTS - OSCILLOSCOPE LAB + SPACECRAFT HUD
   ============================================================================ */

/* Radar Ping Animation for Indicators */
@keyframes radarPing {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

@keyframes radarSweep {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Waveform oscillation */
@keyframes oscillate {
    0%, 100% {
        d: path("M0,50 Q25,30 50,50 T100,50");
    }
    50% {
        d: path("M0,50 Q25,70 50,50 T100,50");
    }
}

/* Circuit flow animation */
@keyframes circuitFlow {
    0% {
        stroke-dashoffset: 1000;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

/* Data stream */
@keyframes dataStream {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    10% {
        opacity: 0.3;
    }
    90% {
        opacity: 0.3;
    }
    100% {
        transform: translateY(200%);
        opacity: 0;
    }
}

/* Enhanced Status Indicators - Radar Ping Removed */

/* Multi-Layered Corner Brackets */
.panel-corner {
    position: absolute;
    width: 20px;
    height: 20px;
}

.panel-corner::before,
.panel-corner::after {
    content: '';
    position: absolute;
    border: 3px solid var(--dracula-cyan);
}

/* Top-left corner */
.panel-corner.tl::before {
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border-right: none;
    border-bottom: none;
}

.panel-corner.tl::after {
    top: 4px;
    left: 4px;
    width: 12px;
    height: 12px;
    border-right: none;
    border-bottom: none;
    border-width: 2px;
    opacity: 0.6;
}

/* Top-right corner */
.panel-corner.tr::before {
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    border-left: none;
    border-bottom: none;
}

.panel-corner.tr::after {
    top: 4px;
    right: 4px;
    width: 12px;
    height: 12px;
    border-left: none;
    border-bottom: none;
    border-width: 2px;
    opacity: 0.6;
}

/* Bottom-left corner */
.panel-corner.bl::before {
    bottom: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border-right: none;
    border-top: none;
}

.panel-corner.bl::after {
    bottom: 4px;
    left: 4px;
    width: 12px;
    height: 12px;
    border-right: none;
    border-top: none;
    border-width: 2px;
    opacity: 0.6;
}

/* Bottom-right corner */
.panel-corner.br::before {
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
    border-left: none;
    border-top: none;
}

.panel-corner.br::after {
    bottom: 4px;
    right: 4px;
    width: 12px;
    height: 12px;
    border-left: none;
    border-top: none;
    border-width: 2px;
    opacity: 0.6;
}

/* Circuit Board Pattern Background */
.display-panel::after,
.instrument-panel::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(90deg, transparent 49%, rgba(128, 255, 234, 0.03) 49%, rgba(128, 255, 234, 0.03) 51%, transparent 51%),
        linear-gradient(0deg, transparent 49%, rgba(128, 255, 234, 0.03) 49%, rgba(128, 255, 234, 0.03) 51%, transparent 51%);
    background-size: 30px 30px;
    pointer-events: none;
    opacity: 0.5;
    z-index: 0;
}

/* Meter Gauge Component */
.meter-gauge {
    position: relative;
    width: 100%;
    height: 8px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--dracula-current-line);
    margin: var(--spacing-sm) 0;
    overflow: hidden;
}

.meter-fill {
    height: 100%;
    background: linear-gradient(90deg,
        var(--dracula-green) 0%,
        var(--dracula-cyan) 50%,
        var(--dracula-purple) 100%);
    width: 75%;
    position: relative;
    animation: meterPulse 3s ease-in-out infinite;
    box-shadow: 0 0 10px currentColor;
}

@keyframes meterPulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.meter-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 100%);
    animation: meterShine 2s linear infinite;
}

@keyframes meterShine {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(200%);
    }
}

/* Radar Sweep Indicator */
.radar-indicator {
    position: relative;
    width: 60px;
    height: 60px;
    border: 2px solid var(--dracula-cyan);
    border-radius: 50%;
    margin: 0 auto;
}

.radar-indicator::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 50%;
    background: linear-gradient(180deg, var(--dracula-cyan) 0%, transparent 100%);
    transform-origin: top center;
    transform: translate(-50%, -100%) rotate(0deg);
    animation: radarSweep 4s linear infinite;
}

.radar-indicator::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: var(--dracula-green);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--dracula-green);
}

/* Waveform Divider */
.waveform-divider {
    width: 100%;
    height: 60px;
    margin: var(--spacing-xl) 0;
    position: relative;
    overflow: hidden;
}

.waveform-divider svg {
    width: 100%;
    height: 100%;
}

.waveform-path {
    fill: none;
    stroke: var(--dracula-cyan);
    stroke-width: 2;
    opacity: 0.6;
    filter: drop-shadow(0 0 4px var(--dracula-cyan));
}

/* Data Stream Background */
.data-stream {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0.1;
}

.data-stream-line {
    position: absolute;
    width: 1px;
    height: 100px;
    background: linear-gradient(180deg,
        transparent 0%,
        var(--dracula-cyan) 50%,
        transparent 100%);
    animation: dataStream 8s linear infinite;
}

.data-stream-line:nth-child(1) { left: 10%; animation-delay: 0s; }
.data-stream-line:nth-child(2) { left: 25%; animation-delay: 2s; }
.data-stream-line:nth-child(3) { left: 45%; animation-delay: 4s; }
.data-stream-line:nth-child(4) { left: 65%; animation-delay: 1s; }
.data-stream-line:nth-child(5) { left: 85%; animation-delay: 3s; }

/* Enhanced Glowing Effects */
.display-panel,
.instrument-panel {
    box-shadow:
        0 0 20px rgba(149, 128, 255, 0.2),
        0 0 40px rgba(128, 255, 234, 0.1),
        inset 0 0 60px rgba(0, 0, 0, 0.5);
}

.display-panel:hover,
.instrument-panel:hover {
    box-shadow:
        0 0 30px rgba(149, 128, 255, 0.4),
        0 0 60px rgba(128, 255, 234, 0.2),
        inset 0 0 60px rgba(0, 0, 0, 0.5);
}

/* Level Indicator Bars */
.level-indicators {
    display: flex;
    gap: 4px;
    align-items: flex-end;
    height: 30px;
}

.level-bar {
    width: 6px;
    background: var(--dracula-current-line);
    border: 1px solid var(--dracula-cyan);
    position: relative;
    transition: var(--transition-fast);
}

.level-bar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--dracula-cyan);
    box-shadow: 0 0 8px var(--dracula-cyan);
}

.level-bar:nth-child(1) { height: 40%; }
.level-bar:nth-child(1)::after { height: 100%; }
.level-bar:nth-child(2) { height: 60%; }
.level-bar:nth-child(2)::after { height: 85%; }
.level-bar:nth-child(3) { height: 80%; }
.level-bar:nth-child(3)::after { height: 70%; }
.level-bar:nth-child(4) { height: 100%; }
.level-bar:nth-child(4)::after { height: 90%; background: var(--dracula-green); }
.level-bar:nth-child(5) { height: 70%; }
.level-bar:nth-child(5)::after { height: 60%; }

/* Oscilloscope Grid Overlay Enhancement */
.grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle, rgba(128, 255, 234, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(128, 255, 234, 0.05) 1px, transparent 1px),
        linear-gradient(0deg, rgba(128, 255, 234, 0.05) 1px, transparent 1px);
    background-size:
        20px 20px,
        20px 20px,
        20px 20px;
    pointer-events: none;
    z-index: 1;
}

/* Light theme grid overlay - use darker lines for visibility on light backgrounds */
[data-theme="light"] .grid-overlay {
    background-image:
        radial-gradient(circle, rgba(124, 58, 237, 0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124, 58, 237, 0.08) 1px, transparent 1px),
        linear-gradient(0deg, rgba(124, 58, 237, 0.08) 1px, transparent 1px);
}

/* ============================================================================
   ENGINEERING TOOLS PAGE
   ============================================================================ */

.tools-section {
    padding: var(--spacing-2xl) 0;
    min-height: calc(100vh - 200px);
}

.tool-panel {
    background: rgba(34, 33, 44, 0.6);
    border: 2px solid rgba(149, 128, 255, 0.3);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    position: relative;
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(10px);
}

.tool-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid rgba(128, 255, 234, 0.2);
}

.tool-label {
    font-family: var(--font-mono);
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--dracula-cyan);
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(128, 255, 234, 0.5);
}

.tool-indicators {
    display: flex;
    gap: 0.5rem;
}

.tool-content {
    position: relative;
    z-index: 2;
}

/* Converter/Calculator Type Selector */
.converter-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-sm);
    background: rgba(42, 40, 51, 0.5);
    border: 1px solid rgba(149, 128, 255, 0.2);
    border-radius: var(--radius-md);
}

.converter-btn {
    flex: 1;
    min-width: 120px;
    padding: 0.75rem 1rem;
    background: rgba(34, 33, 44, 0.8);
    border: 1px solid rgba(149, 128, 255, 0.3);
    border-radius: var(--radius-sm);
    color: var(--dracula-purple);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.converter-btn:hover {
    background: rgba(149, 128, 255, 0.1);
    border-color: var(--dracula-purple);
    box-shadow: 0 0 10px rgba(149, 128, 255, 0.3);
}

.converter-btn.active {
    background: var(--dracula-purple);
    color: var(--dracula-bg);
    border-color: var(--dracula-purple);
    box-shadow: 0 0 15px rgba(149, 128, 255, 0.5);
}

/* Converter Interface */
.converter-interface {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: rgba(42, 40, 51, 0.3);
    border: 1px solid rgba(128, 255, 234, 0.2);
    border-radius: var(--radius-md);
}

.converter-input-group,
.converter-output-group {
    flex: 1;
}

.converter-arrow {
    font-size: 2rem;
    color: var(--dracula-cyan);
    text-shadow: 0 0 10px rgba(128, 255, 234, 0.5);
    margin: 0 var(--spacing-sm);
}

.input-row {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-xs);
}

.tool-input {
    flex: 1;
    padding: 0.75rem;
    background: rgba(34, 33, 44, 0.8);
    border: 1px solid rgba(149, 128, 255, 0.3);
    border-radius: var(--radius-sm);
    color: var(--dracula-foreground);
    font-family: var(--font-mono);
    font-size: 1rem;
    transition: all var(--transition-fast);
}

.tool-input:focus {
    outline: none;
    border-color: var(--dracula-cyan);
    box-shadow: 0 0 10px rgba(128, 255, 234, 0.3);
}

.tool-input:read-only {
    background: rgba(42, 40, 51, 0.5);
    color: var(--dracula-cyan);
}

.tool-select {
    padding: 0.75rem;
    background: rgba(34, 33, 44, 0.8);
    border: 1px solid rgba(149, 128, 255, 0.3);
    border-radius: var(--radius-sm);
    color: var(--dracula-foreground);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    min-width: 100px;
}

.tool-select:focus {
    outline: none;
    border-color: var(--dracula-cyan);
    box-shadow: 0 0 10px rgba(128, 255, 234, 0.3);
}

/* Calculator Interfaces */
.calculator-interface {
    display: none;
    padding: var(--spacing-lg);
    background: rgba(42, 40, 51, 0.3);
    border: 1px solid rgba(128, 255, 234, 0.2);
    border-radius: var(--radius-md);
}

.calculator-interface.active {
    display: block;
}

.calc-description {
    color: var(--dracula-comment);
    font-size: 0.95rem;
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm);
    background: rgba(121, 112, 169, 0.1);
    border-left: 3px solid var(--dracula-purple);
    border-radius: var(--radius-sm);
}

.calc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.calc-input-group {
    display: flex;
    flex-direction: column;
}

.calc-input-group .input-label {
    font-size: 0.85rem;
    margin-bottom: var(--spacing-xs);
}

.calc-result {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background: rgba(34, 33, 44, 0.5);
    border: 1px solid rgba(149, 128, 255, 0.2);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.95rem;
    min-height: 50px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.calc-result .success {
    color: var(--dracula-green);
    font-weight: 600;
    text-shadow: 0 0 5px rgba(138, 255, 128, 0.3);
}

.calc-result .error {
    color: var(--dracula-red);
    font-weight: 600;
}

.calc-result .info {
    color: var(--dracula-cyan);
    font-size: 0.9rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .converter-interface {
        flex-direction: column;
    }

    .converter-arrow {
        transform: rotate(90deg);
        margin: var(--spacing-sm) 0;
    }

    .converter-selector {
        flex-direction: column;
    }

    .converter-btn {
        min-width: 100%;
    }

    .calc-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   SNIPPET MANAGER
   ============================================================================ */

.snippet-controls {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    background: rgba(42, 40, 51, 0.3);
    border: 1px solid rgba(128, 255, 234, 0.2);
    border-radius: var(--radius-md);
}

.snippet-filter-group {
    flex: 1;
    max-width: 300px;
}

.snippets-list {
    display: grid;
    gap: var(--spacing-md);
}

.snippet-card {
    background: rgba(42, 40, 51, 0.5);
    border: 1px solid rgba(149, 128, 255, 0.3);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    transition: all var(--transition-fast);
}

.snippet-card:hover {
    border-color: var(--dracula-purple);
    box-shadow: 0 0 15px rgba(149, 128, 255, 0.2);
}

.snippet-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-sm);
}

.snippet-title {
    font-family: var(--font-mono);
    font-size: 1.1rem;
    color: var(--dracula-cyan);
    margin: 0 0 0.5rem 0;
}

.snippet-category,
.snippet-language {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: rgba(149, 128, 255, 0.2);
    border: 1px solid rgba(149, 128, 255, 0.3);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    margin-right: 0.5rem;
    color: var(--dracula-purple);
}

.snippet-language {
    background: rgba(128, 255, 234, 0.2);
    border-color: rgba(128, 255, 234, 0.3);
    color: var(--dracula-cyan);
}

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

.snippet-action-btn {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(149, 128, 255, 0.3);
    background: rgba(34, 33, 44, 0.8);
    color: var(--dracula-purple);
    font-size: 1.1rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.snippet-action-btn:hover {
    background: rgba(149, 128, 255, 0.2);
    border-color: var(--dracula-purple);
    box-shadow: 0 0 8px rgba(149, 128, 255, 0.3);
}

.snippet-action-btn.danger:hover {
    background: rgba(255, 149, 128, 0.2);
    border-color: var(--dracula-red);
    color: var(--dracula-red);
}

.snippet-code {
    background: rgba(34, 33, 44, 0.9);
    border: 1px solid rgba(128, 255, 234, 0.2);
    border-radius: var(--radius-sm);
    padding: var(--spacing-md);
    margin: var(--spacing-sm) 0;
    overflow-x: auto;
}

.snippet-code code {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--dracula-green);
    line-height: 1.6;
    white-space: pre;
}

.snippet-meta {
    font-size: 0.85rem;
    color: var(--dracula-comment);
    font-family: var(--font-mono);
}

.empty-state {
    text-align: center;
    padding: var(--spacing-2xl);
    color: var(--dracula-comment);
}

/* Snippet Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}

.modal-content {
    background: var(--dracula-bg);
    border: 2px solid var(--dracula-purple);
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 700px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 0 30px rgba(149, 128, 255, 0.5);
}

.snippet-modal-content {
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid rgba(149, 128, 255, 0.3);
}

.modal-title {
    font-family: var(--font-mono);
    font-size: 1.25rem;
    color: var(--dracula-cyan);
    letter-spacing: 2px;
}

.modal-close {
    background: none;
    border: none;
    color: var(--dracula-red);
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
    transition: all var(--transition-fast);
}

.modal-close:hover {
    color: var(--dracula-pink);
    transform: rotate(90deg);
}

.modal-body {
    padding: var(--spacing-lg);
}

.form-group {
    margin-bottom: var(--spacing-md);
}

.snippet-textarea {
    width: 100%;
    min-height: 200px;
    padding: var(--spacing-sm);
    background: rgba(34, 33, 44, 0.8);
    border: 1px solid rgba(149, 128, 255, 0.3);
    border-radius: var(--radius-sm);
    color: var(--dracula-foreground);
    font-family: var(--font-mono);
    font-size: 0.95rem;
    resize: vertical;
}

.snippet-textarea:focus {
    outline: none;
    border-color: var(--dracula-cyan);
    box-shadow: 0 0 10px rgba(128, 255, 234, 0.3);
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid rgba(149, 128, 255, 0.3);
}

.btn-secondary {
    background: rgba(69, 65, 88, 0.5);
    border-color: rgba(121, 112, 169, 0.5);
    color: var(--dracula-comment);
}

.btn-secondary:hover {
    background: rgba(69, 65, 88, 0.8);
    border-color: var(--dracula-comment);
}

/* ============================================================================
   NETWORK TOOLS
   ============================================================================ */

.network-tool-interface {
    display: none;
    padding: var(--spacing-lg);
    background: rgba(42, 40, 51, 0.3);
    border: 1px solid rgba(128, 255, 234, 0.2);
    border-radius: var(--radius-md);
}

.network-tool-interface.active {
    display: block;
}

.network-input-group {
    margin-bottom: var(--spacing-md);
}

.network-output {
    margin-top: var(--spacing-md);
    min-height: 100px;
    max-height: 500px;
    overflow-y: auto;
    background: rgba(34, 33, 44, 0.9);
    border: 1px solid rgba(128, 255, 234, 0.2);
    border-radius: var(--radius-sm);
    padding: var(--spacing-md);
}

.network-output pre {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--dracula-foreground);
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 0;
    line-height: 1.5;
}

.network-success {
    color: var(--dracula-green);
}

.network-error {
    color: var(--dracula-red);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
}

.network-error-detail {
    color: var(--dracula-orange);
    font-size: 0.85rem;
}

.network-loading {
    color: var(--dracula-cyan);
    text-align: center;
    padding: var(--spacing-lg);
    font-family: var(--font-mono);
}

.network-loading::after {
    content: '...';
    animation: dots 1.5s infinite;
}

@keyframes dots {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60%, 100% { content: '...'; }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .snippet-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .snippet-filter-group {
        max-width: 100%;
    }

    .snippet-header {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .modal-content {
        width: 95%;
        max-height: 95vh;
    }
}

/* ============================================================================
   TAB NAVIGATION
   ============================================================================ */

.tab-navigation {
    padding: var(--spacing-md) 0;
    background: rgba(34, 33, 44, 0.3);
    border-bottom: 2px solid rgba(149, 128, 255, 0.3);
}

.tab-selector {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
    flex-wrap: wrap;
}

.tab-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: rgba(42, 40, 51, 0.5);
    border: 2px solid rgba(149, 128, 255, 0.3);
    border-radius: var(--radius-md);
    color: var(--dracula-purple);
    font-family: var(--font-mono);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

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

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

.tab-btn:hover {
    border-color: var(--dracula-purple);
    box-shadow: 0 0 15px rgba(149, 128, 255, 0.3);
    transform: translateY(-2px);
}

.tab-btn.active {
    background: var(--dracula-purple);
    color: var(--dracula-bg);
    border-color: var(--dracula-purple);
    box-shadow: 0 0 20px rgba(149, 128, 255, 0.5);
}

.tab-btn.active .tab-icon {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.tab-icon {
    font-size: 1.2rem;
}

.tab-label {
    white-space: nowrap;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: fadeInTab 0.3s ease;
}

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

/* Responsive tabs */
@media (max-width: 768px) {
    .tab-selector {
        flex-direction: column;
    }

    .tab-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================================
   SYSTEM DASHBOARD
   ============================================================================ */

.dashboard-section {
    padding: var(--spacing-2xl) 0;
    min-height: calc(100vh - 200px);
}

.metrics-header,
.logs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    background: rgba(42, 40, 51, 0.5);
    border: 1px solid rgba(149, 128, 255, 0.3);
    border-radius: var(--radius-md);
}

.section-title {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    color: var(--dracula-cyan);
    letter-spacing: 2px;
    margin: 0;
}

.refresh-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.refresh-controls label {
    color: var(--dracula-foreground);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-small {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.metric-card {
    background: rgba(34, 33, 44, 0.6);
    border: 2px solid rgba(149, 128, 255, 0.3);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    position: relative;
    transition: all var(--transition-normal);
}

.metric-card:hover {
    border-color: var(--dracula-purple);
    box-shadow: 0 0 20px rgba(149, 128, 255, 0.3);
    transform: translateY(-2px);
}

.metric-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: var(--spacing-md);
}

.metric-icon {
    font-size: 1.5rem;
}

.metric-title {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--dracula-cyan);
    letter-spacing: 1px;
    font-weight: 600;
}

.metric-value {
    font-family: var(--font-mono);
    font-size: 3rem;
    font-weight: bold;
    color: var(--dracula-purple);
    text-align: center;
    margin: var(--spacing-sm) 0;
    text-shadow: 0 0 15px rgba(149, 128, 255, 0.5);
}

.metric-subtitle {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--dracula-comment);
    margin-bottom: var(--spacing-md);
}

.metric-bar {
    height: 8px;
    background: rgba(42, 40, 51, 0.8);
    border: 1px solid rgba(149, 128, 255, 0.3);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.metric-bar-fill {
    height: 100%;
    transition: width 0.5s ease, background-color 0.3s ease;
    box-shadow: 0 0 10px currentColor;
}

.metric-bar-fill.bar-normal {
    background: var(--dracula-green);
}

.metric-bar-fill.bar-warning {
    background: var(--dracula-yellow);
}

.metric-bar-fill.bar-critical {
    background: var(--dracula-red);
    animation: pulse-critical 1s infinite;
}

@keyframes pulse-critical {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.metric-network {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.network-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm);
    background: rgba(42, 40, 51, 0.5);
    border: 1px solid rgba(128, 255, 234, 0.2);
    border-radius: var(--radius-sm);
}

.network-label {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--dracula-cyan);
}

.network-value {
    font-family: var(--font-mono);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--dracula-foreground);
}

.last-update {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--dracula-comment);
    padding: var(--spacing-md);
}

/* ============================================================================
   ACCESS LOGS VIEWER
   ============================================================================ */

.logs-filters {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-end;
}

.filter-group {
    flex: 1;
    max-width: 250px;
}

.logs-container {
    background: rgba(34, 33, 44, 0.6);
    border: 2px solid rgba(149, 128, 255, 0.3);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    min-height: 400px;
    max-height: 600px;
    overflow-y: auto;
    margin-bottom: var(--spacing-md);
}

.logs-table {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.log-entry {
    background: rgba(42, 40, 51, 0.5);
    border: 1px solid rgba(128, 255, 234, 0.2);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm);
    transition: all var(--transition-fast);
}

.log-entry:hover {
    border-color: var(--dracula-cyan);
    background: rgba(42, 40, 51, 0.8);
}

.log-row {
    display: grid;
    grid-template-columns: 160px 80px 100px 1fr 130px;
    gap: var(--spacing-sm);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
    align-items: center;
}

.log-time {
    color: var(--dracula-comment);
}

.log-status {
    font-weight: 600;
    text-align: center;
    padding: 0.125rem 0.25rem;
    border-radius: 3px;
}

.status-success {
    color: var(--dracula-green);
    background: rgba(138, 255, 128, 0.1);
}

.status-redirect {
    color: var(--dracula-cyan);
    background: rgba(128, 255, 234, 0.1);
}

.status-client-error {
    color: var(--dracula-yellow);
    background: rgba(255, 255, 128, 0.1);
}

.status-server-error {
    color: var(--dracula-red);
    background: rgba(255, 149, 128, 0.1);
}

.log-method {
    color: var(--dracula-purple);
    font-weight: 600;
}

/* Audit log operation type colors */
.op-upload {
    color: var(--dracula-green);
}

.op-delete {
    color: var(--dracula-red);
}

.op-rename {
    color: var(--dracula-yellow);
}

.op-move {
    color: var(--dracula-orange);
}

.op-copy {
    color: var(--dracula-cyan);
}

.op-create {
    color: var(--dracula-pink);
}

.log-uri {
    color: var(--dracula-foreground);
    word-break: break-all;
}

.log-ip {
    color: var(--dracula-cyan);
}

.log-details {
    margin-top: 0.25rem;
    padding-top: 0.25rem;
    border-top: 1px solid rgba(121, 112, 169, 0.2);
}

.log-ua {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--dracula-comment);
    word-break: break-all;
}

.logs-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    background: rgba(42, 40, 51, 0.5);
    border: 1px solid rgba(149, 128, 255, 0.3);
    border-radius: var(--radius-md);
}

.logs-pagination span {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--dracula-comment);
}

/* Responsive dashboard */
@media (max-width: 768px) {
    .metrics-header,
    .logs-header {
        flex-direction: column;
        gap: var(--spacing-md);
        align-items: stretch;
    }

    .logs-filters {
        flex-direction: column;
    }

    .filter-group {
        max-width: 100%;
    }

    .log-row {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .log-row > * {
        display: block;
    }

    .log-status {
        display: inline-block;
        width: auto;
    }

    .metric-value {
        font-size: 2.5rem;
    }
}

/* ============================================================================
   DASHBOARD FIXES
   ============================================================================ */

/* Fix refresh button text wrapping */
.refresh-controls .btn-small {
    white-space: nowrap;
    min-width: 100px;
}

/* Better spacing for filter controls */
.logs-filters {
    flex-wrap: wrap;
}

.logs-filters .control-btn {
    margin-top: auto;
}

/* Ensure filter inputs don't overflow */
.filter-group .tool-input,
.filter-group .tool-select {
    width: 100%;
}

/* Fix checkbox alignment */
.refresh-controls input[type="checkbox"] {
    margin-right: 0.5rem;
}

/* Better button sizing */
#refresh-now {
    min-width: 110px;
    padding: 0.5rem 1rem;
}

#apply-filters {
    min-width: 150px;
}

/* Fix log entry text overflow */
.log-uri {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Better responsive filter layout */
@media (max-width: 1024px) {
    .logs-filters {
        gap: var(--spacing-sm);
    }
    
    .filter-group {
        min-width: 200px;
    }
}

/* Icon-only refresh button styling */
#refresh-now {
    min-width: 40px;
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

#refresh-now:hover {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

/* Filter label styling - make them visible */
.filter-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--dracula-cyan);
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

/* Fix filter group layout */
.filter-group {
    display: flex;
    flex-direction: column;
}

/* Fix logs pagination layout */
.logs-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
}

.logs-pagination button {
    flex-shrink: 0;
}

.logs-pagination span {
    flex: 1;
    text-align: right;
}

/* Ensure LOAD MORE button is properly sized */
#load-more-logs {
    min-width: 120px;
    white-space: nowrap;
}

/* Fix logs header layout to prevent overlap */
.logs-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-md);
}

.logs-header .section-title {
    margin-bottom: 0;
}

.logs-filters {
    width: 100%;
}

/* ============================================================================
   DOCKER MANAGER STYLES
   ============================================================================ */

.docker-manager-section {
    padding: var(--spacing-xl) 0;
    min-height: calc(100vh - 300px);
}

.docker-overview {
    position: relative;
    background: rgba(34, 33, 44, 0.6);
    border: 2px solid rgba(149, 128, 255, 0.3);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.docker-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-md);
    background: rgba(42, 40, 51, 0.5);
    border: 1px solid rgba(149, 128, 255, 0.2);
    border-radius: var(--radius-md);
}

.stat-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--dracula-comment);
    letter-spacing: 1px;
    font-weight: 700;
}

.stat-value {
    font-family: var(--font-mono);
    font-size: 2rem;
    color: var(--dracula-purple);
    font-weight: bold;
}

.stat-running {
    color: var(--dracula-green);
}

.stat-stopped {
    color: var(--dracula-red);
}

.containers-list {
    position: relative;
    background: rgba(34, 33, 44, 0.6);
    border: 2px solid rgba(149, 128, 255, 0.3);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
}

.containers-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

.container-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--spacing-lg);
}

.container-card {
    position: relative;
    background: rgba(42, 40, 51, 0.8);
    border: 2px solid rgba(149, 128, 255, 0.3);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    transition: all var(--transition-normal);
}

.container-card:hover {
    border-color: var(--dracula-purple);
    box-shadow: 0 0 20px rgba(149, 128, 255, 0.3);
}

.container-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid rgba(149, 128, 255, 0.2);
}

.container-name-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.container-icon {
    font-size: 1.5rem;
}

.container-name {
    font-family: var(--font-mono);
    font-size: 1rem;
    color: var(--dracula-foreground);
    font-weight: 700;
}

.container-status {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm);
    letter-spacing: 1px;
    font-weight: 700;
}

.status-running {
    background: rgba(80, 250, 123, 0.2);
    color: var(--dracula-green);
    border: 1px solid var(--dracula-green);
}

.status-stopped {
    background: rgba(255, 85, 85, 0.2);
    color: var(--dracula-red);
    border: 1px solid var(--dracula-red);
}

.status-restarting {
    background: rgba(241, 250, 140, 0.2);
    color: var(--dracula-yellow);
    border: 1px solid var(--dracula-yellow);
}

.status-paused {
    background: rgba(255, 184, 108, 0.2);
    color: var(--dracula-orange);
    border: 1px solid var(--dracula-orange);
}

.status-unknown {
    background: rgba(121, 112, 169, 0.2);
    color: var(--dracula-comment);
    border: 1px solid var(--dracula-comment);
}

.container-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.info-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--dracula-comment);
    letter-spacing: 1px;
}

.info-value {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--dracula-cyan);
}

.container-stats {
    margin: var(--spacing-md) 0;
    padding: var(--spacing-md);
    background: rgba(34, 33, 44, 0.6);
    border: 1px solid rgba(149, 128, 255, 0.15);
    border-radius: var(--radius-sm);
}

.stat-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--spacing-xs);
}

.stat-row:last-child {
    margin-bottom: 0;
}

.stat-name {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--dracula-comment);
}

.stat-val {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--dracula-purple);
}

.container-actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.action-btn {
    flex: 1;
    min-width: 80px;
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(149, 128, 255, 0.1);
    border: 1px solid var(--dracula-purple);
    border-radius: var(--radius-sm);
    color: var(--dracula-purple);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.action-btn:hover {
    background: var(--dracula-purple);
    color: var(--dracula-bg);
    box-shadow: 0 0 15px rgba(149, 128, 255, 0.5);
}

.btn-start {
    border-color: var(--dracula-green);
    color: var(--dracula-green);
}

.btn-start:hover {
    background: var(--dracula-green);
    color: var(--dracula-bg);
    box-shadow: 0 0 15px rgba(80, 250, 123, 0.5);
}

.btn-stop {
    border-color: var(--dracula-red);
    color: var(--dracula-red);
}

.btn-stop:hover {
    background: var(--dracula-red);
    color: var(--dracula-bg);
    box-shadow: 0 0 15px rgba(255, 85, 85, 0.5);
}

.btn-restart {
    border-color: var(--dracula-yellow);
    color: var(--dracula-yellow);
}

.btn-restart:hover {
    background: var(--dracula-yellow);
    color: var(--dracula-bg);
    box-shadow: 0 0 15px rgba(241, 250, 140, 0.5);
}

.btn-logs {
    border-color: var(--dracula-cyan);
    color: var(--dracula-cyan);
}

.btn-logs:hover {
    background: var(--dracula-cyan);
    color: var(--dracula-bg);
    box-shadow: 0 0 15px rgba(128, 255, 234, 0.5);
}

/* Logs Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.2s ease;
}

.modal-content {
    background: var(--dracula-bg);
    border: 2px solid var(--dracula-purple);
    border-radius: var(--radius-lg);
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.logs-modal {
    width: 1000px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg);
    border-bottom: 2px solid rgba(149, 128, 255, 0.3);
}

.modal-title {
    font-family: var(--font-mono);
    font-size: 1.2rem;
    color: var(--dracula-foreground);
    letter-spacing: 1px;
}

.modal-close {
    background: none;
    border: none;
    color: var(--dracula-red);
    font-size: 2rem;
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.modal-close:hover {
    color: var(--dracula-foreground);
    transform: scale(1.2);
}

.modal-body {
    padding: var(--spacing-lg);
    overflow: auto;
}

.log-output {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--dracula-foreground);
    background: rgba(34, 33, 44, 0.8);
    padding: var(--spacing-md);
    border-radius: var(--radius-sm);
    max-height: 600px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Notifications */
.notification {
    position: fixed;
    top: 100px;
    right: 20px;
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--dracula-bg);
    border: 2px solid var(--dracula-purple);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--dracula-foreground);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    z-index: 2000;
    opacity: 0;
    transform: translateX(400px);
    transition: all 0.3s ease;
}

.notification.show {
    opacity: 1;
    transform: translateX(0);
}

.notification-success {
    border-color: var(--dracula-green);
}

.notification-error {
    border-color: var(--dracula-red);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ============================================================================
   FILE PREVIEW MODAL
   ============================================================================ */

.preview-modal .modal-content {
    max-width: 90vw;
    max-height: 90vh;
    width: auto;
    min-width: 400px;
}

.preview-modal .modal-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid rgba(149, 128, 255, 0.3);
}

.preview-modal .modal-header h3 {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 1rem;
    color: var(--dracula-foreground);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preview-meta {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--dracula-comment);
}

.preview-body {
    padding: 0;
    max-height: 70vh;
    overflow: auto;
}

/* Text preview */
.preview-text {
    padding: 0;
    background: rgba(34, 33, 44, 0.9);
}

.preview-code {
    margin: 0;
    padding: var(--spacing-md);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--dracula-foreground);
    white-space: pre-wrap;
    word-wrap: break-word;
    line-height: 1.5;
    overflow-x: auto;
}

/* Image preview */
.preview-image {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-md);
    background: rgba(0, 0, 0, 0.5);
}

.preview-image img {
    max-width: 100%;
    max-height: 65vh;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

/* Video preview */
.preview-video {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-md);
    background: #000;
}

.preview-video video {
    max-width: 100%;
    max-height: 65vh;
}

/* Audio preview */
.preview-audio {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-xl);
    background: rgba(34, 33, 44, 0.9);
}

.preview-audio audio {
    width: 100%;
    max-width: 500px;
}

/* Preview message (for non-previewable files) */
.preview-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl);
    text-align: center;
}

.preview-icon {
    font-size: 4rem;
    margin-bottom: var(--spacing-md);
}

.preview-message p {
    color: var(--dracula-comment);
    font-family: var(--font-mono);
    margin: var(--spacing-xs) 0;
}

.preview-size {
    font-size: 0.85rem;
}

.preview-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid rgba(149, 128, 255, 0.3);
}

/* ============================================================================
   PAGINATION CONTROLS
   ============================================================================ */

.pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    margin-top: var(--spacing-md);
    background: rgba(42, 40, 51, 0.5);
    border: 1px solid rgba(149, 128, 255, 0.3);
    border-radius: var(--radius-sm);
}

.pagination-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(149, 128, 255, 0.2);
    border: 1px solid rgba(149, 128, 255, 0.5);
    border-radius: var(--radius-sm);
    color: var(--dracula-foreground);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.pagination-btn:hover:not(:disabled) {
    background: rgba(149, 128, 255, 0.4);
    border-color: var(--dracula-purple);
    box-shadow: 0 0 10px rgba(149, 128, 255, 0.3);
}

.pagination-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pagination-info {
    color: var(--dracula-comment);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    letter-spacing: 1px;
}

/* ============================================================================
   AUDIT LOG OPERATION COLORS
   ============================================================================ */

.op-upload {
    color: var(--dracula-green) !important;
}

.op-delete {
    color: var(--dracula-red) !important;
}

.op-rename {
    color: var(--dracula-yellow) !important;
}

.op-move {
    color: var(--dracula-orange) !important;
}

.op-copy {
    color: var(--dracula-cyan) !important;
}

.op-create {
    color: var(--dracula-purple) !important;
}

/* Responsive */
@media (max-width: 1024px) {
    .container-grid {
        grid-template-columns: 1fr;
    }

    .logs-modal {
        width: 95vw;
    }
}

@media (max-width: 768px) {
    .pagination-controls {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .pagination-btn {
        width: 100%;
        text-align: center;
    }
}

/* ============================================================================
   THEME TOGGLE
   ============================================================================ */

.theme-toggle {
    background: transparent;
    border: 1px solid rgba(149, 128, 255, 0.3);
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    font-size: 1.1rem;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle:hover {
    background: rgba(149, 128, 255, 0.2);
    border-color: var(--dracula-purple);
}

.theme-toggle .theme-icon {
    transition: transform 0.3s ease;
}

[data-theme="light"] .theme-toggle {
    border-color: rgba(124, 58, 237, 0.3);
}

[data-theme="light"] .theme-toggle:hover {
    background: rgba(124, 58, 237, 0.1);
    border-color: #7c3aed;
}

/* ============================================================================
   ACTIVITY FEED
   ============================================================================ */

.activity-feed {
    max-height: 400px;
    overflow-y: auto;
    padding: var(--spacing-sm);
}

.activity-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    border-bottom: 1px solid rgba(149, 128, 255, 0.1);
    animation: fadeIn 0.3s ease;
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-icon {
    font-size: 1.2rem;
    width: 2rem;
    text-align: center;
}

.activity-content {
    flex: 1;
}

.activity-message {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--dracula-foreground);
}

.activity-time {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--dracula-comment);
    margin-top: 2px;
}

.activity-user {
    color: var(--dracula-cyan);
}

.activity-path {
    color: var(--dracula-purple);
    word-break: break-all;
}

/* ============================================================================
   BANDWIDTH MONITOR
   ============================================================================ */

.bandwidth-card {
    background: rgba(34, 33, 44, 0.6);
    border: 2px solid rgba(149, 128, 255, 0.3);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    transition: all var(--transition-normal);
}

.bandwidth-card:hover {
    border-color: var(--dracula-purple);
    box-shadow: 0 0 20px rgba(149, 128, 255, 0.3);
}

.bandwidth-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.bandwidth-stat {
    text-align: center;
    padding: var(--spacing-sm);
    background: rgba(42, 40, 51, 0.5);
    border: 1px solid rgba(128, 255, 234, 0.2);
    border-radius: var(--radius-sm);
}

.bandwidth-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--dracula-comment);
    letter-spacing: 1px;
    margin-bottom: var(--spacing-xs);
}

.bandwidth-value {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 700;
}

.bandwidth-upload .bandwidth-value {
    color: var(--dracula-green);
}

.bandwidth-download .bandwidth-value {
    color: var(--dracula-cyan);
}

.bandwidth-chart {
    height: 100px;
    background: rgba(34, 33, 44, 0.6);
    border-radius: var(--radius-sm);
    position: relative;
    overflow: hidden;
}

.bandwidth-chart-bars {
    display: flex;
    align-items: flex-end;
    height: 100%;
    gap: 2px;
    padding: 4px;
}

.bandwidth-bar {
    flex: 1;
    min-width: 4px;
    background: var(--dracula-purple);
    border-radius: 2px 2px 0 0;
    transition: height 0.3s ease;
}

.bandwidth-bar.upload {
    background: var(--dracula-green);
}

.bandwidth-bar.download {
    background: var(--dracula-cyan);
}

/* ============================================================================
   FOLDER SIZE DISPLAY
   ============================================================================ */

.folder-size {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--dracula-comment);
    margin-left: auto;
    padding: 0.2rem 0.5rem;
    background: rgba(149, 128, 255, 0.1);
    border-radius: var(--radius-sm);
}

.folder-size.calculating {
    color: var(--dracula-yellow);
}

.folder-size-btn {
    background: transparent;
    border: none;
    color: var(--dracula-comment);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0.2rem 0.4rem;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.folder-size-btn:hover {
    background: rgba(149, 128, 255, 0.2);
    color: var(--dracula-purple);
}

/* ============================================================================
   SPLIT PANE VIEW
   ============================================================================ */

.split-pane-container {
    display: flex;
    gap: var(--spacing-md);
    height: calc(100vh - 200px);
}

.split-pane {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.split-pane .browser-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.split-pane .data-grid {
    flex: 1;
    overflow-y: auto;
}

.split-pane-divider {
    width: 4px;
    background: rgba(149, 128, 255, 0.3);
    cursor: col-resize;
    border-radius: 2px;
    transition: background 0.2s ease;
}

.split-pane-divider:hover {
    background: var(--dracula-purple);
}

.split-pane-toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

/* ============================================================================
   BREADCRUMB DROPDOWN
   ============================================================================ */

.breadcrumb-item {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.breadcrumb-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--color-bg-elevated);
    border: 1px solid rgba(149, 128, 255, 0.3);
    border-radius: var(--radius-sm);
    min-width: 200px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: var(--shadow-md);
    display: none;
}

.breadcrumb-item:hover .breadcrumb-dropdown,
.breadcrumb-dropdown:hover {
    display: block;
}

.breadcrumb-dropdown-item {
    display: block;
    padding: var(--spacing-xs) var(--spacing-sm);
    color: var(--dracula-foreground);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.breadcrumb-dropdown-item:hover {
    background: rgba(149, 128, 255, 0.2);
}

.breadcrumb-dropdown-item.is-folder::before {
    content: '📁 ';
}

/* ============================================================================
   VIM MODE INDICATOR
   ============================================================================ */

.vim-mode-indicator {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: rgba(34, 33, 44, 0.95);
    border: 1px solid var(--dracula-purple);
    border-radius: var(--radius-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--dracula-purple);
    z-index: 9999;
    display: none;
}

.vim-mode-indicator.active {
    display: block;
}

.vim-mode-indicator .mode-label {
    color: var(--dracula-green);
    font-weight: 700;
}

.file-item.vim-selected {
    outline: 2px solid var(--dracula-purple);
    outline-offset: -2px;
}

.file-item.vim-selected .file-name {
    color: var(--dracula-purple);
}

/* ============================================================================
   THEME TOGGLE BUTTON
   ============================================================================ */

.theme-toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    background: transparent;
    border: 1px solid var(--dracula-comment);
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-text);
    cursor: pointer;
    transition: var(--theme-transition), border-color 0.2s ease;
}

.theme-toggle:hover {
    border-color: var(--dracula-purple);
    background: rgba(149, 128, 255, 0.1);
}

.theme-toggle .theme-icon {
    font-size: 1rem;
}

.theme-toggle .theme-label {
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* ============================================================================
   ACTIVITY FEED STYLES
   ============================================================================ */

.activity-feed {
    max-height: 200px;
    overflow-y: auto;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs);
    border-bottom: 1px solid var(--dracula-current-line);
    font-size: 0.8rem;
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-icon {
    font-size: 1rem;
    min-width: 1.5rem;
    text-align: center;
}

.activity-details {
    flex: 1;
    min-width: 0;
}

.activity-operation {
    font-weight: 600;
    margin-right: var(--spacing-xs);
}

.activity-operation.activity-success {
    color: var(--dracula-green);
}

.activity-operation.activity-failed {
    color: var(--dracula-red);
}

.activity-file {
    color: var(--color-text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activity-time {
    color: var(--color-text-dim);
    font-size: 0.75rem;
    white-space: nowrap;
}

.activity-empty {
    text-align: center;
    color: var(--color-text-dim);
    padding: var(--spacing-md);
}

/* ============================================================================
   BANDWIDTH MONITOR STYLES
   ============================================================================ */

.bandwidth-monitor {
    display: flex;
    gap: var(--spacing-md);
}

.bandwidth-stat {
    flex: 1;
    text-align: center;
}

.bandwidth-label {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-dim);
    margin-bottom: var(--spacing-xs);
}

.bandwidth-value {
    font-family: var(--font-mono);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--dracula-cyan);
}

/* ============================================================================
   DASHBOARD ROW FOR WIDGETS
   ============================================================================ */

.dashboard-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.bandwidth-card,
.activity-card {
    min-height: 200px;
}

@media (max-width: 768px) {
    .dashboard-row {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   FOLDER SIZE INFO
   ============================================================================ */

.folder-size-info p {
    margin-bottom: var(--spacing-xs);
    font-family: var(--font-mono);
}

.folder-size-info strong {
    color: var(--dracula-purple);
}

/* ============================================================================
   VIM HELP MODAL
   ============================================================================ */

.vim-help {
    font-size: 0.9rem;
}

.vim-help p {
    margin: var(--spacing-sm) 0 var(--spacing-xs);
    color: var(--dracula-purple);
}

.vim-help ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.vim-help li {
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid var(--dracula-current-line);
}

.vim-help li:last-child {
    border-bottom: none;
}

.vim-help code {
    background: var(--dracula-current-line);
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    color: var(--dracula-cyan);
}

/* ============================================================================
   VIM FOCUSED ITEM
   ============================================================================ */

.file-item.vim-focused {
    background: rgba(149, 128, 255, 0.15) !important;
    border-left: 3px solid var(--dracula-purple);
}

/* ============================================================================
   BREADCRUMB WRAPPER
   ============================================================================ */

.breadcrumb-wrapper {
    display: inline-flex;
    align-items: center;
    position: relative;
}

.breadcrumb-dropdown-btn {
    margin-left: 2px;
    padding: 0 4px;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.breadcrumb-dropdown-btn:hover {
    opacity: 1;
    color: var(--dracula-purple);
}

/* Fix vim indicator display */
.vim-mode-indicator {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.vim-icon {
    font-size: 1rem;
}

.vim-text {
    font-weight: 700;
    color: var(--dracula-green);
}

/* ============================================================================
   SPLIT PANE VIEW
   ============================================================================ */

.split-toggle-btn.active {
    background: linear-gradient(135deg, var(--dracula-cyan), var(--dracula-green));
    box-shadow: 0 0 15px rgba(128, 255, 234, 0.4);
}

.split-pane-container {
    display: flex;
    gap: 0;
    width: 100%;
    min-height: 50vh;
}

.split-pane-container .browser-panel {
    flex: 1;
    min-width: 0;
    transition: flex 0.3s ease;
}

.split-pane-container.split-active .browser-panel {
    flex: 1 1 50%;
}

/* Pane Divider */
.pane-divider {
    width: 8px;
    background: var(--color-bg);
    cursor: col-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 10;
}

.pane-divider:hover,
.pane-divider.dragging {
    background: var(--dracula-current-line);
}

.divider-handle {
    width: 4px;
    height: 40px;
    background: var(--dracula-comment);
    border-radius: 2px;
    transition: background 0.2s ease;
}

.pane-divider:hover .divider-handle,
.pane-divider.dragging .divider-handle {
    background: var(--dracula-purple);
}

/* Pane specific styles */
.pane-left,
.pane-right {
    overflow: hidden;
}

.pane-right {
    border-left: none;
}

.pane-close-btn {
    background: transparent;
    border: 1px solid var(--dracula-red);
    color: var(--dracula-red);
    padding: 0.3rem 0.6rem;
    min-width: auto;
}

.pane-close-btn:hover {
    background: rgba(255, 149, 128, 0.2);
}

/* Active pane indicator */
.browser-panel.pane-active {
    box-shadow: 0 0 0 2px var(--dracula-purple);
}

.browser-panel.pane-active .path-label {
    color: var(--dracula-purple);
}

/* Responsive: Stack panes vertically on mobile */
@media (max-width: 1024px) {
    .split-pane-container {
        flex-direction: column;
    }

    .split-pane-container.split-active .browser-panel {
        flex: 1 1 auto;
        min-height: 40vh;
    }

    .pane-divider {
        width: 100%;
        height: 8px;
        cursor: row-resize;
    }

    .divider-handle {
        width: 40px;
        height: 4px;
    }
}

/* Hide split toggle on very small screens */
@media (max-width: 640px) {
    .split-toggle-btn {
        display: none;
    }
}

/* ============================================================================
   MOBILE RESPONSIVE STYLES
   ============================================================================ */

/* Tablets and smaller */
@media (max-width: 900px) {
    /* Header adjustments */
    .control-header-content {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.75rem;
    }

    .system-title {
        font-size: 1.2rem;
        letter-spacing: 2px;
        order: -1;
        width: 100%;
        text-align: center;
    }

    .system-status {
        order: 0;
    }

    .system-nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }

    .nav-btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.65rem;
    }

    .nav-user {
        font-size: 0.65rem;
    }

    /* Container padding */
    .container {
        padding: 0 1rem;
    }

    /* File browser adjustments */
    .browser-panel {
        margin: 0.5rem;
        padding: 0.75rem;
    }

    .browser-header {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .browser-tools {
        width: 100%;
        justify-content: space-between;
    }

    .file-entry {
        padding: 0.5rem;
    }

    .file-name {
        font-size: 0.8rem;
    }

    .file-meta {
        font-size: 0.65rem;
    }

    /* Tool panels */
    .tool-panel {
        padding: 1rem;
    }

    .tool-grid {
        grid-template-columns: 1fr;
    }

    /* Dashboard grid */
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

/* Mobile phones */
@media (max-width: 640px) {
    /* Header - stack everything */
    .control-header {
        padding: 0.5rem 0;
    }

    .control-header-content {
        flex-direction: column;
        gap: 0.5rem;
    }

    .system-title {
        font-size: 1rem;
        letter-spacing: 1px;
    }

    .system-status .status-text {
        font-size: 0.6rem;
        letter-spacing: 1px;
    }

    .system-nav {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.25rem;
    }

    .nav-btn {
        padding: 0.35rem 0.5rem;
        font-size: 0.6rem;
        letter-spacing: 0;
    }

    .nav-user {
        grid-column: span 2;
        text-align: center;
    }

    /* Hide username on very small screens, just show icon */
    .nav-user {
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Panels */
    .terminal-panel,
    .browser-panel {
        margin: 0.5rem;
        border-radius: 8px;
        padding: 0.75rem;
    }

    /* File browser */
    .browser-header {
        flex-direction: column;
        align-items: stretch;
    }

    .path-display {
        width: 100%;
    }

    .path-readout {
        font-size: 0.7rem;
    }

    .browser-tools {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .browser-tools button,
    .browser-tools .tool-btn {
        padding: 0.3rem 0.5rem;
        font-size: 0.65rem;
    }

    .file-list {
        max-height: 50vh;
    }

    .file-entry {
        padding: 0.5rem 0.4rem;
    }

    .file-icon {
        font-size: 1rem;
        margin-right: 0.4rem;
    }

    .file-name {
        font-size: 0.75rem;
    }

    .file-actions {
        gap: 0.25rem;
    }

    .file-actions button {
        padding: 0.2rem 0.4rem;
        font-size: 0.7rem;
    }

    /* Breadcrumbs */
    .breadcrumbs {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .breadcrumb-item {
        font-size: 0.7rem;
    }

    /* Forms */
    .input-wrapper,
    .terminal-input,
    .tool-input {
        font-size: 0.85rem;
        padding: 0.5rem;
    }

    .submit-btn,
    .login-btn {
        padding: 0.6rem 1rem;
        font-size: 0.8rem;
    }

    /* Terminal/Login */
    .terminal-panel {
        max-width: 100%;
        margin: 0.5rem;
    }

    .terminal-header {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .terminal-label {
        font-size: 0.65rem;
    }

    /* Dashboard cards */
    .stat-card,
    .metric-card {
        padding: 0.75rem;
    }

    .stat-value {
        font-size: 1.5rem;
    }

    .stat-label {
        font-size: 0.7rem;
    }

    /* Docker container cards */
    .container-card {
        padding: 0.75rem;
    }

    .container-name {
        font-size: 0.85rem;
    }

    .container-actions {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .container-actions button {
        padding: 0.25rem 0.5rem;
        font-size: 0.65rem;
    }

    /* Tools page */
    .tool-section {
        padding: 0.75rem;
    }

    .tool-output {
        font-size: 0.7rem;
        max-height: 200px;
    }

    /* Modals */
    .modal-content {
        width: 95%;
        max-width: 95%;
        margin: 1rem;
        padding: 1rem;
    }

    .modal-header h3 {
        font-size: 1rem;
    }

    /* Progress bars and overlays */
    .progress-overlay {
        padding: 1rem;
    }

    .progress-modal {
        width: 90%;
        padding: 1rem;
    }

    /* Bulk actions bar */
    .bulk-actions-bar {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.5rem;
    }

    .bulk-actions-bar button {
        flex: 1;
        min-width: 80px;
    }

    /* Footer */
    .footer-display {
        padding: 1rem;
    }

    .footer-display .footer-section {
        text-align: center;
    }
}

/* Very small phones */
@media (max-width: 380px) {
    .system-title {
        font-size: 0.9rem;
    }

    .system-nav {
        grid-template-columns: repeat(2, 1fr);
    }

    .nav-btn {
        padding: 0.3rem 0.4rem;
        font-size: 0.55rem;
    }

    .file-name {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ============================================================================
   DASHBOARD/TOOLS/DOCKER MOBILE STYLES
   ============================================================================ */

/* Tablets */
@media (max-width: 900px) {
    /* Dashboard */
    .dashboard-section {
        padding: 1rem 0;
    }

    .metrics-header,
    .logs-header {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }

    .section-title {
        font-size: 1.1rem;
    }

    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .metric-card {
        padding: 0.75rem;
    }

    .metric-value {
        font-size: 1.5rem;
    }

    /* Tabs */
    .tab-selector {
        gap: 0.5rem;
    }

    .tab-btn {
        padding: 0.5rem;
        font-size: 0.75rem;
    }

    .tab-label {
        display: none;
    }

    .tab-icon {
        font-size: 1.2rem;
    }

    /* Logs */
    .log-entry {
        padding: 0.5rem;
        font-size: 0.75rem;
    }

    .log-timestamp,
    .log-ip,
    .log-action {
        font-size: 0.7rem;
    }

    /* Tools */
    .tool-panel {
        padding: 0.75rem;
    }

    .tool-header h3 {
        font-size: 0.9rem;
    }

    .tool-input {
        padding: 0.5rem;
        font-size: 0.85rem;
    }

    .tool-output {
        font-size: 0.75rem;
        max-height: 250px;
    }

    /* Docker */
    .docker-container {
        padding: 0.75rem;
    }

    .container-header {
        flex-direction: column;
        gap: 0.5rem;
    }

    .container-name {
        font-size: 0.85rem;
    }

    .container-status {
        font-size: 0.7rem;
    }

    .container-actions {
        width: 100%;
        justify-content: center;
    }
}

/* Mobile phones */
@media (max-width: 640px) {
    /* Dashboard */
    .dashboard-section {
        padding: 0.5rem 0;
        min-height: unset;
    }

    .metrics-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .metric-card {
        padding: 0.6rem;
    }

    .metric-header {
        margin-bottom: 0.5rem;
    }

    .metric-icon {
        font-size: 1.2rem;
    }

    .metric-title {
        font-size: 0.65rem;
    }

    .metric-value {
        font-size: 1.3rem;
    }

    .metric-subtitle {
        font-size: 0.65rem;
    }

    .metric-bar {
        height: 6px;
    }

    /* Tabs */
    .tab-navigation {
        padding: 0.5rem 0;
    }

    .tab-selector {
        gap: 0.25rem;
    }

    .tab-btn {
        padding: 0.4rem 0.6rem;
        min-width: unset;
        flex: 1;
    }

    .tab-icon {
        font-size: 1rem;
    }

    /* Logs */
    .log-list {
        max-height: 300px;
    }

    .log-entry {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
        padding: 0.5rem;
    }

    .log-timestamp {
        font-size: 0.6rem;
    }

    .log-ip {
        font-size: 0.65rem;
    }

    .log-action {
        font-size: 0.7rem;
    }

    /* Tools */
    .tool-section {
        margin-bottom: 0.75rem;
    }

    .tool-header {
        padding: 0.5rem;
    }

    .tool-header h3 {
        font-size: 0.8rem;
    }

    .tool-content {
        padding: 0.5rem;
    }

    .tool-form {
        flex-direction: column;
        gap: 0.5rem;
    }

    .tool-input {
        width: 100%;
    }

    .tool-btn {
        width: 100%;
        padding: 0.5rem;
    }

    .tool-output {
        font-size: 0.65rem;
        max-height: 180px;
        padding: 0.5rem;
    }

    /* Docker */
    .docker-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .docker-container {
        padding: 0.5rem;
    }

    .container-name {
        font-size: 0.75rem;
        word-break: break-all;
    }

    .container-info {
        font-size: 0.65rem;
    }

    .container-actions {
        flex-wrap: wrap;
    }

    .container-actions button {
        padding: 0.25rem 0.5rem;
        font-size: 0.6rem;
        flex: 1;
        min-width: 60px;
    }

    /* Login terminal */
    .login-terminal {
        padding: 1rem 0;
        min-height: calc(100vh - 150px);
    }

    .terminal-panel {
        margin: 0 0.5rem;
        padding: 1rem;
    }

    .terminal-title {
        font-size: 1rem;
    }

    /* Input groups */
    .input-group {
        margin-bottom: 0.75rem;
    }

    .input-label {
        font-size: 0.7rem;
        margin-bottom: 0.3rem;
    }
}

/* Very small phones - additional dashboard/tools styles */
@media (max-width: 380px) {
    .metrics-header .section-title,
    .logs-header .section-title {
        font-size: 0.85rem;
    }

    .refresh-controls {
        flex-direction: column;
        gap: 0.5rem;
    }

    .refresh-controls label {
        font-size: 0.7rem;
    }

    .metric-value {
        font-size: 1.1rem;
    }

    .tab-btn {
        padding: 0.3rem 0.4rem;
    }

    .tab-icon {
        font-size: 0.9rem;
    }
}

/* ============================================================================
   FILE BROWSER INLINE STYLES (extracted from browser.html)
   ============================================================================ */

/* Full-height layout for file browser */
html:has(.browser-terminal), 
body:has(.browser-terminal) {
    height: 100%;
    margin: 0;
    overflow: hidden;
}

.browser-terminal ~ * .portal-main-content {
    padding: 0 !important;
    overflow: hidden;
}

.browser-terminal {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.browser-terminal > .container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0.5rem;
}

.split-pane-container {
    flex: 1;
    min-height: 0;
}

.browser-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.data-grid {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .browser-terminal > .container {
        padding: 0.25rem;
    }

    /* Panel corners smaller on mobile */
    .browser-panel .panel-corner {
        width: 8px;
        height: 8px;
    }

    /* Hide split pane toggle and right pane on mobile */
    .split-toggle-btn {
        display: none !important;
    }
    .pane-right,
    .pane-divider {
        display: none !important;
    }

    .browser-header {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.5rem;
    }
    .browser-path-display {
        width: 100%;
    }

    /* Path readout text overflow */
    .path-readout {
        overflow-x: auto;
        white-space: nowrap;
        max-width: 100%;
    }
    #current-path {
        font-size: 0.75rem;
    }
    .breadcrumb-item {
        font-size: 0.75rem;
    }

    .browser-search {
        width: 100%;
        flex-direction: column;
        gap: 0.25rem;
    }
    .browser-search .search-input,
    .browser-search .sort-select {
        width: 100%;
        font-size: 0.85rem;
        padding: 0.5rem;
    }
    .browser-actions {
        width: 100%;
        justify-content: space-between;
        gap: 0.5rem;
    }
    .browser-actions .control-btn {
        flex: 1;
        padding: 0.5rem;
        font-size: 0.75rem;
        min-width: 0;
    }
    .browser-actions .btn-text {
        display: none;
    }
    .browser-actions .btn-icon {
        margin-right: 0;
        font-size: 1rem;
    }

    /* Bulk actions bar */
    .bulk-actions-bar {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.5rem;
    }
    .bulk-buttons {
        width: 100%;
        justify-content: space-between;
        gap: 0.5rem;
    }
    .bulk-buttons .control-btn {
        flex: 1;
        font-size: 0.7rem;
        padding: 0.4rem;
    }
    .bulk-buttons .btn-text {
        display: none;
    }

    /* File items - ensure visibility with explicit colors */
    .data-grid .file-item {
        padding: 0.5rem;
        gap: 0.5rem;
        display: flex;
        align-items: center;
    }
    .data-grid .file-item .file-icon {
        font-size: 1.25rem;
        min-width: 28px;
        margin-right: 0.5rem;
    }
    .data-grid .file-item .file-info {
        flex: 1;
        min-width: 0;
        overflow: hidden;
    }
    .data-grid .file-item .file-name {
        font-size: 0.85rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: var(--dracula-foreground, #f8f8f2);
        display: block;
    }
    .data-grid .file-item .file-meta {
        font-size: 0.65rem;
        color: var(--dracula-comment, #7970A9);
        display: block;
    }

    /* File action buttons - compact on mobile */
    .data-grid .file-item .file-actions {
        display: flex;
        gap: 0.25rem;
        flex-shrink: 0;
        margin-left: auto;
    }
    .data-grid .file-item .file-actions button,
    .data-grid .file-item .file-actions .btn {
        width: 28px;
        height: 28px;
        min-width: 28px;
        font-size: 0.85rem;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /* Hide less essential buttons on mobile */
    .data-grid .file-item .file-actions button[title="Calculate Size"],
    .data-grid .file-item .file-actions button[title="Move"],
    .data-grid .file-item .file-actions button[title="Copy"],
    .data-grid .file-item .file-actions button[title="Preview"] {
        display: none;
    }

    /* Checkbox */
    .file-item-checkbox {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }

    /* Footer on mobile */
    .control-footer .footer-display {
        flex-direction: column;
        gap: 0.25rem;
    }
    .control-footer .footer-section {
        padding: 0.25rem 0.5rem;
        font-size: 0.65rem;
    }
    .control-footer .footer-label,
    .control-footer .footer-value {
        font-size: 0.65rem;
    }

    /* Loading display */
    .loading-display {
        padding: 1rem;
    }
    .loading-text {
        font-size: 0.8rem;
    }

    /* Empty state */
    .empty-display .empty-icon {
        font-size: 2rem;
    }
    .empty-display .empty-text {
        font-size: 0.8rem;
    }

    /* Pagination on mobile */
    .pagination-controls {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.5rem;
    }
    .pagination-btn {
        width: 100%;
        padding: 0.5rem;
    }
    .pagination-info {
        font-size: 0.75rem;
    }
}

/* Extra small screens */
@media (max-width: 400px) {
    .browser-header {
        padding: 0.35rem;
    }
    .browser-actions .control-btn {
        padding: 0.4rem;
    }
    .file-item .file-actions button {
        width: 24px;
        height: 24px;
        font-size: 0.75rem;
    }
    /* On very small screens, only show download and delete */
    .file-item .file-actions button[title="Rename"] {
        display: none;
    }
}

/* ============================================================================
   ACCESSIBILITY: FOCUS STYLES
   ============================================================================ */

/* Focus-visible for keyboard navigation (Dracula PRO cyan) */
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--dracula-cyan);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Remove default focus outline (only when focus-visible is supported) */
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
    outline: none;
}

/* Enhanced focus for modal buttons */
.modal-content button:focus-visible {
    outline: 2px solid var(--dracula-cyan);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(128, 255, 234, 0.2);
}

/* ============================================================================
   UI/UX ENHANCEMENTS - Modern Polish & Micro-interactions
   ============================================================================ */

/* === MODERN BUTTON SYSTEM === */

/* Base button styles - unified across all portal buttons */
.control-btn,
.nav-btn,
.action-btn,
.bulk-btn,
.pagination-btn,
.converter-btn,
.snippet-action-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    background: rgba(69, 65, 88, 0.6);
    border: 1px solid rgba(149, 128, 255, 0.4);
    border-radius: 6px;
    color: var(--dracula-foreground);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    white-space: nowrap;
}

/* Button hover effect - subtle glow and lift */
.control-btn:hover,
.nav-btn:hover,
.action-btn:hover,
.bulk-btn:hover {
    background: rgba(149, 128, 255, 0.2);
    border-color: var(--dracula-purple);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(149, 128, 255, 0.25),
                0 0 0 1px rgba(149, 128, 255, 0.1);
}

/* Button active/pressed state */
.control-btn:active,
.nav-btn:active,
.action-btn:active,
.bulk-btn:active {
    transform: translateY(0);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Button ripple effect on click */
.control-btn::after,
.action-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease;
    opacity: 0;
    pointer-events: none;
}

.control-btn:active::after,
.action-btn:active::after {
    width: 200px;
    height: 200px;
    opacity: 1;
    transition: 0s;
}

/* Primary action buttons (gradient style) */
.control-btn.btn-primary,
.btn-primary {
    background: linear-gradient(135deg, rgba(149, 128, 255, 0.8), rgba(255, 128, 191, 0.8));
    border-color: transparent;
    color: var(--dracula-bg);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.control-btn.btn-primary:hover,
.btn-primary:hover {
    background: linear-gradient(135deg, rgba(149, 128, 255, 1), rgba(255, 128, 191, 1));
    box-shadow: 0 4px 16px rgba(149, 128, 255, 0.4),
                0 0 0 1px rgba(149, 128, 255, 0.2);
}

/* Danger buttons */
.control-btn.btn-danger,
.btn-danger {
    border-color: rgba(255, 149, 128, 0.4);
}

.control-btn.btn-danger:hover,
.btn-danger:hover {
    background: rgba(255, 149, 128, 0.2);
    border-color: var(--dracula-red);
    box-shadow: 0 4px 12px rgba(255, 149, 128, 0.25);
}

/* Success buttons */
.control-btn.btn-success,
.btn-success {
    border-color: rgba(138, 255, 128, 0.4);
}

.control-btn.btn-success:hover,
.btn-success:hover {
    background: rgba(138, 255, 128, 0.2);
    border-color: var(--dracula-green);
    box-shadow: 0 4px 12px rgba(138, 255, 128, 0.25);
}

/* Icon-only buttons (file actions) */
.btn-icon-only,
.file-actions .btn,
.file-actions button:not(.btn) {
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    border-radius: 6px;
    background: rgba(69, 65, 88, 0.5);
    border: 1px solid rgba(149, 128, 255, 0.3);
    font-size: 1rem;
    transition: all 0.2s ease;
}

.btn-icon-only:hover,
.file-actions .btn:hover,
.file-actions button:not(.btn):hover {
    background: rgba(149, 128, 255, 0.25);
    border-color: var(--dracula-purple);
    transform: scale(1.1);
}

/* Download button specific */
.file-actions .btn[title="Download"]:hover,
.file-actions button[title="Download"]:hover {
    background: rgba(128, 255, 234, 0.2);
    border-color: var(--dracula-cyan);
    color: var(--dracula-cyan);
}

/* Delete button specific */
.file-actions .btn[title="Delete"]:hover,
.file-actions button[title="Delete"]:hover {
    background: rgba(255, 149, 128, 0.2);
    border-color: var(--dracula-red);
    color: var(--dracula-red);
}

/* Rename button specific */
.file-actions .btn[title="Rename"]:hover,
.file-actions button[title="Rename"]:hover {
    background: rgba(255, 255, 128, 0.15);
    border-color: var(--dracula-yellow);
    color: var(--dracula-yellow);
}

/* === TOOLTIP SYSTEM === */

/* Tooltip container */
[data-tooltip] {
    position: relative;
}

/* Tooltip bubble */
[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: 0.4rem 0.75rem;
    background: rgba(34, 33, 44, 0.98);
    border: 1px solid var(--dracula-purple);
    border-radius: 6px;
    color: var(--dracula-foreground);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4),
                0 0 20px rgba(149, 128, 255, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 9999;
    pointer-events: none;
}

/* Tooltip arrow */
[data-tooltip]::after {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--dracula-purple);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 9999;
    pointer-events: none;
}

/* Show tooltip on hover */
[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Tooltip positioned below */
[data-tooltip-position="bottom"]::before {
    bottom: auto;
    top: calc(100% + 8px);
    transform: translateX(-50%) translateY(-4px);
}

[data-tooltip-position="bottom"]::after {
    bottom: auto;
    top: calc(100% + 2px);
    border-top-color: transparent;
    border-bottom-color: var(--dracula-purple);
}

[data-tooltip-position="bottom"]:hover::before {
    transform: translateX(-50%) translateY(0);
}

/* === ENHANCED FILE BROWSER === */

/* File entry styling improvements */
.file-item,
.data-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(42, 40, 51, 0.4);
    border: 1px solid rgba(149, 128, 255, 0.15);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    transition: all 0.2s ease;
    cursor: pointer;
}

.file-item:hover,
.data-item:hover {
    background: rgba(149, 128, 255, 0.1);
    border-color: rgba(149, 128, 255, 0.35);
    transform: translateX(4px);
}

.file-item.selected,
.data-item.selected {
    background: rgba(149, 128, 255, 0.15);
    border-color: var(--dracula-purple);
    box-shadow: 0 0 0 2px rgba(149, 128, 255, 0.1);
}

/* File icon animation */
.file-icon {
    transition: transform 0.2s ease;
}

.file-item:hover .file-icon {
    transform: scale(1.15) rotate(-3deg);
}

/* Directory items with distinct styling */
.file-item.directory {
    border-left: 3px solid var(--dracula-cyan);
}

.file-item.directory:hover {
    border-left-color: var(--dracula-purple);
}

/* File actions appear on hover (desktop) */
@media (min-width: 769px) {
    .file-item .file-actions {
        opacity: 0;
        transform: translateX(8px);
        transition: all 0.2s ease;
    }

    .file-item:hover .file-actions {
        opacity: 1;
        transform: translateX(0);
    }
}

/* === IMPROVED FORM ELEMENTS === */

/* Input fields */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="number"],
textarea,
select {
    background: rgba(34, 33, 44, 0.8);
    border: 1px solid rgba(149, 128, 255, 0.3);
    border-radius: 6px;
    color: var(--dracula-foreground);
    font-family: var(--font-mono);
    padding: 0.65rem 0.9rem;
    transition: all 0.2s ease;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--dracula-cyan);
    box-shadow: 0 0 0 3px rgba(128, 255, 234, 0.15),
                0 0 12px rgba(128, 255, 234, 0.2);
}

/* Placeholder styling */
::placeholder {
    color: var(--dracula-comment);
    opacity: 0.7;
}

/* Checkbox styling */
input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: rgba(34, 33, 44, 0.8);
    border: 2px solid rgba(149, 128, 255, 0.4);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

input[type="checkbox"]:hover {
    border-color: var(--dracula-purple);
}

input[type="checkbox"]:checked {
    background: var(--dracula-purple);
    border-color: var(--dracula-purple);
}

input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--dracula-bg);
    font-size: 12px;
    font-weight: bold;
}

/* === LOADING STATES === */

/* Skeleton loading animation */
@keyframes skeleton-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

.skeleton {
    background: linear-gradient(90deg,
        rgba(69, 65, 88, 0.3) 0%,
        rgba(149, 128, 255, 0.15) 50%,
        rgba(69, 65, 88, 0.3) 100%);
    background-size: 200% 100%;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
    border-radius: 4px;
}

/* Improved loading spinner */
.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(149, 128, 255, 0.2);
    border-top-color: var(--dracula-purple);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Button loading state */
.control-btn.loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.control-btn.loading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* === ENHANCED CARDS & PANELS === */

/* Card hover lift effect */
.quick-link-card,
.metric-card,
.status-card,
.container-card,
.snippet-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.quick-link-card:hover,
.metric-card:hover,
.status-card:hover,
.container-card:hover,
.snippet-card:hover {
    transform: translateY(-4px);
}

/* Panel glow animation on hover */
@keyframes panel-glow {
    0%, 100% { box-shadow: 0 4px 20px rgba(149, 128, 255, 0.2); }
    50% { box-shadow: 0 4px 30px rgba(149, 128, 255, 0.35); }
}

.browser-panel:hover,
.tool-panel:hover {
    animation: panel-glow 2s ease-in-out infinite;
}

/* === SCROLL IMPROVEMENTS === */

/* Custom scrollbar (enhanced) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: rgba(34, 33, 44, 0.5);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--dracula-purple), var(--dracula-pink));
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--dracula-pink), var(--dracula-purple));
}

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* === MOBILE TOUCH TARGETS (44px minimum) === */

@media (max-width: 768px) {
    /* Ensure minimum touch target size */
    .control-btn,
    .nav-btn,
    .action-btn,
    button,
    .file-item,
    .sidebar-link,
    a.quick-link-card {
        min-height: 44px;
    }

    /* Icon buttons need full touch area */
    .btn-icon-only,
    .file-actions .btn,
    .file-actions button {
        min-width: 44px;
        min-height: 44px;
        width: 44px;
        height: 44px;
    }

    /* Increase spacing for easier touch */
    .file-item {
        padding: 0.875rem 1rem;
        margin-bottom: 0.625rem;
    }

    /* Navigation links */
    .sidebar-link {
        padding: 0.875rem 1rem;
    }

    /* Checkbox larger on mobile */
    input[type="checkbox"] {
        width: 22px;
        height: 22px;
    }
}

/* === NOTIFICATION TOASTS (improved) === */

.notification,
.toast {
    position: fixed;
    top: 80px;
    right: 20px;
    padding: 1rem 1.5rem;
    background: rgba(34, 33, 44, 0.98);
    border: 1px solid var(--dracula-purple);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
                0 0 0 1px rgba(149, 128, 255, 0.1);
    z-index: 10000;
    transform: translateX(120%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    max-width: 360px;
}

.notification.show,
.toast.show {
    transform: translateX(0);
}

.notification-success,
.toast-success {
    border-left: 4px solid var(--dracula-green);
}

.notification-error,
.toast-error {
    border-left: 4px solid var(--dracula-red);
}

.notification-info,
.toast-info {
    border-left: 4px solid var(--dracula-cyan);
}

/* === EMPTY STATES (enhanced) === */

.empty-display,
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
}

.empty-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
    animation: float 3s ease-in-out infinite;
}

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

.empty-text {
    font-size: 1.1rem;
    color: var(--dracula-foreground);
    margin-bottom: 0.5rem;
    letter-spacing: 0.1em;
}

.empty-hint {
    font-size: 0.9rem;
    color: var(--dracula-comment);
    max-width: 300px;
}

/* === LIGHT THEME BUTTON OVERRIDES === */

[data-theme="light"] .control-btn,
[data-theme="light"] .nav-btn,
[data-theme="light"] .action-btn {
    background: rgba(232, 230, 240, 0.8);
    border-color: rgba(124, 58, 237, 0.3);
    color: #282a36;
}

[data-theme="light"] .control-btn:hover,
[data-theme="light"] .nav-btn:hover,
[data-theme="light"] .action-btn:hover {
    background: rgba(124, 58, 237, 0.15);
    border-color: #7c3aed;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
}

[data-theme="light"] .file-item,
[data-theme="light"] .data-item {
    background: rgba(248, 248, 242, 0.6);
    border-color: rgba(124, 58, 237, 0.15);
}

[data-theme="light"] .file-item:hover,
[data-theme="light"] .data-item:hover {
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.3);
}

[data-theme="light"] [data-tooltip]::before {
    background: rgba(248, 248, 242, 0.98);
    border-color: #7c3aed;
    color: #282a36;
}

[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="search"],
[data-theme="light"] textarea,
[data-theme="light"] select {
    background: rgba(248, 248, 242, 0.9);
    border-color: rgba(124, 58, 237, 0.3);
    color: #282a36;
}

[data-theme="light"] input[type="text"]:focus,
[data-theme="light"] input[type="password"]:focus,
[data-theme="light"] input[type="search"]:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
    border-color: #0891b2;
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);
}

[data-theme="light"] input[type="checkbox"] {
    background: rgba(248, 248, 242, 0.9);
    border-color: rgba(124, 58, 237, 0.4);
}

[data-theme="light"] input[type="checkbox"]:checked {
    background: #7c3aed;
    border-color: #7c3aed;
}

[data-theme="light"] ::-webkit-scrollbar-track {
    background: rgba(232, 230, 240, 0.5);
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #7c3aed, #db2777);
}

/* Enhanced focus for file action buttons */
.file-actions button:focus-visible {
    outline: 2px solid var(--dracula-cyan);
    outline-offset: 1px;
    z-index: 1;
}

/* Focus for breadcrumb items */
.breadcrumb-item:focus-visible {
    outline: 2px solid var(--dracula-cyan);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Focus for checkboxes */
input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--dracula-cyan);
    outline-offset: 2px;
}

/* ============================================================================
   TABLET & FOLDABLE DEVICE OPTIMIZATIONS
   Targets: Galaxy Z Fold (inner display ~1812px), iPads, Surface tablets
   ============================================================================ */

/* Foldable devices in landscape (wide tablets) */
@media (min-width: 1024px) and (max-width: 1400px) {
    /* Homepage - Adjust grid for medium screens */
    .systems-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    /* Contact section */
    .contact-links {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Container padding */
    .container {
        padding: 0 2rem;
    }

    /* Panel sizing */
    .instrument-panel {
        padding: 1.5rem;
    }
}

/* Tablet portrait & foldable inner display */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Homepage grids */
    .systems-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }

    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }

    /* Reduce panel heights for better fit */
    .main-display-panel {
        padding: 2rem;
    }

    .section-title {
        font-size: 1.5rem;
    }

    /* Footer adjustments */
    .control-footer .footer-display {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }
}

/* Foldable-specific: Galaxy Z Fold unfolded (~1812px wide in portrait, ~2176px in landscape) */
@media (min-width: 900px) and (max-width: 1200px) and (min-height: 1000px) {
    /* This targets foldable inner displays in portrait orientation */

    /* Better use of vertical space */
    .main-display-panel {
        min-height: auto;
        padding: 1.5rem;
    }

    /* Optimize grid for square-ish aspect ratio */
    .systems-grid,
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    /* Instrument panels - more compact */
    .instrument-panel {
        padding: 1rem;
    }

    .panel-header {
        margin-bottom: 0.75rem;
    }

    .panel-title {
        font-size: 0.85rem;
    }

    /* Quick links on portal home */
    .quick-links-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    .quick-link-card {
        padding: 1rem;
    }

    .quick-link-card .card-title {
        font-size: 0.9rem;
    }

    .quick-link-card .module-id {
        font-size: 0.65rem;
    }
}

/* Tablet landscape mode optimization */
@media (min-width: 1024px) and (max-width: 1366px) and (max-height: 900px) {
    /* Landscape tablets - more horizontal space, less vertical */

    /* Reduce vertical padding */
    .main-display-panel {
        padding: 1.5rem 2rem;
    }

    .instrument-panel {
        padding: 1rem 1.25rem;
    }

    /* Compact header */
    .control-header {
        padding: 0.5rem 1.5rem;
    }

    /* Footer more compact */
    .control-footer {
        padding: 0.5rem 1.5rem;
    }
}

/* ============================================================================
   FILE BROWSER TABLET OPTIMIZATIONS
   ============================================================================ */

@media (min-width: 768px) and (max-width: 1200px) {
    /* Browser header - wrap controls better */
    .browser-header {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .browser-path-display {
        flex: 1 1 100%;
        order: 1;
    }

    .browser-search {
        flex: 1 1 auto;
        order: 2;
    }

    .browser-actions {
        order: 3;
    }

    /* File items - optimize for touch while showing more info */
    .file-item {
        padding: 0.875rem 1rem;
    }

    .file-name {
        font-size: 0.9rem;
    }

    .file-meta {
        font-size: 0.75rem;
    }

    /* Action buttons - larger touch targets but compact */
    .file-actions button {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }

    /* Split pane - better proportions for tablets */
    .pane-left,
    .pane-right {
        min-width: 300px;
    }

    /* Breadcrumb improvements */
    .breadcrumb-item {
        padding: 0.4rem 0.6rem;
        font-size: 0.85rem;
    }

    /* Bulk actions bar */
    .bulk-actions-bar {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .bulk-buttons {
        gap: 0.5rem;
    }

    .bulk-buttons .control-btn {
        padding: 0.5rem 0.875rem;
        font-size: 0.8rem;
    }
}

/* ============================================================================
   DASHBOARD TABLET OPTIMIZATIONS
   ============================================================================ */

@media (min-width: 768px) and (max-width: 1200px) {
    /* Metrics grid - 2 columns on tablets */
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .metric-card {
        padding: 1rem;
    }

    .metric-value {
        font-size: 1.75rem;
    }

    .metric-title {
        font-size: 0.75rem;
    }

    /* Tab navigation */
    .tab-selector {
        flex-wrap: wrap;
        justify-content: center;
    }

    .tab-btn {
        padding: 0.6rem 1rem;
        font-size: 0.8rem;
    }

    /* Logs section */
    .log-entry {
        padding: 0.75rem;
    }

    .log-timestamp,
    .log-ip {
        font-size: 0.8rem;
    }
}

/* ============================================================================
   DOCKER MANAGER TABLET OPTIMIZATIONS
   ============================================================================ */

@media (min-width: 768px) and (max-width: 1200px) {
    /* Container grid - 2 columns */
    .container-grid,
    .docker-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .docker-container {
        padding: 1rem;
    }

    .container-name {
        font-size: 0.9rem;
    }

    .container-actions {
        gap: 0.5rem;
    }

    .container-actions button {
        padding: 0.4rem 0.75rem;
        font-size: 0.75rem;
    }
}

/* ============================================================================
   TOOLS PAGE TABLET OPTIMIZATIONS
   ============================================================================ */

@media (min-width: 768px) and (max-width: 1200px) {
    /* Converter buttons - 3-4 per row */
    .converter-selector {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0.5rem;
    }

    .converter-btn {
        min-width: unset;
    }

    /* Tool panels */
    .tool-panel {
        padding: 1.25rem;
    }

    /* Network tools form */
    .tool-form {
        flex-wrap: wrap;
    }

    .tool-input {
        flex: 1 1 200px;
    }

    .tool-btn {
        flex: 0 0 auto;
    }

    /* Snippets grid */
    .snippets-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

/* ============================================================================
   NOTES PAGE TABLET OPTIMIZATIONS
   ============================================================================ */

@media (min-width: 768px) and (max-width: 1200px) {
    /* Notes layout - side by side with narrower sidebar */
    .notes-layout {
        display: flex;
        gap: 1rem;
    }

    .notes-sidebar {
        width: 220px;
        min-width: 220px;
    }

    .notes-editor {
        flex: 1;
    }
}

/* ============================================================================
   PORTAL QUICK LINKS TABLET GRID
   ============================================================================ */

@media (min-width: 768px) and (max-width: 1200px) {
    /* Home page quick links - 3 columns for tablets */
    .quick-links-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    .quick-link-card {
        padding: 1.25rem 1rem;
    }

    .card-icon {
        font-size: 1.75rem;
        margin-bottom: 0.5rem;
    }

    .card-title {
        font-size: 0.85rem;
    }

    .module-id {
        font-size: 0.65rem;
    }

    /* Status overview - wrap better */
    .status-overview {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }

    .status-item {
        flex: 0 0 auto;
        min-width: 120px;
    }
}

/* ============================================================================
   FOLDABLE ASPECT RATIO HANDLING
   ============================================================================ */

/* Square-ish aspect ratios (typical of unfolded foldables) */
@media (min-aspect-ratio: 3/4) and (max-aspect-ratio: 4/3) and (min-width: 768px) {
    /* Optimize for nearly-square screens */

    /* Grids benefit from more columns */
    .systems-grid,
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Quick links - 3 columns works well */
    .quick-links-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Metrics - 2x2 grid */
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Very tall screens (foldable in portrait) */
@media (max-aspect-ratio: 1/1.5) and (min-width: 768px) and (min-height: 1200px) {
    /* Tall portrait on large screen - use the vertical space */

    .main-display-panel {
        margin-bottom: 2rem;
    }

    .systems-section,
    .projects-section {
        padding: 2rem 0;
    }

    /* Stack grids for easier scrolling */
    .systems-grid,
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

/* ============================================================================
   GALAXY Z FOLD 7 SPECIFIC OPTIMIZATIONS
   Inner display: ~1856 × 2160 pixels (portrait), ~2160 × 1856 (landscape)
   ============================================================================ */

/* Galaxy Z Fold inner display - landscape mode */
@media (min-width: 1800px) and (max-width: 2200px) and (min-height: 1800px) {
    /* Scale up UI elements for large high-DPI foldable */

    /* Container width */
    .container {
        max-width: 1600px;
        padding: 0 3rem;
    }

    /* Main panels */
    .main-display-panel {
        padding: 3rem;
    }

    .instrument-panel {
        padding: 1.75rem;
    }

    /* Grids - 3 columns for wide space */
    .systems-grid,
    .projects-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }

    /* Quick links - 4 columns */
    .quick-links-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }

    /* Metrics - 4 columns */
    .metrics-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Typography scale up */
    .section-title {
        font-size: 2rem;
    }

    .panel-title {
        font-size: 1rem;
    }

    .panel-status {
        font-size: 0.85rem;
    }

    /* File browser - more comfortable spacing */
    .file-item {
        padding: 1rem 1.25rem;
    }

    .file-name {
        font-size: 1rem;
    }

    .file-actions button {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }
}

/* Galaxy Z Fold inner display - portrait mode (square-ish) */
@media (min-width: 1800px) and (max-width: 2200px) and (min-height: 2100px) {
    /* Very tall portrait - optimize vertical scrolling */

    .container {
        max-width: 1400px;
    }

    /* Reduce columns for better readability in portrait */
    .systems-grid,
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    /* Quick links - 3 columns */
    .quick-links-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Metrics - 2 columns */
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* More vertical padding */
    section {
        padding: 2rem 0;
    }

    .main-display-panel {
        margin-bottom: 2rem;
    }
}

/* ============================================================================
   HOMEPAGE GRID LAYOUTS - Base definitions
   ============================================================================ */

/* Systems Section - Instrument Panels Grid */
.instruments-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

/* Projects Section - Project Modules Grid */
.project-panels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

/* Instrument Panel Base Styles */
.instrument-panel {
    background: var(--color-bg-card, #2A2833);
    border: 2px solid var(--dracula-purple, #9580FF);
    border-radius: 8px;
    padding: 1.5rem;
    transition: all 0.3s ease;
    position: relative;
}

.instrument-panel:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(149, 128, 255, 0.25);
    border-color: var(--dracula-pink, #FF80BF);
}

.instrument-panel .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.instrument-panel .panel-id {
    font-family: var(--font-mono, monospace);
    font-size: 0.75rem;
    color: var(--dracula-comment, #7970A9);
    letter-spacing: 0.1em;
}

.instrument-panel .panel-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dracula-comment, #7970A9);
}

.instrument-panel .panel-indicator.active {
    background: var(--dracula-green, #8AFF80);
    box-shadow: 0 0 8px var(--dracula-green, #8AFF80);
    animation: pulse 2s ease-in-out infinite;
}

.instrument-panel .panel-icon {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 1rem;
}

.instrument-panel .panel-name {
    font-family: var(--font-mono, monospace);
    font-size: 0.9rem;
    color: var(--dracula-foreground, #F8F8F2);
    text-align: center;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

.instrument-panel .panel-readout {
    margin-bottom: 1rem;
}

.instrument-panel .readout-line {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--dracula-purple, #9580FF), transparent);
    margin: 0.5rem 0;
}

.instrument-panel .panel-description {
    font-size: 0.85rem;
    color: var(--dracula-comment, #7970A9);
    text-align: center;
    line-height: 1.5;
}

.instrument-panel .panel-metrics {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.instrument-panel .metric {
    font-family: var(--font-mono, monospace);
    font-size: 0.65rem;
    color: var(--dracula-cyan, #80FFEA);
    background: rgba(128, 255, 234, 0.1);
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    letter-spacing: 0.05em;
}

/* Project Module Base Styles */
.project-module {
    background: var(--color-bg-card, #2A2833);
    border: 2px solid var(--dracula-purple, #9580FF);
    border-radius: 8px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.project-module:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(149, 128, 255, 0.25);
    border-color: var(--dracula-cyan, #80FFEA);
}

.project-module .module-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.project-module .module-id {
    font-family: var(--font-mono, monospace);
    font-size: 0.75rem;
    color: var(--dracula-comment, #7970A9);
    letter-spacing: 0.1em;
}

.project-module .status-bar {
    width: 60px;
    height: 4px;
    border-radius: 2px;
    background: var(--dracula-comment, #7970A9);
}

.project-module .status-bar.active {
    background: linear-gradient(90deg, var(--dracula-green, #8AFF80), var(--dracula-cyan, #80FFEA));
}

.project-module .module-title {
    font-family: var(--font-mono, monospace);
    font-size: 0.95rem;
    color: var(--dracula-foreground, #F8F8F2);
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

.project-module .module-description {
    font-size: 0.85rem;
    color: var(--dracula-comment, #7970A9);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.project-module .module-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.project-module .tech-tag {
    font-family: var(--font-mono, monospace);
    font-size: 0.65rem;
    color: var(--dracula-pink, #FF80BF);
    background: rgba(255, 128, 191, 0.1);
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    letter-spacing: 0.05em;
}

/* ============================================================================
   HOMEPAGE TABLET & FOLDABLE RESPONSIVE
   ============================================================================ */

/* Tablet landscape & smaller desktops */
@media (max-width: 1200px) {
    .instruments-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }

    .project-panels {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
}

/* Tablet portrait */
@media (max-width: 900px) {
    .instruments-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .project-panels {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .instrument-panel,
    .project-module {
        padding: 1.25rem;
    }

    .instrument-panel .panel-icon {
        font-size: 2rem;
    }

    .instrument-panel .panel-name,
    .project-module .module-title {
        font-size: 0.85rem;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .instruments-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .project-panels {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .instrument-panel,
    .project-module {
        padding: 1rem;
    }
}

/* Galaxy Z Fold inner display specific */
@media (min-width: 1800px) and (max-width: 2200px) {
    .instruments-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
    }

    .project-panels {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }

    .instrument-panel,
    .project-module {
        padding: 2rem;
    }

    .instrument-panel .panel-icon {
        font-size: 3rem;
    }

    .instrument-panel .panel-name {
        font-size: 1rem;
    }

    .project-module .module-title {
        font-size: 1.1rem;
    }
}