body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
background: linear-gradient(135deg, var(--darker) 0%, var(--dark) 100%) !important;
color: var(--light) !important;
overflow: hidden !important;
height: 100vh !important;
position: relative !important;
}

/* app */
/* Layout */
.app-container {
display: flex;
flex-direction: column;
height: 100vh;
width: 100vw;
background: rgba(5, 8, 17, 0.8);
overflow: hidden;
}

/* Header */
.app-header {
height: var(--header-height);
background: var(--darker);
display: flex;
align-items: center;
padding: 0 25px;
z-index: 1000;
position: relative;
}

.app-header::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 2px;
background: var(--glass-border);
opacity: 0.7;
}
.code-studio{
font-family: var(--vexax-fonts);
}

.brand {
display: flex;
align-items: center;
gap: 12px;
font-weight: 700;
font-size: 1.5rem;
background: linear-gradient(90deg, var(--primary), var(--secondary));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 0 20px rgba(0, 255, 204, 0.3);
}

.brand i {
font-size: 1.8rem;
color: var(--primary);
filter: drop-shadow(0 0 8px rgba(0, 255, 204, 0.5));
}

.header-actions {
margin-left: auto;
display: flex;
gap: 10px;
}

/* User Profile */
.user-profile {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
padding: 5px 10px;
border-radius: 6px;
transition: all 0.3s;
font-family: var(--fira);
}

.user-profile:hover {
background: rgba(0, 255, 204, 0.1);
}

.user-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary), var(--secondary));
display: flex;
align-items: center;
justify-content: center;
color: var(--light);
font-weight: bold;
font-family: var(--fira);
}

/* Dropdown Menus */
.dropdown-menu {
background: var(--darker);
border: 1px solid var(--glass-border);
box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

.dropdown-item {
color: var(--light);
padding: 8px 15px;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.3s;
margin: 2px 5px;
width: auto;
font-family: var(--fira) !important;
}
.dropdown-item:hover {
background: rgba(0, 255, 204, 0.2);
color: var(--primary);
}
.dropdown-divider {
border-color: var(--glass-border);
margin: 5px 0;
}
/* Main Content */
.main-content {
display: flex;
flex: 1;
overflow: hidden;
height: calc(100vh - var(--header-height) - var(--status-height));
}

/* Sidebar */
.app-sidebar {
width: var(--sidebar-width);
background: var(--darker);
border: 1px solid var(--glass-border);
border-radius: 0 !important;
display: flex;
flex-direction: column;
overflow: auto;
position: relative;
}

.app-sidebar::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 0 !important;
pointer-events: none;
opacity: 0.3;
}

.sidebar-section {
padding: 12px;
padding-top: 20px;
padding-bottom: 20px;
border-bottom: 1px solid var(--glass-border);
position: relative;
}

.sidebar-section:last-child {
border-bottom: none;
}

.sidebar-section h3 {
font-size: 1.1rem;
margin-bottom: 15px;
color: var(--light);
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
font-family: var(--vexax-fonts);
}

/* File Explorer */
.file-explorer {
flex: 1;
overflow-y: auto;
padding-right: 5px;
}

.file-list {
list-style: none;
}

.file-item {
padding: 12px 12px;
cursor: pointer;
display: flex;
align-items: center;
gap: 5px;
transition: all 0.3s ease;
margin-bottom: 5px;
position: relative;
background: var(--darker);
border: 1px solid transparent;
font-family: var(--fira);
}

.file-item:hover {
background: var(--dark);
border-color: var(--glass-border);
transform: translateX(-25px);
}

.file-item.active {
background: var(--dark);
color: var(--light);
border-color: var(--glass-border);
}

.file-icon {
width: 20px;
text-align: center;
}

.file-actions {
margin-left: auto;
opacity: 0;
transition: opacity 0.3s;
display: flex;
gap: 4px;
}

.file-item:hover .file-actions {
opacity: 1;
}
.vexax-file-btn{
border: none;
}

