:root{--font-primary:"Inter", system-ui, -apple-system, sans-serif;--font-display:"Outfit", sans-serif;--bg-dark:#06070a;--bg-card:#0c0e14d9;--bg-card-hover:#12151eeb;--border-card:#ffffff26;--accent-cyan:#fff;--accent-light-blue:#f8fafc;--accent-glow:#ffffff80;--accent-gradient:linear-gradient(135deg, #fff 0%, #e2e8f0 100%);--star-gold:#ffd166;--text-main:#fff;--text-muted:#ffffffb8;--text-subtle:#ffffff73;--radius-lg:20px;--radius-md:12px;--radius-sm:8px;--shadow-glow:0 4px 20px #ffffff40;--shadow-card:0 16px 40px #0009}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-primary);color:var(--text-main);background-color:#030511;background-image:url(/bg-fix.png);background-position:50%;background-repeat:no-repeat;background-size:100% 100%;background-attachment:fixed;min-height:100vh;line-height:1.5;position:relative;overflow-x:hidden}.stars-bg{opacity:.5;z-index:-2;background-image:radial-gradient(2px 2px at 20px 30px,#fff,#0000),radial-gradient(2px 2px at 40px 70px,#fffc,#0000),radial-gradient(2px 2px at 90px 40px,#ffffffb3,#0000),radial-gradient(2px 2px at 160px 120px,#fff,#0000),radial-gradient(2px 2px at 230px 190px,#ffffffb3,#0000),radial-gradient(2px 2px at 310px 80px,#fffc,#0000),radial-gradient(2px 2px at 450px 220px,#fff,#0000),radial-gradient(2px 2px at 580px 140px,#ffffffe6,#0000);background-repeat:repeat;background-size:600px 300px;width:100vw;height:100vh;animation:6s ease-in-out infinite alternate starPulse;position:fixed;top:0;left:0}@keyframes starPulse{0%{opacity:.3;transform:scale(1)}to{opacity:.7;transform:scale(1.02)}}.glow-orb{filter:blur(120px);z-index:-1;pointer-events:none;border-radius:50%;position:fixed}.orb-1{background:radial-gradient(circle,#ffffff0d 0%,#0000 70%);width:450px;height:450px;top:-100px;left:-100px}.orb-2{background:radial-gradient(circle,#ffffff0a 0%,#0000 70%);width:550px;height:550px;bottom:-150px;right:-150px}.app-container{flex-direction:column;gap:24px;max-width:1050px;margin:0 auto;padding:30px 16px 40px;display:flex}.app-header{justify-content:center;align-items:center;width:100%;padding:6px 0 2px;display:flex}.header-logo{object-fit:contain;filter:drop-shadow(0 4px 18px #00000073);-webkit-user-select:none;user-select:none;-webkit-user-drag:none;width:100%;max-width:580px;height:auto}.app-footer{justify-content:center;align-items:center;width:100%;margin-top:6px;padding:12px 0 8px;display:flex}.footer-logo{object-fit:contain;filter:drop-shadow(0 6px 24px #0009);-webkit-user-select:none;user-select:none;-webkit-user-drag:none;width:100%;max-width:720px;height:auto}.header{text-align:center;flex-direction:column;align-items:center;gap:8px;padding:16px 8px;display:flex}.header-badge-wrapper{justify-content:center;align-items:center;margin-bottom:2px;display:flex}.header-badge-img{mix-blend-mode:screen;filter:drop-shadow(0 0 12px #ffffffbf)drop-shadow(0 0 20px #00b4d880);width:auto;max-height:90px;transition:transform .3s,filter .3s}.header-badge-img:hover{filter:drop-shadow(0 0 20px #fffffff2)drop-shadow(0 0 30px #00b4d8cc);transform:scale(1.08)}.title{font-family:var(--font-display);color:#fff;text-shadow:0 4px 20px #003264cc,0 0 30px #00b4d899;letter-spacing:-.5px;font-size:clamp(2rem,5vw,3.2rem);font-weight:800}.subtitle{color:#fff;text-shadow:0 2px 10px #001e3ce6;max-width:550px;font-size:1rem}.hashtag-pill{background:var(--accent-gradient);color:#031926;font-weight:800;font-family:var(--font-display);box-shadow:var(--shadow-glow);border-radius:20px;margin-top:4px;padding:4px 14px;font-size:.95rem;display:inline-block}.workspace{grid-template-columns:1fr 1fr;align-items:start;gap:24px;display:grid}@media (width<=900px){.workspace{grid-template-columns:1fr}}.card{background:var(--bg-card);border:1px solid var(--border-card);-webkit-backdrop-filter:blur(16px);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);flex-direction:column;gap:16px;padding:18px 22px;display:flex}.canvas-card{align-items:center}.canvas-header{justify-content:space-between;align-items:center;width:100%;display:flex}.card-title{font-family:var(--font-display);color:var(--text-main);font-size:1.2rem;font-weight:700}.status-indicator{color:var(--text-muted);align-items:center;gap:6px;font-size:.85rem;display:flex}.status-dot{background-color:#22c55e;border-radius:50%;width:8px;height:8px;box-shadow:0 0 10px #22c55e99}.canvas-wrapper{aspect-ratio:1;border-radius:var(--radius-md);cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;background:#08090e;border:1px solid #fff3;width:100%;max-width:380px;position:relative;overflow:hidden;box-shadow:0 12px 36px #000000a6}.canvas-wrapper:active{cursor:grabbing}#twibbonCanvas{width:100%;height:100%;display:block}.upload-dropzone{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);text-align:center;border-radius:var(--radius-md);z-index:10;background:#0a0c12e0;border:1.5px dashed #ffffff4d;justify-content:center;align-items:center;padding:24px;transition:all .3s;display:flex;position:absolute;inset:0}.upload-dropzone.dragover{background:#ffffff1f;border-color:#fff}.dropzone-content{flex-direction:column;align-items:center;gap:12px;display:flex}.dropzone-icon{filter:drop-shadow(0 0 12px #ffffff59);font-size:3rem}.dropzone-content h3{font-family:var(--font-display);color:var(--text-main);font-size:1.25rem}.dropzone-content p{color:var(--text-muted);font-size:.85rem}.canvas-overlay-hint{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--text-muted);pointer-events:none;opacity:0;background:#0c0e14d9;border:1px solid #ffffff2e;border-radius:20px;padding:6px 14px;font-size:.8rem;transition:opacity .3s;position:absolute;bottom:12px;left:50%;transform:translate(-50%)}.canvas-wrapper.has-photo:hover .canvas-overlay-hint{opacity:1}.canvas-actions{justify-content:center;gap:12px;width:100%;max-width:380px;display:flex}.tabs{border-radius:var(--radius-md);background:#080a0fa6;border:1px solid #ffffff1f;padding:4px;display:flex}.tab-btn{color:var(--text-muted);font-family:var(--font-display);border-radius:var(--radius-sm);cursor:pointer;background:0 0;border:none;flex:1;justify-content:center;align-items:center;gap:8px;padding:10px 16px;font-size:.95rem;font-weight:600;transition:all .2s;display:flex}.tab-btn:hover{color:var(--text-main)}.tab-btn.active{color:#090b10;background:#fff;box-shadow:0 4px 16px #fff3}.tab-content{flex-direction:column;gap:18px;display:none}.tab-content.active{display:flex}.control-group{flex-direction:column;gap:8px;display:flex}.control-header{justify-content:space-between;align-items:center;display:flex}label{color:var(--text-muted);font-size:.9rem;font-weight:600}.control-value{font-family:var(--font-display);color:var(--accent-light-blue);font-size:.9rem;font-weight:700}.slider-row{align-items:center;gap:12px;display:flex}.slider-icon{opacity:.7;font-size:.9rem}.slider{appearance:none;background:#ffffff26;border-radius:4px;outline:none;flex:1;height:8px}.slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#fff;border-radius:50%;width:20px;height:20px;transition:transform .15s;box-shadow:0 0 12px #ffffffb3}.slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.nudge-pad{grid-template-columns:repeat(3,44px);justify-content:center;gap:6px;margin-top:4px;display:grid}.btn-nudge{width:44px;height:44px;color:var(--text-main);border-radius:var(--radius-sm);cursor:pointer;background:#ffffff14;border:1px solid #ffffff26;justify-content:center;align-items:center;font-size:.9rem;transition:all .15s;display:flex}.btn-nudge:hover{background:#ffffff26;border-color:#fff6}.btn-nudge-center{color:#fff;background:#ffffff1f;border-color:#ffffff4d}.button-row{gap:10px;display:flex}.btn{border-radius:var(--radius-md);font-family:var(--font-display);cursor:pointer;border:none;justify-content:center;align-items:center;gap:8px;padding:12px 20px;font-size:.95rem;font-weight:700;transition:all .2s;display:inline-flex}.btn-primary{color:#0a0c10;background:#fff;box-shadow:0 4px 18px #ffffff40}.btn-primary:hover{background:#f8fafc;transform:translateY(-2px);box-shadow:0 6px 25px #ffffff73}.btn-secondary{color:#fff;background:#ffffff14;border:1px solid #fff3}.btn-secondary:hover{color:#fff;background:#ffffff29;border-color:#ffffff73}.btn-ghost{color:var(--text-muted);background:0 0;border:1px solid #ffffff26}.btn-ghost:hover{color:var(--text-main);background:#ffffff1a}.btn-toggle{color:var(--text-muted);background:#ffffff0f;border:1px solid #ffffff26;flex:1;font-size:.85rem}.btn-toggle.active{color:#fff;background:#ffffff2e;border-color:#ffffff73;font-weight:700}.btn-mini{color:var(--text-muted);border-radius:var(--radius-sm);cursor:pointer;background:#ffffff1a;border:none;padding:4px 10px;font-size:.8rem}.btn-cta{color:#0a0c10;background:#fff;border:1px solid #fff;width:100%;margin-top:8px;padding:16px;font-size:1.05rem;font-weight:800;box-shadow:0 4px 20px #ffffff40}.btn-cta:hover{background:#f1f5f9;transform:translateY(-2px);box-shadow:0 6px 30px #ffffff73}.download-box{border-top:1px solid #ffffff1a;flex-direction:column;gap:12px;margin-top:10px;padding-top:16px;display:flex}.quality-select{justify-content:space-between;align-items:center;display:flex}.select-input{color:var(--text-main);border-radius:var(--radius-sm);font-family:var(--font-primary);background:#0a0c12d9;border:1px solid #ffffff2e;outline:none;padding:8px 12px;font-size:.85rem}.copy-box{gap:8px;display:flex}.copy-box input{color:#fff;border-radius:var(--radius-sm);font-family:var(--font-primary);background:#0a0c12d9;border:1px solid #ffffff2e;outline:none;flex:1;padding:10px 14px;font-size:.9rem}.textarea-input{width:100%;color:var(--text-main);border-radius:var(--radius-sm);font-family:var(--font-primary);resize:vertical;background:#0a0c12d9;border:1px solid #ffffff2e;outline:none;padding:12px;font-size:.9rem}.share-btn{border-radius:var(--radius-md);font-family:var(--font-display);color:#fff;justify-content:center;align-items:center;gap:10px;width:100%;padding:14px 20px;font-size:.95rem;font-weight:700;text-decoration:none;transition:all .2s;display:flex}.share-btn.twitter{background:#ffffff0f;border:1px solid #ffffff26;box-shadow:0 4px 15px #0006}.share-btn.twitter:hover{background:#ffffff1f;border-color:#ffffff59;transform:translateY(-2px);box-shadow:0 6px 20px #00000080}.share-btn:hover{opacity:.9}.btn-block{width:100%}.btn-sm{padding:8px 14px;font-size:.85rem}.toast{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;font-family:var(--font-display);opacity:0;z-index:100;pointer-events:none;background:#0f1118f2;border:1px solid #ffffff40;border-radius:30px;padding:12px 24px;font-weight:700;transition:all .3s;position:fixed;bottom:24px;left:50%;transform:translate(-50%)translateY(100px);box-shadow:0 10px 30px #0009}.toast.show{opacity:1;transform:translate(-50%)translateY(0)}.footer{text-align:center;color:#fff;-webkit-backdrop-filter:blur(12px);text-shadow:0 2px 8px #0009;background:#081b2ed9;border:1px solid #ffffff59;border-radius:30px;justify-content:center;align-items:center;margin:12px auto 0;padding:10px 24px;font-size:.95rem;font-weight:500;display:flex;box-shadow:0 8px 25px #00000059}.footer strong{color:var(--accent-light-blue);font-weight:700}@media (width<=768px){body{background-color:#030511;background-position:50%;background-size:cover;background-attachment:scroll}.app-container{gap:16px;max-width:100%;padding:20px 14px 32px}.header-logo{max-width:min(92vw,360px)}.footer-logo{max-width:min(94vw,390px)}.workspace{grid-template-columns:1fr;gap:14px}.card{border-radius:var(--radius-md);gap:14px;padding:16px}.card-title{font-size:1.05rem}.canvas-wrapper{max-width:min(74vw,290px);margin:0 auto}.canvas-actions{gap:10px;max-width:min(74vw,290px)}.canvas-actions .btn{flex:1;padding:9px 12px;font-size:.85rem}.control-group{gap:6px}label,.control-value{font-size:.82rem}.slider{height:6px}.slider::-webkit-slider-thumb{width:22px;height:22px}.nudge-pad{grid-template-columns:repeat(3,38px);gap:5px;margin-top:2px}.btn-nudge{width:38px;height:38px;font-size:.8rem}.button-row{gap:8px}.btn-toggle{padding:10px 12px;font-size:.82rem}.download-box{gap:10px;margin-top:4px;padding-top:12px}.quality-select{flex-direction:row;gap:8px}.select-input{padding:7px 10px;font-size:.8rem}.btn-cta{margin-top:4px;padding:13px;font-size:.95rem}.upload-dropzone{padding:16px}.dropzone-icon{font-size:2.2rem}.dropzone-content h3{font-size:1.05rem}.dropzone-content p{font-size:.75rem}.dropzone-content .btn{padding:10px 16px;font-size:.88rem}.canvas-overlay-hint{padding:4px 10px;font-size:.75rem;bottom:8px}}@media (width<=360px){.app-container{padding:16px 10px 24px}.header-logo{max-width:290px}.footer-logo{max-width:310px}.card{padding:14px 12px}.canvas-wrapper,.canvas-actions{max-width:260px}}