.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:#f8fafc;border:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center;position:sticky;top:20px;z-index:100;transition:all .3s ease;border-radius:8px;box-shadow:0 1px 3px #00000005}body.dark-mode .toolbar{background-color:#1e293b;border-color:#334155;box-shadow:0 4px 6px #00000026}.toolbar h1{margin:0;font-size:1.25rem;font-weight:600}.toolbar .btn{border-radius:6px;font-weight:500;padding:6px 12px;font-size:.85rem;display:inline-flex;align-items:center;gap:6px;border:1px solid #e2e8f0;background:#fff;color:#475569;box-shadow:0 1px 2px #0000000d;transition:all .2s ease}.toolbar .btn:hover{background:#f8fafc;border-color:#cbd5e1;color:#1e293b;transform:translateY(-1px)}.toolbar .btn-outline-danger{color:#dc2626;border-color:#fee2e2;background:#fff}.toolbar .btn-outline-danger:hover{background:#fef2f2;border-color:#fca5a5;color:#b91c1c}.toolbar .btn-outline-primary{color:#2563eb;border-color:#dbeafe;background:#fff}.toolbar .btn-outline-primary:hover{background:#eff6ff;border-color:#93c5fd;color:#1d4ed8}.toolbar .btn-outline-warning{color:#d97706;border-color:#fef3c7;background:#fff}.toolbar .btn-outline-warning:hover{background:#fffbeb;border-color:#fcd34d;color:#b45309}.toolbar .btn-outline-success{color:#16a34a;border-color:#dcfce7;background:#fff}.toolbar .btn-outline-success:hover{background:#f0fdf4;border-color:#86efac;color:#15803d}body.dark-mode .toolbar .btn{background:#1e293b;border-color:#334155;color:#cbd5e1;box-shadow:0 1px 2px #0003}body.dark-mode .toolbar .btn:hover{background:#334155;border-color:#475569;color:#fff}body.dark-mode .toolbar .btn-outline-danger{color:#fca5a5;border-color:#451a1a;background:#1e293b}body.dark-mode .toolbar .btn-outline-danger:hover{background:#451a1a;border-color:#7f1d1d;color:#fecaca}body.dark-mode .toolbar .btn-outline-primary{color:#93c5fd;border-color:#1e3a8a;background:#1e293b}body.dark-mode .toolbar .btn-outline-primary:hover{background:#1e3a8a;border-color:#1d4ed8;color:#dbeafe}body.dark-mode .toolbar .btn-outline-warning{color:#fcd34d;border-color:#451a03;background:#1e293b}body.dark-mode .toolbar .btn-outline-warning:hover{background:#451a03;border-color:#78350f;color:#fef3c7}body.dark-mode .toolbar .btn-outline-success{color:#86efac;border-color:#064e3b;background:#1e293b}body.dark-mode .toolbar .btn-outline-success:hover{background:#064e3b;border-color:#059669;color:#dcfce7}.toolbar .dropdown-menu{border-radius:8px;border:1px solid #e2e8f0;box-shadow:0 10px 15px -3px #0000000d,0 4px 6px -4px #0000000d;padding:6px}body.dark-mode .toolbar .dropdown-menu{background-color:#1e293b;border-color:#334155}body.dark-mode .toolbar .dropdown-item{color:#cbd5e1;border-radius:4px}body.dark-mode .toolbar .dropdown-item:hover{background-color:#334155;color:#fff}body.dark-mode .toolbar .dropdown-divider{border-color:#334155}.editor-container{flex:1 1 auto;display:flex;position:relative;overflow:hidden;margin-top:15px;height:calc(100vh - 220px);min-height:450px;border-radius:8px;border:1px solid #e2e8f0;box-shadow:0 4px 6px -1px #00000005,0 2px 4px -2px #00000005}body.dark-mode .editor-container{border-color:#334155;box-shadow:0 4px 12px #0003}.editor-pane{flex:1 0 0%;min-width:10%;max-width:90%;padding:0;position:relative;box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden;min-height:0}#html-editor{flex:1 1 auto;border:none;display:flex;flex-direction:column;overflow:hidden;min-height:0;background-color:#fff}body.dark-mode #html-editor{background-color:#1e1e1e}#html-editor .cm-editor{flex:1 1 auto;height:100%;min-height:0}#html-editor .cm-scroller{overflow:auto}#html-editor .cm-content{font-family:JetBrains Mono,Fira Code,Segoe UI Mono,Consolas,Monaco,monospace;font-size:14px;line-height:1.6}#html-output{flex:1 1 auto;border:none;overflow-y:auto;min-height:0;width:100%;background-color:#fff}.dragbar{width:6px;background-color:#f1f5f9;cursor:col-resize;position:relative;z-index:10;transition:background-color .2s,box-shadow .2s;flex:0 0 6px;display:flex;align-items:center;justify-content:center}body.dark-mode .dragbar{background-color:#1e293b}.dragbar:after{content:"";width:2px;height:24px;background-color:#cbd5e1;border-radius:1px;box-shadow:0 8px #cbd5e1,0 -8px #cbd5e1;transition:all .2s}body.dark-mode .dragbar:after{background-color:#475569;box-shadow:0 8px #475569,0 -8px #475569}.dragbar:hover{background-color:#3b82f6}.dragbar:hover:after{background-color:#fff;box-shadow:0 8px #fff,0 -8px #fff}body.dark-mode .dragbar:hover{background-color:#60a5fa}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;border-left:none;border-right:none;border-top:none}body.maximized .editor-container{height:calc(100vh - 56px)!important;margin-top:0!important;flex:1 1 auto!important;border-radius:0!important;border-left:none;border-right:none;border-bottom:none}.navbar{margin-bottom:0}@keyframes copySuccess{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.toolbar-toggle{display:none;position:fixed;top:0;left:50%;transform:translate(-50%);z-index:1000}.toolbar-toggle button{background:#3b82f6e6;border:none;border-radius:0 0 6px 6px;color:#fff;padding:4px 16px;cursor:pointer;transition:all .2s ease;font-size:.8rem;box-shadow:0 2px 4px #0000001a}.toolbar-toggle button:hover{background:#2563eb;transform:translate(0) translateY(1px)}.maximized .toolbar-toggle{display:block}.toolbar-hidden .toolbar{transform:translateY(-100%);opacity:0;pointer-events:none;height:0;padding:0;border:none}.toolbar-hidden .editor-container{height:100vh!important;margin-top:0!important}body.dark-mode .toolbar-toggle button{background:#60a5fae6}body.dark-mode .toolbar-toggle button:hover{background:#3b82f6}.info-box{background-color:#f8fafc;border-radius:16px;padding:25px;margin-bottom:40px;border-left:4px solid #3b82f6;box-shadow:0 4px 15px #00000005}body.dark-mode .info-box{background-color:#1e293b;border-color:#334155;border-left-color:#3b82f6;box-shadow:0 4px 15px #0000001a}.info-box h2{position:relative;color:#1e293b;margin-top:0;margin-bottom:15px;font-size:1.15rem;display:flex;align-items:center;font-weight:600}body.dark-mode .info-box h2{color:#f8fafc}.info-box p{color:#475569;margin:10px 0;line-height:1.6}body.dark-mode .info-box p{color:#cbd5e1}.sync-indicator{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;padding:4px 8px;border-radius:4px;transition:all .3s ease;font-weight:500}.sync-indicator .status-dot{width:6px;height:6px;border-radius:50%;background-color:#10b981}.sync-indicator.syncing{color:#3b82f6}.sync-indicator.syncing .status-dot{background-color:#3b82f6;animation:pulse 1s infinite alternate}.sync-indicator.synced{color:#10b981}@keyframes pulse{0%{opacity:.4;transform:scale(.9)}to{opacity:1;transform:scale(1.1)}}@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}}