.vexax-grey{color: var(--light) !important;font-family: var(--fira);}

/* Image Manager */
.image-upload-area {
border: 2px dashed var(--primary);
padding: 15px;
text-align: center;
margin-top: 15px;
transition: all 0.3s ease;
cursor: pointer;
background: var(--dark);
}

.image-upload-area:hover {
background: var(--darker);
border-color: var(--secondary);
transform: translateY(-3px);
}

.image-upload-area i {
font-size: 2.5rem;
margin-bottom: 12px;
color: var(--primary);
}

.uploaded-images-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-top: 15px;
max-height: 200px;
overflow-y: auto;
}

.uploaded-image {
position: relative;
overflow: hidden;
background: var(--dark);
border: 1px solid var(--glass-border);
transition: all 0.3s ease;
}

.uploaded-image:hover {
transform: scale(1.05);
border-color: var(--primary);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.uploaded-image img {
width: 100%;
height: 80px;
object-fit: cover;
display: block;
}

.image-actions {
position: absolute;
top: 5px;
right: 5px;
opacity: 0;
transition: opacity 0.3s;
display: flex;
gap: 4px;
}

.uploaded-image:hover .image-actions {
opacity: 1;
}

/* Editor Area */
.editor-area {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--darker);
border: 1px solid var(--glass-border);
}

.editor-area::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
opacity: 0.3;
}

/* Tabs */
.editor-tabs {
display: flex;
background: var(--dark);
border-bottom: 1px solid var(--glass-border);
height: 60px;
overflow-x: auto;
padding: 4px 10px;
}

.editor-tab {
padding-left: 20px;
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
white-space: nowrap;
transition: all 0.3s ease;
min-width: 180px;
position: relative;
background: transparent;
margin-top: 5px;
border: 1px solid transparent;
border-bottom: none;
font-family: var(--fira);
}

.editor-tab:hover {
background: rgba(255, 255, 255, 0.05);
border-color: var(--glass-border);
}

.editor-tab.active {
background: var(--darker);
color: var(--light);
border-color: var(--glass-border);
}

.editor-tab.unsaved::after {
content: '●';
color: var(--accent);
margin-left: 8px;
font-size: 12px;
filter: drop-shadow(0 0 5px var(--accent-glow));
}

.tab-close {
margin-left: auto;
opacity: 0.7;
transition: opacity 0.3s;
padding: 10px;
}

.tab-close:hover {
opacity: 1;
background: rgba(255, 107, 157, 0.2);
}

/* Editor */
.editor-container {
flex: 1;
display: flex;
overflow: hidden;
flex-direction: column;
}

/* Fix the editor and preview layout */
.editor-preview-container {
display: flex;
flex: 1;
overflow: hidden;
height: 100%;
}

.code-editor {
flex: 1;
display: flex;
flex-direction: column;
border-right: 1px solid var(--glass-border);
overflow: auto;
min-height: 0; /* Important for flexbox */
}

.editor-header {
padding: 15px 20px;
background: var(--dark);
border-bottom: 1px solid var(--glass-border);
display: flex;
justify-content: space-between;
align-items: center;
}

.editor-actions {
display: flex;
gap: 8px;
}

.editor-body {
flex: 1;
overflow: hidden;
position: relative;
background: var(--code-bg);
min-height: 0;
}

/* CodeMirror Customization */
.CodeMirror {
height: 100% !important;
font-family: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', monospace;
font-size: 14px;
line-height: 1.5;
background: var(--code-bg) !important;
}

.CodeMirror-scroll {
overflow-x: auto !important;
overflow-y: auto !important;
}

/* Minimap */
.minimap-container {
position: absolute;
right: 10px;
top: 10px;
width: 150px;
height: 200px;
background: var(--dark);
border: 1px solid var(--glass-border);
z-index: 10;
overflow: hidden;
opacity: 0.8;
transition: opacity 0.3s;
}

.minimap-container:hover {
opacity: 1;
}

