:root{--font-main: "PingARLT";--color-primary-50: rgb(186, 243, 230);--color-primary-100: rgb(120, 232, 206);--color-primary-900: rgb(0, 73, 86);--color-primary: rgb(0, 78, 92)}:root[data-theme=dark]{--bg-primary: #1E1E1E;--bg-secondary: #2A2A2A;--text-primary: #FFFFFF;--text-secondary: #9CA3AF;--border-color: #333333;--color-primary: #baf3e5;--component-title: #baf3e5}:root[data-theme=light]{--bg-primary: #FFFFFF;--bg-secondary: #F8F9FA;--text-primary: #1E1E1E;--text-secondary: #4B5563;--border-color: #E5E7EB;--component-title: #004e5c}*{margin:0;padding:0;box-sizing:border-box;font-family:var(--font-main)}html,body{height:100%;overflow:hidden}body{background-color:var(--bg-secondary)}.header-bar{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 1rem;background-color:var(--bg-primary);border-bottom:1px solid var(--border-color)}.header-bar-group{display:flex;align-items:center;gap:.75rem;flex:1}.header-bar-device{justify-content:center}.header-bar-actions{justify-content:flex-end}.title{color:var(--text-primary);font-size:.85rem;font-weight:500;margin:0;line-height:1}.template-switcher{position:relative;width:240px}.template-switcher-trigger{display:flex;align-items:center;gap:.5rem;background-color:var(--bg-secondary);color:var(--text-secondary);border:1px solid var(--border-color);border-radius:6px;padding:3px .5rem;font-family:var(--font-main);font-size:.75rem;cursor:pointer;width:100%;text-align:start;min-height:36px}.template-switcher-trigger:focus,.template-switcher.open .template-switcher-trigger{outline:none;border-color:var(--color-primary)}.template-switcher-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.template-switcher-label.is-placeholder{color:var(--text-secondary)}.template-switcher-caret{font-size:.6rem;margin-inline-start:auto;transition:transform .15s ease;flex-shrink:0}.template-switcher.open .template-switcher-caret{transform:rotate(180deg)}.template-switcher-menu{display:none;position:absolute;top:calc(100% + .4rem);inset-inline-start:0;width:240px;max-height:260px;overflow-y:auto;background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:8px;box-shadow:0 8px 24px #0000001f;padding:.35rem;list-style:none;margin:0;z-index:30}.template-switcher.open .template-switcher-menu{display:block}.template-switcher-item{display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;border-radius:6px;color:var(--text-primary);font-size:.8rem;cursor:pointer}.template-switcher-item:hover{background-color:var(--bg-secondary)}.template-switcher-item.active{background-color:var(--color-primary-50);color:var(--color-primary-900);font-weight:500}.template-switcher-item-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.template-switcher-item-icon svg{width:20px;height:20px;color:var(--text-secondary)}.template-switcher-item.active .template-switcher-item-icon svg,.template-switcher-trigger .template-switcher-item-icon svg{color:var(--color-primary-900)}.template-switcher-item-text{display:flex;flex-direction:column;flex:1;min-width:0;gap:.1rem;line-height:1.1}.template-switcher-item-category{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.template-switcher-item-name{font-size:.7rem;opacity:.6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.category-switcher-icon-only .template-switcher-item-name{font-size:.8rem;opacity:1}.template-switcher-empty{padding:.5rem .6rem;color:var(--text-secondary);font-size:.75rem}.template-switcher-item-controls{display:flex;align-items:center;gap:0;flex-shrink:0}.template-switcher-item-actions{display:flex;align-items:center;gap:.15rem;flex-shrink:0;opacity:0;transition:opacity .15s ease}.template-switcher-item:hover .template-switcher-item-actions,.template-switcher-item:focus-within .template-switcher-item-actions{opacity:1}.template-switcher-default-btn,.template-switcher-edit-btn,.template-switcher-delete-btn,.template-switcher-confirm-btn,.template-switcher-cancel-btn{background:transparent;border:none;color:var(--text-secondary);cursor:pointer;width:22px;height:22px;border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background-color .15s ease,color .15s ease}.template-switcher-default-btn:hover:not(.is-default){background-color:var(--bg-primary);color:var(--color-primary)}.template-switcher-default-btn.is-default{color:#f59e0b;cursor:default}.template-switcher-edit-btn:hover,.template-switcher-confirm-btn:hover{background-color:var(--bg-primary);color:var(--color-primary)}.template-switcher-delete-btn:hover,.template-switcher-cancel-btn:hover{background-color:var(--bg-primary);color:#e11d48}.template-switcher-rename-input{flex:1;min-width:0;background-color:var(--bg-primary);color:var(--text-primary);border:1px solid var(--color-primary);border-radius:4px;padding:.2rem .4rem;font-family:var(--font-main);font-size:.8rem;outline:none}.template-switcher-rename-input.is-invalid{border-color:#e11d48}.device-switcher{display:flex;gap:.25rem;background-color:var(--bg-secondary);border-radius:8px;padding:.25rem}.device-switcher-btn{background:transparent;border:none;color:var(--text-secondary);cursor:pointer;width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.device-switcher-btn.active{background-color:var(--bg-primary);color:var(--color-primary);box-shadow:0 1px 2px #00000014}.device-switcher-btn svg{flex-shrink:0}.header-bar-action-btn{background:transparent;border:none;color:var(--text-secondary);cursor:pointer;padding:.5rem;border-radius:4px;transition:color .2s ease;font-size:1rem;display:flex;align-items:center;gap:.5rem}.header-bar-action-btn:hover{color:var(--color-primary)}.header-bar-action-btn.active{color:var(--bg-primary);background-color:var(--color-primary)}.header-bar-action-btn.active:hover{color:var(--bg-primary)}@media(max-width:640px){.header-bar .device-switcher{display:none}.header-bar .template-switcher{width:100px}.header-bar .template-switcher-menu{max-width:calc(100vw - 2rem)}}.theme-icon{transition:transform .3s ease}[data-theme=dark] .theme-icon.moon,[data-theme=light] .theme-icon.sun{display:none}.lang-icon{transition:transform .3s ease}[dir=rtl] .lang-icon{transform:scaleX(-1)}.lang-code{font-size:.875rem;font-weight:500;text-transform:uppercase}.app-body{display:flex;height:calc(100vh - 56px);overflow:hidden}.quick-nav{width:55px;height:100%;flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:1rem;padding:.75rem 0;background-color:var(--bg-primary);border-inline-end:1px solid var(--border-color)}.quick-nav-toggle{background:transparent;border:none;color:var(--text-secondary);cursor:pointer;width:36px;height:36px;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.quick-nav-toggle:hover{background-color:var(--bg-secondary);color:var(--text-primary)}.quick-nav-items{display:flex;flex-direction:column;gap:.5rem}.quick-nav-item{background:transparent;border:none;color:var(--text-secondary);cursor:pointer;width:36px;height:36px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:all .2s ease}.quick-nav-item:hover{background-color:var(--bg-secondary);color:var(--text-primary)}.quick-nav-item.active{background-color:var(--color-primary-50);color:var(--color-primary-900)}.quick-nav-toggle svg,.quick-nav-item svg{flex-shrink:0}[data-tooltip]{position:relative}[data-tooltip]:before,[data-tooltip]:after{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease,visibility .15s ease;z-index:1200}[data-tooltip]:hover:before,[data-tooltip]:hover:after,[data-tooltip]:focus-visible:before,[data-tooltip]:focus-visible:after{opacity:1;visibility:visible}[data-tooltip]:before{content:attr(data-tooltip);position:absolute;top:50%;inset-inline-start:calc(100% + 10px);transform:translateY(-50%);background-color:var(--color-primary-50);color:var(--color-primary-900);padding:.4rem .85rem;border-radius:8px;font-size:.8rem;font-weight:600;white-space:nowrap}[data-tooltip]:after{content:"";position:absolute;top:50%;inset-inline-start:calc(100% + 2px);transform:translateY(-50%);border:6px solid transparent;border-inline-end-color:var(--color-primary-50)}.header-bar-action-btn[data-tooltip]:before{top:calc(100% + 10px);left:50%;right:auto;transform:translate(-50%)}.header-bar-action-btn[data-tooltip]:after{top:calc(100% + 2px);left:50%;right:auto;transform:translate(-50%);border-inline-end-color:transparent;border-bottom-color:var(--color-primary-50)}.main-sidebar{width:0;height:100%;flex-shrink:0;overflow:hidden;background-color:var(--bg-primary);border-inline-end:1px solid var(--border-color);display:flex;flex-direction:column;transition:width .2s ease}.main-sidebar.active{width:360px}.main-sidebar-content{flex:1;overflow-y:auto;min-width:360px}.page-header{display:flex;flex-direction:column;padding:1.25rem;border-bottom:1px solid var(--border-color)}.page-header-title{margin:0;font-size:1rem;font-weight:700;color:var(--text-primary)}.page-header-desc{margin:0;font-size:.875rem;color:var(--text-secondary)}.main-sidebar-footer{padding:1rem;border-top:1px solid var(--border-color);min-width:360px;display:flex;flex-direction:column;gap:.6rem}.preview-area{flex:1;overflow:auto;display:flex;justify-content:center;align-items:center}.preview-viewport{width:100%;height:100%;border-width:0;border-style:solid;border-color:var(--border-color);border-radius:0;box-shadow:none;padding:0;transition:width .35s cubic-bezier(.4,0,.2,1),height .35s cubic-bezier(.4,0,.2,1),border-width .35s ease,border-radius .35s ease,box-shadow .35s ease,padding .35s ease}.preview-viewport.is-mobile{width:390px;height:844px;max-width:100%;max-height:100%;flex-shrink:0;border-width:1px;border-radius:12px;box-shadow:0 4px 16px #00000014;padding:.5rem}.preview-viewport iframe{width:100%;height:100%;border:none;display:block;background-color:var(--bg-primary)}.preview-viewport.is-mobile iframe{border-radius:8px}.component-card{min-height:60px;position:relative}.component-card.hidden{opacity:.5;position:relative}.component-card.hidden:after{content:"Hidden";position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background-color:#0000001a;font-size:1.5rem;font-weight:700;color:var(--text-secondary);z-index:10}.drawer-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;z-index:999;opacity:0;visibility:hidden;transition:all .3s ease}.drawer-overlay.active{opacity:1;visibility:visible}.drawer{position:fixed;top:0;bottom:0;background-color:var(--bg-primary);width:400px;max-width:100%;z-index:1000;box-shadow:0 0 10px #0000001a;transition:transform .3s ease;overflow-y:auto;opacity:0;visibility:hidden}.drawer.active{opacity:1;visibility:visible}[dir=ltr] .drawer{right:0;transform:translate(100%)}[dir=rtl] .drawer{left:0;transform:translate(-100%)}.drawer.active{transform:translate(0)}.drawer-header{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;border-bottom:1px solid var(--border-color);background-color:var(--bg-secondary);box-shadow:0 2px 4px #0000000d}.drawer-header h3{margin:0;color:var(--text-primary);flex:1;font-size:1.25rem;font-weight:600;letter-spacing:.01em}.drawer-actions{display:flex;align-items:center;gap:.75rem}.drawer-close,.drawer-reset{background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:6px;cursor:pointer;font-size:1.25rem;color:var(--text-secondary);padding:.5rem;width:36px;height:36px;display:flex;align-items:center;justify-content:center;transition:all .2s ease;box-shadow:0 1px 2px #0000000d}.drawer-close:hover,.drawer-reset:hover{background-color:var(--bg-secondary);color:var(--text-primary);transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.drawer-close:active,.drawer-reset:active{transform:translateY(0);box-shadow:0 1px 2px #0000000d}.drawer-reset{color:var(--color-primary)}.drawer-close{color:var(--color-danger, var(--text-secondary))}.drawer-content{padding:1rem}.template-create-row{display:none;flex-direction:column;gap:.5rem}.template-create-name-row{display:flex;align-items:stretch;gap:0}.template-create-name-row #templateNameInput{flex:1;min-width:0;height:40px;border-start-start-radius:0;border-end-start-radius:0}.template-create-name-row .category-switcher-icon-only .template-switcher-trigger{height:40px;width:40px;border-start-end-radius:0;border-end-end-radius:0;border-inline-end:none}.template-thumb-trigger{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;background-color:var(--bg-secondary);color:var(--text-secondary);border:1px solid var(--border-color);border-radius:6px;cursor:pointer;flex-shrink:0;overflow:hidden;transition:background-color .15s ease}.template-thumb-trigger:hover{background-color:var(--bg-primary)}.template-thumb-trigger .template-switcher-item-icon{width:100%;height:100%}.template-thumb-trigger img{width:100%;height:100%;object-fit:cover;display:block}.template-create-name-row .template-thumb-trigger{border-radius:0;border-inline-end:none}.template-footer-actions{display:flex;align-items:stretch;gap:.5rem}.template-footer-actions .btn{flex:1;justify-content:center;width:auto}#createTemplateBtn{max-width:33%}.template-footer-actions--create-only #createTemplateBtn{max-width:100%}.template-update-group{display:flex;align-items:stretch;flex:1;min-width:0}.template-update-group .category-switcher-icon-only .template-switcher-trigger{height:40px;width:40px;background-color:var(--bg-primary);border-color:var(--color-primary);border-start-end-radius:0;border-end-end-radius:0;border-inline-end:none}.template-update-group .category-switcher-icon-only .template-switcher-item-icon svg{color:var(--color-primary)}.template-update-group .template-thumb-trigger{height:40px;background-color:var(--bg-primary);color:var(--color-primary);border-color:var(--color-primary);border-radius:0;border-inline-end:none}.template-update-group .template-thumb-trigger .template-switcher-item-icon svg{color:var(--color-primary)}.template-update-group #updateTemplateBtn{height:40px;min-width:0;border-start-start-radius:0;border-end-start-radius:0}.template-update-group #updateTemplateBtn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.main-sidebar-footer .category-switcher:not(.category-switcher-icon-only){width:100%}.category-switcher-icon-only{width:auto;flex:0 0 auto}.category-switcher-icon-only .template-switcher-trigger{width:36px;min-height:36px;padding:0;justify-content:center}.category-switcher-icon-only .template-switcher-item-icon svg{width:18px;height:18px}.category-switcher .template-switcher-menu{top:auto;bottom:calc(100% + .4rem)}.template-switcher-trigger.is-invalid,.template-thumb-trigger.is-invalid{border-color:#e11d48}.template-create-row.active{display:flex}.template-create-actions{display:flex;gap:.5rem}.template-create-actions .btn{flex:1;justify-content:center}.filter-actions{display:flex;gap:1rem;margin-bottom:1rem}.btn{padding:5px;border-radius:4px;border:none;cursor:pointer;font-weight:500;transition:all .2s ease}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary:hover{background-color:var(--color-primary-50)}.btn-secondary{background-color:var(--bg-secondary);color:var(--text-primary)}.btn.btn-secondary{border:1px solid var(--border-color)}.btn-secondary:hover{background-color:var(--bg-primary)}.btn-outline-primary{background-color:var(--bg-primary);color:var(--color-primary)}.btn.btn-outline-primary{border:1px solid var(--color-primary)}.btn-outline-primary:hover{background-color:var(--color-primary-50)}.component-visibility-list{display:flex;flex-direction:column;gap:.75rem;overflow-y:auto}.visibility-item{display:flex;align-items:center;gap:5px;padding:.5rem .75rem;border:1px solid var(--border-color);border-radius:6px;transition:background-color .2s ease,border-color .2s ease}.visibility-item:hover{background-color:var(--bg-secondary);border-color:var(--color-primary, var(--border-color))}.visibility-item.is-hidden{opacity:.5}.visibility-item.dragging{z-index:1001;background-color:var(--bg-primary);box-shadow:0 8px 24px #0003;pointer-events:none;cursor:grabbing}.visibility-item-placeholder{border:2px dashed var(--border-color);border-radius:4px;background-color:var(--bg-secondary)}.drag-handle{display:flex;align-items:center;justify-content:center;color:var(--text-secondary, var(--text-primary));cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}.drag-handle:active{cursor:grabbing}.visibility-item-name{flex:1;color:var(--text-primary);font-size:.9rem;padding:0 .25rem}.visibility-toggle-btn,.visibility-edit-btn{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:4px;background:transparent;color:var(--text-secondary, var(--text-primary));cursor:pointer;transition:background-color .2s ease,color .2s ease}.visibility-toggle-btn:hover,.visibility-edit-btn:hover{background-color:var(--bg-secondary);color:var(--text-primary)}.visibility-item.is-hidden .visibility-toggle-btn{color:var(--color-primary, var(--text-secondary))}.sidebar-panel{display:none;padding:1rem;animation:fadeIn .3s ease}.sidebar-panel.active{display:block}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.settings-form-group{margin-bottom:1.25rem}.settings-form-group label{display:block;margin-bottom:.5rem;font-weight:500;color:var(--text-primary)}.settings-input,.settings-textarea{width:100%;padding:5px 8px;border:1px solid var(--border-color);border-radius:4px;background-color:var(--bg-primary);color:var(--text-primary);font-family:inherit;font-size:.9rem;transition:border-color .2s ease}.settings-input:focus,.settings-textarea:focus{outline:none;border-color:#666}.settings-textarea{resize:vertical;min-height:100px;direction:ltr;font-family:monospace;color:#888}.settings-form-group small{display:block;margin-top:.25rem;font-size:.8rem;color:var(--text-secondary)}.settings-form-group label.settings-checkbox-row{display:flex;align-items:center;gap:.5rem;margin-bottom:0;cursor:pointer;font-weight:500;color:var(--text-primary)}.settings-checkbox-row input[type=checkbox]{margin:0;width:16px;height:16px;cursor:pointer}.settings-hint{font-weight:500}.settings-hint--warning{color:#d97706}.settings-actions{display:flex;justify-content:flex-end;gap:1rem;margin-top:2rem;padding-top:1rem;border-top:1px solid var(--border-color)}.settings-languages-container{max-height:200px;overflow-y:auto;border:1px solid var(--border-color);border-radius:4px;background-color:var(--bg-primary)}.settings-languages-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:.5rem;padding:.75rem}.settings-language-item{display:flex;align-items:center;gap:.25rem;padding:.25rem;border-radius:4px;cursor:pointer;transition:background-color .2s ease}.settings-language-item:hover{background-color:var(--bg-secondary)}.settings-language-item input{margin:0}.settings-language-item span{font-size:.85rem}.component-card-empty{min-height:200px;display:flex;align-items:center;justify-content:center;background-color:var(--bg-secondary);border:2px dashed var(--border-color);border-radius:8px;transition:all .3s ease}.component-card-empty:hover{border-color:var(--color-primary-100);background-color:var(--bg-primary)}.empty-state{text-align:center;padding:2rem;max-width:300px}.empty-state-icon{margin-bottom:1rem}.empty-state-icon i{font-size:3rem;color:var(--text-secondary);opacity:.6}.empty-state-title{font-size:1.25rem;font-weight:600;color:var(--text-primary);margin-bottom:.5rem;text-transform:capitalize}.empty-state-description{font-size:.9rem;color:var(--text-secondary);line-height:1.5;margin-bottom:1.5rem}.empty-state-actions{display:flex;justify-content:center}.btn{display:inline-flex;align-items:center;gap:.5rem;padding:7px 10px;border:none;border-radius:6px;font-family:inherit;font-weight:500;text-decoration:none;cursor:pointer;transition:all .2s ease;font-size:.9rem}.btn-primary{background-color:var(--color-primary-100);color:var(--color-primary-900)}.btn-primary:hover{background-color:var(--color-primary-50);transform:translateY(-1px);box-shadow:0 4px 8px #0000001a}.btn-sm{padding:.5rem 1rem;font-size:.85rem}.btn i{font-size:.9em}.drawer-empty-state{min-height:400px;display:flex;align-items:center;justify-content:center;padding:2rem}.drawer-empty-state .empty-state{max-width:400px}.drawer-empty-state .empty-state-icon i{font-size:4rem;color:var(--text-secondary);opacity:.5}.drawer-empty-state .empty-state-title{font-size:1.5rem;margin-bottom:1rem;text-transform:capitalize}.drawer-empty-state .empty-state-description{margin-bottom:1rem;line-height:1.6}.drawer-empty-state .empty-state-actions{margin-top:2rem}.drawer-empty-state .btn,.drawer-empty-state .btn:hover{text-decoration:none}