.playground-main{padding:0;margin-left:0;margin-top:var(--header-height);min-height:calc(100vh - var(--header-height));display:flex;flex-direction:column}.playground-toolbar{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background-color:var(--bg-secondary);border-bottom:1px solid var(--border-color);flex-shrink:0}.toolbar-left h2{font-size:1.5rem;font-weight:600;color:var(--text-primary);margin-bottom:4px}.toolbar-left p{color:var(--text-secondary);font-size:.9rem;margin-bottom:8px}.security-notice{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--accent-primary);opacity:.8}.security-notice svg{flex-shrink:0}.toolbar-right{display:flex;gap:12px}.toolbar-right .btn{padding:8px 16px;font-size:.9rem}.code-playground{flex:1;display:flex;flex-direction:column;background-color:var(--bg-primary)}.playground-header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background-color:var(--bg-secondary);border-bottom:1px solid var(--border-color)}.playground-tabs{display:flex;gap:4px}.tab-btn{padding:8px 16px;background:0 0;border:1px solid var(--border-color);border-radius:6px 6px 0 0;color:var(--text-secondary);cursor:pointer;transition:var(--transition);font-size:.9rem;font-weight:500;display:flex;align-items:center;gap:6px}.tab-btn .tab-icon{width:16px;height:16px;flex-shrink:0;opacity:.8;transition:opacity .2s ease}.tab-btn:hover{background-color:var(--bg-tertiary)}.tab-btn:hover .tab-icon{opacity:1}.tab-btn.active{background-color:var(--bg-primary);color:var(--accent-primary);border-bottom-color:var(--bg-primary)}.tab-btn.active .tab-icon{opacity:1}.playground-actions{display:flex;gap:8px}.playground-actions .btn{padding:6px 12px;font-size:.875rem}.playground-content{flex:1;display:flex;min-height:800px;height:800px}.editor-container{flex:1;position:relative;border-right:1px solid var(--border-color)}.editor-panel{display:none;height:100%}.editor-panel.active{display:block}.editor-panel textarea{width:100%;height:100%;border:none;outline:0;resize:none;padding:20px;font-family:'JetBrains Mono',var(--font-mono);font-size:14px;line-height:1.5;background-color:var(--bg-primary);color:var(--text-primary);tab-size:2}.editor-panel textarea::placeholder{color:var(--text-tertiary);opacity:.7}.editor-panel textarea:focus{box-shadow:inset 0 0 0 2px var(--accent-primary)}.preview-container{flex:2;display:flex;flex-direction:column;background-color:var(--bg-secondary)}.preview-header{padding:12px 16px;background-color:var(--bg-tertiary);border-bottom:1px solid var(--border-color);font-size:.875rem;font-weight:500;color:var(--text-secondary);display:flex;justify-content:space-between;align-items:center}.security-indicator{color:var(--accent-primary);opacity:.7;cursor:help;transition:opacity .2s ease;display:flex;align-items:center}.security-indicator:hover{opacity:1}#preview-frame{flex:1;border:none;background-color:#fff;width:100%;height:100%}.playground-examples{padding:24px;background-color:var(--bg-secondary);border-top:1px solid var(--border-color)}.playground-examples h3{font-size:1.125rem;font-weight:600;color:var(--text-primary);margin-bottom:16px}.example-buttons{display:flex;flex-wrap:wrap;gap:8px}.example-btn{padding:8px 16px;background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);cursor:pointer;transition:var(--transition);font-size:.875rem;font-weight:500}.example-btn:hover{background-color:var(--accent-primary);color:#fff;border-color:var(--accent-primary)}.playground-fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;background-color:var(--bg-primary)}.playground-fullscreen .playground-toolbar{position:relative;z-index:1001}@media (max-width:768px){.playground-toolbar{flex-direction:column;gap:16px;align-items:stretch}.toolbar-left{text-align:center}.toolbar-right{justify-content:center;flex-wrap:wrap}.playground-content{flex-direction:column}.editor-container{border-right:none;border-bottom:1px solid var(--border-color);min-height:300px}.preview-container{min-height:300px}.playground-tabs{flex-wrap:wrap}.playground-actions{flex-wrap:wrap;justify-content:center}.example-buttons{justify-content:center}}@media (max-width:480px){.playground-toolbar{padding:12px 16px}.toolbar-left h2{font-size:1.25rem}.toolbar-left p{font-size:.8rem}.toolbar-right{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;width:100%}.toolbar-right button{padding:10px 8px;font-size:.8rem;min-height:44px}#fullscreen-toggle{display:none}.playground-header{padding:12px 16px;flex-direction:column;gap:12px;align-items:stretch}.tab-btn{flex:1;text-align:center;justify-content:center;font-size:.8rem;min-height:44px;padding:10px 12px}.tab-btn .tab-icon{width:14px;height:14px}.playground-actions{display:grid;grid-template-columns:auto 1fr;gap:8px}.playground-actions button{min-height:44px}.playground-actions .btn-secondary{padding:10px 14px;min-width:50px;font-size:.85rem}.playground-actions .btn-primary{padding:10px 16px;font-size:.9rem;font-weight:600}.editor-panel{height:400px}.editor-panel textarea{padding:12px;font-size:13px;line-height:1.5;height:100%;min-height:400px}.playground-examples{padding:16px}.example-btn{min-height:44px;padding:10px 16px;font-size:.85rem}.editor-container{min-height:400px;height:400px}.preview-container{min-height:400px;height:400px}.playground-content{flex:none;height:auto}}[data-theme=dark] #preview-frame{background-color:#1e293b}.editor-panel textarea{font-family:'JetBrains Mono',var(--font-mono)}.example-btn:focus,.tab-btn:focus{outline:2px solid var(--accent-primary);outline-offset:2px}.editor-panel,.playground-content,.preview-container{transition:var(--transition)}.preview-container.loading::before{content:"Loading...";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--text-tertiary);font-size:.9rem;z-index:10}