.minimap-container .CodeMirror {
height: 100% !important;
font-size: 2px;
line-height: 1;
}

.minimap-toggle {
position: absolute;
top: 0;
left:0;
z-index: 11;
}

/* Custom Scrollbars for CodeMirror */
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar {
width: 12px;
height: 12px;
}

.CodeMirror-vscrollbar::-webkit-scrollbar, 
.CodeMirror-hscrollbar::-webkit-scrollbar {
width: 12px;
height: 12px;
}

.CodeMirror-vscrollbar::-webkit-scrollbar-track, 
.CodeMirror-hscrollbar::-webkit-scrollbar-track {
background: var(--dark);
}

.CodeMirror-vscrollbar::-webkit-scrollbar-thumb, 
.CodeMirror-hscrollbar::-webkit-scrollbar-thumb{
background: linear-gradient(135deg, var(--primary), var(--secondary));
border: 2px solid var(--dark);
}

.CodeMirror-vscrollbar::-webkit-scrollbar-thumb:hover, 
.CodeMirror-hscrollbar::-webkit-scrollbar-thumb:hover{
background: linear-gradient(135deg, #00e6ba, #ff5b9d);
}

/* Preview */
.preview-panel {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
color: #000;
min-height: 0; /* Important for flexbox */
}

.preview-header {
padding: 15px 20px;
background: var(--dark);
border-bottom: 1px solid var(--glass-border);
display: flex;
justify-content: space-between;
align-items: center;
color: var(--light);
}

.preview-actions {
display: flex;
gap: 8px;
}

.preview-body {
flex: 1;
overflow: auto;
background: var(--light);
color: #000;
min-height: 0;
}

/* Isolated Preview Frame */
.preview-frame {
width: 100%;
height: 100%;
border: none;
background: var(--light);
}

/* Terminal */
.terminal-panel {
height: 300px;
display: flex;
flex-direction: column;
overflow: hidden;
border-top: 1px solid var(--glass-border);
background: var(--dark);
flex-shrink: 0; /* Prevent terminal from shrinking */
}

.terminal-header {
padding: 12px 20px;
background: var(--dark);
border-bottom: 1px solid var(--glass-border);
display: flex;
justify-content: space-between;
align-items: center;
}

.terminal-body {
flex: 1;
background: #0a0a0a;
color: var(--primary);
font-family: 'Cascadia Code', 'JetBrains Mono', 'Courier New', monospace;
padding: 15px;
overflow-y: auto;
font-size: 14px;
line-height: 1.4;
border: 1px solid var(--glass-border);
}

.terminal-line {
margin-bottom: 4px;
word-break: break-all;
}

.terminal-input-line {
display: flex;
align-items: center;
}

.terminal-prompt {
color: var(--primary);
margin-right: 8px;
user-select: none;
filter: drop-shadow(0 0 3px var(--primary-glow));
}

.terminal-input {
background: transparent;
border: none;
color: var(--primary);
font-family: inherit;
flex: 1;
outline: none;
font-size: 14px;
}

/* Status Bar */
.status-bar {
height: var(--status-height);
background: var(--darker);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 25px;
font-size: 12px;
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}

.status-left, .status-right {
display: flex;
align-items: center;
gap: 15px;
}

.status-item {
display: flex;
align-items: center;
gap: 5px;
padding: 5px 10px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--glass-border);
font-family: var(--fira);
}

/* Buttons */
.vexax-btn {
display: inline-flex;
align-items: center;
gap: 8px;
height: 40px;
border: 1px solid var(--glass-border);
background: var(--darker);
color: var(--light);
cursor: pointer;
transition: all 0.3s ease;
font-size: 14px;
font-weight: 600;
text-decoration: none;
position: relative;
overflow: hidden;
font-family: var(--fira);
}

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

.vexax-btn:hover {
background: rgba(0, 255, 204, 0.1);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 255, 204, 0.3);
}

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

