@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700;800&display=swap";:root{--bg-primary:#0a0010;--bg-secondary:#160525;--accent-rose:#ff4d6d;--accent-rose-soft:#ff758f;--accent-rose-glow:#ff4d6d66;--accent-gold:gold;--accent-lavender:#c77dff;--accent-lavender-glow:#c77dff66;--text-primary:#fff;--text-secondary:#ffccd5;--text-muted:#a48ba8;--glass-bg:#16052599;--glass-border:#ff758f26;--glass-glow:#ff4d6d0d;--gradient-romance:linear-gradient(135deg, var(--accent-rose) 0%, var(--accent-lavender) 100%);--font-display:"Outfit", sans-serif;--font-body:"Inter", sans-serif;--transition-smooth:all .3s cubic-bezier(.25, .8, .25, 1);--border-radius-lg:24px;--border-radius-md:16px;--border-radius-sm:12px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;scrollbar-width:thin;scrollbar-color:var(--accent-lavender) var(--bg-primary);margin:0;padding:0}body{font-family:var(--font-body);background-color:var(--bg-primary);background-image:radial-gradient(circle at 10% 20%, var(--accent-rose-glow) 0%, transparent 40%), radial-gradient(circle at 90% 80%, var(--accent-lavender-glow) 0%, transparent 50%);color:var(--text-primary);touch-action:manipulation;justify-content:center;min-height:100dvh;transition:background-color .5s,background-image .5s,color .3s;display:flex;overflow-x:hidden}#app{width:100%;max-width:480px;min-height:100dvh;padding-bottom:calc(84px + env(safe-area-inset-bottom,0px));background-color:#0a0010d9;border-left:1px solid #ff758f0d;border-right:1px solid #ff758f0d;flex-direction:column;display:flex;position:relative;box-shadow:0 0 50px #000c}#particles-canvas{z-index:0;pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.content-wrapper{padding:24px;padding-top:calc(24px + env(safe-area-inset-top,0px));z-index:1;opacity:0;flex-direction:column;flex:1;justify-content:flex-start;animation:.4s cubic-bezier(.25,.8,.25,1) forwards pageEnter;display:flex;transform:translateY(15px)}@keyframes pageEnter{to{opacity:1;transform:translateY(0)}}h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.02em;font-weight:700}h1{background:var(--gradient-romance);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:8px;font-size:2rem;line-height:1.2}h2{color:var(--text-primary);margin-bottom:16px;font-size:1.5rem}p{color:var(--text-secondary);font-size:.95rem;line-height:1.5}.text-gradient{background:var(--gradient-romance);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.glass-card{background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:var(--border-radius-lg);box-shadow:0 8px 32px 0 #0000005e, inset 0 0 12px var(--glass-glow);margin-bottom:20px;padding:24px;position:relative;overflow:hidden}.glass-card:before{content:"";background:linear-gradient(90deg,#0000,#ffffff08,#0000);width:50%;height:100%;animation:6s infinite shine;position:absolute;top:0;left:-100%;transform:skew(-20deg)}@keyframes shine{0%{left:-100%}20%{left:200%}to{left:200%}}.btn{border-radius:var(--border-radius-md);font-family:var(--font-display);cursor:pointer;transition:var(--transition-smooth);border:none;justify-content:center;align-items:center;gap:8px;width:100%;padding:16px 24px;font-size:1rem;font-weight:600;text-decoration:none;display:inline-flex;position:relative;overflow:hidden}.btn-primary{background:var(--gradient-romance);color:var(--text-primary);box-shadow:0 8px 24px var(--accent-rose-glow)}.btn-primary:active{box-shadow:0 4px 12px var(--accent-rose-glow);transform:scale(.98)}.btn-primary:disabled{background:var(--text-muted);box-shadow:none;cursor:not-allowed;opacity:.6}.btn-secondary{color:var(--accent-rose);border:1px solid var(--glass-border);background:#ff4d6d0d}.btn-secondary:active{background:#ff4d6d1a;transform:scale(.98)}.form-group{flex-direction:column;gap:8px;margin-bottom:20px;display:flex}.form-label{font-family:var(--font-display);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;padding-left:4px;font-size:.9rem;font-weight:500}.form-input{border:1px solid var(--glass-border);border-radius:var(--border-radius-md);color:var(--text-primary);font-family:var(--font-body);transition:var(--transition-smooth);background:#16052566;outline:none;width:100%;padding:16px;font-size:1rem}.form-input:focus{border-color:var(--accent-rose);box-shadow:0 0 12px var(--accent-rose-glow);background:#160525b3}.form-input::placeholder{color:var(--text-muted)}.navbar{width:100%;max-width:480px;height:calc(80px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);-webkit-backdrop-filter:blur(25px);border-top:1px solid var(--glass-border);z-index:100;background:#0a0010f2;justify-content:space-around;align-items:center;display:flex;position:fixed;bottom:0;left:50%;transform:translate(-50%)}.nav-item{color:var(--text-muted);transition:var(--transition-smooth);cursor:pointer;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:4px;height:80px;font-size:.75rem;font-weight:500;text-decoration:none;display:flex}.nav-item svg{stroke:currentColor;stroke-width:2px;fill:none;width:24px;height:24px;transition:var(--transition-smooth)}.nav-item.active{color:var(--accent-rose);text-shadow:0 0 8px var(--accent-rose-glow)}.nav-item.nav-logout{color:var(--text-muted);cursor:pointer;background:0 0;border:none}.nav-item.nav-logout:hover,.nav-item.nav-logout:active{color:var(--accent-rose)}.nav-item.active svg{stroke:var(--accent-rose);filter:drop-shadow(0 0 5px var(--accent-rose));transform:translateY(-2px)}.activity-list-container{flex-direction:column;gap:12px;margin-top:16px;margin-bottom:24px;display:flex}.activity-item{border:1px solid var(--glass-border);border-radius:var(--border-radius-sm);background:#ff4d6d0d;justify-content:space-between;align-items:center;padding:14px 18px;animation:.3s cubic-bezier(.25,.8,.25,1) forwards slideIn;display:flex}@keyframes slideIn{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}.activity-text{font-size:.95rem;font-weight:500}.activity-delete{color:var(--text-muted);cursor:pointer;transition:var(--transition-smooth);background:0 0;border:none;justify-content:center;align-items:center;display:flex}.activity-delete:active{color:var(--accent-rose);transform:scale(.9)}.activity-delete svg{stroke:currentColor;fill:none;stroke-width:2px;width:20px;height:20px}.room-code-display{text-align:center;letter-spacing:.15em;border:1px dashed var(--accent-rose);border-radius:var(--border-radius-md);cursor:pointer;transition:var(--transition-smooth);color:var(--accent-rose);text-shadow:0 0 10px var(--accent-rose-glow);background:#ff4d6d0d;margin:16px 0;padding:16px;font-family:Courier New,Courier,monospace;font-size:2.2rem;font-weight:800}.room-code-display:active{background:#ff4d6d1a;transform:scale(.98)}.toast-container{top:calc(24px + env(safe-area-inset-top,0px));z-index:1000;flex-direction:column;gap:8px;width:calc(100% - 48px);max-width:380px;display:flex;position:fixed;left:50%;transform:translate(-50%)}.toast{-webkit-backdrop-filter:blur(10px);border-radius:var(--border-radius-sm);color:var(--text-primary);border-left:4px solid var(--accent-lavender);background:#160525f2;align-items:center;gap:12px;padding:14px 18px;font-size:.9rem;animation:.3s cubic-bezier(.25,.8,.25,1) forwards toastEnter;display:flex;box-shadow:0 8px 24px #00000080}.toast.success{border-left-color:#00e676}.toast.error{border-left-color:var(--accent-rose)}.toast.warning{border-left-color:var(--accent-gold)}@keyframes toastEnter{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.toast.leave{animation:.3s cubic-bezier(.25,.8,.25,1) forwards toastLeave}@keyframes toastLeave{to{opacity:0;transform:translateY(-20px)scale(.9)}}.bottom-sheet-overlay{-webkit-backdrop-filter:blur(4px);z-index:1000;opacity:0;pointer-events:none;background:#0a0010a6;transition:opacity .35s;position:fixed;inset:0}.bottom-sheet-overlay.active{opacity:1;pointer-events:all}.bottom-sheet{background:var(--bg-secondary);border-top:1px solid var(--glass-border);width:100%;max-width:480px;padding:24px 24px calc(24px + env(safe-area-inset-bottom,12px));z-index:1001;text-align:center;border-radius:24px 24px 0 0;margin:0 auto;transition:transform .35s cubic-bezier(.175,.885,.32,1.115);position:fixed;bottom:0;left:0;right:0;transform:translateY(100%);box-shadow:0 -10px 40px #000000b3}.bottom-sheet-overlay.active .bottom-sheet{transform:translateY(0)}.modal-overlay{-webkit-backdrop-filter:blur(10px);z-index:999;opacity:0;pointer-events:none;background:#0a0010bf;justify-content:center;align-items:flex-end;width:100%;height:100%;transition:opacity .3s;display:flex;position:fixed;top:0;left:0}.modal-overlay.active{opacity:1;pointer-events:all}.modal-content{background:var(--bg-secondary);border:1px solid var(--glass-border);border-radius:var(--border-radius-lg) var(--border-radius-lg) 0 0;width:100%;max-width:480px;padding:32px 24px calc(48px + env(safe-area-inset-bottom,0px));text-align:center;border-bottom:none;flex-direction:column;align-items:center;transition:transform .3s cubic-bezier(.25,.8,.25,1);display:flex;position:relative;transform:translateY(100%);box-shadow:0 -8px 32px #000000b3}.modal-content:before{content:"";background:#fff3;border-radius:2px;width:40px;height:4px;position:absolute;top:12px;left:50%;transform:translate(-50%)}.modal-overlay.active .modal-content{transform:translateY(0)}.modal-emoji{margin-bottom:12px;font-size:3.5rem;animation:1s infinite alternate bounce}@keyframes bounce{0%{transform:translateY(0)}to{transform:translateY(-10px)}}.legend-container{justify-content:center;gap:16px;margin-bottom:24px;display:flex}.legend-chip{color:var(--text-secondary);align-items:center;gap:8px;font-size:.85rem;font-weight:500;display:flex}.legend-dot{border-radius:50%;width:12px;height:12px}.legend-me{background:linear-gradient(135deg, var(--accent-rose) 0%, #ff8a80 100%)}.legend-partner{background:linear-gradient(135deg, var(--accent-lavender) 0%, var(--accent-rose-soft) 100%)}.ready-status-container{flex-direction:column;gap:12px;margin:16px 0;display:flex}.partner-status-card{border:1px solid var(--glass-border);border-radius:var(--border-radius-md);background:#ffffff05;justify-content:space-between;align-items:center;padding:16px;display:flex}.status-badge{border-radius:20px;padding:6px 12px;font-size:.8rem;font-weight:600}.status-badge.ready{color:#00e676;background:#00e67626;border:1px solid #00e6764d}.status-badge.waiting{color:#ff8a80;background:#ff8a8026;border:1px solid #ff8a804d}.wheel-wrapper{aspect-ratio:1;justify-content:center;align-items:center;width:100%;margin:20px 0;display:flex;position:relative}#wheel-canvas{border-radius:50%;max-width:100%;height:auto;box-shadow:0 0 30px #ff4d6d33,inset 0 0 20px #ffffff1a}.wheel-pointer{border-left:16px solid #0000;border-right:16px solid #0000;border-top:28px solid var(--accent-gold);z-index:5;filter:drop-shadow(0 4px 8px #ffd70080);width:0;height:0;animation:.5s infinite alternate pointerWobble;position:absolute;top:-10px;left:50%;transform:translate(-50%)}@keyframes pointerWobble{0%{transform:translate(-50%)translateY(0)}to{transform:translate(-50%)translateY(3px)}}.spin-center-button{background:var(--bg-secondary);border:3px solid var(--accent-rose);width:76px;height:76px;box-shadow:0 0 20px var(--accent-rose-glow), inset 0 0 10px var(--accent-rose-glow);color:var(--text-primary);font-family:var(--font-display);letter-spacing:.05em;cursor:pointer;z-index:6;-webkit-user-select:none;user-select:none;transition:var(--transition-smooth);border-radius:50%;justify-content:center;align-items:center;font-size:1rem;font-weight:800;display:flex;position:absolute}.spin-center-button:active{box-shadow:0 0 10px var(--accent-rose-glow);transform:scale(.9)}.welcome-header{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.logout-btn{color:var(--text-secondary);cursor:pointer;transition:var(--transition-smooth);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:8px;display:flex}.logout-btn:active{background:#ffffff1a}.logout-btn svg{stroke:currentColor;fill:none;stroke-width:2px;width:22px;height:22px}.heart-float{pointer-events:none;color:var(--accent-rose);z-index:100;font-size:1.5rem;animation:1.5s ease-out forwards floatHeart;position:absolute}@keyframes floatHeart{0%{opacity:1;transform:translate(0)scale(.5)}to{transform:translate(var(--x), var(--y)) scale(1.2) rotate(var(--r));opacity:0}}@media (width>=768px){body{background-attachment:fixed;align-items:center;padding:40px 20px}#app{border-radius:var(--border-radius-lg);width:100%;max-width:1000px;height:auto;min-height:80vh;padding-top:100px;padding-bottom:40px;overflow:hidden;box-shadow:0 20px 80px #000000b3}.content-wrapper{width:100%;max-width:680px;margin:0 auto;padding:16px 24px}.navbar{border-top:none;border-bottom:1px solid var(--glass-border);border-radius:var(--border-radius-lg) var(--border-radius-lg) 0 0;justify-content:center;gap:40px;max-width:none;height:80px;padding:0;position:absolute;top:0;bottom:auto;left:0;transform:none}.nav-item{flex:none;padding:0 20px}.modal-overlay{align-items:center;padding:24px}.modal-content{border-radius:var(--border-radius-lg);border-bottom:1px solid var(--glass-border);opacity:0;max-width:520px;padding:40px 32px;transform:scale(.9)translateY(20px)}.modal-overlay.active .modal-content{opacity:1;transform:scale(1)translateY(0)}.wheel-wrapper{max-width:420px;margin:24px auto}}body.theme-lavender{--bg-primary:#0a0010;--bg-secondary:#160525;--accent-rose:#ff4d6d;--accent-rose-soft:#ff758f;--accent-rose-glow:#ff4d6d26;--accent-lavender:#c77dff;--accent-lavender-glow:#c77dff33;--text-secondary:#ffccd5;--text-muted:#a48ba8;--glass-bg:#16052599;--glass-border:#ff758f26;--glass-glow:#ff4d6d0d}body.theme-mint{--bg-primary:#020f08;--bg-secondary:#052213;--accent-rose:#00b0ff;--accent-rose-soft:#4fc3f7;--accent-rose-glow:#00b0ff26;--accent-lavender:#00e676;--accent-lavender-glow:#00e67633;--text-secondary:#c8e6c9;--text-muted:#81c784;--glass-bg:#05221399;--glass-border:#00e67626;--glass-glow:#00e6760d}body.theme-peach{--bg-primary:#120502;--bg-secondary:#270f07;--accent-rose:#ff7043;--accent-rose-soft:#ff8a65;--accent-rose-glow:#ff704326;--accent-lavender:gold;--accent-lavender-glow:#ffd70033;--text-secondary:#ffe0b2;--text-muted:#ffb74d;--glass-bg:#270f0799;--glass-border:#ff704326;--glass-glow:#ff70430d}body.theme-ocean{--bg-primary:#000814;--bg-secondary:#001d3d;--accent-rose:#00b4d8;--accent-rose-soft:#90e0ef;--accent-rose-glow:#00b4d826;--accent-lavender:#7209b7;--accent-lavender-glow:#7209b733;--text-secondary:#caf0f8;--text-muted:#90e0ef;--glass-bg:#001d3d99;--glass-border:#00b4d826;--glass-glow:#00b4d80d}.theme-selector-container{justify-content:center;gap:16px;margin:16px 0;display:flex}.theme-btn{cursor:pointer;width:40px;height:40px;transition:var(--transition-smooth);background:0 0;border:3px solid #ffffff1a;border-radius:50%;position:relative}.theme-btn:hover{transform:scale(1.1)}.theme-btn.active{border-color:#fff;transform:scale(1.15);box-shadow:0 0 15px}.theme-btn:after{content:"";border-radius:50%;position:absolute;inset:2px}.theme-btn-lavender:after{color:#ff4d6d;background:linear-gradient(135deg,#ff4d6d,#c77dff)}.theme-btn-mint:after{color:#00e676;background:linear-gradient(135deg,#00b0ff,#00e676)}.theme-btn-peach:after{color:#ff7043;background:linear-gradient(135deg,#ff7043,gold)}.theme-btn-ocean:after{color:#00b4d8;background:linear-gradient(135deg,#00b4d8,#7209b7)}.category-tabs{scrollbar-width:none;gap:8px;margin-bottom:14px;padding:4px 0;display:flex;overflow-x:auto}.category-tabs::-webkit-scrollbar{display:none}.category-tab-btn{border:1px solid var(--glass-border);color:var(--text-muted);cursor:pointer;white-space:nowrap;font-size:.8rem;font-weight:600;font-family:var(--font-display);transition:var(--transition-smooth);background:#ffffff08;border-radius:20px;padding:8px 16px}.category-tab-btn.active{background:var(--gradient-romance);color:var(--text-primary);box-shadow:0 4px 12px var(--accent-rose-glow);border-color:#0000}.input-wrapper{flex-direction:column;width:100%;display:flex;position:relative}.char-counter{color:var(--text-muted);text-align:right;transition:var(--transition-smooth);margin-top:4px;padding-right:4px;font-size:.72rem}.char-counter.limit{color:var(--accent-rose);font-weight:700}