@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=Fredoka:wght@400;600;700&display=swap";:root{--primary-light:#e6f7eb;--primary:#4ade80;--primary-dark:#16a34a;--bg-color:#f0fdf4;--text-dark:#0f172a;--text-light:#475569;--accent:#fcd34d;--accent-secondary:#f472b6;--surface:#ffffffb3;--surface-hover:#ffffffe6;--shadow-sm:0 4px 6px -1px #0000000d, 0 2px 4px -2px #0000000d;--shadow-ln:0 10px 25px -5px #4ade8033, 0 8px 10px -6px #4ade801a}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-color);color:var(--text-dark);background-image:radial-gradient(at 40% 20%,#8aff7a4d 0,#0000 50%),radial-gradient(at 80% 0,#1fddff4d 0,#0000 50%),radial-gradient(at 0%,#ffdbde4d 0,#0000 50%);flex-direction:column;min-height:100vh;font-family:Outfit,sans-serif;display:flex}h1,h2,h3{color:var(--primary-dark);font-family:Fredoka,sans-serif}.glass-panel{background:var(--surface);-webkit-backdrop-filter:blur(12px);box-shadow:var(--shadow-ln);border:1px solid #ffffff80;border-radius:24px;transition:transform .3s,background .3s}.glass-panel:hover{background:var(--surface-hover);transform:translateY(-2px)}.magic-btn{cursor:pointer;border:none;border-radius:9999px;justify-content:center;align-items:center;gap:8px;padding:12px 24px;font-family:Fredoka,sans-serif;font-size:1.1rem;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1);display:inline-flex;box-shadow:0 4px 14px #4ade8063}.magic-btn.primary{background:linear-gradient(135deg, var(--primary) 0%, #22c55e 100%);color:#fff}.magic-btn.primary:hover{transform:translateY(-3px)scale(1.02);box-shadow:0 6px 20px #4ade8099}.magic-btn:active{transform:scale(.95)}.magic-input{width:100%;color:var(--text-dark);background:#ffffffe6;border:2px solid #bbf7d0;border-radius:16px;padding:14px 20px;font-family:Outfit,sans-serif;font-size:1rem;transition:all .3s}.magic-input:focus{border-color:var(--primary);background:#fff;outline:none;box-shadow:0 0 0 4px #4ade8033}.login-container{justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.login-box{text-align:center;width:100%;max-width:400px;padding:40px;animation:.8s ease-out forwards floatIn}.login-logo{flex-direction:column;align-items:center;gap:16px;margin-bottom:8px;display:flex}.logo-icon{color:var(--primary);filter:drop-shadow(0 4px 6px #4ade8066);animation:4s ease-in-out infinite pulseRotate}.login-subtitle{color:var(--text-light);margin-bottom:32px}.login-form{flex-direction:column;gap:16px;display:flex}.error-text{color:#ef4444;background:#fee2e2;border-radius:8px;padding:8px;font-size:.9rem;animation:.4s ease-in-out shake}.dashboard{flex-direction:column;min-height:100vh;display:flex}.navbar{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);z-index:50;background:#fff9;border-bottom:1px solid #fffc;justify-content:space-between;align-items:center;padding:16px 5%;display:flex;position:sticky;top:0}.navbar-brand{color:var(--primary-dark);align-items:center;gap:12px;font-family:Fredoka,sans-serif;font-size:1.5rem;display:flex}.logout-btn{border:2px solid var(--primary);color:var(--primary-dark);background:0 0}.logout-btn:hover{background:var(--primary-light)}.main-content{flex:1;grid-template-columns:350px 1fr;gap:32px;width:100%;max-width:1200px;margin:0 auto;padding:32px 5%;display:grid}@media (width<=868px){.main-content{grid-template-columns:1fr}}.controls-panel{flex-direction:column;gap:24px;display:flex}.control-group{flex-direction:column;gap:12px;display:flex}.control-label{color:var(--text-dark);font-family:Fredoka,sans-serif;font-size:1.1rem}.selector-grid{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.selector-item{text-align:center;cursor:pointer;background:#fff;border:2px solid #0000;border-radius:12px;flex-direction:column;align-items:center;gap:8px;padding:12px 8px;font-size:.9rem;font-weight:600;transition:all .2s;display:flex}.selector-item.active{border-color:var(--primary);background:var(--primary-light);color:var(--primary-dark);transform:scale(1.05);box-shadow:0 4px 12px #4ade8033}.selector-item:hover:not(.active){background:#f8fafc;transform:translateY(-2px)}textarea.magic-input{resize:vertical;min-height:100px}.preview-panel{background:#fff6;border:2px dashed #bbf7d0;border-radius:32px;flex-direction:column;justify-content:center;align-items:center;gap:16px;min-height:500px;transition:all .3s;display:flex}.preview-placeholder{color:var(--text-light);opacity:.6;flex-direction:column;align-items:center;gap:16px;display:flex}.comic-grid{gap:16px;width:100%;height:100%;padding:16px;display:grid}@keyframes floatIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulseRotate{0%{transform:scale(1)rotate(0)}50%{transform:scale(1.1)rotate(5deg)}to{transform:scale(1)rotate(0)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.panel-bubbles-section{flex-direction:column;gap:12px;max-height:300px;padding-right:4px;display:flex;overflow-y:auto}.panel-bubbles-section::-webkit-scrollbar{width:6px}.panel-bubbles-section::-webkit-scrollbar-thumb{background:var(--primary);border-radius:3px}.panel-bubble-item{background:#fff9;border:1px solid #bbf7d0;border-radius:16px;flex-direction:column;gap:8px;padding:12px 14px;transition:all .2s;display:flex}.panel-bubble-item:hover{border-color:var(--primary);background:#ffffffd9}.panel-bubble-label{color:var(--primary-dark);align-items:center;gap:6px;font-family:Fredoka,sans-serif;font-size:.85rem;font-weight:600;display:flex}.bubble-inputs{flex-direction:column;gap:6px;display:flex}.bubble-input{width:100%;color:var(--text-dark);background:#fff;border:1.5px solid #d1fae5;border-radius:10px;padding:8px 12px;font-family:Outfit,sans-serif;font-size:.85rem;transition:all .2s}.bubble-input:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px #4ade8026}.bubble-input::placeholder{color:#94a3b8;font-style:italic}.download-btn{background:linear-gradient(135deg, var(--accent) 0%, #f59e0b 100%);color:var(--text-dark);cursor:pointer;border:none;border-radius:9999px;align-items:center;gap:8px;padding:10px 20px;font-family:Fredoka,sans-serif;font-size:1rem;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1);display:inline-flex;box-shadow:0 4px 14px #fcd34d66}.download-btn:hover{transform:translateY(-3px)scale(1.02);box-shadow:0 6px 20px #fcd34d99}.download-btn:active{transform:scale(.95)}.download-modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#00000080;justify-content:center;align-items:center;animation:.2s fadeIn;display:flex;position:fixed;inset:0}.download-modal{background:#fff;border-radius:24px;flex-direction:column;gap:20px;width:90%;max-width:420px;padding:32px;animation:.3s ease-out floatIn;display:flex;box-shadow:0 20px 60px #00000026}.download-modal h3{color:var(--primary-dark);text-align:center;font-family:Fredoka,sans-serif;font-size:1.3rem}.download-modal-actions{justify-content:center;gap:12px;display:flex}.download-modal-actions .magic-btn{flex:1;padding:10px 16px;font-size:.95rem}.cancel-btn{color:var(--text-light);background:0 0;border:2px solid #e2e8f0}.cancel-btn:hover{background:#f8fafc;border-color:#cbd5e1}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}