:root{--bg-app:#0f1115;--bg-panel:#161b22;--bg-header:rgba(22,27,34,0.8);--bg-input:rgba(255,255,255,0.02);--border-subtle:#30363d;--border-active:#58a6ff;--text-primary:#c9d1d9;--text-secondary:#8b949e;--text-placeholder:#484f58;--accent-color:#58a6ff;--accent-hover:#79c0ff;--accent-fg:#ffffff;--hl-camel:rgba(121,192,255,0.15);--hl-kwd-camel:#79c0ff;--hl-pascal:rgba(210,168,255,0.15);--hl-kwd-pascal:#d2a8ff;--hl-snake:rgba(126,231,135,0.15);--hl-kwd-snake:#7ee787;--hl-caps:rgba(255,123,114,0.15);--hl-kwd-caps:#ff7b72;--hl-changed:rgba(235,172,0,0.15);--hl-kebab:rgba(255,235,59,0.15);--hl-kwd-kebab:#ffeb3b;--text-hl-changed:#e6edf3;--font-ui:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;--font-mono:'JetBrains Mono','Fira Code',Consolas,monospace;--radius-md:8px;--radius-lg:12px;}[data-theme="light"]{--bg-app:#f3f4f6;--bg-panel:#ffffff;--bg-header:rgba(255,255,255,0.85);--bg-input:#f9fafb;--border-subtle:#e5e7eb;--border-active:#2563eb;--text-primary:#111827;--text-secondary:#6b7280;--text-placeholder:#9ca3af;--accent-color:#2563eb;--accent-hover:#1d4ed8;--accent-fg:#ffffff;--hl-camel:rgba(37,99,235,0.1);--hl-kwd-camel:#2563eb;--hl-pascal:rgba(147,51,234,0.1);--hl-kwd-pascal:#9333ea;--hl-snake:rgba(5,150,105,0.1);--hl-kwd-snake:#059669;--hl-caps:rgba(220,38,38,0.1);--hl-kwd-caps:#dc2626;--hl-changed:rgba(217,119,6,0.15);--hl-kebab:rgba(234,179,8,0.1);--hl-kwd-kebab:#eab308;--text-hl-changed:#7c2d12;}*{box-sizing:border-box;margin:0;padding:0;}body{background-color:var(--bg-app);color:var(--text-primary);font-family:var(--font-ui);height:100vh;overflow:hidden;display:flex;flex-direction:column;}.app-background{position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 15% 50%,rgba(88,166,255,0.05),transparent 25%),radial-gradient(circle at 85% 30%,rgba(210,168,255,0.05),transparent 25%);z-index:-1;pointer-events:none;}.app-container{display:flex;flex-direction:column;height:100%;max-width:1600px;margin:0 auto;width:100%;padding:1rem;gap:1rem;}.app-header{display:flex;align-items:center;justify-content:space-between;padding:0.5rem 1rem;background:var(--bg-panel);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:0 4px 6px rgba(0,0,0,0.1);}.logo{display:flex;align-items:center;gap:0.75rem;color:var(--accent-color);}.logo h1{font-size:1.25rem;font-weight:700;letter-spacing:-0.5px;color:var(--text-primary);}.logo .secondary{font-size:0.8rem;font-weight:500;color:var(--text-secondary);margin-top:4px;}.controls{display:flex;gap:1.5rem;align-items:center;}.control-group{display:flex;align-items:center;gap:0.5rem;}.select-wrapper{display:flex;align-items:center;gap:0.5rem;}.select-wrapper label{font-size:0.85rem;color:var(--text-secondary);}select{appearance:none;background:var(--bg-input);border:1px solid var(--border-subtle);color:var(--text-primary);padding:0.4rem 2rem 0.4rem 0.8rem;border-radius:var(--radius-md);font-family:var(--font-ui);font-size:0.9rem;cursor:pointer;background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%238b949e%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:right 0.7rem top 50%;background-size:0.65rem auto;transition:border-color 0.2s;}select:hover,select:focus{border-color:var(--text-secondary);outline:none;}.mode-toggle{background:var(--bg-input);padding:3px;border-radius:var(--radius-md);border:1px solid var(--border-subtle);}.mode-toggle label{cursor:pointer;position:relative;}.mode-toggle input{display:none;}.mode-toggle span{display:inline-block;padding:0.3rem 0.8rem;border-radius:5px;font-size:0.85rem;color:var(--text-secondary);transition:all 0.2s;}.mode-toggle input:checked+span{background:var(--border-subtle);color:var(--text-primary);font-weight:500;}.editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;flex:1;min-height:0;}.pane{background:var(--bg-panel);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);display:flex;flex-direction:column;overflow:hidden;position:relative;}.pane-header{padding:0.75rem 1rem;border-bottom:1px solid var(--border-subtle);display:flex;justify-content:space-between;align-items:center;background:var(--bg-header);backdrop-filter:blur(8px);}.pane-header h2{font-size:0.9em;text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary);font-weight:600;}.pane-footer{padding:0.5rem 1rem;border-top:1px solid var(--border-subtle);font-size:0.75rem;color:var(--text-secondary);background:var(--bg-panel);text-align:right;font-family:var(--font-mono);}.primary-btn{background:var(--accent-color);color:white;border:none;padding:0.4rem 1rem;border-radius:6px;font-size:0.85rem;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:0.5rem;transition:background 0.2s;}.primary-btn:hover{background:var(--accent-hover);}.secondary-btn{background:transparent;border:1px solid var(--border-subtle);color:var(--text-secondary);padding:0.4rem 0.8rem;border-radius:6px;font-size:0.85rem;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:0.5rem;transition:all 0.2s;}.secondary-btn:hover{color:var(--text-primary);background:var(--bg-input);border-color:var(--text-secondary);}.icon-btn{background:transparent;border:none;color:var(--text-secondary);cursor:pointer;padding:4px;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:0.2s;}.icon-btn:hover{color:var(--text-primary);background:var(--border-subtle);}.editor-container{flex:1;position:relative;overflow:hidden;background:var(--bg-input);}.backdrop,textarea{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;padding:16px;border:0;font-family:var(--font-mono);font-size:14px;line-height:24px;letter-spacing:0px;resize:none;white-space:pre;box-sizing:border-box;text-align:left;direction:ltr;tab-size:4;font-smoothing:antialiased;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;appearance:none;-webkit-appearance:none;-moz-appearance:none;}textarea{z-index:2;color:transparent;background:transparent;caret-color:var(--text-primary);outline:none;overflow:auto;}.backdrop{z-index:1;pointer-events:none;color:var(--text-primary);overflow:hidden;}::-webkit-scrollbar{width:10px;height:10px;}::-webkit-scrollbar-track{background:transparent;}::-webkit-scrollbar-thumb{background:var(--border-subtle);border-radius:5px;border:2px solid var(--bg-panel);}mark{border-radius:3px;padding:0;margin:0;color:inherit;background:transparent;border-bottom:2px solid transparent;}.hl-camel{background-color:var(--hl-camel);border-bottom-color:var(--hl-kwd-camel);}.hl-pascal{background-color:var(--hl-pascal);border-bottom-color:var(--hl-kwd-pascal);}.hl-snake{background-color:var(--hl-snake);border-bottom-color:var(--hl-kwd-snake);}.hl-screaming{background-color:var(--hl-caps);border-bottom-color:var(--hl-kwd-caps);}.hl-upper{background-color:var(--hl-caps);border-bottom:2px dashed var(--hl-kwd-caps);}.hl-kebab{background-color:var(--hl-kebab);border-bottom-color:var(--hl-kwd-kebab);}.hl-lower{}.hl-lower{background-color:rgba(255,255,255,0.05);}.hl-change{background-color:var(--hl-changed);color:var(--text-hl-changed);animation:flash 0.5s ease-out;}@keyframes flash{from{background-color:rgba(235,172,0,0.5);}to{background-color:var(--hl-changed);}}.toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%);background:var(--accent-color);color:white;padding:0.75rem 1.5rem;border-radius:50px;box-shadow:0 4px 12px rgba(0,0,0,0.3);font-size:0.9rem;font-weight:500;opacity:1;transition:opacity 0.3s,transform 0.3s;z-index:100;}.toast.hidden{opacity:0;transform:translate(-50%,10px);pointer-events:none;}.app-footer{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;padding:1.5rem;background:var(--bg-panel);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:0 4px 6px rgba(0,0,0,0.1);gap:2rem;}.app-footer div{flex:1;}.app-footer h1{font-size:1rem;font-weight:700;letter-spacing:-0.5px;color:var(--text-primary);margin-bottom:0.5rem;}.app-footer p{font-size:0.8rem;color:var(--text-secondary);}.app-footer h2{font-size:0.875rem;font-weight:600;letter-spacing:-0.25px;color:var(--text-primary);margin:0 0 0.5rem 0;}.app-footer ul{font-size:0.8rem;color:var(--text-secondary);font-family:var(--font-mono);}.app-footer ul.supported-formats-list{display:flex;flex-wrap:wrap;gap:0.5rem 1rem;list-style:none;}.app-footer ul.supported-formats-list li{background:var(--bg-input);padding:0.25rem 0.5rem;border-radius:var(--radius-md);font-weight:500;}@media (max-width:768px){.editor-grid{grid-template-columns:1fr;grid-template-rows:1fr 1fr;}.app-footer{flex-direction:column;gap:1.5rem;}}