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

:root {
    --bg-primary: #0d1117;
    --bg-secondary: #161b22;
    --bg-tertiary: #21262d;
    --border-color: #30363d;
    --text-primary: #e6edf3;
    --text-secondary: #7d8590;
    --text-muted: #656d76;
    --accent-blue: #58a6ff;
    --accent-green: #3fb950;
    --accent-orange: #ff9500;
    --accent-red: #f85149;
    --accent-purple: #a5a5ff;
    --line-number-color: #6e7681;
    --selection-bg: #264f78;
    --cursor-color: #58a6ff;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    height: 100vh;
    overflow: hidden;
}

.container {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.editor-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    border-radius: 12px;
    margin: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
}

.panel-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    font-size: 16px;
}

.title-icon {
    font-size: 20px;
    color: var(--accent-blue);
}

.panel-controls {
    display: flex;
    gap: 12px;
}

.control-btn {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.control-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-blue);
}

.control-btn.primary {
    background: var(--accent-blue);
    color: white;
    border-color: var(--accent-blue);
}

.control-btn.primary:hover {
    background: #4493e6;
}

.play-icon {
    font-size: 12px;
}

.editor-wrapper {
    flex: 1;
    display: flex;
    position: relative;
    overflow: hidden;
}

.line-numbers {
    background: var(--bg-tertiary);
    color: var(--line-number-color);
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    line-height: 1.5;
    padding: 20px 16px;
    min-width: 60px;
    text-align: right;
    user-select: none;
    border-right: 1px solid var(--border-color);
}

#code-input {
    flex: 1;
    background: transparent;
    color: var(--text-primary);
    border: none;
    outline: none;
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    line-height: 1.5;
    padding: 20px;
    resize: none;
    white-space: pre;
    overflow-wrap: normal;
    overflow-x: auto;
}

#code-input::placeholder {
    color: var(--text-muted);
}

.status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border-color);
    font-size: 13px;
}

.status-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-label {
    color: var(--text-secondary);
}

.status-value {
    color: var(--text-primary);
    font-weight: 500;
}

#language-select {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 4px 8px;
    border-radius: 4px;
    font-family: inherit;
    font-size: 12px;
}

.fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--bg-primary);
    z-index: 1000;
    display: none;
    flex-direction: column;
}

.fullscreen-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.file-tabs {
    display: flex;
    gap: 8px;
}

.file-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bg-tertiary);
    border-radius: 6px 6px 0 0;
    font-size: 14px;
    border: 1px solid var(--border-color);
    border-bottom: none;
}

.file-tab.active {
    background: var(--bg-primary);
    color: var(--text-primary);
}

.file-icon {
    font-size: 16px;
}

.fullscreen-controls {
    display: flex;
    gap: 12px;
}

.fullscreen-btn {
    background: transparent;
    color: var(--text-secondary);
    border: none;
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s ease;
}

.fullscreen-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.fullscreen-editor {
    flex: 1;
    display: flex;
    position: relative;
    overflow: auto;
    background: var(--bg-primary);
}

.fullscreen-line-numbers {
    background: var(--bg-secondary);
    color: var(--line-number-color);
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px;
    line-height: 1.6;
    padding: 24px 20px;
    min-width: 80px;
    text-align: right;
    user-select: none;
    border-right: 1px solid var(--border-color);
}

.fullscreen-code {
    flex: 1;
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px;
    line-height: 1.6;
    padding: 24px;
    white-space: pre; /* Ensure lines don't wrap and Prism outputs correctly */
    overflow-wrap: normal;
    position: relative;
    color: var(--text-primary); /* Ensure base color applies to highlighted code */
}

/* Base style for individual code lines within the fullscreen-code container */
.fullscreen-code .code-line {
    display: block; /* Ensure each line is its own block */
    white-space: pre; /* Maintain pre-formatted text within each line */
    word-break: normal;
    word-wrap: normal;
    line-height: inherit; /* Inherit line height from parent */
    color: var(--text-primary); /* Set base text color for highlighted content */
}

