#cg-playground-page[data-theme=light],:root{--cg-bg:#f5f7fb;--cg-panel:#f8fafc;--cg-toolbar:#ffffff;--cg-border:/*#e2e8f0*/ #C8D4E2;--cg-text:#0f172a;--cg-button:#e2e8f0;--cg-btn-border:#D3DBE8;--cg-button-hover:/*#cbd5e1*/ #4d4d4d;--cg-iframe-container:#ffffff;--cg-surface:#ffffff;--bg-devtool:#ffffff}#cg-playground-page[data-theme=dark],#cg-playground-page[data-theme=light],:root{--cg-active-text:white;--cg-iframe:#ffffff}#cg-editor-container,#cg-native-preview-container,#cg-native-preview-wrapper,.cg-playground-page .CodeMirror{height:100%}#cg-native-preview,#cg-native-split,.cg-playground-page .CodeMirror{min-height:var(--cg-workspace-height)}#cg-project-status,.cg-project-title{white-space:nowrap;text-overflow:ellipsis}#cg-color-modal button,#cg-project-modal button{appearance:none;background:var(--cg-button);transition:.2s;cursor:pointer}#cg-native-console,.cg-computed-item span{font-family:monospace}@media (prefers-color-scheme:dark){:root{--cg-bg:#020617;--cg-panel:#0f172a;--cg-toolbar:#111827;--cg-border:#1e293b;--cg-text:#f8fafc;--cg-button:#1e293b;--cg-btn-border:#4d4d4d;--cg-button-hover:#334155;--cg-active-text:white;--bg-devtool:#0a0e14}}#cg-playground-page[data-theme=light]{--cg-bg-form:#f0f0f0;--cg-text2:#0f172a}#cg-playground-page[data-theme=dark]{--cg-bg:#020617;--cg-bg-form:#34373f;--cg-panel:#0f172a;--cg-toolbar:#111827;--cg-border:#555;--cg-text:#f8fafc;--cg-text2:#B8CADD;--cg-button:#1e293b;--cg-btn-border:#4d4d4d;--cg-button-hover:#334155;--cg-iframe-container:#282a36;--cg-surface:#111827;--bg-devtool:#0a0e14}.cg-playground-page{background:background: var(--cg-bg);padding:10px;min-height:100vh}.cg-playground-shell{background:var(--cg-panel);border-radius:10px;overflow:hidden;border:1px solid var(--cg-border)}.cg-native-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;padding:10px 12px;background:var(--cg-bg);border-bottom:1px solid var(--cg-border)}#cg-device,#cg-editor-height,#cg-editor-theme,#cg-fontfamily,#cg-fontsize,.cg-native-tabs button,.cg-native-toolbar button{background:var(--cg-button);color:var(--cg-text);padding:5px 12px;border-radius:6px;cursor:pointer;font-size:13px;border:none;margin-top:4px}#cg-native-console,.cg-native-tabs{background:background: var(--cg-bg)}#cg-devtool-tab,.cg-color-header,.cg-native-tabs{border-bottom:1px solid var(--cg-border)}.cg-native-tabs button:hover,.cg-native-toolbar button:hover{background:var(--cg-button-hover)}.cg-native-tabs{display:flex;gap:8px;padding:10px}#cg-color-float-btn,#cg-devtool-panel,#cg-inspector-panel,#cg-native-preview-wrapper,.cg-color-card{background:var(--cg-surface)}.cg-tab-btn.active{background:#3b82f6;color:var(--cg-active-text)}#cg-run-btn{background:#16a34a;color:var(--cg-active-text)}#cg-native-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:100%;height:calc(100vh - 220px);overflow:hidden}#cg-editor-container,#cg-native-preview-container{min-width:0}#cg-editor-container{background:var(--cg-panel);border-right:1px solid var(--cg-border)}.cg-tab-content{display:none;height:100%}#cg-gradient-panel.active,#cg-native-console.hidden,.cg-devtool-content.active,.cg-normal-mode #cg-editor-container,.cg-normal-mode #cg-native-split,.cg-normal-mode.cg-show-preview #cg-native-preview-container,.cg-project-menu.show,.cg-tab-content.active{display:block}.cg-tablet #cg-native-preview-wrapper{width:768px}.cg-mobile #cg-native-preview-wrapper{width:375px}#cg-native-console{color:#22c55e;padding:0;font-size:13px;height:auto;overflow:auto}.cg-split-mode #cg-native-split{display:grid;grid-template-columns:1fr 1fr}@media (max-width:992px){#cg-native-split,.cg-split-mode #cg-native-split{grid-template-columns:1fr}#cg-native-preview,.cg-playground-page .CodeMirror{height:var(--cg-workspace-height)}}.cg-normal-mode #cg-native-preview-container,.cg-normal-mode.cg-show-preview #cg-editor-container,.cg-split-mode .cg-tab-btn[data-tab=preview]{display:none}.page-template-page-html-playground #primary,.page-template-page-html-playground .content-area,.page-template-page-html-playground .inside-article,.page-template-page-html-playground .site-content,.page-template-page-html-playground .site.grid-container{width:100%!important;max-width:100%!important;padding:0!important;margin:0!important}.page-template-page-html-playground .site-main{margin:0!important}.page-template-page-html-playground h2{font-size:28px;font-weight:600;opacity:.8;color:#3c466c}.page-template-page-html-playground h3{font-size:22px;font-weight:600;opacity:.8}.page-template-page-html-playground p{font-size:18px;font-weight:400;opacity:.8}.cg-split-mode #cg-editor-container,.cg-split-mode #cg-native-preview-container{display:block!important}.cg-wrap-enabled .CodeMirror-wrap pre{word-break:break-word}#cg-fontsize{min-width:90px}#cg-native-preview-container{background:var(--cg-iframe-container);display:flex;justify-content:center;align-items:center;overflow:auto;padding:10px}#cg-native-preview-wrapper{width:100%;height:100%;border-radius:14px;border:1px solid var(--cg-border);box-shadow:0 4px 18px rgba(0,0,0,.08);overflow:hidden;transition:.25s;margin:auto}#cg-native-preview-wrapper::before{content:"";display:block;height:38px;background:radial-gradient(circle at 16px 19px,#ff5f57 0 5px,transparent 6px),radial-gradient(circle at 36px 19px,#febc2e 0 5px,transparent 6px),radial-gradient(circle at 56px 19px,#28c840 0 5px,transparent 6px);background-color:#f3f4f6;border-bottom:1px solid #e5e7eb}#cg-native-preview{height:100%;display:block;width:100%;height:calc(100% - 38px);border:none;background:var(--cg-iframe)}#cg-native-status-bar,.cg-color-actions{display:flex;border-top:1px solid var(--cg-border)}#cg-native-status-bar{color:var(--cg-text2);align-items:center;gap:10px;padding:8px 14px;font-size:14px;background:var(--cg-bg)}.cg-native-status-device{display:flex;align-items:center;gap:6px;font-weight:600}.cg-status-separator{opacity:.45}.cg-status-size{opacity:.8}#cg-playground-page{--cg-workspace-height:600px}#cg-color-modal .cg-modal-body{flex:1;overflow-y:auto;overflow-x:hidden;max-height:calc(100vh - 140px);padding-right:6px}#cg-color-modal .cg-modal-body::-webkit-scrollbar{width:8px}#cg-color-modal .cg-modal-body::-webkit-scrollbar-thumb{background:rgba(120,120,120,.35);border-radius:20px}@media (max-width:768px){.cg-native-tabs,.cg-native-toolbar{overflow-x:auto;flex-wrap:nowrap}.cg-native-tabs button,.cg-native-toolbar button{white-space:nowrap}#cg-color-modal{width:calc(100vw - 20px);height:calc(100vh - 20px);margin:10px}#cg-color-modal .cg-modal-body{max-height:calc(100vh - 180px)}}#cg-color-modal{flex-direction:column;position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;justify-content:center;align-items:center;z-index:9999}#cg-color-float-btn.active,#cg-color-modal.active,#cg-project-modal.show{display:flex}.cg-color-card{width:340px;border-radius:16px;border:1px solid var(--cg-border);box-shadow:0 10px 30px rgba(0,0,0,.2);overflow:hidden}.cg-color-header{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;font-weight:600}#cg-pickr{padding:20px}.cg-color-actions{justify-content:flex-end;gap:10px;padding:16px 18px}#cg-color-float-btn,#cg-project-modal{display:none;align-items:center;position:fixed;z-index:99999}.cg-color-section{padding:0 20px 18px}.cg-color-title{font-size:13px;font-weight:600;margin-bottom:10px;opacity:.75}.cg-gradient-group,.cg-gradient-tabs{margin-bottom:16px}.cg-color-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:10px}.cg-color-item{width:28px;height:28px;border-radius:8px;cursor:pointer;border:1px solid rgba(0,0,0,.08);transition:.15s}.cg-color-item:hover{transform:scale(1.08);box-shadow:0 4px 10px rgba(0,0,0,.15)}.cg-inline-color{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:middle;border:1px solid rgba(0,0,0,.15);cursor:pointer}#cg-devtool-panel,#cg-inspector-panel,.cg-project-footer{border-top:1px solid var(--cg-border)}#cg-color-float-btn{width:34px;height:34px;border:none;border-radius:10px;color:var(--cg-text);box-shadow:0 4px 14px rgba(0,0,0,.15);justify-content:center;cursor:pointer;pointer-events:auto;transition:transform .2s,background .2s,color .2s}#cg-color-float-btn:active{transform:scale(.96)}#cg-color-float-btn:hover{transform:scale(1.08);box-shadow:0 6px 18px rgba(0,0,0,.22)}#cg-gradient-panel{display:none;margin-top:18px}.cg-gradient-tabs{display:flex;gap:10px}.cg-gradient-tabs button{flex:1}.cg-gradient-colors{display:flex;gap:12px;margin-bottom:18px}.cg-playground-app,.cg-project-form,.cg-project-header{margin-bottom:20px}.cg-gradient-colors input{flex:1;height:50px;border:none;border-radius:12px;cursor:pointer}#cg-gradient-preview{height:90px;border-radius:16px;margin-bottom:14px}#cg-gradient-code{width:100%;min-height:90px;border-radius:14px;padding:14px;resize:none;margin-bottom:14px}#cg-color-modal button{border:none;outline:0;min-height:42px;padding:10px 16px;border-radius:14px;color:var(--cg-text);font-size:14px;font-weight:600}#cg-color-modal button:hover{transform:translateY(-1px);background:#cdbdbd;color:#222}#cg-color-modal button:active{transform:scale(.98)}#cg-color-modal button.active{background:#4d4d4d;color:#fff}#cg-color-modal select{border-radius:14px;border:1px solid rgba(255,255,255,.08);background:#ddd;color:var(--cg-text);font-size:14px;font-weight:500}.cg-gradient-colors input[type=color]{appearance:none;border:none;background:0 0;padding:0;overflow:hidden;border-radius:16px;height:32px;cursor:pointer}.cg-gradient-colors input[type=color]::-webkit-color-swatch{border:none;border-radius:16px}#cg-project-modal .cg-project-card,.cg-project-item{border:1px solid var(--cg-border);background:var(--cg-bg)}.cg-gradient-colors input[type=color]::-webkit-color-swatch-wrapper{padding:0}#cg-project-modal{inset:0;background:var(--cg-bg);backdrop-filter:blur(4px);justify-content:center;padding:20px}#cg-project-modal .cg-project-card{width:100%;max-width:1100px;max-height:90vh;overflow:auto;border-radius:16px;padding:20px;box-shadow:0 20px 50px rgba(0,0,0,.2)}.cg-project-header{display:flex;align-items:center;justify-content:space-between}.cg-project-header h3{margin:0;font-size:18px;color:var(--cg-text2)}.cg-project-header button{width:36px;height:36px;border:none;border-radius:8px;cursor:pointer}.cg-project-form input,.cg-project-form select,.cg-project-form textarea{margin-bottom:6px;width:100%;padding:10px 12px;border-radius:10px!important;border:1px solid var(--cg-border)!important;background:var(--cg-bg)!important;color:var(--cg-text)!important}#cg-project-description{grid-column:1/-1;min-height:90px;resize:vertical;font-size:14}.cg-project-descriptions{font-size:13px!important;color:var(--cg-text2)}#cg-save-project{grid-column:1/-1}#cg-project-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:20px}.cg-project-item{display:flex;flex-direction:column;position:relative;border-radius:16px;padding:16px;transition:.25s}.cg-project-item:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.08)}.cg-project-menu{position:absolute;right:16px;bottom:60px;min-width:180px;background:var(--cg-bg);border:1px solid var(--cg-border);border-radius:12px;box-shadow:0 10px 24px rgba(0,0,0,.15);display:none;z-index:10}.cg-project-menu button{width:100%;text-align:left;padding:10px 14px cursor:pointer}.cg-project-menu button:hover{background:var(--cg-btn-hover)}.cg-project-title{font-size:20px;font-weight:700;margin-bottom:6px;color:var(--cg-text);overflow:hidden}.cg-project-category{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;background:rgba(59,130,246,.12);color:#3b82f6}.cg-project-actions{display:flex;gap:8px;margin-top:auto}.cg-project-actions button{flex:1;height:38px;border:none;border-radius:10px;cursor:pointer}.cg-delete-project,.cg-duplicate-project,.cg-edit-project,.cg-export-project-json,.cg-export-project-zip,.cg-load-project,.cg-more-project{background:0 0!important;font-size:13px!important;color:#fff}.cg-project-toolbar{display:flex;gap:12px;margin-top:16px}.cg-project-toolbar button{flex:1;height:44px}.cg-project-footer{display:flex;gap:10px;margin-top:24px;padding-top:20px}#cg-project-status{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;font-size:13px;background:rgba(16,185,129,.12);color:#10b981;overflow:hidden}#cg-project-modal button{-webkit-appearance:none;border:none;color:var(--cg-text);border-radius:20px;padding:8px 12px;font-size:14px;font-weight:600;box-shadow:none;margin-top:6px}#cg-project-modal button:hover{transform:translateY(-1px);opacity:.92}#cg-project-close{width:38px;height:38px;padding:0;display:flex;align-items:center;justify-content:center;background:0 0!important;color:var(--cg-text)}#cg-export-projects,#cg-import-projects,#cg-new-project,#cg-save-project,.cg-devtool-tab-btn.active{background:var(--cg-button)}#cg-inspector-panel{height:200px;overflow:auto;padding:12px;font-size:13px}#cg-devtool-panel{height:250px;display:none;flex-direction:column}#cg-devtool-tab{display:flex;gap:0;margin:2px}.cg-devtool-tab-btn{padding:5px 12px;border:none;background:0 0;color:var(--cg-text);cursor:pointer;font-size:14px}.cg-devtool-tab-btn.active{border-radius:15px;color:var(--cg-text)}.cg-devtool-content{display:none;flex:1;overflow:auto;padding:12px;color:var(--cg-text);font-size:16px;background:var(--bg-devtool)}#cg-devtool-html,#cg-devtool-style{height:248px}.cg-dom-node.active{background:#4d4d4d;color:#fff;border-radius:6px;width:auto;padding:5px}.cg-computed-item{display:flex;justify-content:space-between;padding:6px 10px;border-bottom:1px solid var(--cg-border);font-size:13px}.cg-computed-item b{color:#64748b}#cg-toast-container{position:fixed;top:20px;right:20px;z-index:99999;display:flex;flex-direction:column;gap:10px;pointer-events:none}.cg-toast{min-width:260px;max-width:340px;padding:12px 16px;border-radius:10px;background:#111827;color:#fff;box-shadow:0 8px 25px rgba(0,0,0,.2);opacity:0;transform:translateX(20px);transition:.25s;pointer-events:auto;position:relative;overflow:hidden}.cg-toast::after{content:"";position:absolute;left:0;bottom:0;height:4px;width:100%;background:#fff;animation:3s linear forwards toastTimer}@keyframes toastTimer{from{width:100%}to{width:0}}.cg-toast.show{opacity:1;transform:translateY(0)}.cg-toast.success{background:#16a34a}.cg-toast.error{background:#dc2626}.cg-toast.warn{background:#f59e0b}.cg-playground-wrapper{max-width:1400px;margin:auto}.cg-page-title{padding:10px;font-size:28px;font-weight:600;opacity:.8;margin-top:10px}.cg-playground-content{max-width:900px!important;margin:50px;padding:10px}@media (max-width:512px){.cg-page-title{margin:0;font-size:24px;font-weight:500}.cg-playground-page{padding:0}.cg-playground-shell{border-radius:4px;border:1px solid var(--cg-border)}.cg-playground-content{margin:0}}