:root{--primary:#0f766e;--primary-light:#14b8a6;--primary-dark:#0d9488;--bg:#f8fafc;--card:#fff;--text:#0f172a;--muted:#64748b;--border:#e2e8f0;--radius:16px;--shadow:0 10px 25px -5px #0000000d, 0 8px 10px -6px #0000000d;--font-family:"Inter", system-ui, -apple-system, sans-serif;--banner-width:200px}[data-theme=dark]{--bg:#020617;--card:#0f172a;--text:#f8fafc;--muted:#94a3b8;--border:#1e293b;--shadow:0 10px 25px -5px #0000004d, 0 8px 10px -6px #0000004d}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}body{font-family:var(--font-family);background-color:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;line-height:1.5;transition:background-color .3s,color .3s;overflow-x:hidden}.layout-wrapper{min-height:100vh;display:flex;position:relative}.container{z-index:5;flex-direction:column;flex:1;max-width:800px;margin:0 auto;padding:20px;display:flex;position:relative}.sidebar-banner{width:var(--banner-width);border-right:1px solid var(--border);background:var(--card);z-index:10;flex-direction:column;gap:20px;height:100vh;padding:24px 16px;display:flex;position:relative;top:0;overflow:hidden}.sidebar-banner:before{content:"";pointer-events:none;background:linear-gradient(135deg,#0000,#0f766e08,#0000) 0 0/200% 200%;animation:8s ease-in-out infinite backgroundMove;position:absolute;inset:0}@keyframes backgroundMove{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}.sidebar-banner.right{border-right:none;border-left:1px solid var(--border)}.banner-title{text-transform:uppercase;letter-spacing:.1em;color:var(--primary);margin-bottom:10px;font-size:.8rem;font-weight:800;animation:3s ease-in-out infinite gentlePulse}@keyframes gentlePulse{0%,to{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.02)}}.hook-card{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:16px;font-size:.85rem;line-height:1.4;transition:all .5s;animation:6s ease-in-out infinite float,.5s fadeIn;box-shadow:0 4px 6px -1px #0000000d}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.banner-logo{width:100%;max-width:120px;margin:0 auto 10px;animation:20s linear infinite slowRotate;display:block}@keyframes slowRotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.banner-link{color:var(--primary);border:1px solid var(--primary);text-align:center;background:#0f766e0d;border-radius:8px;margin-top:auto;padding:10px;font-size:.75rem;font-weight:700;text-decoration:none;transition:all .2s;animation:4s ease-in-out infinite soothingGlow}@keyframes soothingGlow{0%,to{box-shadow:0 0 #0f766e00}50%{border-color:var(--primary-light);box-shadow:0 0 15px #0f766e33}}.banner-link:hover{background:var(--primary);color:#fff}.cursor{background-color:var(--primary);width:2px;margin-left:2px;animation:.7s infinite blink;display:inline-block}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.marquee-container{height:60px;margin-bottom:10px;position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(#0000,#000 20% 80%,#0000);mask-image:linear-gradient(#0000,#000 20% 80%,#0000)}.marquee-content{text-align:center;width:100%;color:var(--muted);padding:0 10px;font-size:.75rem;font-weight:600;animation:8s linear infinite marqueeVertical;position:absolute}@keyframes marqueeVertical{0%{opacity:0;transform:translateY(-100%)}10%{opacity:1;transform:translateY(0)}90%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100%)}}.ad-space{border:1px dashed var(--muted);cursor:pointer;opacity:.7;background:#00000005;border-radius:12px;flex-direction:column;align-items:center;gap:4px;margin-top:20px;padding:12px;transition:all .3s;display:flex}.ad-space:hover{opacity:1;border-style:solid;border-color:var(--primary-light);background:#0f766e0d}.ad-icon{font-size:1.2rem}.ad-text{color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-size:.7rem;font-weight:700}.decorative-divider{opacity:.3;justify-content:center;gap:8px;margin:10px 0;display:flex}.decorative-divider span{background:var(--muted);border-radius:50%;width:4px;height:4px}header{justify-content:space-between;align-items:center;padding:1rem 0 2rem;display:flex}.brand{color:inherit;align-items:center;gap:12px;text-decoration:none;display:flex}.logo{object-fit:cover;border-radius:10px;width:40px;height:40px}.brand-name{letter-spacing:-.025em;background:linear-gradient(135deg, var(--primary), var(--primary-light));-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:1.4rem;font-weight:800}.nav-tabs{background:var(--border);border-radius:12px;margin-bottom:24px;padding:4px;display:flex}.nav-tab{color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:8px;flex:1;padding:10px;font-size:.95rem;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1)}.nav-tab.active{background:var(--card);color:var(--primary);box-shadow:0 1px 3px #0000001a}.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border);margin-bottom:24px;padding:24px;position:relative;overflow:hidden}.title{color:var(--text);letter-spacing:-.01em;margin-bottom:1.5rem;font-size:1.25rem;font-weight:800}.btn{cursor:pointer;border:none;border-radius:10px;justify-content:center;align-items:center;gap:8px;width:100%;padding:12px 20px;font-size:.95rem;font-weight:700;transition:all .2s;display:inline-flex}.btn:active{transform:scale(.98)}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-dark)}.btn-secondary{background:var(--border);color:var(--text)}.btn-secondary:hover{opacity:.9}.btn-ghost{color:var(--muted);background:0 0}.btn-ghost:hover{color:var(--primary);background:#0f766e0d}.form-group{margin-bottom:16px}label{color:var(--muted);margin-bottom:6px;font-size:.85rem;font-weight:700;display:block}input,select{border:1.5px solid var(--border);background:var(--bg);width:100%;color:var(--text);border-radius:10px;outline:none;padding:12px 14px;font-size:1rem;transition:border-color .2s}input:focus,select:focus{border-color:var(--primary)}.scanner-container{border-radius:var(--radius);aspect-ratio:4/3;box-shadow:var(--shadow);background:#000;margin-bottom:20px;position:relative;overflow:hidden}#reader{width:100%}.scanner-overlay{pointer-events:none;z-index:10;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.scan-region{border:2px solid #ffffff80;border-radius:12px;width:70%;height:40%;position:relative}.scan-line{background:var(--primary-light);width:90%;height:2px;box-shadow:0 0 15px var(--primary-light);animation:2s linear infinite scanMove;position:absolute;top:50%;left:5%}@keyframes scanMove{0%{opacity:0;transform:translateY(-300%)}50%{opacity:1}to{opacity:0;transform:translateY(300%)}}.shooting-star{width:4px;height:4px;box-shadow:0 0 20px #fff, 0 0 40px var(--primary-light);z-index:1000;pointer-events:none;background:#fff;border-radius:50%;position:fixed}.shooting-star:after{content:"";background:linear-gradient(90deg,#ffffffb3,#0000);width:100px;height:2px;position:absolute;top:50%;right:0;transform:translateY(-50%)}.star-icon{width:24px;height:24px;position:absolute;top:-10px;left:-10px}.explosion{pointer-events:none;z-index:1001;position:fixed}.particle{background:var(--primary-light);border-radius:50%;width:4px;height:4px;position:absolute}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}footer{text-align:center;border-top:1px solid var(--border);margin-top:auto;padding:2rem 0}.powered-by{color:var(--muted);justify-content:center;align-items:center;gap:8px;margin-bottom:8px;font-size:.85rem;font-weight:600;text-decoration:none;display:flex}.footer-logo{border-radius:4px;width:24px;height:24px}.footer-contact{color:var(--muted);opacity:.8;font-size:.75rem}.flex-row{align-items:center;gap:10px;display:flex}.mt-2{margin-top:1rem}.mb-2{margin-bottom:1rem}.wizard-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#00000080;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.wizard-modal{background:var(--card);border:1px solid var(--border);border-radius:24px;flex-direction:column;width:100%;max-width:600px;max-height:90vh;display:flex;overflow:hidden;box-shadow:0 25px 50px -12px #00000040}.wizard-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:20px 24px;display:flex}.wizard-progress{align-items:center;gap:12px;display:flex}.progress-node{background:var(--border);width:32px;height:32px;color:var(--muted);border-radius:50%;justify-content:center;align-items:center;font-size:1rem;transition:all .3s;display:flex}.progress-node.active{background:var(--primary);color:#fff;transform:scale(1.1)}.progress-node.completed{background:var(--primary-light);color:#fff}.btn-close{color:var(--muted);cursor:pointer;background:0 0;border:none;font-size:2rem;line-height:1}.wizard-body{flex:1;padding:32px;overflow-y:auto}.step-intro h1{margin-bottom:8px;font-size:1.5rem}.step-intro p{color:var(--muted);margin-bottom:24px;font-size:.95rem}.form-grid{flex-direction:column;gap:16px;display:flex}textarea{border:1.5px solid var(--border);background:var(--bg);width:100%;color:var(--text);resize:vertical;border-radius:12px;min-height:100px;padding:12px;font-family:inherit}.item-card{background:var(--bg);border:1px solid var(--border);border-radius:16px;margin-bottom:16px;padding:16px;position:relative}.item-header{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.btn-remove{color:#ef4444;cursor:pointer;background:0 0;border:none;font-size:.8rem;font-weight:600}.finish-view{text-align:center}.success-badge{color:#166534;background:#dcfce7;border-radius:20px;margin-bottom:16px;padding:8px 16px;font-weight:700;display:inline-block}.prompt-preview{color:#cbd5e1;text-align:left;background:#0f172a;border-radius:12px;margin-top:24px;padding:16px;font-family:monospace;font-size:.8rem;overflow:hidden}.template-selector{border-top:1px solid var(--border);margin-top:24px;padding-top:20px}.template-grid{scrollbar-width:none;gap:12px;padding:8px 4px 16px;display:flex;overflow-x:auto}.template-grid::-webkit-scrollbar{display:none}.template-btn{background:var(--card);border:2px solid var(--border);text-align:left;cursor:pointer;border-radius:12px;flex-direction:column;flex:0 0 160px;gap:4px;padding:12px;transition:all .2s;display:flex}.template-btn:hover{border-color:var(--primary-light);transform:translateY(-2px)}.template-btn.active{border-color:var(--primary);background:#0f766e0d;box-shadow:0 4px 12px #0f766e1a}.t-name{color:var(--text);white-space:nowrap;text-overflow:ellipsis;font-size:.8rem;font-weight:800;overflow:hidden}.t-desc{color:var(--muted);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:.7rem;line-height:1.2;display:-webkit-box;overflow:hidden}.wizard-footer{border-top:1px solid var(--border);justify-content:space-between;gap:12px;padding:20px 24px;display:flex}.animate-in{animation:.4s cubic-bezier(.16,1,.3,1) slideUp}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.animate-pop{animation:.3s cubic-bezier(.175,.885,.32,1.275) pop}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@media (width<=1200px){.sidebar-banner{display:none}}@media (width<=640px){.container{padding:12px}.card{padding:16px}.nav-tab{font-size:.85rem}}