/* Specific Prism.js token classes will override the base .code-line color */
/* The existing --accent-* variables are already defined and used in script.js for basic highlighting.
   Prism.js will provide more detailed and accurate token highlighting which will replace this.
   If Prism's default colors conflict, these can be overridden here.
*/
/*
.token.comment { color: var(--text-muted); font-style: italic; }
.token.keyword { color: var(--accent-purple); }
.token.string { color: var(--accent-green); }
.token.number { color: var(--accent-orange); }
.token.function { color: var(--accent-blue); }
.token.operator { color: var(--text-secondary); }
.token.punctuation { color: var(--text-secondary); }
*/

.cursor {
    position: absolute;
    width: 2px;
    height: 1.6em; /* Will be dynamically set by JS */
    background: var(--cursor-color);
    animation: blink 1s infinite;
    z-index: 10;
}

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

.progress-bar {
    height: 4px;
    background: var(--bg-secondary);
    position: relative;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-green));
    width: 0%;
    transition: width 0.3s ease;
}

/* Settings Overlay Styles */
.settings-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1001; /* Higher than fullscreen-overlay */
    display: none; /* Hidden by default */
    justify-content: center;
    align-items: center;
}

.settings-modal {
    background: var(--bg-secondary);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    width: 90%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.settings-header h3 {
    font-size: 18px;
    font-weight: 600;
}

.settings-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.setting-item label {
    font-size: 15px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.setting-item input[type="range"] {
    flex-grow: 1;
    height: 4px;
    background: var(--bg-tertiary);
    border-radius: 2px;
    outline: none;
    -webkit-appearance: none;
    margin: 0 10px; /* Space between slider and label/value */
}

.setting-item input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: var(--accent-blue);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s ease;
}

.setting-item input[type="range"]::-webkit-slider-thumb:hover {
    background: #4493e6;
}

.slider-value {
    min-width: 40px; /* Ensure space for values like '100%' */
    text-align: right;
    color: var(--text-primary);
    font-weight: 500;
}

.settings-footer {
    padding: 16px 24px;
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .container {
        margin: 0;
    }
    
    .editor-panel {
        margin: 0;
        border-radius: 0;
        height: 100vh;
    }
    
    .panel-header {
        padding: 12px 16px;
        flex-wrap: wrap;
        gap: 12px;
    }
    
    .panel-controls {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .control-btn {
        padding: 10px 16px;
        font-size: 14px;
    }
    
    .line-numbers {
        min-width: 50px;
        padding: 16px 12px;
        font-size: 12px;
    }
    
    #code-input {
        font-size: 14px;
        padding: 16px;
    }
    
    .status-bar {
        padding: 8px 16px;
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }
    
    .status-item {
        justify-content: space-between;
    }
    
    .fullscreen-header {
        padding: 8px 16px;
    }
    
    .file-tab {
        padding: 6px 12px;
        font-size: 12px;
    }
    
    .fullscreen-line-numbers {
        min-width: 60px;
        padding: 16px 12px;
        font-size: 14px;
    }
    
    .fullscreen-code {
        font-size: 14px;
        padding: 16px;
    }

    .settings-modal {
        width: 95%;
        margin: 10px;
    }

    .settings-header, .settings-content, .settings-footer {
        padding: 12px 16px;
    }

    .setting-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .setting-item label {
        width: 100%; /* Full width for label */
    }

    .setting-item input[type="range"] {
        margin: 0; /* Remove horizontal margins for better flow */
        width: 100%;
    }

    .slider-value {
        align-self: flex-end; /* Position value to the right */
    }
}

@media (max-width: 480px) {
    .panel-title {
        font-size: 14px;
    }
    
    .control-btn {
        padding: 8px 12px;
        font-size: 12px;
    }
    
    .line-numbers {
        min-width: 40px;
        font-size: 11px;
    }
    
    #code-input {
        font-size: 12px;
    }
    
    .fullscreen-code {
        font-size: 12px;
    }
}