:root{--primary-color: #2563eb;--primary-hover: #1d4ed8;--bg-color: #f3f4f6;--text-color: #111827;--border-color: #e5e7eb;--card-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--input-radius: .5rem;--card-radius: .75rem}body{font-family:Inter,system-ui,-apple-system,sans-serif;background-color:var(--bg-color);color:var(--text-color);font-size:12px;-webkit-font-smoothing:antialiased}.btn-primary{background-color:var(--primary-color);border-color:var(--primary-color);font-weight:500;border-radius:var(--input-radius);transition:all .2s ease}.btn-primary:hover,.btn-primary:focus,.btn-primary:active{background-color:var(--primary-hover)!important;border-color:var(--primary-hover)!important;box-shadow:0 2px 4px #2563eb33}.btn-outline-secondary{border-color:var(--border-color);color:#4b5563;background:#fff}.btn-outline-secondary:hover{background-color:#f9fafb;color:#111827;border-color:#d1d5db}.card{border:none;border-radius:var(--card-radius);box-shadow:var(--card-shadow);background-color:#fff}.form-control,.form-select{border-color:var(--border-color);border-radius:var(--input-radius);font-size:12px;padding:.5rem .75rem}.form-control:focus,.form-select:focus{border-color:var(--primary-color);box-shadow:0 0 0 2px #2563eb1a}.form-label{color:#374151;font-weight:600!important;margin-bottom:.35rem}.text-primary{color:var(--primary-color)!important}.custom-scrollbar::-webkit-scrollbar{width:6px;height:6px}.custom-scrollbar::-webkit-scrollbar-track{background:transparent}.custom-scrollbar::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}.custom-scrollbar::-webkit-scrollbar-thumb:hover{background:#9ca3af}@media(min-width:992px){.playground-container{height:calc(100vh - 56px);overflow:hidden}.panel-height{height:100%}}.preview-container{flex:1;position:relative;min-height:300px;background-color:#374151;border-radius:0 0 var(--card-radius) var(--card-radius)}.code-editor-wrapper{position:relative;border:1px solid var(--border-color);border-radius:var(--input-radius);background-color:#fff;overflow:hidden;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.code-editor-wrapper:focus-within{border-color:var(--primary-color);box-shadow:0 0 0 2px #2563eb1a}.line-numbers{position:absolute;top:0;left:0;width:35px;height:100%;background-color:#f9fafb;border-right:1px solid var(--border-color);color:#9ca3af;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace!important;font-size:11px!important;line-height:1.5!important;text-align:right;padding:10px 8px 10px 0;box-sizing:border-box;overflow:hidden;z-index:3;-webkit-user-select:none;user-select:none;white-space:pre!important}.code-editor-textarea,.code-editor-pre{margin:0!important;padding:10px 10px 10px 45px!important;border:0!important;width:100%!important;height:100%!important;box-sizing:border-box!important;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace!important;font-size:11px!important;line-height:1.5!important;tab-size:2!important;white-space:pre!important;word-break:keep-all!important}.code-editor-textarea{position:absolute;top:0;left:0;z-index:2;color:transparent!important;background:transparent!important;caret-color:#000;resize:none;outline:none;overflow:auto!important}.code-editor-pre{position:absolute;top:0;left:0;z-index:1;pointer-events:none;color:#374151;background:transparent!important;overflow:hidden!important}pre[class*=language-]{margin:0!important;padding:0!important;background:transparent!important;text-shadow:none!important;box-shadow:none!important;border:none!important}code[class*=language-]{font-family:inherit!important}