*,* *{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important;-webkit-user-drag:none!important;user-drag:none!important}body{background-color:#121214;color:#e1e1e6;height:100vh;display:flex;flex-direction:column;overflow:hidden}.app-header{background-color:#202024;padding:12px 20px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #323238;gap:15px;overflow:hidden;width:100%}.logo{display:flex;align-items:center;gap:10px;flex-shrink:0}.logo svg{width:24px;height:24px;fill:#00b37e}.logo h1{font-size:18px;font-weight:600;white-space:nowrap}.logo h1 span{color:#00adb5;font-size:11px;vertical-align:super}.project-management{display:flex;gap:10px;align-items:center;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;flex:1;justify-content:flex-start;padding:4px 0}.project-management::-webkit-scrollbar{height:4px;background:transparent}.project-management::-webkit-scrollbar-thumb{background:#323238;border-radius:4px}.lang-selector{display:flex;align-items:center;gap:4px;background:#121214;padding:4px;border-radius:6px;border:1px solid #323238;flex-shrink:0}.btn-lang{background:0 0;border:none;color:#7c7c8a;padding:4px 8px;font-size:11px;border-radius:4px;cursor:pointer;font-weight:bold}.btn-lang.active{background:#202024;color:#00b37e}.lang-badge{font-size:11px;color:#a8a8b3;padding:0 6px;border-left:1px solid #323238}#project-name{background:#121214;border:1px solid #323238;color:#fff;padding:8px;border-radius:4px;outline:0;width:140px;flex-shrink:0;min-width:100px}button{color:#fff;border:none;padding:8px 14px;border-radius:4px;cursor:pointer;font-weight:bold;display:inline-flex;align-items:center;gap:6px;transition:opacity .2s;flex-shrink:0}button:hover{opacity:.9}button svg{width:16px;height:16px;fill:#fff}.btn-success{background-color:#00b37e}.btn-info{background-color:#00adb5}.btn-warning{background-color:#ff9f43}.btn-dark{background-color:#29292e;border:1px solid #323238}.app-container{flex:1;display:flex;flex-direction:row;padding:15px;gap:15px;height:calc(100vh - 57px);overflow:hidden;position:relative}.sidebar{width:240px;background:#202024;border-radius:6px;border:1px solid #323238;display:flex;flex-direction:column;overflow:hidden;flex-shrink:0}.sidebar-label{background:#29292e;padding:10px;font-size:12px;font-weight:bold;color:#a8a8b3;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #323238;white-space:nowrap;gap:8px}.btn-delete-style{background:#e94560!important;padding:4px 8px!important;border-radius:4px!important;font-size:11px!important;color:#fff!important;border:none!important;display:inline-flex!important;align-items:center!important;gap:4px!important;height:24px!important;box-shadow:0 2px 5px rgba(233,69,96,0.2);transition:transform .1s,background .2s}.btn-delete-style:hover{background:#ff526c!important}.btn-delete-style:active{transform:scale(0.95)}.btn-delete-style svg{width:12px!important;height:12px!important;fill:#fff!important}.sidebar-label svg{width:14px;height:14px;fill:#a8a8b3}.project-list{list-style:none;padding:10px;overflow-y:auto;flex:1}.project-item{padding:8px;background:#29292e;margin-bottom:8px;border-radius:4px;cursor:pointer;font-size:13px;display:flex;justify-content:space-between;align-items:center;border:1px solid transparent;gap:8px}.project-item:hover{border-color:#00b37e}.project-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:130px}.project-item.active-project{border-color:#00b37e!important;background:#1c2d27!important}.project-item button{background:0 0;padding:2px;color:#f37171}.project-item button svg{fill:#f37171;width:14px;height:14px}.editor-area{flex:1;display:flex;flex-direction:column;gap:10px;height:100%}.editor-box{flex:1;display:flex;flex-direction:column;background-color:#202024;border-radius:6px;border:1px solid #323238;overflow:hidden}.editor-label{background-color:#29292e;padding:6px 12px;font-size:12px;font-weight:bold;color:#a8a8b3;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #323238}.label-title,.label-actions{display:flex;align-items:center;gap:6px}.editor-label svg{width:14px;height:14px;fill:#a8a8b3}.btn-inline-label{background:#121214;padding:4px 10px;border-radius:4px;font-size:11px;color:#a8a8b3;border:1px solid #323238;display:inline-flex;align-items:center;gap:5px;height:24px}.btn-inline-label:hover{background:#29292e;color:#fff}.btn-inline-label svg{width:12px;height:12px;fill:#a8a8b3}.btn-inline-label:hover svg{fill:#fff}.btn-close-fullscreen{background:#f37171;border-radius:4px;padding:4px 10px;font-size:11px;color:#fff;display:inline-flex;align-items:center;gap:5px;height:24px}.btn-close-fullscreen:hover{background:#e05c5c}.btn-close-fullscreen svg{width:12px;height:12px;fill:#fff!important}.code-container{flex:1;position:relative;background:#121214;overflow:hidden}.editor-input{position:absolute;top:0;left:0;width:100%;height:100%;padding:10px;font-family:monospace;font-size:14px;line-height:1.5;white-space:pre;word-wrap:normal;border:none;background:#121214;color:#e1e1e6;outline:0;resize:none;overflow-y:auto;overflow-x:auto}.editor-footer{background:#1c1c21;padding:4px 12px;font-size:11px;color:#7c7c8a;text-align:right;border-top:1px solid #29292e;font-family:monospace;user-select:none}#container-notify{position:fixed;bottom:20px;right:20px;display:flex;flex-direction:column-reverse;gap:10px;z-index:10000;max-height:160px;overflow:hidden}.notify-item{background:#00b37e;color:#fff;padding:12px 20px;border-radius:6px;font-size:13px;font-weight:bold;box-shadow:0 4px 12px rgba(0,0,0,0.3);animation:slideIn .2s ease;flex-shrink:0}.preview-area{flex:1;display:flex;flex-direction:column;background-color:#fff;border-radius:6px;border:1px solid #323238;overflow:hidden;transition:all .2s}.preview-area.fullscreen{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999;border-radius:0;margin:0}.preview-label{background-color:#f0f0f4;padding:6px 12px;font-size:12px;font-weight:bold;color:#5c5c64;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e1e1e6}.preview-label svg{width:14px;height:14px;fill:#5c5c64}iframe{flex:1;border:none;background-color:#fff}@keyframes slideIn{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@media(max-width:900px){.app-container{flex-direction:column;overflow-y:auto;height:auto}.sidebar{width:100%;height:auto;border-width:1px}.project-list{display:flex;flex-direction:row;gap:8px;overflow-x:auto;padding:8px;white-space:nowrap;-webkit-overflow-scrolling:touch}.project-list::-webkit-scrollbar{height:4px;background:transparent}.project-list::-webkit-scrollbar-thumb{background:#323238;border-radius:4px}.project-item{margin-bottom:0;flex-shrink:0}.project-item span{width:auto;max-width:120px}.project-item.active-project{border-width:1px!important}.editor-area,.preview-area{width:100%;flex:none}.editor-box{height:180px}.preview-area{height:350px}.preview-area.fullscreen{position:fixed;width:100vw;height:100vh}}