:root { --bg-dark: #1e1e1e; --bg-medium: #252526; --bg-light: #3c3c3c; --text-primary: #d4d4d4; --text-muted: #858585; --accent-blue: #0e639c; --accent-blue-hover: #1177bb; --accent-green: #4ec9b0; --accent-orange: #ce9178; --accent-red: #f48771; --border-color: #858585; --gap: 10px; --radius: 4px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: var(--bg-dark); color: var(--text-primary); overflow: hidden; } button, .btn, .file-label { background: var(--accent-blue); color: white; border: none; padding: 10px 20px; border-radius: var(--radius); cursor: pointer; font-size: 14px; display: inline-block; text-align: center; } button:hover, .btn:hover, .file-label:hover { background: var(--accent-blue-hover); } button:disabled, .btn:disabled { background: var(--bg-light); cursor: not-allowed; } input[type="file"] { display: none; } input, select { background: var(--bg-light); border: 1px solid var(--border-color); border-radius: var(--radius); color: var(--text-primary); padding: 8px; font-size: 14px; } .container { width: 100%; height: 100vh; display: flex; flex-direction: column; } .header { background: var(--bg-medium); padding: 15px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } h1 { color: var(--accent-green); font-size: 18px; white-space: nowrap; } .controls { display: flex; gap: var(--gap); flex-wrap: wrap; align-items: center; } .panel { background: var(--bg-medium); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 15px; } .error-message { background: #5a1d1d; color: var(--accent-red); padding: 10px; border-radius: var(--radius); box-shadow: 0 2px 8px rgba(0,0,0,0.3); margin: 10px 0; } .success-message { background: #1e5231; color: #89d185; padding: 10px; border-radius: var(--radius); box-shadow: 0 2px 8px rgba(0,0,0,0.3); margin: 10px 0; }