.btn-primary {
background: linear-gradient(135deg, var(--primary), #00ccaa);
border-color: var(--primary);
color: var(--darker);
}

.btn-primary:hover {
background: linear-gradient(135deg, #00e6ba, #00bb99);
box-shadow: 0 5px 15px rgba(0, 255, 204, 0.5);
}

.btn-success {
background: linear-gradient(135deg, #10b981, #0d9668);
border-color: #10b981;
color: var(--light);
}

.btn-danger {
background: linear-gradient(135deg, #ef4444, #dc2626);
border-color: #ef4444;
color: var(--light);
}

.btn-warning {
background: linear-gradient(135deg, #f59e0b, #d97706);
border-color: #f59e0b;
color: var(--light);
}

.btn-info {
background: linear-gradient(135deg, #06b6d4, #0891b2);
border-color: #06b6d4;
color: var(--light);
}

.btn-sm {
padding: 6px 12px;
font-size: 13px;
}

.btn-xs {
padding: 4px 8px;
font-size: 12px;
}


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

.fade-in {
animation: fadeIn 0.3s ease-out;
}

/* Responsive */
@media (max-width: 768px) {
.app-sidebar {
width: 250px;
}

.editor-tab {
min-width: 150px;
}

.uploaded-images-grid {
grid-template-columns: 1fr;
}
}


/* Loading States */
.loading {
opacity: 0.7;
pointer-events: none;
}

/* Error States */
.error {
border-color: var(--danger) !important;
}

/* Success States */
.success {
border-color: var(--success) !important;
}

/* Settings Modal */
.settings-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(5, 8, 17, 0.95);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}

.settings-modal.active {
opacity: 1;
pointer-events: all;
}

.settings-content {
background: var(--darker);
border: 1px solid var(--glass-border);
width: 90%;
max-width: 600px;
max-height: 80vh;
overflow-y: auto;
padding: 25px;
position: relative;
}

.settings-content::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 1px solid var(--glass-border);
pointer-events: none;
opacity: 0.3;
}

.settings-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid var(--glass-border);
}

.settings-title {
font-size: 1.5rem;
background: linear-gradient(90deg, var(--primary), var(--secondary));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-family: var(--vexax-fonts);
}

.settings-close {
background: none;
border: none;
color: var(--light);
font-size: 1.5rem;
cursor: pointer;
transition: all 0.3s;
}

.settings-close:hover {
color: var(--primary);
transform: rotate(90deg);
}

.settings-group {
margin-bottom: 20px;
font-family: var(--fira);
}

.settings-label {
display: block;
margin-bottom: 8px;
font-weight: 500;
font-family: var(--fira);
}

.settings-select {
width: 100%;
padding: 10px;
background: var(--dark);
border: 2px solid var(--glass-border);
color: var(--light);
transition: all 0.3s;
-webkit-appearance: none;
appearance: none;
font-family: var(--fira);
}

.settings-select:focus {
border-color: var(--primary);
box-shadow: 0 0 0 2px var(--primary-glow);
}

.settings-checkbox {
margin-right: 8px;
}

.settings-row {
display: flex;
gap: 15px;
margin-bottom: 15px;
}

.settings-col {
flex: 1;
}

/* Fullscreen */
.CodeMirror-fullscreen, .editor-fullscreen .editor-body {
position: fixed !important;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: auto;
z-index: 9999;
background: var(--darker);
border: 1px solid var(--glass-border);
}

.editor-fullscreen .editor-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 10000;
background: var(--dark);
border-bottom: 1px solid var(--glass-border);
}

.preview-fullscreen {
position: fixed !important;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: auto;
z-index: 9999;
background: var(--light);
border: 1px solid var(--glass-border);
}

.preview-fullscreen .preview-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 10000;
background: var(--dark);
border-bottom: 1px solid var(--glass-border);
}

/* Find and Replace Modal */
.find-replace-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(5, 8, 17, 0.95);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}

.find-replace-modal.active {
opacity: 1;
pointer-events: all;
}

