:root{--font-body: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;--font-quote: "Playfair Display", Georgia, serif;--bg-color: #0b0f17;--card-bg: rgba(18, 23, 34, .78);--card-border: rgba(255, 255, 255, .08);--text-primary: #f0f6fc;--text-secondary: #94a3b8;--text-muted: #64748b;--accent-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);--accent-glow: rgba(168, 85, 247, .35);--accent-purple: #a855f7;--accent-blue: #3b82f6;--accent-pink: #ec4899;--accent-green: #10b981;--btn-hover-scale: scale(1.03);--btn-active-scale: scale(.97);--radius-lg: 24px;--radius-md: 14px;--radius-sm: 8px;--transition: all .25s cubic-bezier(.16, 1, .3, 1)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-body);background-color:var(--bg-color);color:var(--text-primary);min-height:100vh;display:flex;flex-direction:column;align-items:center;overflow-x:hidden;position:relative;padding:calc(24px + env(safe-area-inset-top,0px)) 16px calc(36px + env(safe-area-inset-bottom,0px))}.blob-bg{position:fixed;border-radius:50%;filter:blur(120px);z-index:0;opacity:.3;pointer-events:none;will-change:transform;animation:float 22s infinite alternate ease-in-out}.blob-1{width:500px;height:500px;background:#6366f1;top:-120px;left:-120px}.blob-2{width:520px;height:520px;background:#ec4899;bottom:-150px;right:-100px;animation-duration:26s}.blob-3{width:380px;height:380px;background:#06b6d4;top:45%;left:55%;transform:translate(-50%,-50%);animation-duration:18s;opacity:.18}@keyframes float{0%{transform:translate(0) scale(1)}50%{transform:translate(40px,-30px) scale(1.08)}to{transform:translate(-30px,40px) scale(.95)}}@media (max-width: 768px){.blob-bg{animation:none!important;filter:blur(80px);opacity:.2}}@media (prefers-reduced-motion: reduce){.blob-bg{animation:none!important}}.top-nav{position:relative;z-index:10;max-width:820px;width:100%;display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:#12172299;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid var(--card-border);border-radius:999px;margin-bottom:24px}.nav-brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:1.05rem;letter-spacing:-.02em;color:#fff}.brand-sparkle{font-size:1.2rem;animation:pulse 2s infinite ease-in-out}.nav-actions{display:flex;align-items:center;gap:10px}.streak-badge{display:flex;align-items:center;gap:6px;background:#f59e0b1f;border:1px solid rgba(245,158,11,.3);padding:6px 12px;border-radius:999px;font-size:.8rem;font-weight:600;color:#fbbf24}.streak-flame{font-size:.95rem}.nav-btn{background:#ffffff0f;border:1px solid var(--card-border);color:var(--text-primary);padding:6px 14px;border-radius:999px;font-size:.82rem;font-weight:600;font-family:var(--font-body);display:inline-flex;align-items:center;gap:6px;cursor:pointer;transition:var(--transition)}.nav-btn:hover{background:#ffffff1f;border-color:#fff3}.fav-counter-badge{background:var(--accent-pink);color:#fff;font-size:.7rem;font-weight:700;padding:1px 6px;border-radius:999px}.cloud-status-badge{display:flex;align-items:center;gap:6px;background:#10b9811a;border:1px solid rgba(16,185,129,.25);padding:6px 12px;border-radius:999px;font-size:.75rem;color:#34d399;font-weight:500}.status-dot{width:7px;height:7px;border-radius:50%;background-color:#10b981;box-shadow:0 0 8px #10b981}.container{position:relative;z-index:1;max-width:680px;width:100%;display:flex;flex-direction:column;align-items:center;gap:22px}.header{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}.badge{display:inline-flex;align-items:center;background:#ffffff0f;border:1px solid rgba(255,255,255,.12);padding:5px 14px;border-radius:999px;font-size:.8rem;font-weight:600;color:#cbd5e1;letter-spacing:.5px}.header h1{font-size:clamp(1.8rem,4vw,2.35rem);font-weight:800;letter-spacing:-.025em;background:linear-gradient(180deg,#fff,#cbd5e1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1.25}.subtitle{color:var(--text-secondary);font-size:.95rem;max-width:530px;font-weight:500;letter-spacing:-.01em;line-height:1.58}.categories-bar{display:flex;align-items:center;gap:8px;width:100%;overflow-x:auto;padding:6px 2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.categories-bar::-webkit-scrollbar{display:none}.category-chip{background:#ffffff0d;border:1px solid rgba(255,255,255,.08);color:var(--text-secondary);padding:8px 16px;border-radius:999px;font-size:.82rem;font-weight:600;font-family:var(--font-body);display:inline-flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap;transition:var(--transition)}.category-chip:hover{background:#ffffff1a;color:#fff}.category-chip.active{background:var(--accent-gradient);color:#fff;border-color:transparent;box-shadow:0 4px 14px var(--accent-glow)}.quote-card{position:relative;width:100%;background:var(--card-bg);border:1px solid var(--card-border);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border-radius:var(--radius-lg);padding:38px 36px 26px;box-shadow:0 20px 45px #00000073,inset 0 1px #ffffff1a;display:flex;flex-direction:column;gap:22px;transition:transform .35s ease,box-shadow .35s ease}.quote-card:hover{box-shadow:0 25px 55px #0000008c,inset 0 1px #ffffff26}.quote-icon{position:absolute;top:24px;left:32px;color:#a855f733;pointer-events:none}.quote-content-wrapper{position:relative;z-index:2;min-height:140px;display:flex;flex-direction:column;justify-content:center}.quote-meta-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.quote-category{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;background:#a855f71f;padding:4px 12px;border-radius:999px;color:#c084fc;border:1px solid rgba(168,85,247,.3)}.dedup-tag{font-size:.72rem;color:var(--text-muted);display:inline-flex;align-items:center;gap:4px}.quote-text{font-family:var(--font-quote);font-size:clamp(1.35rem,2.5vw,1.75rem);line-height:1.48;color:#fff;margin-bottom:20px;font-style:italic;transition:opacity .25s ease,transform .25s ease}.quote-text.fade-out{opacity:0;transform:translateY(-8px)}.quote-text.fade-in{opacity:1;transform:translateY(0)}.quote-meta{display:flex;align-items:center;gap:12px}.divider{width:28px;height:2px;background:var(--accent-gradient);border-radius:2px}.quote-author{font-weight:700;font-size:1.02rem;color:#e2e8f0;letter-spacing:.2px}.card-actions{display:flex;align-items:center;gap:8px;border-top:1px solid rgba(255,255,255,.06);padding-top:16px;flex-wrap:wrap}.action-btn{background:#ffffff0d;border:1px solid rgba(255,255,255,.08);color:var(--text-secondary);border-radius:var(--radius-sm);padding:8px 12px;font-size:.82rem;font-family:var(--font-body);font-weight:600;display:inline-flex;align-items:center;gap:6px;cursor:pointer;transition:var(--transition)}.action-btn:hover{background:#ffffff1f;color:#fff;border-color:#fff3;transform:translateY(-2px)}.action-btn:active{transform:translateY(0)}.fav-btn.active{background:#ec489926;border-color:#ec489966;color:#f472b6}.fav-btn.active .heart-icon{fill:#f472b6;stroke:#f472b6;animation:heartPop .3s ease-out}@keyframes heartPop{0%{transform:scale(1)}50%{transform:scale(1.35)}to{transform:scale(1)}}.story-btn{background:#a855f71a;border-color:#a855f740;color:#c084fc}.story-btn:hover{background:#a855f733;color:#fff}.whatsapp-btn:hover{color:#22c55e;border-color:#22c55e4d}.main-cta-container{display:flex;flex-direction:column;align-items:center;gap:8px}.btn-primary{background:var(--accent-gradient);color:#fff;border:none;border-radius:999px;padding:16px 36px;font-size:1.1rem;font-weight:700;font-family:var(--font-body);display:inline-flex;align-items:center;gap:12px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;box-shadow:0 8px 24px var(--accent-glow);transition:var(--transition);position:relative;overflow:hidden}.btn-primary:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:.5s}.btn-primary:hover:before{left:100%}.btn-primary:hover{transform:var(--btn-hover-scale);box-shadow:0 12px 32px #a855f799}.btn-primary:active{transform:var(--btn-active-scale)}.btn-icon{font-size:1.25rem;animation:pulse 2s infinite ease-in-out}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.shortcut-hint{font-size:.8rem;color:var(--text-muted)}kbd{background:#ffffff1a;padding:2px 6px;border-radius:4px;font-family:monospace;font-size:.75rem;border:1px solid rgba(255,255,255,.15)}.footer{text-align:center;color:var(--text-muted);font-size:.85rem}.footer strong{color:var(--text-secondary)}.modal-overlay,.drawer-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000bf;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:100;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s ease;padding:16px}.modal-overlay.open,.drawer-overlay.open{opacity:1;pointer-events:auto}.modal-card{background:#131924;border:1px solid var(--card-border);border-radius:var(--radius-lg);max-width:480px;width:100%;padding:24px;display:flex;flex-direction:column;gap:16px;box-shadow:0 25px 60px #0009;transform:translateY(20px);transition:transform .3s cubic-bezier(.16,1,.3,1)}.modal-overlay.open .modal-card{transform:translateY(0)}.modal-header{display:flex;align-items:center;justify-content:space-between}.modal-header h3{font-size:1.1rem;font-weight:700}.modal-close{background:transparent;border:none;color:var(--text-muted);font-size:1.6rem;line-height:1;cursor:pointer;padding:4px;transition:color .2s}.modal-close:hover{color:#fff}.canvas-preview-wrapper{width:100%;max-height:380px;display:flex;align-items:center;justify-content:center;background:#090d14;border-radius:var(--radius-md);padding:12px;overflow:hidden;border:1px solid rgba(255,255,255,.05)}#storyCanvas{max-width:100%;max-height:350px;width:auto;height:auto;border-radius:12px;box-shadow:0 10px 30px #00000080}.modal-palette-selector{display:flex;align-items:center;gap:8px;justify-content:center}.palette-title{font-size:.8rem;color:var(--text-muted);font-weight:600}.palette-btn{background:#ffffff0f;border:1px solid var(--card-border);color:var(--text-secondary);border-radius:999px;padding:5px 12px;font-size:.78rem;font-weight:600;cursor:pointer;transition:var(--transition)}.palette-btn.active{background:#fff3;color:#fff;border-color:#fff6}.modal-actions{display:flex;justify-content:center}.modal-download-btn{width:100%;justify-content:center;padding:13px 20px;font-size:.95rem}.drawer-content{position:fixed;top:0;right:0;width:100%;max-width:400px;height:100%;background:#111622;border-left:1px solid var(--card-border);display:flex;flex-direction:column;box-shadow:-10px 0 40px #00000080;transform:translate(100%);transition:transform .3s cubic-bezier(.16,1,.3,1);padding:24px}.drawer-overlay.open .drawer-content{transform:translate(0)}.drawer-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:16px;margin-bottom:16px}.drawer-title{display:flex;align-items:center;gap:8px}.drawer-title h3{font-size:1.1rem;font-weight:700}.drawer-body{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding-right:4px}.favorite-item{background:#ffffff0a;border:1px solid rgba(255,255,255,.07);border-radius:var(--radius-md);padding:16px;display:flex;flex-direction:column;gap:8px;transition:var(--transition)}.favorite-item:hover{background:#ffffff12;border-color:#ffffff26}.fav-item-text{font-family:var(--font-quote);font-size:.95rem;font-style:italic;color:#fff;line-height:1.4}.fav-item-footer{display:flex;align-items:center;justify-content:space-between;font-size:.78rem;color:var(--text-muted)}.fav-item-author{font-weight:600;color:var(--text-secondary)}.fav-item-actions{display:flex;gap:6px}.fav-action-btn{background:transparent;border:none;color:var(--text-muted);cursor:pointer;padding:4px;border-radius:4px;transition:color .2s}.fav-action-btn:hover{color:#fff}.fav-action-btn.delete:hover{color:#ef4444}.empty-favorites{text-align:center;color:var(--text-muted);font-size:.9rem;margin-top:40px;line-height:1.6}.toast{position:fixed;bottom:30px;left:50%;transform:translate(-50%) translateY(100px);background:#1e2533;color:#f8fafc;border:1px solid rgba(255,255,255,.15);box-shadow:0 10px 30px #00000080;padding:12px 24px;border-radius:999px;font-size:.88rem;font-weight:600;opacity:0;pointer-events:none;transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .3s ease;z-index:1000}.toast.show{opacity:1;transform:translate(-50%) translateY(0)}@media (max-width: 640px){body{padding:12px 12px 32px}.top-nav{padding:10px 14px;border-radius:var(--radius-md)}.streak-badge .streak-label,.cloud-status-badge{display:none}.quote-card{padding:28px 20px 20px}.card-actions{justify-content:center}.btn-primary{width:100%;justify-content:center;padding:15px 24px}}.pwa-install-btn{background:#6366f11f;border:1px solid rgba(99,102,241,.35);color:#a5b4fc;padding:8px 18px;border-radius:999px;font-size:.82rem;font-weight:700;font-family:var(--font-body);display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:var(--transition)}.pwa-install-btn:hover{background:#6366f138;border-color:#6366f18c;color:#fff;transform:translateY(-2px);box-shadow:0 4px 16px #6366f14d}