:root {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', Menlo, Monaco, Consolas, monospace;

    --bg-main: #0f1117;
    --bg-sidebar: #0a0c10;
    --bg-surface: #161a24;
    --bg-surface-hover: #1f2433;
    --border-subtle: #202636;
    --border-focus: #2e374d;
    
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    
    --accent: #27ebff;
    --accent-glow: rgba(39, 235, 255, 0.12);
    --danger: #ff5370;
}

* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Глобальный класс скрытия элементов */
.hidden { display: none !important; }

body { background: var(--bg-main); color: var(--text-secondary); height: 100vh; overflow: hidden; }
.app-layout { display: flex; height: 100vh; }

select {
    background-color: var(--bg-main) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-subtle) !important;
    padding: 9px 32px 9px 12px !important;
    border-radius: 4px !important;
    font-size: 12.5px !important;
    font-family: var(--font-sans) !important;
    outline: none !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2327ebff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 14px !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2px var(--accent-glow) !important;
}

select option {
    background-color: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    padding: 8px !important;
}

.modal { position: fixed; inset: 0; background: rgba(10, 12, 16, 0.85); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal-content { background: var(--bg-surface); padding: 22px; border-radius: 6px; width: 360px; display: flex; flex-direction: column; gap: 14px; border: 1px solid var(--border-focus); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6); }
.modal-content h2 { font-size: 12px; letter-spacing: 1px; color: var(--text-primary); text-transform: uppercase; }
.modal-msg { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.modal-content input { background: var(--bg-main); border: 1px solid var(--border-subtle); padding: 9px 12px; color: #fff; border-radius: 4px; font-size: 13px; outline: none; transition: 0.15s; }
.modal-content input:focus { border-color: var(--accent); }

.modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.modal-actions button, .modal-content button { padding: 9px; background: var(--accent); color: #000; border: none; cursor: pointer; font-weight: 700; font-size: 12px; border-radius: 3px; transition: 0.15s; letter-spacing: 0.5px; }
.modal-actions button.secondary, .modal-content button.secondary { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-subtle); }
.modal-actions button.secondary:hover { color: var(--text-primary); border-color: var(--border-focus); }
.modal-actions button.danger-btn { background: var(--danger); color: #fff; }

.btn-primary { margin: 16px; padding: 10px 18px; background: var(--accent); color: #000; border: none; cursor: pointer; font-weight: 700; border-radius: 3px; font-size: 12px; }