@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--spacing:.25rem;--radius-sm:.25rem;--ease-in-out:cubic-bezier(.4,0,.2,1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.invisible{visibility:hidden}.visible{visibility:visible}.fixed{position:fixed}.static{position:static}.start{inset-inline-start:var(--spacing)}.end{inset-inline-end:var(--spacing)}.block{display:block}.flex{display:flex}.hidden{display:none}.inline{display:inline}.table{display:table}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.resize{resize:both}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.border{border-style:var(--tw-border-style);border-width:1px}.text-end{text-align:end}.text-start{text-align:start}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}:root{--bg-cream:#fffaf0;--bg-gradient-end:#fdf3ff;--bg-card:#fff;--accent-pink:#ffb3d1;--accent-mint:#a8e6cf;--accent-peach:#ffd3b6;--accent-lavender:#c7ceea;--accent-yellow:#fff3b0;--text-primary:#5a4a42;--text-secondary:#8b7b73;--text-muted:#b5a89f;--cloud-white:#fff;--cloud-shadow:#c8b4aa33;--shadow-soft:0 8px 32px #b4a09626;--shadow-glow:0 0 40px #ffb3d14d;--radius:24px;--radius-sm:16px;--font-display:"Mitr","IBM Plex Sans Thai",sans-serif;--font-body:"IBM Plex Sans Thai","Mitr",sans-serif;--border-color:#0000000d}[data-theme=dark]{--bg-cream:#1a1a2e;--bg-gradient-end:#16213e;--bg-card:#252542;--accent-pink:#ff6b9d;--accent-mint:#6bcf9f;--accent-peach:#ffb088;--accent-lavender:#a8b4e8;--accent-yellow:#ffe066;--text-primary:#f0e6e0;--text-secondary:#b8a89f;--text-muted:#7a6a62;--cloud-white:#2a2a4a;--cloud-shadow:#0000004d;--shadow-soft:0 8px 32px #0000004d;--shadow-glow:0 0 40px #ff6b9d33;--border-color:#ffffff1a}body{font-family:var(--font-body);background:linear-gradient(180deg,var(--bg-cream)0%,var(--bg-gradient-end)100%);color:var(--text-primary);overscroll-behavior-y:none;-webkit-overflow-scrolling:touch;letter-spacing:.01em;min-height:100dvh;font-weight:400;line-height:1.6;position:relative;overflow-x:hidden}.bg-gradient-animated{z-index:0;background:linear-gradient(45deg,#fffaf0,#fff0f5,#f0f8ff,#fff5ee,#fffaf0) 0 0/400% 400%;animation:15s infinite gradientShift;position:fixed;inset:0}[data-theme=dark] .bg-gradient-animated{background:linear-gradient(45deg,#1a1a2e,#16213e,#1a1a2e,#0f0f23,#1a1a2e)}@keyframes gradientShift{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}.floating-shapes{pointer-events:none;z-index:0;position:fixed;inset:0;overflow:hidden}.shape{opacity:.4;filter:blur(40px);border-radius:50%;animation:20s ease-in-out infinite floatShape;position:absolute}[data-theme=dark] .shape{opacity:.15}.shape-1{background:var(--accent-pink);width:300px;height:300px;animation-delay:0s;top:-100px;left:-100px}.shape-2{background:var(--accent-mint);width:250px;height:250px;animation-duration:25s;animation-delay:-5s;top:50%;right:-80px}.shape-3{background:var(--accent-lavender);width:200px;height:200px;animation-duration:22s;animation-delay:-10s;bottom:-50px;left:30%}.shape-4{background:var(--accent-peach);width:150px;height:150px;animation-duration:18s;animation-delay:-7s;top:30%;left:10%}@keyframes floatShape{0%,to{transform:translate(0)scale(1)}25%{transform:translate(30px,-30px)scale(1.1)}50%{transform:translate(-20px,20px)scale(.9)}75%{transform:translate(20px,30px)scale(1.05)}}.clouds-bg{pointer-events:none;z-index:0;position:fixed;inset:0;overflow:hidden}.cloud{background:var(--cloud-white);opacity:.7;will-change:transform;backface-visibility:hidden;border-radius:100px;animation:20s ease-in-out infinite floatCloud;position:absolute;transform:translateZ(0);box-shadow:0 10px 40px #ffb3d133}[data-theme=dark] .cloud{opacity:.3;box-shadow:0 10px 40px #0000004d}.cloud:before,.cloud:after{content:"";background:var(--cloud-white);border-radius:50%;position:absolute}.cloud-1{width:120px;height:40px;animation-delay:0s;top:10%;left:-150px}.cloud-1:before{width:50px;height:50px;top:-25px;left:20px}.cloud-1:after{width:35px;height:35px;top:-15px;left:60px}.cloud-2{width:100px;height:35px;animation-duration:25s;animation-delay:-5s;top:25%;left:-120px}.cloud-2:before{width:40px;height:40px;top:-20px;left:15px}.cloud-2:after{width:30px;height:30px;top:-12px;left:50px}.cloud-3{width:80px;height:30px;animation-duration:22s;animation-delay:-10s;top:60%;left:-100px}.cloud-3:before{width:35px;height:35px;top:-18px;left:10px}.cloud-3:after{width:25px;height:25px;top:-10px;left:40px}.cloud-4{width:90px;height:32px;animation-duration:28s;animation-delay:-15s;top:80%;left:-110px}.cloud-4:before{width:38px;height:38px;top:-19px;left:12px}.cloud-4:after{width:28px;height:28px;top:-11px;left:45px}@keyframes floatCloud{0%{transform:translate(0)}to{transform:translate(calc(100vw + 200px))}}.sparkles{pointer-events:none;z-index:1;position:fixed;inset:0}.sparkle{opacity:0;background:#fff;border-radius:50%;width:4px;height:4px;animation:3s ease-in-out infinite sparkle;position:absolute;box-shadow:0 0 6px 2px #fffc}.sparkle:first-child{animation-delay:0s;top:20%;left:10%}.sparkle:nth-child(2){animation-delay:.5s;top:40%;left:85%}.sparkle:nth-child(3){animation-delay:1s;top:70%;left:20%}.sparkle:nth-child(4){animation-delay:1.5s;top:30%;left:70%}.sparkle:nth-child(5){animation-delay:2s;top:80%;left:60%}.sparkle:nth-child(6){animation-delay:2.5s;top:15%;left:50%}@keyframes sparkle{0%,to{opacity:0;transform:scale(0)}50%{opacity:1;transform:scale(1)}}#confettiCanvas{pointer-events:none;z-index:9999;width:100%;height:100%;position:fixed;top:0;left:0}.app{z-index:1;width:100%;max-width:500px;margin:0 auto;padding:16px 16px 120px;position:relative}@media screen and (min-width:600px){.app{max-width:min(750px,85vw)}}@media screen and (min-width:1024px){.app{max-width:min(900px,80vw)}}.header{justify-content:space-between;align-items:center;margin-bottom:12px;padding:8px 0;display:flex}.logo{align-items:center;gap:8px;display:flex}.logo-icon{filter:drop-shadow(0 4px 8px #ffb3d166);font-size:32px;animation:2s ease-in-out infinite catBounce}@keyframes catBounce{0%,to{transform:translateY(0)rotate(0)}25%{transform:translateY(-8px)rotate(-5deg)}75%{transform:translateY(-4px)rotate(5deg)}}.logo-text{font-family:var(--font-display);align-items:center;font-size:26px;font-weight:600;display:flex}.logo-char{color:#d4a5a5;text-shadow:0 2px 4px #d4a5a54d,0 0 20px #ffb6c133;animation:2s ease-in-out infinite logoWave;display:inline-block}.logo-char.drop{color:#c9a0dc;text-shadow:0 2px 4px #c9a0dc4d,0 0 20px #dda0dd33}[data-theme=dark] .logo-char{color:#f9a8d4;text-shadow:0 2px 8px #f9a8d466,0 0 20px #f9a8d44d}[data-theme=dark] .logo-char.drop{color:#c4b5fd;text-shadow:0 2px 8px #c4b5fd66,0 0 20px #c4b5fd4d}@keyframes logoWave{0%,to{transform:translateY(0)}25%{transform:translateY(-4px)}50%{transform:translateY(0)}75%{transform:translateY(0)}}@keyframes logoShine{0%,to{filter:brightness()}50%{filter:brightness(1.1)}}.header-actions{gap:8px;display:flex}.btn-icon-header{background:var(--bg-card);cursor:pointer;width:40px;height:40px;box-shadow:var(--shadow-soft);color:var(--text-secondary);border:2px solid #0000;border-radius:50%;justify-content:center;align-items:center;font-size:16px;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex}.btn-icon-header:hover{border-color:var(--accent-pink);box-shadow:var(--shadow-glow);color:var(--accent-pink);transform:scale(1.1)}.btn-icon-header.muted{opacity:.6;color:var(--text-muted)}.my-critter-bar{background:var(--bg-card);border-radius:var(--radius);box-shadow:var(--shadow-soft);border:2px solid #0000;align-items:center;gap:12px;margin-bottom:20px;padding:14px 18px;transition:all .3s;display:flex;position:relative;overflow:hidden}.my-critter-bar:before{display:none!important}[data-theme=dark] .my-critter-bar:before{display:none}@keyframes shimmer{0%{left:-100%}to{left:100%}}.my-critter-bar.offline{opacity:.7;border-color:var(--accent-pink)}.logo{align-items:center;display:flex}.logo-text{font-family:var(--font-display);background:0 0;font-size:28px;font-weight:700;line-height:1;display:flex}.logo-char{-webkit-text-fill-color:transparent;color:#ff8c61;transform-origin:bottom;filter:drop-shadow(0 2px 2px #fa729833);background:linear-gradient(135deg,#ff8c61,#fa7298);-webkit-background-clip:text;background-clip:text;animation:3s ease-in-out infinite logoWave;display:inline-block}.my-critter-avatar{background:linear-gradient(135deg,var(--accent-peach),var(--accent-pink));cursor:pointer;border-radius:50%;justify-content:center;align-items:center;width:52px;height:52px;font-size:30px;display:flex;box-shadow:0 4px 15px #ffb3d166}.emoji-breathe-wrapper{justify-content:center;align-items:center;width:100%;height:100%;animation:4s ease-in-out infinite avatarBreathe;display:flex}.my-critter-avatar:hover .emoji-breathe-wrapper{animation-play-state:paused}.emoji-hover-target{will-change:transform;justify-content:center;align-items:center;width:100%;height:100%;transition:transform .4s cubic-bezier(.34,1.56,.64,1);display:flex}.my-critter-avatar:hover .emoji-hover-target{transform:scale(1.35)rotate(-12deg)}.my-critter-avatar:hover{box-shadow:0 8px 25px #ffb3d199;transform:none!important}@keyframes avatarBreathe{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}@keyframes avatarPulse{0%{box-shadow:0 4px 15px #ffb3d166}to{box-shadow:0 8px 25px #ffb3d199}}.my-critter-info{flex:1}.my-critter-name{cursor:pointer;border-radius:10px;margin-bottom:2px;padding:2px 10px;font-size:16px;font-weight:600;transition:all .2s;display:inline-block}.my-critter-name:hover{background:linear-gradient(135deg,var(--accent-peach),var(--accent-pink));color:#fff}.my-critter-status{color:var(--text-secondary);align-items:center;gap:6px;font-size:12px;display:flex}.status-dot{background:var(--text-muted);border-radius:50%;width:8px;height:8px;transition:all .3s}.status-dot.connected{background:var(--accent-mint);box-shadow:0 0 12px var(--accent-mint)}.status-dot.connecting{background:var(--accent-peach);animation:1s ease-in-out infinite statusBlink}.status-dot.reconnecting{background:#fbbf24;animation:.5s ease-in-out infinite statusBlink}.status-dot.disconnected{background:#ef4444;box-shadow:0 0 8px #ef444480}@keyframes statusPulse{0%,to{box-shadow:0 0 8px var(--accent-mint)}50%{box-shadow:0 0 16px var(--accent-mint),0 0 24px var(--accent-mint)}}@keyframes statusBlink{0%,to{opacity:1}50%{opacity:.4}}.empty-state{text-align:center;padding:50px 20px;animation:.8s fadeInUp}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.empty-critter-container{width:220px;height:220px;margin:0 auto 24px;position:relative}.empty-cloud{background:var(--cloud-white);border-radius:60px;width:180px;height:60px;animation:6s ease-in-out infinite cloudFloat;position:absolute;bottom:0;left:50%;transform:translate(-50%);box-shadow:0 8px 30px #ffb3d14d}[data-theme=dark] .empty-cloud{box-shadow:0 8px 30px #0006}.empty-cloud:before,.empty-cloud:after{content:"";background:var(--cloud-white);border-radius:50%;position:absolute}.empty-cloud:before{width:75px;height:75px;top:-38px;left:30px}.empty-cloud:after{width:55px;height:55px;top:-28px;left:90px}@keyframes cloudFloat{0%,to{transform:translate(-50%)translateY(0)scale(1)}50%{transform:translate(-50%)translateY(-8px)scale(1.02)}}.empty-critter{filter:drop-shadow(0 10px 20px #ffb3d166);font-size:100px;animation:2.5s ease-in-out infinite critterWave;position:absolute;top:5px;left:50%;transform:translate(-50%)}@keyframes critterWave{0%,to{transform:translate(-50%)rotate(0)scale(1)}25%{transform:translate(-50%)rotate(-10deg)scale(1.03)}75%{transform:translate(-50%)rotate(10deg)scale(1.03)}}.empty-message{font-family:var(--font-display);color:var(--text-primary);background:linear-gradient(135deg,var(--text-primary),var(--accent-pink));-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:8px;font-size:24px;font-weight:700}.empty-hint{color:var(--text-secondary);margin-bottom:24px;font-size:15px;line-height:1.6}.empty-modes{color:var(--text-muted);flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;font-size:13px;display:inline-flex}.empty-modes svg{vertical-align:middle;stroke:var(--text-muted)}.empty-actions{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.empty-actions .btn{padding:14px 24px;font-size:15px}.empty-footer-mobile{text-align:center;margin-top:20px;display:block}.app-footer{padding:16px 20px;padding-bottom:calc(16px + env(safe-area-inset-bottom));z-index:50;flex-direction:column;align-items:center;width:100%;max-width:700px;display:flex;position:fixed;bottom:0;left:50%;transform:translate(-50%)}.app-footer.no-peers{display:none}.empty-feedback{margin-top:20px}.feedback-badge{background:linear-gradient(135deg,var(--accent-pink),#ff8fab);color:#fff;font-family:var(--font-body);cursor:pointer;border:none;border-radius:50px;justify-content:center;align-items:center;gap:6px;padding:10px 24px;font-size:14px;font-weight:600;transition:all .3s;display:inline-flex;box-shadow:0 4px 15px #ff6b9d66}.feedback-badge svg{stroke:#fff}.feedback-badge:hover{transform:translateY(-2px)scale(1.05);box-shadow:0 6px 20px #ff6b9d80}.feedback-badge:active{transform:scale(.98)}.feedback-btn{background:linear-gradient(135deg,var(--accent-pink),#ff8fab);color:#fff;font-family:var(--font-body);cursor:pointer;border:none;border-radius:50px;justify-content:center;align-items:center;gap:6px;padding:10px 24px;font-size:14px;font-weight:600;transition:all .3s;display:inline-flex;box-shadow:0 4px 15px #ff6b9d66}.feedback-btn svg{stroke:#fff}.feedback-btn:hover{transform:translateY(-2px)scale(1.05);box-shadow:0 6px 20px #ff6b9d80}.feedback-btn:active{transform:scale(.98)}.footer-credit{color:var(--text-muted);opacity:.6;margin-top:8px;font-size:12px}.btn{font-family:var(--font-body);cursor:pointer;border:none;border-radius:50px;align-items:center;gap:8px;padding:14px 24px;font-size:14px;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden}.btn:before{content:"";background:linear-gradient(90deg,#0000,#ffffff4d,#0000);width:100%;height:100%;transition:left .5s;position:absolute;top:0;left:-100%}.btn:hover:before{left:100%}.btn-pastel{background:var(--bg-card);color:var(--text-primary);box-shadow:var(--shadow-soft);border:2px solid #0000}.btn-pastel .btn-icon{background:#00000014;border-radius:50%;justify-content:center;align-items:center;width:22px;height:22px;font-size:12px;font-weight:700;display:inline-flex}.btn-pastel .btn-icon svg{stroke:currentColor;width:14px;height:14px}.btn-pastel:hover{box-shadow:var(--shadow-glow);transform:translateY(-3px)}.btn-pastel.pink .btn-icon{color:#d85d8f;background:#ffb3d14d}.btn-pastel.mint .btn-icon{color:#4a9d7c;background:#a8e6cf4d}.btn-pastel.pink:hover{background:var(--accent-pink);border-color:var(--accent-pink);color:#fff}.btn-pastel.pink:hover .btn-icon{color:#fff;background:#ffffff4d}.btn-pastel.mint:hover{background:var(--accent-mint);border-color:var(--accent-mint)}.btn-pastel.mint:hover .btn-icon{color:#2d6a4f;background:#ffffff4d}.btn-pastel.lavender .btn-icon{color:#6b73a0;background:#c7ceea4d}.btn-pastel.lavender:hover{background:var(--accent-lavender);border-color:var(--accent-lavender);color:#fff}.btn-pastel.lavender:hover .btn-icon{color:#fff;background:#ffffff4d}.btn-accept{background:linear-gradient(135deg,var(--accent-mint),var(--accent-peach));color:var(--text-primary);text-align:center;flex:1;justify-content:center}.btn-accept:hover{transform:scale(1.03)translateY(-2px);box-shadow:0 8px 30px #a8e6cf80}[data-theme=dark] .btn-accept:hover{box-shadow:0 8px 30px #6bcf9f4d}.btn-reject{background:var(--bg-card);color:var(--text-secondary);text-align:center;border:2px solid var(--accent-pink);flex:1;justify-content:center}.btn-reject:hover{background:var(--accent-pink);color:#fff}.btn-close-modal{background:linear-gradient(135deg,var(--accent-pink),var(--accent-peach));color:#fff;width:100%;margin-top:16px}.btn-close-modal:hover{box-shadow:var(--shadow-glow);transform:translateY(-2px)}.peers-section{margin-bottom:20px;animation:.6s fadeInUp;display:none}.peers-section.show{display:block}.section-title{color:var(--text-secondary);justify-content:space-between;align-items:center;margin-bottom:16px;font-size:14px;font-weight:600;display:flex}.peer-count{background:linear-gradient(135deg,var(--accent-pink),var(--accent-peach));color:#fff;border-radius:20px;padding:6px 14px;font-size:12px;font-weight:700;box-shadow:0 4px 15px #ffb3d166}.peers-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:20px;display:grid}.peer-card{-webkit-backdrop-filter:blur(12px);border-radius:var(--radius);cursor:pointer;background:#ffffffe6;border:2px solid #fffc;flex-direction:column;align-items:center;padding:24px 14px;transition:all .4s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:visible;box-shadow:0 4px 6px #5a4a420d,0 10px 20px #ffb3d126}[data-theme=dark] .peer-card{background:#252542e6;border-color:#ffffff1a;box-shadow:0 4px 6px #0003,0 10px 20px #0000004d}.peer-card.entering{animation:.6s cubic-bezier(.34,1.56,.64,1) both cardEnter}@keyframes cardEnter{0%{opacity:0;transform:scale(.5)translateY(40px)rotate(-10deg)}to{opacity:1;transform:scale(1)translateY(0)rotate(0)}}.peer-card:hover{box-shadow:0 20px 40px #ffb3d14d,0 0 0 3px var(--accent-pink);border-color:var(--accent-pink);transform:translateY(-12px)scale(1.02)}[data-theme=dark] .peer-card:hover{box-shadow:0 20px 40px #ff6b9d33,0 0 0 3px var(--accent-pink)}.peer-card:focus-visible{box-shadow:0 20px 40px #ffb3d14d,0 0 0 4px var(--accent-lavender);border-color:var(--accent-lavender);outline:none;transform:translateY(-12px)scale(1.02)}[data-theme=dark] .peer-card:focus-visible{box-shadow:0 20px 40px #a8b4e84d,0 0 0 4px var(--accent-lavender)}.peer-card.drag-over{border-color:var(--accent-mint);box-shadow:0 0 30px var(--accent-mint);transform:scale(1.08)}.peer-card.drag-over .drop-overlay{opacity:1}.drop-overlay{border-radius:var(--radius);opacity:0;z-index:10;background:linear-gradient(135deg,#a8e6cff2,#ffd3b6f2);flex-direction:column;justify-content:center;align-items:center;transition:opacity .3s;display:flex;position:absolute;inset:0}.drop-icon{font-size:36px;animation:.6s ease-in-out infinite dropBounce}@keyframes dropBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.drop-text{color:var(--text-primary);margin-top:8px;font-size:13px;font-weight:700}.peer-cloud{background:var(--cloud-white);border-radius:38px;width:85px;height:38px;margin-bottom:10px;animation:5s ease-in-out infinite peerCloudFloat;position:relative;box-shadow:0 6px 20px #ffb3d140}[data-theme=dark] .peer-cloud{box-shadow:0 6px 20px #0006}.peer-cloud:before,.peer-cloud:after{content:"";background:var(--cloud-white);border-radius:50%;position:absolute}.peer-cloud:before{width:32px;height:32px;top:-16px;left:16px}.peer-cloud:after{width:24px;height:24px;top:-10px;left:42px}@keyframes peerCloudFloat{0%,to{transform:translateY(0)scale(1)}50%{transform:translateY(-6px)scale(1.03)}}.peer-critter{z-index:10;will-change:transform;filter:drop-shadow(0 6px 12px #ffb3d166);font-size:44px;transition:all .4s cubic-bezier(.34,1.56,.64,1);position:absolute;top:-32px;left:50%;transform:translate(-50%)}.peer-card:hover .peer-critter{filter:drop-shadow(0 10px 20px #ffb3d180);transform:translate(-50%)scale(1.25)rotate(-10deg)}[data-theme=dark] .peer-card:hover .peer-critter{filter:drop-shadow(0 10px 20px #ff6b9d66)}.peer-name{color:var(--text-primary);text-align:center;margin-top:10px;font-size:14px;font-weight:700}.peer-device{color:var(--text-secondary);margin-top:2px;font-size:11px}.heart-float{opacity:0;pointer-events:none;font-size:20px;position:absolute;top:0;right:0}.peer-card:hover .heart-float{animation:1s ease-out forwards floatHeart}@keyframes floatHeart{0%{opacity:1;transform:translateY(0)scale(.5)}to{opacity:0;transform:translateY(-40px)scale(1.2)}}.transfer-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;background:#00000080;justify-content:center;align-items:center;animation:.4s overlayFadeIn;display:flex;position:fixed;inset:0}.transfer-overlay.closing{animation:.4s forwards overlayFadeOut}@keyframes overlayFadeIn{0%{opacity:0;-webkit-backdrop-filter:blur();backdrop-filter:blur()}to{opacity:1;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}}@keyframes overlayFadeOut{0%{opacity:1;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}to{opacity:0;-webkit-backdrop-filter:blur();backdrop-filter:blur()}}.transfer-overlay.complete{animation:.4s overlayFadeIn}.transfer-card{background:#fffffff2;border-radius:24px;width:90%;max-width:360px;padding:32px 24px;animation:.5s cubic-bezier(.34,1.56,.64,1) cardSlideUp;position:relative;overflow:hidden;box-shadow:0 20px 60px #0000004d}.transfer-card.card-closing{animation:.4s forwards cardSlideDown}@keyframes cardSlideUp{0%{opacity:0;transform:scale(.9)translateY(30px)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes cardSlideDown{0%{opacity:1;transform:scale(1)translateY(0)}to{opacity:0;transform:scale(.9)translateY(20px)}}.transfer-bg{pointer-events:none;position:absolute;inset:0;overflow:hidden}.transfer-wave{background:linear-gradient(135deg,var(--accent-mint)0%,var(--accent-peach)50%,var(--accent-pink)100%);opacity:.1;border-radius:40%;width:200%;height:200%;animation:2s linear infinite wave;position:absolute;bottom:-50%;left:-50%}.transfer-wave.wave-2{opacity:.08;animation-delay:-1s}@keyframes wave{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.transfer-content{z-index:1;flex-direction:column;align-items:center;gap:16px;display:flex;position:relative}.transfer-emoji{filter:drop-shadow(0 4px 12px #00000026);font-size:64px}.transfer-emoji.pulse{animation:1s ease-in-out infinite emojiPulse}.transfer-emoji.bounce{animation:.6s cubic-bezier(.34,1.56,.64,1) emojiBounce}@keyframes emojiPulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}@keyframes emojiBounce{0%{transform:scale(.5)}50%{transform:scale(1.2)}to{transform:scale(1)}}.transfer-status-row{align-items:center;gap:8px;font-size:18px;font-weight:700;display:flex}.transfer-status-icon{font-size:20px}.transfer-e2e-badge{color:#10b981;background:#10b9811a;border-radius:12px;align-items:center;gap:4px;margin-top:-8px;padding:4px 10px;font-size:11px;display:flex}.transfer-e2e-badge svg{stroke:#10b981}[data-theme=dark] .transfer-e2e-badge{color:#34d399;background:#10b98126}[data-theme=dark] .transfer-e2e-badge svg{stroke:#34d399}.transfer-badges{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;display:flex}.transfer-connection-badge{border-radius:12px;align-items:center;gap:4px;margin-top:-8px;padding:4px 10px;font-size:11px;display:flex}.transfer-connection-badge.direct{color:#8b5cf6;background:#8b5cf61a}.transfer-connection-badge.direct svg{stroke:#8b5cf6}.transfer-connection-badge.stun{color:#3b82f6;background:#3b82f61a}.transfer-connection-badge.stun svg{stroke:#3b82f6}.transfer-connection-badge.relay{color:#f59e0b;background:#f59e0b1a}.transfer-connection-badge.relay svg{stroke:#f59e0b}[data-theme=dark] .transfer-connection-badge.direct{color:#a78bfa;background:#8b5cf626}[data-theme=dark] .transfer-connection-badge.direct svg{stroke:#a78bfa}[data-theme=dark] .transfer-connection-badge.stun{color:#60a5fa;background:#3b82f626}[data-theme=dark] .transfer-connection-badge.stun svg{stroke:#60a5fa}[data-theme=dark] .transfer-connection-badge.relay{color:#fbbf24;background:#f59e0b26}[data-theme=dark] .transfer-connection-badge.relay svg{stroke:#fbbf24}.icon-waiting{animation:2s ease-in-out infinite hourglassRotate}@keyframes hourglassRotate{0%,to{transform:rotate(0)}50%{transform:rotate(180deg)}}.transfer-filename{color:#666;text-overflow:ellipsis;white-space:nowrap;text-align:center;max-width:100%;font-size:14px;overflow:hidden}.transfer-progress-container{width:100%}.transfer-progress-track{background:#e8e8e8;border-radius:8px;width:100%;height:16px;position:relative;overflow:hidden}.transfer-progress-fill{border-radius:6px;height:100%;transition:width .15s ease-out;box-shadow:0 2px 8px #a8e6cf80}.transfer-progress-glow{width:20px;height:20px;box-shadow:0 0 20px var(--accent-mint),0 0 40px var(--accent-pink);background:#fff;border-radius:50%;animation:1s ease-in-out infinite glowPulse;position:absolute;top:50%;transform:translate(-50%,-50%)}[data-theme=dark] .transfer-progress-glow{display:none}[data-theme=dark] .transfer-card{background:#252542f2;box-shadow:0 20px 60px #00000080}[data-theme=dark] .transfer-filename{color:var(--text-secondary)}[data-theme=dark] .transfer-progress-track{background:#ffffff1a}[data-theme=dark] .transfer-progress-fill{box-shadow:none}[data-theme=dark] .transfer-stat{color:var(--text-secondary);background:#ffffff1a}@keyframes glowPulse{0%,to{opacity:.8;transform:translate(-50%,-50%)scale(1)}50%{opacity:1;transform:translate(-50%,-50%)scale(1.2)}}.transfer-card.card-success{animation:.5s forwards cardMorphSuccess}@keyframes cardMorphSuccess{0%{transform:scale(1)}50%{transform:scale(1.02)}to{transform:scale(1)}}.transfer-success-check{color:#fff;background:linear-gradient(135deg,#10b981,#34d399);border-radius:50%;justify-content:center;align-items:center;width:64px;height:64px;animation:.5s cubic-bezier(.68,-.55,.265,1.55) successCheckPop;display:flex}.transfer-success-check svg{width:32px;height:32px}@keyframes successCheckPop{0%{opacity:0;transform:scale(0)rotate(-45deg)}50%{transform:scale(1.2)rotate(0)}to{opacity:1;transform:scale(1)rotate(0)}}.transfer-success-text{font-family:var(--font-display);color:var(--text-primary);font-size:22px;font-weight:600;animation:.4s .2s backwards successTextFade}@keyframes successTextFade{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.transfer-success-file{color:var(--text-secondary);text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:14px;animation:.4s .3s backwards successTextFade;overflow:hidden}.transfer-peer-name{color:var(--text-secondary);margin-top:-8px;font-size:14px;font-weight:600}.transfer-progress-percent{color:#fff;text-shadow:0 1px 2px #0000004d;z-index:1;font-size:11px;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.transfer-stats{flex-wrap:wrap;justify-content:center;gap:16px;margin-top:8px;display:flex}.transfer-cancel-btn{color:var(--accent-pink);font-family:var(--font-body);cursor:pointer;background:0 0;border:2px solid #ff6b9d80;border-radius:50px;margin-top:16px;padding:12px 32px;font-size:14px;font-weight:600;transition:all .3s}.transfer-cancel-btn:hover{background:var(--accent-pink);border-color:var(--accent-pink);color:#fff;transform:scale(1.05)}.transfer-cancel-btn:active{transform:scale(.98)}[data-theme=dark] .transfer-cancel-btn{color:var(--accent-pink);border-color:#ff6b9d66}[data-theme=dark] .transfer-cancel-btn:hover{background:var(--accent-pink);color:#fff}.transfer-error{flex-direction:column;align-items:center;gap:12px;margin-top:16px;display:flex}.transfer-error p{color:#ef4444;margin:0;font-size:14px}.transfer-stat{color:#888;background:#0000000a;border-radius:20px;align-items:center;gap:6px;padding:6px 12px;font-size:13px;display:flex}.stat-icon{justify-content:center;align-items:center;font-size:14px;display:flex}.stat-icon svg{stroke:var(--text-muted)}.transfer-complete-msg{color:var(--accent-mint);font-size:20px;font-weight:700;animation:.5s cubic-bezier(.34,1.56,.64,1) bounceIn}@keyframes bounceIn{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.transfer-section{display:none}.modal{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:1000;padding:20px;padding-top:max(20px,env(safe-area-inset-top));padding-bottom:max(20px,env(safe-area-inset-bottom));padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right));background:#0006;justify-content:center;align-items:center;display:none;position:fixed;inset:0;overflow-y:auto;transform:translate(0)}@media (max-width:768px){.modal{padding:30px 16px;padding-top:max(30px,env(safe-area-inset-top) + 10px);padding-bottom:max(30px,env(safe-area-inset-bottom) + 10px)}}[data-theme=dark] .modal{background:#0009}.modal.show{animation:.3s modalFadeIn;display:flex}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}.modal-content{-webkit-backdrop-filter:blur(20px);border-radius:var(--radius);text-align:center;background:#fffffffa;border:2px solid #fff;width:100%;max-width:360px;padding:32px;animation:.4s cubic-bezier(.34,1.56,.64,1) modalScaleIn;box-shadow:0 25px 60px #ffb3d14d}[data-theme=dark] .modal-content{background:#252542fa;border-color:#ffffff1a;box-shadow:0 25px 60px #00000080}@keyframes modalScaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.modal-icon{filter:drop-shadow(0 8px 16px #ffb3d166);justify-content:center;align-items:center;margin-bottom:20px;font-size:80px;animation:1s ease-in-out infinite modalIconBounce;display:flex}[data-theme=dark] .modal-icon{filter:drop-shadow(0 8px 16px #ff6b9d4d)}@keyframes modalIconBounce{0%,to{transform:translateY(0)scale(1)}50%{transform:translateY(-10px)scale(1.1)}}.modal-critter{margin-bottom:12px;font-size:52px}.modal-title{font-family:var(--font-display);color:var(--text-primary);background:linear-gradient(135deg,var(--text-primary),var(--accent-pink));-webkit-text-fill-color:transparent;-webkit-background-clip:text;justify-content:center;align-items:center;gap:8px;margin-bottom:12px;font-size:22px;font-weight:700;display:flex}.modal-history .modal-title,.modal-text-share .modal-title,.modal-text-view .modal-title{justify-content:flex-start}.modal-title svg{stroke:var(--accent-pink);flex-shrink:0}.modal-sender{color:var(--accent-pink);margin-bottom:4px;font-size:16px;font-weight:700}.modal-file{color:var(--text-secondary);word-break:break-all;background:#ffb3d11a;border-radius:12px;margin-bottom:24px;padding:10px;font-size:13px}.modal-actions{gap:12px;display:flex}.modal-actions-vertical{flex-direction:column;gap:10px;margin-top:16px;display:flex}.modal-actions-vertical .btn{justify-content:center;width:100%}.modal-url{color:var(--text-secondary);word-break:break-all;background:#a8e6cf33;border-radius:12px;margin-top:12px;padding:10px;font-size:12px}.modal-small{max-width:320px}.modal-emoji{max-width:380px}.emoji-grid{grid-template-columns:repeat(4,1fr);gap:12px;max-height:320px;margin:20px 0;padding:8px;display:grid;overflow:hidden auto}.emoji-grid::-webkit-scrollbar{width:6px}.emoji-grid::-webkit-scrollbar-track{background:var(--bg-cream);border-radius:3px}.emoji-grid::-webkit-scrollbar-thumb{background:var(--accent-lavender);border-radius:3px}.emoji-grid::-webkit-scrollbar-thumb:hover{background:var(--accent-pink)}.emoji-option{aspect-ratio:1;background:var(--bg-cream);cursor:pointer;border:3px solid #0000;border-radius:18px;justify-content:center;align-items:center;font-size:32px;transition:all .3s cubic-bezier(.34,1.56,.64,1);display:flex}.emoji-option:hover{background:var(--accent-peach);transform:scale(1.12)rotate(-5deg)}.emoji-option.selected{border-color:var(--accent-pink);background:var(--accent-pink);transform:scale(1.08)}.modal-help{max-width:500px;max-height:85vh;overflow-y:auto}.help-tabs{border-bottom:2px solid var(--border-color);gap:8px;margin-bottom:20px;display:flex}.help-tab{font-family:var(--font-body);color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-bottom:3px solid #0000;flex:1;margin-bottom:-2px;padding:10px 16px;font-size:14px;font-weight:600;transition:all .2s}.help-tab:hover{color:var(--text-primary);background:#ffb3d10d}.help-tab.active{color:var(--accent-pink);border-bottom-color:var(--accent-pink)}.help-content{min-height:200px}.help-section{margin-bottom:24px}.help-section-title{color:var(--text-primary);border-bottom:2px solid var(--accent-pink);margin-bottom:12px;padding-bottom:8px;font-size:16px;font-weight:700}.help-features{margin:12px 0;padding:0;list-style:none}.help-features li{color:var(--text-secondary);background:#ffb3d10d;border-radius:8px;margin-bottom:6px;padding:8px 12px;font-size:13px;line-height:1.5}.help-features li strong{color:var(--text-primary);font-weight:600}.help-steps{flex-direction:column;gap:12px;margin:12px 0;display:flex}.help-step{text-align:left;border-radius:var(--radius-sm);background:linear-gradient(135deg,#ffb3d11a,#a8e6cf1a);border:2px solid #0000;align-items:center;gap:16px;padding:14px;transition:all .3s;display:flex}.help-step:hover{border-color:var(--accent-pink);transform:translate(5px)}.step-icon{background:linear-gradient(135deg,#ffb3d133,#a8e6cf33);border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;font-size:36px;display:flex}.step-text{color:var(--text-primary);font-size:14px;line-height:1.5}.step-text small{color:var(--text-secondary);align-items:center;gap:4px;display:flex}.step-text small svg{flex-shrink:0}.modal-success{max-width:300px}.success-check{color:#fff;background:linear-gradient(135deg,#10b981,#34d399);border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;margin:0 auto 16px;animation:.5s cubic-bezier(.68,-.55,.265,1.55) .2s backwards checkPop;display:flex}.success-check svg{width:28px;height:28px}@keyframes checkPop{0%{transform:scale(0)}to{transform:scale(1)}}.success-text{font-family:var(--font-display);color:var(--text-primary);margin-bottom:20px;font-size:20px;font-weight:600}.success-users{justify-content:center;align-items:center;gap:16px;display:flex}.success-user{flex-direction:column;align-items:center;gap:6px;display:flex}.user-avatar{font-size:36px}.user-label{color:var(--text-secondary);text-overflow:ellipsis;white-space:nowrap;max-width:80px;font-size:12px;overflow:hidden}.success-divider{color:var(--text-muted);margin-top:-20px;font-size:18px}#toastContainer{z-index:2000;pointer-events:none;flex-direction:column;gap:10px;width:90%;max-width:400px;display:flex;position:fixed;top:20px;left:50%;transform:translate(-50%)}.toast{background:var(--bg-card);pointer-events:auto;text-align:center;border:2px solid #0000;border-radius:50px;justify-content:center;align-items:center;gap:12px;padding:14px 24px;font-size:14px;font-weight:600;animation:.4s cubic-bezier(.34,1.56,.64,1) toastSlide;display:flex;box-shadow:0 10px 40px #ffb3d14d}.toast.success{border-color:var(--accent-mint);background:var(--bg-card);color:var(--text-primary);box-shadow:0 10px 40px #a8e6cf66}.toast.error{background:var(--bg-card);color:var(--text-primary);border-color:#f87171;box-shadow:0 10px 40px #f8717166}.toast.warning{border-color:var(--accent-peach);background:var(--bg-card);color:var(--text-primary);box-shadow:0 10px 40px #ffd3b666}.toast.info{border-color:var(--accent-pink);background:var(--bg-card);color:var(--text-primary);box-shadow:0 10px 40px #ffb3d166}.toast-icon{justify-content:center;align-items:center;display:flex}.toast.success .toast-icon svg{stroke:var(--accent-mint)}.toast.error .toast-icon svg{stroke:#f87171}.toast.warning .toast-icon svg{stroke:#f59e0b}.toast.info .toast-icon svg{stroke:var(--accent-pink)}[data-theme=dark] .toast{box-shadow:0 10px 40px #0000004d}[data-theme=dark] .toast.success{background:linear-gradient(135deg,#6bcf9f33,#a8e6cf1a)}[data-theme=dark] .toast.error{background:linear-gradient(135deg,#f8717133,#f871711a)}[data-theme=dark] .toast.warning{background:linear-gradient(135deg,#ffd3b633,#ffd3b61a)}[data-theme=dark] .toast.info{border-color:var(--accent-pink);background:linear-gradient(135deg,var(--accent-pink),#ff8fab);color:#fff}@keyframes toastSlide{0%{opacity:0;transform:translateY(-40px)scale(.85)}50%{opacity:1;transform:translateY(10px)scale(1.05)}to{opacity:1;transform:translateY(0)scale(1)}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:linear-gradient(var(--accent-pink),var(--accent-peach));border-radius:4px}@media (max-width:480px){.app{padding:12px 12px 20px}.peers-grid{grid-template-columns:repeat(2,1fr);gap:16px}.peer-card{padding:20px 10px}.peer-critter{font-size:38px;top:-28px}.empty-state{margin-top:-10px;padding:10px 16px 20px}.empty-critter-container{width:130px;height:130px;margin-bottom:12px}.empty-critter{font-size:58px;top:0}.empty-cloud{width:110px;height:38px}.empty-cloud:before{width:45px;height:45px;top:-22px;left:18px}.empty-cloud:after{width:34px;height:34px;top:-16px;left:55px}.empty-message{margin-bottom:4px;font-size:17px}.empty-hint{margin-bottom:14px;font-size:12px;line-height:1.4}.empty-modes{font-size:10px}.empty-actions{gap:8px}.empty-actions .btn{padding:10px 16px;font-size:12px}.empty-footer-mobile{margin-top:14px;display:block}.empty-footer-mobile .feedback-btn{background:linear-gradient(135deg,var(--accent-pink),#ff8fab);color:#fff;border:none;border-radius:50px;padding:8px 18px;font-size:12px;box-shadow:0 4px 15px #ff6b9d66}.empty-footer-mobile .footer-credit{margin-top:8px;font-size:10px}.app-footer.no-peers{display:none!important}.app-footer.has-peers{padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom));display:flex}.app-footer.has-peers .feedback-btn{background:linear-gradient(135deg,var(--accent-pink),#ff8fab);color:#fff;border:none;border-radius:50px;padding:8px 18px;font-size:12px;box-shadow:0 4px 15px #ff6b9d66}.app-footer.has-peers .footer-credit{margin-top:6px;font-size:10px}.logo-text{font-size:24px}}@media (max-width:380px){.empty-state{margin-top:-15px;padding:5px 12px 16px}.empty-critter-container{width:110px;height:110px;margin-bottom:10px}.empty-critter{font-size:50px}.empty-cloud{width:95px;height:32px}.empty-cloud:before{width:38px;height:38px;top:-19px;left:15px}.empty-cloud:after{width:28px;height:28px;top:-14px;left:48px}.empty-message{font-size:15px}.empty-hint{margin-bottom:12px;font-size:11px}.empty-actions .btn{padding:8px 14px;font-size:11px}.empty-footer-mobile .feedback-btn{padding:6px 14px;font-size:11px}}@media screen and (min-width:600px) and (max-width:1366px){.app{width:90%!important;max-width:750px!important;padding:16px 24px!important}.header{padding:12px 0}.header-title{font-size:28px}.my-info{padding:16px 24px}.my-info-emoji{width:68px;height:68px;font-size:44px}.my-info-name{font-size:20px}.mode-selector{margin:16px 0}.mode-current{padding:12px 20px;font-size:15px}.peers-grid{grid-template-columns:repeat(3,1fr);gap:20px;padding:8px}.peer-card{padding:24px 14px}.peer-emoji{font-size:48px}.peer-name{font-size:15px}.empty-state{margin-top:-10px!important;padding:20px 30px 30px!important}.empty-critter-container{width:140px!important;height:140px!important;margin-bottom:16px!important}.empty-critter{font-size:65px!important}.empty-cloud{width:130px!important;height:45px!important}.empty-message{margin-bottom:8px!important;font-size:22px!important}.empty-hint{margin-bottom:20px!important;font-size:14px!important}.empty-actions{flex-wrap:wrap;justify-content:center;gap:12px}.empty-actions .btn{padding:12px 20px!important;font-size:14px!important}.empty-footer-mobile{margin-top:20px}.empty-footer-mobile .feedback-btn{display:none}}@media screen and (min-width:900px) and (max-width:1366px){.app{max-width:850px!important}.peers-grid{grid-template-columns:repeat(4,1fr)}}@media (min-width:1367px){.app{max-width:900px}.peers-grid{grid-template-columns:repeat(4,1fr)}}@supports (padding-top:env(safe-area-inset-top)){body{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}}.modal-input-modal{text-align:center;width:100%;max-width:320px;margin:0;position:relative}.modal-input-modal .modal-icon{margin:0 auto 12px;animation:none}.modal-input-modal .modal-icon svg{width:40px;height:40px}.modal-input-modal .modal-title{margin-bottom:16px;font-size:20px}.modal-input-modal .modal-actions{gap:8px;margin-top:16px}@media (max-height:600px){.modal-keyboard-aware{align-items:flex-start;padding-top:15vh}.modal-input-modal .modal-icon{display:none}.modal-input-modal .modal-title{margin-bottom:12px;font-size:18px}}@media (max-height:500px){.modal-keyboard-aware{padding-top:10vh}.modal-input-modal{max-width:280px}}.modal-history{flex-direction:column;max-width:420px;max-height:70vh;display:flex}.modal-header{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:16px;display:flex}.modal-close{cursor:pointer;color:var(--text-muted);background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;padding:4px 8px;font-size:20px;transition:all .2s;display:flex}.modal-close svg{stroke:var(--text-muted)}.modal-close:hover{background:var(--border-color);color:var(--text-primary)}.modal-close:hover svg{stroke:var(--text-primary)}.history-list{flex:1;margin:0 -20px;padding:0 20px;overflow-y:auto}.history-empty{text-align:center;color:var(--text-muted);padding:40px 20px}.history-empty-icon{justify-content:center;align-items:center;margin-bottom:12px;font-size:48px;display:flex}.history-empty-icon svg{stroke:var(--text-muted)}.history-item{border-radius:var(--radius-sm);background:var(--bg-cream);align-items:center;gap:12px;margin-bottom:8px;padding:12px;transition:all .2s;display:flex}.history-item:hover{transform:translate(4px)}.history-item.sent{border-left:3px solid var(--accent-mint)}.history-item.received{border-left:3px solid var(--accent-pink)}.history-item.text-message{border-left-color:var(--accent-lavender)}.history-item.text-message .history-icon svg{stroke:var(--accent-lavender)}.history-icon{justify-content:center;align-items:center;font-size:20px;display:flex}.history-icon svg{stroke:var(--accent-mint)}.history-item.received .history-icon svg{stroke:var(--accent-pink)}.history-info{flex-direction:column;flex:1;min-width:0;display:flex}.history-filename{color:var(--text-primary);flex-wrap:nowrap;flex:1;align-items:center;gap:8px;min-width:0;font-weight:600;display:flex}.history-filename-text{white-space:nowrap;text-overflow:ellipsis;flex:0 auto;min-width:0;overflow:hidden}.history-item.text-message-card{background:var(--bg-cream);border-left:3px solid var(--accent-lavender);flex-direction:column;align-items:stretch;gap:6px;padding:12px 14px}.history-item.text-message-card .history-icon{display:none}.history-item.text-message-card .history-info{width:100%}.text-message-header{justify-content:space-between;align-items:center;margin-bottom:4px;display:flex}.text-message-sender{color:var(--text-primary);font-size:13px;font-weight:600}.text-message-actions{align-items:center;gap:8px;display:flex}.text-message-actions .history-time{margin-left:0}.history-text-preview-container{margin:0}.history-text-preview{color:var(--text-primary);background:var(--bg-card);border:1px solid var(--border-color);border-left:4px solid var(--accent-pink);word-break:break-word;box-sizing:border-box;cursor:pointer;white-space:pre-wrap;border-radius:4px 14px 14px;padding:10px 14px;font-size:14px;line-height:1.5;transition:all .2s;box-shadow:0 4px 12px #00000008}.history-info:hover .history-text-preview{border-left-color:var(--accent-lavender);background:var(--bg-cream);transform:translateY(-2px);box-shadow:0 6px 16px #0000000f}[data-theme=dark] .history-text-preview{background:#1e1e2df2;border-color:#ffffff0d}[data-theme=dark] .history-info:hover .history-text-preview{border-left-color:var(--accent-lavender);background:#ffb3d10d}.history-meta{color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;align-items:center;gap:6px;margin-top:4px;font-size:11px;display:flex;overflow:hidden}.history-time{color:var(--text-muted);white-space:nowrap;flex-shrink:0;margin-left:8px;font-size:11px}.history-copy-btn{background:var(--accent-lavender);cursor:pointer;box-sizing:border-box;border:none;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:32px;min-width:32px;max-width:32px;height:32px;padding:8px;font-weight:700;transition:all .2s;display:flex;color:#fff!important}.history-copy-btn:hover{background:var(--accent-pink);transform:scale(1.1)}.history-copy-btn svg{stroke:#fff;width:16px;height:16px}.history-status{border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;font-size:12px;font-weight:700;display:flex}.history-status.success{background:var(--accent-mint);color:#2d6a4f}.history-status.failed{color:#8b3a3a;background:#ffb3b3}.history-actions{border-top:1px solid var(--border-color);text-align:center;margin-top:16px;padding-top:16px}.text-share-content{margin:20px 0}.modal-text-view{max-width:500px;max-height:75vh;overflow-y:auto}.text-view-meta{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;margin-bottom:16px;padding:12px 0;display:flex}.text-view-from{color:var(--accent-pink);font-size:14px;font-weight:600}.text-view-time{color:var(--text-muted);font-size:12px}.text-view-content{background:var(--bg-cream);border-radius:var(--radius-sm);max-height:45vh;color:var(--text-primary);white-space:pre-wrap;word-break:break-word;margin-bottom:20px;padding:20px;font-size:14px;line-height:1.6;overflow-y:auto}@media (max-width:768px){.modal-text-view{width:100%;max-height:70vh}.text-view-content{max-height:50vh;margin-bottom:16px;padding:16px}}.text-view-content::-webkit-scrollbar{width:8px}.text-view-content::-webkit-scrollbar-track{background:var(--bg-card);border-radius:4px}.text-view-content::-webkit-scrollbar-thumb{background:var(--accent-lavender);border-radius:4px}.text-view-content::-webkit-scrollbar-thumb:hover{background:var(--accent-pink)}.text-input-wrap{position:relative}.text-input{border:2px solid var(--border-color);border-radius:var(--radius-sm);width:100%;font-family:var(--font-body);resize:none;background:var(--bg-cream);color:var(--text-primary);padding:14px 50px 14px 14px;font-size:14px;transition:border-color .2s}.text-input:focus{border-color:var(--accent-pink);outline:none}.btn-paste{background:var(--bg-card);cursor:pointer;border:none;border-radius:8px;justify-content:center;align-items:center;padding:8px;font-size:16px;transition:all .2s;display:flex;position:absolute;top:10px;right:10px}.btn-paste svg{stroke:var(--text-secondary)}.btn-paste:hover{background:var(--accent-lavender)}.btn-paste:hover svg{stroke:#fff}.peer-select{margin-top:16px}.peer-select-label{color:var(--text-secondary);text-align:left;margin-bottom:8px;font-size:14px}.peer-select-list{flex-wrap:wrap;justify-content:flex-start;gap:8px;display:flex}.peer-select-item{border:2px solid var(--border-color);background:var(--bg-card);cursor:pointer;border-radius:50px;align-items:center;gap:6px;padding:8px 14px;transition:all .2s;display:flex}.peer-select-item:hover{border-color:var(--accent-pink)}.peer-select-item.selected{border-color:var(--accent-pink);background:var(--accent-pink);color:#fff}.peer-emoji{align-items:center;font-size:18px;line-height:1;display:flex}.peer-name{align-items:center;font-size:13px;font-weight:500;line-height:1;display:flex}.no-peers{color:var(--text-muted);font-size:14px}.modal-actions{justify-content:flex-end;gap:12px;display:flex}.modal-actions .btn{justify-content:center;min-width:80px}.modal-actions .btn:disabled{opacity:.5;cursor:not-allowed}.confirm-overlay{-webkit-backdrop-filter:blur(4px);z-index:2000;background:#00000080;justify-content:center;align-items:center;padding:20px;animation:.2s confirmFadeIn;display:flex;position:fixed;inset:0}@keyframes confirmFadeIn{0%{opacity:0}to{opacity:1}}.confirm-dialog{-webkit-backdrop-filter:blur(20px);text-align:center;background:#fffffffa;border-radius:20px;width:100%;max-width:300px;padding:28px;animation:.3s cubic-bezier(.34,1.56,.64,1) confirmSlideIn;box-shadow:0 20px 50px #0003}[data-theme=dark] .confirm-dialog{background:#252542fa;box-shadow:0 20px 50px #00000080}@keyframes confirmSlideIn{0%{opacity:0;transform:scale(.9)translateY(-10px)}to{opacity:1;transform:scale(1)translateY(0)}}.confirm-icon-wrap{color:#fff;background:linear-gradient(135deg,#fbbf24,#f59e0b);border-radius:50%;justify-content:center;align-items:center;width:52px;height:52px;margin:0 auto 16px;display:flex}.confirm-icon-wrap svg{width:26px;height:26px}.confirm-title{font-family:var(--font-display);color:var(--text-primary);margin-bottom:8px;font-size:18px;font-weight:600}.confirm-message{color:var(--text-secondary);margin-bottom:24px;font-size:14px;line-height:1.5}.confirm-actions{justify-content:center;gap:12px;display:flex}.confirm-btn{font-family:var(--font-body);cursor:pointer;border-radius:50px;min-width:90px;padding:12px 24px;font-size:14px;font-weight:600;transition:all .2s}.confirm-btn-cancel{border:2px solid var(--border-color);background:var(--bg-card);color:var(--text-secondary)}.confirm-btn-cancel:hover{border-color:var(--text-muted);color:var(--text-primary);background:var(--bg-cream)}[data-theme=dark] .confirm-btn-cancel:hover{background:#ffffff1a}.confirm-btn-ok{color:#fff;background:linear-gradient(135deg,#ef4444,#f87171);border:none}.confirm-btn-ok:hover{transform:translateY(-2px);box-shadow:0 6px 16px #ef444466}[data-theme=dark] .confirm-btn-ok:hover{box-shadow:0 6px 16px #ef44444d}.modal-feedback{max-width:380px}.feedback-subtitle{color:var(--text-secondary);margin-bottom:20px;font-size:13px}.feedback-rating{align-items:center;gap:12px;margin-bottom:16px;display:flex}.rating-label{color:var(--text-secondary);font-size:14px}.rating-stars{gap:4px;display:flex}.star-btn{cursor:pointer;opacity:.3;background:0 0;border:none;justify-content:center;align-items:center;padding:4px;font-size:24px;transition:all .2s;display:flex}.star-btn:hover{opacity:.7;transform:scale(1.2)}.star-btn.active{opacity:1;transform:scale(1.1)}.feedback-input{border:2px solid var(--border-color);border-radius:var(--radius-sm);width:100%;font-family:var(--font-body);resize:none;background:var(--bg-cream);color:var(--text-primary);margin-bottom:16px;padding:14px;font-size:14px;transition:border-color .2s}.feedback-input:focus{border-color:var(--accent-pink);outline:none}.feedback-input::placeholder{color:var(--text-muted)}.feedback-success{text-align:center;padding:20px 0}.feedback-success-icon{justify-content:center;align-items:center;margin-bottom:16px;font-size:64px;animation:1s ease-in-out heartBeat;display:flex}@keyframes heartBeat{0%,to{transform:scale(1)}25%{transform:scale(1.1)}50%{transform:scale(1)}75%{transform:scale(1.1)}}.feedback-success-text{font-family:var(--font-display);color:var(--text-primary);font-size:20px;font-weight:600}.app{padding-bottom:80px}.browser-warning-overlay{-webkit-backdrop-filter:blur(10px);z-index:9999;background:#000c;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.browser-warning-card{background:var(--bg-card);border-radius:var(--radius);text-align:center;width:100%;max-width:380px;padding:32px 24px;animation:.4s cubic-bezier(.34,1.56,.64,1) modalScaleIn}.warning-icon{justify-content:center;align-items:center;margin-bottom:16px;font-size:64px;display:flex}.warning-title{font-family:var(--font-display);color:var(--text-primary);margin-bottom:12px;font-size:20px;font-weight:700}.warning-text{color:var(--text-secondary);margin-bottom:16px;font-size:14px;line-height:1.6}.warning-url{color:var(--text-muted);background:var(--bg-cream);word-break:break-all;border-radius:8px;margin-bottom:20px;padding:10px;font-size:12px}.warning-actions{flex-direction:column;gap:10px;display:flex}.warning-actions .btn{justify-content:center;width:100%}.warning-hint{color:var(--text-muted);border-top:1px solid var(--border-color);flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin-top:16px;padding-top:16px;font-size:12px;display:flex}.warning-hint svg{stroke:var(--accent-peach);flex-shrink:0}.warning-actions .btn svg{stroke:currentColor}.mode-selector{margin-bottom:20px;position:relative}.mode-current{background:var(--bg-card);border:2px solid var(--border-color);cursor:pointer;font-family:var(--font-body);border-radius:50px;justify-content:center;align-items:center;gap:10px;width:100%;padding:12px 20px;transition:all .2s;display:flex}.mode-current:hover{border-color:var(--accent-pink)}.mode-icon{align-items:center;font-size:20px;display:flex}.mode-label{color:var(--text-primary);font-size:15px;font-weight:600}.mode-network-name{font-family:var(--font-body);color:var(--accent-mint);background:#a8e6cf26;border-radius:10px;padding:2px 10px;font-size:12px;font-weight:600}.mode-room-code{font-family:var(--font-display);color:var(--accent-pink);letter-spacing:2px;background:#ff6b9d1a;border-radius:8px;padding:2px 8px;font-size:14px;font-weight:700}.mode-arrow{color:var(--text-muted);margin-left:auto;font-size:10px}.mode-backdrop{z-index:99;position:fixed;inset:0}.mode-menu{background:var(--bg-card);border:2px solid var(--border-color);border-radius:var(--radius);z-index:100;padding:8px;animation:.2s modeMenuIn;position:absolute;top:calc(100% + 8px);left:0;right:0;box-shadow:0 10px 40px #00000026}@keyframes modeMenuIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.mode-option{border-radius:var(--radius-sm);cursor:pointer;text-align:left;background:0 0;border:none;align-items:center;gap:12px;width:100%;padding:12px;transition:all .2s;display:flex}.mode-option:hover{background:var(--bg-cream)}.mode-option.active{background:#ff6b9d1a}.mode-option-icon{font-size:24px}.mode-option-text{flex-direction:column;flex:1;gap:2px;display:flex}.mode-option-label{color:var(--text-primary);font-size:14px;font-weight:600}.mode-option-desc{color:var(--text-muted);font-size:12px}.mode-check{color:var(--accent-pink);font-weight:700}.mode-private-info{border-top:1px solid var(--border-color);margin-top:8px;padding:12px}.mode-room-display{justify-content:center;align-items:center;gap:8px;display:flex}.mode-room-label{color:var(--text-secondary);font-size:13px}.mode-room-value{font-family:var(--font-display);letter-spacing:4px;color:var(--accent-pink);font-size:20px;font-weight:700}.mode-copy-btn{background:var(--bg-cream);cursor:pointer;border:none;border-radius:8px;padding:6px 10px;transition:all .2s}.mode-copy-btn:hover{background:var(--accent-mint)}.mode-join-input{flex-direction:column;gap:10px;display:flex}.mode-join-input input{border:2px solid var(--border-color);width:100%;font-family:var(--font-display);letter-spacing:2px;text-align:center;background:var(--bg-card);color:var(--text-primary);border-radius:50px;outline:none;padding:12px 16px;font-size:16px;font-weight:600}.mode-join-input input[type=password]{letter-spacing:4px}.mode-join-input input::placeholder{letter-spacing:0;font-weight:400}.mode-join-input input:focus{border-color:var(--accent-pink)}.mode-join-actions{justify-content:center;gap:8px;display:flex}.mode-join-btn{background:var(--accent-pink);color:#fff;width:100%;font-weight:600;font-family:var(--font-body);cursor:pointer;border:none;border-radius:50px;margin-top:4px;padding:12px 20px;transition:all .2s}.mode-join-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #ffb3d166}.mode-join-error{color:#fff;text-align:center;background:linear-gradient(135deg,#ff6b6b,#ee5a5a);border-radius:12px;margin-bottom:12px;padding:10px 16px;font-size:14px;font-weight:500;animation:.5s shake}.mode-code-display{justify-content:center;gap:6px;margin-bottom:12px;display:flex}.mode-code-digit{border:2px solid var(--border-color);width:38px;height:46px;font-size:20px;font-weight:600;font-family:var(--font-body);color:var(--text-primary);background:var(--bg-card);border-radius:10px;justify-content:center;align-items:center;transition:all .2s;display:flex}.mode-code-digit.filled{border-color:var(--accent-pink);background:linear-gradient(135deg,#ffb3d11a,#ffd3b61a)}.mode-numpad{grid-template-columns:repeat(3,1fr);gap:6px;max-width:240px;margin-bottom:12px;margin-left:auto;margin-right:auto;display:grid}.mode-numpad-btn{font-size:20px;font-weight:600;font-family:var(--font-body);background:var(--bg-card);color:var(--text-primary);cursor:pointer;border:none;border-radius:10px;justify-content:center;align-items:center;padding:12px;transition:all .15s;display:flex;box-shadow:0 2px 8px #0000000d}.mode-numpad-btn:hover{background:var(--accent-pink);color:#fff}.mode-numpad-btn:active{background:var(--accent-pink);color:#fff;transform:scale(.95)}.mode-numpad-clear{background:var(--bg-cream);color:var(--text-muted)}.mode-numpad-delete{background:var(--bg-cream);color:var(--text-secondary)}.mode-numpad-delete svg{width:20px;height:20px}.mode-cancel-btn{background:var(--bg-cream);cursor:pointer;color:var(--text-muted);border:none;border-radius:50px;padding:10px 16px}.mode-create-room{padding:12px}.mode-private-options{padding:8px 0}.mode-back-btn{color:var(--text-secondary);font-family:var(--font-body);cursor:pointer;background:0 0;border:none;margin-bottom:8px;padding:8px 12px;font-size:14px;transition:color .2s}.mode-back-btn:hover{color:var(--accent-pink)}.mode-divider{text-align:center;color:var(--text-muted);align-items:center;margin:16px 0;font-size:13px;display:flex}.mode-divider:before,.mode-divider:after{content:"";border-bottom:1px solid var(--border-color);flex:1}.mode-divider span{padding:0 12px}.mode-join-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#00000080;justify-content:center;align-items:center;padding:20px;animation:.2s fadeIn;display:flex;position:fixed;inset:0}.mode-join-modal{background:var(--bg-card);border-radius:var(--radius);width:100%;max-width:320px;padding:24px;animation:.3s slideUp;box-shadow:0 20px 60px #0000004d}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.mode-join-header{text-align:center;color:var(--text-primary);margin-bottom:16px;font-size:18px;font-weight:700}.mode-join-pwd-input{border:2px solid var(--border-color);width:100%;font-family:var(--font-body);text-align:center;background:var(--bg-card);color:var(--text-primary);border-radius:50px;outline:none;margin-bottom:12px;padding:10px 14px;font-size:14px}.mode-join-pwd-input:focus{border-color:var(--accent-pink)}.mode-join-actions{gap:10px;display:flex}.mode-join-btn{background:var(--accent-pink);color:#fff;font-weight:600;font-family:var(--font-body);cursor:pointer;border:none;border-radius:50px;flex:1;padding:12px;transition:all .2s}.mode-join-btn:disabled{opacity:.5;cursor:not-allowed}.mode-cancel-btn{background:var(--bg-cream);cursor:pointer;color:var(--text-secondary);font-family:var(--font-body);border:none;border-radius:50px;flex:1;padding:12px;font-weight:500}.mode-private-panel{border:2px solid var(--accent-pink);border-radius:var(--radius);text-align:center;background:linear-gradient(135deg,#ffb3d11a,#c7ceea1a);margin-top:12px;padding:16px}.mode-private-panel-header{flex-direction:column;align-items:center;gap:8px;display:flex}.mode-private-panel-header>span{color:var(--text-secondary);font-size:13px}.mode-room-code-big{font-family:var(--font-display);letter-spacing:6px;color:var(--accent-pink);font-size:32px;font-weight:700}.mode-copy-btn-big{background:var(--accent-pink);color:#fff;font-size:13px;font-weight:600;font-family:var(--font-body);cursor:pointer;border:none;border-radius:50px;min-width:120px;padding:8px 16px;transition:background .2s,box-shadow .2s}.mode-copy-btn-big:hover{box-shadow:0 4px 12px #ffb3d166}.mode-private-panel-pwd{color:var(--text-secondary);justify-content:center;align-items:center;gap:6px;margin-top:10px;font-size:13px;display:flex}.mode-private-panel-pwd button{cursor:pointer;background:0 0;border:none;font-size:14px}.mode-join-section{padding:8px 0}.mode-join-header{color:var(--text-primary);text-align:center;margin-bottom:12px;font-size:15px;font-weight:600}.mode-create-header{color:var(--text-primary);text-align:center;margin-bottom:10px;font-weight:600}.mode-password-input{gap:8px;margin-bottom:10px;display:flex}.mode-password-input input{border:2px solid var(--border-color);font-family:var(--font-body);background:var(--bg-card);color:var(--text-primary);border-radius:50px;outline:none;flex:1;padding:10px 14px;font-size:14px}.mode-password-input input:focus{border-color:var(--accent-pink)}.mode-show-pwd,.mode-show-pwd-small{background:var(--bg-cream);cursor:pointer;border:none;border-radius:50px;padding:8px 12px;font-size:16px}.mode-show-pwd-small{padding:4px 8px;font-size:14px}.mode-create-actions{justify-content:center;gap:8px;display:flex}.mode-create-btn{background:var(--accent-mint);color:#fff;width:100%;font-weight:600;font-family:var(--font-body);cursor:pointer;border:none;border-radius:50px;padding:12px 20px;transition:all .2s}.mode-create-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #a8e6cf66}.mode-lock{margin-left:4px;font-size:12px}.mode-password{font-family:monospace}.room-error{color:#fff;text-align:center;background:linear-gradient(135deg,#ff6b6b,#ee5a5a);border-radius:50px;max-width:300px;margin:10px auto;padding:10px 20px;font-size:14px;font-weight:500;animation:.5s shake}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.mode-join-room{border:2px dashed var(--border-color);border-radius:var(--radius-sm);cursor:pointer;width:100%;font-family:var(--font-body);color:var(--text-secondary);background:0 0;margin-top:8px;padding:12px;font-size:14px;transition:all .2s}.mode-join-room:hover{border-color:var(--accent-pink);color:var(--accent-pink)}.mode-svg-icon{width:22px;height:22px;stroke:var(--accent-pink);flex-shrink:0;transition:all .2s}.mode-svg-icon-sm{width:18px;height:18px;stroke:var(--accent-pink);flex-shrink:0;transition:all .2s}.mode-option:hover .mode-svg-icon{stroke:var(--accent-pink);filter:drop-shadow(0 0 4px #ffb3d180)}.mode-option.active .mode-svg-icon{stroke:var(--accent-pink)}.mode-private-label{color:var(--text-secondary);align-items:center;gap:6px;font-size:13px;display:flex}.mode-private-label .mode-svg-icon-sm{stroke:var(--accent-pink)}.mode-copy-btn-big{justify-content:center;align-items:center;gap:6px;display:inline-flex}.mode-copy-btn-big .mode-svg-icon-sm{stroke:#fff}.mode-join-room{justify-content:center;align-items:center;gap:8px;display:flex}.mode-join-room .mode-svg-icon{stroke:var(--text-secondary)}.mode-join-room:hover .mode-svg-icon{stroke:var(--accent-pink)}.mode-join-header{justify-content:center;align-items:center;gap:8px;display:flex}.mode-join-header .mode-svg-icon{stroke:var(--accent-pink)}[data-theme=dark] .mode-menu{background:#252542fa;box-shadow:0 10px 40px #0006}[data-theme=dark] .mode-option:hover{background:#ffffff0d}[data-theme=dark] .mode-copy-btn,[data-theme=dark] .mode-cancel-btn{background:#ffffff1a}[data-theme=dark] .mode-join-input input,[data-theme=dark] .mode-password-input input{background:#ffffff0d}[data-theme=dark] .mode-show-pwd,[data-theme=dark] .mode-show-pwd-small{background:#ffffff1a}.modal-qr{max-width:400px}.qr-container{border-radius:var(--radius-sm);border:3px solid var(--accent-pink);background:#fff;justify-content:center;align-items:center;width:fit-content;margin:20px auto;padding:20px;display:flex;box-shadow:0 8px 30px #ffb3d133}.qr-placeholder{width:200px;height:200px;color:var(--text-muted);justify-content:center;align-items:center;font-size:14px;display:flex}.qr-mode-icon{justify-content:center;align-items:center;display:flex}.qr-mode-icon svg{stroke:var(--accent-pink)}.qr-mode-badge{background:linear-gradient(135deg,var(--accent-pink),var(--accent-lavender));color:#fff;border-radius:50px;align-items:center;gap:6px;margin-bottom:16px;padding:6px 14px;font-size:13px;font-weight:600;display:inline-flex}.qr-mode-badge svg{stroke:#fff;width:16px;height:16px}.qr-room-code{background:#fff3;border-radius:20px;margin-left:4px;padding:2px 8px}.qr-url-row{align-items:center;gap:8px;margin-top:12px;display:flex}.qr-url-row .modal-url{flex:1;margin:0;font-size:11px}.qr-copy-btn{background:var(--bg-cream);cursor:pointer;border:none;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;padding:8px 12px;transition:all .2s;display:flex}.qr-copy-btn svg{stroke:var(--text-secondary)}.qr-copy-btn:hover{background:var(--accent-mint)}.qr-copy-btn:hover svg{stroke:#fff}[data-theme=dark] .qr-copy-btn{background:#ffffff1a}.feedback-attachments{margin-bottom:20px}.attachment-btn{border:2px dashed var(--border-color);border-radius:var(--radius-sm);cursor:pointer;color:var(--text-secondary);background:var(--bg-cream);justify-content:center;align-items:center;gap:8px;width:100%;padding:12px;font-size:14px;transition:all .2s;display:flex}.attachment-btn:hover{border-color:var(--accent-pink);color:var(--accent-pink);background:#fff}.attachment-preview{border-radius:var(--radius-sm);border:2px solid var(--border-color);background:var(--bg-card);justify-content:center;align-items:center;padding:8px;display:flex;position:relative;overflow:hidden}.attachment-preview img{object-fit:contain;border-radius:var(--radius-sm);width:auto;max-width:100%;max-height:200px;display:block}.remove-attachment{color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#00000080;border:none;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;transition:all .2s;display:flex;position:absolute;top:8px;right:8px}.remove-attachment:hover{background:#ef4444;transform:scale(1.1)}[data-theme=dark] .attachment-btn{background:#ffffff0d}[data-theme=dark] .attachment-btn:hover{background:#ffffff1a}.transfer-progress-fill{transition:width linear!important}.transfer-progress-glow{transition:left linear!important}.modal-text-share{max-width:400px}.text-share-content{flex-direction:column;gap:20px;display:flex}.text-input-wrap{width:100%;position:relative}.text-input{border-radius:var(--radius-sm);border:2px solid var(--border-color);background:var(--bg-cream);width:100%;color:var(--text-primary);font-family:var(--font-body);resize:vertical;min-height:100px;max-height:250px;padding:16px 48px 16px 16px;font-size:15px;transition:all .3s;box-shadow:inset 0 2px 6px #00000005}.text-input:focus{border-color:var(--accent-mint);outline:none;box-shadow:0 0 0 3px #a8e6cf33}.btn-paste{background:var(--bg-card);width:32px;height:32px;color:var(--text-secondary);cursor:pointer;box-shadow:var(--shadow-soft);border:none;border-radius:8px;justify-content:center;align-items:center;transition:all .2s;display:flex;position:absolute;top:12px;right:12px}.btn-paste:hover{color:var(--accent-mint);transform:scale(1.05)}.peer-select{flex-direction:column;gap:10px;display:flex}.peer-select-label{color:var(--text-secondary);font-size:14px;font-weight:600}.peer-select-list{flex-wrap:wrap;gap:10px;max-height:150px;padding-right:4px;display:flex;overflow-y:auto}.peer-select-item{background:var(--bg-cream);border:2px solid var(--border-color);cursor:pointer;border-radius:20px;align-items:center;gap:8px;padding:8px 16px;transition:all .2s;display:flex}.peer-select-item:hover{border-color:var(--accent-lavender);background:var(--bg-card)}.peer-select-item.selected{border-color:var(--accent-mint);background:#a8e6cf1a;box-shadow:0 4px 12px #a8e6cf4d}.peer-select-item .peer-emoji{font-size:18px}.peer-select-item .peer-name{color:var(--text-primary);font-size:14px;font-weight:500}.no-peers{color:var(--text-muted);padding:10px 0;font-size:14px;font-style:italic}.fab-container{z-index:100;flex-direction:column;gap:12px;display:flex;position:fixed;bottom:24px;right:24px}.fab-btn{background:linear-gradient(135deg,var(--accent-peach),var(--accent-pink));color:#fff;cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;transition:all .3s cubic-bezier(.34,1.56,.64,1);display:flex;box-shadow:0 4px 20px #ffb3d199}.fab-btn:hover{transform:scale(1.1)translateY(-4px);box-shadow:0 8px 25px #ffb3d1cc}.fab-btn:active{transform:scale(.95)}.fab-btn:focus-visible{outline:3px solid var(--accent-pink);outline-offset:4px}.fab-icon{width:24px;height:24px}.app:has(+.fab-container){padding-bottom:100px}@media screen and (max-width:600px){.app:has(+.fab-container){padding-bottom:120px}}.peer-badge,.peer-select-item,.success-user,.modal-sender{cursor:default;background:var(--bg-cream)!important;font-family:var(--font-body)!important;color:var(--text-primary)!important;border:2px solid #0000!important;border-radius:50px!important;align-items:center!important;gap:8px!important;padding:8px 18px!important;font-size:16px!important;font-weight:600!important;transition:all .2s cubic-bezier(.34,1.56,.64,1)!important;display:inline-flex!important;box-shadow:0 4px 10px #0000000d!important}[data-theme=dark] .peer-badge,[data-theme=dark] .peer-select-item,[data-theme=dark] .success-user,[data-theme=dark] .modal-sender{background:#ffffff1a!important;box-shadow:0 4px 12px #0003!important}button.peer-select-item{cursor:pointer!important;justify-content:center!important;width:100%!important}.peer-badge:hover,button.peer-select-item:hover,.success-user:hover{transform:translateY(-2px)!important;box-shadow:0 6px 16px #0000001a!important}[data-theme=dark] button.peer-select-item:hover{box-shadow:0 6px 16px #0000004d!important}button.peer-select-item.selected{border-color:var(--accent-pink)!important;background:#ffb3d126!important;box-shadow:0 4px 16px #ffb3d14d!important}.peer-emoji,.peer-badge-emoji,.user-avatar{flex-shrink:0!important;justify-content:center!important;align-items:center!important;width:28px!important;height:28px!important;font-size:20px!important;line-height:1!important;display:flex!important}.peer-name,.peer-badge-name,.user-label,.peer-name-text{align-items:center!important;font-size:15px!important;line-height:28px!important;display:flex!important}.peer-select-list{flex-direction:column;gap:10px;max-height:200px;padding:4px;display:flex;overflow-y:auto}.name-input{border:2px solid var(--accent-mint);width:100%;font-size:16px;font-family:var(--font-body);text-align:center;background:var(--bg-card);color:var(--text-primary);border-radius:50px;outline:none;padding:14px 20px;transition:all .3s}.name-input:focus{border-color:var(--accent-pink);transform:scale(1.02);box-shadow:0 0 20px #ffb3d166}[data-theme=dark] .name-input{background:var(--bg-card);border-color:var(--accent-mint)}[data-theme=dark] .name-input:focus{box-shadow:0 0 20px #ff6b9d4d}@media screen and (min-width:600px){.fab-container{bottom:40px;right:40px}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}