.find-replace-content {
background: var(--darker);
border: 1px solid var(--glass-border);
width: 90%;
max-width: 500px;
padding: 25px;
position: relative;
}

.find-replace-content::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 1px solid var(--glass-border);
pointer-events: none;
opacity: 0.3;
}

.find-replace-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid var(--glass-border);
}

.find-replace-title {
font-size: 1.3rem;
background: linear-gradient(90deg, var(--primary), var(--secondary));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-family: var(--vexax-fonts);
}

.find-replace-close {
background: none;
border: none;
color: var(--light);
font-size: 1.5rem;
cursor: pointer;
transition: all 0.3s;
}

.find-replace-close:hover {
color: var(--primary);
transform: rotate(90deg);
}

.find-replace-group {
margin-bottom: 15px;
}

.find-replace-input {
width: 100%;
padding: 10px;
background: var(--dark);
border: 2px solid var(--glass-border);
color: var(--light);
margin-bottom: 10px;
transition: all 0.3s;
}

.find-replace-input:focus {
border-color: var(--primary);
box-shadow: 0 0 0 2px var(--primary-glow);
}

.find-replace-options {
display: flex;
gap: 15px;
margin-bottom: 15px;
font-family: var(--fira);
}

.find-replace-option {
display: flex;
align-items: center;
gap: 5px;
}

.find-replace-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
margin-top: 10px;
}

/* User Guide Scroll */
.user-guide {
max-height: 200px;
overflow-y: auto;
padding-right: 5px;
}

/* Terminal Toggle Button */
.terminal-toggle {
position: fixed;
bottom: 40px;
right: 20px;
z-index: 1000;
background: var(--dark);
color: var(--light);
border: none;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s;
font-size: 1.2rem;
border: 1px solid var(--glass-border);
}

.terminal-toggle:hover {
transform: scale(1.1);
}

/* Advanced Features Panel */
.features-panel {
position: fixed;
top: 80px;
right: 20px;
background: var(--darker);
border: 1px solid var(--glass-border);
padding: 15px;
width: 300px;
z-index: 1000;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
display: none;
}

.features-panel.active {
display: block;
animation: fadeIn 0.3s ease-out;
}

.feature-item {
padding: 10px 12px;
margin: 5px 0;
background: rgba(0, 255, 204, 0.1);
cursor: pointer;
transition: all 0.3s;
border: 1px solid transparent;
font-family: var(--fira);
}

.feature-item:hover {
background: rgba(0, 255, 204, 0.2);
border-color: rgba(0, 255, 204, 0.3);
transform: translateX(5px);
}

/* Match Highlight */
.cm-matchhighlight {
background: rgba(0, 255, 204, 0.3);
}

/* CodeMirror Custom Styles */
.CodeMirror-foldgutter-open, .CodeMirror-foldgutter-folded {
color: var(--primary);
}

.CodeMirror-matchingbracket {
color: var(--primary) !important;
background: rgba(0, 255, 204, 0.2);
text-shadow: 0 0 5px var(--primary-glow);
}

.CodeMirror-nonmatchingbracket {
color: var(--secondary) !important;
}

/* Image info styling */
.image-info {
padding: 8px;
font-size: 0.75rem;
display: flex;
flex-direction: column;
gap: 4px;
}

.copy-image-url {
padding: 2px 6px;
font-size: 0.7rem;
background: var(--primary);
border: none;
color: var(--light);
cursor: pointer;
transition: background 0.2s;
}

.copy-image-url:hover {
background: var(--secondary);
}

/* Find/Replace Real-time Preview */
.find-replace-preview {
background: var(--dark);
border: 1px solid var(--glass-border);
padding: 10px;
margin-top: 10px;
max-height: 150px;
overflow-y: auto;
font-size: 12px;
font-family: 'Fira Code', monospace;
}

.find-replace-preview .match {
background: rgba(0, 255, 204, 0.3);
padding: 2px;
}

