.html-preview{padding-top:0;min-height:calc(100vh - 120px);display:flex;flex-direction:column}.editor-wrapper{margin:0 auto;width:95%;flex:1;display:flex;flex-direction:column;padding-bottom:5px;min-height:0}.toolbar{padding:10px 20px;background-color:#f8f9fa;display:flex;justify-content:space-between;align-items:center;position:sticky;top:20px;z-index:100;transition:transform .3s ease,opacity .3s ease;border-radius:6px;box-shadow:0 2px 4px #0000000d}.toolbar h1{margin:0;font-size:1.5em}.editor-container{flex:1 1 auto;display:flex;position:relative;overflow:hidden;margin-top:19px;height:calc(100vh - 240px);min-height:400px}.editor-pane{flex:1 0 0%;min-width:10%;max-width:90%;padding:10px;position:relative;box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden;min-height:0}#html-editor{flex:1 1 auto;border:1px solid #ddd;border-radius:4px;display:flex;flex-direction:column;overflow:hidden;min-height:0}#html-editor .cm-editor{flex:1 1 auto;height:100%;min-height:0}#html-editor .cm-scroller{overflow:auto}#html-output{flex:1 1 auto;border:1px solid #ddd;border-radius:4px;overflow-y:auto;min-height:0;width:100%;background-color:#fff}body.maximized{position:fixed;inset:0;z-index:9999;padding:0;overflow:hidden!important}body.maximized .navbar-wrapper,body.maximized footer,body.maximized #main-content>.container,body.maximized .html-preview>*:not(#main-editor-wrapper){display:none!important}body.maximized #main-content,body.maximized .html-preview{margin:0!important;padding:0!important;height:100vh!important;max-height:100vh!important;width:100vw!important;max-width:100vw!important;overflow:hidden!important}body.maximized #main-editor-wrapper{width:100vw!important;height:100vh!important;margin:0!important;padding:0!important;max-width:100vw!important;max-height:100vh!important;display:flex!important;flex-direction:column!important}body.maximized .toolbar{top:0;border-radius:0}body.maximized .editor-container{height:calc(100vh - 60px)!important;margin-top:0!important;flex:1 1 auto!important}.navbar{margin-bottom:0}body.dark-mode .toolbar{border-bottom-color:#444}body.dark-mode #html-editor,body.dark-mode #html-output{border-color:#444;background-color:#1e1e1e;color:#fff}.dragbar{width:4px;background-color:#ddd;cursor:col-resize;position:relative;z-index:10;transition:background-color .3s;flex:0 0 4px}.dragbar:hover{background-color:#007aff}body.dark-mode .dragbar:hover{background-color:#0a84ff}footer{position:relative;width:100%;padding:15px 0;background-color:inherit;text-align:center;border-top:1px solid #ddd}@keyframes copySuccess{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.toolbar-toggle{display:none;position:fixed;top:0;left:50%;transform:translate(-50%);z-index:1000}.toolbar-toggle button{background:#007affe6;border:none;border-radius:0 0 5px 5px;color:#fff;padding:5px 15px;cursor:pointer;transition:all .3s ease}.toolbar-toggle button:hover{background:#007aff;transform:translateY(2px)}.maximized .toolbar-toggle{display:block}.toolbar{transition:transform .3s ease,opacity .3s ease}.toolbar-hidden .toolbar{transform:translateY(-100%);opacity:0;pointer-events:none}.toolbar-hidden .editor-container{height:100vh!important;margin-top:0!important}body.dark-mode .toolbar-toggle button{background:#0a84ffe6}body.dark-mode .toolbar-toggle button:hover{background:#0a84ff}.info-box h2{position:relative;color:#2c3e50;margin-top:0;margin-bottom:15px;font-size:18px;display:flex;align-items:center}.info-box h2:after{content:"";position:absolute;bottom:-4px;left:0;width:60px;height:2px;background:linear-gradient(90deg,#3498db,transparent)}.info-box{background-color:#f8fafc;border-radius:16px;padding:25px;margin-bottom:40px;border-left:4px solid #3498db;box-shadow:0 4px 15px #0000000d}.info-box h2{color:#2c3e50;margin-top:0;margin-bottom:15px;font-size:18px;display:flex;align-items:center}.info-box h2 i{color:#3498db;margin-right:10px}.info-box p{color:#7f8c8d;margin:10px 0;line-height:1.6}@media(max-width:768px){.editor-container{flex-direction:column!important;height:auto!important}#input-pane,#output-pane{width:100%!important;min-width:100%!important;height:50vh!important;max-width:none!important;flex:none!important}.dragbar{display:none!important}.toolbar{flex-wrap:wrap;gap:10px}.toolbar>div{width:100%;justify-content:flex-start!important}}