.find-replace-preview .replacement {
background: rgba(255, 170, 0, 0.3);
padding: 2px;
}

/* New Tabs */
.additional-tabs {
display: flex;
background: var(--dark);
border-bottom: 1px solid var(--glass-border);
height: 40px;
font-family: var(--fira);
}

.additional-tab {
padding: 10px 20px;
cursor: pointer;
border-right: 1px solid var(--glass-border);
transition: all 0.3s;
}

.additional-tab.active {
background: var(--darker);
color: var(--primary);
}

.additional-tab:hover {
background: rgba(0, 255, 204, 0.1);
}

.tab-content {
display: none;
padding: 20px;
height: 100%;
flex: 1;
overflow: auto;
flex-direction: column;
}

.tab-content.active {
display: flex;
}

/* Chart container */
.chart-container {
height: 300px;
margin-bottom: 20px;
}

/* Time tracker */
.time-tracker {
text-align: center;
padding: 20px;
padding-top: 10px;
}

.time-display {
font-size: 6rem;
margin: 20px 0;
font-family: var(--vexax-fonts);
}

/* Responsive test */
.responsive-test {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
margin-top: 50px;
}

.responsive-test-h3{
text-align: center;
font-family: var(--vexax-fonts);
}

.code-analytics-h3{
font-family: var(--vexax-fonts);
}

.device-frame {
width: 200px;
height: 460px;
border: 2px solid var(--glass-border);
border-radius: 20px;
overflow: hidden;
position: relative;
}

.device-frame::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 1px solid var(--primary);
border-radius: 18px;
pointer-events: none;
}

.device-screen {
width: 100%;
height: 100%;
background: var(--light);
overflow: hidden;
}

.device-label {
text-align: center;
margin-top: 10px;
font-family: var(--fira);
}

/* Dependency manager */
.dependency-list {
max-height: 300px;
overflow-y: auto;
}

.dependency-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
border-bottom: 1px solid var(--glass-border);
}

/* Rename file modal */
.rename-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(5, 8, 17, 0.95);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}

.rename-modal.active {
opacity: 1;
pointer-events: all;
}

.rename-content {
background: var(--darker);
border: 1px solid var(--glass-border);
width: 90%;
max-width: 400px;
padding: 25px;
position: relative;
}

.rename-content::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 1px solid var(--glass-border);
pointer-events: none;
opacity: 0.3;
}

.rename-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid var(--glass-border);
}

.rename-title {
font-size: 1.3rem;
background: linear-gradient(90deg, var(--primary), var(--secondary));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-family: var(--vexax-fonts);
}

.rename-close {
background: none;
border: none;
color: var(--light);
font-size: 1.5rem;
cursor: pointer;
transition: all 0.3s;
}

.rename-close:hover {
color: var(--primary);
transform: rotate(90deg);
}

.rename-group {
margin-bottom: 15px;
}

.rename-input {
width: 100%;
padding: 10px;
background: var(--dark);
border: 2px solid var(--glass-border);
color: var(--light);
margin-bottom: 10px;
transition: all 0.3s;
}

.rename-input:focus {
border-color: var(--primary);
box-shadow: 0 0 0 2px var(--primary-glow);
}

.rename-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
}


/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}

::-webkit-scrollbar-track {
background: var(--dark);
border: 1px solid var(--glass-border);
}

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

::-webkit-scrollbar-thumb:hover {
background: linear-gradient(135deg, #00e6ba, #ff5b9d);
}

.vexax-tools{
font-family: var(--vexax-fonts);
margin-bottom: 20px;
}
.vexax-tools-btn{
padding-left: 3%;
}

.vexax-time-btn{
padding-left: 5%;
padding-right: 5%;
}

.timer-setting-h3{
text-align: center;
font-family: var(--vexax-fonts);
margin-top: 30px;
}

.code-tools-h4{font-family: var(--fira);}

.advanced-h4{
font-family: var(--vexax-fonts);
}

.a-link{text-decoration: none;}